Super Pipelines and display

src/ctx/JobContext.jsx

@@ -25,14 +25,6 @@ const initialState = {
   pipelines: [],
 };
 
-/*
-pipelines: [{tracks:[
-{
-
-}
-]}]
-*/
-
 const reducer = (state, action) => {
   // Current Jobs
   const { jobs, pipelines } = state;
@@ -80,7 +72,7 @@ export const JobProvider = ({ children }) => {
     return jobFactory({ testNames: ["single"] });
   }
 
-  function pipelineComponentJob(jobPipeline, testName) {
+  function pipelineComponentJob(jobPipeline, pipelineReq) {
     const i = new Initiator(url);
     const jobId = `j${Date.now()}`;
     const job = {
@@ -88,15 +80,14 @@ export const JobProvider = ({ children }) => {
       status: jobStatus.PENDING,
       jobId,
       isPipeline: true,
-      builderCache: {},
       initiator: i,
+      pipelineId: jobPipeline.id,
+      branchId: pipelineReq.pipeline.__test
     };
     const request = {
-      testName,
       image: "node",
-      type: "pipeline",
       name: jobId,
-      pipelineTriggers: "secondary",
+      pipeline: pipelineReq,
     };
 
     jobCreate(job);
@@ -113,8 +104,26 @@ export const JobProvider = ({ children }) => {
       job.status = c === 0 ? jobStatus.OK : jobStatus.ERROR;
       jobUpdate({ ...job }, jobId);
     };
-    const onPipelineTrigger = (trigger) => {
-      console.log("Got trigger", trigger);
+    const onPipelineTrigger = (p) => {
+      const { triggers } = p;
+  for (var t in triggers) {
+          const delay = triggers[t].__testDelay ?? 0;
+          delete triggers[t].__testDelay;
+          const jobReq = {
+            ...request,
+            pipeline: {
+              ...pipeline, 
+              triggers: triggers[t],__test:t 
+            },
+          };
+          jobPipeline.pendingTriggers[t].push(
+    {
+      
+      testName: t,
+      timer: setTimeout(() =>  pipelineComponentJob(jobPipeline, jobReq),delay), 
+      triggerAt: Date.now() + delay
+    });
+    }
     };
     const started = i.newPipelineJob(
       request,
@@ -127,10 +136,16 @@ export const JobProvider = ({ children }) => {
 
   function pipelineFactory(builderCache) {
     console.log("Would create pipeline with cache");
-    console.log(builderCache);
-    return pipelineComponentJob(state.pipelines, builderCache.branches[0][0]);
-    //    return jobId;
-    /*return jobFactory({testNames: ["primary"]});*/
+    const { tree, branches } = builderCache;
+    const __test = Object.keys(tree)[0];
+    const pipelineReq = {image: "node", pipeline:{__test, triggers: { ...tree[__test] }}}
+    const id = `pij${Date.now()}`;
+    const pipeline = {id, branches, pendingTriggers: {} };
+    const {pipelines} = state;
+    pipelines.push(pipeline);
+    updatePipelines([...pipelines]);
+    return pipelineComponentJob(pipeline, pipelineReq);
+  
   }
 
   function jobCancel(jobId) {

src/views/jobs/JobPipelineBox.jsx

@@ -0,0 +1,50 @@
+import React, { useState, useContext } from "react";
+import StoreContext from "../../ctx/StoreContext.jsx";
+import JobContext, { jobStatus } from "../../ctx/JobContext.jsx";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Typography from "@mui/material/Typography";
+
+import IconButton from "@mui/material/IconButton";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+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 Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+
+export default function JobPipelineBox(props) {
+  const { pipeline } = props;
+
+  function jobIcon() {
+    return <ViewColumnIcon />;
+  }
+
+  return (
+    <Accordion expanded={false} disableGutters={true} square>
+      <AccordionSummary
+        style={{
+          backgroundColor: "rgba(0, 0, 0, .03)",
+          flexWrap: "wrap",
+        }}
+      >
+        <Typography
+          component={"span"}
+          style={{ wordBreak: "break-word", margin: "auto 0" }}
+        >
+          {pipeline.id}
+        </Typography>
+        <Stack sx={{ ml: "auto" }}>
+          <IconButton aria-label="" component="span">
+            {jobIcon()}
+          </IconButton>
+        </Stack>
+      </AccordionSummary>
+    </Accordion>
+  );
+}

src/views/jobs/JobPipelineDisplay.jsx

@@ -0,0 +1,63 @@
+import React, { useContext } from "react";
+import {useNavigate} from "react-router-dom";
+import JobContext from "../../ctx/JobContext.jsx";
+import Button from "@mui/material/Button";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+
+import Accordion from "@mui/material/Accordion";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+
+function JobPipelineDisplay(props) {
+  const { back, pipeline } = props;
+  const {state: jobState} = useContext(JobContext);
+  const navigate = useNavigate();
+  const pipelineJobs = jobState.jobs.filter((j)=>j.isPipeline && j.pipelineId === pipeline.id);
+  
+  const selectJob = (testName) => () =>{
+    const job  = pipelineJobs.find((j)=>j.branchId === testName);   
+    if(!job) return;        navigate(`/qualiteer/jobs#${job.jobId}`);
+  }
+  
+  return (
+    <React.Fragment>
+        <h3>{}</h3>
+        {pipeline.branches.map((track, i) => (
+          <React.Fragment key={i}>
+            <Typography variant="h6">{i + 1}</Typography>
+            <Box>
+              {track.map((test, j) => (
+                <Accordion
+                  expanded={false}
+                  disableGutters={true}
+                  square
+                  key={j}
+                  onClick={selectJob(test)}
+                >
+                  <AccordionSummary
+                    style={{
+                      backgroundColor: "rgba(0, 0, 0, .03)",
+                      flexWrap: "wrap",
+                    }}
+                  >
+                    <Typography
+                      component={"span"}
+                      style={{ wordBreak: "break-word", margin: "auto 0" }}
+                    >
+                      {test}
+                    </Typography>
+                    <Stack sx={{ ml: "auto" }}>I</Stack>
+                  </AccordionSummary>
+                </Accordion>
+              ))}
+            </Box>
+          </React.Fragment>
+        ))}
+    </React.Fragment>
+  );
+}
+
+export default JobPipelineDisplay;

src/views/jobs/JobView.jsx

@@ -72,7 +72,10 @@ export default function JobView(props) {
     cb();
   };
 
+  
+  
   function navigateToJobs() {
+    if(job.isPipeline) return navigate(`/qualiteer/jobs#p${job.pipelineId}`)
     navigate("/qualiteer/jobs");
   }
 

src/views/jobs/Jobs.jsx

@@ -3,7 +3,9 @@ import { useLocation, useNavigate } from "react-router-dom";
 
 import JobContext from "../../ctx/JobContext.jsx";
 import JobBox from "./JobBox.jsx";
+import JobPipelineBox from "./JobPipelineBox.jsx";
 import JobView from "./JobView.jsx";
+import JobPipelineDisplay from "./JobPipelineDisplay.jsx";
 import JobBuilder from "./builder/JobBuilder.jsx";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
@@ -15,7 +17,11 @@ export default function Jobs() {
 
   useEffect(() => {
     const jobName = location.hash.slice(1);
-    if (!jobName || jobState.jobs.find((job) => job.name === jobName)) return;
+    const pipelineId = jobName.slice(1);
+    const noPipeline = !jobName || jobState.pipelines.find((p)=>p.id ===pipelineId);
+    
+    const noJob = !jobName || jobState.jobs.find((job) => job.name === jobName)
+    if(!noPipeline || !noJob) return;
     navigate("/qualiteer/jobs");
   });
 
@@ -45,8 +51,9 @@ export default function Jobs() {
         </React.Fragment>
       ) : null}
       <JobBuilder />
-      {location.hash === "" &&
-        jobState.jobs
+      {location.hash === "" &&(
+      <React.Fragment>
+        {jobState.jobs
           .filter((j) => !j.isPipeline)
           .map((v, i) => (
             <a
@@ -55,10 +62,15 @@ export default function Jobs() {
               style={{ textDecoration: "none" }}
             >
               <JobBox job={v} />
-            </a>
-          ))}
-      {jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (
-        <JobView
+            </a>))}
+        {jobState.pipelines.map((p,i)=><a key={i} style={{textDecoration: "none"}} href={`/qualiteer/jobs#p${p.id}`}>
+          <JobPipelineBox pipeline={p}/>
+        </a>)}
+      </React.Fragment>)
+      }
+      
+      { location.hash[1] === "p"? <JobPipelineDisplay pipeline={jobState.pipelines.find((p)=>p.id===location.hash.slice(2))}/> :
+        jobState.jobs.find((job) => job.name === location.hash.slice(1)) && (<JobView
           job={jobState.jobs.find((job) => job.name === location.hash.slice(1))}
         />
       )}