Merge CEC-394 Car update log (#82)

src/components/Controls/CarUpdateStatusProgress/index.jsx

@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from "react";
+import Typography from "@material-ui/core/Typography";
+import { CheckCircle, RadioButtonUnchecked, Error } from "@material-ui/icons";
+import clsx from "clsx";
+
+import CircularProgress from "../CircularProgress";
+import useStyles from "../../useStyles";
+
+const Progress = ({ value }) => {
+  const classes = useStyles();
+
+  if (value === 100)
+    return (
+      <CheckCircle
+        className={clsx(classes.progressIcon, classes.progressSuccess)}
+      />
+    );
+  if (value >= 0) return <CircularProgress value={value} />;
+  if (value < -1)
+    return (
+      <Error className={clsx(classes.progressIcon, classes.progressError)} />
+    );
+
+  return <RadioButtonUnchecked className={classes.progressIcon} />;
+};
+
+const CarUpdateStatus = ({ status }) => {
+  const classes = useStyles();
+  const [received, setReceived] = useState(-1);
+  const [approval, setApproval] = useState(-1);
+  const [precondition, setPrecondition] = useState(-1);
+  const [download, setDownload] = useState(-1);
+  const [install, setInstall] = useState(-1);
+  const [cleanup, setCleanup] = useState(-1);
+  const [updated, setUpdated] = useState(-1);
+
+  useEffect(() => {
+    /* eslint-disable no-fallthrough, default-case */
+    if (!status) return;
+    // update previous steps
+    switch (status.msg) {
+      case "cleanup_success":
+        setUpdated(100);
+      case "package_install_complete":
+        setInstall(100);
+      case "install_start":
+      case "installing":
+      case "install_complete":
+      case "install_error":
+      case "package_download_complete":
+        setDownload(100);
+      case "download_start":
+      case "downloading":
+      case "download_complete":
+      case "download_error":
+      case "install_approval_received":
+        setApproval(100);
+      case "requirements_succeeded":
+        setPrecondition(100);
+      case "manifest_received":
+        setReceived(100);
+    }
+    // update progress and errors
+    switch (status.msg) {
+      case "installing":
+        setInstall(status.progress);
+        break;
+      case "install_error":
+        setInstall(-100);
+        break;
+      case "downloading":
+        setDownload(status.progress);
+        break;
+      case "download_error":
+        setDownload(-100);
+        break;
+      case "cleanup_failed":
+        setCleanup(-100);
+        break;
+    }
+  }, [status]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+      }}
+    >
+      <div className={classes.textCenterAlign}>
+        <Progress value={100} />
+        <Typography>Pending</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={received} />
+        <Typography>Recieved</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={approval} />
+        <Typography>Approved</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={precondition} />
+        <Typography>Precondition</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={download} />
+        <Typography>Download</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={install} />
+        <Typography>Install</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={cleanup} />
+        <Typography>Clean up</Typography>
+      </div>
+      <div className={classes.textCenterAlign}>
+        <Progress value={updated} />
+        <Typography>Updated</Typography>
+      </div>
+    </div>
+  );
+};
+
+export default CarUpdateStatus;