More styling and mocking

src/views/Navbar.jsx

@@ -1,6 +1,7 @@
 import { useContext, useState } from "react";
-import StoreContext from "../ctx/StoreContext.jsx";
+import {useCurrentlyFailing} from "../Queries.jsx";
 import JobContext from "../ctx/JobContext.jsx";
+import StoreContext from "../ctx/StoreContext.jsx";
 
 import { Link, useLocation } from "react-router-dom";
 import AppBar from "@mui/material/AppBar";
@@ -23,16 +24,18 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import SettingsIcon from "@mui/icons-material/Settings";
 import WarningIcon from "@mui/icons-material/Warning";
 import InfoIcon from "@mui/icons-material/Info";
+import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 
 const drawerWidth = 250;
 
 export default function Navbar(props) {
   const { state: jobState } = useContext(JobContext);
   const { state: store } = useContext(StoreContext);
+  const {isLoading, data: failing} = useCurrentlyFailing();
   const pages = store.pages;
   const icons = [
-    <Badge badgeContent={store.failing.length} color="error">
-      <WarningIcon />
+    <Badge badgeContent={(failing ?? []).length} color="error">
+      {(failing ?? []).length > 0 ? <WarningIcon />: <SentimentSatisfiedAltIcon/>}
     </Badge>,
     <NotificationsIcon />,
     <Badge badgeContent={jobState.jobs.length} color="primary">
@@ -66,7 +69,7 @@ export default function Navbar(props) {
     if (location.pathname !== "/qualiteer/failing") return pathStr;
     return (
       <SideBadge
-        badgeContent={store.failing.length}
+        badgeContent={(failing ?? []).length}
         color="error"
         overlap="circular"
       >

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()}

src/views/catalog/Catalog.jsx

@@ -3,19 +3,13 @@ import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext from "../../ctx/JobContext.jsx";
 import CatalogBox from "./CatalogBox.jsx";
 import CatalogSearch from "./CatalogSearch.jsx";
-
+import {useCatalogTests} from "../../Queries.jsx";
 import TextField from "@mui/material/TextField";
 
 export default function Catalog() {
-  const {
-    state: jobState,
-    dispatch: jobDispatch,
-    jobUpdate,
-    jobCreate,
-  } = useContext(JobContext);
 
   const { state: store, updateStore } = useContext(StoreContext);
-
+  const {isLoading, data: tests} = useCatalogTests();
   const handleSearchChange = (e) =>
     updateStore({ catalogSearch: e.target.value });
 
@@ -35,7 +29,7 @@ export default function Catalog() {
         clearOnUnmount
       />
       <h6>{store.catalogSearch}</h6>
-      {store.catalog.map((v, i) => (
+      {isLoading ? null : tests.map((v, i) => (
         <CatalogBox key={i} catalogTest={v} />
       ))}
     </div>

src/views/catalog/CatalogBox.jsx

@@ -29,7 +29,7 @@ export default function CatalogBox(props) {
 
   const { state: store, updateStore } = useContext(StoreContext);
 
-  const { state: jobState, jobBuilder } = useContext(JobContext);
+  const { state: jobState, jobFactory} = useContext(JobContext);
 
   const [open, setOpen] = useState(false);
 
@@ -38,7 +38,7 @@ export default function CatalogBox(props) {
   const runTest = (e) => {
     e.preventDefault();
     e.stopPropagation();
-    const jobId = jobBuilder([catalogTest]);
+    const jobId = jobFactory({testNames: [testName]});
     if (store.focusJob) navigate(`/qualiteer/jobs#${jobId}`);
   };
 

src/views/failing/Failing.jsx

@@ -1,13 +1,12 @@
 import { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
+import {useCurrentlyFailing} from "../../Queries.jsx";
 import StoreContext from "../../ctx/StoreContext.jsx";
 import JobContext from "../../ctx/JobContext.jsx";
 import SilenceDialog from "../alerting/SilenceDialog.jsx";
 import FailingBox from "./FailingBox.jsx";
 
 import SpeedDial from "@mui/material/SpeedDial";
-import SpeedDialAction from "@mui/material/SpeedDialAction";
-import SpeedDialIcon from "@mui/material/SpeedDialIcon";
 
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -17,6 +16,9 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 
 import ReplayIcon from "@mui/icons-material/Replay";
+import Box from "@mui/material/Box";
+
+import Typography from "@mui/material/Typography";
 
 export default function Failing() {
   const { state: jobState, retryAll } = useContext(JobContext);
@@ -26,7 +28,7 @@ export default function Failing() {
     updateStore,
     silenceRequest,
   } = useContext(StoreContext);
-  const { failing } = store;
+  const {isLoading, data: failing} = useCurrentlyFailing();
 
   const [silenceEntry, setSilenceEntry] = useState({ open: false });
 
@@ -56,7 +58,7 @@ export default function Failing() {
 
   return (
     <div className="failing">
-      {failing.map((v, i) => (
+      {isLoading? null :failing.map((v, i) => (
         <FailingBox key={i} failingTest={v} silenceClick={editSilence(v)} />
       ))}
 
@@ -85,13 +87,24 @@ export default function Failing() {
         onClose={handleSilenceClose}
         silence={silenceEntry}
       />
+      {(failing ?? []).length === 0? (    <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Typography variant="h4">No tests failing!</Typography>
+      </Box>
+    
+      
+      ): null}
+      {(failing ?? []).length ===0? null :(
       <SpeedDial
         ariaLabel="Retry All"
         sx={{ position: "fixed", bottom: 16, right: 16 }}
         icon={<ReplayIcon />}
         onClick={retryAllClick}
         open={false}
-      />
+      />)}
     </div>
   );
 }

src/views/jobs/Jobs.jsx

@@ -1,10 +1,12 @@
-import { useState, useContext, useEffect } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import JobContext from "../../ctx/JobContext.jsx";
 import JobBox from "./JobBox.jsx";
 import JobView from "./JobView.jsx";
 import JobBuilder from "./builder/JobBuilder.jsx";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export default function Jobs() {
   const { state: jobState } = useContext(JobContext);
@@ -19,6 +21,26 @@ export default function Jobs() {
 
   return (
     <div className="jobs">
+      {jobState.jobs.length === 0? (
+      <React.Fragment>
+       <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >
+
+    <Typography variant="h4">No jobs found! </Typography> </Box>       
+      <Box 
+        display="flex" 
+        alignItems="center"
+        justifyContent="center"
+         sx={{flexFlow: "wrap"}}
+      >  <Typography variant="h5">Click the '+' to start a new one!
+ </Typography>
+       </Box>
+        </React.Fragment>
+      ): null}
       <JobBuilder />
       {location.hash === "" &&
         jobState.jobs.map((v, i) => (

src/views/jobs/builder/PipelineConfirm.jsx

@@ -6,6 +6,7 @@ import DialogContent from "@mui/material/DialogContent";
 function PipelineConfirm(props) {
   const { cache, back, start } = props;
 
+  
   return (
     <React.Fragment>
       <DialogContent>

src/views/jobs/builder/PipelineSelector.jsx

@@ -1,6 +1,5 @@
 import React, { useContext } from "react";
-import StoreContext from "../../../ctx/StoreContext.jsx";
-
+import {usePipelineMappings} from "../../../Queries.jsx";
 import Button from "@mui/material/Button";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -12,14 +11,19 @@ import Stack from "@mui/material/Stack";
 
 function PipelineSelector(props) {
   const { cache, setCache, cancel, next } = props;
-  const { state: store } = useContext(StoreContext);
-  const { pipelineMappings } = store;
-  const primaryMappings = {};
+  const {isLoading, data: pipelineMappings} = usePipelineMappings();
+
+  const primaryMappings = () =>{
+    if(isLoading) return {};
+    const primaryMappings = {};
   for (var pm of pipelineMappings) {
     if (!(pm[0] in primaryMappings)) primaryMappings[pm[0]] = [];
     primaryMappings[pm[0]].push(pm);
   }
-
+  return primaryMappings;
+  };
+  
+  
   const selectPrimary = (primarySelectedMappings) => () => {
     setCache({ primarySelectedMappings });
   };
@@ -27,13 +31,13 @@ function PipelineSelector(props) {
   return (
     <React.Fragment>
       <DialogContent>
-        {Object.keys(primaryMappings).map((k, i) => (
+        {Object.keys(primaryMappings()).map((k, i) => (
           <Accordion
             expanded={false}
             disableGutters={true}
             square
             key={i}
-            onClick={selectPrimary(primaryMappings[k])}
+            onClick={selectPrimary(primaryMappings()[k])}
           >
             <AccordionSummary
               style={{
@@ -48,7 +52,7 @@ function PipelineSelector(props) {
               >
                 {k}
               </Typography>
-              <Stack sx={{ ml: "auto" }}>{primaryMappings[k].length}</Stack>
+              <Stack sx={{ ml: "auto" }}>{(primaryMappings[k] ?? []).length}</Stack>
             </AccordionSummary>
           </Accordion>
         ))}