feat(mr): routes etc and empty state for registered deployments

Signed-off-by: gitdallas <[email protected]>
opendatahub-io · May 9, 2024 · 88232f0 · 88232f0
1 parent ee7e684
commit 88232f0
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 47 deletions.
diff --git 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={<ModelVersionsDetails tab={ModelVersionDetailsTab.DETAILS} empty={false} />}
             />
+            <Route
+              path={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
+              element={
+                <ModelVersionsDetails
+                  tab={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
+                  empty={false}
+                />
+              }
+            />
             <Route path="*" element={<Navigate to="." />} />
           </Route>
           <Route path="*" element={<Navigate to="." />} />

diff --git 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<EmptyModelRegistryStateType> = ({
   primaryActionOnClick,
   secondaryActionOnClick,
 }) => (
-  <EmptyState variant={EmptyStateVariant.sm} data-testid="empty-model-registry">
+  <EmptyState variant={EmptyStateVariant.lg} data-testid="empty-model-registry">
     <EmptyStateHeader titleText={title} icon={<EmptyStateIcon icon={PlusCircleIcon} />} />
     <EmptyStateBody>{description}</EmptyStateBody>
     <EmptyStateFooter>
       <EmptyStateActions>
-        <Button
-          data-testid="empty-model-registry-primary-action"
-          variant={ButtonVariant.primary}
-          onClick={primaryActionOnClick}
-        >
-          {primaryActionText}
-        </Button>
+        {primaryActionText && (
+          <Button
+            data-testid="empty-model-registry-primary-action"
+            variant={ButtonVariant.primary}
+            onClick={primaryActionOnClick}
+          >
+            {primaryActionText}
+          </Button>
+        )}
+        {secondaryActionText && (
+          <Button
+            data-testid="empty-model-registry-secondary-action"
+            variant="link"
+            onClick={secondaryActionOnClick}
+          >
+            {secondaryActionText}
+          </Button>
+        )}
       </EmptyStateActions>
-      {secondaryActionText && (
-        <Button
-          data-testid="empty-model-registry-secondary-action"
-          variant="link"
-          onClick={secondaryActionOnClick}
-        >
-          {secondaryActionText}
-        </Button>
-      )}
     </EmptyStateFooter>
   </EmptyState>
 );

diff --git 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<ModelVersionDetailTabsProps> = ({
   tab,
   modelVersion: mv,
-}) => (
-  <Tabs
-    activeKey={tab}
-    aria-label="Model versions details page tabs"
-    role="region"
-    data-testid="model-versions-details-page-tabs"
-  >
-    <Tab
-      eventKey={ModelVersionDetailsTab.DETAILS}
-      title={<TabTitleText>{ModelVersionDetailsTabTitle.DETAILS}</TabTitleText>}
-      aria-label="Model versions details tab"
-      data-testid="model-versions-details-tab"
+}) => {
+  const navigate = useNavigate();
+  return (
+    <Tabs
+      activeKey={tab}
+      aria-label="Model versions details page tabs"
+      role="region"
+      data-testid="model-versions-details-page-tabs"
+      onSelect={(_event, eventKey) => navigate(`../${eventKey}`, { relative: 'path' })}
     >
-      <PageSection isFilled variant="light" data-testid="model-versions-details-tab-content">
-        <ModelVersionDetailsView modelVersion={mv} />
-      </PageSection>
-    </Tab>
-    <Tab
-      eventKey={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
-      title={<TabTitleText>{ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}</TabTitleText>}
-      aria-label="Registered deployments tab"
-      data-testid="registered-deployments-tab"
-    >
-      <PageSection isFilled variant="light" data-testid="registered-deployments-tab-content">
-        {/* TODO: Fill Model Details Page Component here */}
-      </PageSection>
-    </Tab>
-  </Tabs>
-);
+      <Tab
+        eventKey={ModelVersionDetailsTab.DETAILS}
+        title={<TabTitleText>{ModelVersionDetailsTabTitle.DETAILS}</TabTitleText>}
+        aria-label="Model versions details tab"
+        data-testid="model-versions-details-tab"
+      >
+        <PageSection isFilled variant="light" data-testid="model-versions-details-tab-content">
+          <ModelVersionDetailsView modelVersion={mv} />
+        </PageSection>
+      </Tab>
+      <Tab
+        eventKey={ModelVersionDetailsTab.REGISTERED_DEPLOYMENTS}
+        title={<TabTitleText>{ModelVersionDetailsTabTitle.REGISTERED_DEPLOYMENTS}</TabTitleText>}
+        aria-label="Registered deployments tab"
+        data-testid="registered-deployments-tab"
+      >
+        <PageSection isFilled variant="light" data-testid="registered-deployments-tab-content">
+          <ModelVersionRegisteredDeploymentsView modelVersion={mv} />
+        </PageSection>
+      </Tab>
+    </Tabs>
+  );
+};
 
 export default ModelVersionDetailsTabs;
diff --git a/...pages/modelRegistry/screens/ModelVersionDetails/ModelVersionRegisteredDeploymentsView.tsx b/...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 (
+    <EmptyModelRegistryState
+      title="No registered deployments"
+      description="You can deploy this version using Actions dropdown in the header"
+    />
+  );
+};
+export default ModelVersionRegisteredDeploymentsView;