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

CEC-1256/CEC-1330 data logger for vehicles/fleets and details tabs for vehicles/fleets (#136)

Browse Source 
* forms for fleet can filters

* unit tests for fleet filters

* removing warnings

* updating regex

* added fleet details page

* fleet pages

* smoothed out bugs

* fleets done

* working update, delete vehicles

* finished mocks, still need snapshots and context tests

* contexts done

* snapshot tests

* updating code smells

* smells
This commit is contained in:
Drew Taylor
2022-04-14 18:11:22 -07:00
committed by GitHub
parent afa3c1e529
commit 07f77cabdb
56 changed files with 5854 additions and 2208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -140,7 +140,7 @@ exports[`FleetTable Render 1`] = `
role="button"
tabindex="0"
>
CANBus Enabled
Log Level
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -163,7 +163,30 @@ exports[`FleetTable Render 1`] = `
role="button"
tabindex="0"
>
Log Level
CAN Bus Enabled
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
<span
aria-disabled="false"
class="MuiButtonBase-root MuiTableSortLabel-root"
role="button"
tabindex="0"
>
Data Logger Enabled
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc"
@@ -222,12 +245,6 @@ exports[`FleetTable Render 1`] = `
</svg>
</span>
</th>
<th
class="MuiTableCell-root MuiTableCell-head MuiTableCell-alignCenter"
scope="col"
>
Actions
</th>
</tr>
</thead>
<tbody
@@ -245,6 +262,11 @@ exports[`FleetTable Render 1`] = `
US-WEST
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
info
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -253,7 +275,7 @@ exports[`FleetTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
info
true
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -265,28 +287,6 @@ exports[`FleetTable Render 1`] = `
>
0
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/fleet-update?name=US-WEST&canbus_enabled=true&log_level=info"
style="margin: 5px;"
title="Update \\"US-WEST\\""
>
<svg
aria-hidden="true"
aria-label="Update US-WEST"
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"
@@ -300,6 +300,11 @@ exports[`FleetTable Render 1`] = `
US-CENTRAL
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
warn
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -308,7 +313,7 @@ exports[`FleetTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
warn
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -320,28 +325,6 @@ exports[`FleetTable Render 1`] = `
>
0
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/fleet-update?name=US-CENTRAL&canbus_enabled=false&log_level=warn"
style="margin: 5px;"
title="Update \\"US-CENTRAL\\""
>
<svg
aria-hidden="true"
aria-label="Update US-CENTRAL"
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"
@@ -355,6 +338,11 @@ exports[`FleetTable Render 1`] = `
US-EAST
</a>
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
error
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
@@ -363,7 +351,7 @@ exports[`FleetTable Render 1`] = `
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
error
false
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
@@ -375,28 +363,6 @@ exports[`FleetTable Render 1`] = `
>
0
</td>
<td
class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignCenter"
>
<a
class=""
href="/fleet-update?name=US-EAST&canbus_enabled=true&log_level=error"
style="margin: 5px;"
title="Update \\"US-EAST\\""
>
<svg
aria-hidden="true"
aria-label="Update US-EAST"
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

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

@@ -7,12 +7,9 @@ import {
TableCell,
TableFooter,
TablePagination,
TableRow,
Tooltip,
TableRow
} 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 clsx from "clsx";
import TableHeaderSortable from "../../Table/HeaderSortable";
@@ -24,21 +21,24 @@ 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: "name",
label: "Name"
},
{
id: "canbus_enabled",
label: "CANBus Enabled"
},
{
id: "log_level",
label: "Log Level"
},
{
id: "canbus_enabled",
label: "CAN Bus Enabled"
},
{
id: "data_logger_enabled",
label: "Data Logger Enabled"
},
{
id: "num_vehicles",
label: "Vehicles"
@@ -46,22 +46,18 @@ const tableColumns = [
{
id: "num_filters",
label: "Filters"
},
{
id: "",
label: "Actions"
}
];
const MainForm = ({ vin }) => {
const MainForm = () => {
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, setSitePath, setTitle } = useStatusContext();
const { fleets, totalFleets, getFleets, deleteFleet } = useFleetContext();
const { token: { idToken: { jwtToken: token } }, groups } = useUserContext();
const { fleets, totalFleets, getFleets } = useFleetContext();
const { token: { idToken: { jwtToken: token } } } = useUserContext();
useEffect(() => {
setTitle("Fleets");
@@ -89,7 +85,7 @@ const MainForm = ({ vin }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token, pageIndex, pageSize, orderBy, order]);
const handleChangePageIndex = (event, newIndex) => {
const handleChangePageIndex = (_event, newIndex) => {
setPageIndex(newIndex);
};
@@ -98,7 +94,7 @@ const MainForm = ({ vin }) => {
setPageIndex(0);
};
const handleSort = (event, property) => {
const handleSort = (_event, property) => {
try {
if (property === orderBy) {
if (order === "asc") {
@@ -115,55 +111,6 @@ const MainForm = ({ vin }) => {
}
};
const onDelete = async (name) => {
try {
await deleteFleet(name, token);
setMessage(`Deleted ${name}`)
} catch (e) {
setMessage(e.message);
logger.warn(e.stack);
}
};
const Actions = (row) => {
let actions = [];
if (hasRole([Roles.CREATE], groups)) {
actions.push({
tip: `Update "${row.name}"`,
link: `/fleet-update?name=${row.name}&canbus_enabled=${row.canbus.enabled.toString()}&log_level=${row.log_level}`,
icon: <EditIcon aria-label={`Update ${row.name}`} />
});
}
if (hasRole([Roles.DELETE], groups)) {
actions.push({
tip: `Delete "${row.name}"`,
id: row.name,
icon: <DeleteIcon aria-label={`Delete ${row.name}`} />
})
}
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}>
@@ -191,11 +138,11 @@ const MainForm = ({ vin }) => {
<TableCell align="center">
<Link to={`/fleet/${row.name}`}>{row.name}</Link>
</TableCell>
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{row.log_level}</TableCell>
<TableCell align="center">{row.canbus.enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{row.canbus.data_logger_enabled ? "true" : "false"}</TableCell>
<TableCell align="center">{!row.vehicles ? 0 : row.vehicles.length}</TableCell>
<TableCell align="center">{!row.canbus.filters ? 0 : row.canbus.filters.length}</TableCell>
<TableCell align="center">{Actions(row)}</TableCell>
</TableRow>
))}
</TableBody>

2
src/components/Fleets/Table/index.test.jsx
View File

@@ -26,7 +26,7 @@ const renderFleetTable = async () => {
</StatusProvider>
</FleetProvider>
);
await waitFor(() => { });
await waitFor(() => { /* render */ });
return container;
};