More styling and mocking

src/views/alerting/Alerting.jsx

@@ -1,4 +1,5 @@
-import { useState, useContext } from "react";
+import React, { useState, useContext } from "react";
+import {useSilencedAlerts} from "../../Queries.jsx";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import SilencedBox from "./SilencedBox.jsx";
 import SilenceDialog from "./SilenceDialog.jsx";
@@ -13,14 +14,18 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export default function Alerting() {
   const {
-    state: store,
     updateStore,
     silenceRequest,
   } = useContext(StoreContext);
 
+
+const {isLoading, data: silenced} = useSilencedAlerts();
+
   const [silenceEntry, setSilenceEntry] = useState({
     open: false,
     deleteOpen: false,
@@ -56,7 +61,7 @@ export default function Alerting() {
 
   return (
     <div className="alerting">
-      {store.silenced.map((v, i) => (
+      {isLoading? null : silenced.map((v, i) => (
         <SilencedBox
           key={i}
           silenceEntry={v}
@@ -64,6 +69,28 @@ export default function Alerting() {
           removeSilence={removeSilence(v)}
         />
       ))}
+      
+            {(silenced ?? []).length === 0? (
+      <React.Fragment>
+       <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >
+
+    <Typography variant="h4">No alerts silenced! </Typography> </Box>       
+      <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >  <Typography variant="h5">Click the '+' to create a new one!
+ </Typography>
+       </Box>
+        </React.Fragment>
+      ): null}
+      
       <Dialog
         open={silenceEntry.deleteOpen}
         onClose={handleDeleteClose()}