Merge pull request #543 from Fisker-Inc/CEC-6085-3

CEC-6085 - TREX Logs refactor and small fixes

src/components/Controls/TRexLogs/index.jsx

@@ -105,7 +105,7 @@ const transformLogs = (logs) =>
   })
     .flat()
 
-const fromatDateForRequest = (date) => {
+const formatDateForRequest = (date) => {
   const getYear = date.toLocaleString("default", { year: "numeric" });
   const getMonth = date.toLocaleString("default", { month: "2-digit" });
   const getDay = date.toLocaleString("default", { day: "2-digit" });
@@ -120,7 +120,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
   const [allLogsFetched, setAllLogsFetched] = useState(false)
   const [blobSize, setBlobSize] = useState(0)
   const [currentOffset, setCurrentOffset] = useState(0)
-  const [currectLogLevels, setCurrentLogLevels] = useState({
+  const [currentLogLevels, setCurrentLogLevels] = useState({
     trace: true,
     debug: true,
     info: true,
@@ -139,7 +139,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
 
   let controller = new AbortController()
   const readBlob = async (offset, count) => {
-    return await api.getTRexLogs(vin, search, fromatDateForRequest(selectedDate), offset, count, "UP", token, controller)
+    return await api.getTRexLogs(vin, search, formatDateForRequest(selectedDate), offset, count, "UP", token, controller)
   }
   const getDesiredSize = () => {
     return pageSize * pageIndex + pageSize
@@ -148,7 +148,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
     return (currentOffset * 100 / blobSize);
   }
   const getFilteredLogs = (logs) => {
-    return logs.filter(log => currectLogLevels[log.level] === true)
+    return logs.filter(log => currentLogLevels[log.level] === true)
   }
   const fetchAllLogs = async () => {
     let fetched = []
@@ -167,7 +167,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
       fetched = transformLogs(result.data).concat(fetched)
       setLogs(fetched)
       if (offset >= result.blobSize) {
-        setMessage(`All log for ${fromatDateForRequest(selectedDate)} fetched`)
+        setMessage(`All T.Rex logs for ${formatDateForRequest(selectedDate)} fetched`)
         setAllLogsFetched(true)
         break
       }
@@ -175,12 +175,15 @@ const TRexLogsTable = ({ vin, token, classes }) => {
 
     if (fetched.length === 0) {
       if (logs.length !== 0) {
-        setMessage(`No more T.Rex logs for ${fromatDateForRequest(selectedDate)}`)
+        setMessage(`No more T.Rex logs for ${formatDateForRequest(selectedDate)}`)
         return
       }
       setTotal(0)
-      const msg = `Cannot fetch logs for ${fromatDateForRequest(selectedDate)}`
-      setMessage(msg)
+      if (fetched.error) {
+        setMessage(`Error fetching T.Rex logs for ${formatDateForRequest(selectedDate)}`)
+      } else {
+        setMessage(`No T.Rex logs for ${formatDateForRequest(selectedDate)}`)
+      }
       return
     }
     setCurrentOffset(offset)
@@ -221,7 +224,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
     })();
     return () => controller?.abort()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin, token, search, pageIndex, pageSize, selectedDate, currectLogLevels]);
+  }, [vin, token, search, pageIndex, pageSize, selectedDate, currentLogLevels]);
 
   const handleChangePageSize = (event) => {
     setPageSize(parseInt(event.target.value, 10));
@@ -241,18 +244,20 @@ const TRexLogsTable = ({ vin, token, classes }) => {
   const handleNewFilter = (event) => {
     setPageIndex(0)
     setCurrentLogLevels({
-      ...currectLogLevels,
+      ...currentLogLevels,
       [event.target.defaultValue]: event.target.checked,
     });
   };
 
   const handleSearch = (query) => {
-    setPageIndex(0);
-    setCurrentOffset(0)
-    setLogs([])
-    setAllLogsFetched(false)
-    setBlobSize(0)
-    setSearch(query);
+    if (query !== search) {
+      setPageIndex(0);
+      setCurrentOffset(0)
+      setLogs([])
+      setAllLogsFetched(false)
+      setBlobSize(0)
+      setSearch(query);
+    }
   };
 
   return (
@@ -304,7 +309,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
 
             <TableCell align="center">
               {
-                blobSize === 0 ? `No logs for ${fromatDateForRequest(selectedDate)}` :
+                blobSize === 0 ? `No logs for ${formatDateForRequest(selectedDate)}` :
                   `Read ${getReadPercentage().toFixed(2)}% of logs`
               }
               {