update nodes to use succeeded styling when pipeline run succeeds, WIP…

… custom icons

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx

@@ -66,6 +66,7 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
   );
   const nodes = usePipelineTaskTopology(
     pipelineSpec,
+    run,
     run?.run_details,
     executions,
     events,

frontend/src/concepts/pipelines/topology/usePipelineTaskTopology.tsx

@@ -5,16 +5,20 @@ import {
   InputOutputDefinitionArtifacts,
   PipelineComponentsKF,
   PipelineExecutorsKF,
+  PipelineRunKFv2,
   PipelineSpecVariable,
   RunDetailsKF,
+  RuntimeStateKF,
   TaskKF,
+  runtimeStateLabels,
 } from '~/concepts/pipelines/kfTypes';
 import { createNode } from '~/concepts/topology';
 import { PipelineNodeModelExpanded } from '~/concepts/topology/types';
 import { createArtifactNode, createGroupNode } from '~/concepts/topology/utils';
 import { Artifact, Execution, Event } from '~/third_party/mlmd';
 import { LinkedArtifact } from '~/concepts/pipelines/apiHooks/mlmd/types';
 import { parseEventsByType } from '~/pages/pipelines/global/experiments/executions/utils';
+import NodeStatusIcon from '~/concepts/topology/NodeStatusIcon';
 import {
   ComponentArtifactMap,
   composeArtifactType,
@@ -32,6 +36,8 @@ import {
   translateStatusForNode,
 } from './parseUtils';
 import { PipelineTask, PipelineTaskRunStatus } from './pipelineTaskTypes';
+import { computeRunStatus } from '../content/utils';
+import { RunStatus } from '@patternfly/react-topology';
 
 const getArtifactPipelineTask = (
   name: string,
@@ -107,6 +113,7 @@ const getNodesForTasks = (
   taskArtifactMap: TaskArtifactMap,
   executionLinkedArtifactMap: Record<number, LinkedArtifact[]>,
   runDetails?: RunDetailsKF,
+  run?: PipelineRunKFv2,
   executions?: Execution[] | null,
   inputArtifacts?: InputOutputDefinitionArtifacts,
   events?: Event[],
@@ -123,7 +130,17 @@ const getNodesForTasks = (
     const status =
       parseRuntimeInfoFromExecutions(taskId, taskName, executions) ||
       parseRuntimeInfoFromRunDetails(taskId, runDetails);
-    const runStatus = translateStatusForNode(status?.state);
+
+    const pipelineRunStatus = computeRunStatus(run).label;
+    const runStatus =
+      pipelineRunStatus === runtimeStateLabels[RuntimeStateKF.SUCCEEDED]
+        ? RunStatus.Succeeded
+        : translateStatusForNode(status?.state);
+
+    console.log('node run status', runStatus);
+
+    const customStatusIcon = <NodeStatusIcon runStatus={translateStatusForNode(status?.state)!} />;
+    console.log(customStatusIcon);
 
     // add edges from one task to its parent tasks
     const runAfter: string[] =
@@ -216,6 +233,7 @@ const getNodesForTasks = (
         subTasksArtifactMap,
         executionLinkedArtifactMap,
         runDetails,
+        run,
         executions,
         component?.inputDefinitions?.artifacts,
       );
@@ -230,7 +248,7 @@ const getNodesForTasks = (
       );
       nodes.push(itemNode, ...nestedNodes);
     } else {
-      nodes.push(createNode(taskId, taskName, pipelineTask, runAfter, runStatus));
+      nodes.push(createNode(taskId, taskName, pipelineTask, runAfter, runStatus, customStatusIcon));
     }
     children.push(taskId);
   });
@@ -240,6 +258,7 @@ const getNodesForTasks = (
 
 export const usePipelineTaskTopology = (
   spec?: PipelineSpecVariable,
+  run?: PipelineRunKFv2 | null | undefined,
   runDetails?: RunDetailsKF,
   executions?: Execution[] | null,
   events?: Event[] | null,
@@ -278,11 +297,12 @@ export const usePipelineTaskTopology = (
         taskArtifactMap,
         executionLinkedArtifactMap,
         runDetails,
+        run,
         executions,
         inputDefinitions?.artifacts,
         outputEvents,
         artifacts,
       )[0],
       (node) => node.id,
     );
-  }, [artifacts, events, executions, runDetails, spec]);
+  }, [artifacts, events, executions, run, runDetails, spec]);

frontend/src/concepts/topology/types.ts

@@ -5,6 +5,7 @@ export type StandardTaskNodeData = {
   pipelineTask: PipelineTask;
   runStatus?: RunStatus;
   artifactType?: string;
+  customStatusIcon?: React.ReactNode;
 };
 
 export type PipelineNodeModelExpanded = PipelineNodeModel & {

frontend/src/concepts/topology/utils.ts

@@ -1,4 +1,5 @@
 import { DEFAULT_TASK_NODE_TYPE, RunStatus } from '@patternfly/react-topology';
+import React from 'react';
 import { PipelineTask } from '~/concepts/pipelines/topology';
 import { EXECUTION_TASK_NODE_TYPE, NODE_HEIGHT, NODE_WIDTH } from './const';
 import { PipelineNodeModelExpanded } from './types';
@@ -17,6 +18,7 @@ export const createNode = (
   pipelineTask: PipelineTask,
   runAfterTasks?: string[],
   runStatus?: RunStatus,
+  customStatusIcon?: React.ReactNode,
 ): PipelineNodeModelExpanded => ({
   id,
   label,
@@ -27,6 +29,7 @@ export const createNode = (
   data: {
     pipelineTask,
     runStatus,
+    customStatusIcon,
   },
 });
 
@@ -37,6 +40,7 @@ export const createArtifactNode = (
   runAfterTasks?: string[],
   runStatus?: RunStatus,
   artifactType?: string,
+  customStatusIcon?: React.ReactNode,
 ): PipelineNodeModelExpanded => ({
   id,
   label: `${label} (Type: ${artifactType?.slice(7)})`,
@@ -48,6 +52,7 @@ export const createArtifactNode = (
     pipelineTask,
     artifactType,
     runStatus,
+    customStatusIcon,
   },
 });