Show suspended status on pipelines detail

api/pipelines/pipelines.swagger.json

@@ -309,6 +309,9 @@
           "items": {
             "$ref": "#/definitions/v1Condition"
           }
+        },
+        "suspended": {
+          "type": "boolean"
         }
       }
     }

api/pipelines/types.proto

@@ -47,6 +47,7 @@ message WorkloadStatus {
     string   version              = 3;
     string   lastAppliedRevision  = 4;
     repeated Condition conditions = 5;
+    bool     suspended            = 6;
 }
 
 message PipelineTargetStatus {

pkg/pipelines/server/get.go

@@ -113,6 +113,7 @@ func getWorkloadStatus(obj *unstructured.Unstructured) (*pb.WorkloadStatus, erro
 		ws.Name = hr.Name
 		ws.Version = hr.Spec.Chart.Spec.Version
 		ws.LastAppliedRevision = hr.Status.LastAppliedRevision
+		ws.Suspended = hr.Spec.Suspend
 		ws.Conditions = []*pb.Condition{}
 		for _, c := range hr.Status.Conditions {
 			ws.Conditions = append(ws.Conditions, &pb.Condition{

ui-cra/src/api/pipelines/types.pb.ts

@@ -45,6 +45,7 @@ export type WorkloadStatus = {
   version?: string
   lastAppliedRevision?: string
   conditions?: Condition[]
+  suspended?: boolean
 }
 
 export type PipelineTargetStatus = {

ui-cra/src/components/Pipelines/PipelineDetails/WorkloadStatus.tsx

@@ -1,4 +1,9 @@
-import { Flex, KubeStatusIndicator } from '@weaveworks/weave-gitops';
+import {
+  Flex,
+  Icon,
+  IconType,
+  KubeStatusIndicator,
+} from '@weaveworks/weave-gitops';
 import styled from 'styled-components';
 import { WorkloadStatus as WorkloadStatusType } from '../../../api/pipelines/types.pb';
 
@@ -12,7 +17,18 @@ function WorkloadStatus({ className, workload }: Props) {
     <div className={className}>
       <Flex align>
         <div style={{ marginRight: 4 }}>
-          <KubeStatusIndicator short conditions={workload?.conditions || []} />
+          {workload?.suspended ? (
+            <Icon
+              size="small"
+              type={IconType.SuspendedIcon}
+              color="suspended"
+            />
+          ) : (
+            <KubeStatusIndicator
+              short
+              conditions={workload?.conditions || []}
+            />
+          )}
         </div>
         <div>{workload?.name}</div>
       </Flex>
@@ -27,4 +43,8 @@ export default styled(WorkloadStatus).attrs({ className: 'WorkloadStatus' })`
   ${KubeStatusIndicator} span {
     display: none;
   }
+
+  ${Icon} img {
+    width: 16px;
+  }
 `;

ui-cra/src/components/Pipelines/PipelineDetails/__tests__/__snapshots__/PipelineDetails.test.tsx.snap

@@ -246,6 +246,10 @@ exports[`PipelineDetails snapshots renders 1`] = `
   display: none;
 }
 
+.c20 .c8 img {
+  width: 16px;
+}
+
 .c12 {
   font-size: 20px;
   margin-bottom: 12px;