feat(pipelines): support groups in topology view

Type simplifications (#6) * Type simplifications * use runStatus to render the icons --------- Co-authored-by: Jenny <[email protected]> add withSelection to graph update popover tasks list to only show status for runs format PipelineDefaultTaskGroup PR feedback from Gage, add params pass executions and updaet icon alignment fix tests Gage test fix fix linting issues status and edge updates
opendatahub-io · May 2, 2024 · d659c03 · d659c03
1 parent 007a425
commit d659c03
Show file tree

Hide file tree

Showing 17 changed files with 575 additions and 185 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -63,7 +63,7 @@
     "@patternfly/react-styles": "^5.2.1",
     "@patternfly/react-table": "^5.2.1",
     "@patternfly/react-tokens": "^5.2.1",
-    "@patternfly/react-topology": "^5.3.0-prerelease.5",
+    "@patternfly/react-topology": "^5.3.0-prerelease.12",
     "@patternfly/react-virtualized-extension": "^5.0.0",
     "@types/classnames": "^2.3.1",
     "axios": "^1.6.4",

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -51,7 +51,12 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
     usePipelineVersionById(pipelineId, pipelineVersionId);
   const [pipeline, isPipelineLoaded, pipelineLoadError] = usePipelineById(pipelineId);
 
-  const { taskMap, nodes } = usePipelineTaskTopology(pipelineVersion?.pipeline_spec);
+  const nodes = usePipelineTaskTopology(pipelineVersion?.pipeline_spec);
+
+  const selectedNode = React.useMemo(
+    () => nodes.find((n) => n.id === selectedId),
+    [selectedId, nodes],
+  );
   const isLoaded = isPipelineVersionLoaded && isPipelineLoaded && !!pipelineVersion?.pipeline_spec;
 
   if (pipelineVersionLoadError || pipelineLoadError) {
@@ -76,11 +81,11 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
 
   return (
     <>
-      <Drawer isExpanded={!!selectedId}>
+      <Drawer isExpanded={!!selectedNode}>
         <DrawerContent
           panelContent={
             <SelectedTaskDrawerContent
-              task={selectedId ? taskMap[selectedId] : undefined}
+              task={selectedNode?.data.pipelineTask}
               onClose={() => setSelectedId(null)}
             />
           }

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -55,12 +55,15 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
 
   const [executions, executionsLoaded, executionsError] = useExecutionsForPipelineRun(runResource);
-  const { taskMap, nodes } = usePipelineTaskTopology(
-    pipelineSpec,
-    runResource?.run_details,
-    executions,
+  const nodes = usePipelineTaskTopology(pipelineSpec, runResource?.run_details, executions);
+
+  const selectedNode = React.useMemo(
+    () => nodes.find((n) => n.id === selectedId),
+    [selectedId, nodes],
   );
 
+  const getFirstNode = (firstId: string) => nodes.find((n) => n.id === firstId);
+
   const loaded = runLoaded && (versionLoaded || !!runResource?.pipeline_spec);
   const error = versionError || runError;
 
@@ -87,11 +90,11 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
 
   return (
     <>
-      <Drawer isExpanded={!!selectedId}>
+      <Drawer isExpanded={!!selectedNode}>
         <DrawerContent
           panelContent={
             <PipelineRunDrawerRightContent
-              task={selectedId ? taskMap[selectedId] : undefined}
+              task={selectedNode?.data.pipelineTask}
               onClose={() => setSelectedId(null)}
             />
           }
@@ -161,7 +164,7 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
                         const firstId = ids[0];
                         if (ids.length === 0) {
                           setSelectedId(null);
-                        } else if (taskMap[firstId]) {
+                        } else if (getFirstNode(firstId)) {
                           setDetailsTab(null);
                           setSelectedId(firstId);
                         }

diff --git a/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx
@@ -53,7 +53,14 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
   );
   const [selectedId, setSelectedId] = React.useState<string | null>(null);
 
-  const { taskMap, nodes } = usePipelineTaskTopology(version?.pipeline_spec);
+  const nodes = usePipelineTaskTopology(version?.pipeline_spec);
+
+  const selectedNode = React.useMemo(
+    () => nodes.find((n) => n.id === selectedId),
+    [selectedId, nodes],
+  );
+
+  const getFirstNode = (firstId: string) => nodes.find((n) => n.id === firstId)?.data?.pipelineTask;
 
   const loaded = versionLoaded && jobLoaded;
   const error = versionError || jobError;
@@ -80,11 +87,11 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
 
   return (
     <>
-      <Drawer isExpanded={!!selectedId}>
+      <Drawer isExpanded={!!selectedNode}>
         <DrawerContent
           panelContent={
             <SelectedTaskDrawerContent
-              task={selectedId ? taskMap[selectedId] : undefined}
+              task={selectedNode?.data.pipelineTask}
               onClose={() => setSelectedId(null)}
             />
           }
@@ -136,7 +143,7 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
                         const firstId = ids[0];
                         if (ids.length === 0) {
                           setSelectedId(null);
-                        } else if (taskMap[firstId]) {
+                        } else if (getFirstNode(firstId)) {
                           setDetailsTab(null);
                           setSelectedId(firstId);
                         }

diff --git a/frontend/src/concepts/pipelines/topology/pipelineTaskTypes.ts b/frontend/src/concepts/pipelines/topology/pipelineTaskTypes.ts
@@ -1,10 +1,10 @@
+import { WhenStatus } from '@patternfly/react-topology';
 import {
   ArtifactStateKF,
   ExecutionStateKF,
   InputDefinitionParameterType,
   RuntimeStateKF,
 } from '~/concepts/pipelines/kfTypes';
-import { createNode } from '~/concepts/topology';
 import { VolumeMount } from '~/types';
 
 export type PipelineTaskParam = {
@@ -50,16 +50,5 @@ export type PipelineTask = {
   status?: PipelineTaskRunStatus;
   /** Volume Mounts */
   volumeMounts?: VolumeMount[];
-};
-
-export type KubeFlowTaskTopology = {
-  /**
-   * Details of a selected node.
-   * [Task.name]: Task
-   */
-  taskMap: Record<string, PipelineTask | undefined>;
-  /**
-   * Nodes to render in topology.
-   */
-  nodes: ReturnType<typeof createNode>[];
+  whenStatus?: WhenStatus;
 };