Merge branch 'release/0.9.0'

.env.cec-euprd

@@ -17,3 +17,4 @@ REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=
 REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":49.8327,"lng":9.8816,"zoom":4.5}
+REACT_APP_ENABLE_DEBUGMASK=1

.env.cec-prd

@@ -17,3 +17,4 @@ REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=
 REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}
+REACT_APP_ENABLE_DEBUGMASK=1

.env.dev

@@ -17,3 +17,4 @@ REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=stage,prod
 REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}
+REACT_APP_ENABLE_DEBUGMASK=1

.env.local

@@ -17,3 +17,4 @@ REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=dev,stage,prod
 REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}
+REACT_APP_ENABLE_DEBUGMASK=1

.env.prd

@@ -17,3 +17,4 @@ REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=stage
 REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}
+REACT_APP_ENABLE_DEBUGMASK=1

.env.stg

@@ -17,3 +17,4 @@ REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=prod
 REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}
+REACT_APP_ENABLE_DEBUGMASK=1

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

@@ -467,7 +467,7 @@ exports[`App Route / authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -705,7 +705,7 @@ exports[`App Route / unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -1203,7 +1203,7 @@ exports[`App Route /dashboards/0 authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-vehicleprovider"
@@ -1364,7 +1364,7 @@ exports[`App Route /dashboards/0 unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -1864,7 +1864,7 @@ exports[`App Route /home authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -2102,7 +2102,7 @@ exports[`App Route /home unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -2638,7 +2638,7 @@ exports[`App Route /issue-info authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -2750,7 +2750,7 @@ exports[`App Route /issue-info unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -3250,7 +3250,7 @@ exports[`App Route /issues authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-issueprovider"
@@ -3641,7 +3641,7 @@ exports[`App Route /issues unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -4177,7 +4177,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-manifestsprovider"
@@ -4741,7 +4741,7 @@ exports[`App Route /package-deploy unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -5293,7 +5293,7 @@ exports[`App Route /package-status authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-manifestsprovider"
@@ -5684,7 +5684,7 @@ exports[`App Route /package-status unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -6184,7 +6184,7 @@ exports[`App Route /packages authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-manifestsprovider"
@@ -6733,7 +6733,7 @@ exports[`App Route /packages unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -7231,7 +7231,7 @@ exports[`App Route /page-not-found authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -7277,7 +7277,7 @@ exports[`App Route /page-not-found unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -7323,7 +7323,7 @@ exports[`App Route /supplier/{email} unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -7859,7 +7859,7 @@ exports[`App Route /tools/certificates/add authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -8133,7 +8133,7 @@ exports[`App Route /tools/certificates/add unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -8539,7 +8539,7 @@ exports[`App Route /tools/security-dll authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <form>
             <p>
@@ -8617,7 +8617,7 @@ exports[`App Route /tools/security-dll unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -9153,7 +9153,7 @@ exports[`App Route /tools/sms/send authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0"
@@ -9344,7 +9344,7 @@ exports[`App Route /tools/sms/send unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -9880,7 +9880,7 @@ exports[`App Route /vehicle-add authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-vehicleprovider"
@@ -10489,7 +10489,7 @@ exports[`App Route /vehicle-add unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -11025,7 +11025,7 @@ exports[`App Route /vehicle-status authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -11428,6 +11428,43 @@ exports[`App Route /vehicle-status authenticated 1`] = `
                               />
                             </svg>
                           </a>
+                          <label
+                            class="MuiFormControlLabel-root"
+                          >
+                            <span
+                              aria-disabled="false"
+                              class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                            >
+                              <span
+                                class="MuiIconButton-label"
+                              >
+                                <input
+                                  class="PrivateSwitchBase-input-0"
+                                  data-indeterminate="false"
+                                  type="checkbox"
+                                  value=""
+                                />
+                                <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"
+                            >
+                              FORCE CONFIG PUSH
+                            </span>
+                          </label>
                           <a
                             class=""
                             href="/vehicle-status/FISKER123"
@@ -11551,7 +11588,7 @@ exports[`App Route /vehicle-status unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -11612,7 +11649,7 @@ exports[`App Route /vehicle-status/vin/carupdateid unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"
@@ -12112,7 +12149,7 @@ exports[`App Route /vehicles authenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             data-testid="mocked-vehicleprovider"
@@ -12554,7 +12591,7 @@ exports[`App Route /vehicles unauthenticated 1`] = `
           class="makeStyles-drawerHeader-0"
         />
         <main
-          class="MuiContainer-root MuiContainer-maxWidthLg"
+          class="MuiContainer-root MuiContainer-disableGutters"
         >
           <div
             class="makeStyles-paper-0 makeStyles-textJustifyAlign-0"

src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap

@@ -292,6 +292,47 @@ exports[`Render Render 1`] = `
                   
                 </div>
               </div>
+              <div
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <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"
+                  >
+                    GMT
+                  </span>
+                </label>
+              </div>
             </div>
           </div>
           <div

src/components/CANSelfServe/SelfServe/index.jsx

@@ -1,5 +1,5 @@
 import DateFnsUtils from '@date-io/date-fns';
-import { Button, Checkbox, Chip, CircularProgress, FormControl, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
+import { Button, Checkbox, Chip, CircularProgress, FormControl, FormControlLabel, 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";
@@ -17,6 +17,7 @@ const MainForm = ({ id }) => {
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedCanSignals, setSelectedCanSignals] = useState([]);
   const [selectAllCanSignals, setSelectAllCanSignals] = useState(false);
+  const [gmtTimezone, setGmtTimezone] = useState(false);
 
   const {
     token: {
@@ -86,6 +87,12 @@ const MainForm = ({ id }) => {
     }
   };
 
+  const displayTimeAsGMT = (date) => {
+    return gmtTimezone
+      ? date.toLocaleString("en-US", {timeZone: "Etc/GMT"})
+      : date;
+  }
+
 
   return (
     <div className={classes.paper}>
@@ -102,7 +109,7 @@ const MainForm = ({ id }) => {
                   margin="normal"
                   id="date-picker-inline"
                   label="Date From"
-                  value={selectedStartDate}
+                  value={displayTimeAsGMT(selectedStartDate)}
                   onChange={(value) => handleDateChange(value, "start")}
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -116,7 +123,7 @@ const MainForm = ({ id }) => {
                   variant="inline"
                   id="time-picker"
                   label="Time From"
-                  value={selectedStartDate}
+                  value={displayTimeAsGMT(selectedStartDate)}
                   onChange={handleTimeFromChange}
                   KeyboardButtonProps={{
                     'aria-label': 'change time',
@@ -132,7 +139,7 @@ const MainForm = ({ id }) => {
                   margin="normal"
                   id="date-picker-inline"
                   label="Date To"
-                  value={selectedEndDate}
+                  value={displayTimeAsGMT(selectedEndDate)}
                   onChange={(value) => handleDateChange(value, "end")}
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -146,13 +153,24 @@ const MainForm = ({ id }) => {
                   id="time-picker"
                   variant="inline"
                   label="Time To"
-                  value={selectedEndDate}
+                  value={displayTimeAsGMT(selectedEndDate)}
                   onChange={handleTimeToChange}
                   KeyboardButtonProps={{
                     'aria-label': 'change time',
                   }}
                 />
               </Grid>
+              <Grid item xs={6} md={3}>
+                <FormControlLabel
+                  label="GMT"
+                  control={
+                    <Checkbox
+                      checked={gmtTimezone}
+                      onChange={() => setGmtTimezone((current) => !current)}
+                    />
+                  }
+                />
+              </Grid>
             </Grid>
           </MuiPickersUtilsProvider>
         </Grid>

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

@@ -168,6 +168,43 @@ exports[`VehicleDetailsTab Render 1`] = `
                     />
                   </svg>
                 </a>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <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"
+                  >
+                    FORCE CONFIG PUSH
+                  </span>
+                </label>
                 <a
                   class=""
                   href="/"

src/components/Cars/Status/Details/index.jsx

@@ -1,4 +1,4 @@
-import { Grid, Tooltip } 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';
@@ -27,6 +27,7 @@ const MainForm = ({ vin }) => {
   const [redirect, setRedirect] = useState(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showUploadConfigModal, setShowUploadConfigModal] = useState(false);
+  const [forced, setForced] = useState(false);
   const {
     token: {
       idToken: { jwtToken: token },
@@ -35,8 +36,11 @@ const MainForm = ({ vin }) => {
     providers,
   } = useUserContext();
 
-  const ENV = process.env.REACT_APP_ENV;
-  const showDebugMask = (ENV === 'local' || ENV === 'dev' || ENV === 'stg' || ENV === 'prd' || ENV === 'cec-prd' || ENV === 'cec-euprd')
+  const showDebugMask = (process.env.REACT_APP_ENABLE_DEBUGMASK === "1");
+
+  const onForcedChange = (event) => {
+    setForced(event.target.checked);
+  }
 
   useEffect(() => {
     (async () => {
@@ -64,7 +68,7 @@ const MainForm = ({ vin }) => {
 
   const onUploadConfig = async () => {
     try {
-      await uploadConfig(vin, token);
+      await uploadConfig(vin, forced, token);
       setMessage(`Config Uploaded ${vin}`);
     } catch (e) {
       setMessage(e.message);
@@ -160,6 +164,15 @@ const MainForm = ({ vin }) => {
             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}"`} />

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

@@ -176,6 +176,43 @@ exports[`DetailsTab Render 1`] = `
                       />
                     </svg>
                   </a>
+                  <label
+                    class="MuiFormControlLabel-root"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                    >
+                      <span
+                        class="MuiIconButton-label"
+                      >
+                        <input
+                          class="PrivateSwitchBase-input-0"
+                          data-indeterminate="false"
+                          type="checkbox"
+                          value=""
+                        />
+                        <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"
+                    >
+                      FORCE CONFIG PUSH
+                    </span>
+                  </label>
                   <a
                     class=""
                     href="/testroute/TESTVIN1234567890"

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

@@ -53,14 +53,14 @@ exports[`DigitalTwinTab Render 1`] = `
                   Total Mileage
                 </b>
                 : 
-                unknown
+                12000 km
               </p>
               <p>
                 <b>
                   Max Range
                 </b>
                 : 
-                577
+                577 km
               </p>
             </div>
             <div
@@ -158,7 +158,7 @@ exports[`DigitalTwinTab Render 1`] = `
                   altitude
                 </b>
                 : 
-                17
+                17 m
               </p>
               <p>
                 <b>
@@ -227,7 +227,7 @@ exports[`DigitalTwinTab Render 1`] = `
                   Vehicle Speed
                 </b>
                 : 
-                77.7
+                77.7 km/h
               </p>
             </div>
           </div>

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

@@ -357,6 +357,43 @@ exports[`CarStatus Render 1`] = `
                           />
                         </svg>
                       </a>
+                      <label
+                        class="MuiFormControlLabel-root"
+                      >
+                        <span
+                          aria-disabled="false"
+                          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <input
+                              class="PrivateSwitchBase-input-0"
+                              data-indeterminate="false"
+                              type="checkbox"
+                              value=""
+                            />
+                            <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"
+                        >
+                          FORCE CONFIG PUSH
+                        </span>
+                      </label>
                       <a
                         class=""
                         href="/"

src/components/Cars/Status/index.jsx

@@ -135,6 +135,7 @@ const CarStatus = () => {
       <Box
         className={classes.tableToolbar}
         sx={{ borderBottom: 1, borderColor: "divider" }}
+        justifyContent="center"
       >
         <Tabs
           value={tabIndex}

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

@@ -884,6 +884,44 @@ exports[`VehicleUpdate Render 1`] = `
                     Data Logger Enabled
                   </span>
                 </label>
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        checked=""
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="MuiTouchRipple-root"
+                    />
+                  </span>
+                  <span
+                    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+                  >
+                    Data Logger Enabled
+                  </span>
+                </label>
               </div>
               <div
                 class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"

src/components/Cars/Update/index.jsx

@@ -1,6 +1,3 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Redirect } from "react-router";
-import { useLocation } from "react-router-dom";
 import {
   Button,
   Checkbox,
@@ -11,15 +8,18 @@ import {
   RadioGroup,
   TextField
 } from "@material-ui/core";
+import React, { useEffect, useRef, useState } from "react";
+import { Redirect } from "react-router";
+import { useLocation } from "react-router-dom";
 
-import useStyles from "../../useStyles";
+import { logger } from "../../../services/monitoring";
+import { useStatusContext } from "../../Contexts/StatusContext";
+import { useUserContext } from "../../Contexts/UserContext";
 import {
   useVehicleContext,
   VehicleProvider
 } from "../../Contexts/VehicleContext";
-import { useStatusContext } from "../../Contexts/StatusContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import { logger } from "../../../services/monitoring";
+import useStyles from "../../useStyles";
 
 
 const MainForm = () => {
@@ -46,10 +46,10 @@ const MainForm = () => {
   const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
   const [maxMemBufferSize, setMaxMemBufferSize] = useState(0);
   const [maxDiskBufferSize, setMaxDiskBufferSize] = useState(0);
+  const [dtcEnabled, setDTCEnabled] = useState(true);
   const debugMaskEl = useRef(null);
 
-  const ENV = process.env.REACT_APP_ENV;
-  const showDebugMask = (ENV === 'local' || ENV === 'dev' || ENV === 'stg' || ENV === 'prd' || ENV === 'cec-prd' || ENV === 'cec-euprd')
+  const showDebugMask = (process.env.REACT_APP_ENABLE_DEBUGMASK === "1");
 
   useEffect(() => {
     setTitle("Update Vehicle");
@@ -96,6 +96,7 @@ const MainForm = () => {
       setDataLoggerEnabled(vehicle.canbus.data_logger_enabled ?? dataLoggerEnabled);
       setMaxMemBufferSize(vehicle.canbus.max_mem_buffer_size ?? maxMemBufferSize);
       setMaxDiskBufferSize(vehicle.canbus.max_disk_buffer_size ?? maxDiskBufferSize);
+      setDTCEnabled(vehicle.canbus.dtc_enabled ?? dtcEnabled);
     }
 
     if (showDebugMask) {
@@ -117,6 +118,10 @@ const MainForm = () => {
     setDataLoggerEnabled(event.target.checked);
   }
 
+  const onDtcEnabledChange = (event) => {
+    setDTCEnabled(event.target.checked);
+  }
+
   const onMaxMemBufferSizeChange = (event) => {
     setMaxMemBufferSize(event.target.value);
   }
@@ -144,7 +149,8 @@ const MainForm = () => {
           enabled: canbusEnabled,
           data_logger_enabled: canbusEnabled ? dataLoggerEnabled : false,
           max_mem_buffer_size: canbusEnabled ? parseInt(maxMemBufferSize) : 0,
-          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
+          max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0,
+          dtc_enabled: canbusEnabled ? dtcEnabled : false
         },
         debug_mask: debugMaskEl.current?.value
       };
@@ -372,6 +378,13 @@ const MainForm = () => {
               disabled={!canbusEnabled}
             />
           } label="Data Logger Enabled" />
+           <FormControlLabel control={
+            <Checkbox
+              checked={dtcEnabled}
+              onChange={onDtcEnabledChange}
+              disabled={!canbusEnabled}
+            />
+          } label="Data Logger Enabled" />
         </FormGroup>
         <TextField
           id="max_disk_buffer_size"

src/components/Contexts/VehicleContext.jsx

@@ -200,12 +200,12 @@ export const VehicleProvider = ({ children }) => {
     }
   };
 
-  const uploadConfig = async (vin, token) => {
+  const uploadConfig = async (vin, forced, token) => {
     try {
       setBusy(true);
       validateVIN(vin);
 
-      const result = await api.updateConfig(vin, token);
+      const result = await api.updateConfig(vin, forced, token);
       if (result.error)
         throw new Error(`Update vehicle error. ${result.message}`);
       return result;

src/components/Contexts/__mocks__/VehicleContext.jsx

@@ -37,6 +37,7 @@ let vehicleState = {
     online: false,
     online_hmi: true,
     battery: {
+      total_mileage_odometer: 12000,
       percent: 95,
     },
     max_range: {

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

@@ -0,0 +1,716 @@
+// 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
+                class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
+              >
+                <label
+                  class="MuiFormControlLabel-root"
+                >
+                  <span
+                    aria-disabled="false"
+                    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+                  >
+                    <span
+                      class="MuiIconButton-label"
+                    >
+                      <input
+                        class="PrivateSwitchBase-input-0"
+                        data-indeterminate="false"
+                        type="checkbox"
+                        value=""
+                      />
+                      <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"
+                  >
+                    GMT
+                  </span>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
+          >
+            <div
+              style="margin-bottom: 8px;"
+            >
+              <div
+                class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined"
+                  data-shrink="true"
+                  for="ecu_field"
+                  id="ecu_field-label"
+                >
+                  ECU
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="MuiInputBase-input MuiOutlinedInput-input"
+                    id="ecu_field"
+                    name="ecu_field"
+                    type="text"
+                    value=""
+                  />
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
+                    >
+                      <span>
+                        ECU
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </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"
+              >
+                <div
+                  class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+                  role="progressbar"
+                  style="width: 24px; height: 24px;"
+                >
+                  <svg
+                    class="MuiCircularProgress-svg"
+                    viewBox="22 22 44 44"
+                  >
+                    <circle
+                      class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+                      cx="44"
+                      cy="44"
+                      fill="none"
+                      r="20.2"
+                      stroke-width="3.6"
+                    />
+                  </svg>
+                </div>
+              </span>
+            </button>
+          </div>
+          <div
+            class="makeStyles-paper-0 makeStyles-tableSize-0"
+          >
+            <table
+              aria-label="dtc table"
+              class="MuiTable-root"
+            >
+              <thead
+                class="MuiTableHead-root"
+              >
+                <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"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root"
+                      role="button"
+                      tabindex="0"
+                    >
+                      ECU
+                      <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"
+                    >
+                      Trouble Code
+                      <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"
+                    >
+                      Status Code
+                      <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"
+                  >
+                    Error Text
+                  </th>
+                  <th
+                    aria-sort="descending"
+                    class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
+                    scope="col"
+                  >
+                    <span
+                      aria-disabled="false"
+                      class="MuiButtonBase-root MuiTableSortLabel-root MuiTableSortLabel-active"
+                      role="button"
+                      tabindex="0"
+                    >
+                      Date
+                      <span
+                        class="makeStyles-hiddenSortSpan-0"
+                      >
+                        sorted descending
+                      </span>
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionDesc"
+                        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
+                class="MuiTableBody-root"
+              />
+              <tfoot
+                class="MuiTableFooter-root"
+              >
+                <tr
+                  class="MuiTableRow-root MuiTableRow-footer"
+                >
+                  <td
+                    class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
+                    colspan="6"
+                  >
+                    <div
+                      class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
+                    >
+                      <div
+                        class="MuiTablePagination-spacer"
+                      />
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                        id="mui-0"
+                      >
+                        Rows per page:
+                      </p>
+                      <div
+                        class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
+                      >
+                        <select
+                          aria-label="rows per page"
+                          class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
+                          id="mui-0"
+                        >
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="5"
+                          >
+                            5
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="10"
+                          >
+                            10
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="25"
+                          >
+                            25
+                          </option>
+                          <option
+                            class="MuiTablePagination-menuItem"
+                            value="100"
+                          >
+                            100
+                          </option>
+                        </select>
+                        <svg
+                          aria-hidden="true"
+                          class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M7 10l5 5 5-5z"
+                          />
+                        </svg>
+                      </div>
+                      <p
+                        class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
+                      >
+                        0-0 of 0
+                      </p>
+                      <div
+                        class="MuiTablePagination-actions"
+                      >
+                        <button
+                          aria-label="Previous page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Previous page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                        <button
+                          aria-label="Next page"
+                          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
+                          disabled=""
+                          tabindex="-1"
+                          title="Next page"
+                          type="button"
+                        >
+                          <span
+                            class="MuiIconButton-label"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="MuiSvgIcon-root"
+                              focusable="false"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
+                              />
+                            </svg>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/DTCTimeline/DTCTimeline/index.jsx

@@ -1,13 +1,12 @@
 import DateFnsUtils from '@date-io/date-fns';
-import { Button, CircularProgress, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from "@material-ui/core";
-import { KeyboardDatePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { Button, Checkbox, CircularProgress, FormControlLabel, Grid, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow, TextField } from "@material-ui/core";
+import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
 import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 import { logger } from "../../../services/monitoring";
 import { DTCTimelineProvider, useDTCTimelineContext } from '../../Contexts/DTCTimelineContext';
 import { useStatusContext } from "../../Contexts/StatusContext";
 import { useUserContext } from "../../Contexts/UserContext";
-import SearchField from '../../Controls/SearchField';
 import TableHeaderSortable from "../../Table/HeaderSortable";
 import { useLocalStorage } from "../../useLocalStorage";
 import useStyles from "../../useStyles";
@@ -20,10 +19,11 @@ const MainForm = ({ vin }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [orderBy, setOrderBy] = useState("epoch_usec");
   const [order, setOrder] = useState("desc");
-  const { dtcData, getDTCData, total=0 } = useDTCTimelineContext();
+  const { dtcData, getDTCData, total = 0 } = useDTCTimelineContext();
   const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
   const [selectedEndDate, setSelectedEndDate] = useState(new Date());
   const [selectedECU, setSelectedECU] = useState("");
+  const [gmtTimezone, setGmtTimezone] = useState(false);
   const [loading, setLoading] = useState(false);
   const { setMessage } = useStatusContext();
 
@@ -51,7 +51,7 @@ const MainForm = ({ vin }) => {
     {
       id: "ErrorText",
       label: "Error Text",
-      no_sort : true,
+      no_sort: true,
     },
     {
       id: "epoch_usec",
@@ -91,11 +91,9 @@ const MainForm = ({ vin }) => {
     setLoading(true);
     try {
       let start_date = new Date(selectedStartDate);
-      start_date.setHours(0, 0, 0, 0);
       start_date = start_date.toISOString();
 
       let end_date = new Date(selectedEndDate);
-      end_date.setHours(23, 59, 59, 999);
       end_date = end_date.toISOString();
 
       const search = {
@@ -117,6 +115,33 @@ const MainForm = ({ vin }) => {
     return date.toLocaleString();
   }
 
+  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 displayTimeAsGMT = (date) => {
+    return gmtTimezone
+      ? date.toLocaleString("en-US", { timeZone: "Etc/GMT" })
+      : date;
+  }
+
   useEffect(() => {
     fetchDTCData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -124,64 +149,114 @@ const MainForm = ({ vin }) => {
 
   return (
     <div className={classes.paper}>
-      <Grid container spacing={3} alignItems="flex-end">
+      <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={displayTimeAsGMT(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={displayTimeAsGMT(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={displayTimeAsGMT(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={displayTimeAsGMT(selectedEndDate)}
+                  onChange={handleTimeToChange}
+                  KeyboardButtonProps={{
+                    'aria-label': 'change time',
+                  }}
+                />
+              </Grid>
+              <Grid item xs={6} md={3}>
+                <FormControlLabel
+                  label="GMT"
+                  control={
+                    <Checkbox
+                      checked={gmtTimezone}
+                      onChange={() => setGmtTimezone((current) => !current)}
+                    />
+                  }
+                />
+              </Grid>
+            </Grid>
+          </MuiPickersUtilsProvider>
+        </Grid>
+        <Grid item xs={12}>
           <div style={{ marginBottom: '8px' }}>
-            <SearchField
-              classes={classes}
-              onSearch={(searchValue) => {
-                setSelectedECU(searchValue);
+            <TextField
+              id="ecu_field"
+              name="ecu_field"
+              label="ECU"
+              InputLabelProps={{
+                shrink: true
+              }}
+              defaultValue=""
+              variant="outlined"
+              margin="normal"
+              fullWidth
+              onChange={(e) => {
+                setSelectedECU(e.target.value);
               }}
             />
           </div>
         </Grid>
-        <Grid item xs={12} sm={6} md={3}>
-          <MuiPickersUtilsProvider utils={DateFnsUtils}>
-            <KeyboardDatePicker
-              disableToolbar
-              variant="inline"
-              format="MM/dd/yyyy"
-              margin="normal"
-              label="Start Date"
-              value={selectedStartDate}
-              onChange={setSelectedStartDate}
-              KeyboardButtonProps={{
-                'aria-label': 'change date',
-              }}
-              fullWidth
-            />
-          </MuiPickersUtilsProvider>
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
-          <MuiPickersUtilsProvider utils={DateFnsUtils}>
-            <KeyboardDatePicker
-              disableToolbar
-              variant="inline"
-              format="MM/dd/yyyy"
-              margin="normal"
-              label="End Date"
-              value={selectedEndDate}
-              onChange={setSelectedEndDate}
-              KeyboardButtonProps={{
-                'aria-label': 'change date',
-              }}
-              fullWidth
-            />
-          </MuiPickersUtilsProvider>
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item xs={12}>
           <Button
             variant="contained"
             color="primary"
             onClick={fetchDTCData}
             disabled={loading}
             fullWidth
-            style={{ marginTop: '15px' }}
           >
             {loading ? <CircularProgress size={24} /> : "Filter"}
           </Button>
         </Grid>
-      </Grid>
         <div className={clsx(classes.paper, classes.tableSize)}>
           <Table aria-label="dtc table">
             <TableHeaderSortable
@@ -225,6 +300,7 @@ const MainForm = ({ vin }) => {
             </TableFooter>
           </Table>
         </div>
+      </Grid>
     </div>
   );
 

src/components/DTCTimeline/DTCTimeline/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 DTCTimeline from "./index";
+
+const renderDTCTimeline = async () => {
+  const { container } = render(
+    <StatusProvider>
+      <UserProvider>
+        <BrowserRouter>
+          <DTCTimeline 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 renderDTCTimeline();
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/DigitalTwin/index.js

@@ -38,15 +38,15 @@ const DigitalTwin = (props) => {
         <div className={classes.popupSection}>
           <h3>Battery</h3>
           {keyValueTemplate("Percentage", `${battery?.percent || 0}%`)}
-          {keyValueTemplate("Total Mileage", battery?.total_mileage_odometer || UNKNOWN)}
-          {keyValueTemplate("Max Range", max_range?.max_miles || UNKNOWN)}
+          {keyValueTemplate("Total Mileage", `${battery?.total_mileage_odometer} km` || UNKNOWN)}
+          {keyValueTemplate("Max Range", `${max_range?.max_miles} km` || UNKNOWN)}
         </div>
       )}
       {(vcu0x260 || charging_metrics) && (
         <div className={classes.popupSection}>
           <h3>Charging</h3>
           {keyValueTemplate("Charge Type", vcu0x260?.charge_type || UNKNOWN)}
-          {keyValueTemplate("Remaining Time", charging_metrics?.remaining_charging_time || UNKNOWN)}
+          {keyValueTemplate("Remaining Time", `${charging_metrics?.remaining_charging_time} min` || UNKNOWN)}
         </div>
       )}
       {doors && (
@@ -95,7 +95,7 @@ const DigitalTwin = (props) => {
               return keyValueTemplate(value[0], "Invalid")
             }
             if (value[0] === "altitude") {
-              return keyValueTemplate(value[0], value[1]);
+              return keyValueTemplate(value[0], `${value[1]} m`);
             } else {
               return keyValueTemplate(value[0], `${value[1]}°`);
             }
@@ -124,7 +124,7 @@ const DigitalTwin = (props) => {
       )}
       {vehicle_speed && (
         <div className={classes.popupSection}>
-          {keyValueTemplate("Vehicle Speed", vehicle_speed.speed)}
+          {keyValueTemplate("Vehicle Speed", `${vehicle_speed.speed} km/h`)}
         </div>
       )}
     </div>

src/components/Layouts/MenuDrawer.jsx

@@ -91,7 +91,7 @@ export default function MenuDrawer({ children }) {
         })}
       >
         <div className={classes.drawerHeader} />
-        <Container component="main">{children}</Container>
+        <Container disableGutters={true} maxWidth={false} component="main">{children}</Container>
       </main>
     </div>
   );

src/components/useStyles.jsx

@@ -127,6 +127,7 @@ const useStyles = makeStyles((theme) => ({
       duration: theme.transitions.duration.enteringScreen,
     }),
     marginLeft: 0,
+    maxWidth: `calc(100% - ${DRAWER_WIDTH}px)`,
   },
   rightToolbar: {
     marginLeft: "auto",
@@ -161,7 +162,7 @@ const useStyles = makeStyles((theme) => ({
     textAlign: "left",
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(1),
-    width: "100%",
+    maxWidth: "100%",
   },
   logo: {
     height: 60,

src/services/vehiclesAPI.js

@@ -173,8 +173,8 @@ const vehiclesAPI = {
       .then(fetchRespHandler)
       .catch(errorHandler),
 
-  updateConfig: async (vin, token) =>
-    fetch(`${API_ENDPOINT}/car_config/${vin}`, {
+  updateConfig: async (vin, forced, token) =>
+    fetch(`${API_ENDPOINT}/car_config/${vin}?forced=${forced}`, {
       method: "POST",
       headers: Object.assign(
         { "Content-Type": "application/json" },