Refactored frontend

src/views/alerting/SilencedBox.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+
+import Accordion from "@mui/material/Accordion";
+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 EditIcon from "@mui/icons-material/Edit";
+
+import Stack from "@mui/material/Stack";
+
+export default function SilencingBox(props) {
+  const { silenceEntry, editSilence, removeSilence } = props;
+
+  const {
+    name: testName,
+    method: testMethod,
+    class: testClass,
+    id: silenceId,
+    silencedUntil,
+  } = silenceEntry;
+
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  function Actions() {
+    return (
+      <React.Fragment>
+        <IconButton
+          aria-label="modify"
+          component="span"
+          color="primary"
+          onClick={editSilence}
+        >
+          <EditIcon />
+        </IconButton>
+        <IconButton
+          color="error"
+          aria-label="delete"
+          component="span"
+          onClick={removeSilence}
+        >
+          <DeleteIcon />
+        </IconButton>
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <Accordion expanded={false} disableGutters={true} square>
+      <AccordionSummary
+        style={{
+          backgroundColor: "rgba(0, 0, 0, .03)",
+          flexWrap: "wrap",
+        }}
+      >
+        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
+          {`Test Name: ${testName}`}
+          <br />
+          {`Method: ${testMethod}`}
+          <br />
+          {`Test Class: ${testClass}`}
+          <br />
+          {`Silenced Until: ${silencedUntil} Remaining Time: 2:50`}
+        </Typography>
+
+        <Stack
+          sx={{ ml: "auto", display: { md: "none", lg: "none", xl: "none" } }}
+        >
+          <Actions />
+        </Stack>
+        <Stack
+          direction="row"
+          sx={{
+            ml: "auto",
+            mb: "auto",
+            mt: "auto",
+            display: { xs: "none", sm: "none", md: "block", lg: "block" },
+          }}
+        >
+          <Actions />
+        </Stack>
+      </AccordionSummary>
+    </Accordion>
+  );
+}