[RHOAIENG-7428]: update pipelineRunLabel to correct colors

jenny-s51 · Jun 11, 2024 · ae4c230 · ae4c230
1 parent b4db549
commit ae4c230
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/PipelineDetailsTitle.tsx
@@ -15,7 +15,7 @@ const PipelineDetailsTitle: React.FC<RunJobTitleProps> = ({
   statusIcon,
   pipelineRunLabel,
 }) => {
-  const { icon, label } = computeRunStatus(run);
+  const { icon, label, color } = computeRunStatus(run);
 
   const isArchived = run.storage_state === StorageStateKF.ARCHIVED;
 
@@ -30,7 +30,9 @@ const PipelineDetailsTitle: React.FC<RunJobTitleProps> = ({
         )}
         {statusIcon && (
           <SplitItem>
-            <Label icon={icon}>{label}</Label>
+            <Label color={color} icon={icon}>
+              {label}
+            </Label>
           </SplitItem>
         )}
         {isArchived && (

diff --git a/frontend/src/concepts/pipelines/content/utils.tsx b/frontend/src/concepts/pipelines/content/utils.tsx
@@ -7,7 +7,7 @@ import {
   QuestionCircleIcon,
   SyncAltIcon,
 } from '@patternfly/react-icons';
-import { Icon } from '@patternfly/react-core';
+import { Icon, LabelProps } from '@patternfly/react-core';
 import {
   PipelineCoreResourceKFv2,
   PipelineRunJobKFv2,
@@ -20,6 +20,7 @@ import { relativeTime } from '~/utilities/time';
 export type RunStatusDetails = {
   icon: React.ReactNode;
   label: PipelineRunKFv2['state'] | string;
+  color?: LabelProps['color'];
   status?: React.ComponentProps<typeof Icon>['status'];
   details?: string;
   createdAt?: string;
@@ -36,6 +37,7 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
   let status: React.ComponentProps<typeof Icon>['status'];
   let details: string | undefined;
   let label: string;
+  let color: LabelProps['color'];
   const createdAt = relativeTime(Date.now(), new Date(run.created_at).getTime());
 
   switch (run.state) {
@@ -56,11 +58,13 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
     case RuntimeStateKF.SUCCEEDED:
       icon = <CheckCircleIcon />;
       status = 'success';
+      color = 'green';
       label = runtimeStateLabels[RuntimeStateKF.SUCCEEDED];
       break;
     case RuntimeStateKF.FAILED:
       icon = <ExclamationCircleIcon />;
       status = 'danger';
+      color = 'red';
       label = runtimeStateLabels[RuntimeStateKF.FAILED];
       details = run.error?.message;
       break;
@@ -70,6 +74,7 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
       break;
     case RuntimeStateKF.CANCELED:
       icon = <BanIcon />;
+      color = 'gold';
       label = runtimeStateLabels[RuntimeStateKF.CANCELED];
       break;
     case RuntimeStateKF.PAUSED:
@@ -83,7 +88,7 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
       details = run.state;
   }
 
-  return { icon, label, status, details, createdAt };
+  return { icon, label, color, status, details, createdAt };
 };
 
 export const getPipelineAndVersionDeleteString = (