+ Issue Details
+
-
- Description
-
-
-
sometitle
-
- 2343242
-
@@ -2616,11 +2537,6 @@ exports[`App Route /issues authenticated 1`] = `
>
sometitle
-
- 2343242
-
@@ -2641,7 +2557,7 @@ exports[`App Route /issues authenticated 1`] = `
>
@@ -3325,7 +3239,7 @@ exports[`App Route /package-deploy authenticated 1`] = `
@@ -10088,6 +10024,12 @@ exports[`App Route /vehicle-status authenticated 1`] = `
id="tabpanel-6"
role="tabpanel"
/>
+
diff --git a/src/components/Cars/Status/CarUpdatesTab.jsx b/src/components/Cars/Status/CarUpdatesTab.jsx
index 43aa451..bd5dcda 100644
--- a/src/components/Cars/Status/CarUpdatesTab.jsx
+++ b/src/components/Cars/Status/CarUpdatesTab.jsx
@@ -1,12 +1,12 @@
+import { Typography } from "@material-ui/core";
+import clsx from "clsx";
import React from "react";
import { useParams } from "react-router";
-import clsx from "clsx";
-import { Typography } from "@material-ui/core";
-import CarECUsTable from "../../Controls/CarECUsTable";
-import CarUpdatesTable from "../../Controls/CarUpdatesTable";
-import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
+import { VehicleProvider } from "../../Contexts/VehicleContext";
+import CarUpdatesTable from "../../Controls/CarUpdatesTable";
+import CarVersionLogTable from "../../Controls/CarVersionLogTable";
import useStyles from "../../useStyles";
const MainForm = () => {
@@ -22,10 +22,8 @@ const MainForm = () => {
Car Updates
- Car ECUs
-
- Version Log
+
+
+);
+
+export default CarUpdatesTab;
diff --git a/src/components/Cars/Status/ECUsTab.test.jsx b/src/components/Cars/Status/ECUsTab.test.jsx
new file mode 100644
index 0000000..edd5720
--- /dev/null
+++ b/src/components/Cars/Status/ECUsTab.test.jsx
@@ -0,0 +1,44 @@
+jest.mock("../../Contexts/CANFiltersContext");
+jest.mock("../../Contexts/StatusContext");
+jest.mock("../../Contexts/UserContext");
+jest.mock("../../../services/vehiclesAPI");
+jest.mock("@material-ui/core/utils/unstable_useId", () =>
+ jest.fn().mockReturnValue("mui-test-id")
+);
+
+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 MainForm from "./ECUsTab";
+
+const renderECUsTab = async () => {
+ const { container } = render(
+
+
+
+
+
+
+ );
+ await waitFor(() => {
+ /* render */
+ });
+ return container;
+};
+
+describe("ECUsTab", () => {
+ beforeAll(() => {
+ addSnapshotSerializer(expect);
+ });
+
+ it("Render", async () => {
+ setToken(TEST_AUTH_OBJECT_FISKER);
+ const container = await renderECUsTab();
+ expect(container).toMatchSnapshot();
+ });
+});
diff --git a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
index 7468285..d3e7afe 100644
--- a/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/CarUpdatesTab.test.jsx.snap
@@ -164,16 +164,16 @@ exports[`CarUpdatesTab Render 1`] = `
-
No Car Updates found
-
+
-
@@ -2472,29 +2421,6 @@ exports[`App Route /issues authenticated 1`] = `
- - Issue Details -
- 
-
+
-
-
- - - ID - - : - FISKER123 -
-- - VIN - - : - 1GNGC26RXXJ407648 -
-- - Title - - : - sometitle -
-- - Description - - : - 2343242 -
-- - timestamp - - : - 2022-12-09T23:16:38.074858Z -
-
- + + ID + + : + FISKER123 +
++ + VIN + + : + 1GNGC26RXXJ407648 +
++ + Title + + : + sometitle +
++ + Description + + : + 2343242 +
++ + Created + + : + 12/9/2022 11:16:38 PM +
+
- Created + Created 7/1/2021 10:40:07 PM .
@@ -9739,8 +9653,12 @@ exports[`App Route /vehicle-status authenticated 1`] = ` class="MuiTabs-root" > +
- Remote Commands
+ ECUs
+
+ Remote Commands
+
+
+
+
@@ -9991,35 +9927,35 @@ exports[`App Route /vehicle-status authenticated 1`] = `
Enabled
- :
+ :
true
Max Memory Buffer Size - : + : 1
Enabled - : + : true
Max Disk Buffer Size - : + : 2
Filters - : + : 3
+
+ Car ECUs
+
+
+ );
+};
+
+const CarUpdatesTab = () => (
+ +
- Car ECUs + Version Log
+
+
+ Type
+
+
+
+
+
+ Version
+
+
+
- ECU
+ Date
@@ -216,121 +262,6 @@ exports[`CarUpdatesTab Render 1`] = `
-
-
- SW Version
-
-
-
-
-
- HW Version
-
-
-
-
-
- Config
-
-
-
-
-
- Created
-
-
-
-
-
- Updated
-
-
-
+
diff --git a/src/components/Cars/Status/index.jsx b/src/components/Cars/Status/index.jsx
index d2d8cec..1ea797f 100644
--- a/src/components/Cars/Status/index.jsx
+++ b/src/components/Cars/Status/index.jsx
@@ -14,6 +14,7 @@ import CANSignalsTab from "./CANSignalsTab";
import CarUpdatesTab from "./CarUpdatesTab";
import CarDetailsTab from "./DetailsTab";
import DigitalTwinTab from "./DigitalTwinTab";
+import ECUsTab from "./ECUsTab";
import FleetsTab from "./FleetsTab";
import RemoteCommandsTab from "./RemoteCommandsTab";
@@ -41,6 +42,10 @@ const TabViews = [
label: "CAN Signals",
component: CANSignalsTab,
},
+ {
+ label: "ECUs",
+ component: ECUsTab,
+ },
{
label: "Remote Commands",
component: RemoteCommandsTab,
@@ -110,6 +115,7 @@ const CarStatus = () => {
value={tabIndex}
onChange={handleTabChange}
aria-label="car tabs"
+ variant="scrollable"
indicatorColor="secondary">
{tabs.map((item, index) => {
sendCommand,
updateVehicle,
getFleets,
+ getVersionLog,
}}
>
{children}
diff --git a/src/components/Contexts/__mocks__/VehicleContext.jsx b/src/components/Contexts/__mocks__/VehicleContext.jsx
index f31d80c..c545745 100644
--- a/src/components/Contexts/__mocks__/VehicleContext.jsx
+++ b/src/components/Contexts/__mocks__/VehicleContext.jsx
@@ -70,6 +70,7 @@ let vehicleState = {
temperature: 26,
},
trex_version: "1000000",
+ dbc_version: "d439abd3662dd20099f49dd8f43f7b145202e961caa2b5aba2c6154c8096348b",
ip: "172.20.0.17:49850",
updated: "2022-07-26T00:26:38.880381Z",
},
diff --git a/src/components/Controls/CarUpdatesTable/index.jsx b/src/components/Controls/CarUpdatesTable/index.jsx
index 19882c9..69fa586 100644
--- a/src/components/Controls/CarUpdatesTable/index.jsx
+++ b/src/components/Controls/CarUpdatesTable/index.jsx
@@ -6,7 +6,7 @@ import {
TableFooter,
TablePagination,
TableRow,
- Tooltip,
+ Tooltip
} from "@material-ui/core";
import CancelIcon from "@material-ui/icons/Cancel";
import React, { useEffect, useState } from "react";
@@ -16,7 +16,7 @@ import { logger } from "../../../services/monitoring";
import { LocalDateTimeString } from "../../../utils/dates";
import {
CarUpdatesProvider,
- useCarUpdatesContext,
+ useCarUpdatesContext
} from "../../Contexts/CarUpdatesContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
@@ -198,7 +198,7 @@ const MainForm = ({ vin, token }) => {
{totalCarUpdates === 0 ? (
- No Car Updates found
) : (
{
+ const [versions, setVersions] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
+ const [pageIndex, setPageIndex] = useState(0);
+ const [orderBy, setOrderBy] = useState("created_at");
+ const [order, setOrder] = useState("desc");
+ const { getVersionLog } = useVehicleContext();
+ const { setMessage } = useStatusContext();
+
+ useEffect(() => {
+ (async () => {
+ try {
+ if (!vin || !token) return;
+ const result = await getVersionLog(
+ {
+ vin,
+ limit: pageSize,
+ offset: pageSize * pageIndex,
+ order: `${orderBy} ${order}`,
+ },
+ token
+ );
+ setVersions(result.data);
+ if (result.total > -1) setTotal(result.total);
+ } catch (e) {
+ setMessage(e.message);
+ logger.warn(e.stack);
+ }
+ })();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [vin, token, pageIndex, pageSize, orderBy, order]);
+
+ const handleChangePageIndex = (event, newIndex) => {
+ setPageIndex(newIndex);
+ };
+
+ const handleChangePageSize = (event) => {
+ setPageSize(parseInt(event.target.value, 10));
+ setPageIndex(0);
+ };
+
+ const handleSort = (event, property) => {
+ try {
+ if (property === orderBy) {
+ if (order === "asc") {
+ setOrder("desc");
+ } else {
+ setOrder("asc");
+ }
+ } else {
+ setOrderBy(property);
+ setOrder("asc");
+ }
+ } catch (e) {
+ logger.warn(e.stack);
+ }
+ };
+
+ return (
+
@@ -161,7 +164,6 @@ const IssueSelectionTable = (props) => {
@@ -214,4 +214,4 @@ IssueSelectionTable.propTypes = {
onSelectAll: PropTypes.func,
};
-export default IssueSelectionTable;
+export default IssueSelectionTable;
\ No newline at end of file
diff --git a/src/components/DigitalTwin/index.js b/src/components/DigitalTwin/index.js
index 8129ce9..a0c1141 100644
--- a/src/components/DigitalTwin/index.js
+++ b/src/components/DigitalTwin/index.js
@@ -1,7 +1,7 @@
import React from "react";
-import useStyles from "../useStyles";
import { LocalDateTimeString } from "../../utils/dates";
+import useStyles from "../useStyles";
const keyValueTemplate = (key, value) => (
+ )}
+ {misc_windows != null && (
+
)}
+ {dbc_version != null && (
+ 
diff --git a/src/components/Issues/Info/index.jsx b/src/components/Issues/Info/index.jsx
index bfa6deb..39942af 100644
--- a/src/components/Issues/Info/index.jsx
+++ b/src/components/Issues/Info/index.jsx
@@ -1,55 +1,15 @@
-import { Box, Tab, Tabs } from "@material-ui/core";
import clsx from "clsx";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
import { useParams } from "react-router";
-import { useLocation } from "react-router-dom";
-import { hasRole } from "../../../utils/roles";
import { useStatusContext } from "../../Contexts/StatusContext";
-import { useUserContext } from "../../Contexts/UserContext";
-import TabPanel from "../../Controls/TabPanel";
import useStyles from "../../useStyles";
import IssueDetailsTab from "./DetailsTab";
-
-const tabHashes = ["details", "updates", "filters"];
-
-const TabViews = [
- {
- label: "Details",
- component: IssueDetailsTab,
- },
-
-];
-
-const filterTabs = (data, groups, providers) => {
- return data.reduce((result, item) => {
- if (hasRole(groups, item.rolesPerProvider, providers)) {
- result.push(item);
- }
- return result;
- }, []);
-};
-
const IssueInfo = () => {
const { id } = useParams();
const classes = useStyles();
const { setTitle, setSitePath } = useStatusContext();
- const { hash } = useLocation();
- const [tabIndex, setTabIndex] = useState(0);
- const [tabs, setTabs] = useState([]);
- const { groups, providers } = useUserContext();
-
- useEffect(() => {
- const data = filterTabs(TabViews, groups, providers);
- setTabs(data);
- }, [groups, providers]);
-
- useEffect(() => {
- const key = hash.replace("#", "");
- const index = tabHashes.findIndex((element) => element === key);
- if (index >= 0) setTabIndex(index);
- }, [hash]);
useEffect(() => {
const title = `Issue ${id} Details`;
@@ -66,39 +26,12 @@ const IssueInfo = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [id]);
- const handleTabChange = (_event, newIndex) => {
- setTabIndex(newIndex);
- };
-
return (
+
+ + Door Locks +
++ + driver + + : + Closed +
++ + all + + : + Locked +
+
+
+ Sunroof +
++ + sunroof + + : + closed +
+
@@ -152,6 +187,17 @@ exports[`DigitalTwinTab Render 1`] = `
7/26/2022 12:26:38 AM
+
+
diff --git a/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
new file mode 100644
index 0000000..9766841
--- /dev/null
+++ b/src/components/Cars/Status/__snapshots__/ECUsTab.test.jsx.snap
@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ECUsTab Render 1`] = `
++ + DBC version + + : + d439abd3662dd20099f49dd8f43f7b145202e961caa2b5aba2c6154c8096348b +
+
+
+`;
diff --git a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
index 23e1eba..e2731f0 100644
--- a/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
+++ b/src/components/Cars/Status/__snapshots__/index.test.jsx.snap
@@ -21,8 +21,12 @@ exports[`CarStatus Render 1`] = `
class="MuiTabs-root"
>
+
+
+
+
+
+
+ + Car ECUs +
+
+
+
+
+
+ | + + ECU + + sorted descending + + + + | ++ + SW Version + + + | ++ + HW Version + + + | ++ + Config + + + | ++ + Created + + + | ++ + Updated + + + | +||||
|---|---|---|---|---|---|---|---|---|---|
| + + | +|||||||||
- Remote Commands
+ ECUs
+
+ Remote Commands
+
+
+
+
No Car Updates found
+
+
+
+
+ );
+};
+
+export default CarVersionLogTable;
diff --git a/src/components/Controls/IssueSelectionTable/index.jsx b/src/components/Controls/IssueSelectionTable/index.jsx
index 3dc8c5f..ad351e4 100644
--- a/src/components/Controls/IssueSelectionTable/index.jsx
+++ b/src/components/Controls/IssueSelectionTable/index.jsx
@@ -1,26 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
-import PropTypes from "prop-types";
import {
Table,
TableBody,
TableCell,
TableFooter,
TablePagination,
- TableRow,
- Button,
+ TableRow
} from "@material-ui/core";
+import DeleteIcon from "@material-ui/icons/Delete";
import clsx from "clsx";
+import PropTypes from "prop-types";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { logger } from "../../../services/monitoring";
+import { LocalDateTimeString } from "../../../utils/dates";
+import { Permissions } from "../../../utils/roles";
import { useIssueContext } from "../../Contexts/IssueContext";
import { useStatusContext } from "../../Contexts/StatusContext";
-import { LocalDateTimeString } from "../../../utils/dates";
+import { useUserContext } from "../../Contexts/UserContext";
import TableHeaderSortable from "../../Table/HeaderSortable";
-import { logger } from "../../../services/monitoring";
import { useLocalStorage } from "../../useLocalStorage";
import { RoleWrap } from "../RoleWrap";
-import { useUserContext } from "../../Contexts/UserContext";
-import { Permissions } from "../../../utils/roles";
const tableColumns = [
{
@@ -35,10 +35,6 @@ const tableColumns = [
id: "title",
label: "Title",
},
- {
- id: "description",
- label: "Description",
- },
{
id: "driver_id",
label: "Driver ID",
@@ -69,7 +65,7 @@ const IssueSelectionTable = (props) => {
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("created_at");
const [order, setOrder] = useState("asc");
- const { getIssues, issues, totalIssues } = useIssueContext();
+ const { deleteIssue, getIssues, issues, totalIssues = 0 } = useIssueContext();
const { groups, providers } = useUserContext();
const { setMessage } = useStatusContext();
@@ -132,12 +128,19 @@ const IssueSelectionTable = (props) => {
setPageIndex(0);
}, [search]);
- const { deleteIssue } = useIssueContext();
const handleDelete = (id) => {
deleteIssue(id, token).then(() => {
- getIssues(token)
+ getIssues(
+ {
+ limit: pageSize,
+ offset: pageSize * pageIndex,
+ order: `${orderBy} ${order}`,
+ },
+ token
+ );
});
};
+
return (
@@ -14,7 +14,7 @@ const mapOpenCloseState = (value) => const DigitalTwin = (props) => { const classes = useStyles(); - const { battery, doors, location, trex_version, ip, updated, windows } = props; + const { battery, doors, location, trex_version, ip, updated, windows, misc_windows, sunroof, dbc_version, door_locks } = props; return (
@@ -28,10 +28,55 @@ const DigitalTwin = (props) => {
{Object.entries(doors).map(mapOpenCloseState)}
)}
+ {door_locks != null && (
+
+
+ )}
{windows != null && (
Door Locks
+ {Object.entries(door_locks).map((value) => { + if (value[0] === "driver") { + return keyValueTemplate(value[0], value[1] ? "Open" : "Closed"); + } else { + return keyValueTemplate(value[0], value[1] ? "Unlocked" : "Locked"); + } + })} +Windows
- {Object.entries(windows).map(mapOpenCloseState)} + {Object.entries(windows).map((value) => { + if (value[1] === 0) { + return keyValueTemplate(value[0], "closed"); + } else { + const percentOpen = Math.min(value[1], 100); + return keyValueTemplate(value[0], `${percentOpen}% open`); + } + })} +
+
+ )}
+ {sunroof != null && (
+ Misc Windows
+ {Object.entries(misc_windows).map((value) => { + if (value[1] === 0) { + return keyValueTemplate(value[0], "closed"); + } else { + const percentOpen = Math.min(value[1], 100); + return keyValueTemplate(value[0], `${percentOpen}% open`); + } + })} +
+
)}
{location != null && (
@@ -61,6 +106,11 @@ const DigitalTwin = (props) => {
{keyValueTemplate("Updated at", LocalDateTimeString(updated))}
Sunroof
+ {Object.entries(sunroof).map((value) => { + if (value[1] === 0) { + return keyValueTemplate(value[0], "closed"); + } else { + const percentOpen = Math.min(value[1], 100); + return keyValueTemplate(value[0], `${percentOpen}% open`); + } + })}
+ {keyValueTemplate("DBC version", dbc_version)}
+
+ )}
);
};
diff --git a/src/components/Issues/Info/Details/index.jsx b/src/components/Issues/Info/Details/index.jsx
index c3031aa..307eafc 100644
--- a/src/components/Issues/Info/Details/index.jsx
+++ b/src/components/Issues/Info/Details/index.jsx
@@ -3,15 +3,14 @@ import clsx from "clsx";
import React, { useEffect } from "react";
import { logger } from "../../../../services/monitoring";
+import { LocalDateTimeString } from "../../../../utils/dates";
+import {
+ IssueProvider, useIssueContext
+} from "../../../Contexts/IssueContext";
import { useStatusContext } from "../../../Contexts/StatusContext";
import { useUserContext } from "../../../Contexts/UserContext";
-import {
- useIssueContext,
- IssueProvider
-} from "../../../Contexts/IssueContext";
import useStyles from "../../../useStyles";
-
const MainForm = ({ id }) => {
const classes = useStyles();
const { setMessage } = useStatusContext();
@@ -55,7 +54,7 @@ const MainForm = ({ id }) => {
Description: {issue.description}
- timestamp: {issue.timestamp} + Created: {LocalDateTimeString(issue.timestamp)}
{issue.images && issue.images.map((image, index) => (
-
-
- {tabs.map((item, index) =>
-
- {tabs.map((item, index) => (
-
-
- ))}
+
);
};
-function tabProps(index) {
- return {
- id: `tab-${index}`,
- "aria-controls": `tabpanel-${index}`,
- };
-}
-
export default IssueInfo;
diff --git a/src/components/VehicleMap/index.jsx b/src/components/VehicleMap/index.jsx
index ff61861..58475ca 100644
--- a/src/components/VehicleMap/index.jsx
+++ b/src/components/VehicleMap/index.jsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from "react";
-import useStyles from "../useStyles";
-import L from "leaflet";
-import { MapContainer, TileLayer, Marker, Popup, useMap } from "react-leaflet";
import { Button } from "@material-ui/core";
+import L from "leaflet";
+import React, { useEffect, useState } from "react";
+import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import useStyles from "../useStyles";
+import GrayMarkerIcon from "../../assets/gray-marker.png";
+import GreenMarkerIcon from "../../assets/green-marker.png";
+import { logger } from "../../services/monitoring";
import { useUserContext } from "../Contexts/UserContext";
import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
import { VehiclePopUp } from "./popup";
-import GreenMarkerIcon from "../../assets/green-marker.png";
-import GrayMarkerIcon from "../../assets/gray-marker.png";
-import { logger } from "../../services/monitoring";
const Component = () => {
const classes = useStyles();
@@ -185,16 +185,7 @@ const Component = () => {
{carState ? (