Added display for triggers

src/job-core/JobExtra.jsx

@@ -9,6 +9,7 @@ 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 TimerIcon from "@mui/icons-material/Timer";
 import ReplayIcon from "@mui/icons-material/Replay";
 
 function statusIcon(status) {
@@ -25,6 +26,8 @@ function statusIcon(status) {
       return <DoNotDisturbIcon color="warning" />;
     case jobStatus.QUEUED:
       return <ViewColumnIcon color="secondary" />;
+    case jobStatus.TIMER:
+      return <TimerIcon color="primary" />;
     default:
       return <ReplayIcon />;
   }
@@ -42,6 +45,7 @@ export function useJobExtra() {
 
   function pipelineIcon(pl) {
     const jobStatuses = pipelineJobs(pl).map(({ status }) => status);
+    if (pl.pendingTriggers.length > 0) return statusIcon(jobStatus.TIMER);
     if (jobStatuses.includes(jobStatus.ERROR))
       return statusIcon(jobStatus.ERROR);
     if (jobStatuses.includes(jobStatus.ACTIVE))

src/job-core/PipelineCore.jsx

@@ -37,15 +37,26 @@ export function usePipelineCore() {
 
     const onPipelineTrigger = (p) => {
       const { triggers } = p;
-      for (var t in triggers) {
+      for (const t in triggers) {
         if (t === "__testDelay") continue;
         const delay = triggers[t].__testDelay ?? 0;
         delete triggers[t].__testDelay;
         const plTrigger = { ...p, triggers: triggers[t], __test: t };
         const jobReq = { ...plReq, pipeline: plTrigger };
-        const timer = setTimeout(() => pipelineJob(pl, jobReq), delay);
         const triggerAt = Date.now() + delay;
-        pl.pendingTriggers.push({ testName: t, timer, triggerAt });
+        const testName = t;
+        function removeTrigger() {
+          const i = pl.pendingTriggers.findIndex((pt) => pt.testName === t);
+          if (i < 0) return;
+          pl.pendingTriggers.splice(i, 1);
+        }
+        function launchTrigger() {
+          pipelineJob(pl, jobReq);
+          removeTrigger();
+        }
+        const doTrigger = { removeTrigger, launchTrigger };
+        const timer = setTimeout(launchTrigger, delay);
+        pl.pendingTriggers.push({ testName, timer, triggerAt, ...doTrigger });
       }
     };
     const started = initiator.newPipelineJob(

src/job-core/job-config.js

@@ -5,5 +5,6 @@ export const jobStatus = {
   CANCELED: "c",
   ACTIVE: "a",
   ERROR: "e",
+  TIMER: "t",
 };
 export const socketUrl = "/";

src/views/alerting/Alerting.jsx

@@ -73,7 +73,9 @@ export default function Alerting() {
             justifyContent="center"
             sx={{ flexFlow: "wrap" }}
           >
-            <Typography variant="h4">No alerts silenced! </Typography>{" "}
+            <Typography variant="h4" sx={{ textAlign: "center" }}>
+              No alerts silenced!{" "}
+            </Typography>
           </Box>
           <Box
             display="flex"
@@ -81,8 +83,7 @@ export default function Alerting() {
             justifyContent="center"
             sx={{ flexFlow: "wrap" }}
           >
-            {" "}
-            <Typography variant="h5">
+            <Typography variant="h5" sx={{ textAlign: "center" }}>
               Click the '+' to create a new one!
             </Typography>
           </Box>

src/views/catalog/CatalogBox.jsx

@@ -19,6 +19,8 @@ import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import { asTree, asBranches, as1d } from "@qltr/util/pipelines.js";
 
+import CatalogItemDetails from "./CatalogItemDetails.jsx";
+
 export default function CatalogBox(props) {
   const { catalogTest } = props;
 
@@ -129,9 +131,7 @@ export default function CatalogBox(props) {
         </Stack>
       </AccordionSummary>
       <AccordionDetails>
-        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
-          {"Test info"}
-        </Typography>
+        <CatalogItemDetails catalogTest={catalogTest} />
       </AccordionDetails>
     </Accordion>
   );

src/views/catalog/CatalogItemDetails.jsx

@@ -0,0 +1,45 @@
+import Typography from "@mui/material/Typography";
+export default function CatalogItemDetails(props) {
+  const { catalogTest } = props;
+
+  const {
+    name: testName,
+    class: testClass,
+    isPipeline,
+    description,
+    image,
+    crons,
+    regions,
+    env,
+    tags,
+    projects,
+  } = catalogTest;
+
+  return (
+    <Typography component={"div"} style={{ wordBreak: "break-word" }}>
+      <div sx={{ display: "inline-flex" }}>
+        <span style={{ fontWeight: "bold" }}>Image: </span>
+        {image}
+      </div>
+      <div sx={{ display: "inline-flex" }}>
+        <span style={{ fontWeight: "bold" }}>Env: </span>
+        {env.join(", ")}
+      </div>
+      <div sx={{ display: "inline-flex" }}>
+        <span style={{ fontWeight: "bold" }}>Regions: </span>
+        {regions.join(", ")}
+      </div>
+      <div sx={{ display: "inline-flex" }}>
+        <span style={{ fontWeight: "bold" }}>Crons: </span>
+        {JSON.stringify(crons)}
+      </div>
+      <div sx={{ display: "inline-flex" }}>
+        <span style={{ fontWeight: "bold" }}>Projects: </span>
+        {projects.join(", ")}
+      </div>
+      <div style={{ fontStyle: "italic" }}>
+        {description ?? "No Description Provided!"}
+      </div>
+    </Typography>
+  );
+}

src/views/failing/Failing.jsx

@@ -90,7 +90,9 @@ export default function Failing() {
       <FailingRetry failing={failsLoading ? [] : failing} />
       {!failsLoading && failing.length === 0 && (
         <Box display="flex" alignItems="center" justifyContent="center">
-          <Typography variant="h4">No tests failing!</Typography>
+          <Typography variant="h4" sx={{ textAlign: "center" }}>
+            No tests failing!
+          </Typography>
         </Box>
       )}
       {!failsLoading &&

src/views/jobs/JobPipelineDisplay.jsx

@@ -1,5 +1,6 @@
-import React, { useContext } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
+import moment from "moment";
 import { useJobCore, jobStatus } from "@qltr/jobcore";
 
 import Box from "@mui/material/Box";
@@ -38,17 +39,36 @@ function JobPipelineDisplay(props) {
 
   const nav = useNavigate();
 
-  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [time, setTime] = useState(Date.now());
+  const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => setAnchorEl(event.currentTarget);
   const handleClose = () => setAnchorEl(null);
 
+  const branches = selectedPipelineBranches(pipeline);
+  const pipelineTriggers = branches.map(({ name }) =>
+    pipeline.pendingTriggers.find(({ testName }) => testName === name)
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => setTime(Date.now()), 1000);
+    return () => clearInterval(interval);
+  }, []);
+
   const selectJob = (testName) => () => {
+    const pt = pipeline.pendingTriggers.find(
+      ({ testName }) => testName === name
+    );
+    if (pt) return selectTimer(pt);
     const job = findPipelineJobByTestName(pipeline, testName);
     if (!job) return;
     toJob(job.jobId);
   };
 
+  const selectTimer = (pt) => {
+    console.log("Selected timer:", pt);
+  };
+
   function cancelPipeline() {
     pipelineCancel(pipeline.id);
   }
@@ -69,12 +89,22 @@ function JobPipelineDisplay(props) {
   }
 
   function boxIcon(name) {
+    if (pipeline.pendingTriggers.find(({ testName }) => testName === name))
+      return jobIcon({ status: jobStatus.TIMER });
     if (pipeline.isCanceled) return <DoNotDisturbIcon color="warning" />;
     const job = findPipelineJobByTestName(pipeline, name);
     if (!job) return <ViewColumnIcon color="secondary" />;
     return jobIcon(job);
   }
 
+  function timerDisplay(name) {
+    const pt = pipeline.pendingTriggers.find(
+      ({ testName }) => testName === name
+    );
+    if (!pt) return;
+    return moment(moment(pt.triggerAt).diff(moment())).format("mm:ss");
+  }
+
   return (
     <Box>
       <AppBar
@@ -91,7 +121,18 @@ function JobPipelineDisplay(props) {
             <IconButton onClick={() => nav(-1)}>
               <ArrowBackIcon />
             </IconButton>
-            <Typography variant="h6" sx={{ ml: "auto", mr: "auto" }}>
+            <Typography
+              variant="h6"
+              component="span"
+              sx={{
+                ml: "auto",
+                mr: "auto",
+                textOverflow: "ellipsis",
+                display: "block",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+              }}
+            >
               {pipeline.id}
             </Typography>
             <IconButton onClick={handleClick}>
@@ -101,7 +142,7 @@ function JobPipelineDisplay(props) {
         </Box>
       </AppBar>
       <Toolbar disableGutters />
-      {selectedPipelineBranches(pipeline).map((track, i) => (
+      {branches.map((track, i) => (
         <React.Fragment key={i}>
           <Typography variant="h6">{i + 1}</Typography>
           <Box>
@@ -125,11 +166,19 @@ function JobPipelineDisplay(props) {
                   >
                     {test.name}
                   </Typography>
-                  <Stack sx={{ ml: "auto" }}>
-                    <IconButton aria-label="retry" component="span">
-                      {boxIcon(test.name)}
-                    </IconButton>
-                  </Stack>
+                  <div style={{ marginLeft: "auto", display: "inline-flex" }}>
+                    <Typography
+                      component={"span"}
+                      style={{ wordBreak: "break-word", margin: "auto 0" }}
+                    >
+                      {timerDisplay(test.name)}
+                    </Typography>
+                    <Stack sx={{ ml: "auto" }}>
+                      <IconButton aria-label="retry" component="span">
+                        {boxIcon(test.name)}
+                      </IconButton>
+                    </Stack>
+                  </div>
                 </AccordionSummary>
               </Accordion>
             ))}

src/views/jobs/JobPiplinePendingView.jsx

@@ -91,7 +91,7 @@ export default function JobPipelinePendingView(props) {
               <ArrowBackIcon />
             </IconButton>
             <Typography variant="h6" component="span" sx={{ ml: "auto" }}>
-              {job.name}
+              {job.jobId}
             </Typography>
             {job.isPipeline && (
               <IconButton>

src/views/jobs/JobView.jsx

@@ -91,8 +91,18 @@ export default function JobView(props) {
             <IconButton onClick={() => nav(-1)}>
               <ArrowBackIcon />
             </IconButton>
-            <Typography variant="h6" component="span" sx={{ ml: "auto" }}>
-              {job.name}
+            <Typography
+              variant="h6"
+              component="span"
+              sx={{
+                ml: "auto",
+                textOverflow: "ellipsis",
+                display: "block",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+              }}
+            >
+              {job.jobId}
             </Typography>
             {job.isPipeline && (
               <IconButton>

src/views/jobs/Jobs.jsx

@@ -55,7 +55,9 @@ export default function Jobs() {
             justifyContent="center"
             sx={{ flexFlow: "wrap" }}
           >
-            <Typography variant="h4">No jobs found!</Typography>
+            <Typography variant="h4" sx={{ textAlign: "center" }}>
+              No jobs found!
+            </Typography>
           </Box>
           <Box
             display="flex"
@@ -63,7 +65,7 @@ export default function Jobs() {
             justifyContent="center"
             sx={{ flexFlow: "wrap" }}
           >
-            <Typography variant="h5">
+            <Typography variant="h5" sx={{ textAlign: "center" }}>
               Click the '+' to start a new one!
             </Typography>
           </Box>