#1377 Unified view of the pipeline lifecycle - using a list

ontrack-web-core/components/extension/environments/SlotPipelineSteps.js

@@ -1,63 +1,63 @@
 import {useQuery} from "@components/services/useQuery";
 import {gql} from "graphql-request";
-import {Steps} from "antd";
+import {List} from "antd";
 import {useEffect, useState} from "react";
 import {
-    deploymentCandidateStatusStep,
-    deploymentDoneStatusStep,
-    deploymentRunningStatusStep
+    DeploymentCandidateStatusStep,
+    DeploymentDoneStatusStep,
+    DeploymentRunningStatusStep
 } from "@components/extension/environments/deployment/steps/deploymentStatusSteps";
-import {
-    candidateAdmissionRuleStep
-} from "@components/extension/environments/deployment/steps/candidateAdmissionRuleStep";
-import {deploymentWorkflowStep} from "@components/extension/environments/deployment/steps/deploymentWorkflowStep";
 import {
     deploymentCancelButtonStep,
-    deploymentFinishButtonStep,
-    deploymentRunButtonStep
+    DeploymentFinishButtonStep,
+    DeploymentRunButtonStep
 } from "@components/extension/environments/deployment/steps/deploymentActionSteps";
+import {
+    CandidateAdmissionRuleStep
+} from "@components/extension/environments/deployment/steps/CandidateAdmissionRuleStep";
+import {DeploymentWorkflowStep} from "@components/extension/environments/deployment/steps/DeploymentWorkflowStep";
 
