CEC-1182 fleet filter forms (#131)
* forms for fleet can filters * unit tests for fleet filters * removing warnings * updating regex
This commit is contained in:
Drew Taylor
@@ -11,8 +11,8 @@ import {
|
||||
Tooltip,
|
||||
} from "@material-ui/core";
|
||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
import clsx from "clsx";
|
||||
|
||||
import {
|
||||
@@ -104,6 +104,7 @@ const MainForm = ({ vin }) => {
|
||||
const onDelete = async (can_id) => {
|
||||
try {
|
||||
await deleteFilter(vin, can_id, token);
|
||||
setMessage(`Deleted ${can_id}`)
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
|
||||
@@ -12,6 +12,9 @@ export const FleetProvider = ({ children }) => {
|
||||
const [fleetVehicles, setFleetVehicles] = useState([]);
|
||||
const [totalFleetVehicles, setTotalFleetVehicles] = useState(0);
|
||||
|
||||
const [fleetCANFilters, setFleetCANFilters] = useState([]);
|
||||
const [totalFleetCANFilters, setTotalFleetCANFilters] = useState(0);
|
||||
|
||||
const addFleet = async (fleet, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
@@ -60,7 +63,7 @@ export const FleetProvider = ({ children }) => {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const deleteFleet = async (name, token) => {
|
||||
try {
|
||||
@@ -79,7 +82,7 @@ export const FleetProvider = ({ children }) => {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const getFleetVehicles = async (name, search, token) => {
|
||||
try {
|
||||
@@ -99,7 +102,7 @@ export const FleetProvider = ({ children }) => {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const addFleetVehicle = async (name, vehicle, token) => {
|
||||
try {
|
||||
@@ -116,7 +119,7 @@ export const FleetProvider = ({ children }) => {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const deleteFleetVehicle = async (name, vehicle, token) => {
|
||||
try {
|
||||
@@ -136,8 +139,83 @@ export const FleetProvider = ({ children }) => {
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getFleetCANFilters = async (name, search, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
const result = await api.getFleetCANFilters(name, search, token);
|
||||
if (result.error) {
|
||||
setFleetCANFilters([])
|
||||
throw new Error(`Get fleet filters error. ${result.message}`);
|
||||
}
|
||||
|
||||
setFleetCANFilters(result.data)
|
||||
if (result.total) {
|
||||
setTotalFleetCANFilters(result.total);
|
||||
}
|
||||
return result;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const addFleetCANFilter = async (name, filter, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
validateFleetName(name);
|
||||
validateFilter(filter);
|
||||
|
||||
const result = await api.addFleetCANFilter(name, filter, token);
|
||||
if (result.error) {
|
||||
throw new Error(`Add fleet CAN filter error. ${result.message}`);
|
||||
}
|
||||
return result;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const updateFleetCANFilter = async (name, can_id, filter, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
validateFleetName(name);
|
||||
validateCANID(can_id);
|
||||
validateFilter(filter);
|
||||
|
||||
const result = await api.updateFleetCANFilter(name, can_id, filter, token);
|
||||
if (result.error) {
|
||||
throw new Error(`Update fleet CAN filter error. ${result.message}`);
|
||||
}
|
||||
return result;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const deleteFleetCANFilter = async (name, can_id, token) => {
|
||||
try {
|
||||
setBusy(true);
|
||||
|
||||
validateFleetName(name);
|
||||
validateCANID(can_id);
|
||||
|
||||
const result = await api.deleteFleetCANFilter(name, can_id, token);
|
||||
if (result.error) {
|
||||
throw new Error(`Delete fleet vehicle error. ${result.message}`);
|
||||
}
|
||||
|
||||
const index = fleetCANFilters.findIndex(element => element.can_id === can_id);
|
||||
if (index >= 0) fleetCANFilters.splice(index, 1);
|
||||
return result;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<FleetContext.Provider
|
||||
value={{
|
||||
@@ -154,7 +232,14 @@ export const FleetProvider = ({ children }) => {
|
||||
totalFleetVehicles,
|
||||
getFleetVehicles,
|
||||
addFleetVehicle,
|
||||
deleteFleetVehicle
|
||||
deleteFleetVehicle,
|
||||
|
||||
fleetCANFilters,
|
||||
totalFleetCANFilters,
|
||||
getFleetCANFilters,
|
||||
addFleetCANFilter,
|
||||
updateFleetCANFilter,
|
||||
deleteFleetCANFilter
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
@@ -171,7 +256,7 @@ const validateFleet = (fleet) => {
|
||||
}
|
||||
|
||||
const validateFleetName = (name) => {
|
||||
if (name == null || !/^[0-9A-Za-z-]+$/.test(name)) {
|
||||
if (name == null || !/^[\w-]+$/.test(name)) {
|
||||
throw new Error("Invalid name");
|
||||
}
|
||||
}
|
||||
@@ -182,4 +267,22 @@ const validateVIN = (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);
|
||||
|
||||
@@ -20,6 +20,11 @@ const checkFleetVehicleResults = (error, busy, vehicles) => {
|
||||
expect(screen.getByTestId("fleet-vehicles").innerHTML).toEqual(vehicles);
|
||||
}
|
||||
|
||||
const checkFleetCANFilterResults = (error, busy, filters) => {
|
||||
checkBaseResults(error, busy);
|
||||
expect(screen.getByTestId("fleet-filters").innerHTML).toEqual(filters);
|
||||
}
|
||||
|
||||
const checkBaseResults = (error, busy) => {
|
||||
expect(screen.getByTestId("error").innerHTML).toEqual(error);
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual(busy);
|
||||
@@ -457,6 +462,187 @@ describe("FleetContext", () => {
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
});
|
||||
|
||||
describe("getFleetCANFilters", () => {
|
||||
beforeEach(() => {
|
||||
const TestComp = () => {
|
||||
const { busy, error, fleetCANFilters, getFleetCANFilters } = useFleetContext();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="error">{error}</div>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<div data-testid="fleet-filters">{JSON.stringify(fleetCANFilters)}</div>
|
||||
<button
|
||||
data-testid="getFleetCANFilters"
|
||||
onClick={() => getFleetCANFilters("US-TEST")}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
render(
|
||||
<FleetProvider>
|
||||
<TestComp />
|
||||
</FleetProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("initial state", () => {
|
||||
checkFleetCANFilterResults("", "false", "[]");
|
||||
});
|
||||
|
||||
it("getFleetCANFilters", async () => {
|
||||
fireEvent.click(screen.getByTestId("getFleetCANFilters"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("fleet-filters").innerHTML).not.toBe("[]")
|
||||
);
|
||||
checkFleetCANFilterResults("", "false", JSON.stringify(expectedFleetCANFiltersData));
|
||||
});
|
||||
});
|
||||
|
||||
describe("addFleetCANFilter", () => {
|
||||
beforeEach(async () => {
|
||||
const TestComp = () => {
|
||||
const { busy, addFleetCANFilter } = useFleetContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const add = async (name, filter) => {
|
||||
try {
|
||||
await addFleetCANFilter(name, filter);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="error">{message}</div>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<button data-testid="addFleetCANFilterNull" onClick={() => add(null)} />
|
||||
<button data-testid="addFleetCANFilterNoName" onClick={() => add({})} />
|
||||
<button
|
||||
data-testid="addFleetCANFilter"
|
||||
onClick={() =>
|
||||
add("US-TEST", { can_id: "111", interval: 222 })
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
render(
|
||||
<StatusProvider>
|
||||
<FleetProvider>
|
||||
<TestComp />
|
||||
</FleetProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("initial state", () => {
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
|
||||
it("addFleetCANFilterNull", async () => {
|
||||
fireEvent.click(screen.getByTestId("addFleetCANFilterNull"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
checkBaseResults("Invalid name", "false");
|
||||
});
|
||||
|
||||
it("addFleetCANFilterNoName", async () => {
|
||||
fireEvent.click(screen.getByTestId("addFleetCANFilterNoName"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
checkBaseResults("Invalid name", "false");
|
||||
});
|
||||
|
||||
it("addFleetCANFilter", async () => {
|
||||
fireEvent.click(screen.getByTestId("addFleetCANFilter"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
});
|
||||
|
||||
describe("deleteFleetCANFilter", () => {
|
||||
beforeEach(async () => {
|
||||
const TestComp = () => {
|
||||
const { busy, deleteFleetCANFilter } = useFleetContext();
|
||||
const { message, setMessage } = useStatusContext();
|
||||
const deleteFF = async (name, can_id) => {
|
||||
try {
|
||||
await deleteFleetCANFilter(name, can_id);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div data-testid="error">{message}</div>
|
||||
<div data-testid="busy">{busy.toString()}</div>
|
||||
<button data-testid="deleteFleetCANFilterNull" onClick={() => deleteFF("US-WEST", null)} />
|
||||
<button data-testid="deleteFleetCANFilterInvalid" onClick={() => deleteFF("US-WEST", "INVALID")} />
|
||||
<button
|
||||
data-testid="deleteFleetCANFilter"
|
||||
onClick={() =>
|
||||
deleteFF("US-WEST", "123-456")
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
render(
|
||||
<StatusProvider>
|
||||
<FleetProvider>
|
||||
<TestComp />
|
||||
</FleetProvider>
|
||||
</StatusProvider>
|
||||
);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("initial state", () => {
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
|
||||
it("deleteFleetCANFilterNull", async () => {
|
||||
fireEvent.click(screen.getByTestId("deleteFleetCANFilterNull"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
checkBaseResults("Invalid CAN ID", "false");
|
||||
});
|
||||
|
||||
it("deleteFleetCANFilterNonexistent", async () => {
|
||||
fireEvent.click(screen.getByTestId("deleteFleetCANFilterInvalid"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
checkBaseResults("Invalid CAN ID", "false");
|
||||
});
|
||||
|
||||
it("deleteFleetCANFilter", async () => {
|
||||
fireEvent.click(screen.getByTestId("deleteFleetCANFilter"));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId("busy").innerHTML).toEqual("false")
|
||||
);
|
||||
checkBaseResults("", "false");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
const expectedFleetsData = [
|
||||
@@ -480,4 +666,19 @@ const expectedFleetsData = [
|
||||
},
|
||||
];
|
||||
|
||||
const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"]
|
||||
const expectedFleetVehiclesData = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
|
||||
|
||||
const expectedFleetCANFiltersData = [
|
||||
{
|
||||
can_id: "123-456",
|
||||
interval: 789
|
||||
},
|
||||
{
|
||||
can_id: "1",
|
||||
interval: 1000
|
||||
},
|
||||
{
|
||||
can_id: "1000",
|
||||
interval: 1
|
||||
}
|
||||
];
|
||||
|
||||
@@ -22,6 +22,21 @@ let fleets = [
|
||||
let totalFleets = 3;
|
||||
let fleetVehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
|
||||
let totalFleetVehicles = 3;
|
||||
let fleetCANFilters = [
|
||||
{
|
||||
can_id: "123-456",
|
||||
interval: 789
|
||||
},
|
||||
{
|
||||
can_id: "1",
|
||||
interval: 1000
|
||||
},
|
||||
{
|
||||
can_id: "1000",
|
||||
interval: 1
|
||||
}
|
||||
]
|
||||
let totalFleetCANFilters = 3;
|
||||
|
||||
export const FleetProvider = ({ children }) => {
|
||||
return <div data-testid="mocked-fleetprovider">{children}</div>;
|
||||
@@ -41,5 +56,12 @@ export const useFleetContext = () => ({
|
||||
totalFleetVehicles,
|
||||
getFleetVehicles: jest.fn(),
|
||||
addFleetVehicle: jest.fn(),
|
||||
deleteFleetVehicle: jest.fn()
|
||||
deleteFleetVehicle: jest.fn(),
|
||||
|
||||
fleetCANFilters,
|
||||
totalFleetCANFilters,
|
||||
getFleetCANFilters: jest.fn(),
|
||||
addFleetCANFilter: jest.fn(),
|
||||
updateFleetCANFilter: jest.fn(),
|
||||
deleteFleetCANFilter: jest.fn(),
|
||||
});
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FleetCANFilterAdd Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3"
|
||||
>
|
||||
<form
|
||||
action="{onSubmit}"
|
||||
class="makeStyles-form-5"
|
||||
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="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-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<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"
|
||||
data-shrink="false"
|
||||
for="canId"
|
||||
id="canId-label"
|
||||
>
|
||||
CAN ID
|
||||
<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="canId"
|
||||
maxlength="255"
|
||||
name="canId"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<span>
|
||||
CAN ID
|
||||
*
|
||||
</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="interval"
|
||||
id="interval-label"
|
||||
>
|
||||
Interval
|
||||
</label>
|
||||
<div
|
||||
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
|
||||
>
|
||||
<input
|
||||
aria-invalid="false"
|
||||
class="MuiInputBase-input MuiOutlinedInput-input"
|
||||
id="interval"
|
||||
maxlength="255"
|
||||
name="interval"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<span>
|
||||
Interval
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
127
src/components/Fleets/Status/CANFilters/Add/index.jsx
Normal file
127
src/components/Fleets/Status/CANFilters/Add/index.jsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Redirect, useParams } from "react-router";
|
||||
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";
|
||||
|
||||
|
||||
const MainForm = () => {
|
||||
const { name } = useParams();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const { addFleetCANFilter, busy } = useFleetContext();
|
||||
const { token: { idToken: { jwtToken: token } } } = useUserContext();
|
||||
const classes = useStyles();
|
||||
const canIdEl = useRef(null);
|
||||
const intervalEl = useRef(null);
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const title = "Add CAN Filter"
|
||||
setTitle(title);
|
||||
setSitePath([
|
||||
{
|
||||
label: `Fleets`,
|
||||
link: "/fleets",
|
||||
},
|
||||
{
|
||||
label: `${name}`,
|
||||
link: `/fleet/${name}`
|
||||
},
|
||||
{
|
||||
label: title
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const formData = {
|
||||
can_id: canIdEl.current.value,
|
||||
interval: parseInt(intervalEl.current.value)
|
||||
};
|
||||
const result = await addFleetCANFilter(name, formData, token);
|
||||
if (!result || result.error) return;
|
||||
|
||||
setMessage(`Added CAN filter ${result.can_id}`);
|
||||
setRedirect(`/fleet/${name}#filters`);
|
||||
} 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="name"
|
||||
name="name"
|
||||
label="Fleet Name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
readOnly: true,
|
||||
}}
|
||||
value={name}
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<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"
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const FleetAddCANFilterForm = (props) => (
|
||||
<FleetProvider>
|
||||
<MainForm {...props} />
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetAddCANFilterForm;
|
||||
36
src/components/Fleets/Status/CANFilters/Add/index.test.jsx
Normal file
36
src/components/Fleets/Status/CANFilters/Add/index.test.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
jest.mock("../../../../Contexts/FleetContext");
|
||||
jest.mock("../../../../Contexts/StatusContext");
|
||||
jest.mock("../../../../Contexts/UserContext");
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { FleetProvider } from "../../../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderFleetCANFilterAdd = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("FleetCANFilterAdd", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderFleetCANFilterAdd();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,403 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FleetCANFiltersTable Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
|
||||
>
|
||||
<a
|
||||
class="makeStyles-labelInline-9"
|
||||
href="/fleet/undefined/filter-add"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
align="right"
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
|
||||
data-shrink="false"
|
||||
for="search"
|
||||
>
|
||||
Search
|
||||
</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="search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
||||
>
|
||||
<button
|
||||
aria-label="search"
|
||||
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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
>
|
||||
<thead
|
||||
class="MuiTableHead-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root MuiTableRow-head"
|
||||
>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
CAN ID
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Interval (ms)
|
||||
<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"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="MuiTableBody-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
123-456
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
789
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet/undefined/filter-update?name=undefined&can_id=123-456&interval=789"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"123-456\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update 123-456"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1000
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet/undefined/filter-update?name=undefined&can_id=1&interval=1000"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"1\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update 1"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1000
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet/undefined/filter-update?name=undefined&can_id=1000&interval=1"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"1000\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update 1000"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</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>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
205
src/components/Fleets/Status/CANFilters/Table/index.jsx
Normal file
205
src/components/Fleets/Status/CANFilters/Table/index.jsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Grid,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Tooltip,
|
||||
} from "@material-ui/core";
|
||||
import AddCircleIcon from "@material-ui/icons/AddCircle";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
import EditIcon from '@material-ui/icons/Edit';
|
||||
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 useStyles from "../../../../useStyles";
|
||||
import SearchField from "../../../../Controls/SearchField";
|
||||
import { logger } from "../../../../../services/monitoring";
|
||||
import { Roles, hasRole } from "../../../../../utils/roles";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "can_id",
|
||||
label: "CAN ID"
|
||||
},
|
||||
{
|
||||
id: "interval",
|
||||
label: "Interval (ms)"
|
||||
},
|
||||
{
|
||||
id: "",
|
||||
label: "Actions"
|
||||
}
|
||||
];
|
||||
|
||||
const MainForm = ({ name }) => {
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("desc");
|
||||
const classes = useStyles();
|
||||
const { setMessage } = useStatusContext();
|
||||
const { fleetCANFilters, totalFleetCANFilters, getFleetCANFilters, deleteFleetCANFilter } = useFleetContext();
|
||||
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!name || !token) return;
|
||||
await getFleetCANFilters(
|
||||
name,
|
||||
{
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
const onDelete = async (can_id) => {
|
||||
try {
|
||||
await deleteFleetCANFilter(name, can_id, token);
|
||||
setMessage(`Deleted ${can_id}`)
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const Actions = (row) => {
|
||||
let actions = [];
|
||||
if (hasRole([Roles.CREATE], groups)) {
|
||||
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}`} />
|
||||
});
|
||||
}
|
||||
if (hasRole([Roles.DELETE], groups)) {
|
||||
actions.push({
|
||||
tip: `Delete "${row.can_id}"`,
|
||||
id: row.can_id,
|
||||
icon: <DeleteIcon aria-label={`Delete ${row.can_id}`} />
|
||||
})
|
||||
}
|
||||
if (actions.length === 0) return ["No actions"];
|
||||
|
||||
return actions.map((action) => {
|
||||
if (action.link != null) {
|
||||
return (
|
||||
<Tooltip key={action.link} title={action.tip}>
|
||||
<Link to={action.link} style={{ margin: 5 }}>
|
||||
{action.icon}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Tooltip key={`delete-${action.id}`} title={action.tip}>
|
||||
<Link to="#" onClick={() => onDelete(action.id)}>
|
||||
{action.icon}
|
||||
</Link>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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/${name}/filter-add`} className={classes.labelInline}>
|
||||
<AddCircleIcon fontSize="large" />
|
||||
</Link>
|
||||
</Grid>
|
||||
<Grid item md={8} align="right" className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={handleSort}
|
||||
/>
|
||||
<TableBody>
|
||||
{fleetCANFilters.map(row => (
|
||||
<TableRow key={row.can_id}>
|
||||
<TableCell align="center">{row.can_id}</TableCell>
|
||||
<TableCell align="center">{row.interval}</TableCell>
|
||||
<TableCell align="center">{Actions(row)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={8}
|
||||
count={totalFleetCANFilters}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePageIndex}
|
||||
onRowsPerPageChange={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
const FleetCANFiltersTable = (props) => (
|
||||
<FleetProvider>
|
||||
<MainForm {...props} />
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetCANFiltersTable;
|
||||
39
src/components/Fleets/Status/CANFilters/Table/index.test.jsx
Normal file
39
src/components/Fleets/Status/CANFilters/Table/index.test.jsx
Normal file
@@ -0,0 +1,39 @@
|
||||
jest.mock("../../../../Contexts/FleetContext");
|
||||
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 { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { FleetProvider } from "../../../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderFleetCANFiltersTable = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("FleetCANFiltersTable", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderFleetCANFiltersTable();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,186 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`FleetCANFilterUpdate Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3"
|
||||
>
|
||||
<form
|
||||
action="{onSubmit}"
|
||||
class="makeStyles-form-5"
|
||||
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="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-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<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"
|
||||
data-shrink="false"
|
||||
for="canId"
|
||||
id="canId-label"
|
||||
>
|
||||
CAN ID
|
||||
<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="canId"
|
||||
maxlength="255"
|
||||
name="canId"
|
||||
readonly=""
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<span>
|
||||
CAN ID
|
||||
*
|
||||
</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"
|
||||
data-shrink="false"
|
||||
for="interval"
|
||||
id="interval-label"
|
||||
>
|
||||
Interval
|
||||
<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="interval"
|
||||
maxlength="255"
|
||||
name="interval"
|
||||
required=""
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<fieldset
|
||||
aria-hidden="true"
|
||||
class="PrivateNotchedOutline-root-64 MuiOutlinedInput-notchedOutline"
|
||||
>
|
||||
<legend
|
||||
class="PrivateNotchedOutline-legendLabelled-66"
|
||||
>
|
||||
<span>
|
||||
Interval
|
||||
*
|
||||
</span>
|
||||
</legend>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-6 MuiButton-containedPrimary MuiButton-fullWidth"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="MuiButton-label"
|
||||
>
|
||||
Submit
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
133
src/components/Fleets/Status/CANFilters/Update/index.jsx
Normal file
133
src/components/Fleets/Status/CANFilters/Update/index.jsx
Normal file
@@ -0,0 +1,133 @@
|
||||
import React, { useEffect, useRef, 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";
|
||||
|
||||
|
||||
const MainForm = () => {
|
||||
const { name } = useParams();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
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") ?? "";
|
||||
|
||||
useEffect(() => {
|
||||
const title = "Update CAN Filter"
|
||||
setTitle(title);
|
||||
setSitePath([
|
||||
{
|
||||
label: `Fleets`,
|
||||
link: "/fleets",
|
||||
},
|
||||
{
|
||||
label: `${name}`,
|
||||
link: `/fleet/${name}`,
|
||||
},
|
||||
{
|
||||
label: title
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const formData = {
|
||||
can_id: canID,
|
||||
interval: parseInt(intervalEl.current.value)
|
||||
};
|
||||
const result = await updateFleetCANFilter(name, canID, formData, token);
|
||||
if (!result || result.error) return;
|
||||
|
||||
setMessage(`Updated CAN filter ${result.can_id}`);
|
||||
setRedirect(`/fleet/${name}#filters`);
|
||||
} 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="name"
|
||||
name="name"
|
||||
label="Fleet Name"
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
inputProps={{
|
||||
maxLength: "255",
|
||||
readOnly: true,
|
||||
}}
|
||||
value={name}
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<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"
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
const FleetCANFilterUpdateForm = (props) => (
|
||||
<FleetProvider>
|
||||
<MainForm {...props} />
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetCANFilterUpdateForm;
|
||||
@@ -0,0 +1,36 @@
|
||||
jest.mock("../../../../Contexts/FleetContext");
|
||||
jest.mock("../../../../Contexts/StatusContext");
|
||||
jest.mock("../../../../Contexts/UserContext");
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { FleetProvider } from "../../../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderFleetCANFilterUpdate = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("FleetCANFilterUpdate", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderFleetCANFilterUpdate();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
21
src/components/Fleets/Status/CANFiltersTab.jsx
Normal file
21
src/components/Fleets/Status/CANFiltersTab.jsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
import { useParams } from "react-router";
|
||||
import clsx from "clsx";
|
||||
import { Typography } from "@material-ui/core";
|
||||
|
||||
import FleetCANFiltersTable from "./CANFilters/Table";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const FleetCANFiltersTab = () => {
|
||||
const { name } = useParams();
|
||||
const classes = useStyles();
|
||||
|
||||
return (
|
||||
<div className={clsx(classes.paper, classes.tableSize)}>
|
||||
<Typography variant="h6">CAN Filters</Typography>
|
||||
<FleetCANFiltersTable name={name} classes={classes} />
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
export default FleetCANFiltersTab;
|
||||
31
src/components/Fleets/Status/CANFiltersTab.test.jsx
Normal file
31
src/components/Fleets/Status/CANFiltersTab.test.jsx
Normal file
@@ -0,0 +1,31 @@
|
||||
jest.mock("../../Contexts/FleetContext");
|
||||
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 { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { setToken } from "../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../utils/testing";
|
||||
import CANFiltersTab from "./CANFiltersTab"
|
||||
|
||||
const renderCANFitlersTab = async () => {
|
||||
const { container } = render(
|
||||
<BrowserRouter>
|
||||
<CANFiltersTab name="US-TEST" />
|
||||
</BrowserRouter>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
return container;
|
||||
};
|
||||
|
||||
describe("CANFiltersTab", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderCANFitlersTab();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -3,13 +3,16 @@
|
||||
exports[`FleetVehicleAdd Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
data-testid="mocked-canfiltersprovider"
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-statusprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-userprovider"
|
||||
>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3"
|
||||
@@ -83,7 +86,7 @@ exports[`FleetVehicleAdd Render 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
f
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
jest.mock("../../../../Contexts/CANFiltersContext");
|
||||
jest.mock("../../../../Contexts/FleetContext");
|
||||
jest.mock("../../../../Contexts/StatusContext");
|
||||
jest.mock("../../../../Contexts/UserContext");
|
||||
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
import { CANFiltersProvider } from "../../../../Contexts/CANFiltersContext";
|
||||
import { FleetProvider } from "../../../../Contexts/FleetContext";
|
||||
import { StatusProvider } from "../../../../Contexts/StatusContext";
|
||||
import { UserProvider, setToken } from "../../../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderCANFiltersAdd = async () => {
|
||||
const renderFleetVehicleAdd = async () => {
|
||||
const { container } = render(
|
||||
<CANFiltersProvider>
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
<UserProvider>
|
||||
<BrowserRouter>
|
||||
<MainForm />
|
||||
</BrowserRouter>
|
||||
</UserProvider>
|
||||
</StatusProvider>f
|
||||
</CANFiltersProvider>
|
||||
</StatusProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
await waitFor(() => { });
|
||||
return container;
|
||||
@@ -30,7 +30,7 @@ const renderCANFiltersAdd = async () => {
|
||||
describe("FleetVehicleAdd", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderCANFiltersAdd();
|
||||
const container = await renderFleetVehicleAdd();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -47,7 +47,7 @@ const MainForm = ({ name }) => {
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
if (!token) return;
|
||||
if (!name || !token) return;
|
||||
await getFleetVehicles(
|
||||
name,
|
||||
{
|
||||
|
||||
@@ -14,7 +14,7 @@ import { UserProvider, setToken } from "../../../../Contexts/UserContext";
|
||||
import { TEST_AUTH_OBJECT } from "../../../../../utils/testing";
|
||||
import MainForm from "./index"
|
||||
|
||||
const renderFleetTable = async () => {
|
||||
const renderFleetVehiclesTable = async () => {
|
||||
const { container } = render(
|
||||
<FleetProvider>
|
||||
<StatusProvider>
|
||||
@@ -33,7 +33,7 @@ const renderFleetTable = async () => {
|
||||
describe("FleetVehiclesTable", () => {
|
||||
it("Render", async () => {
|
||||
setToken(TEST_AUTH_OBJECT);
|
||||
const container = await renderFleetTable();
|
||||
const container = await renderFleetVehiclesTable();
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,400 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CANFiltersTab Render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||
>
|
||||
<h6
|
||||
class="MuiTypography-root MuiTypography-h6"
|
||||
>
|
||||
CAN Filters
|
||||
</h6>
|
||||
<div
|
||||
data-testid="mocked-fleetprovider"
|
||||
>
|
||||
<div
|
||||
class="makeStyles-paper-3 makeStyles-tableSize-55"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-root-14 MuiGrid-container MuiGrid-spacing-xs-2"
|
||||
>
|
||||
<div
|
||||
class="MuiGrid-root makeStyles-textJustifyAlign-49 MuiGrid-item MuiGrid-grid-md-4"
|
||||
>
|
||||
<a
|
||||
class="makeStyles-labelInline-9"
|
||||
href="/fleet/undefined/filter-add"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
align="right"
|
||||
class="MuiGrid-root makeStyles-textCenterAlign-50 MuiGrid-item MuiGrid-grid-md-8"
|
||||
>
|
||||
<div
|
||||
class="MuiFormControl-root makeStyles-margin-28 makeStyles-fullWidth-52"
|
||||
>
|
||||
<label
|
||||
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated"
|
||||
data-shrink="false"
|
||||
for="search"
|
||||
>
|
||||
Search
|
||||
</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="search"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
|
||||
>
|
||||
<button
|
||||
aria-label="search"
|
||||
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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table
|
||||
class="MuiTable-root"
|
||||
>
|
||||
<thead
|
||||
class="MuiTableHead-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root MuiTableRow-head"
|
||||
>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
CAN ID
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
|
||||
scope="col"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
class="MuiButtonBase-root MuiTableSortLabel-root"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Interval (ms)
|
||||
<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"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="MuiTableBody-root"
|
||||
>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
123-456
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
789
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet/undefined/filter-update?name=undefined&can_id=123-456&interval=789"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"123-456\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update 123-456"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1000
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet/undefined/filter-update?name=undefined&can_id=1&interval=1000"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"1\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update 1"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="MuiTableRow-root"
|
||||
>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1000
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
1
|
||||
</td>
|
||||
<td
|
||||
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
|
||||
>
|
||||
<a
|
||||
class=""
|
||||
href="/fleet/undefined/filter-update?name=undefined&can_id=1000&interval=1"
|
||||
style="margin: 5px;"
|
||||
title="Update \\"1000\\""
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-label="Update 1000"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</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>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -5,12 +5,13 @@ import clsx from "clsx";
|
||||
import { Box, Tab, Tabs } from "@material-ui/core";
|
||||
|
||||
import FleetVehiclesTab from "./VehiclesTab";
|
||||
import FleetCANFiltersTab from "./CANFiltersTab";
|
||||
import TabPanel from "../../Controls/TabPanel";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
|
||||
const tabHashes = [
|
||||
"updates",
|
||||
"vehicles",
|
||||
"filters"
|
||||
]
|
||||
|
||||
@@ -60,7 +61,7 @@ const FleetStatus = () => {
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabIndex} index={1}>
|
||||
{/* <CANFiltersTab /> */}
|
||||
<FleetCANFiltersTab />
|
||||
</TabPanel>
|
||||
</div >
|
||||
);
|
||||
|
||||
@@ -16,8 +16,10 @@ const Datascope = React.lazy(() => import("../Datascope/Home"));
|
||||
const FleetsList = React.lazy(() => import("../Fleets/Table"));
|
||||
const FleetStatus = React.lazy(() => import("../Fleets/Status"));
|
||||
const FleetAddForm = React.lazy(() => import("../Fleets/Add"));
|
||||
const FleetUpdateForm = React.lazy(() => import("../Fleets/Update"))
|
||||
const FleetAddVehicleForm = React.lazy(() => import("../Fleets/Status/Vehicles/Add"))
|
||||
const FleetUpdateForm = React.lazy(() => import("../Fleets/Update"));
|
||||
const FleetAddVehicleForm = React.lazy(() => import("../Fleets/Status/Vehicles/Add"));
|
||||
const FleetAddCANFilterForm = React.lazy(() => import("../Fleets/Status/CANFilters/Add"));
|
||||
const FleetUpdateCANFilterForm = React.lazy(() => import("../Fleets/Status/CANFilters/Update"));
|
||||
const Home = React.lazy(() => import("../Home"));
|
||||
const Manifests = React.lazy(() => import("../Manifest/List"));
|
||||
const ManifestDeploy = React.lazy(() => import("../Manifest/Deploy"));
|
||||
@@ -88,6 +90,22 @@ const SiteRoutes = () => {
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/fleet/:name/filter-add"
|
||||
render={() => <FleetAddCANFilterForm />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/fleet/:name/filter-update"
|
||||
render={() => <FleetUpdateCANFilterForm />}
|
||||
type={TYPES.PROTECTED}
|
||||
token={token}
|
||||
groups={groups}
|
||||
roles={[Roles.READ, Roles.CREATE]}
|
||||
/>
|
||||
<AuthRoute
|
||||
path="/fleet/:name"
|
||||
render={() => <FleetStatus />}
|
||||
|
||||
@@ -21,13 +21,28 @@ const fleets = [
|
||||
|
||||
const vehicles = ["USWESTVIN12345678", "USWESTVIN12345679", "USWESTVIN12345670"];
|
||||
|
||||
const filters = [
|
||||
{
|
||||
can_id: "123-456",
|
||||
interval: 789
|
||||
},
|
||||
{
|
||||
can_id: "1",
|
||||
interval: 1000
|
||||
},
|
||||
{
|
||||
can_id: "1000",
|
||||
interval: 1
|
||||
}
|
||||
]
|
||||
|
||||
const fleetsAPI = {
|
||||
addFleet: async (fleet, token) => {
|
||||
fleets.push(fleet);
|
||||
return fleet;
|
||||
},
|
||||
getFleets: async (search, token) => {
|
||||
return {data: fleets};
|
||||
return { data: fleets };
|
||||
},
|
||||
updateFleet: async (name, fleet, token) => {
|
||||
const index = fleets.findIndex(element => element.name === name);
|
||||
@@ -41,7 +56,7 @@ const fleetsAPI = {
|
||||
},
|
||||
|
||||
getFleetVehicles: async (name, search, token) => {
|
||||
return {data: vehicles};
|
||||
return { data: vehicles };
|
||||
},
|
||||
addFleetVehicle: async (name, vehicle, token) => {
|
||||
vehicles.push(vehicle.vin);
|
||||
@@ -50,7 +65,25 @@ const fleetsAPI = {
|
||||
deleteFleetVehicle: async (name, vehicle, token) => {
|
||||
const index = vehicles.findIndex(element => element === vehicle.vin);
|
||||
if (index >= 0) vehicles.splice(index, 1);
|
||||
return vehicle;
|
||||
return vehicle.vin;
|
||||
},
|
||||
|
||||
getFleetCANFilters: async (name, search, token) => {
|
||||
return { data: filters };
|
||||
},
|
||||
addFleetCANFilter: async (name, filter, token) => {
|
||||
filters.push(filter);
|
||||
return filter;
|
||||
},
|
||||
updateFleetCANFilter: async (name, can_id, filter, token) => {
|
||||
const index = filters.findIndex(element => element.can_id === can_id);
|
||||
if (index >= 0) filters[index] = filter;
|
||||
return filter;
|
||||
},
|
||||
deleteFleetCANFilter: async (name, can_id, token) => {
|
||||
const index = filters.findIndex(element => element.can_id === can_id);
|
||||
if (index >= 0) vehicles.splice(index, 1);
|
||||
return can_id;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -72,6 +72,44 @@ const fleetsAPI = {
|
||||
getAuthHeaderOptions(token)
|
||||
)
|
||||
}).then(fetchRespHandler),
|
||||
|
||||
getFleetCANFilters: async (name, search, token) =>
|
||||
fetch(addQueryParams(`${API_ENDPOINT}/fleet/${name}/filters`, search), {
|
||||
method: "GET",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
getAuthHeaderOptions(token)
|
||||
)
|
||||
}).then(fetchRespHandler),
|
||||
|
||||
addFleetCANFilter: async (name, filter, token) =>
|
||||
fetch(`${API_ENDPOINT}/fleet/${name}/filter`, {
|
||||
method: "POST",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
getAuthHeaderOptions(token)
|
||||
),
|
||||
body: JSON.stringify(filter)
|
||||
}).then(fetchRespHandler),
|
||||
|
||||
updateFleetCANFilter: async (name, can_id, filter, token) =>
|
||||
fetch(`${API_ENDPOINT}/fleet/${name}/filter/${can_id}`, {
|
||||
method: "PUT",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
getAuthHeaderOptions(token)
|
||||
),
|
||||
body: JSON.stringify(filter)
|
||||
}).then(fetchRespHandler),
|
||||
|
||||
deleteFleetCANFilter: async (name, can_id, token) =>
|
||||
fetch(`${API_ENDPOINT}/fleet/${name}/filter/${can_id}`, {
|
||||
method: "DELETE",
|
||||
headers: Object.assign(
|
||||
{ "Content-Type": "application/json" },
|
||||
getAuthHeaderOptions(token)
|
||||
)
|
||||
}).then(fetchRespHandler),
|
||||
};
|
||||
|
||||
export default fleetsAPI;
|
||||
|
||||
Reference in New Issue
Block a user