CEC-5146 restore DTC timeline. (#451)

* CEC-5146 restore DTC timeline.

* remove VIN and id.

* null checks

src/components/App/__snapshots__/App.test.js.snap

@@ -11643,6 +11643,24 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                         class="MuiTouchRipple-root"
                       />
                     </button>
+                    <button
+                      aria-controls="tabpanel-10"
+                      aria-selected="false"
+                      class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                      id="tab-10"
+                      role="tab"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      <span
+                        class="MuiTab-wrapper"
+                      >
+                        DTC Timeline
+                      </span>
+                      <span
+                        class="MuiTouchRipple-root"
+                      />
+                    </button>
                   </div>
                   <span
                     class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -11929,6 +11947,13 @@ exports[`App Route /vehicle-status authenticated 1`] = `
               id="tabpanel-9"
               role="tabpanel"
             />
+            <div
+              aria-labelledby="tab-10"
+              class="makeStyles-tabContainer-0"
+              hidden=""
+              id="tabpanel-10"
+              role="tabpanel"
+            />
           </div>
         </main>
       </main>

src/components/Cars/Status/__snapshots__/index.test.jsx.snap

@@ -213,6 +213,24 @@ exports[`CarStatus Render 1`] = `
                       class="MuiTouchRipple-root"
                     />
                   </button>
+                  <button
+                    aria-controls="tabpanel-10"
+                    aria-selected="false"
+                    class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
+                    id="tab-10"
+                    role="tab"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="MuiTab-wrapper"
+                    >
+                      DTC Timeline
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </button>
                 </div>
                 <span
                   class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
@@ -443,6 +461,13 @@ exports[`CarStatus Render 1`] = `
             id="tabpanel-9"
             role="tabpanel"
           />
+          <div
+            aria-labelledby="tab-10"
+            class="makeStyles-tabContainer-0"
+            hidden=""
+            id="tabpanel-10"
+            role="tabpanel"
+          />
         </div>
       </div>
     </div>

src/components/Cars/Status/index.jsx

@@ -20,6 +20,7 @@ import FleetsTab from "./FleetsTab";
 import RemoteCommandsTab from "./RemoteCommandsTab";
 import RemoteDiagnosticCommandsTab from "./RemoteDiagnosticCommands";
 import TRexLogsTab from "./TRexLogsTab";
+import DTCTimeline from "../../DTCTimeline/DTCTimeline";
 
 const tabHashes = ["details", "updates", "filters"];
 
@@ -79,13 +80,13 @@ const TabViews = [
     component: SelfServeTab,
     rolesPerProvider: Permissions.FiskerRead,
   },
-  /*
+
   {
     label: "DTC Timeline",
     component: DTCTimeline,
     rolesPerProvider: Permissions.FiskerMagnaRead,
   }
-  */
+
 ];
 
 const filterTabs = (data, groups, providers) => {

src/components/DTCTimeline/DTCTimeline/__snapshots__/index.test.jsx.snap

@@ -462,52 +462,6 @@ exports[`Render Render 1`] = `
                 <tr
                   class="MuiTableRow-root MuiTableRow-head"
                 >
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      Id
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
-                  <th
-                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
-                    scope="col"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiTableSortLabel-root"
-                      role="button"
-                      tabindex="0"
-                    >
-                      VIN
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
-                        focusable="false"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
-                        />
-                      </svg>
-                    </span>
-                  </th>
                   <th
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
                     scope="col"
@@ -583,6 +537,24 @@ exports[`Render Render 1`] = `
                   >
                     Error Text
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    Speed
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    Milage
+                  </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    Voltage
+                  </th>
                   <th
                     aria-sort="descending"
                     class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
@@ -594,7 +566,7 @@ exports[`Render Render 1`] = `
                       role="button"
                       tabindex="0"
                     >
-                      Date
+                      ECU Time
                       <span
                         class="makeStyles-hiddenSortSpan-0"
                       >
@@ -612,6 +584,29 @@ exports[`Render Render 1`] = `
                       </svg>
                     </span>
                   </th>
+                  <th
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Cloud Time
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+                        />
+                      </svg>
+                    </span>
+                  </th>
                 </tr>
               </thead>
               <tbody

src/components/DTCTimeline/DTCTimeline/index.jsx

@@ -29,14 +29,6 @@ const MainForm = ({ vin }) => {
   const { setMessage } = useStatusContext();
 
   const tableColumns = [
-    {
-      id: "id",
-      label: "Id",
-    },
-    {
-      id: "vin",
-      label: "VIN",
-    },
     {
       id: "ecu",
       label: "ECU",
@@ -54,9 +46,28 @@ const MainForm = ({ vin }) => {
       label: "Error Text",
       no_sort: true,
     },
+    {
+      id: "speed",
+      label: "Speed",
+      no_sort: true,
+    },
+    {
+      id: "milage",
+      label: "Milage",
+      no_sort: true,
+    },
+    {
+      id: "voltage",
+      label: "Voltage",
+      no_sort: true,
+    },
     {
       id: "epoch_usec",
-      label: "Date",
+      label: "ECU Time",
+    },
+    {
+      id: "created_at",
+      label: "Cloud Time",
     },
   ];
 
@@ -111,9 +122,8 @@ const MainForm = ({ vin }) => {
     setLoading(false);
   };
 
-  function formatDate(microseconds) {
+  function formatDate(date) {
-    const date = new Date(microseconds / 1000);
+    return date.replace(/[TZ]/g, ' ')
-    return date.toLocaleString();
   }
 
   const handleDateChange = (value, dateType) => {
@@ -285,15 +295,15 @@ const MainForm = ({ vin }) => {
             <TableBody>
               {(dtcData || []).map((dtc, index) => (
                 <TableRow key={index}>
-                  <TableCell component="th" scope="row">
-                    {dtc.id}
-                  </TableCell>
-                  <TableCell>{dtc.vin}</TableCell>
                   <TableCell>{dtc.ecu_name}</TableCell>
                   <TableCell>{dtc.trouble_code}</TableCell>
                   <TableCell>{dtc.status_byte}</TableCell>
                   <TableCell>{dtc.trouble_code_information?.ErrorText?.Text}</TableCell>
+                  {(dtc.speed || dtc.speed === 0) && <TableCell>{dtc.speed + " km/h"}</TableCell>}
+                  {(dtc.mileage || dtc.mileage === 0) && <TableCell>{dtc.mileage + " km"}</TableCell>}
+                  {(dtc.voltage || dtc.voltage === 0) && <TableCell>{dtc.voltage + " V"}</TableCell>}
                   <TableCell>{formatDate(dtc.epoch_usec)}</TableCell>
+                  <TableCell>{formatDate(dtc.created_at)}</TableCell>
                 </TableRow>
               ))}
             </TableBody>
@@ -328,4 +338,4 @@ const DTCTimeline = (props) => (
   </DTCTimelineProvider>
 );
 
-export default DTCTimeline;
+export default DTCTimeline;