CEC-4572 tweak digital twin display and form (#362)

* CEC-4572 tweak form

* update snapshots

* Clean up

* Hide DTC tab
This commit is contained in:
John Wu
2023-06-15 14:39:21 -07:00
committed by GitHub
parent 06867ea77f
commit a5c29a4721
8 changed files with 300 additions and 326 deletions

View File

@@ -89,21 +89,25 @@ exports[`VehicleDetailsTab Render 1`] = `
</p>
<p>
<b>
Log Level
Tags
</b>
:
info
none
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<b>
CANBus
</b>
<p>
<b>
Enabled
Log Level
</b>
:
info
</p>
<p>
<b>
CANBus Enabled
</b>
:
true
@@ -117,7 +121,7 @@ exports[`VehicleDetailsTab Render 1`] = `
</p>
<p>
<b>
Enabled
Data Logger Enabled
</b>
:
true
@@ -136,15 +140,12 @@ exports[`VehicleDetailsTab Render 1`] = `
:
3
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<p>
<b>
DebugMask
DTC Enabled
</b>
:
false
</p>
</div>
<div
@@ -152,7 +153,7 @@ exports[`VehicleDetailsTab Render 1`] = `
>
<p>
<b>
Tags
Debug Mask
</b>
:
</p>
@@ -160,24 +161,6 @@ exports[`VehicleDetailsTab Render 1`] = `
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<a
class=""
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
<label
class="MuiFormControlLabel-root"
>
@@ -212,18 +195,18 @@ exports[`VehicleDetailsTab Render 1`] = `
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
FORCE CONFIG PUSH
Force Config Update
</span>
</label>
<a
class=""
href="/"
title="Push Config \\"TESTVIN1234567890\\""
title="Push Config Update to \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Push Config \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
aria-label="Push Config Update to \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
data-testid="UploadIcon"
focusable="false"
viewBox="0 0 24 24"
@@ -234,6 +217,28 @@ exports[`VehicleDetailsTab Render 1`] = `
</svg>
</a>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<a
class=""
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
</div>
</div>
<div />
<div />

View File

@@ -1,4 +1,4 @@
import { Grid, Tooltip, Checkbox, FormControlLabel } from "@material-ui/core";
import { Checkbox, FormControlLabel, Grid, Tooltip } from "@material-ui/core";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import UploadIcon from '@mui/icons-material/Upload';
@@ -114,23 +114,26 @@ const MainForm = ({ vin }) => {
<p>
<b>Info Source</b>: {vehicle.info_source}
</p>
{vehicle.log_level != null && (
<p>
<b>Tags</b>: {vehicle.tags ? vehicle.tags.join(", ") : "none" }
</p>
</Grid>
<Grid item md={12} className={classes.textCenterAlign}>
{vehicle.log_level != null && (
<p>
<b>Log Level</b>: {vehicle.log_level}
</p>
)}
</Grid>
{vehicle.canbus && (
<Grid item md={12} className={classes.textCenterAlign}>
<b>CANBus</b>
<>
<p>
<b>Enabled</b>: {vehicle.canbus.enabled.toString()}
<b>CANBus Enabled</b>: {vehicle.canbus.enabled.toString()}
</p>
<p>
<b>Max Memory Buffer Size</b>: {vehicle.canbus.max_mem_buffer_size ?? "Default"}
</p>
<p>
<b>Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}
<b>Data Logger Enabled</b>: {vehicle.canbus.data_logger_enabled.toString()}
</p>
<p>
<b>Max Disk Buffer Size</b>: {vehicle.canbus.max_disk_buffer_size ?? "Default"}
@@ -138,19 +141,40 @@ const MainForm = ({ vin }) => {
<p>
<b>Filters</b>: {vehicle.canbus.filters ? vehicle.canbus.filters.length : 0}
</p>
</Grid>
<p>
<b>DTC Enabled</b>: { (vehicle.canbus.dtc_enabled || false).toString() }
</p>
</>
)}
</Grid>
{showDebugMask && (
<Grid item md={12} className={classes.textCenterAlign}>
<p>
<b>DebugMask</b>: {vehicle.debug_mask}
<b>Debug Mask</b>: {vehicle.debug_mask}
</p>
</Grid>
)}
<Grid item md={12} className={classes.textCenterAlign}>
<p>
<b>Tags</b>: {vehicle.tags}
</p>
<RoleWrap
groups={groups}
providers={providers}
rolesPerProvider={Permissions.FiskerCreate}
>
<FormControlLabel
label="Force Config Update"
control={
<Checkbox
checked={forced}
onChange={onForcedChange}
/>
}
/>
<Tooltip key={`push-config-${vin}`} title={`Push Config Update to "${vin}"`}>
<Link to="#" onClick={() => setShowUploadConfigModal(true)} >
<UploadIcon aria-label={`Push Config Update to "${vin}"`} fontSize="large" />
</Link>
</Tooltip>
</RoleWrap>
</Grid>
<Grid item md={12} className={classes.textCenterAlign}>
<RoleWrap
@@ -160,31 +184,10 @@ const MainForm = ({ vin }) => {
>
<Tooltip key={`update-${vin}`} title={`Update "${vin}"`}>
<Link to={`/vehicle-update?vin=${vin}`} style={{ margin: 5 }}>
<EditIcon aria-label={`Update "${vin}"`} />
<EditIcon aria-label={`Update "${vin}"`} fontSize="large" />
</Link>
</Tooltip>
</RoleWrap>
<RoleWrap
groups={groups}
providers={providers}
rolesPerProvider={Permissions.FiskerCreate}
>
<FormControlLabel
label="FORCE CONFIG PUSH"
control={
<Checkbox
checked={forced}
onChange={onForcedChange}
/>
}
/>
<Tooltip key={`push-config-${vin}`} title={`Push Config "${vin}"`}>
<Link to="#" onClick={() => setShowUploadConfigModal(true)}>
<UploadIcon aria-label={`Push Config "${vin}"`} />
</Link>
</Tooltip>
</RoleWrap>
<RoleWrap
groups={groups}
providers={providers}
@@ -192,7 +195,7 @@ const MainForm = ({ vin }) => {
>
<Tooltip key={`delete-${vin}`} title={`Delete "${vin}"`}>
<Link to="#" onClick={() => setShowDeleteModal(true)}>
<DeleteIcon aria-label={`Delete "${vin}"`} />
<DeleteIcon aria-label={`Delete "${vin}"`} fontSize="large" />
</Link>
</Tooltip>
</RoleWrap>

View File

@@ -97,21 +97,25 @@ exports[`DetailsTab Render 1`] = `
</p>
<p>
<b>
Log Level
Tags
</b>
:
info
none
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<b>
CANBus
</b>
<p>
<b>
Enabled
Log Level
</b>
:
info
</p>
<p>
<b>
CANBus Enabled
</b>
:
true
@@ -125,7 +129,7 @@ exports[`DetailsTab Render 1`] = `
</p>
<p>
<b>
Enabled
Data Logger Enabled
</b>
:
true
@@ -144,15 +148,12 @@ exports[`DetailsTab Render 1`] = `
:
3
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<p>
<b>
DebugMask
DTC Enabled
</b>
:
false
</p>
</div>
<div
@@ -160,7 +161,7 @@ exports[`DetailsTab Render 1`] = `
>
<p>
<b>
Tags
Debug Mask
</b>
:
</p>
@@ -168,24 +169,6 @@ exports[`DetailsTab Render 1`] = `
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<a
class=""
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
<label
class="MuiFormControlLabel-root"
>
@@ -220,18 +203,18 @@ exports[`DetailsTab Render 1`] = `
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
FORCE CONFIG PUSH
Force Config Update
</span>
</label>
<a
class=""
href="/testroute/TESTVIN1234567890"
title="Push Config \\"TESTVIN1234567890\\""
title="Push Config Update to \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Push Config \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
aria-label="Push Config Update to \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
data-testid="UploadIcon"
focusable="false"
viewBox="0 0 24 24"
@@ -242,6 +225,28 @@ exports[`DetailsTab Render 1`] = `
</svg>
</a>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<a
class=""
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
</div>
</div>
<div />
<div />

View File

@@ -213,24 +213,6 @@ 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"
@@ -325,48 +307,30 @@ exports[`CarStatus Render 1`] = `
</b>
:
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<p>
<b>
DebugMask
</b>
:
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<p>
<b>
Tags
</b>
:
none
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
/>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<p>
<b>
Debug Mask
</b>
:
</p>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<a
class=""
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
<label
class="MuiFormControlLabel-root"
>
@@ -401,18 +365,18 @@ exports[`CarStatus Render 1`] = `
<span
class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
>
FORCE CONFIG PUSH
Force Config Update
</span>
</label>
<a
class=""
href="/"
title="Push Config \\"TESTVIN1234567890\\""
title="Push Config Update to \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Push Config \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
aria-label="Push Config Update to \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
data-testid="UploadIcon"
focusable="false"
viewBox="0 0 24 24"
@@ -423,6 +387,28 @@ exports[`CarStatus Render 1`] = `
</svg>
</a>
</div>
<div
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-12"
>
<a
class=""
href="/vehicle-update?vin=TESTVIN1234567890"
style="margin: 5px;"
title="Update \\"TESTVIN1234567890\\""
>
<svg
aria-hidden="true"
aria-label="Update \\"TESTVIN1234567890\\""
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
/>
</svg>
</a>
</div>
</div>
<div />
<div />
@@ -484,12 +470,6 @@ exports[`CarStatus Render 1`] = `
id="tabpanel-9"
role="tabpanel"
/>
<div
aria-labelledby="tab-10"
hidden=""
id="tabpanel-10"
role="tabpanel"
/>
</div>
</div>
</div>

View File

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