Merge pull request #2926 from DaoDaoNoCode/jira-rhoaieng-7751

Fix breadcrumb navigation to correct tabs for pipeline run and jobs details page
opendatahub-io · Jun 20, 2024 · a8d2118 · a8d2118
2 parents 0c07a65 + 9d4c189
commit a8d2118
Show file tree

Hide file tree

Showing 14 changed files with 37 additions and 18 deletions.
diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx
@@ -21,7 +21,7 @@ const CloneRunPage: React.FC<PathProps> = ({ breadcrumbPath, contextPath }) => {
       title={title}
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath(runType)}
           <BreadcrumbItem isActive>
             {run ? `Duplicate of ${run.display_name}` : 'Duplicate'}
           </BreadcrumbItem>

diff --git a/frontend/src/concepts/pipelines/content/createRun/CreateRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CreateRunPage.tsx
@@ -16,7 +16,9 @@ const CreateRunPage: React.FC<PathProps> = ({ breadcrumbPath, contextPath }) =>
       title={title}
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath(
+            runType === PipelineRunType.SCHEDULED ? PipelineRunType.SCHEDULED : undefined,
+          )}
           <BreadcrumbItem isActive>{title}</BreadcrumbItem>
         </Breadcrumb>
       }

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx
@@ -69,7 +69,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
       <ApplicationsPage
         breadcrumb={
           <Breadcrumb>
-            {breadcrumbPath}
+            {breadcrumbPath()}
             <BreadcrumbItem isActive>{title}</BreadcrumbItem>
           </Breadcrumb>
         }
@@ -97,7 +97,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
             <ApplicationsPage
               breadcrumb={
                 <Breadcrumb>
-                  {breadcrumbPath}
+                  {breadcrumbPath()}
                   <BreadcrumbItem style={{ maxWidth: 300 }}>
                     <Truncate content={pipeline?.display_name || 'Loading...'} />
                   </BreadcrumbItem>

diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx
@@ -33,6 +33,7 @@ import PipelineJobReferenceName from '~/concepts/pipelines/content/PipelineJobRe
 import useExecutionsForPipelineRun from '~/concepts/pipelines/content/pipelinesDetails/pipelineRun/useExecutionsForPipelineRun';
 import { useGetEventsByExecutionIds } from '~/concepts/pipelines/apiHooks/mlmd/useGetEventsByExecutionId';
 import { PipelineTopology } from '~/concepts/topology';
+import { StorageStateKF } from '~/concepts/pipelines/kfTypes';
 import { usePipelineRunArtifacts } from './artifacts';
 import { PipelineRunDetailsTabs } from './PipelineRunDetailsTabs';
 
@@ -92,6 +93,9 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
     );
   }
 
