Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor model registry routes and configuration in ModelRegistryCore…
…Loader.tsx, ModelRegistryRoutes.tsx, and InvalidModelRegistry.tsx
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import * as React from 'react'; | ||
| import { Alert, Bullseye } from '@patternfly/react-core'; | ||
| import { SupportedArea, conditionalArea } from '~/concepts/areas'; | ||
| import { ModelRegistryKind } from '~/k8sTypes'; | ||
| import useModelRegistries from '~/concepts/modelRegistry/apiHooks/useModelRegistries'; | ||
|
|
||
| export type ModelRegistrySelectorContextType = { | ||
| modelRegistries: ModelRegistryKind[]; | ||
| preferredModelRegistry: ModelRegistryKind | undefined; | ||
| updatePreferredModelRegistry: (modelRegistry: ModelRegistryKind | undefined) => void; | ||
| }; | ||
|
|
||
| type ModelRegistrySelectorContextProviderProps = { | ||
| children: React.ReactNode; | ||
| }; | ||
|
|
||
| export const ModelRegistrySelectorContext = React.createContext<ModelRegistrySelectorContextType>({ | ||
| modelRegistries: [], | ||
| preferredModelRegistry: undefined, | ||
| updatePreferredModelRegistry: () => undefined, | ||
| }); | ||
|
|
||
| export const ModelRegistrySelectorContextProvider = | ||
| conditionalArea<ModelRegistrySelectorContextProviderProps>( | ||
| SupportedArea.MODEL_REGISTRY, | ||
| true, | ||
| )(({ children }) => { | ||
| const [modelRegistries, isLoaded, error] = useModelRegistries(); | ||
| const [preferredModelRegistry, setPreferredModelRegistry] = | ||
| React.useState<ModelRegistrySelectorContextType['preferredModelRegistry']>(undefined); | ||
|
|
||
| const firstModelRegistry = modelRegistries.length > 0 ? modelRegistries[0] : null; | ||
|
|
||
| React.useEffect(() => { | ||
| if (firstModelRegistry && !preferredModelRegistry) { | ||
| setPreferredModelRegistry(firstModelRegistry); | ||
| } | ||
| }, [firstModelRegistry, preferredModelRegistry]); | ||
|
|
||
| const updatePreferredModelRegistry = React.useCallback< | ||
| ModelRegistrySelectorContextType['updatePreferredModelRegistry'] | ||
| >((modelRegistry) => { | ||
| setPreferredModelRegistry(modelRegistry); | ||
| }, []); | ||
|
|
||
| if (!isLoaded) { | ||
| return <Bullseye>Loading model registries...</Bullseye>; | ||
| } | ||
|
|
||
| if (error) { | ||
| return ( | ||
| <Bullseye> | ||
| <Alert title="Model registry load error" variant="danger" isInline> | ||
| {error.message} | ||
| </Alert> | ||
| </Bullseye> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <ModelRegistrySelectorContext.Provider | ||
| value={{ | ||
| modelRegistries, | ||
| preferredModelRegistry, | ||
| updatePreferredModelRegistry, | ||
| }} | ||
| > | ||
| {children} | ||
| </ModelRegistrySelectorContext.Provider> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,77 @@ | ||
| import * as React from 'react'; | ||
| import { Navigate, Outlet, useParams } from 'react-router'; | ||
| import { ModelRegistryContextProvider } from '~/concepts/modelRegistry/context/ModelRegistryContext'; | ||
| import ApplicationsPage from '~/pages/ApplicationsPage'; | ||
| import TitleWithIcon from '~/concepts/design/TitleWithIcon'; | ||
| import { ProjectObjectType } from '~/concepts/design/utils'; | ||
|
|
||
| import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext'; | ||
| import InvalidModelRegistry from './screens/InvalidModelRegistry'; | ||
| import ModelRegistrySelector from './screens/ModelRegistrySelector'; | ||
| import EmptyRegisteredModels from './screens/EmptyRegisteredModels'; | ||
|
|
||
| type ApplicationPageProps = React.ComponentProps<typeof ApplicationsPage>; | ||
| type EmptyStateProps = 'emptyStatePage' | 'empty'; | ||
|
|
||
| type ModelRegistryCoreLoaderProps = { | ||
| getInvalidRedirectPath: (modelRegistry: string) => string; | ||
| }; | ||
|
|
||
| type ApplicationPageRenderState = Pick<ApplicationPageProps, EmptyStateProps>; | ||
|
|
||
| // TODO: Parametrize this to make the route dynamic | ||
| const ModelRegistryCoreLoader: React.FC<ModelRegistryCoreLoaderProps> = ({ | ||
| getInvalidRedirectPath, | ||
| }) => { | ||
| const { modelRegistry } = useParams<{ modelRegistry: string }>(); | ||
| const { modelRegistries, preferredModelRegistry } = React.useContext( | ||
| ModelRegistrySelectorContext, | ||
| ); | ||
|
|
||
| let renderStateProps: ApplicationPageRenderState & { children?: React.ReactNode }; | ||
| if (modelRegistries.length === 0) { | ||
| renderStateProps = { | ||
| empty: true, | ||
| emptyStatePage: <EmptyRegisteredModels preferredModelRegistry="TODO: Change" />, | ||
| }; | ||
| } else if (modelRegistry) { | ||
| const foundModelRegistry = modelRegistries.find((mr) => mr.metadata.name === modelRegistry); | ||
| if (foundModelRegistry) { | ||
| // Render the content | ||
| return ( | ||
| <ModelRegistryContextProvider modelRegistryName={modelRegistry}> | ||
| <Outlet /> | ||
| </ModelRegistryContextProvider> | ||
| ); | ||
| } | ||
|
|
||
| // They ended up on a non-valid project path | ||
| renderStateProps = { | ||
| empty: true, | ||
| emptyStatePage: ( | ||
| <InvalidModelRegistry | ||
| modelRegistry={modelRegistry} | ||
| getRedirectPath={getInvalidRedirectPath} | ||
| /> | ||
| ), | ||
| }; | ||
| } else { | ||
| // Redirect the namespace suffix into the URL | ||
| const redirectModelRegistry = preferredModelRegistry ?? modelRegistries[0]; | ||
| return <Navigate to={getInvalidRedirectPath(redirectModelRegistry.metadata.name)} replace />; | ||
| } | ||
|
|
||
| return ( | ||
| <ApplicationsPage | ||
| title={ | ||
| <TitleWithIcon title="Registered models" objectType={ProjectObjectType.registeredModels} /> | ||
| } | ||
| {...renderStateProps} | ||
| loaded | ||
| headerContent={<ModelRegistrySelector />} | ||
| provideChildrenPadding | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default ModelRegistryCoreLoader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,16 +1,22 @@ | ||
| import * as React from 'react'; | ||
| import { Navigate, Route, Routes } from 'react-router-dom'; | ||
| import ModelRegistryCoreLoader from './ModelRegistryCoreLoader'; | ||
| import ModelRegistry from './screens/ModelRegistry'; | ||
|
|
||
| const ModelServingRoutes: React.FC = () => ( | ||
| <Routes> | ||
| <Route | ||
| path={'/:modelRegistry?/*'} | ||
| element={ | ||
| <ModelRegistryCoreLoader | ||
| getInvalidRedirectPath={(modelRegistry) => `/modelRegistry/${modelRegistry}`} | ||
| /> | ||
| } | ||
| > | ||
| <Route index element={<ModelRegistry />} /> | ||
| <Route path="*" element={<Navigate to="." />} /> | ||
| </Route> | ||
| </Routes> | ||
| ); | ||
|
|
||
| export default ModelServingRoutes; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import * as React from 'react'; | ||
| import EmptyStateErrorMessage from '~/components/EmptyStateErrorMessage'; | ||
| import ProjectSelectorNavigator from '~/concepts/projects/ProjectSelectorNavigator'; | ||
|
|
||
| type InvalidModelRegistryProps = { | ||
| title?: string; | ||
| modelRegistry?: string; | ||
| getRedirectPath: (namespace: string) => string; | ||
| }; | ||
|
|
||
| const InvalidModelRegistry: React.FC<InvalidModelRegistryProps> = ({ | ||
| title, | ||
| modelRegistry, | ||
| getRedirectPath, | ||
| }) => ( | ||
| <EmptyStateErrorMessage | ||
| title={title || 'Model Registry not found'} | ||
| bodyText={`${ | ||
| modelRegistry ? `Model Registry ${modelRegistry}` : 'The Model Registry' | ||
| } was not found.`} | ||
| > | ||
| {/* TODO: Replace this with a model registry selector */} | ||
| <ProjectSelectorNavigator | ||
| getRedirectPath={getRedirectPath} | ||
| invalidDropdownPlaceholder="Select project" | ||
| primary | ||
| /> | ||
| </EmptyStateErrorMessage> | ||
| ); | ||
|
|
||
| export default InvalidModelRegistry; |
Oops, something went wrong.