diff --git a/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx b/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx index 1efe05a190..76c1439944 100644 --- a/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx +++ b/frontend/src/pages/modelRegistry/ModelRegistryRoutes.tsx @@ -36,6 +36,15 @@ const ModelRegistryRoutes: React.FC = () => ( path={ModelVersionDetailsTab.DETAILS} element={} /> + + } + /> } /> } /> diff --git a/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx b/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx index 3b62e2312e..2190f60bc8 100644 --- a/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx +++ b/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx @@ -15,8 +15,8 @@ import * as React from 'react'; type EmptyModelRegistryStateType = { title: string; description: string; - primaryActionText: string; - primaryActionOnClick: () => void; + primaryActionText?: string; + primaryActionOnClick?: () => void; secondaryActionText?: string; secondaryActionOnClick?: () => void; }; @@ -29,28 +29,30 @@ const EmptyModelRegistryState: React.FC = ({ primaryActionOnClick, secondaryActionOnClick, }) => ( - + } /> {description} - + {primaryActionText && ( + + )} + {secondaryActionText && ( + + )} - {secondaryActionText && ( - - )} ); diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx index 232095917b..1313003b47 100644 --- a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx +++ b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsTabs.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; +import { useNavigate } from 'react-router-dom'; import { PageSection, Tab, Tabs, TabTitleText } from '@patternfly/react-core'; import '~/pages/pipelines/global/runs/GlobalPipelineRunsTabs.scss'; import { ModelVersion } from '~/concepts/modelRegistry/types'; import { ModelVersionDetailsTabTitle, ModelVersionDetailsTab } from './const'; import ModelVersionDetailsView from './ModelVersionDetailsView'; +import ModelVersionRegisteredDeploymentsView from './ModelVersionRegisteredDeploymentsView'; type ModelVersionDetailTabsProps = { tab: ModelVersionDetailsTab; @@ -13,34 +15,38 @@ type ModelVersionDetailTabsProps = { const ModelVersionDetailsTabs: React.FC = ({ tab, modelVersion: mv, -}) => ( - - {ModelVersionDetailsTabTitle.DETAILS}} - aria-label="Model versions details tab" - data-testid="model-versions-details-tab" +}) => { + const navigate = useNavigate(); + return ( + navigate(`../${eventKey}`, { relative: 'path' })} > - - - - - {ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}} - aria-label="Registered deployments tab" - data-testid="registered-deployments-tab" - > - - {/* TODO: Fill Model Details Page Component here */} - - - -); + {ModelVersionDetailsTabTitle.DETAILS}} + aria-label="Model versions details tab" + data-testid="model-versions-details-tab" + > + + + + + {ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}} + aria-label="Registered deployments tab" + data-testid="registered-deployments-tab" + > + + + + + + ); +}; export default ModelVersionDetailsTabs; diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx new file mode 100644 index 0000000000..248519ebce --- /dev/null +++ b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; +import { ModelVersion } from '~/concepts/modelRegistry/types'; +import EmptyModelRegistryState from '~/pages/modelRegistry/screens/EmptyModelRegistryState'; + +type ModelVersionRegisteredDeploymentsViewProps = { + modelVersion: ModelVersion; +}; + +const ModelVersionRegisteredDeploymentsView: React.FC< + ModelVersionRegisteredDeploymentsViewProps +> = ({ modelVersion: mv }) => { + // eslint-disable-next-line no-console + console.log({ mv }); + //TODO: implement component + return ( + + ); +}; +export default ModelVersionRegisteredDeploymentsView;