CEC-247, CEC-261 Manifest and ECU display (#65)
* CEC-261 Add ECU list control * CEC-261 Update vehicle service mock * CEC-247 Manifest screens * Fix test * Remove dynamic dates from mocks * Remove timezone from mock dates * Fix test for date string timezone difference
This commit is contained in:
John Wu
161
src/components/Manifest/Deploy/index.jsx
Normal file
161
src/components/Manifest/Deploy/index.jsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { VehicleProvider } from "../../Contexts/VehicleContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import CarSelectionTable from "../../Cars/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle } = useStatusContext();
|
||||
const [manifestName, setManifestName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
const [redirect, setRedirect] = useState("");
|
||||
const classes = useStyles();
|
||||
|
||||
const handleSearch = (search) => {
|
||||
setSelected([]);
|
||||
setSearch(search);
|
||||
};
|
||||
|
||||
const handleSelectAll = (cars) => {
|
||||
setSelected(cars);
|
||||
};
|
||||
|
||||
const handleSelect = (event, key) => {
|
||||
try {
|
||||
let newSelected;
|
||||
if (event.target.checked) {
|
||||
newSelected = [...selected];
|
||||
newSelected.push(key);
|
||||
} else {
|
||||
newSelected = selected.filter((vin) => vin !== key);
|
||||
}
|
||||
setSelected(newSelected);
|
||||
} catch (e) {
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = async (event) => {
|
||||
try {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
manifest_id: parseInt(manifest_id),
|
||||
vins: selected,
|
||||
};
|
||||
await deployCarUpdates(data, token);
|
||||
setMessage(
|
||||
`Deployed ${manifestName} ${version} to ${selected.length} cars`
|
||||
);
|
||||
setRedirect(`/manifest-status/${manifest_id}`);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
getManifests({ id: parseInt(manifest_id) }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
setTitle(`Deploy ${manifestName} ${version}`);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifestName, version]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
var data = manifests[0];
|
||||
|
||||
setManifestName(data.name);
|
||||
setVersion(data.version);
|
||||
setCreateDate(LocalDateTimeString(data.created));
|
||||
}, [manifests]);
|
||||
|
||||
if (redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.paper}>
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<Typography variant="body2">Created {createDate}.</Typography>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={10}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={2} style={{ textAlign: "right" }}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy || selected.length === 0}
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={classes.formControl}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default ManifestDeployForm;
|
||||
249
src/components/Manifest/List/index.jsx
Normal file
249
src/components/Manifest/List/index.jsx
Normal file
@@ -0,0 +1,249 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
Toolbar,
|
||||
Tooltip,
|
||||
} from "@material-ui/core";
|
||||
import SendIcon from "@material-ui/icons/Send";
|
||||
import VisibilityIcon from "@material-ui/icons/Visibility";
|
||||
import DeleteIcon from "@material-ui/icons/Delete";
|
||||
|
||||
import {
|
||||
useManifestsContext,
|
||||
ManifestsProvider,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import TableHeaderSortable from "../../Table/HeaderSortable";
|
||||
import SearchField from "../../Controls/SearchField";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ECUList from "../../Controls/ECUList";
|
||||
import { Roles, hasRole } from "../../../utils/roles";
|
||||
|
||||
const tableColumns = [
|
||||
{
|
||||
id: "id",
|
||||
label: "ID",
|
||||
},
|
||||
{
|
||||
id: "name",
|
||||
label: "Name",
|
||||
},
|
||||
{
|
||||
id: "version",
|
||||
label: "Version",
|
||||
},
|
||||
{
|
||||
id: "created_at",
|
||||
label: "Created",
|
||||
},
|
||||
{
|
||||
id: "updated_at",
|
||||
label: "Updated",
|
||||
},
|
||||
{
|
||||
id: "",
|
||||
label: "Actions",
|
||||
},
|
||||
];
|
||||
|
||||
const MainForm = () => {
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [orderBy, setOrderBy] = useState("id");
|
||||
const [order, setOrder] = useState("asc");
|
||||
const [search, setSearch] = useState("");
|
||||
const { getManifests, deleteManifest, manifests, totalManifests } =
|
||||
useManifestsContext();
|
||||
const { setMessage, setTitle } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
groups,
|
||||
} = useUserContext();
|
||||
|
||||
const sortHandler = (event, property) => {
|
||||
if (property === orderBy) {
|
||||
if (order === "asc") {
|
||||
setOrder("desc");
|
||||
} else {
|
||||
setOrder("asc");
|
||||
}
|
||||
} else {
|
||||
setOrderBy(property);
|
||||
setOrder("asc");
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Deploy Manifest");
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
await getManifests(
|
||||
{
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
order: `${orderBy} ${order}`,
|
||||
search,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageIndex, pageSize, token, orderBy, order, search]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
const handleSearch = (search) => {
|
||||
setSearch(search);
|
||||
};
|
||||
|
||||
const onDelete = async (manifest_id) => {
|
||||
try {
|
||||
await deleteManifest(parseInt(manifest_id), token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
};
|
||||
|
||||
const Actions = (row) => {
|
||||
let actions = [];
|
||||
if (hasRole([Roles.CREATE, Roles.READ], groups)) {
|
||||
actions.push({
|
||||
tip: `Status "${row.name} ${row.version}"`,
|
||||
link: `/manifest-status/${row.id}`,
|
||||
icon: (
|
||||
<VisibilityIcon aria-label={`Status ${row.name} ${row.version}`} />
|
||||
),
|
||||
});
|
||||
}
|
||||
if (hasRole([Roles.CREATE], groups)) {
|
||||
actions = actions.concat([
|
||||
{
|
||||
tip: `Deploy "${row.name} ${row.version}"`,
|
||||
link: `/manifest-deploy/${row.id}`,
|
||||
icon: <SendIcon aria-label={`Deploy ${row.name} ${row.version}`} />,
|
||||
},
|
||||
{
|
||||
tip: `Delete "${row.name} ${row.version}"`,
|
||||
id: row.id,
|
||||
icon: <DeleteIcon aria-label={`Delete ${row.name} ${row.version}`} />,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
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={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Toolbar className={classes.tableToolbar}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Toolbar>
|
||||
<Table>
|
||||
<TableHeaderSortable
|
||||
classes={classes}
|
||||
orderBy={orderBy}
|
||||
order={order}
|
||||
columnData={tableColumns}
|
||||
onSortRequest={sortHandler}
|
||||
/>
|
||||
<TableBody>
|
||||
{manifests.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.name}
|
||||
{row.ecu_list && (
|
||||
<>
|
||||
<br />
|
||||
<ECUList list={row.ecu_list} search={search} />
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.version}</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
<TableCell align="center">{Actions(row)}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={6}
|
||||
count={totalManifests}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestsList = () => (
|
||||
<ManifestsProvider>
|
||||
<MainForm />
|
||||
</ManifestsProvider>
|
||||
);
|
||||
|
||||
export default ManifestsList;
|
||||
174
src/components/Manifest/Status/index.jsx
Normal file
174
src/components/Manifest/Status/index.jsx
Normal file
@@ -0,0 +1,174 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams } from "react-router";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
LinearProgress,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableRow,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import {
|
||||
ManifestsProvider,
|
||||
useManifestsContext,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
import {
|
||||
CarUpdatesProvider,
|
||||
useCarUpdatesContext,
|
||||
} from "../../Contexts/CarUpdatesContext";
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const classes = useStyles();
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const { getManifests, manifests } = useManifestsContext();
|
||||
const {
|
||||
getCarUpdates,
|
||||
carUpdates,
|
||||
totalCarUpdates,
|
||||
startMonitor,
|
||||
stopMonitor,
|
||||
} = useCarUpdatesContext();
|
||||
const { setMessage, setTitle } = useStatusContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
await getManifests({ id: manifest_id }, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
setTitle(`Manifest ${manifests[0].name} ${manifests[0].version}`);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifests]);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
stopMonitor();
|
||||
await getCarUpdates(
|
||||
{
|
||||
manifest_id,
|
||||
limit: pageSize,
|
||||
offset: pageSize * pageIndex,
|
||||
},
|
||||
token
|
||||
);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
})();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pageIndex, pageSize, token]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
if (carUpdates.length === 0) return;
|
||||
startMonitor(token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
}
|
||||
return () => {
|
||||
stopMonitor();
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [carUpdates]);
|
||||
|
||||
const handleChangePageIndex = (event, newIndex) => {
|
||||
setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const handleChangePageSize = (event) => {
|
||||
setPageSize(parseInt(event.target.value, 10));
|
||||
setPageIndex(0);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classes.paper} style={{ height: 700, width: "100%" }}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align="center">ID</TableCell>
|
||||
<TableCell align="center">Vehicle</TableCell>
|
||||
<TableCell align="center">Status</TableCell>
|
||||
<TableCell align="center">Created</TableCell>
|
||||
<TableCell align="center">Updated</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{carUpdates.map((row) => (
|
||||
<TableRow key={row.id}>
|
||||
<TableCell align="center">{row.id}</TableCell>
|
||||
<TableCell align="center">
|
||||
<Link to={`/vehicle-status/${row.vin}`}>{row.vin}</Link>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{row.status}
|
||||
{row.progress > 0 && (
|
||||
<LinearProgress variant="determinate" value={row.progress} />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.created)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{LocalDateTimeString(row.updated)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 100]}
|
||||
colSpan={5}
|
||||
count={totalCarUpdates}
|
||||
rowsPerPage={pageSize}
|
||||
page={pageIndex}
|
||||
SelectProps={{
|
||||
inputProps: { "aria-label": "rows per page" },
|
||||
native: true,
|
||||
}}
|
||||
onChangePage={handleChangePageIndex}
|
||||
onChangeRowsPerPage={handleChangePageSize}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestStatus = () => (
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
);
|
||||
|
||||
export default ManifestStatus;
|
||||
Reference in New Issue
Block a user