CEC-5146 restore DTC timeline. (#451)

* CEC-5146 restore DTC timeline.

* remove VIN and id.

* null checks
This commit is contained in:
Eduard Voronkin
2023-10-02 13:47:52 -07:00
committed by GitHub
parent f4d45abfca
commit d30fe56475
5 changed files with 122 additions and 66 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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) => {

View File

@@ -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

View File

@@ -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) {
const date = new Date(microseconds / 1000);
return date.toLocaleString();
function formatDate(date) {
return date.replace(/[TZ]/g, ' ')
}
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;