Microsave

src/views/components/FailingBox.jsx

@@ -0,0 +1,166 @@
+import React, { useState, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Typography from "@mui/material/Typography";
+
+import IconButton from "@mui/material/IconButton";
+import DeleteIcon from "@mui/icons-material/Delete";
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import ReplayIcon from "@mui/icons-material/Replay";
+import PhotoCameraIcon from "@mui/icons-material/PhotoCamera";
+
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import PendingIcon from "@mui/icons-material/Pending";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import DoNotDisturbIcon from "@mui/icons-material/DoNotDisturb";
+
+import Badge from "@mui/material/Badge";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+
+const stopPropagation = (e) => e.stopPropagation() && e.preventDefault();
+
+export default function FailingBox(props) {
+  const { failingTest } = props;
+
+  const {
+    class: testClass,
+    name: testName,
+    timestamp,
+    silencedUntil,
+    type,
+    dailyFails,
+    screenshot: screenshotUrl,
+    recentResults,
+    failedMessage,
+    isCompound,
+    jobStatus: testJobStatus,
+  } = failingTest;
+
+  const { state: jobState, retryTest, retryJobStatus } = useContext(JobContext);
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const [open, setOpen] = useState(false);
+
+  const toggleOpen = () => setOpen(!open);
+
+  function badgeColor() {
+    if (dailyFails === 1) return "primary";
+    else if (dailyFails === 2) return "secondary";
+    else if (dailyFails < 6) return "warning";
+    return "error";
+  }
+
+  function jobIcon() {
+    switch (testJobStatus) {
+      case jobStatus.OK:
+        return <CheckIcon color="success" />;
+      case jobStatus.ERROR:
+        return <ClearIcon color="error" />;
+      case jobStatus.PENDING:
+        return <PendingIcon color="info" />;
+      case jobStatus.ACTIVE:
+        return <VisibilityIcon color="primary" />;
+      case jobStatus.CANCELED:
+        return <DoNotDisturbIcon color="warning" />;
+      case jobStatus.QUEUED:
+        return <ViewColumnIcon color="secondary" />;
+      default:
+        return <ReplayIcon />;
+    }
+  }
+
+  function Actions() {
+    return (
+      <React.Fragment>
+        <IconButton aria-label="photo" component="span">
+          <PhotoCameraIcon />
+        </IconButton>
+
+        <IconButton aria-label="retry" component="span">
+          {jobIcon()}
+        </IconButton>
+
+        <IconButton
+          aria-label="silence"
+          component="span"
+          color={silencedUntil ? "primary" : "default"}
+        >
+          <NotificationsIcon />
+        </IconButton>
+        <IconButton color="error" aria-label="delete" component="span">
+          <DeleteIcon />
+        </IconButton>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <Accordion
+      expanded={open}
+      onChange={toggleOpen}
+      disableGutters={true}
+      square
+    >
+      <AccordionSummary
+        style={{
+          backgroundColor: "rgba(0, 0, 0, .03)",
+          flexWrap: "wrap",
+        }}
+      >
+        <Badge
+          sx={{ mr: 2 }}
+          color={badgeColor()}
+          badgeContent={dailyFails}
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+        ></Badge>
+        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
+          {`${testClass}#`}
+          <Box fontWeight="bold" display="inline">
+            {testName}{" "}
+          </Box>
+          <br />
+          <span className="recent-results">
+            {recentResults.map(
+              (v, i) =>
+                (v && <CheckIcon key={i} color="success" />) || (
+                  <ClearIcon key={i} color="error" />
+                )
+            )}
+          </span>
+          {isCompound && <ViewColumnIcon />}
+        </Typography>
+
+        <Stack
+          onClick={stopPropagation}
+          sx={{ ml: "auto", display: { md: "none", lg: "none", xl: "none" } }}
+        >
+          <Actions />
+        </Stack>
+        <Stack
+          onClick={stopPropagation}
+          direction="row"
+          sx={{
+            ml: "auto",
+            display: { xs: "none", sm: "none", md: "flex", lg: "flex" },
+          }}
+        >
+          <Actions />
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography>{failedMessage}</Typography>
+      </AccordionDetails>
+    </Accordion>
+  );
+}