admin/ota-admin-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Push to prod (#201)

Browse Source 
* CEC-2056 safari map (#186)

* CEC-2056 Fix Safari map popup

* Snapshot serializer for Private styles

* Combine serializers

* CEC-2207  Add is-online filter for vehicles list (#187)

* Add OptionsDropdown component

* Add is-online filter

* CEC-2237 Track sign in and keys (#188)

* Update stage (#189)

* CEC-2056 safari map (#186)

* CEC-2056 Fix Safari map popup

* Snapshot serializer for Private styles

* Combine serializers

* CEC-2207  Add is-online filter for vehicles list (#187)

* Add OptionsDropdown component

* Add is-online filter

* CEC-2237 Track sign in and keys (#188)

Co-authored-by: arpanetus <arpanetus@protonmail.com>

* CEC-2281 Update certificate form (#190)

* CEC-2281 Fix cert name

* CEC-2360 Fix filename display and add manifest type (#191)

* CEC-2360 Fix filename display and add manifest type

* const

* Push to Stage (#200)

* CEC-2144, CEC-2338  Add deploy by fleets and fix fleets table  (#192)

* Add fix for fleets search

* Decompose fleets table

* Add deploy by fleets

* Add snapshots

* CEC-2385 Only show software updates (#193)

* CEC-2385 Only show software updates

* Update browser list

* update threshold

* Clean up

* CEC-2291 Remote Commands (#194)

* CEC-2378 Add fix for fleet vehicles' search

* CEC-1235 Fix fleet name update (#196)

Co-authored-by: arpanetus <arpanetus@protonmail.com>

Co-authored-by: arpanetus <arpanetus@protonmail.com>
This commit is contained in:
John Wu
2022-09-19 15:55:55 -07:00
committed by GitHub
parent d995361b9f
commit 56043dc375
70 changed files with 3059 additions and 3416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
package-lock.json generated
View File

@@ -20,7 +20,7 @@
"clsx": "^1.1.1",
"email-validator": "^2.0.4",
"env-cmd": "^10.1.0",
"leaflet": "^1.7.1",
"leaflet": "^1.8.0",
"material-ui-dropzone": "^3.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
@@ -6505,13 +6505,19 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001314",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
"integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
}
"version": "1.0.30001387",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
"integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
}
]
},
"node_modules/case-sensitive-paths-webpack-plugin": {
"version": "2.4.0",
@@ -11593,9 +11599,9 @@
}
},
"node_modules/leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"node_modules/leven": {
"version": "3.1.0",
@@ -21996,9 +22002,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001314",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001314.tgz",
"integrity": "sha512-0zaSO+TnCHtHJIbpLroX7nsD+vYuOVjl3uzFbJO1wMVbuveJA0RK2WcQA9ZUIOiO0/ArMiMgHJLxfEZhQiC0kw=="
"version": "1.0.30001387",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001387.tgz",
"integrity": "sha512-fKDH0F1KOJvR+mWSOvhj8lVRr/Q/mc5u5nabU2vi1/sgvlSqEsE8dOq0Hy/BqVbDkCYQPRRHB1WRjW6PGB/7PA=="
},
"case-sensitive-paths-webpack-plugin": {
"version": "2.4.0",
@@ -25739,9 +25745,9 @@
}
},
"leaflet": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
"integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.8.0.tgz",
"integrity": "sha512-gwhMjFCQiYs3x/Sf+d49f10ERXaEFCPr+nVTryhAW8DWbMGqJqt9G4XuIaHmFW08zYvhgdzqXGr8AlW8v8dQkA=="
},
"leven": {
"version": "3.1.0",

9
package.json
View File

@@ -4,19 +4,24 @@
"private": true,
"dependencies": {
"@datadog/browser-logs": "^3.11.0",
"@date-io/date-fns": "1.x",
"@date-io/moment": "1.x",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@material-ui/pickers": "^3.3.10",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.1",
"clsx": "^1.1.1",
"date-fns": "^2.29.2",
"email-validator": "^2.0.4",
"env-cmd": "^10.1.0",
"leaflet": "^1.7.1",
"leaflet": "^1.8.0",
"material-ui-dropzone": "^3.5.0",
"moment": "^2.29.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-leaflet": "^3.2.5",
@@ -62,7 +67,7 @@
"coverageThreshold": {
"global": {
"branches": 39,
"functions": 47,
"functions": 45.5,
"lines": 50,
"statements": 49
}

10
src/components/App/App.test.js
View File

@@ -1,7 +1,6 @@
jest.mock("../Contexts/CarUpdatesContext");
jest.mock("../Contexts/FileUploadContext");
jest.mock("../Contexts/VehicleContext");
jest.mock("../Contexts/ManifestCreateContext");
jest.mock("../Contexts/ManifestsContext");
jest.mock("../Contexts/UserContext");
jest.mock("../../services/monitoring");
@@ -73,10 +72,6 @@ describe("App", () => {
await check("/package-deploy/1", "span.MuiButton-label", "Sign In");
});
it("Route /package-create unauthenticated", async () => {
await check("/package-create", "span.MuiButton-label", "Sign In");
});
it("Route /vehicle-add unauthenticated", async () => {
await check("/vehicle-add", "span.MuiButton-label", "Sign In");
});
@@ -146,11 +141,6 @@ describe("App", () => {
await check("/package-deploy/1", "h6", "Deploy Test Manifest 1.0");
});
it("Route /package-create authenticated", async () => {
setToken(TEST_AUTH_OBJECT);
await check("/package-create", "h6", "Create Deployments");
});
it("Route /vehicle-add authenticated", async () => {
setToken(TEST_AUTH_OBJECT);
await check("/vehicle-add", "h6", "Add Vehicle");

1990
src/components/App/__snapshots__/App.test.js.snap
View File

File diff suppressed because it is too large Load Diff

12
src/components/CANFilter/Add/__snapshots__/index.test.jsx.snap
View File

@@ -56,10 +56,10 @@ exports[`CANFiltersAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN
@@ -102,10 +102,10 @@ exports[`CANFiltersAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
CAN ID
@@ -140,10 +140,10 @@ exports[`CANFiltersAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Interval

12
src/components/CANFilter/Update/__snapshots__/index.test.jsx.snap
View File

@@ -56,10 +56,10 @@ exports[`CANFiltersUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN
@@ -103,10 +103,10 @@ exports[`CANFiltersUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
CAN ID
@@ -149,10 +149,10 @@ exports[`CANFiltersUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Interval

80
src/components/Cars/Add/__snapshots__/index.test.jsx.snap
View File

@@ -55,10 +55,10 @@ exports[`VehicleAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN
@@ -101,10 +101,10 @@ exports[`VehicleAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Model
@@ -148,10 +148,10 @@ exports[`VehicleAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Year
@@ -195,10 +195,10 @@ exports[`VehicleAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Trim
@@ -225,19 +225,19 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="trace"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -251,7 +251,7 @@ exports[`VehicleAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -276,19 +276,19 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="debug"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -302,7 +302,7 @@ exports[`VehicleAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -327,20 +327,20 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
checked=""
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="info"
/>
<div
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
>
<svg
aria-hidden="true"
@@ -354,7 +354,7 @@ exports[`VehicleAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -379,19 +379,19 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="warn"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -405,7 +405,7 @@ exports[`VehicleAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -430,19 +430,19 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="error"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -456,7 +456,7 @@ exports[`VehicleAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -481,19 +481,19 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="critical"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -507,7 +507,7 @@ exports[`VehicleAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -542,14 +542,14 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
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-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -608,10 +608,10 @@ exports[`VehicleAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Memory Buffer Size (0 uses default size)
@@ -626,13 +626,13 @@ exports[`VehicleAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -693,10 +693,10 @@ exports[`VehicleAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Disk Buffer Size (0 uses default size)

32
src/components/Cars/List/__snapshots__/index.test.jsx.snap
View File

@@ -93,7 +93,37 @@ exports[`VehicleTable Render 1`] = `
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-2"
>
<div>
<button
aria-haspopup="true"
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="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
<div
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-2"
/>
</div>
<div

24
src/components/Cars/List/index.jsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Grid } from "@material-ui/core";
import { Checkbox, FormControlLabel, Grid, MenuItem } from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import { Link } from "react-router-dom";
import clsx from "clsx";
@@ -10,10 +10,12 @@ import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../../Controls/CarSelectionTable";
import OptionsDropdown from "../../Controls/OptionsDropdown";
const MainForm = () => {
const classes = useStyles();
const [search, setSearch] = useState("");
const [online, setOnline] = useState(false);
const { setTitle, setSitePath } = useStatusContext();
const {
token: {
@@ -25,6 +27,10 @@ const MainForm = () => {
setSearch(query);
};
const handleOnline = (event) => {
setOnline(event.target.checked);
}
useEffect(() => {
setTitle("Vehicles");
setSitePath([]);
@@ -42,13 +48,25 @@ const MainForm = () => {
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
</Grid>
<Grid item md={4} className={classes.textRightAlign} />
<Grid item md={2} className={classes.textJustifyAlign}>
<OptionsDropdown listId='filter-menu'>
<MenuItem>
<FormControlLabel control={
<Checkbox
checked={online}
onChange={handleOnline}
/>
} label="Only online" />
</MenuItem>
</OptionsDropdown>
</Grid>
<Grid item md={2} className={classes.textRightAlign} />
</Grid>
<CarSelectionTable
classes={classes}
token={token}
multiSelect={false}
search={{ search }}
search={{ search, online: online? true : null}}
/>
</div>
);

26
src/components/Cars/Status/RemoteCommandsTab.jsx Normal file
View File

@@ -0,0 +1,26 @@
import useStyles from "../../useStyles";
import clsx from "clsx";
import Typography from "@material-ui/core/Typography";
import SendCommand from "../../Controls/SendCommand";
import PropTypes from "prop-types";
import {VehicleProvider} from "../../Contexts/VehicleContext";
const RemoteCommandsTab = (props) => {
const { vin } = props;
const classes = useStyles();
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Typography variant="h6">Vehicle Commands</Typography>
<VehicleProvider>
<SendCommand vins={[vin]}></SendCommand>
</VehicleProvider>
</div>
)
}
RemoteCommandsTab.propTypes = {
vin: PropTypes.string,
}
export default RemoteCommandsTab

40
src/components/Cars/Status/RemoteCommandsTab.test.jsx Normal file
View File

@@ -0,0 +1,40 @@
jest.mock("../../Contexts/VehicleContext");
jest.mock("../../Contexts/StatusContext");
jest.mock("../../Contexts/UserContext");
jest.mock("@material-ui/core/utils/unstable_useId", () =>
jest.fn().mockReturnValue("mui-test-id")
);
import {render, waitFor} from "@testing-library/react";
import {StatusProvider} from "../../Contexts/StatusContext";
import {setToken, UserProvider} from "../../Contexts/UserContext";
import RemoteCommandsTab from "./RemoteCommandsTab";
import addSnapshotSerializer from "../../../utils/snapshot";
import {TEST_AUTH_OBJECT} from "../../../utils/testing";
import React from "react";
const renderRemoteCommandsTab = async () => {
const { container } = render(
<StatusProvider>
<UserProvider>
<RemoteCommandsTab vin="TESTVIN1234567890" />
</UserProvider>
</StatusProvider>
);
await waitFor(() => {
/* render */
});
return container;
};
describe("RemoteCommandsTab", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
});
it("Render", async () => {
setToken(TEST_AUTH_OBJECT);
const container = await renderRemoteCommandsTab();
expect(container).toMatchSnapshot();
});
});

173
src/components/Cars/Status/__snapshots__/RemoteCommandsTab.test.jsx.snap Normal file
View File

@@ -0,0 +1,173 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RemoteCommandsTab Render 1`] = `
<div>
<div
data-testid="mocked-statusprovider"
>
<div
data-testid="mocked-userprovider"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<h6
class="MuiTypography-root MuiTypography-h6"
>
Vehicle Commands
</h6>
<div
data-testid="mocked-vehicleprovider"
>
<div
class="makeStyles-paper-0"
style="margin-top: 20px;"
>
<div
class="MuiFormControl-root makeStyles-formControl-0"
>
<label
class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-marginDense MuiInputLabel-outlined MuiFormLabel-filled"
data-shrink="true"
for="send-command"
>
Command
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
>
<select
aria-invalid="false"
class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
id="send-command"
name="send-command"
>
<option
value="doors_lock"
>
Lock doors
</option>
<option
value="doors_unlock"
>
Unlock doors
</option>
<option
value="vent_windows"
>
Vent windows
</option>
<option
value="close_windows"
>
Close windows
</option>
<option
value="flash_headlights"
>
Flash headlights
</option>
<option
value="trunk_close"
>
Close trunk
</option>
<option
value="alert"
>
Alert
</option>
<option
value="precondition"
>
Precondition
</option>
<option
value="california_mode"
>
California mode
</option>
<option
value="trunk_open"
>
Open trunk
</option>
<option
value="temp_cabin"
>
Set cabin temperature(°C)
</option>
<option
value="defrost"
>
Defrost
</option>
<option
value="driver_seat_preheat"
>
Driver seat preheat
</option>
<option
value="passenger_seat_preheat"
>
Preheat passenger seat
</option>
<option
value="steering_wheel_preheat"
>
Preheat Steering wheel
</option>
<option
value="charging"
>
Charging
</option>
</select>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
style="padding-left: 8px;"
>
<legend
class="PrivateNotchedOutline-legend-0"
style="width: 0.01px;"
>
<span>
​
</span>
</legend>
</fieldset>
</div>
</div>
<button
aria-label="send command"
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
tabindex="0"
type="submit"
>
<span
class="MuiButton-label"
>
Send
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;

31
src/components/Cars/Status/__snapshots__/index.test.jsx.snap
View File

@@ -15,7 +15,7 @@ exports[`CarStatus Render 1`] = `
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<div
class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
>
<div
class="MuiTabs-root"
@@ -119,9 +119,27 @@ exports[`CarStatus Render 1`] = `
class="MuiTouchRipple-root"
/>
</button>
<button
aria-controls="tabpanel-5"
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit"
id="tab-5"
role="tab"
tabindex="-1"
type="button"
>
<span
class="MuiTab-wrapper"
>
Remote Commands
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
<span
class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
style="left: 0px; width: 0px;"
/>
</div>
@@ -133,7 +151,7 @@ exports[`CarStatus Render 1`] = `
role="tabpanel"
>
<div
class="MuiBox-root MuiBox-root-69"
class="MuiBox-root MuiBox-root-0"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
@@ -228,6 +246,13 @@ exports[`CarStatus Render 1`] = `
id="tabpanel-4"
role="tabpanel"
/>
<div
aria-labelledby="tab-5"
class="makeStyles-fullWidth-0"
hidden=""
id="tabpanel-5"
role="tabpanel"
/>
</div>
</div>
</div>

6
src/components/Cars/Status/index.jsx
View File

@@ -12,6 +12,7 @@ import TabPanel from "../../Controls/TabPanel";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import CANSignalsTab from "./CANSignalsTab";
import RemoteCommandsTab from "./RemoteCommandsTab";
const tabHashes = ["details", "updates", "filters"];
@@ -64,6 +65,7 @@ const CarStatus = () => {
<Tab label="CAN Filters" {...tabProps(2)} />
<Tab label="Digital Twin" {...tabProps(3)} />
<Tab label="CAN Signals" {...tabProps(4)} />
<Tab label="Remote Commands" {...tabProps(5)} />
</Tabs>
</Box>
@@ -86,6 +88,10 @@ const CarStatus = () => {
<TabPanel value={tabIndex} index={4} className={classes.fullWidth}>
<CANSignalsTab vin={vin} />
</TabPanel>
<TabPanel value={tabIndex} index={5} className={classes.fullWidth}>
<RemoteCommandsTab vin={vin} />
</TabPanel>
</div>
);
};

80
src/components/Cars/Update/__snapshots__/index.test.jsx.snap
View File

@@ -57,10 +57,10 @@ exports[`VehicleUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN
@@ -103,10 +103,10 @@ exports[`VehicleUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Model
@@ -150,10 +150,10 @@ exports[`VehicleUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Year
@@ -197,10 +197,10 @@ exports[`VehicleUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Trim
@@ -227,19 +227,19 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="trace"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -253,7 +253,7 @@ exports[`VehicleUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -278,19 +278,19 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="debug"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -304,7 +304,7 @@ exports[`VehicleUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -329,20 +329,20 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
checked=""
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="info"
/>
<div
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
>
<svg
aria-hidden="true"
@@ -356,7 +356,7 @@ exports[`VehicleUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -381,19 +381,19 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="warn"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -407,7 +407,7 @@ exports[`VehicleUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -432,19 +432,19 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="error"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -458,7 +458,7 @@ exports[`VehicleUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -483,19 +483,19 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="critical"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -509,7 +509,7 @@ exports[`VehicleUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -544,14 +544,14 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
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-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -610,10 +610,10 @@ exports[`VehicleUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Memory Buffer Size (0 uses default size)
@@ -628,13 +628,13 @@ exports[`VehicleUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -694,10 +694,10 @@ exports[`VehicleUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Disk Buffer Size (0 uses default size)

17
src/components/Certificates/Add/CreateForm.jsx
View File

@@ -11,9 +11,14 @@ import {
import useStyles from "../../useStyles";
import { CertTypes } from "../../Contexts/CertificateContext";
const getCertTypeLabel = (certtype) => {
if (certtype === CertTypes.Aftersales) return "Service Tool ID";
return "VIN";
};
const CreateForm = ({ onCreate, busy }) => {
const classes = useStyles();
const vinEl = useRef(null);
const commonnameEl = useRef(null);
const [certType, setCertType] = useState(CertTypes.TBOX);
const onSubmit = async (event) => {
@@ -21,7 +26,7 @@ const CreateForm = ({ onCreate, busy }) => {
if (onCreate)
onCreate({
vin: vinEl.current.value,
common_name: commonnameEl.current.value,
type: certType,
});
};
@@ -34,9 +39,9 @@ const CreateForm = ({ onCreate, busy }) => {
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<TextField
id="vin"
name="vin"
label="VIN"
id="common_name"
name="common_name"
label={`Common Name (${getCertTypeLabel(certType)})`}
variant="outlined"
margin="normal"
inputProps={{
@@ -44,7 +49,7 @@ const CreateForm = ({ onCreate, busy }) => {
}}
required
fullWidth
inputRef={vinEl}
inputRef={commonnameEl}
/>
<FormLabel id="cert-type-group-label">Type</FormLabel>
<RadioGroup

11
src/components/Certificates/Add/DownloadCerts.jsx
View File

@@ -6,7 +6,12 @@ import useStyles from "../../useStyles";
const CertMimeType = "application/x-pem-file";
const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
const DownloadCerts = ({
commonName,
publicCert,
privateCert,
onChangeView,
}) => {
const classes = useStyles();
const onNewCert = (event) => {
@@ -21,14 +26,14 @@ const DownloadCerts = ({ vin, publicCert, privateCert, onChangeView }) => {
<li>
<DownloadFileLink
data={publicCert}
filename={`${vin}_cert.pem`}
filename={`${commonName}_cert.pem`}
mimetype={CertMimeType}
/>
</li>
<li>
<DownloadFileLink
data={privateCert}
filename={`${vin}_key.pem`}
filename={`${commonName}_key.pem`}
mimetype={CertMimeType}
/>
</li>

8
src/components/Certificates/Add/__snapshots__/DownloadCerts.test.jsx.snap
View File

@@ -9,16 +9,16 @@ exports[`DownloadCerts Render 1`] = `
<ul>
<li>
<a
download="TESTVIN_cert.pem"
download="undefined_cert.pem"
>
TESTVIN_cert.pem
undefined_cert.pem
</a>
</li>
<li>
<a
download="TESTVIN_key.pem"
download="undefined_key.pem"
>
TESTVIN_key.pem
undefined_key.pem
</a>
</li>
</ul>

10
src/components/Certificates/Add/index.jsx
View File

@@ -24,7 +24,7 @@ const MainForm = () => {
const [view, setView] = useState(VIEW_FORM);
const [pubCert, setPubCert] = useState(null);
const [privCert, setPrivCert] = useState(null);
const [vin, setVIN] = useState(null);
const [commonName, setCommonName] = useState(null);
useEffect(() => {
setTitle("Create Certificate");
@@ -46,8 +46,8 @@ const MainForm = () => {
setPubCert(result.public_key);
setPrivCert(result.private_key);
setVIN(data.vin);
setMessage(`Created ${data.vin} certificate`);
setCommonName(data.common_name);
setMessage(`Created ${data.common_name} certificate`);
setView(VIEW_DOWNLOAD);
} catch (e) {
setMessage(e.message);
@@ -58,7 +58,7 @@ const MainForm = () => {
const onChangeView = () => {
setPubCert(null);
setPrivCert(null);
setVIN(null);
setCommonName(null);
setView(VIEW_FORM);
};
@@ -66,7 +66,7 @@ const MainForm = () => {
if (view === VIEW_DOWNLOAD)
return (
<DownloadCerts
vin={vin}
commonName={commonName}
publicCert={pubCert}
privateCert={privCert}
onChangeView={onChangeView}

34
src/components/Contexts/CarUpdatesContext.jsx
View File

@@ -6,7 +6,8 @@ import { validateStatusMessage } from "../../utils/statusMessage";
const FINAL_UPDATE_STATES = ["package_install_complete"];
const CarUpdatesContext = React.createContext();
const validateDeployCarUpdates = (data) => {
const validateDeployClosure = (data, propertyName, errPfx) => {
if (data === null) {
throw new Error("No car update data");
}
@@ -15,11 +16,21 @@ const validateDeployCarUpdates = (data) => {
throw new Error("Manifest id required");
}
if (!data.vins || data.vins.length === 0) {
throw new Error("Cars are required");
const { [propertyName]: value } = data;
if (!value || value.length === 0) {
throw new Error(`${errPfx} are required`);
}
}
const validateDeployCarUpdates = (data) => {
return validateDeployClosure(data, 'vins', 'Cars')
};
const validateDeployFleetUpdates = (data) => {
return validateDeployClosure(data, 'fleet_names', 'Fleets')
};
export const CarUpdatesProvider = ({ children }) => {
const [busy, setBusy] = useState(false);
const [carUpdates, setCarUpdates] = useState([]);
@@ -43,6 +54,22 @@ export const CarUpdatesProvider = ({ children }) => {
return result;
};
const deployFleetUpdates = async (data, token) => {
let result;
try {
setBusy(true);
validateDeployFleetUpdates(data);
result = await api.createFleetUpdates(data, token);
if (result.error)
throw new Error(`Deploy fleet updates error. ${result.message}`);
} finally {
setBusy(false);
}
return result;
}
const getCarUpdates = async (search, token) => {
let result;
@@ -204,6 +231,7 @@ export const CarUpdatesProvider = ({ children }) => {
carUpdates,
totalCarUpdates,
deployCarUpdates,
deployFleetUpdates,
getCarUpdates,
getLog,
getVINUpdates,

3
src/components/Contexts/CertificateContext.jsx
View File

@@ -8,11 +8,12 @@ export const CertTypes = {
TBOX: "TBOX",
ICC: "ICC",
Charging: "Charging",
Aftersales: "Aftersales",
};
const validateCreate = (data) => {
if (!data.type) throw new Error("type is required");
if (!data.vin) throw new Error("vin is required");
if (!data.common_name) throw new Error("common name is required");
};
export const CertificateProvider = ({ children }) => {

247
src/components/Contexts/ManifestCreateContext.jsx
View File

@@ -1,247 +0,0 @@
import React, { useContext, useState } from "react";
import api from "../../services/manifestsAPI";
import { uploadFile, getCancelToken } from "../../services/uploadFile";
import { useStatusContext } from "./StatusContext";
import {
validateManifest,
validateManifestECUs,
} from "../../utils/manifestValidation";
const ManifestCreateContext = React.createContext();
const checkExistingManifest = async (data, token) => {
const check = {
name: data.name,
version: data.version,
};
const { data: result } = await api.getManifests(check, token);
if (result.length > 0)
throw new Error(`Update ${data.name} ${data.version} already exists`);
};
const ECUTemplate = {
name: "AGS",
version: "",
hw_version: "",
configuration_mask: "",
configuration: "",
files: [],
manifest_id: 0,
};
const FileTemplate = {
offset: "0",
checksum: "",
type: "none",
};
export const ManifestCreateProvider = ({ children }) => {
const { setMessage } = useStatusContext();
const [busy, setBusy] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const [uploadStatus, setUploadStatus] = useState(null);
const [cancelUploadToken, setCancelUploadToken] = useState(null);
const [uploadFileIndex, setUploadFileIndex] = useState(0);
const [uploadedFiles, setUploadedFiles] = useState([]);
const [ecus, setECUs] = useState([]);
const [ecuIndex, setECUIndex] = useState(0);
const addECU = () => {
try {
const result = ecus.concat(
Object.assign({ data_id: ecuIndex }, ECUTemplate)
);
setECUIndex(ecuIndex + 1);
setECUs(result);
} catch (err) {
setMessage(err.message);
}
};
const deleteECU = (data_id) => {
try {
const result = ecus.filter((item) => item.data_id !== data_id);
setECUs(result);
} catch (err) {
setMessage(err.message);
}
};
const getECU = (ecu_data_id) =>
ecus.find((item) => item.data_id === ecu_data_id);
const getECUFile = (ecu, filename) =>
ecu.files.find((file) => file.filename === filename);
const validateECUFiles = (ecu, files) => {
files.forEach((file) => {
if (file.size === 0) throw new Error(`${file.name} is 0 size`);
const result = getECUFile(ecu, file.name);
if (result) throw new Error(`${file.name} already exists`);
});
};
const getAllECUFiles = () => {
let result = [];
for (let i = 0, len = ecus.length; i < len; i++) {
const ecu = ecus[i];
result = result.concat(ecu.files);
}
return result;
};
const addECUFile = (ecu_data_id, items) => {
try {
const ecu = getECU(ecu_data_id);
if (ecu === undefined) return;
const files = Array.from(items);
validateECUFiles(ecu, files);
const total = ecu.files.length;
const result = files.map((file, index) =>
Object.assign(
{ order: total + index, file: file, filename: file.name },
FileTemplate
)
);
ecu.files = ecu.files.concat(result);
updateECUs();
} catch (err) {
setMessage(err.message);
}
};
const sortECUFiles = (ecu) => {
ecu.files.sort((x, y) => {
if (x.order === y.order) return 0;
return x.order < y.order ? -1 : 1;
});
};
const deleteECUFile = (ecu_data_id, filename) => {
try {
const ecu = getECU(ecu_data_id);
if (ecu === undefined) return;
ecu.files = ecu.files.filter((file) => file.filename !== filename);
sortECUFiles(ecu);
updateECUs();
} catch (err) {
setMessage(err.message);
}
};
const updateECUs = () => {
setECUs(ecus.concat([]));
};
const createManifest = async (data, token) => {
let result;
let currentFileIndex = 0;
const incremFileIndex = () => {
setUploadFileIndex(currentFileIndex);
currentFileIndex++;
};
try {
setBusy(true);
validateManifest(data, token);
validateManifestECUs(ecus);
await checkExistingManifest(data, token);
setUploadedFiles(getAllECUFiles());
if (result !== null) result = await api.createManifest(data, token);
if (result.error)
throw new Error(`Create manifest error. ${result.message}`);
for (let i = 0, len = ecus.length; i < len; i++) {
const ecu = ecus[i];
ecu.manifest_id = result.id;
await createManifestECU(ecu, token, incremFileIndex);
}
} finally {
setBusy(false);
setUploadFileIndex(0);
setUploadedFiles([]);
}
return result;
};
const createManifestECU = async (ecu, token, incremFileIndexFn) => {
const { files, ...data } = ecu;
const result = await api.createManifestECU(data, token);
if (result.error)
throw new Error(`Create manifest error. ${result.message}`);
for (let i = 0, len = ecu.files.length; i < len; i++) {
const file = ecu.files[i];
file.manifest_ecu_id = result.id;
incremFileIndexFn();
const resp = await uploadECUFile(file, token);
if (resp.error)
throw new Error(`Upload manifest file error. ${resp.error}`);
}
};
const cancelUpload = () => {
if (cancelUploadToken) cancelUploadToken.cancel();
setBusy(false);
setUploadStatus("Upload cancelled");
setCancelUploadToken(null);
setUploadProgress(0);
};
const uploadECUFile = async (file, accessToken) => {
const cancel = getCancelToken();
setUploadProgress(0);
setUploadStatus(`Uploading ${file.filename}`);
setCancelUploadToken(cancel);
const result = await uploadFile(
file,
accessToken,
setUploadProgress,
cancel.token
);
if (result.message) {
throw new Error(`${result.error}. ${result.message}`);
}
setUploadStatus(`Uploaded ${file.filename}`);
setCancelUploadToken(null);
setUploadProgress(100);
return result;
};
return (
<ManifestCreateContext.Provider
value={{
busy,
ecus,
uploadedFiles,
uploadFileIndex,
uploadProgress,
uploadStatus,
addECU,
addECUFile,
cancelUpload,
createManifest,
createManifestECU,
deleteECU,
deleteECUFile,
updateECUs,
}}
>
{children}
</ManifestCreateContext.Provider>
);
};
export const useManifestCreateContext = () => useContext(ManifestCreateContext);

4
src/components/Contexts/VehicleContext.jsx
View File

@@ -164,10 +164,10 @@ export const VehicleProvider = ({ children }) => {
}
};
const sendCommand = async (vins, command, parameters, token) => {
const sendCommand = async (vins, command, token) => {
try {
setBusy(true);
const result = await api.sendCommand(vins, command, parameters, token);
const result = await api.sendCommand(vins, command, token);
if (result.error)
throw new Error(`Send command error. ${result.message}`);
return result;

49
src/components/Contexts/VehicleContext.test.jsx
View File

@@ -317,6 +317,55 @@ describe("VehicleContext", () => {
checkBaseResults("", "false");
});
});
describe("sendCommand", () => {
beforeEach(async () => {
const TestComp = () => {
const {busy, sendCommand} = useVehicleContext();
const { message, setMessage } = useStatusContext();
const sendC = async (vin, command) => {
try {
await sendCommand(vin, command);
} catch (e) {
setMessage(e.message);
}
};
return (
<>
<div data-testid="error">{message}</div>
<div data-testid="busy">{busy.toString()}</div>
<button data-testid="sendCommandNullVin" onClick={() => sendC(null, {command:"doors_lock"})} />
<button data-testid="sendCommandNonexistentVin" onClick={() => sendC(["11111111111111111"], {command:"doors_lock"})} />
<button
data-testid="sendCommandVin"
onClick={() => sendC("3C4PDCBG0ET127145", {command:"doors_lock"})}
/>
<button
data-testid="sendCommandWrongCommand"
onClick={() => sendC("3C4PDCBG0ET127145", {command:"noSuchCommand"})}
/>
</>
);}
render(
<StatusProvider>
<VehicleProvider>
<TestComp />
</VehicleProvider>
</StatusProvider>
);
});
afterEach(() => {
cleanup();
});
it("initial state", () => {
checkBaseResults("", "false");
});
})
});
const expectedFilters = [

50
src/components/Contexts/__mocks__/ManifestCreateContext.jsx
View File

@@ -1,50 +0,0 @@
import React from "react";
const ManifestsContext = React.createContext();
let busy = false;
let ecus = [
{
data_id: 0,
name: "AGS",
version: "",
hw_version: "",
manifest_id: 0,
files: [
{
filename: "test.bin",
order: 0,
offset: "0",
checksum: "",
self_download: false,
mode: "D",
type: 1,
},
],
},
];
let uploadedFiles = [];
let uploadFileIndex = 0;
let uploadProgress = 0;
let uploadStatus = null;
export const ManifestCreateProvider = ({ children }) => {
return <div data-testid="mocked-manifestcreateprovider">{children}</div>;
};
export const useManifestCreateContext = () => ({
busy,
ecus,
uploadedFiles,
uploadFileIndex,
uploadProgress,
uploadStatus,
addECU: jest.fn(),
addECUFile: jest.fn(),
cancelUpload: jest.fn(),
createManifest: jest.fn(),
createManifestECU: jest.fn(),
deleteECU: jest.fn(),
deleteECUFile: jest.fn(),
updateECUs: jest.fn(),
});

2
src/components/Contexts/__mocks__/ManifestsContext.jsx
View File

@@ -18,7 +18,6 @@ let manifest = {
files: [
{
file_id: "b0cda514c94080b4",
filename: "LARGE.jpg",
url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/LARGE.jpg",
write_region: {
offset: 100,
@@ -35,7 +34,6 @@ let manifest = {
},
{
file_id: "4B897b1DcbeCds8e9",
filename: "SMALL.jpg",
url: "https://upload-dev.fiskerdps.com/92bbc448-99c8-4851-91ad-f8042e4deb49/SMALL.jpg",
write_region: {
offset: 120559274,

6
src/components/Controls/CarSelectionTable/index.jsx
View File

@@ -60,6 +60,7 @@ const CarSelectionTable = (props) => {
onSelect,
onSelectAll,
} = props;
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("vin");
@@ -67,7 +68,8 @@ const CarSelectionTable = (props) => {
const { getVehicles, vehicles, totalVehicles } = useVehicleContext();
const { setMessage } = useStatusContext();
const { search: searchTerm } = search;
const sortHandler = (_event, property) => {
const handleSort = (_event, property) => {
if (property === orderBy) {
if (order === "asc") {
setOrder("desc");
@@ -137,7 +139,7 @@ const CarSelectionTable = (props) => {
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={sortHandler}
onSortRequest={handleSort}
multiSelect={multiSelect}
onSelectAll={handleSelectAll}
selectCount={selected ? selected.length : 0}

199
src/components/Controls/FleetSelectionTable/index.jsx Normal file
View File

@@ -0,0 +1,199 @@
import React, {useEffect, useState} from "react";
import {Link} from 'react-router-dom';
import {Checkbox, Table, TableBody, TableCell, TableFooter, TablePagination, TableRow} from "@material-ui/core";
import clsx from "clsx";
import TableHeaderSortable from "../../Table/HeaderSortable";
import {useStatusContext} from "../../Contexts/StatusContext";
import {useFleetContext} from "../../Contexts/FleetContext"
import {logger} from "../../../services/monitoring";
import {useLocalStorage} from "../../useLocalStorage";
import PropTypes from "prop-types";
const tableColumns = [
{
id: "name",
label: "Name"
},
{
id: "log_level",
label: "Log Level"
},
{
id: "canbus_enabled",
label: "CAN Bus Enabled"
},
{
id: "data_logger_enabled",
label: "Data Logger Enabled"
},
{
id: "num_vehicles",
label: "Vehicles"
},
{
id: "num_filters",
label: "Filters"
}
];
const PAGE_SIZE = "FLEET_SELECTION_TABLE_PAGE_SIZE";
const FleetSelectionTable = (props) => {
const {
token,
classes,
search,
multiSelect,
selected,
onSelect,
onSelectAll,
} = props;
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const { fleets, getFleets, totalFleets } = useFleetContext();
const { setMessage } = useStatusContext();
const { search: searchTerm } = search;
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);
}
};
const handleChangePageIndex = (_event, newIndex) => {
setPageIndex(newIndex);
};
const handleChangePageSize = (event) => {
setPageSize(parseInt(event.target.value, 10));
setPageIndex(0);
};
const handleSelectAll = (event) => {
if (!onSelectAll) return;
const newSelected = [];
if (event.target.checked) {
fleets.forEach((car) => {
newSelected.push(car.name);
});
}
onSelectAll(newSelected);
};
const handleSelect = (event, key) => {
if (!onSelect) return;
onSelect(event, key);
};
useEffect(() => {
const options = { search: searchTerm,
limit: pageSize,
offset: pageSize * pageIndex,
order: `${orderBy} ${order}`,
};
(async () => {
try {
if (!token) return;
await getFleets(options, token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token, pageIndex, pageSize, orderBy, order, searchTerm]);
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Table>
<TableHeaderSortable
classes={classes}
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={handleSort}
multiSelect={multiSelect}
onSelectAll={handleSelectAll}
selectCount={selected ? selected.length : 0}
rowCount={fleets ? fleets.length : 0}
/>
<TableBody>
{fleets.map((row) => {
const isSelected = selected
? selected.indexOf(row.name) !== -1
: false;
return (
<TableRow key={row.name}>
{multiSelect && (
<TableCell padding="checkbox">
<Checkbox
checked={isSelected}
onChange={(event) => handleSelect(event, row.name)}
/>
</TableCell>
)}
<TableCell align="center">
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
</TableCell>
<TableCell align="center">{row.log_level}</TableCell>
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
</TableRow>)
}
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={8}
count={totalFleets}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: {"aria-label": "rows per page"},
native: true,
}}
onPageChange={handleChangePageIndex}
onRowsPerPageChange={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</div>
);
};
FleetSelectionTable.propTypes = {
token: PropTypes.string.isRequired,
classes: PropTypes.object.isRequired,
search: PropTypes.object.isRequired,
multiSelect: PropTypes.bool.isRequired,
selected: PropTypes.array,
onSelect: PropTypes.func,
onSelectAll: PropTypes.func,
connectionStatus: PropTypes.bool,
}
export default FleetSelectionTable;

79
src/components/Controls/ManifestECUFileList/index.jsx
View File

@@ -1,79 +0,0 @@
import React from "react";
import {
Table,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import FileDragArea from "../FileDragArea";
import ListHead from "../ListHead";
import SubListItem from "../SubListItem";
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
import ManifestECUFileTypes from "../ManifestECUFileTypes";
const options = [
{
label: "Filename",
field: "filename",
readonly: true,
},
{
label: "Offset",
field: "offset",
},
{
label: "Checksum",
field: "checksum",
},
{
label: "Type",
field: "type",
control: ManifestECUFileTypes,
},
{
label: "",
field: "filename",
delete: true,
},
];
const ManifestECUFileList = ({ data }) => {
const { addECUFile, deleteECUFile } = useManifestCreateContext();
const onAddFile = (files) => {
addECUFile(data.data_id, files);
};
const onDeletFile = (filename) => {
deleteECUFile(data.data_id, filename);
};
return (
<Table>
{data && data.files && data.files.length > 0 && (
<ListHead options={options} />
)}
<TableBody>
{data.files.map((file) => (
<SubListItem
key={file.filename}
data={file}
options={options}
onDelete={onDeletFile}
/>
))}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={options.length}>
<FileDragArea onFileSelect={onAddFile}>ADD FILES</FileDragArea>
</TableCell>
</TableRow>
</TableFooter>
</Table>
);
};
export default ManifestECUFileList;

75
src/components/Controls/ManifestECUList/index.jsx
View File

@@ -1,75 +0,0 @@
import React from "react";
import {
Button,
Table,
TableBody,
TableCell,
TableFooter,
TableRow,
} from "@material-ui/core";
import ECUDropDrop from "../ECUDropDown";
import ListHead from "../ListHead";
import ManifestECURow from "../ManifestECURow";
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
import PageDragPreventDefault from "../PageDragPreventDefault";
const options = [
{
label: "ID",
field: "data_id",
readonly: true,
},
{
label: "ECU",
field: "name",
control: ECUDropDrop,
required: true,
},
{
label: "Version",
field: "version",
required: true,
},
{
label: "Hardware",
field: "hw_version",
},
{
label: "",
delete: true,
},
];
const ManifestECUList = () => {
const { ecus, addECU } = useManifestCreateContext();
return (
<>
<PageDragPreventDefault />
<Table>
<ListHead options={options} />
<TableBody>
{ecus.map((item) => {
return (
<ManifestECURow
key={item.data_id}
data={item}
options={options}
/>
);
})}
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={5} align="center">
<Button onClick={addECU}>Add ECU</Button>
</TableCell>
</TableRow>
</TableFooter>
</Table>
</>
);
};
export default ManifestECUList;

33
src/components/Controls/ManifestECURow/index.jsx
View File

@@ -1,33 +0,0 @@
import React from "react";
import { TableCell, TableRow } from "@material-ui/core";
import ManifestECUFileList from "../ManifestECUFileList";
import SubListItem from "../SubListItem";
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
const ManifestECURow = ({ data, options }) => {
const { deleteECU } = useManifestCreateContext();
const onDeleteECU = () => {
deleteECU(data.data_id);
};
return (
<>
<SubListItem
key={data.data_id}
data={data}
options={options}
onDelete={onDeleteECU}
/>
<TableRow>
<TableCell colSpan={options.length}>
<ManifestECUFileList data={data} />
</TableCell>
</TableRow>
</>
);
};
export default ManifestECURow;

68
src/components/Controls/ManifestUploadProgress/index.jsx
View File

@@ -1,68 +0,0 @@
import React, { useEffect, useState } from "react";
import { Button, Grid, LinearProgress, Typography } from "@material-ui/core";
import { useManifestCreateContext } from "../../Contexts/ManifestCreateContext";
const ManifestUploadProgress = (props) => {
const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
useManifestCreateContext();
const [progress, setProgress] = useState(0);
const [completed, setCompleted] = useState(0);
const [total, setTotal] = useState(0);
useEffect(() => {
const x = uploadedFiles.reduce(
(current, { file }) => current + file.size,
0
);
setTotal(x);
}, [uploadedFiles]);
useEffect(() => {
if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
return;
let uploaded = 0;
uploadedFiles.forEach(({ file }, i) => {
if (i < uploadFileIndex) uploaded += file.size;
});
setCompleted(uploaded);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [uploadFileIndex]);
useEffect(() => {
if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
const { file } = uploadedFiles[uploadFileIndex];
const uploaded = completed + file.size * uploadProgress;
const x = Math.min(99, Math.floor((uploaded / total) * 100));
setProgress(x);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [uploadProgress, completed]);
return (
<>
<Grid container>
<Grid xs={12}>
<Typography align="center">
{`File ${uploadFileIndex + 1} of ${
uploadedFiles.length
}. ${uploadStatus}`}
</Typography>
</Grid>
</Grid>
<Grid container alignContent="center" spacing={0}>
<Grid xs={11}>
<LinearProgress
variant="determinate"
value={progress}
style={{ marginTop: 16 }}
/>
</Grid>
<Grid xs={1} alignContent="flex-end" align="right">
<Button onClick={props.onCancel}>Cancel</Button>
</Grid>
</Grid>
</>
);
};
export default ManifestUploadProgress;

77
src/components/Controls/OptionsDropdown/index.jsx Normal file
View File

@@ -0,0 +1,77 @@
import React, {useEffect, useRef, useState} from "react";
import {ClickAwayListener, Grow, IconButton, MenuList, Paper, Popper} from "@material-ui/core";
import TuneIcon from "@material-ui/icons/Tune";
const OptionsDropdown = ({listId, children}) => {
const [open, setOpen] = useState(false);
const anchorRef = useRef(null);
const prevOpen = useRef(open);
const handleToggle = () => {
setOpen((pOpen) => !pOpen);
};
const handleClose = (event) => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
const handleListKeyDown = (event) => {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return (<div>
<IconButton
ref={anchorRef}
aria-controls={open ? listId : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
<TuneIcon />
</IconButton>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition>
{({TransitionProps, placement}) => (
<Grow
{...TransitionProps}
style={{
transformOrigin:
placement ===
'bottom' ?
'center top' :
'center bottom'
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList
autoFocusItem={open}
id={listId}
onKeyDown={handleListKeyDown}
>
{children}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
);
}
export default OptionsDropdown;

251
src/components/Controls/SendCommand/Commands.jsx Normal file
View File

@@ -0,0 +1,251 @@
import {Grid, Slider, Switch} from "@material-ui/core";
import Typography from "@material-ui/core/Typography";
const tempMarks = [...[{value: 0, label: "Off"}, {value: 1, label: "On"},],
...Array.from({length: 26}, (_, i) => {
return {value: i + 2, label: `${i + 15}°C`}
})];
const valuetext = (value) => {
return `${value}`;
}
const highMidLowOffMarks = [{
value: 3, label: "High",
}, {
value: 2, label: "Mid",
}, {
value: 1, label: "Low",
}, {
value: 0, label: "Off",
},]
const precondMarks = [
{value: 0, label: "Battery"},
{value: 1, label: "All"},
{value: 2, label: "Climate"},
{value: 3, label: "Stop"},
]
const labelFunc = (marks) => (value) => marks.find(mark => mark.value === value)?.label;
const labelRemoved = (marks) => Array.from(marks).map((mark) => {
return {value: mark.value}
})
const Commands = [
{value: "doors_lock", label: "Lock doors"},
{value: "doors_unlock", label: "Unlock doors"},
{value: "vent_windows", label: "Vent windows"},
{value: "close_windows", label: "Close windows"},
{value: "flash_headlights", label: "Flash headlights"},
{value: "trunk_close", label: "Close trunk"},
{value: "alert", label: "Alert"},
{
value: "precondition", label: "Precondition", params: {
dataFunc: (val, handleValChange) => <span>
<Typography id="precondition-slider" gutterBottom>
Set driver seat preheat
</Typography>
<Slider
valueLabelFormat={labelFunc(precondMarks)}
getAriaValueText={labelFunc(precondMarks)}
defaultValue={0}
value={val}
aria-labelledby="precondition-slider"
valueLabelDisplay="auto"
step={null}
min={0}
max={3}
marks={precondMarks}
size="small"
onChange={handleValChange}
/>
</span>,
}
},
{
value: "california_mode", label: "California mode", params: {
dataFunc: (val, handleValChange) => {
if (typeof val !== "boolean") {
val = false
}
return <span>
<Typography id="california_mode-slider" gutterBottom>
Set California mode
</Typography>
<Typography component="div">
<Grid component="label" container alignItems="center" spacing={1}>
<Grid item>Off</Grid>
<Grid item>
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
</Grid>
<Grid item>On</Grid>
</Grid>
</Typography>
</span>
},
},
}, {
value: "trunk_open", label: "Open trunk", params: {
dataFunc: (val, handleValChange) => <span>
<Typography id="trunk_open-slider" gutterBottom>
Set trunk's openness level
</Typography>
<Slider
defaultValue={1}
value={val}
getAriaValueText={valuetext}
aria-label="Open trunk"
aria-labelledby="trunk_open-slider"
valueLabelDisplay="auto"
step={1}
marks
size="small"
min={1}
max={5}
onChange={handleValChange}
/>
</span>,
}
}, {
value: "temp_cabin", label: "Set cabin temperature(°C)", params: {
dataFunc: (val, handleValChange) => {
return <span>
<Typography id="temp_cabin-slider" gutterBottom>
Set cabin temperature
</Typography>
<Slider
valueLabelFormat={labelFunc(tempMarks)}
getAriaValueText={labelFunc(tempMarks)}
defaultValue={0}
value={val}
aria-labelledby="temp_cabin-slider"
valueLabelDisplay="auto"
step={1}
min={0}
max={27}
marks={labelRemoved(tempMarks)}
size="small"
onChange={handleValChange}
/>
</span>
}
}
}, {
value: "defrost", label: "Defrost", params: {
dataFunc: (val, handleValChange) => {
if (typeof val !== "boolean") {
val = false
}
return <span>
<Typography id="defrost-slider" gutterBottom>
Set defrost
</Typography>
<Typography component="div">
<Grid component="label" container alignItems="center" spacing={1}>
<Grid item>Off</Grid>
<Grid item>
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
</Grid>
<Grid item>On</Grid>
</Grid>
</Typography>
</span>
},
},
}, {
value: "driver_seat_preheat", label: "Driver seat preheat", params: {
dataFunc: (val, handleValChange) => <span>
<Typography id="driver_seat_preheat-slider" gutterBottom>
Set driver seat preheat
</Typography>
<Slider
valueLabelFormat={labelFunc(highMidLowOffMarks)}
getAriaValueText={labelFunc(highMidLowOffMarks)}
defaultValue={0}
value={val}
aria-labelledby="driver_seat_preheat-slider"
valueLabelDisplay="auto"
step={null}
min={0}
max={3}
marks={highMidLowOffMarks}
size="small"
onChange={handleValChange}
/>
</span>,
}
}, {
value: "passenger_seat_preheat", label: "Preheat passenger seat", params: {
dataFunc: (val, handleValChange) => <span>
<Typography id="passenger_seat_preheat-slider" gutterBottom>
Set passenger seat preheat
</Typography>
<Slider
valueLabelFormat={labelFunc(highMidLowOffMarks)}
getAriaValueText={labelFunc(highMidLowOffMarks)}
defaultValue={0}
value={val}
aria-labelledby="passenger_seat_preheat-slider"
valueLabelDisplay="auto"
step={null}
min={0}
max={3}
marks={highMidLowOffMarks}
size="small"
onChange={handleValChange}
/>
</span>,
}
}, {
value: "steering_wheel_preheat", label: "Preheat Steering wheel", params: {
dataFunc: (val, handleValChange) => {
if (typeof val !== "boolean") {
val = false
}
return <span>
<Typography id="steering_wheel_preheat-slider" gutterBottom>
Set steering wheel preheat on/off
</Typography>
<Typography component="div">
<Grid component="label" container alignItems="center" spacing={1}>
<Grid item>Off</Grid>
<Grid item>
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
</Grid>
<Grid item>On</Grid>
</Grid>
</Typography>
</span>
},
},
}, {
value: "charging", label: "Charging", params: {
dataFunc: (val, handleValChange) => {
if (typeof val !== "boolean") {
val = false
}
return <span>
<Typography id="charging-slider" gutterBottom>
Set charging on/off
</Typography>
<Typography component="div">
<Grid component="label" container alignItems="center" spacing={1}>
<Grid item>Off</Grid>
<Grid item>
<Switch checked={val} onChange={handleValChange} name="checkedC"/>
</Grid>
<Grid item>On</Grid>
</Grid>
</Typography>
</span>
},
},
}]
export default Commands;

73
src/components/Controls/SendCommand/Parameters.jsx Normal file
View File

@@ -0,0 +1,73 @@
import PropTypes from "prop-types";
import {FormControl} from "@material-ui/core";
import useStyles from "../../useStyles";
import {MuiPickersUtilsProvider} from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
export const Dates = (
{
startDateFunc,
endDateFunc,
startDate,
handleStartChange,
endDate,
handleEndChange,
}) => {
if (startDateFunc && endDateFunc) {
return (<MuiPickersUtilsProvider utils={DateFnsUtils}>
{startDateFunc(startDate, handleStartChange)}
{endDateFunc(endDate, handleEndChange, startDate)}
</MuiPickersUtilsProvider>);
}
return null;
}
Dates.propTypes = {
startDateFunc: PropTypes.func,
endDateFunc: PropTypes.func,
startDate: PropTypes.instanceOf(Date),
handleStartChange: PropTypes.func,
endDate: PropTypes.instanceOf(Date),
handleEndChange: PropTypes.func
}
export const Parameters = (props) => {
const {params} = props;
const classes = useStyles();
if (params === null || params === undefined || params === "") {
return null;
}
const {data, handleDataChange} = props;
const {startDate, handleStartChange} = props;
const {endDate, handleEndChange} = props;
return (
<FormControl size="small" className={classes.formControl}>
<div style={{width: "300px", marginTop: "1em"}}>
{params.dataFunc(data, handleDataChange)}
</div>
<Dates
startDateFunc={params.startDateFunc}
endDateFunc={params.endDateFunc}
startDate={startDate}
handleStartChange={handleStartChange}
endDate={endDate}
handleEndChange={handleEndChange}
></Dates>
</FormControl>
)
}
Parameters.propTypes = {
params: PropTypes.any,
data: PropTypes.any,
handleDataChange: PropTypes.func,
startDate: PropTypes.instanceOf(Date),
handleStartChange: PropTypes.func,
endDate: PropTypes.instanceOf(Date),
handleEndChange: PropTypes.func
};

140
src/components/Controls/SendCommand/Parameters.test.jsx Normal file
View File

@@ -0,0 +1,140 @@
jest.mock("@material-ui/pickers/MuiPickersUtilsProvider")
import {render, waitFor} from "@testing-library/react";
import {Dates, Parameters} from "./Parameters";
import addSnapshotSerializer from "../../../utils/snapshot";
const date = Date.parse("2011-10-10T14:48:00")
const renderDates = async (empty) => {
if (empty) {
await waitFor(() => {
/* render */
});
const { container } = render(<Dates startDateFunc={null} endDateFunc={null}/>)
return container;
}
const [start, setStart] = [date, (_) => {}];
const [end, setEnd] = [date, (_) => {}];
const handleStartChange = (val) => {
setStart(val)
}
const handleEndChange = (val) => {
setEnd(val)
}
await waitFor(() => {
/* render */
});
const {container} = render(
<div>
<Dates
startDateFunc={(val, handleValChange) => <div>{val.toString()}</div>}
endDateFunc={(val, handleValChange, prevVal) => <div>{val.toString()}, {prevVal.toString()}</div>}
startDate={start}
endDate={end}
handleStartChange={handleStartChange}
handleEndChange={handleEndChange}
/>
</div>
)
return container
}
describe("Dates", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
})
it("Render empty", async () => {
const container = await renderDates(true);
expect(container).toMatchSnapshot();
})
it("Render filled", async () => {
const container = await renderDates(false);
expect(container).toMatchSnapshot();
})
})
const renderState = {
EMPTY: 0,
JUST_DATA: 1,
WITH_DATE: 2,
}
const renderParameters = async (rs) => {
await waitFor(() => {
/* render */
});
if (rs===renderState.EMPTY) {
const { container } = render(<Parameters/>)
return container;
}
const params = {dataFunc:(val, handleValChange) => <div>val.toString()</div>}
const [data, handleDataChange] = [true, (_)=>{}];
if (rs===renderState.JUST_DATA) {
const { container } = render(<Parameters
params={params}
data={data}
handleDataChange={handleDataChange}
/>)
return container;
}
params.startDateFunc = (val, handleValChange) => (<div>val.toString()</div>)
params.endDateFunc = (val, handleValChange, prevVal) => (<div>val.toString(), prevVal.toString()</div>)
const [start, handleStartChange] = [date, (_)=>{}];
const [end, handleEndChange] = [date, (_)=>{}];
if (rs===renderState.WITH_DATE) {
const {container} = render(<Parameters
params={params}
data={data}
handleDataChange={handleDataChange}
start={start}
handleStartChange={handleStartChange}
end={end}
handleEndChange={handleEndChange}
/>
)
return container
}
}
describe("Params", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
})
it("Render empty", async () => {
const container = await renderParameters(renderState.EMPTY);
expect(container).toMatchSnapshot();
})
it("Render just data", async () => {
const container = await renderDates(renderState.JUST_DATA);
expect(container).toMatchSnapshot();
})
it("Render with date", async () => {
const container = await renderDates(renderState.WITH_DATE);
expect(container).toMatchSnapshot();
})
})

24
src/components/Controls/SendCommand/__snapshots__/Parameters.test.jsx.snap Normal file
View File

@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dates Render empty 1`] = `<div />`;
exports[`Dates Render filled 1`] = `
<div>
<div>
<div>
1318258080000
</div>
<div>
1318258080000
,
1318258080000
</div>
</div>
</div>
`;
exports[`Params Render empty 1`] = `<div />`;
exports[`Params Render just data 1`] = `<div />`;
exports[`Params Render with date 1`] = `<div />`;

122
src/components/Controls/SendCommand/index.jsx
View File

@@ -1,31 +1,32 @@
import React, { useEffect, useState } from "react";
import React, {useEffect, useState} from "react";
import PropTypes from "prop-types";
import { FormControl, IconButton, InputLabel, Select } from "@material-ui/core";
import SendIcon from "@material-ui/icons/Send";
import {Button, FormControl, InputLabel, Select} from "@material-ui/core";
import { useVehicleContext } from "../../Contexts/VehicleContext";
import commands from "../../../services/commands";
import {useVehicleContext} from "../../Contexts/VehicleContext";
import commands from "./Commands";
import useStyles from "../../useStyles";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { logger } from "../../../services/monitoring";
import {useUserContext} from "../../Contexts/UserContext";
import {useStatusContext} from "../../Contexts/StatusContext";
import {logger} from "../../../services/monitoring";
import {Parameters} from "./Parameters";
import clsx from "clsx";
import {sanitize} from "./sanitize";
const SendCommand = ({ vins }) => {
const SendCommand = ({vins}) => {
const classes = useStyles();
const { sendCommand, busy } = useVehicleContext();
const {busy, sendCommand} = useVehicleContext();
const {
token: {
idToken: { jwtToken: token },
idToken: {jwtToken: token},
},
} = useUserContext();
const NoParameters = {
value: "",
label: "None",
};
const { setMessage } = useStatusContext();
const {setMessage} = useStatusContext();
const [command, setCommand] = useState("");
const [parameters, setParameters] = useState([NoParameters]);
const [parameter, setParameter] = useState("");
const [parameters, setParameters] = useState(null);
const [data, setData] = useState(null);
const [startTime, setStartTime] = useState(null)
const [endTime, setEndTime] = useState(null)
const changeCommandHandler = (e) => {
selectCommand(e.target.value);
};
@@ -34,16 +35,27 @@ const SendCommand = ({ vins }) => {
const params = getParameters(cmd);
setCommand(cmd);
setParameters(params);
setParameter(params[0].value);
setData(null);
setStartTime(null);
setEndTime(null);
};
const changeParametersHandler = (e) => {
setParameter(e.target.value);
const handleDataChange = (_, value) => {
setData(value);
};
const clickHandler = async (e) => {
const handleStartChange = (date, _) => {
setStartTime(date);
}
const handleEndChange = (date, _) => {
setEndTime(date)
}
const clickHandler = async (_) => {
try {
await sendCommand(vins, command, parameter, token);
const cmd = sanitize({command: command, data: data, start: startTime, end: endTime});
await sendCommand(vins, cmd, token);
if (vins.length === 1) {
setMessage(`Sent command to ${vins[0]}`);
} else {
@@ -59,13 +71,13 @@ const SendCommand = ({ vins }) => {
for (let i = 0, len = commands.length; i < len; i += 1) {
const item = commands[i];
if (item.value === cmd) {
if (!item.parameters) {
if (!item.params) {
break;
}
return item.parameters;
return item.params;
}
}
return [NoParameters];
return null;
};
useEffect(() => {
@@ -75,9 +87,9 @@ const SendCommand = ({ vins }) => {
}, []);
return (
<div className={classes.form} style={{ marginTop: 20 }}>
<div className={clsx(classes.paper)} style={{marginTop: 20}}>
<FormControl
className={classes.formControlInline}
className={classes.formControl}
variant="outlined"
size="small"
>
@@ -101,45 +113,27 @@ const SendCommand = ({ vins }) => {
))}
</Select>
</FormControl>
<FormControl
className={classes.formControlInline}
variant="outlined"
size="small"
>
<InputLabel
htmlFor="send-parameter"
className={classes.whiteBackground}
>
Parameter
</InputLabel>
<Select
native
value={parameter}
variant="outlined"
inputProps={{
name: "send-parameter",
id: "send-parameter",
}}
onChange={changeParametersHandler}
disabled={parameters.length === 0}
>
{parameters.map((item) => (
<option key={item.value} value={item.value}>
{item.label}
</option>
))}
</Select>
</FormControl>
<IconButton
color="primary"
<Parameters
params={parameters}
data={data}
handleDataChange={handleDataChange}
startDate={startTime}
handleStartChange={handleStartChange}
endDate={endTime}
handleEndChange={handleEndChange}
/>
<Button
type="submit"
aria-label="send command"
component="span"
onClick={clickHandler}
size="small"
disabled={busy || vins.length === 0}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={clickHandler}
>
<SendIcon fontSize="large" />
</IconButton>
{busy ? "Sending..." : "Send"}
</Button>
</div>
);
};

115
src/components/Controls/SendCommand/sanitize.js Normal file
View File

@@ -0,0 +1,115 @@
export const onOff = {
false: "off",
true: "on",
}
export const onOffTemp = {
0: "off",
1: "on",
...Object.fromEntries(Array.from({length: 26}, (_, i) => [i+2, `${i+15}`]))
}
export const precond = {
0: "battery",
1: "all",
2: "climate",
3: "stop"
}
export const hmol = {
0: "off",
1: "low",
2: "mid",
3: "high"
}
export const emptyCommands = [
"doors_lock", "doors_unlock", "vent_windows",
"close_windows", "trunk_close", "flash_headlights",
"alert"
]
export const onOffCommands = ["california_mode", "steering_wheel_preheat", "defrost", "charging"]
export const hmolCommands = ["passenger_seat_preheat", "driver_seat_preheat"]
const removeIfFieldsAreEmpty = (cmd, fields) => {
for (const field of fields) {
if (cmd[field] == null) {
delete cmd[field]
}
}
return cmd
}
const tempCabinPeriodConvert = (cmd) => {
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 27) {
cmd.data = 0
}
cmd.data = onOffTemp[cmd.data]
return cmd
}
const onOffConvert = (cmd) => {
if (cmd.data == null || cmd.data !== true) {
cmd.data = false
}
cmd.data = onOff[cmd.data]
return cmd
}
const precondConvert = cmd => {
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
cmd.data = 0
}
cmd.data = precond[cmd.data]
return cmd
}
const hmolConvert = (cmd) => {
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 0 || cmd.data > 3) {
cmd.data = 0
}
cmd.data = hmol[cmd.data]
return cmd
}
const trunkOpenConvert = (cmd) => {
if (cmd.data == null || typeof cmd.data !== "number" || cmd.data < 1 || cmd.data > 5) {
cmd.data = 1
}
cmd.data = cmd.data.toString()
return cmd
}
export const sanitize = (cmd) => {
cmd = removeIfFieldsAreEmpty(cmd, ["data", "start", "end"])
if (onOffCommands.includes(cmd.command)) {
cmd = onOffConvert(cmd)
} else if (hmolCommands.includes(cmd.command)) {
cmd = hmolConvert(cmd)
} else if (cmd.command === "precondition") {
cmd = precondConvert(cmd)
} else if (cmd.command === "trunk_open") {
cmd = trunkOpenConvert(cmd)
} else if (cmd.command === "temp_cabin") {
cmd = tempCabinPeriodConvert(cmd)
} else {
delete cmd.data;
}
return cmd
}

150
src/components/Controls/SendCommand/sanitize.test.js Normal file
View File

@@ -0,0 +1,150 @@
import {emptyCommands, hmol, hmolCommands, onOff, onOffCommands, onOffTemp, precond, sanitize,} from "./sanitize";
const randomValues = [null, undefined, "someString", 33]
describe("Sanitize test", () => {
it("empty commands", () => {
for (const command of emptyCommands) {
const cmd = sanitize({command})
expect(cmd.command).toEqual(command)
expect("data" in cmd).toEqual(false);
expect("start" in cmd).toEqual(false);
expect("end" in cmd).toEqual(false);
}
})
it("on-off commands with proper values", () => {
for (const command of onOffCommands) {
for (const data of [false, true]) {
const cmd = sanitize({command, data})
expect(cmd.data).toEqual(onOff[data])
expect(cmd.command).toEqual(command)
expect("start" in cmd).toEqual(false);
expect("end" in cmd).toEqual(false);
}
}
})
it("on-off commands with dirty values", () => {
for (const command of onOffCommands) {
const cmd = {command}
for (const rVal of randomValues) {
if (rVal !== undefined) {
cmd.data = rVal
}
const res = sanitize(cmd)
expect(res.data).toEqual("off")
expect(res.command).toEqual(command)
expect("start" in res).toEqual(false);
expect("end" in res).toEqual(false);
}
}
})
it("high-mid-low-off with proper values", () => {
for (const command of hmolCommands) {
for (const data of [0,1,2,3]) {
const cmd = sanitize({command, data})
expect(cmd.data).toEqual(hmol[data])
expect(cmd.command).toEqual(command)
expect("start" in cmd).toEqual(false);
expect("end" in cmd).toEqual(false);
}
}
})
it("precondition with proper values", () => {
for (const data of [0,1,2,3]) {
const cmd = sanitize({command:"precondition", data})
expect(cmd.data).toEqual(precond[data])
expect(cmd.command).toEqual("precondition")
expect("start" in cmd).toEqual(false);
expect("end" in cmd).toEqual(false);
}
})
it("precondition with wrong values", () => {
const cmd = {command:"precondition"}
for (const rVal of randomValues) {
if (rVal !== undefined) {
cmd.data = rVal
}
const res = sanitize(cmd)
expect(res.data).toEqual("battery")
expect(res.command).toEqual("precondition")
expect("start" in res).toEqual(false);
expect("end" in res).toEqual(false);
}
})
it("high-mid-low-off with wrong values", () => {
for (const command of hmolCommands) {
const cmd = {command}
for (const rVal of randomValues) {
if (rVal !== undefined) {
cmd.data = rVal
}
const res = sanitize(cmd)
expect(res.data).toEqual("off")
expect(res.command).toEqual(command)
expect("start" in res).toEqual(false);
expect("end" in res).toEqual(false);
}
}
})
it("open trunk", () => {
const cmd = {command: "trunk_open"}
for (let i = 1; i <= 5; i++) {
cmd.data = i
const res = sanitize(cmd)
expect(res.data).toEqual(i.toString())
expect(res.command).toEqual("trunk_open")
expect("start" in res).toEqual(false);
expect("end" in res).toEqual(false);
}
})
it("open trunk with wrong values", () => {
const cmd = {command: "trunk_open"}
for (const rVal of randomValues) {
if (rVal !== undefined) {
cmd.data = rVal
}
const res = sanitize(cmd)
expect(res.data).toEqual("1")
expect(res.command).toEqual("trunk_open")
expect("start" in res).toEqual(false);
expect("end" in res).toEqual(false);
}
})
it("cabin temp with period with proper values", () => {
for (let i = 0; i <= 27; i++) {
const res = sanitize({
command: "temp_cabin",
data: i,
start: new Date(),
end: new Date(),
})
expect(res.command).toEqual("temp_cabin")
expect(res.data).toEqual(onOffTemp[i])
expect(typeof res.start).toEqual("object")
expect(typeof res.end).toEqual("object")
}
})
})

2
src/components/Controls/TabPanel/__snapshots__/index.test.jsx.snap
View File

@@ -8,7 +8,7 @@ exports[`TabPanel Render 1`] = `
role="tabpanel"
>
<div
class="MuiBox-root MuiBox-root-1"
class="MuiBox-root MuiBox-root-0"
>
<div>
Test

68
src/components/Fleets/Add/__snapshots__/index.test.jsx.snap
View File

@@ -55,10 +55,10 @@ exports[`FleetAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Name
@@ -85,19 +85,19 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="trace"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -111,7 +111,7 @@ exports[`FleetAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -136,19 +136,19 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="debug"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -162,7 +162,7 @@ exports[`FleetAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -187,20 +187,20 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
checked=""
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="info"
/>
<div
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
>
<svg
aria-hidden="true"
@@ -214,7 +214,7 @@ exports[`FleetAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -239,19 +239,19 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="warn"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -265,7 +265,7 @@ exports[`FleetAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -290,19 +290,19 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="error"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -316,7 +316,7 @@ exports[`FleetAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -341,19 +341,19 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="critical"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -367,7 +367,7 @@ exports[`FleetAddForm Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -402,14 +402,14 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
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-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -468,10 +468,10 @@ exports[`FleetAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Memory Buffer Size (0 uses default size)
@@ -486,13 +486,13 @@ exports[`FleetAddForm Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -553,10 +553,10 @@ exports[`FleetAddForm Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Disk Buffer Size (0 uses default size)

12
src/components/Fleets/Status/CANFilters/Add/__snapshots__/index.test.jsx.snap
View File

@@ -56,10 +56,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Fleet Name
@@ -102,10 +102,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
CAN ID
@@ -140,10 +140,10 @@ exports[`FleetCANFilterAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Interval

12
src/components/Fleets/Status/CANFilters/Update/__snapshots__/index.test.jsx.snap
View File

@@ -56,10 +56,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Fleet Name
@@ -103,10 +103,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
CAN ID
@@ -149,10 +149,10 @@ exports[`FleetCANFilterUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Interval

4
src/components/Fleets/Status/Vehicles/Add/__snapshots__/index.test.jsx.snap
View File

@@ -55,10 +55,10 @@ exports[`FleetVehicleAdd Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN

10
src/components/Fleets/Status/Vehicles/Table/index.jsx
View File

@@ -42,11 +42,16 @@ const MainForm = ({ name }) => {
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const [search, setSearch] = useState("");
const classes = useStyles();
const { setMessage } = useStatusContext();
const { fleetVehicles, totalFleetVehicles, getFleetVehicles, deleteFleetVehicle } = useFleetContext();
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
const handleSearch = (query) => {
setSearch(query);
};
useEffect(() => {
(async () => {
try {
@@ -54,6 +59,7 @@ const MainForm = ({ name }) => {
await getFleetVehicles(
name,
{
search,
limit: pageSize,
offset: pageSize * pageIndex,
order: `${orderBy} ${order}`,
@@ -66,7 +72,7 @@ const MainForm = ({ name }) => {
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token, pageIndex, pageSize, orderBy, order]);
}, [token, pageIndex, pageSize, orderBy, order, search]);
const handleChangePageIndex = (event, newIndex) => {
setPageIndex(newIndex);
@@ -145,7 +151,7 @@ const MainForm = ({ name }) => {
</Link>
</Grid>
<Grid item md={8} align="right" className={classes.textCenterAlign}>
<SearchField classes={classes} />
<SearchField classes={classes} onSearch={handleSearch}/>
</Grid>
</Grid>
<Table>

6
src/components/Fleets/Status/__snapshots__/index.test.jsx.snap
View File

@@ -15,7 +15,7 @@ exports[`FleetStatus Render 1`] = `
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<div
class="MuiBox-root MuiBox-root-64 makeStyles-tableToolbar-0"
class="MuiBox-root MuiBox-root-0 makeStyles-tableToolbar-0"
>
<div
class="MuiTabs-root"
@@ -85,7 +85,7 @@ exports[`FleetStatus Render 1`] = `
</button>
</div>
<span
class="PrivateTabIndicator-root-65 PrivateTabIndicator-colorSecondary-67 MuiTabs-indicator"
class="PrivateTabIndicator-root-0 PrivateTabIndicator-colorSecondary-0 MuiTabs-indicator"
style="left: 0px; width: 0px;"
/>
</div>
@@ -97,7 +97,7 @@ exports[`FleetStatus Render 1`] = `
role="tabpanel"
>
<div
class="MuiBox-root MuiBox-root-69"
class="MuiBox-root MuiBox-root-0"
>
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"

744
src/components/Fleets/Table/__snapshots__/index.test.jsx.snap
View File

@@ -24,7 +24,6 @@ exports[`FleetTable Render 1`] = `
class="MuiGrid-root makeStyles-textJustifyAlign-0 MuiGrid-item MuiGrid-grid-md-4"
>
<a
class="makeStyles-labelInline-0"
href="/fleet-add"
>
<svg
@@ -40,7 +39,6 @@ exports[`FleetTable Render 1`] = `
</a>
</div>
<div
align="right"
class="MuiGrid-root makeStyles-textCenterAlign-0 MuiGrid-item MuiGrid-grid-md-4"
>
<div
@@ -98,397 +96,401 @@ exports[`FleetTable Render 1`] = `
class="MuiGrid-root makeStyles-textRightAlign-0 MuiGrid-item MuiGrid-grid-md-4"
/>
</div>
<table
class="MuiTable-root"
<div
class="makeStyles-paper-0 makeStyles-tableSize-0"
>
<thead
class="MuiTableHead-root"
<table
class="MuiTable-root"
>
<tr
class="MuiTableRow-root MuiTableRow-head"
<thead
class="MuiTableHead-root"
>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
<tr
class="MuiTableRow-root MuiTableRow-head"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Name
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
<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"
>
Log Level
<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"
>
CAN Bus Enabled
<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"
>
Data Logger Enabled
<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"
>
Vehicles
<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"
>
Filters
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root"
>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/US-WEST"
>
US-WEST
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
info
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/US-CENTRAL"
>
US-CENTRAL
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
warn
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
0
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/US-EAST"
>
US-EAST
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
error
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
0
</td>
</tr>
</tbody>
<tfoot
class="MuiTableFooter-root"
>
<tr
class="MuiTableRow-root MuiTableRow-footer"
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="8"
>
<div
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
>
<div
class="MuiTablePagination-spacer"
/>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
>
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"
>
<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>
Name
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</div>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
</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"
>
1-3 of 3
</p>
Log Level
<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"
>
CAN Bus Enabled
<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"
>
Data Logger Enabled
<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"
>
Vehicles
<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"
>
Filters
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody
class="MuiTableBody-root"
>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/US-WEST"
>
US-WEST
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
info
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/US-CENTRAL"
>
US-CENTRAL
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
warn
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
0
</td>
</tr>
<tr
class="MuiTableRow-root"
>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
href="/fleet/US-EAST"
>
US-EAST
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
error
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
3
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
0
</td>
</tr>
</tbody>
<tfoot
class="MuiTableFooter-root"
>
<tr
class="MuiTableRow-root MuiTableRow-footer"
>
<td
class="MuiTableCell-root MuiTableCell-footer MuiTablePagination-root"
colspan="8"
>
<div
class="MuiTablePagination-actions"
class="MuiToolbar-root MuiToolbar-regular MuiTablePagination-toolbar MuiToolbar-gutters"
>
<button
aria-label="Previous page"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit Mui-disabled Mui-disabled"
disabled=""
tabindex="-1"
title="Previous page"
type="button"
<div
class="MuiTablePagination-spacer"
/>
<p
class="MuiTypography-root MuiTablePagination-caption MuiTypography-body2 MuiTypography-colorInherit"
>
<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"
Rows per page:
</p>
<div
class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot"
>
<span
class="MuiIconButton-label"
<select
aria-label="rows per page"
class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiInputBase-input"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
<option
class="MuiTablePagination-menuItem"
value="5"
>
<path
d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
/>
</svg>
</span>
</button>
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"
>
1-3 of 3
</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>
</div>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>

170
src/components/Fleets/Table/index.jsx
View File

@@ -1,66 +1,26 @@
import React, { useEffect, useState } from "react";
import { Link } from 'react-router-dom';
import {
Grid,
Table,
TableBody,
TableCell,
TableFooter,
TablePagination,
TableRow
} from "@material-ui/core";
import React, {useEffect, useState} from "react";
import {Link} from 'react-router-dom';
import {Grid,} from "@material-ui/core";
import AddCircleIcon from "@material-ui/icons/AddCircle";
import clsx from "clsx";
import TableHeaderSortable from "../../Table/HeaderSortable";
import {
useUserContext
} from "../../Contexts/UserContext"
import { useStatusContext } from "../../Contexts/StatusContext";
import { FleetProvider, useFleetContext } from "../../Contexts/FleetContext"
import {useUserContext} from "../../Contexts/UserContext"
import {useStatusContext} from "../../Contexts/StatusContext";
import {FleetProvider} from "../../Contexts/FleetContext"
import useStyles from "../../useStyles";
import SearchField from "../../Controls/SearchField";
import { logger } from "../../../services/monitoring";
import {useLocalStorage} from "../../useLocalStorage";
import FleetSelectionTable from "../../Controls/FleetSelectionTable";
const tableColumns = [
{
id: "name",
label: "Name"
},
{
id: "log_level",
label: "Log Level"
},
{
id: "canbus_enabled",
label: "CAN Bus Enabled"
},
{
id: "data_logger_enabled",
label: "Data Logger Enabled"
},
{
id: "num_vehicles",
label: "Vehicles"
},
{
id: "num_filters",
label: "Filters"
}
];
const PAGE_SIZE = "FLEET_TABLE_PAGE_SIZE";
const MainForm = () => {
const [pageSize, setPageSize] = useLocalStorage(PAGE_SIZE, 10);
const [pageIndex, setPageIndex] = useState(0);
const [orderBy, setOrderBy] = useState("id");
const [order, setOrder] = useState("desc");
const classes = useStyles();
const { setMessage, setSitePath, setTitle } = useStatusContext();
const { fleets, totalFleets, getFleets } = useFleetContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
const [search, setSearch] = useState("");
const {setSitePath, setTitle} = useStatusContext();
const {token: {idToken: {jwtToken: token}}} = useUserContext();
const handleSearch = (query) => {
setSearch(query);
};
useEffect(() => {
setTitle("Fleets");
@@ -68,106 +28,26 @@ const MainForm = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
(async () => {
try {
if (!token) return;
await getFleets(
{
limit: pageSize,
offset: pageSize * pageIndex,
order: `${orderBy} ${order}`,
},
token
);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [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 (
<div className={clsx(classes.paper, classes.tableSize)}>
<Grid container className={classes.root} spacing={2}>
<Grid item md={4} className={classes.textJustifyAlign}>
<Link to={"/fleet-add"} className={classes.labelInline}>
<AddCircleIcon fontSize="large" />
<Link to={"/fleet-add"}>
<AddCircleIcon fontSize="large"/>
</Link>
</Grid>
<Grid item md={4} align="right" className={classes.textCenterAlign}>
<SearchField classes={classes} />
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch}/>
</Grid>
<Grid item md={4} className={classes.textRightAlign}></Grid>
</Grid>
<Table>
<TableHeaderSortable
classes={classes}
orderBy={orderBy}
order={order}
columnData={tableColumns}
onSortRequest={handleSort}
/>
<TableBody>
{fleets.map((row) => (
<TableRow key={row.name}>
<TableCell align="center">
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
</TableCell>
<TableCell align="center">{row.log_level}</TableCell>
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, 100]}
colSpan={8}
count={totalFleets}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: true,
}}
onPageChange={handleChangePageIndex}
onRowsPerPageChange={handleChangePageSize}
/>
</TableRow>
</TableFooter>
</Table>
</div >
<FleetSelectionTable
token={token}
classes={classes}
search={{search}}
multiSelect={false}
/>
</div>
);
};

76
src/components/Fleets/Update/__snapshots__/index.test.jsx.snap
View File

@@ -26,7 +26,7 @@ exports[`FleetUpdate Render 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
data-shrink="false"
for="name"
id="name-label"
@@ -41,26 +41,24 @@ exports[`FleetUpdate Render 1`] = `
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
disabled=""
class="MuiInputBase-input MuiOutlinedInput-input"
id="name"
maxlength="255"
name="name"
readonly=""
required=""
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66"
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Name
@@ -87,19 +85,19 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="trace"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -113,7 +111,7 @@ exports[`FleetUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -138,19 +136,19 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="debug"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -164,7 +162,7 @@ exports[`FleetUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -189,20 +187,20 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
checked=""
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="info"
/>
<div
class="PrivateRadioButtonIcon-root-72 PrivateRadioButtonIcon-checked-74"
class="PrivateRadioButtonIcon-root-0 PrivateRadioButtonIcon-checked-0"
>
<svg
aria-hidden="true"
@@ -216,7 +214,7 @@ exports[`FleetUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -241,19 +239,19 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="warn"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -267,7 +265,7 @@ exports[`FleetUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -292,19 +290,19 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="error"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -318,7 +316,7 @@ exports[`FleetUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -343,19 +341,19 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
name="log-level-group"
type="radio"
value="critical"
/>
<div
class="PrivateRadioButtonIcon-root-72"
class="PrivateRadioButtonIcon-root-0"
>
<svg
aria-hidden="true"
@@ -369,7 +367,7 @@ exports[`FleetUpdate Render 1`] = `
</svg>
<svg
aria-hidden="true"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-73"
class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-0"
focusable="false"
viewBox="0 0 24 24"
>
@@ -404,14 +402,14 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
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-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -470,10 +468,10 @@ exports[`FleetUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Memory Buffer Size (0 uses default size)
@@ -488,13 +486,13 @@ exports[`FleetUpdate Render 1`] = `
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-69 Mui-checked MuiIconButton-colorSecondary"
class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-0 MuiCheckbox-root MuiCheckbox-colorSecondary PrivateSwitchBase-checked-0 Mui-checked MuiIconButton-colorSecondary"
>
<span
class="MuiIconButton-label"
>
<input
class="PrivateSwitchBase-input-71"
class="PrivateSwitchBase-input-0"
data-indeterminate="false"
type="checkbox"
value=""
@@ -554,10 +552,10 @@ exports[`FleetUpdate Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Max Disk Buffer Size (0 uses default size)

17
src/components/Fleets/Update/index.jsx
View File

@@ -24,7 +24,6 @@ import { logger } from "../../../services/monitoring";
const MainForm = () => {
const queries = new URLSearchParams(useLocation().search);
const name = queries.get("name") ?? "";
const { fleet, getFleet, updateFleet, busy } = useFleetContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
@@ -32,6 +31,8 @@ const MainForm = () => {
const [redirect, setRedirect] = useState(null);
const classes = useStyles();
const [name, setName] = useState(queries.get("name") ?? "");
const [oldName, ] = useState(name);
const [selectedLogLevel, setSelectedLogLevel] = useState("info");
const [canbusEnabled, setCANBusEnabled] = useState(true);
const [dataLoggerEnabled, setDataLoggerEnabled] = useState(false);
@@ -56,7 +57,7 @@ const MainForm = () => {
(async () => {
try {
if (!name || !token) return;
await getFleet(name, token);
await getFleet(oldName, token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
@@ -77,6 +78,10 @@ const MainForm = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fleet]);
const onNameChange = (event) => {
setName(event.target.value);
}
const onLogLevelChange = (event) => {
setSelectedLogLevel(event.target.value);
}
@@ -110,7 +115,10 @@ const MainForm = () => {
max_disk_buffer_size: canbusEnabled && dataLoggerEnabled ? parseInt(maxDiskBufferSize) : 0
}
};
const result = await updateFleet(name, formData, token);
console.log(oldName);
const result = await updateFleet(oldName, formData, token);
if (!result || result.error) return;
setMessage(`Updated ${result.name}`);
@@ -136,12 +144,11 @@ const MainForm = () => {
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
disabled
value={name}
required
fullWidth
onChange={onNameChange}
/>
<FormLabel id="demo-row-radio-buttons-group-label">Log Level</FormLabel>
<RadioGroup

157
src/components/Manifest/Create/index.jsx
View File

@@ -1,157 +0,0 @@
import React, { useEffect, useRef, useState } from "react";
import { Redirect } from "react-router";
import { Button, TextField, Typography } from "@material-ui/core";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import {
ManifestCreateProvider,
useManifestCreateContext,
} from "../../Contexts/ManifestCreateContext";
import useStyles from "../../useStyles";
import { logger } from "../../../services/monitoring";
import ManifestECUList from "../../Controls/ManifestECUList";
import ManifestUploadProgress from "../../Controls/ManifestUploadProgress";
const MainForm = () => {
const { createManifest, cancelUpload, busy } = useManifestCreateContext();
const { token } = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [redirect, setRedirect] = useState(null);
const classes = useStyles();
const packagenameEl = useRef(null);
const versionEl = useRef(null);
const descEl = useRef(null);
const releasenotesEl = useRef(null);
useEffect(() => {
setTitle("Create Deployments");
setSitePath([
{
label: "Deployments",
link: "/packages",
},
{
label: "Create Deployments",
},
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onSubmit = async (event) => {
try {
event.preventDefault();
const {
idToken: { jwtToken: authToken },
} = token;
const formData = {
name: packagenameEl.current.value,
version: versionEl.current.value,
description: descEl.current.value,
release_notes: releasenotesEl.current.value,
};
const manifest = await createManifest(formData, authToken);
if (!manifest || manifest.error) return;
cancelUpload();
setMessage(`Package uploaded`);
setRedirect(`/package-deploy/${manifest.id}`);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
if (redirect && redirect.length > 0) {
return <Redirect to={redirect} />;
}
return (
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<TextField
id="packagename"
name="packagename"
label="Package name"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
required
fullWidth
inputRef={packagenameEl}
/>
<TextField
id="version"
name="version"
label="Version"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
required
fullWidth
inputRef={versionEl}
/>
<TextField
id="description"
name="description"
label="Description"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "5120",
}}
required
fullWidth
multiline
minRows={4}
placeholder="Package description"
inputRef={descEl}
/>
<TextField
id="release_notes"
name="release_notes"
label="Release Notes URL"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "1024",
}}
required
fullWidth
placeholder="Release Notes URL"
inputRef={releasenotesEl}
/>
<Typography variant="h6">ECU Files</Typography>
<ManifestECUList />
{busy ? (
<ManifestUploadProgress onCancel={cancelUpload} />
) : (
<Button
type="submit"
disabled={busy}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
Submit
</Button>
)}
</form>
</div>
);
};
export default function FileUploadForm() {
return (
<ManifestCreateProvider>
<MainForm />
</ManifestCreateProvider>
);
}

177
src/components/Manifest/Deploy/FleetDeployForm.jsx Normal file
View File

@@ -0,0 +1,177 @@
import React, { useEffect, useState } from "react";
import { useParams, Redirect } from "react-router";
import { Button, Grid, Typography } from "@material-ui/core";
import clsx from "clsx";
import {
ManifestsProvider,
useManifestsContext,
} from "../../Contexts/ManifestsContext";
import {
CarUpdatesProvider,
useCarUpdatesContext,
} from "../../Contexts/CarUpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import SearchField from "../../Controls/SearchField";
import
CarSelectionTable from "../../Controls/CarSelectionTable";
import { logger } from "../../../services/monitoring";
import { LocalDateTimeString } from "../../../utils/dates";
import {FleetProvider} from "../../Contexts/FleetContext";
const MainForm = () => {
const { manifest_id } = useParams();
const { getManifests, manifests, busy } = useManifestsContext();
const { deployCarUpdates } = useCarUpdatesContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [manifestName, setManifestName] = useState("");
const [version, setVersion] = useState("");
const [createDate, setCreateDate] = useState("");
const [selected, setSelected] = useState([]);
const [search, setSearch] = useState("");
const [redirect, setRedirect] = useState("");
const classes = useStyles();
const handleSearch = (query) => {
setSelected([]);
setSearch(query);
};
const handleSelectAll = (cars) => {
setSelected(cars);
};
const handleSelect = (event, key) => {
try {
let newSelected;
if (event.target.checked) {
newSelected = [...selected];
newSelected.push(key);
} else {
newSelected = selected.filter((vin) => vin !== key);
}
setSelected(newSelected);
} catch (e) {
logger.warn(e.stack);
}
};
const onSubmit = async (event) => {
try {
event.preventDefault();
const data = {
manifest_id: parseInt(manifest_id),
vins: selected,
};
await deployCarUpdates(data, token);
setMessage(
`Deployed ${manifestName} ${version} to ${selected.length} cars`
);
setRedirect(`/package-status/${manifest_id}`);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
const getData = async () => {
try {
getManifests({ id: parseInt(manifest_id) }, token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
useEffect(() => {
getData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
useEffect(() => {
const title = `Deploy ${manifestName} ${version}`;
setTitle(title);
setSitePath([
{
label: "Deployments",
link: "/packages",
},
{
label: title,
},
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [manifestName, version]);
useEffect(() => {
if (!manifests || manifests.length === 0) return;
const data = manifests[0];
setManifestName(data.name);
setVersion(data.version);
setCreateDate(LocalDateTimeString(data.created));
}, [manifests]);
if (redirect.length > 0) {
return <Redirect to={redirect} />;
}
return (
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<Typography variant="body2">Created {createDate}.</Typography>
<Grid container className={classes.root} spacing={2}>
<Grid item md={4}>
<div
className={classes.labelInline}
>{`${selected.length} Selected`}</div>
</Grid>
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
</Grid>
<Grid item md={4} className={classes.textRightAlign}>
<Button
type="submit"
disabled={busy || selected.length === 0}
variant="contained"
color="primary"
className={clsx(classes.formControl, classes.textField)}
onClick={onSubmit}
>
{busy ? "Deploying..." : "Deploy"}
</Button>
</Grid>
</Grid>
<CarSelectionTable
classes={classes}
token={token}
multiSelect={true}
search={{ search }}
selected={selected}
onSelect={handleSelect}
onSelectAll={handleSelectAll}
/>
</form>
</div>
);
};
const FleetDeployForm = () => (
<FleetProvider>
<ManifestsProvider>
<CarUpdatesProvider>
<MainForm />
</CarUpdatesProvider>
</ManifestsProvider>
</FleetProvider>
);
export default FleetDeployForm;

175
src/components/Manifest/Deploy/VehicleDeployForm.jsx Normal file
View File

@@ -0,0 +1,175 @@
import React, { useEffect, useState } from "react";
import { useParams, Redirect } from "react-router";
import { Button, Grid, Typography } from "@material-ui/core";
import clsx from "clsx";
import {
ManifestsProvider,
useManifestsContext,
} from "../../Contexts/ManifestsContext";
import {
CarUpdatesProvider,
useCarUpdatesContext,
} from "../../Contexts/CarUpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../../Controls/CarSelectionTable";
import { logger } from "../../../services/monitoring";
import { LocalDateTimeString } from "../../../utils/dates";
const MainForm = () => {
const { manifest_id } = useParams();
const { getManifests, manifests, busy } = useManifestsContext();
const { deployCarUpdates } = useCarUpdatesContext();
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [manifestName, setManifestName] = useState("");
const [version, setVersion] = useState("");
const [createDate, setCreateDate] = useState("");
const [selected, setSelected] = useState([]);
const [search, setSearch] = useState("");
const [redirect, setRedirect] = useState("");
const classes = useStyles();
const handleSearch = (query) => {
setSelected([]);
setSearch(query);
};
const handleSelectAll = (cars) => {
setSelected(cars);
};
const handleSelect = (event, key) => {
try {
let newSelected;
if (event.target.checked) {
newSelected = [...selected];
newSelected.push(key);
} else {
newSelected = selected.filter((vin) => vin !== key);
}
setSelected(newSelected);
} catch (e) {
logger.warn(e.stack);
}
};
const onSubmit = async (event) => {
try {
event.preventDefault();
const data = {
manifest_id: parseInt(manifest_id),
vins: selected,
};
await deployCarUpdates(data, token);
setMessage(
`Deployed ${manifestName} ${version} to ${selected.length} cars`
);
setRedirect(`/package-status/${manifest_id}`);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
const getData = async () => {
try {
getManifests({ id: parseInt(manifest_id) }, token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
useEffect(() => {
getData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
useEffect(() => {
const title = `Deploy ${manifestName} ${version}`;
setTitle(title);
setSitePath([
{
label: "Deployments",
link: "/packages",
},
{
label: title,
},
]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [manifestName, version]);
useEffect(() => {
if (!manifests || manifests.length === 0) return;
const data = manifests[0];
setManifestName(data.name);
setVersion(data.version);
setCreateDate(LocalDateTimeString(data.created));
}, [manifests]);
if (redirect.length > 0) {
return <Redirect to={redirect} />;
}
return (
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<Typography variant="body2">Created {createDate}.</Typography>
<Grid container className={classes.root} spacing={2}>
<Grid item md={4}>
<div
className={classes.labelInline}
>{`${selected.length} Selected`}</div>
</Grid>
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
</Grid>
<Grid item md={4} className={classes.textRightAlign}>
<Button
type="submit"
disabled={busy || selected.length === 0}
variant="contained"
color="primary"
className={clsx(classes.formControl, classes.textField)}
onClick={onSubmit}
>
{busy ? "Deploying..." : "Deploy"}
</Button>
</Grid>
</Grid>
<CarSelectionTable
classes={classes}
token={token}
multiSelect={true}
search={{ search }}
selected={selected}
onSelect={handleSelect}
onSelectAll={handleSelectAll}
/>
</form>
</div>
);
};
const VehicleDeployForm = () => (
<VehicleProvider>
<ManifestsProvider>
<CarUpdatesProvider>
<MainForm />
</CarUpdatesProvider>
</ManifestsProvider>
</VehicleProvider>
);
export default VehicleDeployForm;

121
src/components/Manifest/Deploy/index.jsx
View File

@@ -1,35 +1,37 @@
import React, { useEffect, useState } from "react";
import { useParams, Redirect } from "react-router";
import { Button, Grid, Typography } from "@material-ui/core";
import React, {useEffect, useState} from "react";
import {Redirect, useParams} from "react-router";
import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
import clsx from "clsx";
import {
ManifestsProvider,
useManifestsContext,
} from "../../Contexts/ManifestsContext";
import {
CarUpdatesProvider,
useCarUpdatesContext,
} from "../../Contexts/CarUpdatesContext";
import { VehicleProvider } from "../../Contexts/VehicleContext";
import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import {ManifestsProvider, useManifestsContext,} from "../../Contexts/ManifestsContext";
import {CarUpdatesProvider, useCarUpdatesContext,} from "../../Contexts/CarUpdatesContext";
import {VehicleProvider} from "../../Contexts/VehicleContext";
import {useUserContext} from "../../Contexts/UserContext";
import {useStatusContext} from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import SearchField from "../../Controls/SearchField";
import CarSelectionTable from "../../Controls/CarSelectionTable";
import { logger } from "../../../services/monitoring";
import { LocalDateTimeString } from "../../../utils/dates";
import {logger} from "../../../services/monitoring";
import {LocalDateTimeString} from "../../../utils/dates";
import FleetSelectionTable from "../../Controls/FleetSelectionTable";
import {FleetProvider} from "../../Contexts/FleetContext";
const CAR_UPDATE = false;
const FLEET_UPDATE = true;
const MainForm = () => {
const { manifest_id } = useParams();
const { getManifests, manifests, busy } = useManifestsContext();
const { deployCarUpdates } = useCarUpdatesContext();
const [updateType, setUpdateType] = useState(CAR_UPDATE);
const {manifest_id} = useParams();
const {getManifests, manifests, busy} = useManifestsContext();
const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
const {
token: {
idToken: { jwtToken: token },
idToken: {jwtToken: token},
},
} = useUserContext();
const { setMessage, setTitle, setSitePath } = useStatusContext();
const {setMessage, setTitle, setSitePath} = useStatusContext();
const [manifestName, setManifestName] = useState("");
const [version, setVersion] = useState("");
const [createDate, setCreateDate] = useState("");
@@ -38,6 +40,11 @@ const MainForm = () => {
const [redirect, setRedirect] = useState("");
const classes = useStyles();
const handleChange = (_) => {
setSelected([]);
setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
}
const handleSearch = (query) => {
setSelected([]);
setSearch(query);
@@ -54,7 +61,7 @@ const MainForm = () => {
newSelected = [...selected];
newSelected.push(key);
} else {
newSelected = selected.filter((vin) => vin !== key);
newSelected = selected.filter((vinOrName) => vinOrName !== key);
}
setSelected(newSelected);
} catch (e) {
@@ -67,9 +74,14 @@ const MainForm = () => {
event.preventDefault();
const data = {
manifest_id: parseInt(manifest_id),
vins: selected,
};
await deployCarUpdates(data, token);
}
if (updateType === CAR_UPDATE) {
data.vins = selected;
await deployCarUpdates(data, token);
} else {
data.fleet_names = selected;
await deployFleetUpdates(data, token);
}
setMessage(
`Deployed ${manifestName} ${version} to ${selected.length} cars`
);
@@ -82,7 +94,7 @@ const MainForm = () => {
const getData = async () => {
try {
getManifests({ id: parseInt(manifest_id) }, token);
getManifests({id: parseInt(manifest_id)}, token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
@@ -119,7 +131,7 @@ const MainForm = () => {
}, [manifests]);
if (redirect.length > 0) {
return <Redirect to={redirect} />;
return <Redirect to={redirect}/>;
}
return (
@@ -127,13 +139,21 @@ const MainForm = () => {
<form className={classes.form} noValidate action="{onSubmit}">
<Typography variant="body2">Created {createDate}.</Typography>
<Grid container className={classes.root} spacing={2}>
<Grid item md={4}>
<Grid item md={2}>
<div
className={classes.labelInline}
>{`${selected.length} Selected`}</div>
</Grid>
<Grid item md={2} className={classes.textCenterAlign}>
<FormControlLabel control={<Switch
checked={updateType === CAR_UPDATE}
onChange={handleChange}
inputProps={{'aria-label': 'controlled'}}
/>} label="Car(default) or Fleet"/>
</Grid>
<Grid item md={4} className={classes.textCenterAlign}>
<SearchField classes={classes} onSearch={handleSearch} />
<SearchField classes={classes} onSearch={handleSearch}/>
</Grid>
<Grid item md={4} className={classes.textRightAlign}>
<Button
@@ -148,28 +168,39 @@ const MainForm = () => {
</Button>
</Grid>
</Grid>
<CarSelectionTable
classes={classes}
token={token}
multiSelect={true}
search={{ search }}
selected={selected}
onSelect={handleSelect}
onSelectAll={handleSelectAll}
/>
{updateType === CAR_UPDATE ?
<VehicleProvider>
<CarSelectionTable
classes={classes}
token={token}
multiSelect={true}
search={{search}}
selected={selected}
onSelect={handleSelect}
onSelectAll={handleSelectAll}
/></VehicleProvider> :
<FleetProvider>
<FleetSelectionTable
classes={classes}
token={token}
multiSelect={true}
search={{search}}
selected={selected}
onSelect={handleSelect}
onSelectAll={handleSelectAll}/>
</FleetProvider>
}
</form>
</div>
);
};
const ManifestDeployForm = () => (
<VehicleProvider>
<ManifestsProvider>
<CarUpdatesProvider>
<MainForm />
</CarUpdatesProvider>
</ManifestsProvider>
</VehicleProvider>
<ManifestsProvider>
<CarUpdatesProvider>
<MainForm/>
</CarUpdatesProvider>
</ManifestsProvider>
);
export default ManifestDeployForm;

4
src/components/Manifest/Details/__snapshots__/index.test.jsx.snap
View File

@@ -107,7 +107,7 @@ Object {
</div>
<ul>
<li>
Test Deployment 1.0.100
Test Deployment 1.0.100 [standard]
</li>
<li>
Deployment folder test https://releasenotes.com
@@ -162,7 +162,7 @@ Object {
</div>
<ul>
<li>
Test Deployment 1.0.100
Test Deployment 1.0.100 [standard]
</li>
<li>
Deployment folder test https://releasenotes.com

13
src/components/Manifest/Details/index.jsx
View File

@@ -11,13 +11,18 @@ const getMemoryRegion = (label, region) => {
return `, ${label}: [Offset: ${region.offset}, Length: ${region.length}]`;
};
const getFilename = (url) => {
const items = url.split("/");
return items[items.length - 1];
};
const ECUFileList = (files) => {
if (!files || files.length === 0) return "No files";
return (
<ul>
{files.map((file) => (
<li key={file.filename}>
<a href={file.url}>{file.filename}</a>
<li key={file.file_id}>
<a href={file.url}>{getFilename(file.url)}</a>
{`, File ID: ${file.file_id}, Type: ${file.type}, Download Size: ${
file.file_size
}, CRC32: ${file.checksum ?? "00000000"}
@@ -99,7 +104,9 @@ const ManifestDetails = ({ opened }) => {
Hide Details
</div>
<ul>
<li>{`${manifest.name} ${manifest.version}`}</li>
<li>{`${manifest.name} ${manifest.version} [${
manifest.type || "standard"
}]`}</li>
<li>{`${manifest.description} ${manifest.release_notes}`}</li>
<li>ECUs: {ECUList(manifest.ecu_updates)}</li>
</ul>

6
src/components/Manifest/List/index.jsx
View File

@@ -28,7 +28,8 @@ import SearchField from "../../Controls/SearchField";
import { logger } from "../../../services/monitoring";
import ECUList from "../../Controls/ECUList";
import { Roles, hasRole } from "../../../utils/roles";
import {useLocalStorage} from "../../useLocalStorage";
import { useLocalStorage } from "../../useLocalStorage";
import { TYPE_MANIFEST_SOFTWARE } from "../../../utils/manifest_types";
const tableColumns = [
{
@@ -57,7 +58,7 @@ const tableColumns = [
},
];
const PAGE_SIZE="MANIFEST_LIST_PAGE_SIZE";
const PAGE_SIZE = "MANIFEST_LIST_PAGE_SIZE";
const MainForm = () => {
const classes = useStyles();
@@ -103,6 +104,7 @@ const MainForm = () => {
limit: pageSize,
offset: pageSize * pageIndex,
order: `${orderBy} ${order}`,
manifest_type: TYPE_MANIFEST_SOFTWARE,
search,
},
token

9
src/components/Routes/SiteRoutes.jsx
View File

@@ -28,7 +28,6 @@ const Home = React.lazy(() => import("../Home"));
const Manifests = React.lazy(() => import("../Manifest/List"));
const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
const ManifestStatus = React.lazy(() => import("../Manifest/Status"));
const ManifestCreate = React.lazy(() => import("../Manifest/Create"));
const PageNotFound = React.lazy(() => import("../404"));
const SSOForm = React.lazy(() => import("../SSOForm"));
const VehicleAddForm = React.lazy(() => import("../Cars/Add"));
@@ -137,14 +136,6 @@ const SiteRoutes = () => {
groups={groups}
roles={[Roles.READ, Roles.CREATE]}
/>
<AuthRoute
path="/package-create"
render={() => <ManifestCreate />}
type={TYPES.PROTECTED}
token={token}
groups={groups}
roles={[Roles.CREATE]}
/>
<AuthRoute
path="/package-deploy/:manifest_id"
render={() => <ManifestDeploy />}

24
src/components/Suppliers/Details/__snapshots__/index.test.js.snap
View File

@@ -52,10 +52,10 @@ exports[`Supplier page Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Contact
@@ -98,10 +98,10 @@ exports[`Supplier page Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Company
@@ -144,10 +144,10 @@ exports[`Supplier page Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Address
@@ -190,10 +190,10 @@ exports[`Supplier page Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Telephone
@@ -236,10 +236,10 @@ exports[`Supplier page Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
Program
@@ -282,10 +282,10 @@ exports[`Supplier page Render 1`] = `
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-66 PrivateNotchedOutline-legendNotched-67"
class="PrivateNotchedOutline-legendLabelled-0 PrivateNotchedOutline-legendNotched-0"
>
<span>
ECUs

64
src/components/Suppliers/List/__snapshots__/index.test.jsx.snap
View File

@@ -190,6 +190,52 @@ exports[`Suppliers page Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Sign In
<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"
>
Keys
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody
@@ -239,6 +285,12 @@ exports[`Suppliers page Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
</tr>
<tr
class="MuiTableRow-root"
@@ -284,6 +336,12 @@ exports[`Suppliers page Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
</tr>
<tr
class="MuiTableRow-root"
@@ -329,6 +387,12 @@ exports[`Suppliers page Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
/>
</tr>
</tbody>
<tfoot

18
src/components/Suppliers/Table/index.jsx
View File

@@ -16,7 +16,7 @@ import { useStatusContext } from "../../Contexts/StatusContext";
import { LocalDateTimeString } from "../../../utils/dates";
import TableHeaderSortable from "../../Table/HeaderSortable";
import { logger } from "../../../services/monitoring";
import {useLocalStorage} from "../../useLocalStorage";
import { useLocalStorage } from "../../useLocalStorage";
const tableColumns = [
{
@@ -47,9 +47,17 @@ const tableColumns = [
id: "activated_at",
label: "Activated",
},
{
id: "signin_at",
label: "Sign In",
},
{
id: "keys_at",
label: "Keys",
},
];
const PAGE_SIZE="SUPPLIER_TABLE_PAGE_SIZE";
const PAGE_SIZE = "SUPPLIER_TABLE_PAGE_SIZE";
const SupplierTable = (props) => {
const { token, classes } = props;
@@ -137,6 +145,12 @@ const SupplierTable = (props) => {
<TableCell align="center">
{LocalDateTimeString(row.activated)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.signin_at)}
</TableCell>
<TableCell align="center">
{LocalDateTimeString(row.keys_at)}
</TableCell>
</TableRow>
);
})}

6
src/services/__mocks__/updatesAPI.js
View File

@@ -5,6 +5,12 @@ const updatesAPI = {
return data;
},
createFleetUpdates: async (data, token) => {
if (!data.id) data.id = 0;
data.id++;
return data;
},
getCarUpdates: async (filter, token) => {
return { data: [] };
},

3
src/services/__mocks__/vehiclesAPI.js
View File

@@ -94,11 +94,10 @@ const vehiclesAPI = {
data: [2021, 2022],
};
},
sendCommand: async (vin, command, parameters) => {
sendCommand: async (vin, command) => {
return {
vin,
command,
parameters,
};
},
updateVehicle: async (vin, vehicle) => {

12
src/services/certificatesAPI.js
View File

@@ -18,6 +18,18 @@ const certificatesAPI = {
})
.then(fetchRespHandler)
.catch(errorHandler),
createAftersales: async (data, token) =>
fetch(`${API_ENDPOINT}/create-aftersales`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
getAuthHeaderOptions(token)
),
body: JSON.stringify(data),
})
.then(fetchRespHandler)
.catch(errorHandler),
};
export default certificatesAPI;

99
src/services/commands.js
View File

@@ -1,81 +1,26 @@
const Locks = [
const Commands = [
{value: "doors_lock", label: "Lock doors"},
{value: "doors_unlock", label: "Unlock doors"},
{value: "vent_windows", label: "Vent windows"},
{value: "close_windows", label: "Close windows"},
{value: "california_mode", label: "California mode"},
{value: "trunk_open", label: "Open trunk"},
{value: "trunk_close", label: "Close trunk "},
{value: "flash_headlights", label: "Flash headlights"},
{value: "alert", label: "Alert"},
{value: "temp_cabin", label: "Set cabin temperature"},
{
value: "right_front",
label: "Front right door",
},{
value: "left_front",
label: "Front left door",
},{
value: "right_rear",
label: "Rear right door",
},{
value: "left_rear",
label: "Rear left door",
},{
value: "trunk",
label: "Trunk",
value: "temp_cabin",
label: "Set cabin temperature for period",
params: {
data: ""
},
},
];
const Windows = [
{
value: "right_front",
label: "Front right window",
},{
value: "left_front",
label: "Front left window",
},{
value: "right_rear",
label: "Rear right window",
},{
value: "left_rear",
label: "Rear left window",
},
];
const Commands = [{
value: "lock",
label: "Lock door",
parameters: Locks,
},
{
value: "unlock",
label: "Unlock door",
parameters: Locks,
},{
value: "open",
label: "Open window",
parameters: Windows,
},
{
value: "close",
label: "Close window",
parameters: Windows,
},
{
value: "ecu",
label: "ECU Versions",
},
{
value: "log",
label: "Log level",
parameters: [
{
value: "info",
label: "Info",
},
{
value: "debug",
label: "Debug",
},
{
value: "trace",
label: "Trace",
},
],
},{
value: "headlights",
label: "Flash headlights",
}];
{value: "defrost", label: "Defrost"},
{value: "driver_seat_preheat", label: "Driver seat preheat"},
{value: "passenger_seat_preheat", label: "Preheat passenger seat"},
{value: "steering_wheel_preheat", label: "Preheat Steering wheel"},
{value: "precondition", label: "Precondition"},
{value: "charging", label: "Charging"}]
export default Commands;

27
src/services/updatesAPI.js
View File

@@ -7,18 +7,23 @@ import {
const API_ENDPOINT = process.env.REACT_APP_UPLOAD_SERVICE_URL;
const createDeployUpdatesClosure = (suffix) => {
return async (data, token) => fetch(`${API_ENDPOINT}/${suffix}`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
getAuthHeaderOptions(token)
),
body: JSON.stringify(data),
})
.then(fetchRespHandler)
.catch(errorHandler)
}
const updatesAPI = {
createCarUpdates: async (data, token) =>
fetch(`${API_ENDPOINT}/carupdate`, {
method: "POST",
headers: Object.assign(
{ "Content-Type": "application/json" },
getAuthHeaderOptions(token)
),
body: JSON.stringify(data),
})
.then(fetchRespHandler)
.catch(errorHandler),
createFleetUpdates: createDeployUpdatesClosure("fleetupdate"),
createCarUpdates: createDeployUpdatesClosure("carupdate"),
getCarUpdateLog: async (query, token) => {
const u = addQueryParams(`${API_ENDPOINT}/carupdateslog`, query);

5
src/services/vehiclesAPI.js
View File

@@ -125,7 +125,7 @@ const vehiclesAPI = {
.then(fetchRespHandler)
.catch(errorHandler),
sendCommand: async (vins, command, parameters, token) =>
sendCommand: async (vins, command, token) =>
fetch(`${API_ENDPOINT}/vehiclecommand`, {
method: "POST",
headers: Object.assign(
@@ -134,8 +134,7 @@ const vehiclesAPI = {
),
body: JSON.stringify({
vins,
command,
parameters,
...command,
}),
})
.then(fetchRespHandler)

2
src/utils/manifest_types.js Normal file
View File

@@ -0,0 +1,2 @@
export const TYPE_MANIFEST_SOFTWARE = 1;
export const TYPE_MANIFEST_CONFIG = 2;

18
src/utils/snapshot.js
View File

@@ -1,25 +1,13 @@
const rxMakeStyles = /makeStyles-(\w+)-(\d+)/gi;
const rxMUIStyles = /mui-\d*/g;
const rxStyles = /(mui|MuiBox-root|makeStyles|Private)([^\s]*)-\d+/g;
const snapshotSerializers = [
{
test: (val) => {
return val && typeof val === "string" && val.indexOf("mui-") > -1;
return val && typeof val === "string" && val.search(rxStyles) > -1;
},
print: (val) => {
let str = val;
str = str.replace(rxMUIStyles, "mui-0");
return `"${str}"`;
},
},
{
test: (val) => {
return val && typeof val === "string" && val.search(rxMakeStyles) > -1;
},
print: (val) => {
let str = val;
str = str.replace(rxMakeStyles, "makeStyles-$1-0");
str = str.replace(rxStyles, "$1$2-0");
return `"${str}"`;
},