[RHOAIENG-11333] Modify status labels for runs and executions

frontend/src/concepts/pipelines/content/__tests__/utils.spec.tsx

@@ -3,9 +3,9 @@ import {
   BanIcon,
   CheckCircleIcon,
   ExclamationCircleIcon,
-  NotStartedIcon,
+  InProgressIcon,
+  PendingIcon,
   QuestionCircleIcon,
-  SyncAltIcon,
 } from '@patternfly/react-icons';
 import React from 'react';
 import {
@@ -64,13 +64,13 @@ describe('computeRunStatus', () => {
   it('should check for Started run status', () => {
     const runStatus = computeRunStatus(createRun(RuntimeStateKF.PENDING));
     expect(runStatus.label).toBe(runtimeStateLabels[RuntimeStateKF.PENDING]);
-    expect(runStatus.icon).toStrictEqual(<NotStartedIcon />);
+    expect(runStatus.icon).toStrictEqual(<PendingIcon />);
   });
 
   it('should check for Running run status', () => {
     const runStatus = computeRunStatus(createRun(RuntimeStateKF.RUNNING));
     expect(runStatus.label).toBe(runtimeStateLabels[RuntimeStateKF.RUNNING]);
-    expect(runStatus.icon).toStrictEqual(<SyncAltIcon />);
+    expect(runStatus.icon).toStrictEqual(<InProgressIcon />);
   });
 
   it('should check for Completed run status', () => {

frontend/src/concepts/pipelines/content/compareRuns/CompareRunTableRow.tsx

@@ -79,7 +79,7 @@ const CompareRunTableRow: React.FC<CompareRunTableRowProps> = ({
         <RunDuration run={run} />
       </Td>
       <Td dataLabel="Status">
-        <RunStatus justIcon run={run} />
+        <RunStatus run={run} />
       </Td>
     </Tr>
   );

frontend/src/concepts/pipelines/content/tables/experiment/renderUtils.tsx

@@ -40,7 +40,7 @@ export const LastExperimentRuns: ExperimentUtil = ({ experiment }) => {
     <Split hasGutter>
       {last5runs.map((run) => (
         <SplitItem key={run.run_id}>
-          <RunStatus run={run} justIcon />
+          <RunStatus run={run} hasNoLabel />
         </SplitItem>
       ))}
     </Split>

frontend/src/concepts/pipelines/content/tables/pipelineRun/PipelineRunTableRow.tsx

@@ -163,7 +163,7 @@ const PipelineRunTableRow: React.FC<PipelineRunTableRowProps> = ({
         <RunDuration run={run} />
       </Td>
       <Td dataLabel="Status">
-        <RunStatus justIcon run={run} />
+        <RunStatus run={run} />
       </Td>
       {customCells}
       {hasRowActions && (

frontend/src/concepts/pipelines/content/tables/renderUtils.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   Icon,
+  Label,
   Level,
   LevelItem,
   Spinner,
@@ -35,20 +36,26 @@ type ExtraProps = Record<string, unknown>;
 type RunUtil<P = ExtraProps> = React.FC<{ run: PipelineRunKFv2 } & P>;
 type RecurringRunUtil<P = ExtraProps> = React.FC<{ recurringRun: PipelineRecurringRunKFv2 } & P>;
 
-export const RunStatus: RunUtil<{ justIcon?: boolean }> = ({ justIcon, run }) => {
-  const { icon, status, label, details, createdAt } = computeRunStatus(run);
+export const RunStatus: RunUtil<{ hasNoLabel?: boolean; isCompact?: boolean }> = ({
+  hasNoLabel,
+  isCompact = true,
+  run,
+}) => {
+  const { icon, status, color, label, details, createdAt } = computeRunStatus(run);
   let tooltipContent: React.ReactNode = details;
+  let content = (
+    <Label color={color} icon={icon} isCompact={isCompact}>
+      {label}
+    </Label>
+  );
 
-  const content = (
-    <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
+  if (hasNoLabel && !tooltipContent) {
+    content = (
       <Icon isInline status={status}>
         {icon}
-      </Icon>{' '}
-      {!justIcon && label}
-    </div>
-  );
+      </Icon>
+    );
 
-  if (justIcon && !tooltipContent) {
     // If we are just an icon with no tooltip -- make it the status for ease of understanding
     tooltipContent = (
       <Stack>
@@ -61,6 +68,7 @@ export const RunStatus: RunUtil<{ justIcon?: boolean }> = ({ justIcon, run }) =>
   if (tooltipContent) {
     return <Tooltip content={tooltipContent}>{content}</Tooltip>;
   }
+
   return content;
 };
 

frontend/src/concepts/pipelines/content/utils.tsx

@@ -3,7 +3,8 @@ import {
   BanIcon,
   CheckCircleIcon,
   ExclamationCircleIcon,
-  NotStartedIcon,
+  InProgressIcon,
+  PendingIcon,
   QuestionCircleIcon,
   SyncAltIcon,
 } from '@patternfly/react-icons';
@@ -44,11 +45,12 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
     case RuntimeStateKF.PENDING:
     case RuntimeStateKF.RUNTIME_STATE_UNSPECIFIED:
     case undefined:
-      icon = <NotStartedIcon />;
+      icon = <PendingIcon />;
       label = runtimeStateLabels[RuntimeStateKF.PENDING];
       break;
     case RuntimeStateKF.RUNNING:
-      icon = <SyncAltIcon />;
+      icon = <InProgressIcon />;
+      color = 'blue';
       label = runtimeStateLabels[RuntimeStateKF.RUNNING];
       break;
     case RuntimeStateKF.SKIPPED:
@@ -69,11 +71,12 @@ export const computeRunStatus = (run?: PipelineRunKFv2 | null): RunStatusDetails
       details = run.error?.message;
       break;
     case RuntimeStateKF.CANCELING:
-      icon = <BanIcon />;
+      icon = <SyncAltIcon />;
       label = runtimeStateLabels[RuntimeStateKF.CANCELING];
       break;
     case RuntimeStateKF.CANCELED:
       icon = <BanIcon />;
+      color = 'gold';
       label = runtimeStateLabels[RuntimeStateKF.CANCELED];
       break;
     case RuntimeStateKF.PAUSED:

frontend/src/concepts/pipelines/kfTypes.ts

@@ -501,6 +501,7 @@ export enum RuntimeStateKF {
   FAILED = 'FAILED',
   CANCELING = 'CANCELING',
   CANCELED = 'CANCELED',
+  CACHED = 'CACHED',
   PAUSED = 'PAUSED',
 }
 
@@ -511,6 +512,9 @@ export enum ExecutionStateKF {
   CANCELED = 'Canceled',
   FAILED = 'Failed',
   CACHED = 'Cached',
+  SKIPPED = 'Skipped',
+  PENDING = 'Pending',
+  CANCELING = 'Canceling',
 }
 
 export enum ArtifactStateKF {
@@ -529,6 +533,7 @@ export const runtimeStateLabels = {
   [RuntimeStateKF.FAILED]: 'Failed',
   [RuntimeStateKF.CANCELING]: 'Canceling',
   [RuntimeStateKF.CANCELED]: 'Canceled',
+  [RuntimeStateKF.CACHED]: 'Cached',
   [RuntimeStateKF.PAUSED]: 'Paused',
 };
 

frontend/src/concepts/topology/NodeStatusIcon.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import {
   NotStartedIcon,
-  SyncAltIcon,
   CheckCircleIcon,
   ExclamationCircleIcon,
   BanIcon,
+  InProgressIcon,
+  OutlinedWindowRestoreIcon,
 } from '@patternfly/react-icons';
 import { Icon, Tooltip } from '@patternfly/react-core';
 import { RuntimeStateKF, runtimeStateLabels } from '~/concepts/pipelines/kfTypes';
@@ -21,9 +22,15 @@ const NodeStatusIcon: React.FC<{ runStatus: RuntimeStateKF | string }> = ({ runS
       label = runtimeStateLabels[RuntimeStateKF.PENDING];
       break;
     case runtimeStateLabels[RuntimeStateKF.RUNNING]:
-      icon = <SyncAltIcon />;
+      icon = <InProgressIcon />;
+      status = 'info';
       label = runtimeStateLabels[RuntimeStateKF.RUNNING];
       break;
+    case runtimeStateLabels[RuntimeStateKF.CACHED]:
+      icon = <OutlinedWindowRestoreIcon />;
+      status = 'success';
+      label = runtimeStateLabels[RuntimeStateKF.CACHED];
+      break;
     case runtimeStateLabels[RuntimeStateKF.SKIPPED]:
       icon = <CheckCircleIcon />;
       label = runtimeStateLabels[RuntimeStateKF.SKIPPED];
@@ -44,6 +51,7 @@ const NodeStatusIcon: React.FC<{ runStatus: RuntimeStateKF | string }> = ({ runS
       break;
     case runtimeStateLabels[RuntimeStateKF.CANCELED]:
       icon = <BanIcon />;
+      status = 'warning';
       label = runtimeStateLabels[RuntimeStateKF.CANCELED];
       break;
     case runtimeStateLabels[RuntimeStateKF.PAUSED]:

frontend/src/concepts/topology/customNodes/StandardTaskNode.tsx

@@ -12,7 +12,13 @@ import {
   WithContextMenuProps,
   WithSelectionProps,
 } from '@patternfly/react-topology';
-import { AngleDoubleRightIcon } from '@patternfly/react-icons';
+import {
+  AngleDoubleRightIcon,
+  BanIcon,
+  OutlinedWindowRestoreIcon,
+  PendingIcon,
+  SyncAltIcon,
+} from '@patternfly/react-icons';
 import { PipelineNodeModelExpanded } from '~/concepts/topology/types';
 import { ExecutionStateKF } from '~/concepts/pipelines/kfTypes';
 
@@ -30,22 +36,35 @@ const StandardTaskNode: React.FunctionComponent<StandardTaskNodeProps> = ({
   const data = element.getData();
   const [hover, hoverRef] = useHover<SVGGElement>();
   const detailsLevel = element.getGraph().getDetailsLevel();
+  const state = data?.pipelineTask.status?.state;
 
-  // Set the cached node status to Succeeded
-  const getNodeStatus = () => {
-    if (data?.pipelineTask.status?.state === ExecutionStateKF.CACHED) {
-      return RunStatus.Succeeded;
+  const status = React.useMemo(() => {
+    switch (state) {
+      case ExecutionStateKF.CACHED:
+        return RunStatus.Succeeded;
+      case ExecutionStateKF.RUNNING:
+        return RunStatus.InProgress;
+      default:
+        return data?.runStatus;
     }
-    return data?.runStatus;
-  };
+  }, [state, data?.runStatus]);
 
-  const whenDecorator = data?.pipelineTask.whenStatus ? (
-    <WhenDecorator
-      element={element}
-      status={data.pipelineTask.whenStatus}
-      leftOffset={DEFAULT_WHEN_OFFSET}
-    />
-  ) : null;
+  const customStatusIcon = React.useMemo(() => {
+    switch (state) {
+      case ExecutionStateKF.CANCELED:
+        return <BanIcon />;
+      case ExecutionStateKF.CANCELING:
+        return <SyncAltIcon />;
+      case ExecutionStateKF.CACHED:
+        return <OutlinedWindowRestoreIcon />;
+      case ExecutionStateKF.SKIPPED:
+        return <AngleDoubleRightIcon />;
+      case ExecutionStateKF.PENDING:
+        return <PendingIcon />;
+      default:
+        return undefined;
+    }
+  }, [state]);
 
   return (
     <g ref={hoverRef}>
@@ -54,12 +73,8 @@ const StandardTaskNode: React.FunctionComponent<StandardTaskNodeProps> = ({
         onSelect={onSelect}
         selected={selected}
         scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
-        status={getNodeStatus()}
-        customStatusIcon={
-          data?.pipelineTask.status?.state === ExecutionStateKF.CACHED ? (
-            <AngleDoubleRightIcon />
-          ) : undefined
-        }
+        status={status}
+        customStatusIcon={customStatusIcon}
         hideDetailsAtMedium
         hiddenDetailsShownStatuses={[
           RunStatus.Succeeded,
@@ -71,7 +86,13 @@ const StandardTaskNode: React.FunctionComponent<StandardTaskNodeProps> = ({
         whenSize={data?.pipelineTask.whenStatus ? DEFAULT_WHEN_SIZE : 0}
         {...rest}
       >
-        {whenDecorator}
+        {data?.pipelineTask.whenStatus && (
+          <WhenDecorator
+            element={element}
+            status={data.pipelineTask.whenStatus}
+            leftOffset={DEFAULT_WHEN_OFFSET}
+          />
+        )}
       </TaskNode>
     </g>
   );