-const candidateStatus = (deployment) => {
-    return deploymentCandidateStatusStep({deployment})
+function CandidateStatus({deployment}) {
+    return <DeploymentCandidateStatusStep deployment={deployment}/>
 }
 
 const candidateAdmissionRules = (pipeline) => {
     return pipeline.admissionRules.map(rule =>
-        candidateAdmissionRuleStep(pipeline, rule)
+        <CandidateAdmissionRuleStep key={rule.admissionRuleConfig.id} rule={rule}/>
     )
 }
 
 const candidateWorkflows = (pipeline) => {
     return pipeline.slot.candidateWorkflows.map(slotWorkflow =>
-        deploymentWorkflowStep(pipeline, slotWorkflow)
+        <DeploymentWorkflowStep key={slotWorkflow.id} slotWorkflow={slotWorkflow}/>
     )
 }
 
 const runButton = (deployment, onChange) => {
-    return deploymentRunButtonStep(deployment, onChange)
+    return <DeploymentRunButtonStep deployment={deployment} onChange={onChange}/>
 }
 
-const runningStatus = (deployment) => {
-    return deploymentRunningStatusStep({deployment})
+function RunningStatus({deployment}) {
+    return <DeploymentRunningStatusStep deployment={deployment}/>
 }
 
 const runningWorkflows = (pipeline) => {
     return pipeline.slot.runningWorkflows.map(slotWorkflow =>
-        deploymentWorkflowStep(pipeline, slotWorkflow)
+        <DeploymentWorkflowStep key={slotWorkflow.id} slotWorkflow={slotWorkflow}/>
     )
 }
 
 const finishButton = (deployment, onChange) => {
-    return deploymentFinishButtonStep(deployment, onChange)
+    return <DeploymentFinishButtonStep deployment={deployment} onChange={onChange}/>
 }
 
-const finishStatus = (deployment) => {
-    return deploymentDoneStatusStep({deployment})
+function FinishStatus({deployment}) {
+    return <DeploymentDoneStatusStep deployment={deployment}/>
 }
 
 const doneWorkflows = (pipeline) => {
     return pipeline.slot.doneWorkflows.map(slotWorkflow =>
-        deploymentWorkflowStep(pipeline, slotWorkflow)
+        <DeploymentWorkflowStep key={slotWorkflow.id} slotWorkflow={slotWorkflow}/>
     )
 }
 
@@ -71,66 +71,53 @@ const generateItems = (pipeline, onChange) => {
 
     if (pipeline.status === 'CANDIDATE') {
         const items = [
-            candidateStatus(pipeline),
+            <CandidateStatus key="status" deployment={pipeline}/>,
             ...candidateAdmissionRules(pipeline),
             ...candidateWorkflows(pipeline),
         ]
         if (pipeline.runAction) {
             items.push(runButton(pipeline, onChange))
         }
-        items.push(cancelButton(pipeline, onChange))
-        return {
-            items: items,
-            current: 0,
-        }
+        // TODO items.push(cancelButton(pipeline, onChange))
+        return items
     }
 
     // 2 - Running
 
     else if (pipeline.status === 'RUNNING') {
         const items = [
-            candidateStatus(pipeline),
+            <CandidateStatus key="status-candidate" deployment={pipeline}/>,
             ...candidateAdmissionRules(pipeline),
             ...candidateWorkflows(pipeline),
-            runningStatus(pipeline),
+            <RunningStatus key="status-running" deployment={pipeline}/>,
             ...runningWorkflows(pipeline),
         ]
         if (pipeline.finishAction) {
             items.push(finishButton(pipeline, onChange))
         }
-        items.push(cancelButton(pipeline, onChange))
-        return {
-            items: items,
-            current: 0,
-        }
+        // TODO items.push(cancelButton(pipeline, onChange))
+        return items
     }
 
     // 3 - Cancelled
 
     else if (pipeline.status === 'CANCELLED') {
         // TODO Previous state taken from the changes
-        return {
-            items: [],
-            current: 0,
-        }
+        return []
     }
 
     // 4 - Done
 
     else if (pipeline.status === 'DONE') {
-        const items = [
-            candidateStatus(pipeline),
+        return [
+            <CandidateStatus key="status-candidate" deployment={pipeline}/>,
             ...candidateAdmissionRules(pipeline),
             ...candidateWorkflows(pipeline),
-            runningStatus(pipeline),
+            <RunningStatus key="status-running" deployment={pipeline}/>,
             ...runningWorkflows(pipeline),
-            finishStatus(pipeline),
+            <FinishStatus key="status-done" deployment={pipeline}/>,
             ...doneWorkflows(pipeline),
-        ];
-        return {
-            items: items,
-            current: items.length - 1,
-        }
+        ]
     }
 
     // Unknown
@@ -244,27 +231,22 @@ export default function SlotPipelineSteps({pipelineId, reloadState, onChange}) {
     )
 
     const [items, setItems] = useState([])
-    const [current, setCurrent] = useState(0)
     useEffect(() => {
         if (data) {
             const pipeline = data.slotPipelineById
-            const {items, current} = generateItems(pipeline, onChange)
+            const items = generateItems(pipeline, onChange)
             setItems(items)
-            setCurrent(current)
         }
     }, [data])
 
     return (
         <>
-            <Steps
+            <List
+                itemLayout="horizontal"
                 loading={loading}
-                items={items}
-                current={current}
-                direction="vertical"
-            />
-            {/*<pre>*/}
-            {/*    {JSON.stringify(data, null, 2)}*/}
-            {/*</pre>*/}
+            >
+                {items}
+            </List>
         </>
     )
 }

ontrack-web-core/components/extension/environments/deployment/steps/CandidateAdmissionRuleStep.js

@@ -0,0 +1,27 @@
+import {Space} from "antd";
+import {FaTasks} from "react-icons/fa";
+import {DeploymentStep} from "@components/extension/environments/deployment/steps/deploymentStatusSteps";
+import CheckIcon from "@components/common/CheckIcon";
+import SlotAdmissionRuleSummary from "@components/extension/environments/SlotAdmissionRuleSummary";
+
+export function CandidateAdmissionRuleStep({rule}) {
+    return (
+        <>
+            <DeploymentStep
+                avatar={<FaTasks/>}
+                title={
+                    <Space>
+                        <CheckIcon value={rule.check.ok}/>
+                        {/* TODO Input */}
+                        {/* TODO Overriding */}
+                        {/* Name of the rule */}
+                        <SlotAdmissionRuleSummary
+                            ruleId={rule.admissionRuleConfig.ruleId}
+                            ruleConfig={rule.admissionRuleConfig.ruleConfig}
+                        />
+                    </Space>
+                }
+            />
+        </>
+    )
+}

ontrack-web-core/components/extension/environments/deployment/steps/deploymentWorkflowStep.js → ontrack-web-core/components/extension/environments/deployment/steps/DeploymentWorkflowStep.js

@@ -4,6 +4,7 @@ import WorkflowInstanceStatus from "@components/extension/workflows/WorkflowInst
 import WorkflowInstanceLink from "@components/extension/workflows/WorkflowInstanceLink";
 import TimestampText from "@components/common/TimestampText";
 import DurationMs from "@components/common/DurationMs";
+import {DeploymentStep} from "@components/extension/environments/deployment/steps/deploymentStatusSteps";
 
 function DeploymentWorkflowTimings({slotWorkflow}) {
     const slotWorkflowInstance = slotWorkflow.slotWorkflowInstanceForPipeline
@@ -38,27 +39,31 @@ function DeploymentWorkflowStepStatus({slotWorkflow}) {
     }
 }
 
-export const deploymentWorkflowStep = (deployment, slotWorkflow) => {
-    return {
-        title: <Space>
-            {/* Workflow status */}
-            <DeploymentWorkflowStepStatus slotWorkflow={slotWorkflow}/>
-            {/* Workflow name */}
-            {
-                slotWorkflow.slotWorkflowInstanceForPipeline &&
-                <WorkflowInstanceLink
-                    workflowInstanceId={slotWorkflow.slotWorkflowInstanceForPipeline.id}
-                    name={slotWorkflow.workflow.name}
-                />
-            }
-            {
-                !slotWorkflow.slotWorkflowInstanceForPipeline &&
-                <strong>{slotWorkflow.workflow.name}</strong>
-            }
-        </Space>,
-        description: <Space>
-            <DeploymentWorkflowTimings slotWorkflow={slotWorkflow}/>
-        </Space>,
-        icon: <FaProjectDiagram title="Workflow"/>,
-    }
+export function DeploymentWorkflowStep({slotWorkflow}) {
+    return (
+        <>
+            <DeploymentStep
+                avatar={<FaProjectDiagram title="Workflow"/>}
+                title={
+                    <Space>
+                        <DeploymentWorkflowStepStatus slotWorkflow={slotWorkflow}/>
+                        {
+                            slotWorkflow.slotWorkflowInstanceForPipeline &&
+                            <WorkflowInstanceLink
+                                workflowInstanceId={slotWorkflow.slotWorkflowInstanceForPipeline.id}
+                                name={slotWorkflow.workflow.name}
+                            />
+                        }
+                        {
+                            !slotWorkflow.slotWorkflowInstanceForPipeline &&
+                            <strong>{slotWorkflow.workflow.name}</strong>
+                        }
+                    </Space>
+                }
+                description={
+                    <DeploymentWorkflowTimings slotWorkflow={slotWorkflow}/>
+                }
+            />
+        </>
+    )
 }