From 749f1672da16a7eb16b67c741661995f538c27d6 Mon Sep 17 00:00:00 2001
From: Eduard Voronkin <116690094+eduardvoronkin@users.noreply.github.com>
Date: Fri, 17 Feb 2023 14:53:36 -0800
Subject: [PATCH 1/5] CEC-3577: fetch T.Rex log from the cloud (#283)

* CEC-3577: fetch T.Rex log from the cloud

* tabs?

* CSS

* smells

* fix smells and warnings

* suggestions
---
 .../App/__snapshots__/App.test.js.snap        |  28 +-
 src/components/Cars/Status/TRexLogsTab.jsx    |  36 +++
 .../Status/__snapshots__/index.test.jsx.snap  |  28 +-
 src/components/Cars/Status/index.jsx          |   5 +
 src/components/Controls/TRexLogs/index.jsx    | 258 ++++++++++++++++++
 src/services/__mocks__/vehiclesAPI.js         |  35 +++
 src/services/vehiclesAPI.js                   |  11 +
 7 files changed, 397 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Cars/Status/TRexLogsTab.jsx
 create mode 100644 src/components/Controls/TRexLogs/index.jsx

diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index 8878484..d1a399a 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -9851,7 +9851,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                       <span
                         class="MuiTab-wrapper"
                       >
-                        ECUs
+                        T.Rex logs
                       </span>
                       <span
                         class="MuiTouchRipple-root"
@@ -9869,7 +9869,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                       <span
                         class="MuiTab-wrapper"
                       >
-                        Remote Commands
+                        ECUs
                       </span>
                       <span
                         class="MuiTouchRipple-root"
@@ -9883,6 +9883,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                       role="tab"
                       tabindex="-1"
                       type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        Remote Commands
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
+                    <button
+                      aria-controls="tabpanel-8"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-8"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
                     >
                       <span
                         class="MuiTab-wrapper"
@@ -10124,6 +10142,12 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-7"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-8"
+              hidden=""
+              id="tabpanel-8"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>
diff --git a/src/components/Cars/Status/TRexLogsTab.jsx b/src/components/Cars/Status/TRexLogsTab.jsx
new file mode 100644
index 0000000..8dc6260
--- /dev/null
+++ b/src/components/Cars/Status/TRexLogsTab.jsx
@@ -0,0 +1,36 @@
+import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
+import { useParams } from "react-router";
+
+import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import TRexLogsTable from "../../Controls/TRexLogs";
+import useStyles from "../../useStyles";
+
+const MainForm = () => {
+  const { vin } = useParams();
+  const classes = useStyles();
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6" className={classes.labelInline}>
+        T.Rex Logs
+      </Typography>
+      <TRexLogsTable vin={vin} token={token} classes={classes} />
+    </div>
+  );
+};
+
+const TRexLogsTab = () => (
+  <VehicleProvider>
+    <MainForm />
+  </VehicleProvider>
+);
+
+export default TRexLogsTab;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 0e24f78..b08cc58 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -135,7 +135,7 @@ exports[`CarStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      ECUs
+                      T.Rex logs
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -153,7 +153,7 @@ exports[`CarStatus Render 1`] = `
                     <span
                       class="MuiTab-wrapper"
                     >
-                      Remote Commands
+                      ECUs
                     </span>
                     <span
                       class="MuiTouchRipple-root"
@@ -167,6 +167,24 @@ exports[`CarStatus Render 1`] = `
                     role="tab"
                     tabindex="-1"
                     type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      Remote Commands
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
+                  <button
+                    aria-controls="tabpanel-8"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-8"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
                   >
                     <span
                       class="MuiTab-wrapper"
@@ -352,6 +370,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-7"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-8"
+            hidden=""
+            id="tabpanel-8"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 1ea797f..94a49c6 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -17,6 +17,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
+import TRexLogsTab from "./TRexLogsTab"
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -42,6 +43,10 @@ const TabViews = [
     label: "CAN Signals",
     component: CANSignalsTab,
   },
+  {
+    label: "T.Rex logs",
+    component: TRexLogsTab,
+  },
   {
     label: "ECUs",
     component: ECUsTab,
diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx
new file mode 100644
index 0000000..ac6789f
--- /dev/null
+++ b/src/components/Controls/TRexLogs/index.jsx
@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from "react";
+
+import api from "../../../services/vehiclesAPI";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TablePagination,
+  TableRow,
+} from "@material-ui/core";
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from '@material-ui/pickers';
+import clsx from "clsx";
+
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { logger } from "../../../services/monitoring";
+import { TableHead } from "@mui/material";
+import DateFnsUtils from '@date-io/date-fns';
+
+const transformLogs = (logs) =>
+  logs.map((log) => {
+    const { level, timestamp, received_timestamp, line_number, filename, msg } = log;
+    //const trex_time = new Date(timestamp)
+    //const cloud_time = new Date(received_timestamp)
+    return {
+      level: level,
+      trex_timestamp: timestamp,
+      cloud_timestamp: received_timestamp,
+      line_number: line_number,
+      filename: filename,
+      msg: msg
+    };
+  })
+    .flat()
+
+const fromatDateForRequest = (date) => {
+  const getYear = date.toLocaleString("default", { year: "numeric" });
+  const getMonth = date.toLocaleString("default", { month: "2-digit" });
+  const getDay = date.toLocaleString("default", { day: "2-digit" });
+  return getYear + "-" + getMonth + "-" + getDay
+};
+
+const tableColumns = [
+  {
+    id: "level",
+    label: "Level",
+    width: "5%",
+  },
+  {
+    id: "trex_timestamp",
+    label: "T.Rex Timestamp",
+    width: "10%",
+  },
+  {
+    id: "cloud_timestamp",
+    label: "Cloud Timestamp",
+    width: "10%",
+  },
+  {
+    id: "line_number",
+    label: "Line Number",
+    width: "5%",
+  },
+  {
+    id: "filename",
+    label: "Filename",
+    width: "10%",
+  },
+  {
+    id: "msg",
+    label: "Message",
+    width: "60%",
+  },
+];
+//read at least 30000 bytes per one API request
+const ONE_READ_SIZE = 30000
+const DEFAULT_PAGE_SIZE = 25
+const TRexLogsTable = ({ vin, token, classes }) => {
+  const [allLogsFetched, setAllLogsFetched] = useState(false)
+  const [blobSize, setBlobSize] = useState(0)
+  const [currentOffset, setCurrentOffset] = useState(0)
+  const [logs, setLogs] = useState([]);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [total, setTotal] = useState(0);
+  const { setMessage } = useStatusContext();
+
+  const readBlob = async (offset, count) => {
+    console.log(`reading from offset: ${offset}`)
+    return await api.getTRexLogs(vin, fromatDateForRequest(selectedDate), offset, count, "UP", token)
+  }
+  const getDesiredSize = () => {
+    return pageSize * pageIndex + pageSize
+  }
+  const getReadPercentage = () => {
+    if (blobSize === 0) {
+      return `No logs for ${fromatDateForRequest(selectedDate)}`
+    }
+    return `Read ${(currentOffset * 100 / blobSize).toFixed(2)}% of logs`
+  }
+  const fetchLogs = async (desiredSize) => {
+    let fetched = []
+    let offset = currentOffset
+    let readSize = ONE_READ_SIZE
+    do {
+      const result = await readBlob(offset, readSize)
+      if (result.error) {
+        fetched.error = result.error
+        break
+      }
+      console.log(`ret.RealOffset ${result.RealOffset}\nret.bytesRead ${result.bytesRead}\ndesired offset ${offset}\ndesired read size ${readSize}\nblobsize: ${result.blobSize}`)
+      setBlobSize(result.blobSize)
+      //if read two times less then neccessary, then adjust read size
+      if (fetched.length < desiredSize / 2) {
+        readSize *= 2
+        console.log(`new read size: ${readSize}`)
+      }
+      offset = result.RealOffset + result.bytesRead
+      fetched = transformLogs(result.data).concat(fetched)
+      if (offset >= result.blobSize) {
+        setMessage(`All log for ${fromatDateForRequest(selectedDate)} fetched`)
+        setAllLogsFetched(true)
+        break
+      }
+    } while (fetched.length <= desiredSize)
+
+    if (fetched.length === 0) {
+      if (logs.length !== 0) {
+        setMessage(`No more T.Rex logs for ${fromatDateForRequest(selectedDate)}`)
+        return
+      }
+      setTotal(0)
+      const msg = `Can not fetch logs for ${fromatDateForRequest(selectedDate)}`
+      setMessage(msg)
+      console.log(`${msg}, Cloud error:\n${fetched.error}`);
+      return
+    }
+    setCurrentOffset(offset)
+    return fetched
+  }
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!vin || !token) return;
+        const desiredSize = getDesiredSize()
+        console.log(`desired size: ${desiredSize}, actual size: ${logs.length}`)
+        if (desiredSize < logs.length || allLogsFetched) {
+          console.log(`enough logs in cache`)
+          return
+        }
+        let fetched = await fetchLogs(desiredSize)
+        if (!fetched || fetched.length === 0) {
+          return
+        }
+        fetched = fetched.concat(logs)
+        setLogs(fetched);
+        setTotal(fetched.length);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [vin, token, pageIndex, pageSize, selectedDate]);
+
+  const handleChangePageSize = (event) => {
+    setPageSize(parseInt(event.target.value, 10));
+    setPageIndex(0);
+  };
+
+  const handleNewDate = (newValue) => {
+    setPageIndex(0);
+    setCurrentOffset(0)
+    setLogs([])
+    setAllLogsFetched(false)
+    setBlobSize(0)
+    setSelectedDate(newValue)
+  };
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Table
+        style={{ tableLayout: "fixed", minWidth: "1400px" }}
+      >
+        <TableRow>
+          <TableCell>
+            <MuiPickersUtilsProvider utils={DateFnsUtils}>
+              <KeyboardDatePicker
+                disableToolbar
+                variant="inline"
+                format="yyyy/MM/dd"
+                margin="normal"
+                id="date-picker-inline"
+                label="Choose date"
+                value={selectedDate}
+                onChange={handleNewDate}
+                KeyboardButtonProps={{
+                  'aria-label': 'change date',
+                }}
+              />
+            </MuiPickersUtilsProvider>
+            </TableCell>
+          <TableCell align="left">
+              {getReadPercentage()}
+            </TableCell>
+        </TableRow>
+      </Table>
+      <Table
+        style={{ tableLayout: "fixed", minWidth: "1400px" }}
+      >
+        <TableHead
+          classes={classes}>
+
+          <TableRow>
+            {tableColumns.map((column) => (
+              <TableCell style={{ width: column.width }} align="center" key={column.label || "none"}>{column.label}</TableCell>
+            ))} </TableRow>
+        </TableHead >
+        <TableBody>
+          {logs.slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).map((log, i) => (
+            <TableRow key={log.trex_timestamp + log.cloud_timestamp} >
+              <TableCell align="center">{log.level}</TableCell>
+              <TableCell align="center">{log.trex_timestamp}</TableCell>
+              <TableCell align="center">{log.cloud_timestamp}</TableCell>
+              <TableCell align="center">{log.line_number}</TableCell>
+              <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.filename}</TableCell>
+              <TableCell align="left" style={{ wordBreak: "break-all" }}>{log.msg}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              rowsPerPageOptions={[25, 100, 1000, 10000]}
+              colSpan={6}
+              count={total}
+              rowsPerPage={pageSize}
+              page={!pageIndex || pageIndex <= 0 ? 0 : pageIndex}
+              SelectProps={{
+                inputProps: { "aria-label": "rows per page" },
+                native: true,
+              }}
+              onPageChange={(_, newValue) => setPageIndex(newValue)}
+              onRowsPerPageChange={handleChangePageSize}
+            />
+          </TableRow>
+        </TableFooter>
+      </Table>
+    </div >
+  );
+};
+
+export default TRexLogsTable;
diff --git a/src/services/__mocks__/vehiclesAPI.js b/src/services/__mocks__/vehiclesAPI.js
index d18a88b..168b539 100644
--- a/src/services/__mocks__/vehiclesAPI.js
+++ b/src/services/__mocks__/vehiclesAPI.js
@@ -58,6 +58,38 @@ const signals = {data:[
   },
 ]};
 
+const trexLogs = {
+  RealOffset: 0,
+  blobSize: 62072819,
+  bytesRead: 29874,
+  data: [
+    {
+      "level": "info",
+      "timestamp": "2023-Feb-15 23:44:36.934746",
+      "line_number": 948,
+      "filename": "ota_service.cpp",
+      "msg": "ota::cleanup() Deleting directory \"/fisker/ota/1534\"",
+      "received_timestamp": "2023-Feb-15 23:44:37.203102197"
+    },
+    {
+      "level": "debug",
+      "timestamp": "2023-Feb-15 23:44:36.970715",
+      "line_number": 992,
+      "filename": "ota_service.cpp",
+      "msg": "ota::end() manifest process aborted with error state",
+      "received_timestamp": "2023-Feb-15 23:44:37.203197597"
+    },
+    {
+      "level": "debug",
+      "timestamp": "2023-Feb-15 23:44:36.971745",
+      "line_number": 91,
+      "filename": "vom_impl.cpp",
+      "msg": "vom::send_ota_result_fb() Sending 0x4F9->tbox_ota_res_fb (==OTA_error)",
+      "received_timestamp": "2023-Feb-15 23:44:37.203249997"
+    }
+  ]
+}
+
 const vehiclesAPI = {
   addVehicle: async (vehicle) => {
     data.push(vehicle);
@@ -117,6 +149,9 @@ const vehiclesAPI = {
   getCANSignals: async (vin, vehicle) => {
    return signals;
   },
+  getTRexLogs: async (vin, date, offset, count, direction, token) => {
+    return trexLogs;
+  },
   getVersionLog: async (vin) => ({
       "data": [
           {
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index 9d8d0db..e2c4a11 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -173,6 +173,17 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
+  getTRexLogs: async (vin, date, offset, count, direction, token) =>
+    fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}`, {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+
   getVersionLog: async ({vin, ...search}, token) => {
     const u = addQueryParams(`${API_ENDPOINT}/vehicle/${vin}/version/logs`, search);
     return fetch(u, {

From 24ac0898afaaec6c30ffb1bafb52f123b022dac0 Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Fri, 17 Feb 2023 17:32:38 -0800
Subject: [PATCH 2/5] CEC-3577 Style tweak (#284)

---
 src/components/Cars/Status/TRexLogsTab.jsx |  2 +-
 src/components/Controls/TRexLogs/index.jsx | 76 +++++++++++-----------
 src/components/useStyles.jsx               |  4 ++
 3 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/Cars/Status/TRexLogsTab.jsx b/src/components/Cars/Status/TRexLogsTab.jsx
index 8dc6260..4627025 100644
--- a/src/components/Cars/Status/TRexLogsTab.jsx
+++ b/src/components/Cars/Status/TRexLogsTab.jsx
@@ -19,7 +19,7 @@ const MainForm = () => {
 
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
-      <Typography variant="h6" className={classes.labelInline}>
+      <Typography variant="h6">
         T.Rex Logs
       </Typography>
       <TRexLogsTable vin={vin} token={token} classes={classes} />
diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx
index ac6789f..678cbdf 100644
--- a/src/components/Controls/TRexLogs/index.jsx
+++ b/src/components/Controls/TRexLogs/index.jsx
@@ -1,47 +1,23 @@
 import React, { useEffect, useState } from "react";
 
-import api from "../../../services/vehiclesAPI";
 import {
   Table,
   TableBody,
   TableCell,
   TableFooter,
   TablePagination,
-  TableRow,
+  TableRow
 } from "@material-ui/core";
 import {
-  MuiPickersUtilsProvider,
-  KeyboardDatePicker,
+  KeyboardDatePicker, MuiPickersUtilsProvider
 } from '@material-ui/pickers';
 import clsx from "clsx";
+import api from "../../../services/vehiclesAPI";
 
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { logger } from "../../../services/monitoring";
-import { TableHead } from "@mui/material";
 import DateFnsUtils from '@date-io/date-fns';
-
-const transformLogs = (logs) =>
-  logs.map((log) => {
-    const { level, timestamp, received_timestamp, line_number, filename, msg } = log;
-    //const trex_time = new Date(timestamp)
-    //const cloud_time = new Date(received_timestamp)
-    return {
-      level: level,
-      trex_timestamp: timestamp,
-      cloud_timestamp: received_timestamp,
-      line_number: line_number,
-      filename: filename,
-      msg: msg
-    };
-  })
-    .flat()
-
-const fromatDateForRequest = (date) => {
-  const getYear = date.toLocaleString("default", { year: "numeric" });
-  const getMonth = date.toLocaleString("default", { month: "2-digit" });
-  const getDay = date.toLocaleString("default", { day: "2-digit" });
-  return getYear + "-" + getMonth + "-" + getDay
-};
+import { TableHead } from "@mui/material";
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
 
 const tableColumns = [
   {
@@ -75,9 +51,34 @@ const tableColumns = [
     width: "60%",
   },
 ];
+
+const transformLogs = (logs) =>
+  logs.map((log) => {
+    const { level, timestamp, received_timestamp, line_number, filename, msg } = log;
+    //const trex_time = new Date(timestamp)
+    //const cloud_time = new Date(received_timestamp)
+    return {
+      level: level,
+      trex_timestamp: timestamp,
+      cloud_timestamp: received_timestamp,
+      line_number: line_number,
+      filename: filename,
+      msg: msg
+    };
+  })
+    .flat()
+
+const fromatDateForRequest = (date) => {
+  const getYear = date.toLocaleString("default", { year: "numeric" });
+  const getMonth = date.toLocaleString("default", { month: "2-digit" });
+  const getDay = date.toLocaleString("default", { day: "2-digit" });
+  return getYear + "-" + getMonth + "-" + getDay
+};
+
 //read at least 30000 bytes per one API request
 const ONE_READ_SIZE = 30000
 const DEFAULT_PAGE_SIZE = 25
+
 const TRexLogsTable = ({ vin, token, classes }) => {
   const [allLogsFetched, setAllLogsFetched] = useState(false)
   const [blobSize, setBlobSize] = useState(0)
@@ -134,7 +135,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
         return
       }
       setTotal(0)
-      const msg = `Can not fetch logs for ${fromatDateForRequest(selectedDate)}`
+      const msg = `Cannot fetch logs for ${fromatDateForRequest(selectedDate)}`
       setMessage(msg)
       console.log(`${msg}, Cloud error:\n${fetched.error}`);
       return
@@ -188,7 +189,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
         style={{ tableLayout: "fixed", minWidth: "1400px" }}
       >
         <TableRow>
-          <TableCell>
+          <TableCell align="center">
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
               <KeyboardDatePicker
                 disableToolbar
@@ -205,7 +206,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
               />
             </MuiPickersUtilsProvider>
             </TableCell>
-          <TableCell align="left">
+          <TableCell align="center">
               {getReadPercentage()}
             </TableCell>
         </TableRow>
@@ -213,13 +214,12 @@ const TRexLogsTable = ({ vin, token, classes }) => {
       <Table
         style={{ tableLayout: "fixed", minWidth: "1400px" }}
       >
-        <TableHead
-          classes={classes}>
-
+        <TableHead classes={classes}>
           <TableRow>
             {tableColumns.map((column) => (
-              <TableCell style={{ width: column.width }} align="center" key={column.label || "none"}>{column.label}</TableCell>
-            ))} </TableRow>
+              <TableCell style={{ width: column.width }} align="center" key={column.label || "none"} className={classes.tableHeader} >{column.label}</TableCell>
+            ))}
+          </TableRow>
         </TableHead >
         <TableBody>
           {logs.slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).map((log, i) => (
diff --git a/src/components/useStyles.jsx b/src/components/useStyles.jsx
index 3b3a752..1931093 100644
--- a/src/components/useStyles.jsx
+++ b/src/components/useStyles.jsx
@@ -285,6 +285,10 @@ const useStyles = makeStyles((theme) => ({
     color: "blue",
     textDecoration: "underline",
   },
+  tableHeader: {
+    textDecorationStyle: "solid",
+    fontWeight:500,
+  }
 }));
 
 export default useStyles;

From 54f4386a583743108fdebae1df9d495c2d573fc4 Mon Sep 17 00:00:00 2001
From: Eduard Voronkin <116690094+eduardvoronkin@users.noreply.github.com>
Date: Thu, 2 Mar 2023 11:14:39 -0800
Subject: [PATCH 3/5] CEC-3577: trex logs (#285)

* CEC-3577: trex logs

add filtering
add progress bar for log fetching
always fetch all the logs
request canceling

* don't hide progress
---
 src/components/Controls/TRexLogs/index.jsx | 130 ++++++++++++++++-----
 src/services/vehiclesAPI.js                |   3 +-
 2 files changed, 106 insertions(+), 27 deletions(-)

diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx
index 678cbdf..29e78d3 100644
--- a/src/components/Controls/TRexLogs/index.jsx
+++ b/src/components/Controls/TRexLogs/index.jsx
@@ -8,6 +8,13 @@ import {
   TablePagination,
   TableRow
 } from "@material-ui/core";
+import LinearProgress from '@mui/material/LinearProgress';
+import Checkbox from '@mui/material/Checkbox';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
+
 import {
   KeyboardDatePicker, MuiPickersUtilsProvider
 } from '@material-ui/pickers';
@@ -52,6 +59,33 @@ const tableColumns = [
   },
 ];
 
+const logLevelCheckBoxes = [
+  {
+    "id": "trace",
+    "label": "Trace"
+  },
+  {
+    "id": "debug",
+    "label": "Debug"
+  },
+  {
+    "id": "info",
+    "label": "Info"
+  },
+  {
+    "id": "warning",
+    "label": "Warning"
+  },
+  {
+    "id": "error",
+    "label": "Error"
+  },
+  {
+    "id": "critical",
+    "label": "Critical"
+  },
+]
+
 const transformLogs = (logs) =>
   logs.map((log) => {
     const { level, timestamp, received_timestamp, line_number, filename, msg } = log;
@@ -75,14 +109,22 @@ const fromatDateForRequest = (date) => {
   return getYear + "-" + getMonth + "-" + getDay
 };
 
-//read at least 30000 bytes per one API request
-const ONE_READ_SIZE = 30000
+//read at least 50000 bytes per one API request
+const ONE_READ_SIZE = 50000
 const DEFAULT_PAGE_SIZE = 25
 
 const TRexLogsTable = ({ vin, token, classes }) => {
   const [allLogsFetched, setAllLogsFetched] = useState(false)
   const [blobSize, setBlobSize] = useState(0)
   const [currentOffset, setCurrentOffset] = useState(0)
+  const [currectLogLevels, setCurrentLogLevels] = useState({
+    trace: true,
+    debug: true,
+    info: true,
+    warning: true,
+    error: true,
+    critical: true
+  })
   const [logs, setLogs] = useState([]);
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
@@ -90,24 +132,25 @@ const TRexLogsTable = ({ vin, token, classes }) => {
   const [total, setTotal] = useState(0);
   const { setMessage } = useStatusContext();
 
+  let controller = new AbortController()
   const readBlob = async (offset, count) => {
     console.log(`reading from offset: ${offset}`)
-    return await api.getTRexLogs(vin, fromatDateForRequest(selectedDate), offset, count, "UP", token)
+    return await api.getTRexLogs(vin, fromatDateForRequest(selectedDate), offset, count, "UP", token, controller)
   }
   const getDesiredSize = () => {
     return pageSize * pageIndex + pageSize
   }
   const getReadPercentage = () => {
-    if (blobSize === 0) {
-      return `No logs for ${fromatDateForRequest(selectedDate)}`
-    }
-    return `Read ${(currentOffset * 100 / blobSize).toFixed(2)}% of logs`
+    return (currentOffset * 100 / blobSize).toFixed(2);
   }
-  const fetchLogs = async (desiredSize) => {
+  const getFilteredLogs = (logs) => {
+    return logs.filter(log => currectLogLevels[log.level] === true)
+  }
+  const fetchAllLogs = async () => {
     let fetched = []
     let offset = currentOffset
     let readSize = ONE_READ_SIZE
-    do {
+    for (; ;) {
       const result = await readBlob(offset, readSize)
       if (result.error) {
         fetched.error = result.error
@@ -115,19 +158,18 @@ const TRexLogsTable = ({ vin, token, classes }) => {
       }
       console.log(`ret.RealOffset ${result.RealOffset}\nret.bytesRead ${result.bytesRead}\ndesired offset ${offset}\ndesired read size ${readSize}\nblobsize: ${result.blobSize}`)
       setBlobSize(result.blobSize)
-      //if read two times less then neccessary, then adjust read size
-      if (fetched.length < desiredSize / 2) {
-        readSize *= 2
-        console.log(`new read size: ${readSize}`)
-      }
+      readSize *= 2
+      console.log(`new read size: ${readSize}`)
       offset = result.RealOffset + result.bytesRead
+      setCurrentOffset(offset)
       fetched = transformLogs(result.data).concat(fetched)
+      setLogs(fetched)
       if (offset >= result.blobSize) {
         setMessage(`All log for ${fromatDateForRequest(selectedDate)} fetched`)
         setAllLogsFetched(true)
         break
       }
-    } while (fetched.length <= desiredSize)
+    }
 
     if (fetched.length === 0) {
       if (logs.length !== 0) {
@@ -152,25 +194,26 @@ const TRexLogsTable = ({ vin, token, classes }) => {
         console.log(`desired size: ${desiredSize}, actual size: ${logs.length}`)
         if (desiredSize < logs.length || allLogsFetched) {
           console.log(`enough logs in cache`)
+          setTotal(getFilteredLogs(logs).length)
           return
         }
-        let fetched = await fetchLogs(desiredSize)
+        let fetched = await fetchAllLogs()
         if (!fetched || fetched.length === 0) {
           return
         }
-        fetched = fetched.concat(logs)
-        setLogs(fetched);
-        setTotal(fetched.length);
+        setTotal(getFilteredLogs(fetched).length);
       } catch (e) {
         setMessage(e.message);
         logger.warn(e.stack);
       }
     })();
+    return () => controller?.abort()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [vin, token, pageIndex, pageSize, selectedDate]);
+  }, [vin, token, pageIndex, pageSize, selectedDate, currectLogLevels]);
 
   const handleChangePageSize = (event) => {
     setPageSize(parseInt(event.target.value, 10));
+    setTotal(getFilteredLogs(logs).length)
     setPageIndex(0);
   };
 
@@ -183,12 +226,37 @@ const TRexLogsTable = ({ vin, token, classes }) => {
     setSelectedDate(newValue)
   };
 
+  const handleNewFilter = (event) => {
+    setPageIndex(0)
+    console.log(event)
+    setCurrentLogLevels({
+      ...currectLogLevels,
+      [event.target.defaultValue]: event.target.checked,
+    });
+  };
   return (
     <div className={clsx(classes.paper, classes.tableSize)}>
       <Table
-        style={{ tableLayout: "fixed", minWidth: "1400px" }}
+        style={{ tableLayout: "fixed", width: "100%" }}
       >
         <TableRow>
+          <TableCell align="center">
+            <FormControl component="fieldset">
+              <FormLabel component="legend">Log levels</FormLabel>
+              <FormGroup aria-label="position" row>
+                {logLevelCheckBoxes.map((box) => (
+                  <FormControlLabel
+                    value={box.id}
+                    control={<Checkbox defaultChecked disabled={!allLogsFetched} />}
+                    label={box.label}
+                    labelPlacement="bottom"
+                    onChange={handleNewFilter}
+                  />
+                ))}
+              </FormGroup>
+            </FormControl>
+          </TableCell>
+
           <TableCell align="center">
             <MuiPickersUtilsProvider utils={DateFnsUtils}>
               <KeyboardDatePicker
@@ -207,12 +275,22 @@ const TRexLogsTable = ({ vin, token, classes }) => {
             </MuiPickersUtilsProvider>
             </TableCell>
           <TableCell align="center">
-              {getReadPercentage()}
+            {
+              blobSize === 0 ? `No logs for ${fromatDateForRequest(selectedDate)}` :
+                `Read ${getReadPercentage()}% of logs`
+            }
+            {
+              <LinearProgress
+                variant="determinate"
+                align="center"
+                value={getReadPercentage()} />
+            }
             </TableCell>
         </TableRow>
       </Table>
+
       <Table
-        style={{ tableLayout: "fixed", minWidth: "1400px" }}
+        style={{ tableLayout: "fixed", width: "100%" }}
       >
         <TableHead classes={classes}>
           <TableRow>
@@ -222,11 +300,11 @@ const TRexLogsTable = ({ vin, token, classes }) => {
           </TableRow>
         </TableHead >
         <TableBody>
-          {logs.slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).map((log, i) => (
+          {getFilteredLogs(logs).slice(-getDesiredSize(), (pageIndex === 0 ? undefined : -(pageSize * pageIndex))).map((log, i) => (
             <TableRow key={log.trex_timestamp + log.cloud_timestamp} >
               <TableCell align="center">{log.level}</TableCell>
-              <TableCell align="center">{log.trex_timestamp}</TableCell>
-              <TableCell align="center">{log.cloud_timestamp}</TableCell>
+              <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.trex_timestamp}</TableCell>
+              <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.cloud_timestamp}</TableCell>
               <TableCell align="center">{log.line_number}</TableCell>
               <TableCell align="center" style={{ wordBreak: "break-all" }}>{log.filename}</TableCell>
               <TableCell align="left" style={{ wordBreak: "break-all" }}>{log.msg}</TableCell>
diff --git a/src/services/vehiclesAPI.js b/src/services/vehiclesAPI.js
index e2c4a11..8d38faa 100644
--- a/src/services/vehiclesAPI.js
+++ b/src/services/vehiclesAPI.js
@@ -173,13 +173,14 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  getTRexLogs: async (vin, date, offset, count, direction, token) =>
+  getTRexLogs: async (vin, date, offset, count, direction, token, controller) =>
     fetch(`${API_ENDPOINT}/vehicle/${vin}/trex-logs?date=${date}&offset=${offset}&count=${count}&direction=${direction}`, {
       method: "GET",
       headers: Object.assign(
         { "Content-Type": "application/json" },
         getAuthHeaderOptions(token)
       ),
+      signal: controller.signal
     })
       .then(fetchRespHandler)
       .catch(errorHandler),

From 7b6a2bfa11d734fb44bd13ce4eeae53739d1d73f Mon Sep 17 00:00:00 2001
From: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Date: Thu, 2 Mar 2023 12:26:41 -0800
Subject: [PATCH 4/5] CEC-3751, CEC-3478 misc window status and invalid
 location value (#287)

* CEC-3751 misc window status
CEC-3478 invalid location value

* Fix snapshot
Update browser list
---
 package-lock.json                             | 12 ++++----
 .../DigitalTwinTab.test.jsx.snap              |  2 +-
 src/components/DigitalTwin/index.js           | 28 ++++++++-----------
 src/utils/locations.js                        |  3 ++
 4 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a598d52..176b24a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6941,9 +6941,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001387",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
-      "integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA==",
+      "version": "1.0.30001458",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz",
+      "integrity": "sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w==",
       "funding": [
         {
           "type": "opencollective",
@@ -22881,9 +22881,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001387",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
-      "integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA=="
+      "version": "1.0.30001458",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz",
+      "integrity": "sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
diff --git a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
index 0858fd3..b3bbeb4 100644
--- a/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/DigitalTwinTab.test.jsx.snap
@@ -123,7 +123,7 @@ exports[`DigitalTwinTab Render 1`] = `
                   sunroof
                 </b>
                 : 
-                closed
+                closed (0)
               </p>
             </div>
             <div
diff --git a/src/components/DigitalTwin/index.js b/src/components/DigitalTwin/index.js
index d581c9b..24c9ee6 100644
--- a/src/components/DigitalTwin/index.js
+++ b/src/components/DigitalTwin/index.js
@@ -13,6 +13,14 @@ const openCloseState = (value) => (value ? "open" : "closed");
 const mapOpenCloseState = (value) =>
   keyValueTemplate(value[0], openCloseState(value[1]));
 
+const windowState = (value) => {
+  if (value[1] === 0 || value[1] > 100) {
+    return keyValueTemplate(value[0], `closed (${value[1]})`);
+  } else {
+    return keyValueTemplate(value[0], `${value[1]}% open`);
+  }
+}
+
 const DigitalTwin = (props) => {
   const classes = useStyles();
   const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks } = props;
@@ -45,12 +53,7 @@ const DigitalTwin = (props) => {
         <div className={classes.popupSection}>
           <h3>Windows</h3>
           {Object.entries(windows).map((value) => {
-            if (value[1] === 0) {
-              return keyValueTemplate(value[0], "closed");
-            } else {
-              const percentOpen = Math.min(value[1], 100);
-              return keyValueTemplate(value[0], `${percentOpen}% open`);
-            }
+            return windowState(value);
           })}
         </div>
       )}
@@ -58,11 +61,7 @@ const DigitalTwin = (props) => {
         <div className={classes.popupSection}>
           <h3>Misc Windows</h3>
           {Object.entries(misc_windows).map((value) => {
-            if (value[1] === 0 || value[1] > 100) {
-              return keyValueTemplate(value[0], `closed ${value[1]}%`);
-            } else {
-              return keyValueTemplate(value[0], `${value[1]}% open`);
-            }
+            return windowState(value);
           })}
         </div>
       )}
@@ -70,12 +69,7 @@ const DigitalTwin = (props) => {
         <div className={classes.popupSection}>
           <h3>Sunroof</h3>
           {Object.entries(sunroof).map((value) => {
-            if (value[1] === 0) {
-              return keyValueTemplate(value[0], "closed");
-            } else {
-              const percentOpen = Math.min(value[1], 100);
-              return keyValueTemplate(value[0], `${percentOpen}% open`);
-            }
+            return windowState(value);
           })}
         </div>
       )}
diff --git a/src/utils/locations.js b/src/utils/locations.js
index a308375..f4fdaba 100644
--- a/src/utils/locations.js
+++ b/src/utils/locations.js
@@ -1,3 +1,5 @@
+const invalidLocation = 99999;
+
 export const ValidateLocationData = (location) => {
   if (Math.abs(location.latitude) > 90 || Math.abs(location.longitude) > 180) {
     return false;
@@ -9,6 +11,7 @@ export const ValidateLocationData = (location) => {
 }
 
 export const ValidateLocationByParam = (parameter, value) => {
+  if (invalidLocation === value) return false;
   switch (parameter) {
     case "latitude":
       return Math.abs(value) <= 90;

From 324e3d2b91de584725991f54a907b028707d1181 Mon Sep 17 00:00:00 2001
From: das31 <31259710+das31@users.noreply.github.com>
Date: Fri, 10 Mar 2023 00:13:27 -0500
Subject: [PATCH 5/5] CEC-3514 create can self serve page (#288)

* first push

* fix snapshot

* remove unused vars

* update snap

* remove some console logs

* Remove snapshot

* Update

* CEC-3770 Update cert expire text (#282)

* CEC-3577: fetch T.Rex log from the cloud (#283)

* CEC-3577: fetch T.Rex log from the cloud

* tabs?

* CSS

* smells

* fix smells and warnings

* suggestions

* CEC-3577 Style tweak (#284)

* CEC-3577: trex logs (#285)

* CEC-3577: trex logs

add filtering
add progress bar for log fetching
always fetch all the logs
request canceling

* don't hide progress

* CEC-3751, CEC-3478 misc window status and invalid location value (#287)

* CEC-3751 misc window status
CEC-3478 invalid location value

* Fix snapshot
Update browser list

* merge develop update snap

* resolve comments

* add date and time picker seperately, use checkbox for dropdown

* added verification for date and fixed time picker

* fix snap

* resolve comments

* removed small bug

* tweak layout

* added snap shot test for can signals

* small change

* Fix test

* fix sms snap

* change function name

* mock can signals api

* resolved comments

* fix ci

* Clean up

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>
Co-authored-by: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Co-authored-by: Eduard Voronkin <116690094+eduardvoronkin@users.noreply.github.com>
---
 package-lock.json                             |  40 ++
 package.json                                  |   2 +
 .../App/__snapshots__/App.test.js.snap        |  24 ++
 .../__snapshots__/index.test.jsx.snap         | 374 ++++++++++++++++++
 .../CANSelfServe/SelfServe/index.jsx          | 197 +++++++++
 .../CANSelfServe/SelfServe/index.test.jsx     |  42 ++
 src/components/CANSelfServe/SelfServeTab.jsx  |  21 +
 .../Status/__snapshots__/index.test.jsx.snap  |  24 ++
 src/components/Cars/Status/index.jsx          |   7 +-
 src/components/Cars/Status/index.test.jsx     |   8 +-
 src/components/Contexts/CANFiltersContext.jsx |   8 +-
 .../Contexts/CANSignalsExportContext.jsx      |  73 ++++
 src/components/Contexts/VehicleContext.jsx    |   8 +-
 .../__mocks__/CANSignalsExportContext.jsx     |  23 ++
 src/components/Controls/TRexLogs/index.jsx    |  13 +-
 .../Send/__snapshots__/index.test.jsx.snap    | 167 +++++++-
 src/components/SMS/Send/index.jsx             |   4 +-
 src/components/SMS/Send/index.test.jsx        |  14 +-
 src/services/CANSignalAPI.js                  |  32 ++
 src/services/__mocks__/CANSignalAPI.js        |  16 +
 src/utils/http.js                             |   1 -
 21 files changed, 1059 insertions(+), 39 deletions(-)
 create mode 100644 src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
 create mode 100644 src/components/CANSelfServe/SelfServe/index.jsx
 create mode 100644 src/components/CANSelfServe/SelfServe/index.test.jsx
 create mode 100644 src/components/CANSelfServe/SelfServeTab.jsx
 create mode 100644 src/components/Contexts/CANSignalsExportContext.jsx
 create mode 100644 src/components/Contexts/__mocks__/CANSignalsExportContext.jsx
 create mode 100644 src/services/CANSignalAPI.js
 create mode 100644 src/services/__mocks__/CANSignalAPI.js

diff --git a/package-lock.json b/package-lock.json
index 176b24a..5dd6166 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,8 @@
         "date-fns": "^2.29.2",
         "email-validator": "^2.0.4",
         "env-cmd": "^10.1.0",
+        "file-saver": "^2.0.5",
+        "filesaver": "^0.0.13",
         "jwt-decode": "^3.1.2",
         "leaflet": "^1.8.0",
         "material-ui-dropzone": "^3.5.0",
@@ -9424,6 +9426,11 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-selector": {
       "version": "0.1.19",
       "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
@@ -9443,6 +9450,15 @@
         "minimatch": "^3.0.4"
       }
     },
+    "node_modules/filesaver": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/filesaver/-/filesaver-0.0.13.tgz",
+      "integrity": "sha512-ay2iShYJKmzKRPk89cgb14foqtCXcJIe5i+qdlSPAouKfBv7F2VZ0lxk9GjpcODe9p2YrXfi3Q+4CRn7ZDmleQ==",
+      "dependencies": {
+        "mkdirp": "^0.5.0",
+        "safename": "0.0.4"
+      }
+    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -15612,6 +15628,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safename": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/safename/-/safename-0.0.4.tgz",
+      "integrity": "sha512-+n4TsvESZKTXbHxOTSyQ0Q1JCXRb6MohgrqC2fbdALzTNQP/IhPOnCNRA4JPtagQq+6DD5ZsQ3lKMy57BYvwJA=="
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -24710,6 +24731,11 @@
         "schema-utils": "^3.0.0"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-selector": {
       "version": "0.1.19",
       "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
@@ -24726,6 +24752,15 @@
         "minimatch": "^3.0.4"
       }
     },
+    "filesaver": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/filesaver/-/filesaver-0.0.13.tgz",
+      "integrity": "sha512-ay2iShYJKmzKRPk89cgb14foqtCXcJIe5i+qdlSPAouKfBv7F2VZ0lxk9GjpcODe9p2YrXfi3Q+4CRn7ZDmleQ==",
+      "requires": {
+        "mkdirp": "^0.5.0",
+        "safename": "0.0.4"
+      }
+    },
     "filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -29080,6 +29115,11 @@
         "is-regex": "^1.1.4"
       }
     },
+    "safename": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/safename/-/safename-0.0.4.tgz",
+      "integrity": "sha512-+n4TsvESZKTXbHxOTSyQ0Q1JCXRb6MohgrqC2fbdALzTNQP/IhPOnCNRA4JPtagQq+6DD5ZsQ3lKMy57BYvwJA=="
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
diff --git a/package.json b/package.json
index 68a020d..f90fa4c 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,8 @@
     "date-fns": "^2.29.2",
     "email-validator": "^2.0.4",
     "env-cmd": "^10.1.0",
+    "file-saver": "^2.0.5",
+    "filesaver": "^0.0.13",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.8.0",
     "material-ui-dropzone": "^3.5.0",
diff --git a/src/components/App/__snapshots__/App.test.js.snap b/src/components/App/__snapshots__/App.test.js.snap
index d1a399a..7ec5bb8 100644
--- a/src/components/App/__snapshots__/App.test.js.snap
+++ b/src/components/App/__snapshots__/App.test.js.snap
@@ -9911,6 +9911,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-9"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-9"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        CAN Signal Export
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -10148,6 +10166,12 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-8"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-9"
+              hidden=""
+              id="tabpanel-9"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>
diff --git a/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap b/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..862780e
--- /dev/null
+++ b/src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,374 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-statusprovider"
+  >
+    <div
+      data-testid="mocked-userprovider"
+    >
+      <div
+        class="makeStyles-paper-0"
+      >
+        <div
+          class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 MuiGrid-justify-content-xs-center"
+        >
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+          >
+            <div
+              class="MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between"
+            >
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="date-picker-inline"
+                    id="date-picker-inline-label"
+                  >
+                    Date From
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="date-picker-inline"
+                      required=""
+                      type="text"
+                      value="03/31/2023"
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="change date"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                  
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="time-picker"
+                    id="time-picker-label"
+                  >
+                    Time From
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="time-picker"
+                      required=""
+                      type="text"
+                      value="06:30 AM"
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="change time"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                  
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="date-picker-inline"
+                    id="date-picker-inline-label"
+                  >
+                    Date To
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="date-picker-inline"
+                      required=""
+                      type="text"
+                      value="04/01/2023"
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="change date"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                  
+                </div>
+              </div>
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <div
+                  class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
+                >
+                  <label
+                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
+                    data-shrink="true"
+                    for="time-picker"
+                    id="time-picker-label"
+                  >
+                    Time To
+                    <span
+                      aria-hidden="true"
+                      class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                    >
+                       
+                      *
+                    </span>
+                  </label>
+                  <div
+                    class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
+                  >
+                    <input
+                      aria-invalid="false"
+                      class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
+                      id="time-picker"
+                      required=""
+                      type="text"
+                      value="06:30 AM"
+                    />
+                    <div
+                      class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
+                    >
+                      <button
+                        aria-label="change time"
+                        class="MuiButtonBase-root MuiIconButton-root"
+                        tabindex="0"
+                        type="button"
+                      >
+                        <span
+                          class="MuiIconButton-label"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="MuiSvgIcon-root"
+                            focusable="false"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
+                            />
+                            <path
+                              d="M0 0h24v24H0z"
+                              fill="none"
+                            />
+                          </svg>
+                        </span>
+                        <span
+                          class="MuiTouchRipple-root"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                  
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+          >
+            <div
+              class="MuiFormControl-root MuiFormControl-fullWidth"
+            >
+              <label
+                class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required"
+                data-shrink="false"
+                id="select-can-signals-label"
+              >
+                Select CAN signals
+                <span
+                  aria-hidden="true"
+                  class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+                >
+                   
+                  *
+                </span>
+              </label>
+              <div
+                class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+                inputvariant="outlined"
+              >
+                <div
+                  aria-haspopup="listbox"
+                  aria-labelledby="select-can-signals-label select-can-signals"
+                  class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
+                  id="select-can-signals"
+                  role="button"
+                  tabindex="0"
+                >
+                  <span>
+                    ​
+                  </span>
+                </div>
+                <input
+                  aria-hidden="true"
+                  class="MuiSelect-nativeInput"
+                  required=""
+                  tabindex="-1"
+                  value=""
+                />
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSelect-icon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M7 10l5 5 5-5z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+          >
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
+              disabled=""
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                Submit
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/CANSelfServe/SelfServe/index.jsx b/src/components/CANSelfServe/SelfServe/index.jsx
new file mode 100644
index 0000000..4dbf59d
--- /dev/null
+++ b/src/components/CANSelfServe/SelfServe/index.jsx
@@ -0,0 +1,197 @@
+import DateFnsUtils from '@date-io/date-fns';
+import { Button, Checkbox, Chip, CircularProgress, FormControl, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
+import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import React, { useEffect, useState } from "react";
+import { logger } from "../../../services/monitoring";
+import { CANSignalsExportProvider, useCANSignalsExportContext } from "../../Contexts/CANSignalsExportContext";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
+import useStyles from "../../useStyles";
+
+const MainForm = ({ id }) => {
+  const classes = useStyles();
+  const { setMessage } = useStatusContext();
+  const { busy, canSignals, getCANSignalList, getDynamicColumnCANSignals } = useCANSignalsExportContext();
+
+  const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
+  const [selectedEndDate, setSelectedEndDate] = useState(new Date());
+  const [selectedCanSignals, setSelectedCanSignals] = useState([]);
+
+
+  const {
+    token: {
+      idToken: { jwtToken: token },
+    },
+  } = useUserContext();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    let timestamp_start = Date.parse(selectedStartDate.toUTCString()) / 1000
+    let timestamp_end = Date.parse(selectedEndDate.toUTCString()) / 1000
+    try {
+      await getDynamicColumnCANSignals(id, timestamp_start, timestamp_end, selectedCanSignals, token)
+    } catch(e){
+      setMessage(e.message);
+      logger.error(e.stack)
+    }
+  };
+
+  const isSubmitDisabled = !selectedStartDate || !selectedEndDate || selectedCanSignals.length === 0;
+
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!token) return;
+        await getCANSignalList(token);
+      } catch (e) {
+        setMessage(e.message);
+        logger.warn(e.stack);
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const handleDateChange = (value, dateType) => {
+    const newDate = new Date(value);
+    const oldDate = dateType === "start" ? selectedStartDate || new Date() : selectedEndDate || new Date();
+    newDate.setHours(oldDate.getHours());
+    newDate.setMinutes(oldDate.getMinutes());
+    newDate.setSeconds(oldDate.getSeconds());
+    if (dateType === "start") {
+      setSelectedStartDate(newDate);
+    } else {
+      setSelectedEndDate(newDate);
+    }
+  };
+
+  const handleTimeFromChange = (value) => {
+    setSelectedStartDate(value);
+  };
+  const handleTimeToChange = (value) => {
+    setSelectedEndDate(value);
+  };
+
+  const handleSelectedItemsChange = (event) => {
+    setSelectedCanSignals(event.target.value);
+  };
+
+  return (
+    <div className={classes.paper}>
+      <Grid container spacing={3} justifyContent="center">
+        <Grid item xs={12}>
+          <MuiPickersUtilsProvider utils={DateFnsUtils}>
+            <Grid container justifyContent="space-between">
+              <Grid item xs={6} md={3}>
+                <KeyboardDatePicker
+                  required
+                  disableToolbar
+                  variant="inline"
+                  format="MM/dd/yyyy"
+                  margin="normal"
+                  id="date-picker-inline"
+                  label="Date From"
+                  value={selectedStartDate}
+                  onChange={(value) => handleDateChange(value, "start")}
+                  KeyboardButtonProps={{
+                    'aria-label': 'change date',
+                  }}
+                />
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <KeyboardTimePicker
+                  required
+                  margin="normal"
+                  variant="inline"
+                  id="time-picker"
+                  label="Time From"
+                  value={selectedStartDate}
+                  onChange={handleTimeFromChange}
+                  KeyboardButtonProps={{
+                    'aria-label': 'change time',
+                  }}
+                />
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <KeyboardDatePicker
+                  required
+                  disableToolbar
+                  variant="inline"
+                  format="MM/dd/yyyy"
+                  margin="normal"
+                  id="date-picker-inline"
+                  label="Date To"
+                  value={selectedEndDate}
+                  onChange={(value) => handleDateChange(value, "end")}
+                  KeyboardButtonProps={{
+                    'aria-label': 'change date',
+                  }}
+                />
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <KeyboardTimePicker
+                  required
+                  margin="normal"
+                  id="time-picker"
+                  variant="inline"
+                  label="Time To"
+                  value={selectedEndDate}
+                  onChange={handleTimeToChange}
+                  KeyboardButtonProps={{
+                    'aria-label': 'change time',
+                  }}
+                />
+              </Grid>
+            </Grid>
+          </MuiPickersUtilsProvider>
+        </Grid>
+        <Grid item xs={12}>
+          <FormControl fullWidth required>
+            <InputLabel id="select-can-signals-label">Select CAN signals</InputLabel>
+            <Select
+              labelId="select-can-signals-label"
+              id="select-can-signals"
+              multiple
+              value={selectedCanSignals}
+              onChange={handleSelectedItemsChange}
+              fullWidth
+              inputvariant="outlined"
+              renderValue={(selected) => (
+                <div className={classes.chips}>
+                  {selected.map((value) => (
+                    <Chip key={value} label={value} className={classes.chip} />
+                  ))}
+                </div>
+              )}
+            >
+              {canSignals.map((signal) => (
+                <MenuItem key={signal.signal_name} value={signal.signal_name}>
+                  <Checkbox checked={selectedCanSignals.indexOf(signal.signal_name) > -1} />
+                  <ListItemText primary={signal.signal_name} />
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid item xs={12}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleSubmit}
+            disabled={isSubmitDisabled || busy}
+            fullWidth
+          >
+            {busy ? <CircularProgress size={24} /> : "Submit"}
+          </Button>
+        </Grid>
+      </Grid>
+    </div>
+  );
+};
+
+const CANSignalExport = (props) => (
+  <CANSignalsExportProvider>
+    <MainForm {...props} />
+  </CANSignalsExportProvider>
+);
+
+export default CANSignalExport;
diff --git a/src/components/CANSelfServe/SelfServe/index.test.jsx b/src/components/CANSelfServe/SelfServe/index.test.jsx
new file mode 100644
index 0000000..5106c38
--- /dev/null
+++ b/src/components/CANSelfServe/SelfServe/index.test.jsx
@@ -0,0 +1,42 @@
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("../../../services/CANSignalAPI");
+jest.useFakeTimers();
+jest.setSystemTime(new Date(2023, 3, 1, 6, 30, 45, 100));
+
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { setToken, UserProvider } from "../../Contexts/UserContext";
+import CANSignalExport from "./index";
+
+const renderCANSignalExport = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <BrowserRouter>
+          <CANSignalExport id="TESTVIN1234567890" />
+        </BrowserRouter>
+      </UserProvider>
+    </StatusProvider>
+  );
+  await waitFor(() => {
+    /* render */
+  });
+  return container;
+};
+
+describe("Render", () => {
+  beforeAll(() => {
+    addSnapshotSerializer(expect);
+  });
+
+  it("Render", async () => {
+    setToken(TEST_AUTH_OBJECT_FISKER);
+    const container = await renderCANSignalExport();
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/src/components/CANSelfServe/SelfServeTab.jsx b/src/components/CANSelfServe/SelfServeTab.jsx
new file mode 100644
index 0000000..ce250d3
--- /dev/null
+++ b/src/components/CANSelfServe/SelfServeTab.jsx
@@ -0,0 +1,21 @@
+import { Typography } from "@material-ui/core";
+import clsx from "clsx";
+import React from "react";
+import { useParams } from "react-router";
+
+import useStyles from "../useStyles";
+import SelfServe from "./SelfServe";
+
+const SelfServeTab = () => {
+  const { vin } = useParams();
+  const classes = useStyles();
+
+  return (
+    <div className={clsx(classes.paper, classes.tableSize)}>
+      <Typography variant="h6">Can Signals Self Serve</Typography>
+      <SelfServe id={vin} classes={classes} />
+    </div >
+  );
+};
+
+export default SelfServeTab;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index b08cc58..2036b7d 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -195,6 +195,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-9"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-9"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      CAN Signal Export
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -376,6 +394,12 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-8"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-9"
+            hidden=""
+            id="tabpanel-9"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index 94a49c6..ffe3802 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -5,6 +5,7 @@ import { useParams } from "react-router";
 import { useLocation } from "react-router-dom";
 
 import { hasRole, Permissions } from "../../../utils/roles";
+import SelfServeTab from "../../CANSelfServe/SelfServeTab";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
 import TabPanel from "../../Controls/TabPanel";
@@ -17,7 +18,7 @@ import DigitalTwinTab from "./DigitalTwinTab";
 import ECUsTab from "./ECUsTab";
 import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
-import TRexLogsTab from "./TRexLogsTab"
+import TRexLogsTab from "./TRexLogsTab";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -60,6 +61,10 @@ const TabViews = [
     component: FleetsTab,
     rolesPerProvider: Permissions.FiskerRead,
   },
+  {
+    label: "CAN Signal Export",
+    component: SelfServeTab
+  }
 ];
 
 const filterTabs = (data, groups, providers) => {
diff --git a/src/components/Cars/Status/index.test.jsx b/src/components/Cars/Status/index.test.jsx
index 21a32d6..739a284 100644
--- a/src/components/Cars/Status/index.test.jsx
+++ b/src/components/Cars/Status/index.test.jsx
@@ -6,15 +6,15 @@ jest.mock("@material-ui/core/utils/unstable_useId", () =>
 );
 
 import { render, waitFor } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
 import routeData from "react-router";
+import { BrowserRouter } from "react-router-dom";
 
+import addSnapshotSerializer from "../../../utils/snapshot";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 import { CANFiltersProvider } from "../../Contexts/CANFiltersContext";
 import { StatusProvider } from "../../Contexts/StatusContext";
-import { UserProvider, setToken } from "../../Contexts/UserContext";
-import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
+import { setToken, UserProvider } from "../../Contexts/UserContext";
 import CarStatus from "./index";
-import addSnapshotSerializer from "../../../utils/snapshot";
 
 const renderCarStatus = async () => {
   const { container } = render(
diff --git a/src/components/Contexts/CANFiltersContext.jsx b/src/components/Contexts/CANFiltersContext.jsx
index b751827..4b2870d 100644
--- a/src/components/Contexts/CANFiltersContext.jsx
+++ b/src/components/Contexts/CANFiltersContext.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState } from "react";
 import api from "../../services/CANFiltersAPI";
-import { validateCANID, validateFilter } from "../../utils/validationSupplier";
+import { validateCANID, validateFilter, validateVIN } from "../../utils/validationSupplier";
 
 const CANFiltersContext = React.createContext();
 
@@ -100,10 +100,4 @@ export const CANFiltersProvider = ({ children }) => {
   );
 };
 
-const validateVIN = (vin) => {
-  if (vin == null || vin.length !== 17) {
-    throw new Error("Invalid VIN");
-  }
-};
-
 export const useCANFiltersContext = () => useContext(CANFiltersContext);
diff --git a/src/components/Contexts/CANSignalsExportContext.jsx b/src/components/Contexts/CANSignalsExportContext.jsx
new file mode 100644
index 0000000..175c851
--- /dev/null
+++ b/src/components/Contexts/CANSignalsExportContext.jsx
@@ -0,0 +1,73 @@
+import React, { useContext, useState } from "react";
+import api from "../../services/CANSignalAPI";
+import { validateVIN } from "../../utils/validationSupplier";
+
+const CANSignalsExportContext = React.createContext();
+
+export const CANSignalsExportProvider = ({ children }) => {
+  const [busy, setBusy] = useState(false);
+
+  const [canSignals, setCanSignals] = useState([]);
+
+  const getCANSignalList = async (token) => {
+    try {
+      setBusy(true);
+      const result = await api.getCanSignalList(token);
+      if (result.error) {
+        throw new Error(`Get can signal list error. ${result.message}`);
+      }
+      setCanSignals(result.data ?? []);
+      return result;
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const getDynamicColumnCANSignals = async (vin, timestart, timeend, cansingals, token) => {
+    try {
+      setBusy(true)
+      if (!vin) return;
+
+      validateVIN(vin);
+      if (timestart > timeend) throw new Error("Start time cannot be after end time");
+      const result = await api.getCanSignalsVin(vin, timestart, timeend, cansingals, token);
+      if (result.error || !result.ok)
+        throw new Error(`Get CAN signals error. ${result.message}`);
+
+      const blob = await result.blob();
+      const reader = new FileReader();
+      reader.onload = () => {
+        const csvData = reader.result;
+        const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8' });
+        const link = document.createElement('a');
+        link.href = window.URL.createObjectURL(blob);
+        link.download = 'CAN_signals.csv';
+        link.click();
+      };
+      reader.readAsText(blob);
+    } catch (e) {
+      throw new Error(e)
+    }
+    finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <CANSignalsExportContext.Provider
+      value={{
+        busy,
+        canSignals,
+        getCANSignalList,
+        getDynamicColumnCANSignals
+      }}
+    >
+      {children}
+    </CANSignalsExportContext.Provider>
+  );
+};
+
+export const useCANSignalsExportContext = () => useContext(CANSignalsExportContext);
+
+
+
diff --git a/src/components/Contexts/VehicleContext.jsx b/src/components/Contexts/VehicleContext.jsx
index 412c64e..31d0eb6 100644
--- a/src/components/Contexts/VehicleContext.jsx
+++ b/src/components/Contexts/VehicleContext.jsx
@@ -1,6 +1,8 @@
 import React, { useContext, useState } from "react";
+
 import { logger } from "../../services/monitoring";
 import api from "../../services/vehiclesAPI";
+import { validateVIN } from "../../utils/validationSupplier";
 
 const VehicleContext = React.createContext();
 
@@ -285,10 +287,4 @@ const validateVehicle = (v) => {
   validateVIN(v.vin);
 };
 
-const validateVIN = (vin) => {
-  if (vin == null || vin.length !== 17) {
-    throw new Error("Invalid VIN");
-  }
-};
-
 export const useVehicleContext = () => useContext(VehicleContext);
diff --git a/src/components/Contexts/__mocks__/CANSignalsExportContext.jsx b/src/components/Contexts/__mocks__/CANSignalsExportContext.jsx
new file mode 100644
index 0000000..a69a596
--- /dev/null
+++ b/src/components/Contexts/__mocks__/CANSignalsExportContext.jsx
@@ -0,0 +1,23 @@
+let busy = false;
+let canSignals = [
+  {
+    signal_name: "123",
+  },
+  {
+    signal_name: "456",
+  },
+  {
+    signal_name: "789",
+  },
+];
+
+export const CANSignalsExportProvider = ({ children }) => {
+  return <div data-testid="mocked-cansignalsprovider">{children}</div>;
+};
+
+export const useCANSignalsExportContext= () => ({
+  busy,
+  canSignals,
+  getCANSignalList: jest.fn(),
+  getDynamicColumnCANSignals: jest.fn(),
+});
diff --git a/src/components/Controls/TRexLogs/index.jsx b/src/components/Controls/TRexLogs/index.jsx
index 29e78d3..165c4ed 100644
--- a/src/components/Controls/TRexLogs/index.jsx
+++ b/src/components/Controls/TRexLogs/index.jsx
@@ -8,12 +8,12 @@ import {
   TablePagination,
   TableRow
 } from "@material-ui/core";
-import LinearProgress from '@mui/material/LinearProgress';
 import Checkbox from '@mui/material/Checkbox';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
 import FormLabel from '@mui/material/FormLabel';
+import LinearProgress from '@mui/material/LinearProgress';
 
 import {
   KeyboardDatePicker, MuiPickersUtilsProvider
@@ -134,7 +134,6 @@ const TRexLogsTable = ({ vin, token, classes }) => {
 
   let controller = new AbortController()
   const readBlob = async (offset, count) => {
-    console.log(`reading from offset: ${offset}`)
     return await api.getTRexLogs(vin, fromatDateForRequest(selectedDate), offset, count, "UP", token, controller)
   }
   const getDesiredSize = () => {
@@ -156,10 +155,8 @@ const TRexLogsTable = ({ vin, token, classes }) => {
         fetched.error = result.error
         break
       }
-      console.log(`ret.RealOffset ${result.RealOffset}\nret.bytesRead ${result.bytesRead}\ndesired offset ${offset}\ndesired read size ${readSize}\nblobsize: ${result.blobSize}`)
       setBlobSize(result.blobSize)
       readSize *= 2
-      console.log(`new read size: ${readSize}`)
       offset = result.RealOffset + result.bytesRead
       setCurrentOffset(offset)
       fetched = transformLogs(result.data).concat(fetched)
@@ -179,7 +176,6 @@ const TRexLogsTable = ({ vin, token, classes }) => {
       setTotal(0)
       const msg = `Cannot fetch logs for ${fromatDateForRequest(selectedDate)}`
       setMessage(msg)
-      console.log(`${msg}, Cloud error:\n${fetched.error}`);
       return
     }
     setCurrentOffset(offset)
@@ -191,9 +187,7 @@ const TRexLogsTable = ({ vin, token, classes }) => {
       try {
         if (!vin || !token) return;
         const desiredSize = getDesiredSize()
-        console.log(`desired size: ${desiredSize}, actual size: ${logs.length}`)
         if (desiredSize < logs.length || allLogsFetched) {
-          console.log(`enough logs in cache`)
           setTotal(getFilteredLogs(logs).length)
           return
         }
@@ -228,7 +222,6 @@ const TRexLogsTable = ({ vin, token, classes }) => {
 
   const handleNewFilter = (event) => {
     setPageIndex(0)
-    console.log(event)
     setCurrentLogLevels({
       ...currectLogLevels,
       [event.target.defaultValue]: event.target.checked,
diff --git a/src/components/SMS/Send/__snapshots__/index.test.jsx.snap b/src/components/SMS/Send/__snapshots__/index.test.jsx.snap
index d03c0ae..dbbf31c 100644
--- a/src/components/SMS/Send/__snapshots__/index.test.jsx.snap
+++ b/src/components/SMS/Send/__snapshots__/index.test.jsx.snap
@@ -1,3 +1,168 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SMS Send Component Render 1`] = `undefined`;
+exports[`SMS Send Component Render 1`] = `
+<div>
+  <div
+    data-testid="mocked-userprovider"
+  >
+    <div
+      data-testid="mocked-smsprovider"
+    >
+      <div
+        class="makeStyles-paper-0"
+      >
+        <form
+          action="{onSubmit}"
+          class="makeStyles-form-0"
+          novalidate=""
+        >
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+              data-shrink="false"
+              for="iccid"
+              id="iccid-label"
+            >
+              ICCID
+              <span
+                aria-hidden="true"
+                class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+              >
+                 
+                *
+              </span>
+            </label>
+            <div
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input"
+                id="iccid"
+                maxlength="50"
+                minlength="15"
+                name="iccid"
+                required=""
+                type="text"
+                value=""
+              />
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legendLabelled-0"
+                >
+                  <span>
+                    ICCID
+                     *
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+          >
+            <label
+              class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
+              data-shrink="false"
+              for="message"
+              id="message-label"
+            >
+              Message
+              <span
+                aria-hidden="true"
+                class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
+              >
+                 
+                *
+              </span>
+            </label>
+            <div
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiOutlinedInput-input"
+                id="message"
+                maxlength="320"
+                name="message"
+                required=""
+                type="text"
+                value=""
+              />
+              <fieldset
+                aria-hidden="true"
+                class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="PrivateNotchedOutline-legendLabelled-0"
+                >
+                  <span>
+                    Message
+                     *
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+          <label
+            class="MuiFormControlLabel-root"
+          >
+            <span
+              aria-disabled="false"
+              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+            >
+              <span
+                class="MuiIconButton-label"
+              >
+                <input
+                  class="PrivateSwitchBase-input-0"
+                  data-indeterminate="false"
+                  type="checkbox"
+                  value="isAwaited"
+                />
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="MuiTouchRipple-root"
+              />
+            </span>
+            <span
+              class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+            >
+              Await delivery
+            </span>
+          </label>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
+            tabindex="0"
+            type="submit"
+          >
+            <span
+              class="MuiButton-label"
+            >
+              Send
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/SMS/Send/index.jsx b/src/components/SMS/Send/index.jsx
index 0d4005b..0abe10a 100644
--- a/src/components/SMS/Send/index.jsx
+++ b/src/components/SMS/Send/index.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 
-import { useSMSContext, SMSProvider } from "../../Contexts/SMSContext";
+import { logger } from "../../../services/monitoring";
+import { SMSProvider, useSMSContext } from "../../Contexts/SMSContext";
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import { logger } from "../../../services/monitoring";
 import SendForm from "./SendForm";
 import ViewResult from "./ViewResult";
 
diff --git a/src/components/SMS/Send/index.test.jsx b/src/components/SMS/Send/index.test.jsx
index 29ce3dd..3e9b5b8 100644
--- a/src/components/SMS/Send/index.test.jsx
+++ b/src/components/SMS/Send/index.test.jsx
@@ -1,15 +1,15 @@
-import {TEST_AUTH_OBJECT_FISKER, TEST_TOKEN_FISKER} from "../../../utils/testing";
+import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
 
 jest.mock("../../Contexts/SMSContext");
 jest.mock("../../Contexts/UserContext");
 
 
-import SMSSend from "./index";
-import {BrowserRouter} from "react-router-dom";
-import {UserProvider, setToken} from "../../Contexts/UserContext";
-import {StatusProvider} from "../../Contexts/StatusContext";
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
 import addSnapshotSerializer from "../../../utils/snapshot";
-import {render, waitFor} from "@testing-library/react";
+import { StatusProvider } from "../../Contexts/StatusContext";
+import { setToken, UserProvider } from "../../Contexts/UserContext";
+import SMSSend from "./index";
 
 
 const renderSendSMS = async () => {
@@ -38,7 +38,7 @@ describe("SMS Send Component", () => {
 
   it("Render", async () => {
     // setToken(TEST_AUTH_OBJECT_FISKER);
-    const {container} = await renderSendSMS();
+    const container = await renderSendSMS();
     expect(container).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/src/services/CANSignalAPI.js b/src/services/CANSignalAPI.js
new file mode 100644
index 0000000..6035dab
--- /dev/null
+++ b/src/services/CANSignalAPI.js
@@ -0,0 +1,32 @@
+import {
+  addQueryParams, errorHandler, fetchRespHandler, getAuthHeaderOptions
+} from "../utils/http";
+
+const API_ENDPOINT = process.env.REACT_APP_OTA_SERVICE_URL;
+
+const canSignalAPI = {
+
+  getCanSignalsVin: async (vin, timestamp_start, timestamp_end, can_signals, token) =>
+    fetch(addQueryParams(`${API_ENDPOINT}/can_signals_export`, { vin, timestamp_start, timestamp_end, can_signals }), {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+      responseType: "blob"
+    })
+    .catch(errorHandler),
+
+
+  getCanSignalList: async (token) =>
+    fetch(addQueryParams(`${API_ENDPOINT}/can_signals_list`), {
+      method: "GET",
+      headers: Object.assign(
+        { "Content-Type": "application/json" },
+        getAuthHeaderOptions(token)
+      ),
+    })
+      .then(fetchRespHandler)
+      .catch(errorHandler),
+};
+export default canSignalAPI;
diff --git a/src/services/__mocks__/CANSignalAPI.js b/src/services/__mocks__/CANSignalAPI.js
new file mode 100644
index 0000000..e088c01
--- /dev/null
+++ b/src/services/__mocks__/CANSignalAPI.js
@@ -0,0 +1,16 @@
+const canSignalList = [
+  { signal_name: "123"},
+  { signal_name: "456"},
+  { signal_name: "789"}
+];
+
+const canSignalAPI = {
+  getCanSignalsVin: async (vin, timestamp_start, timestamp_end, can_signals, token) => {
+    return { data: "fake data" };
+  },
+  getCanSignalList: async (token) => {
+    return canSignalList;
+  }
+};
+
+export default canSignalAPI;
\ No newline at end of file
diff --git a/src/utils/http.js b/src/utils/http.js
index 2d8b69a..5709cb4 100644
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -6,7 +6,6 @@ export const addQueryParams = (url, params) => {
   const u = new URL(url);
 
   Object.keys(params).forEach((key) => u.searchParams.append(key, params[key]));
-
   return u.toString();
 };