CEC-2144, CEC-2338 Add deploy by fleets and fix fleets table (#192)
* Add fix for fleets search * Decompose fleets table * Add deploy by fleets * Add snapshots
This commit is contained in:
arpanetus
177
src/components/Manifest/Deploy/FleetDeployForm.jsx
Normal file
177
src/components/Manifest/Deploy/FleetDeployForm.jsx
Normal file
@@ -0,0 +1,177 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
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 "../../Controls/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import {FleetProvider} from "../../Contexts/FleetContext";
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = 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 = (query) => {
|
||||
setSelected([]);
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
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(`/package-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(() => {
|
||||
const title = `Deploy ${manifestName} ${version}`;
|
||||
setTitle(title);
|
||||
setSitePath([
|
||||
{
|
||||
label: "Deployments",
|
||||
link: "/packages",
|
||||
},
|
||||
{
|
||||
label: title,
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifestName, version]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
const 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={4}>
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy || selected.length === 0}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={clsx(classes.formControl, classes.textField)}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FleetDeployForm = () => (
|
||||
<FleetProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</FleetProvider>
|
||||
);
|
||||
|
||||
export default FleetDeployForm;
|
||||
175
src/components/Manifest/Deploy/VehicleDeployForm.jsx
Normal file
175
src/components/Manifest/Deploy/VehicleDeployForm.jsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
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 "../../Controls/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, setSitePath } = 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 = (query) => {
|
||||
setSelected([]);
|
||||
setSearch(query);
|
||||
};
|
||||
|
||||
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(`/package-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(() => {
|
||||
const title = `Deploy ${manifestName} ${version}`;
|
||||
setTitle(title);
|
||||
setSitePath([
|
||||
{
|
||||
label: "Deployments",
|
||||
link: "/packages",
|
||||
},
|
||||
{
|
||||
label: title,
|
||||
},
|
||||
]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [manifestName, version]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!manifests || manifests.length === 0) return;
|
||||
const 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={4}>
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={busy || selected.length === 0}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
className={clsx(classes.formControl, classes.textField)}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
{busy ? "Deploying..." : "Deploy"}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const VehicleDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</VehicleProvider>
|
||||
);
|
||||
|
||||
export default VehicleDeployForm;
|
||||
@@ -1,35 +1,37 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useParams, Redirect } from "react-router";
|
||||
import { Button, Grid, Typography } from "@material-ui/core";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Redirect, useParams} from "react-router";
|
||||
import {Button, FormControlLabel, Grid, Switch, Typography} from "@material-ui/core";
|
||||
import clsx from "clsx";
|
||||
|
||||
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 {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 "../../Controls/CarSelectionTable";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import { LocalDateTimeString } from "../../../utils/dates";
|
||||
import {logger} from "../../../services/monitoring";
|
||||
import {LocalDateTimeString} from "../../../utils/dates";
|
||||
import FleetSelectionTable from "../../Controls/FleetSelectionTable";
|
||||
import {FleetProvider} from "../../Contexts/FleetContext";
|
||||
|
||||
|
||||
const CAR_UPDATE = false;
|
||||
const FLEET_UPDATE = true;
|
||||
|
||||
const MainForm = () => {
|
||||
const { manifest_id } = useParams();
|
||||
const { getManifests, manifests, busy } = useManifestsContext();
|
||||
const { deployCarUpdates } = useCarUpdatesContext();
|
||||
const [updateType, setUpdateType] = useState(CAR_UPDATE);
|
||||
|
||||
const {manifest_id} = useParams();
|
||||
const {getManifests, manifests, busy} = useManifestsContext();
|
||||
const {deployCarUpdates, deployFleetUpdates} = useCarUpdatesContext();
|
||||
const {
|
||||
token: {
|
||||
idToken: { jwtToken: token },
|
||||
idToken: {jwtToken: token},
|
||||
},
|
||||
} = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const {setMessage, setTitle, setSitePath} = useStatusContext();
|
||||
const [manifestName, setManifestName] = useState("");
|
||||
const [version, setVersion] = useState("");
|
||||
const [createDate, setCreateDate] = useState("");
|
||||
@@ -38,6 +40,11 @@ const MainForm = () => {
|
||||
const [redirect, setRedirect] = useState("");
|
||||
const classes = useStyles();
|
||||
|
||||
const handleChange = (_) => {
|
||||
setSelected([]);
|
||||
setUpdateType(updateType === CAR_UPDATE ? FLEET_UPDATE : CAR_UPDATE);
|
||||
}
|
||||
|
||||
const handleSearch = (query) => {
|
||||
setSelected([]);
|
||||
setSearch(query);
|
||||
@@ -54,7 +61,7 @@ const MainForm = () => {
|
||||
newSelected = [...selected];
|
||||
newSelected.push(key);
|
||||
} else {
|
||||
newSelected = selected.filter((vin) => vin !== key);
|
||||
newSelected = selected.filter((vinOrName) => vinOrName !== key);
|
||||
}
|
||||
setSelected(newSelected);
|
||||
} catch (e) {
|
||||
@@ -67,9 +74,14 @@ const MainForm = () => {
|
||||
event.preventDefault();
|
||||
const data = {
|
||||
manifest_id: parseInt(manifest_id),
|
||||
vins: selected,
|
||||
};
|
||||
await deployCarUpdates(data, token);
|
||||
}
|
||||
if (updateType === CAR_UPDATE) {
|
||||
data.vins = selected;
|
||||
await deployCarUpdates(data, token);
|
||||
} else {
|
||||
data.fleet_names = selected;
|
||||
await deployFleetUpdates(data, token);
|
||||
}
|
||||
setMessage(
|
||||
`Deployed ${manifestName} ${version} to ${selected.length} cars`
|
||||
);
|
||||
@@ -82,7 +94,7 @@ const MainForm = () => {
|
||||
|
||||
const getData = async () => {
|
||||
try {
|
||||
getManifests({ id: parseInt(manifest_id) }, token);
|
||||
getManifests({id: parseInt(manifest_id)}, token);
|
||||
} catch (e) {
|
||||
setMessage(e.message);
|
||||
logger.warn(e.stack);
|
||||
@@ -119,7 +131,7 @@ const MainForm = () => {
|
||||
}, [manifests]);
|
||||
|
||||
if (redirect.length > 0) {
|
||||
return <Redirect to={redirect} />;
|
||||
return <Redirect to={redirect}/>;
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -127,13 +139,21 @@ const MainForm = () => {
|
||||
<form className={classes.form} noValidate action="{onSubmit}">
|
||||
<Typography variant="body2">Created {createDate}.</Typography>
|
||||
<Grid container className={classes.root} spacing={2}>
|
||||
<Grid item md={4}>
|
||||
<Grid item md={2}>
|
||||
<div
|
||||
className={classes.labelInline}
|
||||
>{`${selected.length} Selected`}</div>
|
||||
</Grid>
|
||||
<Grid item md={2} className={classes.textCenterAlign}>
|
||||
<FormControlLabel control={<Switch
|
||||
checked={updateType === CAR_UPDATE}
|
||||
onChange={handleChange}
|
||||
inputProps={{'aria-label': 'controlled'}}
|
||||
/>} label="Car(default) or Fleet"/>
|
||||
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textCenterAlign}>
|
||||
<SearchField classes={classes} onSearch={handleSearch} />
|
||||
<SearchField classes={classes} onSearch={handleSearch}/>
|
||||
</Grid>
|
||||
<Grid item md={4} className={classes.textRightAlign}>
|
||||
<Button
|
||||
@@ -148,28 +168,39 @@ const MainForm = () => {
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{ search }}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/>
|
||||
{updateType === CAR_UPDATE ?
|
||||
<VehicleProvider>
|
||||
<CarSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{search}}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}
|
||||
/></VehicleProvider> :
|
||||
<FleetProvider>
|
||||
<FleetSelectionTable
|
||||
classes={classes}
|
||||
token={token}
|
||||
multiSelect={true}
|
||||
search={{search}}
|
||||
selected={selected}
|
||||
onSelect={handleSelect}
|
||||
onSelectAll={handleSelectAll}/>
|
||||
</FleetProvider>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ManifestDeployForm = () => (
|
||||
<VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm />
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
</VehicleProvider>
|
||||
<ManifestsProvider>
|
||||
<CarUpdatesProvider>
|
||||
<MainForm/>
|
||||
</CarUpdatesProvider>
|
||||
</ManifestsProvider>
|
||||
);
|
||||
|
||||
export default ManifestDeployForm;
|
||||
|
||||
Reference in New Issue
Block a user