[RHOAIENG-5083] updated UI for the Serve models section and Models tab

opendatahub-io · Apr 12, 2024 · f1206e7 · f1206e7
1 parent 97b4328
commit f1206e7
Show file tree

Hide file tree

Showing 18 changed files with 452 additions and 259 deletions.
diff --git a/frontend/src/components/error/ErrorBoundary.tsx b/frontend/src/components/error/ErrorBoundary.tsx
@@ -62,7 +62,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
           <ErrorDetails
             title={error.name}
             errorMessage={error.message}
-            componentStack={errorInfo.componentStack}
+            componentStack={errorInfo.componentStack || ''}
             stack={error.stack}
           />
         </div>

diff --git a/frontend/src/concepts/design/TypeBorderCard.scss b/frontend/src/concepts/design/TypeBorderCard.scss
@@ -1,6 +1,6 @@
 .odh-type-bordered-card {
   position: relative;
-  border-radius: 10px;
+  border-radius: 16px;
   border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
   &:after {
     position: absolute;

diff --git a/frontend/src/images/gears.svg b/frontend/src/images/gears.svg
diff --git a/frontend/src/pages/modelServing/screens/projects/EmptyModelServingPlatform.tsx b/frontend/src/pages/modelServing/screens/projects/EmptyModelServingPlatform.tsx
@@ -1,14 +1,19 @@
 import * as React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateHeader } from '@patternfly/react-core';
-import HeaderIcon from '~/concepts/design/HeaderIcon';
-import { ProjectObjectType } from '~/concepts/design/utils';
+import {
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+} from '@patternfly/react-core';
+import EmptyDetailsList from '~/pages/projects/screens/detail/EmptyDetailsList';
+import gearsImg from '~/images/gears.svg';
 
 const EmptyModelServingPlatform: React.FC = () => (
   <EmptyState variant="xs">
     <EmptyStateHeader
       data-testid="no-model-serving-platform-selected"
       titleText="No model serving platform selected"
-      icon={<HeaderIcon type={ProjectObjectType.modelServer} size={54} />}
+      icon={<EmptyStateIcon icon={() => <img src={gearsImg} alt="settings" />} />}
       headingLevel="h3"
     />
     <EmptyStateBody>
@@ -18,4 +23,10 @@ const EmptyModelServingPlatform: React.FC = () => (
   </EmptyState>
 );
 
+<EmptyDetailsList
+  title="No model serving platform selected"
+  description="To enable model serving, an administrator must first select a model serving platform in the cluster settings."
+  icon={() => <img src={gearsImg} alt="settings" />}
+/>;
+
 export default EmptyModelServingPlatform;
diff --git a/frontend/src/pages/modelServing/screens/projects/EmptyMultiModelServingCard.tsx b/frontend/src/pages/modelServing/screens/projects/EmptyMultiModelServingCard.tsx
@@ -49,7 +49,11 @@ const EmptyMultiModelServingCard: React.FC = () => {
   return (
     <>
       <Card
-        style={{ height: '100%', border: '1.5px dashed var(--pf-v5-global--BorderColor--200)' }}
+        style={{
+          height: '100%',
+          border: '1px solid var(--pf-v5-global--BorderColor--100)',
+          borderRadius: 16,
+        }}
         data-testid="multi-serving-platform-card"
       >
         <CardTitle>

diff --git a/frontend/src/pages/modelServing/screens/projects/EmptySingleModelServingCard.tsx b/frontend/src/pages/modelServing/screens/projects/EmptySingleModelServingCard.tsx
@@ -52,12 +52,16 @@ const EmptySingleModelServingCard: React.FC = () => {
   return (
     <>
       <Card
-        style={{ height: '100%', border: '1.5px dashed var(--pf-v5-global--BorderColor--200)' }}
+        style={{
+          height: '100%',
+          border: '1px solid var(--pf-v5-global--BorderColor--100)',
+          borderRadius: 16,
+        }}
         data-testid="single-serving-platform-card"
       >
         <CardTitle>
           <TextContent>
-            <Text component={TextVariants.h2}>Single model serving platform</Text>
+            <Text component={TextVariants.h2}>Single-model serving platform</Text>
           </TextContent>
         </CardTitle>
         <CardBody>