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

CEC-3514 create can self serve page (#288)

Browse Source 
* first push

* fix snapshot

* remove unused vars

* update snap

* remove some console logs

* Remove snapshot

* Update

* CEC-3770 Update cert expire text (#282)

* CEC-3577: fetch T.Rex log from the cloud (#283)

* CEC-3577: fetch T.Rex log from the cloud

* tabs?

* CSS

* smells

* fix smells and warnings

* suggestions

* CEC-3577 Style tweak (#284)

* CEC-3577: trex logs (#285)

* CEC-3577: trex logs

add filtering
add progress bar for log fetching
always fetch all the logs
request canceling

* don't hide progress

* CEC-3751, CEC-3478 misc window status and invalid location value (#287)

* CEC-3751 misc window status
CEC-3478 invalid location value

* Fix snapshot
Update browser list

* merge develop update snap

* resolve comments

* add date and time picker seperately, use checkbox for dropdown

* added verification for date and fixed time picker

* fix snap

* resolve comments

* removed small bug

* tweak layout

* added snap shot test for can signals

* small change

* Fix test

* fix sms snap

* change function name

* mock can signals api

* resolved comments

* fix ci

* Clean up

---------

Co-authored-by: jwu-fisker <jwu@fiskerinc.com>
Co-authored-by: John Wu <76966357+jwu-fisker@users.noreply.github.com>
Co-authored-by: Eduard Voronkin <116690094+eduardvoronkin@users.noreply.github.com>
This commit is contained in:
das31
2023-03-10 00:13:27 -05:00
committed by GitHub
parent 7b6a2bfa11
commit 324e3d2b91
21 changed files with 1059 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

374
src/components/CANSelfServe/SelfServe/__snapshots__/index.test.jsx.snap Normal file
View File

@@ -0,0 +1,374 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render Render 1`] = `
<div>
<div
data-testid="mocked-statusprovider"
>
<div
data-testid="mocked-userprovider"
>
<div
class="makeStyles-paper-0"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 MuiGrid-justify-content-xs-center"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-justify-content-xs-space-between"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
data-shrink="true"
for="date-picker-inline"
id="date-picker-inline-label"
>
Date From
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
id="date-picker-inline"
required=""
type="text"
value="03/31/2023"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
aria-label="change date"
class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
data-shrink="true"
for="time-picker"
id="time-picker-label"
>
Time From
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
id="time-picker"
required=""
type="text"
value="06:30 AM"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
aria-label="change time"
class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
data-shrink="true"
for="date-picker-inline"
id="date-picker-inline-label"
>
Date To
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
id="date-picker-inline"
required=""
type="text"
value="04/01/2023"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
aria-label="change date"
class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 MuiGrid-grid-md-3"
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled Mui-required Mui-required"
data-shrink="true"
for="time-picker"
id="time-picker-label"
>
Time To
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedEnd"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
id="time-picker"
required=""
type="text"
value="06:30 AM"
/>
<div
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
>
<button
aria-label="change time"
class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
<span
class="MuiIconButton-label"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
>
<div
class="MuiFormControl-root MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-required Mui-required"
data-shrink="false"
id="select-can-signals-label"
>
Select CAN signals
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
inputvariant="outlined"
>
<div
aria-haspopup="listbox"
aria-labelledby="select-can-signals-label select-can-signals"
class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input"
id="select-can-signals"
role="button"
tabindex="0"
>
<span>
​
</span>
</div>
<input
aria-hidden="true"
class="MuiSelect-nativeInput"
required=""
tabindex="-1"
value=""
/>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSelect-icon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M7 10l5 5 5-5z"
/>
</svg>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary Mui-disabled MuiButton-fullWidth Mui-disabled"
disabled=""
tabindex="-1"
type="button"
>
<span
class="MuiButton-label"
>
Submit
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;

197
src/components/CANSelfServe/SelfServe/index.jsx Normal file
View File

@@ -0,0 +1,197 @@
import DateFnsUtils from '@date-io/date-fns';
import { Button, Checkbox, Chip, CircularProgress, FormControl, Grid, InputLabel, ListItemText, MenuItem, Select } from "@material-ui/core";
import { KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import React, { useEffect, useState } from "react";
import { logger } from "../../../services/monitoring";
import { CANSignalsExportProvider, useCANSignalsExportContext } from "../../Contexts/CANSignalsExportContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import useStyles from "../../useStyles";
const MainForm = ({ id }) => {
const classes = useStyles();
const { setMessage } = useStatusContext();
const { busy, canSignals, getCANSignalList, getDynamicColumnCANSignals } = useCANSignalsExportContext();
const [selectedStartDate, setSelectedStartDate] = useState(new Date(Date.now() - 24 * 60 * 60 * 1000));
const [selectedEndDate, setSelectedEndDate] = useState(new Date());
const [selectedCanSignals, setSelectedCanSignals] = useState([]);
const {
token: {
idToken: { jwtToken: token },
},
} = useUserContext();
const handleSubmit = async (event) => {
event.preventDefault();
let timestamp_start = Date.parse(selectedStartDate.toUTCString()) / 1000
let timestamp_end = Date.parse(selectedEndDate.toUTCString()) / 1000
try {
await getDynamicColumnCANSignals(id, timestamp_start, timestamp_end, selectedCanSignals, token)
} catch(e){
setMessage(e.message);
logger.error(e.stack)
}
};
const isSubmitDisabled = !selectedStartDate || !selectedEndDate || selectedCanSignals.length === 0;
useEffect(() => {
(async () => {
try {
if (!token) return;
await getCANSignalList(token);
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token]);
const handleDateChange = (value, dateType) => {
const newDate = new Date(value);
const oldDate = dateType === "start" ? selectedStartDate || new Date() : selectedEndDate || new Date();
newDate.setHours(oldDate.getHours());
newDate.setMinutes(oldDate.getMinutes());
newDate.setSeconds(oldDate.getSeconds());
if (dateType === "start") {
setSelectedStartDate(newDate);
} else {
setSelectedEndDate(newDate);
}
};
const handleTimeFromChange = (value) => {
setSelectedStartDate(value);
};
const handleTimeToChange = (value) => {
setSelectedEndDate(value);
};
const handleSelectedItemsChange = (event) => {
setSelectedCanSignals(event.target.value);
};
return (
<div className={classes.paper}>
<Grid container spacing={3} justifyContent="center">
<Grid item xs={12}>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justifyContent="space-between">
<Grid item xs={6} md={3}>
<KeyboardDatePicker
required
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date From"
value={selectedStartDate}
onChange={(value) => handleDateChange(value, "start")}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</Grid>
<Grid item xs={6} md={3}>
<KeyboardTimePicker
required
margin="normal"
variant="inline"
id="time-picker"
label="Time From"
value={selectedStartDate}
onChange={handleTimeFromChange}
KeyboardButtonProps={{
'aria-label': 'change time',
}}
/>
</Grid>
<Grid item xs={6} md={3}>
<KeyboardDatePicker
required
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date To"
value={selectedEndDate}
onChange={(value) => handleDateChange(value, "end")}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</Grid>
<Grid item xs={6} md={3}>
<KeyboardTimePicker
required
margin="normal"
id="time-picker"
variant="inline"
label="Time To"
value={selectedEndDate}
onChange={handleTimeToChange}
KeyboardButtonProps={{
'aria-label': 'change time',
}}
/>
</Grid>
</Grid>
</MuiPickersUtilsProvider>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth required>
<InputLabel id="select-can-signals-label">Select CAN signals</InputLabel>
<Select
labelId="select-can-signals-label"
id="select-can-signals"
multiple
value={selectedCanSignals}
onChange={handleSelectedItemsChange}
fullWidth
inputvariant="outlined"
renderValue={(selected) => (
<div className={classes.chips}>
{selected.map((value) => (
<Chip key={value} label={value} className={classes.chip} />
))}
</div>
)}
>
{canSignals.map((signal) => (
<MenuItem key={signal.signal_name} value={signal.signal_name}>
<Checkbox checked={selectedCanSignals.indexOf(signal.signal_name) > -1} />
<ListItemText primary={signal.signal_name} />
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item xs={12}>
<Button
variant="contained"
color="primary"
onClick={handleSubmit}
disabled={isSubmitDisabled || busy}
fullWidth
>
{busy ? <CircularProgress size={24} /> : "Submit"}
</Button>
</Grid>
</Grid>
</div>
);
};
const CANSignalExport = (props) => (
<CANSignalsExportProvider>
<MainForm {...props} />
</CANSignalsExportProvider>
);
export default CANSignalExport;

42
src/components/CANSelfServe/SelfServe/index.test.jsx Normal file
View File

@@ -0,0 +1,42 @@
jest.mock("../../Contexts/StatusContext");
jest.mock("../../Contexts/UserContext");
jest.mock("../../../services/CANSignalAPI");
jest.useFakeTimers();
jest.setSystemTime(new Date(2023, 3, 1, 6, 30, 45, 100));
import { render, waitFor } from "@testing-library/react";
import { BrowserRouter } from "react-router-dom";
import addSnapshotSerializer from "../../../utils/snapshot";
import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
import { StatusProvider } from "../../Contexts/StatusContext";
import { setToken, UserProvider } from "../../Contexts/UserContext";
import CANSignalExport from "./index";
const renderCANSignalExport = async () => {
const { container } = render(
<StatusProvider>
<UserProvider>
<BrowserRouter>
<CANSignalExport id="TESTVIN1234567890" />
</BrowserRouter>
</UserProvider>
</StatusProvider>
);
await waitFor(() => {
/* render */
});
return container;
};
describe("Render", () => {
beforeAll(() => {
addSnapshotSerializer(expect);
});
it("Render", async () => {
setToken(TEST_AUTH_OBJECT_FISKER);
const container = await renderCANSignalExport();
expect(container).toMatchSnapshot();
});
});

21
src/components/CANSelfServe/SelfServeTab.jsx Normal file
View File

@@ -0,0 +1,21 @@
import { Typography } from "@material-ui/core";
import clsx from "clsx";
import React from "react";
import { useParams } from "react-router";
import useStyles from "../useStyles";
import SelfServe from "./SelfServe";
const SelfServeTab = () => {
const { vin } = useParams();
const classes = useStyles();
return (
<div className={clsx(classes.paper, classes.tableSize)}>
<Typography variant="h6">Can Signals Self Serve</Typography>
<SelfServe id={vin} classes={classes} />
</div >
);
};
export default SelfServeTab;