Merge pull request #2094 from avivtur/fix-it-cards

CNV-44514: Missing descriptive names inside the InstanceTypes tiles
kubevirt-ui · Jul 29, 2024 · 4d2d0d5 · 4d2d0d5
2 parents 95dcf58 + 6312353
commit 4d2d0d5
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 11 deletions.
diff --git a/...Modal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/constants.ts b/...Modal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/constants.ts
@@ -113,3 +113,4 @@ export const instanceTypeSeriesNameMapper: {
 export const REDHAT_COM = 'redhat.com';
 export const INSTANCETYPE_CLASS_ANNOTATION = 'instancetype.kubevirt.io/class';
 export const INSTANCETYPE_DESCRIPTION_ANNOTATION = 'instancetype.kubevirt.io/description';
+export const INSTANCETYPE_CLASS_DISPLAY_NAME = 'instancetype.kubevirt.io/displayName';
diff --git a/...lumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/types.ts b/...lumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/types.ts
@@ -8,6 +8,7 @@ export type InstanceTypeSize = {
 
 export type RedHatInstanceTypeSeries = {
   classAnnotation: string;
+  classDisplayNameAnnotation: string;
   descriptionAnnotation: string;
   seriesName: string;
   sizes: InstanceTypeSize[];

diff --git a/...lumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/utils.ts b/...lumeModal/components/VolumeMetadata/components/InstanceTypeDrilldownSelect/utils/utils.ts
@@ -13,6 +13,7 @@ import { isEmpty } from '@kubevirt-utils/utils/utils';
 import {
   initialMenuItems,
   INSTANCETYPE_CLASS_ANNOTATION,
+  INSTANCETYPE_CLASS_DISPLAY_NAME,
   INSTANCETYPE_DESCRIPTION_ANNOTATION,
   instanceTypeSeriesNameMapper,
   REDHAT_COM,
@@ -25,6 +26,7 @@ const getRedHatInstanceTypeSeriesAndSize = (
   const [seriesName, sizeLabel] = getName(instanceType).split('.');
   const cpus = instanceType?.spec?.cpu?.guest;
   const memory = readableSizeUnit(instanceType?.spec?.memory?.guest);
+  const classAnnotation = getAnnotation(instanceType, INSTANCETYPE_CLASS_ANNOTATION, seriesName);
 
   const size: InstanceTypeSize = {
     cpus,
@@ -34,7 +36,12 @@ const getRedHatInstanceTypeSeriesAndSize = (
 
   return {
     redHatITSeries: {
-      classAnnotation: getAnnotation(instanceType, INSTANCETYPE_CLASS_ANNOTATION, seriesName),
+      classAnnotation,
+      classDisplayNameAnnotation: getAnnotation(
+        instanceType,
+        INSTANCETYPE_CLASS_DISPLAY_NAME,
+        classAnnotation,
+      ),
       descriptionAnnotation: getAnnotation(instanceType, INSTANCETYPE_DESCRIPTION_ANNOTATION),
       seriesName,
       sizes: [size],

diff --git a/...HatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss b/...HatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.scss
@@ -10,14 +10,14 @@
   }
 
   &__toggle-card {
-    min-height: 305px;
+    min-height: 200px;
     box-shadow: none;
     color: var(--pf-global--Color--100);
   }
 
   &__card-icon {
     font-size: var(--pf-global--FontSize--3xl);
-    margin-top: var(--pf-global--spacer--md);
+    margin-top: var(--pf-global--spacer--sm);
   }
 
   &__card-title,
@@ -26,9 +26,12 @@
     font-size: var(--pf-global--FontSize--lg);
   }
 
+  &__card-footer {
+    margin-top: var(--pf-global--spacer--sm);
+  }
+
   &__card-title {
-    margin: var(--pf-global--spacer--sm) 0 var(--pf-global--spacer--md);
-    min-height: 65px;
+    margin: var(--pf-global--spacer--sm) 0;
   }
 
   &__card-toggle-text {

diff --git a/...dHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx b/...dHatProvidedInstanceTypesSection/components/RedHatSeriesMenuCard/RedHatSeriesMenuCard.tsx
@@ -10,7 +10,6 @@ import { readableSizeUnit } from '@kubevirt-utils/utils/units';
 import {
   Card,
   CardBody,
-  CardFooter,
   Menu,
   MenuContent,
   MenuList,
@@ -41,7 +40,8 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
     instanceTypeVMState: { selectedInstanceType },
   } = useInstanceTypeVMStore();
 
-  const { classAnnotation, descriptionAnnotation, seriesName, sizes } = rhSeriesItem;
+  const { classAnnotation, classDisplayNameAnnotation, descriptionAnnotation, seriesName, sizes } =
+    rhSeriesItem;
 
   const { Icon, seriesLabel } = instanceTypeSeriesNameMapper[seriesName] || {};
 
@@ -68,14 +68,16 @@ const RedHatSeriesMenuCard: FC<RedHatSeriesMenuCardProps> = ({
     <Card className="instance-type-series-menu-card__toggle-card">
       <div className="instance-type-series-menu-card__card-icon">{Icon && <Icon />}</div>
       <CardBody>
-        <div className="instance-type-series-menu-card__card-title">{classAnnotation}</div>
+        <div className="instance-type-series-menu-card__card-title">
+          {classDisplayNameAnnotation}
+        </div>
         <div className="instance-type-series-menu-card__card-toggle-text">
           {seriesLabel || classAnnotation} <AngleDownIcon />
         </div>
+        <div className="instance-type-series-menu-card__card-footer">
+          {isSelectedMenu && selectedITLabel}
+        </div>
       </CardBody>
-      <CardFooter className="instance-type-series-menu-card__card-footer">
-        {isSelectedMenu && selectedITLabel}
-      </CardFooter>
     </Card>
   );
   return (