+  const runType =
+    run?.storage_state === StorageStateKF.ARCHIVED ? PipelineRunType.ARCHIVED : undefined;
+
   return (
     <>
       <Drawer isExpanded={!!selectedNode}>
@@ -128,14 +132,15 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath,
             loadError={error}
             breadcrumb={
               <Breadcrumb>
-                {breadcrumbPath}
+                {breadcrumbPath(runType)}
                 <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
                   {version ? (
                     <Link
                       to={routePipelineVersionRunsNamespace(
                         namespace,
                         version.pipeline_id,
                         version.pipeline_version_id,
+                        runType,
                       )}
                     >
                       <Truncate content={version.display_name} />

diff --git a/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/.../src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx
@@ -94,14 +94,15 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({
             loadError={error}
             breadcrumb={
               <Breadcrumb>
-                {breadcrumbPath}
+                {breadcrumbPath(PipelineRunType.SCHEDULED)}
                 <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
                   {version ? (
                     <Link
                       to={routePipelineVersionRunsNamespace(
                         namespace,
                         version.pipeline_id,
                         version.pipeline_version_id,
+                        PipelineRunType.SCHEDULED,
                       )}
                     >
                       {version.display_name}

diff --git a/frontend/src/concepts/pipelines/content/types.ts b/frontend/src/concepts/pipelines/content/types.ts
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { BreadcrumbItem } from '@patternfly/react-core';
+import { PipelineRunType } from '~/pages/pipelines/global/runs';
 
 export type PathProps = {
-  breadcrumbPath: React.ReactElement<typeof BreadcrumbItem>[];
+  breadcrumbPath: (runType?: PipelineRunType | null) => React.ReactElement<typeof BreadcrumbItem>[];
   contextPath?: string;
 };
 

diff --git a/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx b/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx
@@ -26,7 +26,7 @@ const GlobalPipelineCoreDetails: React.FC<GlobalPipelineCoreDetailsProps> = ({
     <EnsureAPIAvailability>
       <EnsureCompatiblePipelineServer>
         <BreadcrumbDetailsComponent
-          breadcrumbPath={[
+          breadcrumbPath={() => [
             <BreadcrumbItem
               key="home"
               render={() => (
@@ -56,15 +56,15 @@ export const GlobalExperimentDetails: React.FC<
     <EnsureAPIAvailability>
       <EnsureCompatiblePipelineServer>
         <BreadcrumbDetailsComponent
-          breadcrumbPath={[
+          breadcrumbPath={(runType) => [
             <BreadcrumbItem key="experiments">
               <Link to={experimentsBaseRoute(namespace)}>
                 Experiments - {getProjectDisplayName(project)}
               </Link>
             </BreadcrumbItem>,
             <BreadcrumbItem key="experiment">
               {experiment?.display_name ? (
-                <Link to={experimentRunsRoute(namespace, experimentId)}>
+                <Link to={experimentRunsRoute(namespace, experimentId, runType)}>
                   {experiment.display_name}
                 </Link>
               ) : (

diff --git a/...tend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx b/...tend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx
@@ -61,7 +61,7 @@ export const ArtifactDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPa
       loadError={artifactError}
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
             <Truncate content={artifactName} />
           </BreadcrumbItem>

diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsPage.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsPage.tsx
@@ -21,7 +21,7 @@ const CompareRunsPage: React.FC<PathProps> = ({ breadcrumbPath }) => {
       title=""
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive>Compare runs</BreadcrumbItem>
         </Breadcrumb>
       }

diff --git a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetails.tsx b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetails.tsx
@@ -96,7 +96,7 @@ const ExecutionDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath, co
       loaded
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive>{displayName}</BreadcrumbItem>
         </Breadcrumb>
       }

diff --git a/frontend/src/pages/pipelines/global/runs/GlobalPipelineVersionRuns.tsx b/frontend/src/pages/pipelines/global/runs/GlobalPipelineVersionRuns.tsx
@@ -29,7 +29,7 @@ const GlobalPipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrum
       <ApplicationsPage
         breadcrumb={
           <Breadcrumb>
-            {breadcrumbPath}
+            {breadcrumbPath()}
             <BreadcrumbItem isActive>{title}</BreadcrumbItem>
           </Breadcrumb>
         }
@@ -46,7 +46,7 @@ const GlobalPipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrum
     <ApplicationsPage
       breadcrumb={
         <Breadcrumb>
-          {breadcrumbPath}
+          {breadcrumbPath()}
           <BreadcrumbItem isActive style={{ maxWidth: 300 }}>
             <Link to={routePipelineDetailsNamespace(namespace, pipelineId, pipelineVersionId)}>
               <Truncate content={pipelineVersion?.display_name || 'Loading...'} />

diff --git a/frontend/src/pages/projects/screens/detail/pipelines/ProjectPipelineBreadcrumbPage.tsx b/frontend/src/pages/projects/screens/detail/pipelines/ProjectPipelineBreadcrumbPage.tsx
@@ -19,7 +19,7 @@ const ProjectPipelineBreadcrumbPage: React.FC<ProjectPipelineDetailsProps> = ({
   return (
     <EnsureAPIAvailability>
       <BreadcrumbDetailsComponent
-        breadcrumbPath={[
+        breadcrumbPath={() => [
           <BreadcrumbItem
             key="project-home"
             render={() => <Link to="/projects">Data Science Projects</Link>}

diff --git a/frontend/src/routes/pipelines/experiments.ts b/frontend/src/routes/pipelines/experiments.ts
@@ -1,3 +1,5 @@
+import { PipelineRunType } from '~/pages/pipelines/global/runs';
+
 export const experimentsRootPath = '/experiments';
 export const globExperimentsAll = `${experimentsRootPath}/*`;
 
@@ -34,10 +36,13 @@ export const experimentsCloneScheduleRoute = (
 export const experimentRunsRoute = (
   namespace: string | undefined,
   experimentId: string | undefined,
+  runType?: PipelineRunType | null,
 ): string =>
   !experimentId
     ? experimentsBaseRoute(namespace)
-    : `${experimentsBaseRoute(namespace)}/${experimentId}/runs`;
+    : `${experimentsBaseRoute(namespace)}/${experimentId}/runs${
+        runType ? `?runType=${runType}` : ''
+      }`;
 
 export const experimentSchedulesRoute = (
   namespace: string | undefined,

diff --git a/frontend/src/routes/pipelines/global.ts b/frontend/src/routes/pipelines/global.ts
@@ -1,3 +1,5 @@
+import { PipelineRunType } from '~/pages/pipelines/global/runs';
+
 const globNamespace = ':namespace';
 export const globNamespaceAll = `/${globNamespace}?/*`;
 
@@ -31,8 +33,11 @@ export const routePipelineVersionRunsNamespace = (
   namespace: string,
   pipelineId: string,
   versionId: string,
+  runType?: PipelineRunType,
 ): string =>
-  `${routePipelinesNamespace(namespace)}/${routePipelineVersionRuns(pipelineId, versionId)}`;
+  `${routePipelinesNamespace(namespace)}/${routePipelineVersionRuns(pipelineId, versionId)}${
+    runType ? `?runType=${runType}` : ''
+  }`;
 export const routePipelineRunCreateNamespacePipelinesPage = (namespace?: string): string =>
   `${routePipelinesNamespace(namespace)}/${globPipelineRunCreate}`;
 export const routePipelineRunCloneNamespacePipelinesPage = (