From a7e7bfa050fd6a7e4fbc38b3ff7d0534c8afceb1 Mon Sep 17 00:00:00 2001 From: Juntao Wang Date: Tue, 18 Jun 2024 11:42:09 -0400 Subject: [PATCH 1/2] add breadcrumb navigation back to schedules tab for schedules --- .../pipelinesDetails/pipelineRun/PipelineRunDetails.tsx | 4 ++++ .../pipelineRunJob/PipelineRunJobDetails.tsx | 1 + .../pages/pipelines/global/GlobalPipelineCoreDetails.tsx | 9 ++++++++- frontend/src/routes/pipelines/experiments.ts | 7 ++++++- frontend/src/routes/pipelines/global.ts | 7 ++++++- 5 files changed, 25 insertions(+), 3 deletions(-) diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx index b4f86b7d77..4cb6d7381a 100644 --- 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'; @@ -136,6 +137,9 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath, namespace, version.pipeline_id, version.pipeline_version_id, + run?.storage_state === StorageStateKF.ARCHIVED + ? PipelineRunType.ARCHIVED + : undefined, )} > diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx index a07f9a8834..611a81906f 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx @@ -102,6 +102,7 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({ namespace, version.pipeline_id, version.pipeline_version_id, + PipelineRunType.SCHEDULED, )} > {version.display_name} diff --git a/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx b/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx index 1b92deb875..ceefea5c70 100644 --- a/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx +++ b/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx @@ -8,6 +8,7 @@ import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability'; import { experimentRunsRoute, experimentSchedulesRoute, experimentsBaseRoute } from '~/routes'; import EnsureCompatiblePipelineServer from '~/concepts/pipelines/EnsureCompatiblePipelineServer'; import { ExperimentRunsContext } from '~/pages/pipelines/global/experiments/ExperimentRunsContext'; +import { PipelineRunType } from '~/pages/pipelines/global/runs'; type GlobalPipelineCoreDetailsProps = { pageName: string; @@ -64,7 +65,13 @@ export const GlobalExperimentDetails: React.FC< , {experiment?.display_name ? ( - + {experiment.display_name} ) : ( diff --git a/frontend/src/routes/pipelines/experiments.ts b/frontend/src/routes/pipelines/experiments.ts index 9f268a20b2..7af7f5b2b2 100644 --- 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, ): 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 index 685b43b8d0..32fa3276b2 100644 --- 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 = ( From 9d4c189750a8589b2fce78c7fd28db5b2500377d Mon Sep 17 00:00:00 2001 From: Juntao Wang Date: Tue, 18 Jun 2024 13:54:29 -0400 Subject: [PATCH 2/2] refactor breadcrumb for experiments to navigate to correct tabs --- .../pipelines/content/createRun/CloneRunPage.tsx | 2 +- .../pipelines/content/createRun/CreateRunPage.tsx | 4 +++- .../pipelinesDetails/pipeline/PipelineDetails.tsx | 4 ++-- .../pipelineRun/PipelineRunDetails.tsx | 9 +++++---- .../pipelineRunJob/PipelineRunJobDetails.tsx | 2 +- frontend/src/concepts/pipelines/content/types.ts | 3 ++- .../pipelines/global/GlobalPipelineCoreDetails.tsx | 13 +++---------- .../artifacts/ArtifactDetails/ArtifactDetails.tsx | 2 +- .../experiments/compareRuns/CompareRunsPage.tsx | 2 +- .../executions/details/ExecutionDetails.tsx | 2 +- .../global/runs/GlobalPipelineVersionRuns.tsx | 4 ++-- .../pipelines/ProjectPipelineBreadcrumbPage.tsx | 2 +- frontend/src/routes/pipelines/experiments.ts | 2 +- 13 files changed, 24 insertions(+), 27 deletions(-) diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRunPage.tsx index faf0c58670..7996a4a868 100644 --- 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 = ({ breadcrumbPath, contextPath }) => { title={title} breadcrumb={ - {breadcrumbPath} + {breadcrumbPath(runType)} {run ? `Duplicate of ${run.display_name}` : 'Duplicate'} diff --git a/frontend/src/concepts/pipelines/content/createRun/CreateRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CreateRunPage.tsx index 3930ac2091..1ce7f64b25 100644 --- 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 = ({ breadcrumbPath, contextPath }) => title={title} breadcrumb={ - {breadcrumbPath} + {breadcrumbPath( + runType === PipelineRunType.SCHEDULED ? PipelineRunType.SCHEDULED : undefined, + )} {title} } diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx index 43fa1888b4..35b59ce72b 100644 --- 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 }) = - {breadcrumbPath} + {breadcrumbPath()} {title} } @@ -97,7 +97,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) = - {breadcrumbPath} + {breadcrumbPath()} diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx index 4cb6d7381a..3836ed9107 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx @@ -93,6 +93,9 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath, ); } + const runType = + run?.storage_state === StorageStateKF.ARCHIVED ? PipelineRunType.ARCHIVED : undefined; + return ( <> @@ -129,7 +132,7 @@ const PipelineRunDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath, loadError={error} breadcrumb={ - {breadcrumbPath} + {breadcrumbPath(runType)} {version ? ( diff --git a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx index 611a81906f..abb5335da2 100644 --- a/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx +++ b/frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRunJob/PipelineRunJobDetails.tsx @@ -94,7 +94,7 @@ const PipelineRunJobDetails: PipelineCoreDetailsPageComponent = ({ loadError={error} breadcrumb={ - {breadcrumbPath} + {breadcrumbPath(PipelineRunType.SCHEDULED)} {version ? ( []; + breadcrumbPath: (runType?: PipelineRunType | null) => React.ReactElement[]; contextPath?: string; }; diff --git a/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx b/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx index ceefea5c70..720f13bb32 100644 --- a/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx +++ b/frontend/src/pages/pipelines/global/GlobalPipelineCoreDetails.tsx @@ -8,7 +8,6 @@ import EnsureAPIAvailability from '~/concepts/pipelines/EnsureAPIAvailability'; import { experimentRunsRoute, experimentSchedulesRoute, experimentsBaseRoute } from '~/routes'; import EnsureCompatiblePipelineServer from '~/concepts/pipelines/EnsureCompatiblePipelineServer'; import { ExperimentRunsContext } from '~/pages/pipelines/global/experiments/ExperimentRunsContext'; -import { PipelineRunType } from '~/pages/pipelines/global/runs'; type GlobalPipelineCoreDetailsProps = { pageName: string; @@ -27,7 +26,7 @@ const GlobalPipelineCoreDetails: React.FC = ({ [ ( @@ -57,7 +56,7 @@ export const GlobalExperimentDetails: React.FC< [ Experiments - {getProjectDisplayName(project)} @@ -65,13 +64,7 @@ export const GlobalExperimentDetails: React.FC< , {experiment?.display_name ? ( - + {experiment.display_name} ) : ( diff --git a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx index 1ae310c802..f43a652aab 100644 --- a/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx +++ b/frontend/src/pages/pipelines/global/experiments/artifacts/ArtifactDetails/ArtifactDetails.tsx @@ -61,7 +61,7 @@ export const ArtifactDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPa loadError={artifactError} breadcrumb={ - {breadcrumbPath} + {breadcrumbPath()} diff --git a/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsPage.tsx b/frontend/src/pages/pipelines/global/experiments/compareRuns/CompareRunsPage.tsx index eaa594cfd8..5f48db21af 100644 --- 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 = ({ breadcrumbPath }) => { title="" breadcrumb={ - {breadcrumbPath} + {breadcrumbPath()} Compare runs } diff --git a/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetails.tsx b/frontend/src/pages/pipelines/global/experiments/executions/details/ExecutionDetails.tsx index 1090db9ce6..51037b753f 100644 --- 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={ - {breadcrumbPath} + {breadcrumbPath()} {displayName} } diff --git a/frontend/src/pages/pipelines/global/runs/GlobalPipelineVersionRuns.tsx b/frontend/src/pages/pipelines/global/runs/GlobalPipelineVersionRuns.tsx index 256dce6f7c..7f25baa5bc 100644 --- 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 - {breadcrumbPath} + {breadcrumbPath()} {title} } @@ -46,7 +46,7 @@ const GlobalPipelineVersionRuns: PipelineCoreDetailsPageComponent = ({ breadcrum - {breadcrumbPath} + {breadcrumbPath()} diff --git a/frontend/src/pages/projects/screens/detail/pipelines/ProjectPipelineBreadcrumbPage.tsx b/frontend/src/pages/projects/screens/detail/pipelines/ProjectPipelineBreadcrumbPage.tsx index 37c751d9b6..da3400b369 100644 --- 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 = ({ return ( [ Data Science Projects} diff --git a/frontend/src/routes/pipelines/experiments.ts b/frontend/src/routes/pipelines/experiments.ts index 7af7f5b2b2..56c8566320 100644 --- a/frontend/src/routes/pipelines/experiments.ts +++ b/frontend/src/routes/pipelines/experiments.ts @@ -36,7 +36,7 @@ export const experimentsCloneScheduleRoute = ( export const experimentRunsRoute = ( namespace: string | undefined, experimentId: string | undefined, - runType?: PipelineRunType, + runType?: PipelineRunType | null, ): string => !experimentId ? experimentsBaseRoute(namespace)