diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json index 0b6bbc08c..45bd22308 100644 --- a/frontend/src/locale/en.json +++ b/frontend/src/locale/en.json @@ -529,7 +529,9 @@ "filter_property_placeholder": "Filter by properties", "backend": "Backend", "backend_plural": "Backends", - "availability": "Availability", + "availability_not_available": "Not available", + "availability_no_quota": "No quota", + "availability_no_balance": "No balance", "groupBy": "Group by properties", "region": "Region", "count": "Count", diff --git a/frontend/src/pages/Offers/List/index.tsx b/frontend/src/pages/Offers/List/index.tsx index 59d1bb5c7..c594e67f6 100644 --- a/frontend/src/pages/Offers/List/index.tsx +++ b/frontend/src/pages/Offers/List/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { Cards, CardsProps, MultiselectCSD, PropertyFilter, StatusIndicator } from 'components'; +import { Cards, CardsProps, MultiselectCSD, Popover, PropertyFilter } from 'components'; import { useCollection } from 'hooks'; import { useGetGpusListQuery } from 'services/gpu'; @@ -198,15 +198,28 @@ export const OfferList: React.FC = ({ { id: 'availability', content: (gpu: IGpu) => { - // FIXME: array to string comparison never passes. - // Additionally, there are more availability statuses that are worth displaying, - // and several of them may be present at once. + const availabilityIssues = + gpu.availability.length > 0 && + gpu.availability.every((a) => a === 'not_available' || a === 'no_quota' || a === 'no_balance'); - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - if (gpu.availability === 'not_available') { - return Not Available; + if (!availabilityIssues) { + return null; } + + if (gpu.availability.length === 1) { + return {t(`offer.availability_${gpu.availability[0]}`)}; + } + + return ( + t(`offer.availability_${a}`)).join(', ')} + > + {t('offer.availability_not_available')} + + ); }, width: 50, },