From e80751af39c77c13401118f0a274e809b399272e Mon Sep 17 00:00:00 2001 From: gitdallas <5322142+gitdallas@users.noreply.github.com> Date: Tue, 7 May 2024 15:29:57 -0500 Subject: [PATCH] feat(mr): routes etc and empty state for registered deployments Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com> --- .../modelRegistry/ModelRegistryRoutes.tsx | 9 +++ .../screens/EmptyModelRegistryState.tsx | 38 ++++++------ .../ModelVersionDetailsTabs.tsx | 62 ++++++++++--------- .../ModelVersionRegisteredDeploymentsView.tsx | 22 +++++++ 4 files changed, 85 insertions(+), 46 deletions(-) create mode 100644 frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx 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 8445ef4d4f..c197cce655 100644 --- a/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx +++ b/frontend/src/pages/modelRegistry/screens/EmptyModelRegistryState.tsx @@ -16,8 +16,8 @@ type EmptyModelRegistryStateType = { testid?: string; title: string; description: string; - primaryActionText: string; - primaryActionOnClick: () => void; + primaryActionText?: string; + primaryActionOnClick?: () => void; secondaryActionText?: string; secondaryActionOnClick?: () => void; }; @@ -36,23 +36,25 @@ const EmptyModelRegistryState: React.FC = ({ {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 8398f8e2ed..700c24574d 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; @@ -15,34 +17,38 @@ const ModelVersionDetailsTabs: React.FC = ({ tab, modelVersion: mv, refresh, -}) => ( - - {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;