Development (#94)
* CEC-371 Car ECU display (#79) * Merge Development (#53) * Use responsive iframe control for charts (#49) * Use responsive iframe control to charts * Move external Grafana link to Dashboard page * Remove unused embedded style class * Add button label * added delete button to deploy packages * Fix unit test warning Remove unused route from test * Fix styling of button * minor fixes per pr review Co-authored-by: jcw-fisker <jwatson@fiskerinc.com> Co-authored-by: John Cotten Watson <83605808+jcw-fisker@users.noreply.github.com> * Development Merge (#57) * CEC-287 Car connection status (#59) (#60) * Car connection status * Formatting * Merge Development (#64) * Add connection status to vehicles page * ConnectedIcon control * Handle Style * Development (#67) * preliminary map for vehicles * weird zoom bug * passing react tests * fixing warnings and updating snapshots * update node environment to 14 * addressing comments by changing variable types and adding styles to home page title * adding CODEOWNERS file * fixing token error * CEC-371 Update car ECUs display (#78) * Clean up className styles Update car status page to show update and ECUs * Add update ecu version button Show all ECUs on car status page Only show car ecus for search Co-authored-by: jcw-fisker <jwatson@fiskerinc.com> Co-authored-by: John Cotten Watson <83605808+jcw-fisker@users.noreply.github.com> Co-authored-by: Drew Taylor <69828061+drew-fisker@users.noreply.github.com> * CEC-394 Car update log (#81) * CEC-394 Car update status control * Remove Datadog RUM Remove package update components Move control components into Controls folder Add Car update status page * Display update status log Clean up unused update package code * Remove console.logs * no vars * adding timestamp to vehicle popup * modifying vehicle data query * removing extraneous code * removing console log * Clean up SonarCloud warnings (#83) * Clean up SonarCloud warnings * Bogus security warning * Fix another warning * Fix unauthorized locations request * Fix update progress control * CEC-563 New manifest format (#88) * Add ManifestCreateContext Update create manifest page * Finish UI changes and API integration * Fixes * Fix test * Remove manifest ECU file version and type * Fixes * Add manifest ecu file type control * Fix Sonar warnings * Fix test * Update codeowners * Formatting * CEC-553 Change file type to string (#90) * CEC-553 File type uses string enum * Fix test timeout * Fix * Merge development * Increase timeout * Clean up (#95) * Clean up Mock missing methods * Smell Co-authored-by: jcw-fisker <jwatson@fiskerinc.com> Co-authored-by: John Cotten Watson <83605808+jcw-fisker@users.noreply.github.com> Co-authored-by: Drew Taylor <69828061+drew-fisker@users.noreply.github.com> Co-authored-by: Drew Taylor <dtaylor@fiskerinc.com>
This commit is contained in:
John Wu
@@ -1,117 +1,29 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Redirect } from "react-router";
|
||||
import {
|
||||
Button,
|
||||
Grid,
|
||||
LinearProgress,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@material-ui/core";
|
||||
import { DropzoneArea } from "material-ui-dropzone";
|
||||
import { Button, TextField, Typography } from "@material-ui/core";
|
||||
|
||||
import { useUserContext } from "../../Contexts/UserContext";
|
||||
import { useStatusContext } from "../../Contexts/StatusContext";
|
||||
import {
|
||||
useManifestsContext,
|
||||
ManifestsProvider,
|
||||
} from "../../Contexts/ManifestsContext";
|
||||
ManifestCreateProvider,
|
||||
useManifestCreateContext,
|
||||
} from "../../Contexts/ManifestCreateContext";
|
||||
import useStyles from "../../useStyles";
|
||||
import { logger } from "../../../services/monitoring";
|
||||
import ECUFilesList from "../ECUFilesList";
|
||||
|
||||
const FileTemplate = {
|
||||
name: "AGS",
|
||||
part_number: "",
|
||||
update_version: "1.0.0",
|
||||
};
|
||||
|
||||
const UploadProgress = (props) => {
|
||||
const { uploadProgress, uploadStatus, uploadFileIndex, uploadedFiles } =
|
||||
useManifestsContext();
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [completed, setCompleted] = useState(0);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const x = uploadedFiles.reduce(
|
||||
(current, { file }) => current + file.size,
|
||||
0
|
||||
);
|
||||
setTotal(x);
|
||||
}, [uploadedFiles]);
|
||||
|
||||
useEffect(() => {
|
||||
if (uploadFileIndex === 0 || uploadFileIndex >= uploadedFiles.length)
|
||||
return;
|
||||
let uploaded = 0;
|
||||
uploadedFiles.forEach(({ file }, i) => {
|
||||
if (i < uploadFileIndex) uploaded += file.size;
|
||||
});
|
||||
setCompleted(uploaded);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [uploadFileIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
if (total === 0 || uploadFileIndex >= uploadedFiles.length) return;
|
||||
const { file } = uploadedFiles[uploadFileIndex];
|
||||
const uploaded = completed + file.size * uploadProgress;
|
||||
const x = Math.min(99, Math.floor((uploaded / total) * 100));
|
||||
setProgress(x);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [uploadProgress, completed]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid container>
|
||||
<Grid xs={12}>
|
||||
<Typography align="center">
|
||||
{`File ${uploadFileIndex + 1} of ${
|
||||
uploadedFiles.length
|
||||
}. ${uploadStatus}`}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container alignContent="center" spacing={0}>
|
||||
<Grid xs={11}>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={progress}
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid xs={1} alignContent="flex-end" align="right">
|
||||
<Button onClick={props.onCancel}>Cancel</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
import ManifestECUList from "../../Controls/ManifestECUList";
|
||||
import ManifestUploadProgress from "../../Controls/ManifestUploadProgress";
|
||||
|
||||
const MainForm = () => {
|
||||
const { createManifest, cancelUpload, busy } = useManifestsContext();
|
||||
const { createManifest, cancelUpload, busy } = useManifestCreateContext();
|
||||
const { token } = useUserContext();
|
||||
const { setMessage, setTitle, setSitePath } = useStatusContext();
|
||||
const [redirect, setRedirect] = useState(null);
|
||||
const [fileIndex, setFileIndex] = useState(0);
|
||||
const [ecuFiles, setECUFiles] = useState([]);
|
||||
const classes = useStyles();
|
||||
const packagenameEl = useRef(null);
|
||||
const versionEl = useRef(null);
|
||||
const descEl = useRef(null);
|
||||
const releasenotesEl = useRef(null);
|
||||
|
||||
const getNewFile = (file) => {
|
||||
setFileIndex(fileIndex + 1);
|
||||
return Object.assign(
|
||||
{ data_id: fileIndex, filename: file.name, file },
|
||||
FileTemplate
|
||||
);
|
||||
};
|
||||
|
||||
const addFile = (file) => {
|
||||
setECUFiles(ecuFiles.concat(getNewFile(file)));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTitle("Create Deployments");
|
||||
setSitePath([
|
||||
@@ -137,7 +49,6 @@ const MainForm = () => {
|
||||
version: versionEl.current.value,
|
||||
description: descEl.current.value,
|
||||
releasenotes: releasenotesEl.current.value,
|
||||
files: ecuFiles,
|
||||
};
|
||||
const manifest = await createManifest(formData, authToken);
|
||||
|
||||
@@ -216,25 +127,9 @@ const MainForm = () => {
|
||||
inputRef={releasenotesEl}
|
||||
/>
|
||||
<Typography variant="h6">ECU Files</Typography>
|
||||
<ECUFilesList data={ecuFiles} onChange={setECUFiles} />
|
||||
<DropzoneArea
|
||||
id="dropzone"
|
||||
dropzoneText="Add Files"
|
||||
maxFileSize={1e9}
|
||||
filesLimit={1000}
|
||||
showAlerts={false}
|
||||
showPreviewsInDropzone={false}
|
||||
onDrop={(files) => {
|
||||
files.forEach((file) => {
|
||||
addFile(file);
|
||||
});
|
||||
}}
|
||||
onDropRejected={(files) => {
|
||||
setMessage(`Rejected ${files[0].name} too large`);
|
||||
}}
|
||||
/>
|
||||
<ManifestECUList />
|
||||
{busy ? (
|
||||
<UploadProgress onCancel={cancelUpload} />
|
||||
<ManifestUploadProgress onCancel={cancelUpload} />
|
||||
) : (
|
||||
<Button
|
||||
type="submit"
|
||||
@@ -255,8 +150,8 @@ const MainForm = () => {
|
||||
|
||||
export default function FileUploadForm() {
|
||||
return (
|
||||
<ManifestsProvider>
|
||||
<ManifestCreateProvider>
|
||||
<MainForm />
|
||||
</ManifestsProvider>
|
||||
</ManifestCreateProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
import React from "react";
|
||||
import SubList from "../../Controls/SubList";
|
||||
import ECUDropDrop from "../../Controls/ECUDropDown";
|
||||
|
||||
const ECUFilesList = ({ data, onChange }) => {
|
||||
const options = [
|
||||
{
|
||||
label: "ID",
|
||||
field: "data_id",
|
||||
readonly: true,
|
||||
},
|
||||
{
|
||||
label: "ECU",
|
||||
field: "name",
|
||||
control: ECUDropDrop,
|
||||
},
|
||||
{
|
||||
label: "Part Number",
|
||||
field: "part_number",
|
||||
},
|
||||
{
|
||||
label: "Version",
|
||||
field: "update_version",
|
||||
},
|
||||
{
|
||||
label: "File",
|
||||
field: "filename",
|
||||
readonly: true,
|
||||
},
|
||||
{
|
||||
label: "",
|
||||
delete: true,
|
||||
},
|
||||
];
|
||||
|
||||
return <SubList data={data} options={options} onChange={onChange} />;
|
||||
};
|
||||
|
||||
export default ECUFilesList;
|
||||
Reference in New Issue
Block a user