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
opendatahub-io · Apr 26, 2024 · d8cb226 · d8cb226
1 parent 154efd0
commit d8cb226
Show file tree

Hide file tree

Showing 17 changed files with 500 additions and 182 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;
 };