Added display for triggers

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>