[Reference PR]feat(pipeline): add TaskStatus column to Pipeline/Run List

frontend/public/extend/devconsole/components/pipelineruns/PipelineRunRow.tsx

@@ -11,6 +11,7 @@ import {
 import { pipelineRunFilterReducer } from '../../utils/pipeline-filter-reducer';
 import { reRunPipelineRun, stopPipelineRun } from '../../utils/pipeline-actions';
 import { PipelineRun } from '../../utils/pipeline-augment';
+import { PipelineTaskStatus } from './PipelineTaskStatus';
 
 interface PipelineRunRowProps {
   obj: PipelineRun;
@@ -48,7 +49,9 @@ const PipelineRunRow: React.FC<PipelineRunRowProps> = (props) => {
       <div className="col-lg-2 col-md-2 col-sm-2 col-xs-2">
         <StatusIcon status={pipelineRunFilterReducer(pipelinerun)} />
       </div>
-      <div className="col-lg-2 col-md-2 hidden-sm hidden-xs"> - </div>
+      <div className="col-lg-2 col-md-2 hidden-sm hidden-xs">
+        <PipelineTaskStatus pipelinerun={pipelinerun} />
+      </div>
       <div className="col-lg-2 col-md-2 hidden-sm hidden-xs"> - </div>
       <div className="col-lg-1 col-md-1 hidden-sm hidden-xs">
         {pipelinerun &&

frontend/public/extend/devconsole/components/pipelineruns/PipelineTaskStatus.tsx

@@ -0,0 +1,87 @@
+/* eslint-disable no-undef */
+import * as React from 'react';
+import { VictoryStack, VictoryBar } from 'victory';
+import { getTaskStatus, PipelineRun } from '../../utils/pipeline-augment';
+import { Tooltip } from '../../../../components/utils/tooltip';
+
+interface PipelineTaskStatusProps {
+  pipelinerun: PipelineRun;
+}
+
+interface TaskStatusToolTipProps {
+  tooltip: Tooltip;
+}
+
+interface Tooltip {
+  Succeeded?: number;
+  Running?: number;
+  Failed?: number;
+  Notstarted?: number;
+  FailedToStart?: number;
+}
+
+//The colors are not final. pf-colors are not supported in the charts
+export const mapColorMessage = {
+  Succeeded: { color: 'green', message: 'Succeded' },
+  Running: { color: '#0066cc', message: 'Running' },
+  Failed: { color: 'red', message: 'Failed' },
+  Notstarted: { color: '#ccc', message: 'Not Started Yet' },
+  FailedToStart: { color: 'red', message: 'PipelineRun Failed To Start' },
+};
+
+const getMessage = (status: string, value: number = 0): string => {
+  if (status === 'Notstarted' || status === 'FailedToStart') {
+    return mapColorMessage[status].message;
+  }
+  return `${value} ${mapColorMessage[status].message} task(s).`;
+};
+
+export const TaskStatusToolTip: React.FC<TaskStatusToolTipProps> = (props) => {
+  const { tooltip } = props;
+  return (
+    <div>
+      {Object.keys(tooltip).map((status) => {
+        return (
+          <div className="row" key={status}>
+            <div className="col-lg-1 col-md-1 offset-lg-1 offset-md-1">
+              <i
+                className="fa fa-square fa-2x"
+                aria-hidden="true"
+                style={{ color: mapColorMessage[status].color }}
+              />
+            </div>
+            <div className="col-lg-9 col-md-9  offset-lg-1 offset-md-1">
+              {getMessage(status, tooltip[status])}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export const PipelineTaskStatus: React.FC<PipelineTaskStatusProps> = (props) => {
+  const { bars, tooltip } = getTaskStatus(props.pipelinerun);
+  return (
+    <div>
+      <Tooltip
+        content={[<TaskStatusToolTip key={Math.floor(100 * Math.random())} tooltip={tooltip} />]}
+      >
+        <VictoryStack horizontal height={35} padding={0} domainPadding={0}>
+          {bars.map((bar, i) => {
+            return (
+              <VictoryBar
+                key={bar + i}
+                data={[{ x: 2, y: 1 }]}
+                barRatio={0.9}
+                barWidth={35}
+                padding={{ right: 15 }}
+                style={{ data: { fill: mapColorMessage[bar].color } }}
+              />
+            );
+          })}
+        </VictoryStack>
+      </Tooltip>
+    </div>
+  );
+};

frontend/public/extend/devconsole/components/pipelines/PipelineRow.tsx

@@ -10,6 +10,7 @@ import {
 } from '../../../../components/utils';
 import { Pipeline, triggerPipeline, rerunPipeline } from '../../utils/pipeline-actions';
 import { pipelineFilterReducer } from '../../utils/pipeline-filter-reducer';
+import { PipelineTaskStatus } from '../pipelineruns/PipelineTaskStatus';
 
 interface PipelineRowProps {
   obj: Pipeline;
@@ -50,7 +51,9 @@ const PipelineRow: React.FC<PipelineRowProps> = (props) => {
       <div className="col-lg-2 col-md-2 col-sm-3 hidden-xs">
         <StatusIcon status={status} />
       </div>
-      <div className="col-lg-2 col-md-2 hidden-sm hidden-xs">-</div>
+      <div className="col-lg-2 col-md-2 hidden-sm hidden-xs">
+        {(pipeline.latestRun && <PipelineTaskStatus pipelinerun={pipeline.latestRun} />) || '-'}
+      </div>
       <div className="col-lg-2 col-md-2 hidden-sm hidden-xs">
         <Timestamp
           timestamp={

frontend/public/extend/devconsole/shared/yamls/pipelines/pipeline.yaml

@@ -9,6 +9,25 @@ spec:
     - name: web-image
       type: image
   tasks:
+    - name: hello-world-1
+      taskRef:
+        name: hello-world-1
+    - name: hello-world-2
+      taskRef:
+        name: hello-world-2
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Pipeline
+metadata:
+  name: partial-pipeline
+spec:
+  tasks:
+    - name: hello-world-1
+      taskRef:
+        name: hello-world-1
+    - name: hello-world-3
+      taskRef:
+        name: hello-world-3
     - name: build-skaffold-web
       taskRef:
         name: build-docker-image-from-git-source

frontend/public/extend/devconsole/shared/yamls/pipelines/task.yaml

@@ -186,3 +186,229 @@ spec:
       args:
         - "sonar"
 
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: build-docker-image-from-git-source
+spec:
+  inputs:
+    resources:
+      - name: docker-source
+        type: git
+    params:
+      - name: pathToDockerFile
+        description: The path to the dockerfile to build
+        default: /workspace/docker-source/Dockerfile
+      - name: pathToContext
+        description:
+          The build context used by Kaniko
+          (https://github.com/GoogleContainerTools/kaniko#kaniko-build-contexts)
+        default: /workspace/docker-source
+  outputs:
+    resources:
+      - name: builtImage
+        type: image
+  steps:
+    - name: build-and-push
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "Build and push"
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: deploy-using-kubectl
+spec:
+  inputs:
+    resources:
+      - name: source
+        type: git
+      - name: image
+        type: image
+    params:
+      - name: path
+        description: Path to the manifest to apply
+      - name: yqArg
+        description:
+          Okay this is a hack, but I didn't feel right hard-coding `-d1` down
+          below
+      - name: yamlPathToImage
+        description:
+          The path to the image to replace in the yaml manifest (arg to yq)
+  steps:
+    - name: replace-image
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "replaced image"
+    - name: post-deploy
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "post-deploy"
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: mvn-build
+spec:
+  inputs:
+    resources:
+    - name: workspace-git
+      targetPath: /
+      type: git
+  outputs:
+    resources:
+    - name: workspace-git
+      type: git
+  steps:
+  - name: build
+    image: maven:3.6.0-jdk-8-slim
+    command:
+      - echo
+    args:
+      - "build"
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: buildah
+spec:
+  inputs:
+    resources:
+    - name: workspace-git
+      targetPath: /
+      type: git
+    params:
+    - name: dockerfile
+      description: The path to the dockerfile to build
+      default: ./Dockerfile
+    - name: verifyTLS
+      description: Verify registry certificates
+      default: "true"
+  outputs:
+    resources:
+    - name: image
+      type: image
+  steps:
+  - name: build
+    image: quay.io/openshift-pipeline/buildah:testing
+    command:
+      - echo
+    args:
+      - "builadh"
+  - name: push
+    image: quay.io/openshift-pipeline/buildah:testing
+    command:
+      - echo
+    args:
+      - "push"
+  volumes:
+    - name: libcontainers
+      emptyDir: {}
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: mvn-test
+spec:
+  inputs:
+    resources:
+    - name: workspace-git
+      targetPath: /
+      type: git
+  steps:
+  - name: build
+    image: maven:3.6.0-jdk-8-slim
+    command:
+      - echo
+    args:
+      - "build"
+  - name: test
+    image: maven:3.6.0-jdk-8-slim
+    command:
+      - echo
+    args:
+      - "verify"
+---
+
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: openshift-cli
+spec:
+  steps:
+  - name: oc
+    image: quay.io/openshift-pipeline/openshift-cli
+    command:
+      - echo
+    args:
+      - "oc"
+---
+
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: static-analysis
+spec:
+  inputs:
+    resources:
+    - name: workspace-git
+      targetPath: /
+      type: git
+  steps:
+    - name: pmd
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "pmd"
+    - name: sonar
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "sonar"
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: hello-world-1
+spec:
+  steps:
+    - name: echo
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "hello world"
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: hello-world-2
+spec:
+  steps:
+    - name: echo
+      image: ubuntu
+      command:
+        - echo
+      args:
+        - "hello world"
+---
+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: hello-world-3
+spec:
+  steps:
+    - name: echo
+      command:
+        - echo
+      args:
+        - "hello world"
+---