-
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.
Merge pull request #2747 from lucferbux/rhoaieng-5141
Add route switching and proxy handling
- Loading branch information
Showing
18 changed files
with
427 additions
and
188 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
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> | ||
| ); | ||
| }); |
89 changes: 81 additions & 8 deletions
89
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,85 @@ | ||
| 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 EmptyModelRegistryState from './screens/EmptyModelRegistryState'; | ||
| import ModelRegistrySelectorNavigator from './screens/ModelRegistrySelectorNavigator'; | ||
|
|
||
| type ApplicationPageProps = React.ComponentProps<typeof ApplicationsPage>; | ||
| type EmptyStateProps = 'emptyStatePage' | 'empty'; | ||
|
|
||
| type ModelRegistryCoreLoaderProps = { | ||
| getInvalidRedirectPath: (modelRegistry: string) => string; | ||
| }; | ||
|
|
||
| type ApplicationPageRenderState = Pick<ApplicationPageProps, EmptyStateProps>; | ||
|
|
||
| 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: ( | ||
| // TODO: Replace this with a component for empty registries once we have the designs | ||
| <EmptyModelRegistryState | ||
| title="No model registries found" | ||
| description="No model registries found in the cluster. Configure a new one before registering models." | ||
| primaryActionText="Configure model registry" | ||
| primaryActionOnClick={() => { | ||
| // TODO: Add primary action | ||
| }} | ||
| /> | ||
| ), | ||
| }; | ||
| } 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} />, | ||
| }; | ||
| } 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={ | ||
| <ModelRegistrySelectorNavigator | ||
| getRedirectPath={(modelRegistryName) => `/modelRegistry/${modelRegistryName}`} | ||
| /> | ||
| } | ||
| provideChildrenPadding | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| // TODO: Parametrize this to make the route dynamic | ||
| const ModelRegistryCoreLoader: React.FC = () => ( | ||
| <ModelRegistryContextProvider modelRegistryName="modelregistry-sample"> | ||
| <Outlet /> | ||
| </ModelRegistryContextProvider> | ||
| ); | ||
| 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,23 +1,31 @@ | ||
| 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'; | ||
| import { ModelVersionsTabs } from './screens/const'; | ||
| import ModelVersions from './screens/ModelVersions'; | ||
|
|
||
| const ModelRegistryRoutes: React.FC = () => ( | ||
| <ProjectsRoutes> | ||
| <Route path={'/:modelRegistry?/*'} element={<ModelRegistryCoreLoader />}> | ||
| <Route index element={<ModelRegistry />} /> | ||
| <Route path={`${process.env.MODEL_REGISTRY_NAME}`} element={<ModelRegistry />} /> | ||
| <ModelRegistrySelectorContextProvider> | ||
| <Routes> | ||
| <Route | ||
| path={`${process.env.MODEL_REGISTRY_NAME}/registered_models/:registeredModelId`} | ||
| element={<ModelVersions tab={ModelVersionsTabs.VERSIONS} empty={false} />} | ||
| /> | ||
| <Route path="*" element={<Navigate to="." />} /> | ||
| </Route> | ||
| </ProjectsRoutes> | ||
| path={'/:modelRegistry?/*'} | ||
| element={ | ||
| <ModelRegistryCoreLoader | ||
| getInvalidRedirectPath={(modelRegistry) => `/modelRegistry/${modelRegistry}`} | ||
| /> | ||
| } | ||
| > | ||
| <Route index element={<ModelRegistry />} /> | ||
| <Route | ||
| path="registeredModels/:registeredModelId" | ||
| element={<ModelVersions tab={ModelVersionsTabs.VERSIONS} empty={false} />} | ||
| /> | ||
| <Route path="*" element={<Navigate to="." />} /> | ||
| </Route> | ||
| </Routes> | ||
| </ModelRegistrySelectorContextProvider> | ||
| ); | ||
|
|
||
| export default ModelRegistryRoutes; |
Oops, something went wrong.