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

CEC-3086 Allow creating filters without interval (#237)

Browse Source
This commit is contained in:
arpanetus
2022-11-22 04:22:36 +06:00
committed by GitHub
parent 9888ab8a6c
commit 1ecc8943a3
15 changed files with 430 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,53 +22,6 @@ exports[`CANFiltersAdd Render 1`] = `
class="makeStyles-form-0"
novalidate=""
>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
data-shrink="false"
for="vin"
id="vin-label"
>
VIN
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="vin"
maxlength="255"
name="vin"
readonly=""
required=""
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN
 *
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
@@ -152,6 +105,43 @@ exports[`CANFiltersAdd Render 1`] = `
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="edgeMask"
id="edgeMask-label"
>
EdgeMask (hex representation)
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="edgeMask"
maxlength="255"
name="edgeMask"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
EdgeMask (hex representation)
</span>
</legend>
</fieldset>
</div>
</div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
tabindex="0"

73
src/components/CANFilter/Add/index.jsx
View File

@@ -1,7 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useState } from "react";
import { Redirect } from "react-router";
import { useLocation } from "react-router-dom";
import { Button, TextField } from "@material-ui/core";
import {
CANFiltersProvider,
@@ -11,6 +10,7 @@ import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { logger } from "../../../services/monitoring";
import {CANFilterFragment} from "../../CANFilterEditFragment";
const MainForm = () => {
@@ -19,8 +19,9 @@ const MainForm = () => {
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [redirect, setRedirect] = useState(null);
const classes = useStyles();
const canIdEl = useRef(null);
const intervalEl = useRef(null);
const [canId, setCanId] = useState(null);
const [interval, setInterval] = useState("");
const [edgeMask, setEdgeMask] = useState("");
const queries = new URLSearchParams(useLocation().search);
const vin = queries.get("vin") ?? ""
@@ -42,8 +43,9 @@ const MainForm = () => {
try {
event.preventDefault();
const formData = {
can_id: canIdEl.current.value,
interval: parseInt(intervalEl.current.value)
can_id: canId,
interval: (interval == null || interval === "0") ? null:interval,
edge_mask: edgeMask === "" ? null : edgeMask,
};
const result = await addFilter(vin, formData, token);
if (!result || result.error) return;
@@ -63,56 +65,17 @@ const MainForm = () => {
return (
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<TextField
id="vin"
name="vin"
label="VIN"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={vin}
required
fullWidth
<CANFilterFragment
vin={vin}
canId={canId}
setCanId={setCanId}
interval={interval}
setInterval={setInterval}
edgeMask={edgeMask}
setEdgeMask={setEdgeMask}
busy={busy}
onSubmit={onSubmit}
/>
<TextField
id="canId"
name="canId"
label="CAN ID"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
required
fullWidth
inputRef={canIdEl}
/>
<TextField
id="interval"
name="interval"
label="Interval (ms)"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
fullWidth
inputRef={intervalEl}
/>
<Button
type="submit"
disabled={busy}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
Submit
</Button>
</form>
</div>
);

11
src/components/CANFilter/Table/index.jsx
View File

@@ -137,9 +137,16 @@ const MainForm = ({ vin }) => {
let actions = [];
if (hasRole(groups, Permissions.FiskerCreate, providers)) {
let link = `/filter-update?vin=${vin}&can_id=${row.can_id}`;
if (row.interval || row.interval===0) {
link = link + `&interval=${row.interval}`
}
if (row.edge_mask) {
link = link + `&edge_mask=${row.edge_mask}`
}
actions.push({
tip: `Update "${row.can_id}"`,
link: `/filter-update?vin=${vin}&can_id=${row.can_id}&interval=${row.interval}`,
link,
icon: <EditIcon aria-label={`Update ${row.can_id}`} />,
});
}
@@ -195,7 +202,7 @@ const MainForm = ({ vin }) => {
/>
<TableBody>
{filters.map((row) => (
<TableRow key={row.can_id}>
<TableRow key={row.fleet?row.can_id+row.fleet:row.can_id}>
<TableCell align="center">{row.can_id}</TableCell>
<TableCell align="center">{row.interval}</TableCell>
<TableCell align="center">

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

@@ -26,54 +26,7 @@ exports[`CANFiltersUpdate Render 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
data-shrink="false"
for="vin"
id="vin-label"
>
VIN
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="vin"
maxlength="255"
name="vin"
readonly=""
required=""
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
VIN
 *
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
data-shrink="false"
for="canId"
id="canId-label"
@@ -88,15 +41,15 @@ exports[`CANFiltersUpdate Render 1`] = `
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
disabled=""
id="canId"
maxlength="255"
name="canId"
readonly=""
required=""
type="text"
value=""
@@ -120,19 +73,12 @@ exports[`CANFiltersUpdate Render 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="interval"
id="interval-label"
>
Interval (ms)
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -143,7 +89,6 @@ exports[`CANFiltersUpdate Render 1`] = `
id="interval"
maxlength="255"
name="interval"
required=""
type="text"
value=""
/>
@@ -156,7 +101,43 @@ exports[`CANFiltersUpdate Render 1`] = `
>
<span>
Interval (ms)
 *
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="edgeMask"
id="edgeMask-label"
>
EdgeMask (hex representation)
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="edgeMask"
maxlength="255"
name="edgeMask"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
EdgeMask (hex representation)
</span>
</legend>
</fieldset>

74
src/components/CANFilter/Update/index.jsx
View File

@@ -1,7 +1,6 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useState } from "react";
import { Redirect } from "react-router";
import { useLocation } from "react-router-dom";
import { Button, TextField } from "@material-ui/core";
import {
CANFiltersProvider,
@@ -11,6 +10,7 @@ import { useUserContext } from "../../Contexts/UserContext";
import { useStatusContext } from "../../Contexts/StatusContext";
import useStyles from "../../useStyles";
import { logger } from "../../../services/monitoring";
import {CANFilterFragment} from "../../CANFilterEditFragment";
const MainForm = () => {
@@ -19,12 +19,12 @@ const MainForm = () => {
const { setMessage, setTitle, setSitePath } = useStatusContext();
const [redirect, setRedirect] = useState(null);
const classes = useStyles();
const intervalEl = useRef(null);
const queries = new URLSearchParams(useLocation().search);
const vin = queries.get("vin") ?? ""
const canID = queries.get("can_id") ?? ""
const interval = queries.get("interval") ?? ""
// const edge_mask = queries.get("edge_mask") ?? ""
const [interval, setInterval] = useState(queries.get("interval") ?? "");
const [edgeMask, setEdgeMask] = useState(queries.get("edge_mask") ?? "");
useEffect(() => {
setTitle("Update CAN Filter");
@@ -45,7 +45,8 @@ const MainForm = () => {
event.preventDefault();
const formData = {
can_id: canID,
interval: parseInt(intervalEl.current.value)
interval: interval,
edge_mask: edgeMask,
};
const result = await updateFilter(vin, canID, formData, token);
if (!result || result.error) return;
@@ -65,59 +66,16 @@ const MainForm = () => {
return (
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<TextField
id="vin"
name="vin"
label="VIN"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={vin}
required
fullWidth
<CANFilterFragment
vin={vin}
canId={canID}
interval={interval}
setInterval={setInterval}
edgeMask={edgeMask}
setEdgeMask={setEdgeMask}
busy={busy}
onSubmit={onSubmit}
/>
<TextField
id="canId"
name="canId"
label="CAN ID"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={canID}
required
fullWidth
/>
<TextField
id="interval"
name="interval"
label="Interval (ms)"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
defaultValue={interval}
required
fullWidth
inputRef={intervalEl}
/>
<Button
type="submit"
disabled={busy}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
Submit
</Button>
</form>
</div>
);

122
src/components/CANFilterEditFragment/index.jsx Normal file
View File

@@ -0,0 +1,122 @@
import React from 'react';
import {Button, TextField} from "@material-ui/core";
import useStyles from "../useStyles";
export const CANFilterFragment = (
{
vin,
fleet,
canId,
setCanId,
edgeMask,
setEdgeMask,
interval,
setInterval,
busy,
onSubmit,
}) => {
const classes = useStyles();
const FirstField = () => {
if (vin) {
return <TextField
id="vin"
name="vin"
label="VIN"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={vin}
required
fullWidth
/>
}
if (fleet) {
return <TextField
id="name"
name="name"
label="Fleet Name"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={fleet}
required
fullWidth
/>
}
}
const canProps = setCanId ? {
value: canId,
onChange: (event) => setCanId(event.target.value)
} : {
value: canId,
disabled: true,
}
return (
<React.Fragment>
{FirstField()}
<TextField
id="canId"
name="canId"
label="CAN ID"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
required
fullWidth
{...canProps}
/>
<TextField
id="interval"
name="interval"
label="Interval (ms)"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
fullWidth
value={interval}
disabled={!(edgeMask == null || edgeMask === "")}
onChange={async (event) => setInterval(event.target.value)}
/>
<TextField
id="edgeMask"
name="edgeMask"
label="EdgeMask (hex representation)"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
fullWidth
value={edgeMask}
disabled={!(interval == null || interval === "" || interval === '0' || interval === 0)}
onChange={async (event) => setEdgeMask(event.target.value)}
/>
<Button
type="submit"
disabled={busy}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
Submit
</Button>
</React.Fragment>
)
}

22
src/components/Contexts/CANFiltersContext.jsx
View File

@@ -1,5 +1,6 @@
import React, { useContext, useState } from "react";
import api from "../../services/CANFiltersAPI";
import { validateCANID, validateFilter } from "../../utils/validationSupplier";
const CANFiltersContext = React.createContext();
@@ -50,7 +51,6 @@ export const CANFiltersProvider = ({ children }) => {
setBusy(true);
validateVIN(vin);
validateID(canID);
validateFilter(filter);
const result = await api.updateFilter(vin, canID, filter, token);
@@ -68,7 +68,7 @@ export const CANFiltersProvider = ({ children }) => {
setBusy(true);
validateVIN(vin);
validateID(canID);
validateCANID(canID);
const result = await api.deleteFilter(vin, canID, token);
if (result.error) {
@@ -104,24 +104,6 @@ const validateVIN = (vin) => {
if (vin == null || vin.length !== 17) {
throw new Error("Invalid VIN");
}
}
const validateID = (can_id) => {
if (can_id == null || can_id === "") {
throw new Error("CAN ID required");
}
}
const validateFilter = (filter) => {
if (filter == null) {
throw new Error("No filter data");
}
validateID(filter.can_id)
if (filter.interval == null) {
throw new Error("Interval required");
}
};
export const useCANFiltersContext = () => useContext(CANFiltersContext);

18
src/components/Contexts/CANFiltersContext.test.jsx
View File

@@ -118,7 +118,7 @@ describe("CANFiltersContext", () => {
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("CAN ID required", "false");
checkBaseResults("Invalid CAN ID", "false");
});
it("addFilter", async () => {
@@ -195,7 +195,7 @@ describe("CANFiltersContext", () => {
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("CAN ID required", "false");
checkBaseResults("Invalid CAN ID", "false");
});
it("updateFilter", async () => {
@@ -228,10 +228,6 @@ describe("CANFiltersContext", () => {
data-testid="deleteFilterNull"
onClick={() => deleteF(null)}
/>
<button
data-testid="deleteFilterNonexistent"
onClick={() => deleteF(-1)}
/>
<button data-testid="deleteFilter" onClick={() => deleteF(123)} />
</>
);
@@ -258,15 +254,7 @@ describe("CANFiltersContext", () => {
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("CAN ID required", "false");
});
it("deleteFilterNonexistent", async () => {
fireEvent.click(screen.getByTestId("deleteFilterNonexistent"));
await waitFor(() =>
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
);
checkBaseResults("", "false");
checkBaseResults("Invalid CAN ID", "false");
});
it("deleteFilter", async () => {

28
src/components/Contexts/FleetContext.jsx
View File

@@ -1,5 +1,6 @@
import React, { useContext, useState } from "react";
import api from "../../services/fleetsAPI";
import { validateCANID, validateFilter, validateVIN } from "../../utils/validationSupplier";
const FleetContext = React.createContext();
@@ -200,7 +201,6 @@ export const FleetProvider = ({ children }) => {
setBusy(true);
validateFleetName(name);
validateCANID(can_id);
validateFilter(filter);
const result = await api.updateFleetCANFilter(name, can_id, filter, token);
@@ -278,30 +278,6 @@ const validateFleetName = (name) => {
if (name == null || !/^[\w-]+$/.test(name)) {
throw new Error("Invalid name");
}
}
const validateVIN = (vin) => {
if (vin == null || vin.length !== 17) {
throw new Error("Invalid VIN");
}
}
const validateFilter = (filter) => {
if (filter == null) {
throw new Error("No CAN filter data");
}
validateCANID(filter.can_id)
if (filter.interval == null || !/^\d+$/.test(filter.interval)) {
throw new Error("Invalid interval");
}
}
const validateCANID = (can_id) => {
if (can_id == null || !/^\d+(-\d+)?$/.test(can_id)) {
throw new Error("Invalid CAN ID");
}
}
};
export const useFleetContext = () => useContext(FleetContext);

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

@@ -152,6 +152,43 @@ exports[`FleetCANFilterAdd Render 1`] = `
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="edgeMask"
id="edgeMask-label"
>
EdgeMask (hex representation)
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="edgeMask"
maxlength="255"
name="edgeMask"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
EdgeMask (hex representation)
</span>
</legend>
</fieldset>
</div>
</div>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-0 MuiButton-containedPrimary MuiButton-fullWidth"
tabindex="0"

61
src/components/Fleets/Status/CANFilters/Add/index.jsx
View File

@@ -1,12 +1,13 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useState } from "react";
import { Redirect, useParams } from "react-router";
import { Button, TextField } from "@material-ui/core";
import { TextField } from "@material-ui/core";
import { useUserContext } from "../../../../Contexts/UserContext";
import { useStatusContext } from "../../../../Contexts/StatusContext";
import { useFleetContext, FleetProvider } from "../../../../Contexts/FleetContext";
import useStyles from "../../../../useStyles";
import { logger } from "../../../../../services/monitoring";
import { CANFilterFragment } from "../../../../CANFilterEditFragment";
const MainForm = () => {
@@ -15,8 +16,9 @@ const MainForm = () => {
const { addFleetCANFilter, busy } = useFleetContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
const classes = useStyles();
const canIdEl = useRef(null);
const intervalEl = useRef(null);
const [canId, setCanId] = useState(null);
const [interval, setInterval] = useState("");
const [edgeMask, setEdgeMask] = useState("");
const [redirect, setRedirect] = useState(null);
useEffect(() => {
@@ -41,9 +43,11 @@ const MainForm = () => {
const onSubmit = async (event) => {
try {
event.preventDefault();
const formData = {
can_id: canIdEl.current.value,
interval: parseInt(intervalEl.current.value)
can_id: canId,
interval: (interval == null || interval === "") ? null : interval,
edge_mask: edgeMask === "" ? null : edgeMask,
};
const result = await addFleetCANFilter(name, formData, token);
if (!result || result.error) return;
@@ -77,42 +81,17 @@ const MainForm = () => {
required
fullWidth
/>
<TextField
id="canId"
name="canId"
label="CAN ID"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
required
fullWidth
inputRef={canIdEl}
<CANFilterFragment
fleet={name}
canId={canId}
setCanId={setCanId}
interval={interval}
setInterval={setInterval}
edgeMask={edgeMask}
setEdgeMask={setEdgeMask}
busy={busy}
onSubmit={onSubmit}
/>
<TextField
id="interval"
name="interval"
label="Interval (ms)"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
fullWidth
inputRef={intervalEl}
/>
<Button
type="submit"
disabled={busy}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
{busy ? "Submitting..." : "Submit"}
</Button>
</form>
</div>
);

12
src/components/Fleets/Status/CANFilters/Table/index.jsx
View File

@@ -131,10 +131,18 @@ const MainForm = ({ name }) => {
const Actions = (row) => {
let actions = [];
if (hasRole(groups, Permissions.FiskerCreate, providers)) {
let link = `/fleet/${name}/filter-update?name=${name}&can_id=${row.can_id}`;
if (row.interval || row.interval===0) {
link = link + `&interval=${row.interval}`
}
if (row.edge_mask) {
link = link + `&edge_mask=${row.edge_mask}`
}
actions.push({
tip: `Update "${row.can_id}"`,
link: `/fleet/${name}/filter-update?name=${name}&can_id=${row.can_id}&interval=${row.interval}`,
icon: <EditIcon aria-label={`Update ${row.can_id}`} />,
link,
icon: <EditIcon aria-label={`Update ${row.can_id}`} />
});
}
if (hasRole(groups, Permissions.FiskerDelete, providers)) {

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

@@ -26,54 +26,7 @@ exports[`FleetCANFilterUpdate Render 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
data-shrink="false"
for="name"
id="name-label"
>
Fleet Name
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="name"
maxlength="255"
name="name"
readonly=""
required=""
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
Fleet Name
 *
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-disabled Mui-disabled Mui-required Mui-required"
data-shrink="false"
for="canId"
id="canId-label"
@@ -88,15 +41,15 @@ exports[`FleetCANFilterUpdate Render 1`] = `
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
class="MuiInputBase-root MuiOutlinedInput-root Mui-disabled Mui-disabled MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
class="MuiInputBase-input MuiOutlinedInput-input Mui-disabled Mui-disabled"
disabled=""
id="canId"
maxlength="255"
name="canId"
readonly=""
required=""
type="text"
value=""
@@ -120,19 +73,12 @@ exports[`FleetCANFilterUpdate Render 1`] = `
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined Mui-required Mui-required"
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="interval"
id="interval-label"
>
Interval (ms)
<span
aria-hidden="true"
class="MuiFormLabel-asterisk MuiInputLabel-asterisk"
>
 
*
</span>
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
@@ -143,7 +89,6 @@ exports[`FleetCANFilterUpdate Render 1`] = `
id="interval"
maxlength="255"
name="interval"
required=""
type="text"
value=""
/>
@@ -156,7 +101,43 @@ exports[`FleetCANFilterUpdate Render 1`] = `
>
<span>
Interval (ms)
 *
</span>
</legend>
</fieldset>
</div>
</div>
<div
class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined"
data-shrink="false"
for="edgeMask"
id="edgeMask-label"
>
EdgeMask (hex representation)
</label>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
>
<input
aria-invalid="false"
class="MuiInputBase-input MuiOutlinedInput-input"
id="edgeMask"
maxlength="255"
name="edgeMask"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
>
<legend
class="PrivateNotchedOutline-legendLabelled-0"
>
<span>
EdgeMask (hex representation)
</span>
</legend>
</fieldset>

75
src/components/Fleets/Status/CANFilters/Update/index.jsx
View File

@@ -1,13 +1,13 @@
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useState } from "react";
import { Redirect, useParams } from "react-router";
import { useLocation } from "react-router-dom";
import { Button, TextField } from "@material-ui/core";
import { useUserContext } from "../../../../Contexts/UserContext";
import { useStatusContext } from "../../../../Contexts/StatusContext";
import { useFleetContext, FleetProvider } from "../../../../Contexts/FleetContext";
import useStyles from "../../../../useStyles";
import { logger } from "../../../../../services/monitoring";
import {CANFilterFragment} from "../../../../CANFilterEditFragment";
const MainForm = () => {
@@ -16,11 +16,12 @@ const MainForm = () => {
const { updateFleetCANFilter, busy } = useFleetContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
const classes = useStyles();
const intervalEl = useRef(null);
const [redirect, setRedirect] = useState(null);
const queries = new URLSearchParams(useLocation().search);
const canID = queries.get("can_id") ?? "";
const interval = queries.get("interval") ?? "";
const [interval, setInterval] = useState(queries.get("interval") ?? "");
const [edgeMask, setEdgeMask] = useState(queries.get("edge_mask") ?? "")
const [redirect, setRedirect] = useState(null);
useEffect(() => {
const title = "Update CAN Filter"
@@ -46,7 +47,8 @@ const MainForm = () => {
event.preventDefault();
const formData = {
can_id: canID,
interval: parseInt(intervalEl.current.value)
interval: (interval == null || interval === "") ? null : interval,
edge_mask: edgeMask === "" ? null : edgeMask,
};
const result = await updateFleetCANFilter(name, canID, formData, token);
if (!result || result.error) return;
@@ -66,59 +68,16 @@ const MainForm = () => {
return (
<div className={classes.paper}>
<form className={classes.form} noValidate action="{onSubmit}">
<TextField
id="name"
name="name"
label="Fleet Name"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={name}
required
fullWidth
<CANFilterFragment
fleet={name}
canId={canID}
interval={interval}
setInterval={setInterval}
edgeMask={edgeMask}
setEdgeMask={setEdgeMask}
busy={busy}
onSubmit={onSubmit}
/>
<TextField
id="canId"
name="canId"
label="CAN ID"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
readOnly: true,
}}
value={canID}
required
fullWidth
/>
<TextField
id="interval"
name="interval"
label="Interval (ms)"
variant="outlined"
margin="normal"
inputProps={{
maxLength: "255",
}}
defaultValue={interval}
required
fullWidth
inputRef={intervalEl}
/>
<Button
type="submit"
disabled={busy}
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={onSubmit}
>
{busy ? "Submitting..." : "Submit"}
</Button>
</form>
</div>
);