More styling and mocking

src/Dashboard.jsx

@@ -1,13 +1,17 @@
 // Import Contexts
+import { QueryClient, QueryClientProvider} from '@tanstack/react-query'
 import { JobProvider } from "./ctx/JobContext.jsx";
 import { StoreProvider } from "./ctx/StoreContext.jsx";
 import { BrowserRouter } from "react-router-dom";
 // Import Views
 import Views from "./views/Views.jsx";
 
+const queryClient = new QueryClient()
+
 export default function Dashboard() {
   return (
     <div className="qualiteer">
+    <QueryClientProvider client={queryClient}>
       <StoreProvider>
         <JobProvider>
           <BrowserRouter>
@@ -15,6 +19,7 @@ export default function Dashboard() {
           </BrowserRouter>
         </JobProvider>
       </StoreProvider>
+      </QueryClientProvider>
     </div>
   );
 }

src/Queries.jsx

@@ -0,0 +1,27 @@
+import { useQuery } from '@tanstack/react-query'
+
+const QUALITEER_URL = "https://qualiteer.elijahparker3.repl.co/api";
+
+export const useCatalogTests = () => useQuery(['catalogTests'], () =>
+    fetch(`${QUALITEER_URL}/catalog/tests`).then(res =>
+      res.json()
+    )
+  )
+
+export const usePipelineMappings = () => useQuery(['pipelineMappings'], () =>
+    fetch(`${QUALITEER_URL}/catalog/pipeline-mappings`).then(res =>
+      res.json()
+    )
+  )
+
+export const useSilencedAlerts = () => useQuery(['silenced'], () =>
+    fetch(`${QUALITEER_URL}/alerting/silenced`).then(res =>
+      res.json()
+    )
+  )
+
+export const useCurrentlyFailing = () => useQuery(['failing'], () =>
+    fetch(`${QUALITEER_URL}/results/failing`).then(res =>
+      res.json()
+    )
+  )

src/ctx/JobContext.jsx

@@ -72,15 +72,14 @@ export const JobProvider = ({ children }) => {
     return jobFactory({ testNames: ["single"] });
   }
 
-  function jobBuilder(tests) {
-    if (!Array.isArray(tests)) throw Error("Error from within JobContext.jsx");
-    console.log("Would run tests", tests);
-    return jobFactory({ testNames: ["single"] });
+  function pipelineFactory(builderCache) {
+    console.log("Would create pipeline with cache");
+    console.log(builderCache);
+    return jobFactory({testNames: ["single"]});
   }
 
-  function pipelineFactory(builderCache) {}
-
   function jobFactory(builderCache) {
+    if(builderCache.pipelineMasterTrack) return pipelineFactory(builderCache);
     // Find test
     const i = new Initiator(url);
     const jobId = `j${Date.now()}`;
@@ -141,7 +140,6 @@ export const JobProvider = ({ children }) => {
     jobDelete,
     retryAll,
     retrySingle,
-    jobBuilder,
     jobFactory,
   };
   const contextValue = useMemo(() => context, [state, dispatch]);

src/ctx/StoreContext.jsx

@@ -1,66 +1,10 @@
 import React, { useReducer, createContext, useMemo } from "react";
-
 const StoreContext = createContext();
 
 const ACTIONS = {
   UPDATE: "u",
 };
 
-const pipelineMappingsMock = [
-  ["primary", "secondary1", "tertiary1"],
-  ["primary", "secondary1", "tertiary2"],
-  ["primary", "secondary2", "tertiary3"],
-];
-
-const silencedMock = new Array(10).fill(0).map((v, i) => ({
-  name: `Test${i + 1}`,
-  class: `SomeTestClass${i % 2 ? i - 1 : i / 2}`,
-  method: "someMethod",
-  id: Date.now(),
-  silencedUntil: `2022-05-10T16:${2 + i}:33.810Z`,
-}));
-
-const catalogMock = new Array(10).fill(0).map((v, i) => ({
-  name: `Test${i + 1}`,
-  class: `SomeTestClass${i % 2 ? i - 1 : i / 2}`,
-  repo: "Repo",
-  isCompound: i % 5 ? false : true,
-  type: i % 3 ? "api" : "ui",
-}));
-
-const failingMock = new Array(12).fill(0).map((v, i) => ({
-  class: `SomeTestClass${i % 2 ? i - 1 : i / 2}`,
-  name: `TestThatDoesOneThing${i + 1}`,
-  timestamp: `2022-05-10T16:0${i < 10 ? i : i - 10}:33.810Z`,
-  method: `SomeMethod`,
-  silencedUntil: i % 4 ? null : `2022-05-10T16:0${i}:33.810Z`,
-  frequency: "1hour",
-  type: i % 3 ? "api" : "ui",
-  dailyFails: i + 1,
-  screenshot: "https://picsum.photos/1920/1080",
-  recentResults: [1, 0, 0, 1, 0],
-  isCompound: i % 5 ? false : true,
-  failedMessage: `Some Test FailureMessage ${i}`,
-  jobStatus: (() => {
-    switch (i) {
-      case 1:
-        return "o";
-      case 3:
-        return "e";
-      case 4:
-        return "p";
-      case 5:
-        return "a";
-      case 6:
-        return "c";
-      case 8:
-        return "q";
-      default:
-        return null;
-    }
-  })(),
-}));
-
 const localStorage = { setItem: () => {}, getItem: () => {} };
 
 const localSettings = localStorage.getItem("settings");
@@ -78,10 +22,6 @@ const settingsKeys = Object.keys(defaultSettings);
 const initialState = {
   pages: ["failing", "alerting", "jobs", "catalog", "settings", "about"],
   intervals: [],
-  catalog: catalogMock,
-  failing: failingMock,
-  silenced: silencedMock,
-  pipelineMappings: pipelineMappingsMock,
   regions: [],
   catalogSearch: "",
   ...settings,

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