From 4d6e7eee0f4676165efcf13c737b1b8138704f7a Mon Sep 17 00:00:00 2001 From: Jeffrey Phillips Date: Wed, 18 Sep 2024 09:10:21 -0400 Subject: [PATCH] Update project selector --- backend/src/utils/constants.ts | 2 +- .../searchSelector/SearchSelector.tsx | 1 + .../createRun/CloneRecurringRunPage.tsx | 3 + .../content/createRun/CloneRunPage.tsx | 3 + .../pipeline/PipelineDetails.tsx | 1 + .../src/concepts/projects/ProjectSelector.tsx | 29 +--- frontend/src/pages/ApplicationsPage.tsx | 20 +++ frontend/src/pages/ComingSoonPage.tsx | 41 ++--- .../global/GlobalDistributedWorkloads.tsx | 10 +- .../CustomServingRuntimeView.tsx | 2 +- .../global/GlobalModelServingCoreLoader.tsx | 3 +- .../screens/global/ModelServingGlobal.tsx | 7 +- .../screens/metrics/MetricsPage.tsx | 1 + .../BiasConfigurationPage.tsx | 1 + .../screens/projects/ModelServingPlatform.tsx | 91 +++++----- .../pages/pipelines/GlobalArtifactsRoutes.tsx | 7 +- .../GlobalPipelineExecutionsRoutes.tsx | 1 + .../GlobalPipelineExperimentsRoutes.tsx | 3 +- .../pages/pipelines/GlobalPipelinesRoutes.tsx | 3 +- .../global/GlobalPipelineCoreLoader.tsx | 3 +- .../global/PipelineCoreApplicationPage.tsx | 3 +- .../ExperimentCloneRecurringRunPage.tsx | 1 + .../experiments/ExperimentCloneRunPage.tsx | 1 + .../ArtifactDetails/ArtifactDetails.tsx | 1 + .../compareRuns/CompareRunsPage.tsx | 1 + .../compareRuns/ManageRunsPage.tsx | 1 + .../executions/details/ExecutionDetails.tsx | 1 + .../PipelineVersionCloneRecurringRunPage.tsx | 1 + .../pipelines/PipelineVersionCloneRunPage.tsx | 1 + .../screens/detail/DetailsSection.tsx | 155 ++++++------------ .../screens/detail/ProjectDetails.tsx | 1 + .../screens/detail/notebooks/NotebookList.tsx | 2 +- .../detail/pipelines/PipelinesSection.tsx | 1 - .../projects/screens/projects/ProjectView.tsx | 2 +- 34 files changed, 175 insertions(+), 229 deletions(-) diff --git a/backend/src/utils/constants.ts b/backend/src/utils/constants.ts index cb8905e8c9..9e55ccf829 100644 --- a/backend/src/utils/constants.ts +++ b/backend/src/utils/constants.ts @@ -64,7 +64,7 @@ export const blankDashboardCR: DashboardConfig = { disablePipelineExperiments: false, disableDistributedWorkloads: false, disableModelRegistry: true, - disableConnectionTypes: true, + disableConnectionTypes: false, disableStorageClasses: true, }, notebookController: { diff --git a/frontend/src/components/searchSelector/SearchSelector.tsx b/frontend/src/components/searchSelector/SearchSelector.tsx index 0dd313ab61..bde0f189c6 100644 --- a/frontend/src/components/searchSelector/SearchSelector.tsx +++ b/frontend/src/components/searchSelector/SearchSelector.tsx @@ -91,6 +91,7 @@ const SearchSelector: React.FC = ({ isFullWidth={isFullWidth} data-testid={`${dataTestId}-toggle`} variant={toggleVariant} + className={toggleVariant === 'plainText' ? 'pf-v5-u-px-0 pf-v5-u-py-sm' : undefined} > diff --git a/frontend/src/concepts/pipelines/content/createRun/CloneRecurringRunPage.tsx b/frontend/src/concepts/pipelines/content/createRun/CloneRecurringRunPage.tsx index 65a635318f..fad6e1a638 100644 --- a/frontend/src/concepts/pipelines/content/createRun/CloneRecurringRunPage.tsx +++ b/frontend/src/concepts/pipelines/content/createRun/CloneRecurringRunPage.tsx @@ -11,6 +11,7 @@ import { RunTypeOption } from './types'; type CloneRecurringRunPageProps = { detailsRedirect: (recurringRunId: string) => string; + getProjectRedirectPath: (namespace: string) => string; contextExperiment?: ExperimentKFv2 | null; contextPipeline?: PipelineKFv2 | null; contextPipelineVersion?: PipelineVersionKFv2 | null; @@ -20,6 +21,7 @@ const CloneRecurringRunPage: React.FC = breadcrumbPath, contextPath, detailsRedirect, + getProjectRedirectPath, ...props }) => { const { recurringRunId } = useParams(); @@ -47,6 +49,7 @@ const CloneRecurringRunPage: React.FC = loaded={loaded} loadError={error} empty={false} + getRedirectPath={getProjectRedirectPath} > string; + getProjectRedirectPath: (namespace: string) => string; contextExperiment?: ExperimentKFv2 | null; contextPipeline?: PipelineKFv2 | null; contextPipelineVersion?: PipelineVersionKFv2 | null; @@ -20,6 +21,7 @@ const CloneRunPage: React.FC = ({ breadcrumbPath, contextPath, detailsRedirect, + getProjectRedirectPath, ...props }) => { const { runId } = useParams(); @@ -47,6 +49,7 @@ const CloneRunPage: React.FC = ({ loaded={loaded} loadError={error} empty={false} + getRedirectPath={getProjectRedirectPath} > `${ns}/pipelines`} headerAction={ isPipelineVersionLoaded && ( ['variant']; filterLabel?: string; showTitle?: boolean; selectorLabel?: string; @@ -24,6 +24,7 @@ const ProjectSelector: React.FC = ({ invalidDropdownPlaceholder, selectAllProjects, primary, + variant = 'plainText', filterLabel, showTitle = false, selectorLabel = 'Project', @@ -48,7 +49,10 @@ const ProjectSelector: React.FC = ({ : projects; const visibleProjects = filteredProjects.filter(bySearchText); - const toggleLabel = projects.length === 0 ? 'No projects' : selectionDisplayName; + const toggleLabel = + projects.length === 0 + ? 'No projects' + : `${showTitle ? `${selectorLabel}: ` : ''}${selectionDisplayName}`; const selector = ( = ({ searchPlaceholder="Project name" searchValue={searchText} toggleText={toggleLabel} - toggleVariant={primary ? 'primary' : undefined} + toggleVariant={primary ? 'primary' : variant} > <> {selectAllProjects && ( @@ -96,23 +100,6 @@ const ProjectSelector: React.FC = ({ ); - if (showTitle) { - return ( - - - - - {selectorLabel} - - {selector} - - - ); - } return selector; }; diff --git a/frontend/src/pages/ApplicationsPage.tsx b/frontend/src/pages/ApplicationsPage.tsx index 649adba34a..367a17a7a0 100644 --- a/frontend/src/pages/ApplicationsPage.tsx +++ b/frontend/src/pages/ApplicationsPage.tsx @@ -16,6 +16,7 @@ import { EmptyStateHeader, Flex, } from '@patternfly/react-core'; +import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator'; type ApplicationsPageProps = { title?: React.ReactNode; @@ -30,6 +31,7 @@ type ApplicationsPageProps = { emptyStatePage?: React.ReactNode; headerAction?: React.ReactNode; headerContent?: React.ReactNode; + getRedirectPath?: (namespace: string) => string; provideChildrenPadding?: boolean; removeChildrenTopPadding?: boolean; subtext?: React.ReactNode; @@ -50,6 +52,7 @@ const ApplicationsPage: React.FC = ({ emptyStatePage, headerAction, headerContent, + getRedirectPath, provideChildrenPadding, removeChildrenTopPadding, subtext, @@ -143,6 +146,23 @@ const ApplicationsPage: React.FC = ({ return ( <> + {getRedirectPath ? ( + + + + ) : null} {breadcrumb && {breadcrumb}} {!noHeader && renderHeader()} {renderContents()} diff --git a/frontend/src/pages/ComingSoonPage.tsx b/frontend/src/pages/ComingSoonPage.tsx index 3c52de8ea3..81538e306e 100644 --- a/frontend/src/pages/ComingSoonPage.tsx +++ b/frontend/src/pages/ComingSoonPage.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { PageSection, Stack, StackItem, Title } from '@patternfly/react-core'; import EmptyDetailsView from '~/components/EmptyDetailsView'; -import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator'; +import ApplicationsPage from '~/pages/ApplicationsPage'; type ComingSoonPageProps = { title: string; @@ -10,31 +9,19 @@ type ComingSoonPageProps = { }; const ComingSoonPage: React.FC = ({ title, namespaced, path }) => ( - - - {namespaced ? ( - - `/projects/${ns}/${path}`} - showTitle - invalidDropdownPlaceholder="Select project" - /> - - ) : null} - - - {title} - - - - - - - + `/projects/${ns}/${path}` : undefined} + title={title} + emptyStatePage={ + + } + /> ); export default ComingSoonPage; diff --git a/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx b/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx index ae96c819e4..233cfd1ee8 100644 --- a/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx +++ b/frontend/src/pages/distributedWorkloads/global/GlobalDistributedWorkloads.tsx @@ -7,7 +7,6 @@ import DistributedWorkloadsNoProjects from '~/pages/distributedWorkloads/global/ import GlobalDistributedWorkloadsTabs from '~/pages/distributedWorkloads/global/GlobalDistributedWorkloadsTabs'; import { MetricsCommonContextProvider } from '~/concepts/metrics/MetricsCommonContext'; import { RefreshIntervalTitle } from '~/concepts/metrics/types'; -import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator'; import { useQueryParams } from '~/utilities/useQueryParams'; const title = 'Distributed Workload Metrics'; @@ -44,14 +43,7 @@ const GlobalDistributedWorkloads: React.FC = () => { {...{ title, description }} loaded empty={false} - headerContent={ - - `/projects/${ns}/distributedWorkloads?tab=${activeTab.path}` - } - showTitle - /> - } + getRedirectPath={(ns: string) => `/projects/${ns}/distributedWorkloads?tab=${activeTab.path}`} > diff --git a/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeView.tsx b/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeView.tsx index f296119987..d2c95f0a16 100644 --- a/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeView.tsx +++ b/frontend/src/pages/modelServing/customServingRuntimes/CustomServingRuntimeView.tsx @@ -18,7 +18,7 @@ const CustomServingRuntimeView: React.FC = () => { empty={servingRuntimeTemplates.length === 0} emptyStatePage={} provideChildrenPadding - headerContent={} + headerAction={} > diff --git a/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx b/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx index ba1ab98656..2e6095d412 100644 --- a/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx +++ b/frontend/src/pages/modelServing/screens/global/GlobalModelServingCoreLoader.tsx @@ -5,7 +5,6 @@ import { byName, ProjectsContext } from '~/concepts/projects/ProjectsContext'; import InvalidProject from '~/concepts/projects/InvalidProject'; import ModelServingContextProvider from '~/pages/modelServing/ModelServingContext'; import ModelServingNoProjects from '~/pages/modelServing/screens/global/ModelServingNoProjects'; -import ModelServingProjectSelection from '~/pages/modelServing/screens/global/ModelServingProjectSelection'; type ApplicationPageProps = React.ComponentProps; type EmptyStateProps = 'emptyStatePage' | 'empty'; @@ -65,7 +64,7 @@ const GlobalModelServingCoreLoader: React.FC title="Deployed models" description="Manage and view the health and performance of your deployed models." loaded - headerContent={} + getRedirectPath={getInvalidRedirectPath} provideChildrenPadding /> ); diff --git a/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx b/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx index b83db1f6e1..54d7bac013 100644 --- a/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx +++ b/frontend/src/pages/modelServing/screens/global/ModelServingGlobal.tsx @@ -8,7 +8,6 @@ import { ProjectObjectType } from '~/concepts/design/utils'; import TitleWithIcon from '~/concepts/design/TitleWithIcon'; import EmptyModelServing from './EmptyModelServing'; import InferenceServiceListView from './InferenceServiceListView'; -import ModelServingProjectSelection from './ModelServingProjectSelection'; import ModelServingLoading from './ModelServingLoading'; const ModelServingGlobal: React.FC = () => { @@ -48,11 +47,7 @@ const ModelServingGlobal: React.FC = () => { description="Manage and view the health and performance of your deployed models." loadError={notInstalledError} loaded={servingRuntimesLoaded && inferenceServicesLoaded} - headerContent={ - `/modelServing/${namespace}`} - /> - } + getRedirectPath={(namespace: string) => `/modelServing/${namespace}`} provideChildrenPadding loadingContent={ currentProject ? undefined : ( diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx index ba4f0666a9..24e7ad3cf1 100644 --- a/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx +++ b/frontend/src/pages/modelServing/screens/metrics/MetricsPage.tsx @@ -35,6 +35,7 @@ const MetricsPage: React.FC = ({ title, breadcrumbItems, type, loaded description={null} empty={false} + getRedirectPath={(ns) => `/modelServing/${ns}`} headerAction={ tab === MetricsTabKeys.BIAS && (