[Feature]: UI for offers #3004

Author: olgenn

frontend/src/locale/en.json

@@ -453,14 +453,14 @@
     "backend": "Backend",
     "backend_plural": "Backends",
     "availability": "Availability",
-    "groupBy": "Group By",
+    "groupBy": "Group by",
     "region": "Region",
     "count": "Count",
     "price": "$/GPU",
     "memory_mib": "Memory",
-    "spot": "Spot",
-    "empty_message_title_select_project": "Need project name",
-    "empty_message_text_select_project": "Please choose project name in property filter",
+    "spot": "Spot policy",
+    "empty_message_title_select_project": "Select a project",
+    "empty_message_text_select_project": "Use the filter above to select a project",
     "empty_message_title": "No offers",
     "empty_message_text": "No offers to display.",
     "nomatch_message_title": "No matches",

frontend/src/pages/Offers/List/helpers.ts

@@ -3,9 +3,7 @@ import { RequestParam } from '../../../libs/filters';
 const rangeSeparator = '..';
 
 export function convertMiBToGB(mib: number) {
-    const bytes = mib * Math.pow(2, 20); // Convert MiB to bytes
-    // Convert bytes to GB
-    return bytes / Math.pow(10, 9);
+    return mib / 1024;
 }
 
 export const getPropertyFilterOptions = (gpus: IGpu[]) => {

frontend/src/pages/Offers/List/hooks/useFilters.ts

@@ -93,7 +93,7 @@ export const useFilters = ({ gpus }: Args) => {
         {
             key: filterKeys.GPU_NAME,
             operators: ['='],
-            propertyLabel: 'GPU names',
+            propertyLabel: 'GPU name',
         },
         {
             key: filterKeys.GPU_COUNT,
@@ -103,17 +103,17 @@ export const useFilters = ({ gpus }: Args) => {
         {
             key: filterKeys.GPU_MEMORY,
             operators: ['<=', '>='],
-            propertyLabel: 'GPU Memory',
+            propertyLabel: 'GPU memory',
         },
         {
             key: filterKeys.BACKEND,
             operators: ['='],
-            propertyLabel: 'Backends',
+            propertyLabel: 'Backend',
         },
         {
             key: filterKeys.SPOT_POLICY,
             operators: ['='],
-            propertyLabel: 'Spot',
+            propertyLabel: 'Spot policy',
         },
     ];
 

frontend/src/pages/Offers/List/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Cards, Header, PropertyFilter, SelectCSD, StatusIndicator } from 'components';
+import { Cards, Header, Link, PropertyFilter, SelectCSD, StatusIndicator } from 'components';
 
 import { useCollection } from 'hooks';
 import { useGetGpusListQuery } from 'services/gpu';
@@ -12,7 +12,7 @@ import { convertMiBToGB, rangeToObject, renderRange, round } from './helpers';
 
 import styles from './styles.module.scss';
 
-const gpusFilterOption = { label: 'GPUs', value: 'gpu' };
+const gpusFilterOption = { label: 'GPU', value: 'gpu' };
 
 const getRequestParams = ({
     project_name,
@@ -111,38 +111,38 @@ export const OfferList = () => {
             {...collectionProps}
             items={items}
             cardDefinition={{
-                header: (gpu) => gpu.name,
+                header: (gpu) => <Link>{gpu.name}</Link>,
                 sections: [
                     {
-                        id: 'backends',
-                        header: t('offer.backend_plural'),
-                        content: (gpu) => gpu.backends?.join(', ') ?? '-',
+                        id: 'memory_mib',
+                        header: t('offer.memory_mib'),
+                        content: (gpu) => `${round(convertMiBToGB(gpu.memory_mib))}GB`,
                         width: 50,
                     },
-                    // {
-                    //     id: 'region',
-                    //     header: t('offer.region'),
-                    //     content: (gpu) => gpu.region ?? gpu.regions?.join(', ') ?? '-',
-                    //     width: 50,
-                    // },
                     {
-                        id: 'count',
-                        header: t('offer.count'),
-                        content: (gpu) => renderRange(gpu.count) ?? '-',
+                        id: 'price',
+                        header: t('offer.price'),
+                        content: (gpu) => <span className={styles.greenText}>{renderRange(gpu.price) ?? '-'}</span>,
                         width: 50,
                     },
                     {
-                        id: 'price',
-                        header: t('offer.price'),
-                        content: (gpu) => renderRange(gpu.price) ?? '-',
+                        id: 'count',
+                        header: t('offer.count'),
+                        content: (gpu) => renderRange(gpu.count) ?? '-',
                         width: 50,
                     },
                     {
-                        id: 'memory_mib',
-                        header: t('offer.memory_mib'),
-                        content: (gpu) => `${round(convertMiBToGB(gpu.memory_mib))}GB`,
+                        id: 'backends',
+                        header: t('offer.backend_plural'),
+                        content: (gpu) => gpu.backends?.join(', ') ?? '-',
                         width: 50,
                     },
+                    // {
+                    //     id: 'region',
+                    //     header: t('offer.region'),
+                    //     content: (gpu) => gpu.region ?? gpu.regions?.join(', ') ?? '-',
+                    //     width: 50,
+                    // },
                     {
                         id: 'spot',
                         header: t('offer.spot'),
@@ -152,8 +152,10 @@ export const OfferList = () => {
                     {
                         id: 'availability',
                         content: (gpu) => {
+                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                            // @ts-expect-error
                             if (gpu.availability === 'not_available') {
-                                return <StatusIndicator type="error">Not Available</StatusIndicator>;
+                                return <StatusIndicator type="warning">Not Available</StatusIndicator>;
                             }
                         },
                         width: 50,
@@ -164,6 +166,7 @@ export const OfferList = () => {
             loadingText={t('common.loading')}
             stickyHeader={true}
             header={<Header variant="awsui-h1-sticky">{t('offer.title')}</Header>}
+            variant="full-page"
             filter={
                 <div className={styles.selectFilters}>
                     <div className={styles.propertyFilter}>

frontend/src/pages/Offers/List/styles.module.scss

@@ -1,3 +1,5 @@
+@use '@cloudscape-design/design-tokens/index' as awsui;
+
 .selectFilters {
   display: flex;
   flex-wrap: wrap;
@@ -14,4 +16,8 @@
     flex-grow: 1;
     min-width: 0;
   }
+}
+
+.greenText {
+  color: awsui.$color-text-status-success;
 }