-
Notifications
You must be signed in to change notification settings - Fork 178
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
Showing
13 changed files
with
276 additions
and
92 deletions.
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
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
71 changes: 71 additions & 0 deletions
71
frontend/src/concepts/modelRegistry/context/ModelRegistrySelectorContext.tsx
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> | ||
| ); | ||
| }); |
79 changes: 72 additions & 7 deletions
79
frontend/src/pages/modelRegistry/ModelRegistryCoreLoader.tsx
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 { Outlet } from 'react-router'; | ||
|
|
||
| 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 = () => ( | ||
| <ModelRegistryContextProvider modelRegistryName="modelregistry-sample"> | ||
| <Outlet /> | ||
| </ModelRegistryContextProvider> | ||
| ); | ||
| 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,25 @@ | ||
| import * as React from 'react'; | ||
| import { Navigate, Route } from 'react-router-dom'; | ||
| import ProjectsRoutes from '~/concepts/projects/ProjectsRoutes'; | ||
| import { Navigate, Route, Routes } from 'react-router-dom'; | ||
| import { ModelRegistrySelectorContextProvider } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext'; | ||
| import ModelRegistryCoreLoader from './ModelRegistryCoreLoader'; | ||
| import ModelRegistry from './screens/ModelRegistry'; | ||
|
|
||
| const ModelServingRoutes: React.FC = () => ( | ||
| <ProjectsRoutes> | ||
| <Route path={'/:modelRegistry?/*'} element={<ModelRegistryCoreLoader />}> | ||
| <Route index element={<ModelRegistry />} /> | ||
| <Route path="*" element={<Navigate to="." />} /> | ||
| </Route> | ||
| </ProjectsRoutes> | ||
| <ModelRegistrySelectorContextProvider> | ||
| <Routes> | ||
| <Route | ||
| path={'/:modelRegistry?/*'} | ||
| element={ | ||
| <ModelRegistryCoreLoader | ||
| getInvalidRedirectPath={(modelRegistry) => `/modelRegistry/${modelRegistry}`} | ||
| /> | ||
| } | ||
| > | ||
| <Route index element={<ModelRegistry />} /> | ||
| <Route path="*" element={<Navigate to="." />} /> | ||
| </Route> | ||
| </Routes> | ||
| </ModelRegistrySelectorContextProvider> | ||
| ); | ||
|
|
||
| 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
Oops, something went wrong.