[UI] Allow to group offers by backend

frontend/package.json

@@ -96,11 +96,12 @@
     "webpack-nano": "^1.1.1"
   },
   "dependencies": {
-    "@cloudscape-design/chat-components": "^1.0.19",
-    "@cloudscape-design/collection-hooks": "^1.0.56",
-    "@cloudscape-design/components": "^3.0.856",
-    "@cloudscape-design/design-tokens": "^3.0.51",
-    "@cloudscape-design/global-styles": "^1.0.33",
+    "@cloudscape-design/chat-components": "^1.0.62",
+    "@cloudscape-design/collection-hooks": "^1.0.74",
+    "@cloudscape-design/component-toolkit": "^1.0.0-beta.120",
+    "@cloudscape-design/components": "^3.0.1091",
+    "@cloudscape-design/design-tokens": "^3.0.60",
+    "@cloudscape-design/global-styles": "^1.0.45",
     "@hookform/resolvers": "^2.9.10",
     "@reduxjs/toolkit": "^1.9.1",
     "ace-builds": "^1.36.3",

frontend/src/components/index.ts

@@ -13,6 +13,7 @@ export { default as SpaceBetween } from '@cloudscape-design/components/space-bet
 export { default as Container } from '@cloudscape-design/components/container';
 export { default as Spinner } from '@cloudscape-design/components/spinner';
 export { default as Cards } from '@cloudscape-design/components/cards';
+export type { CardsProps } from '@cloudscape-design/components/cards';
 export { default as Header } from '@cloudscape-design/components/header';
 export { default as Link } from '@cloudscape-design/components/link';
 export type { LinkProps } from '@cloudscape-design/components/link';
@@ -32,6 +33,8 @@ export { default as CheckboxCSD } from '@cloudscape-design/components/checkbox';
 export { default as InputCSD } from '@cloudscape-design/components/input';
 export { default as SelectCSD } from '@cloudscape-design/components/select';
 export type { SelectProps as SelectCSDProps } from '@cloudscape-design/components/select';
+export { default as MultiselectCSD } from '@cloudscape-design/components/multiselect';
+export type { MultiselectProps } from '@cloudscape-design/components/multiselect';
 export { default as StatusIndicator } from '@cloudscape-design/components/status-indicator';
 export type { StatusIndicatorProps } from '@cloudscape-design/components/status-indicator';
 export { default as Popover } from '@cloudscape-design/components/popover';

frontend/src/libs/filters.ts

@@ -101,3 +101,23 @@ export const requestParamsToTokens = <RequestParamsKeys extends string>({
         tokens,
     };
 };
+
+export const requestParamsToArray = <Key extends string>({
+    searchParams,
+    paramName,
+}: {
+    searchParams: URLSearchParams;
+    paramName: Key;
+}) => {
+    const paramValues: string[] = [];
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+
+    for (const [paramKey, paramValue] of searchParams.entries()) {
+        if (paramKey === paramName) {
+            paramValues.push(paramValue);
+        }
+    }
+
+    return paramValues;
+};

frontend/src/locale/en.json

@@ -364,7 +364,7 @@
       "quickstart_message_text": "Check out the quickstart guide to get started with dstack",
       "nomatch_message_title": "No matches",
       "nomatch_message_text": "We can't find a match. Try to change project or clear filter",
-      "filter_property_placeholder": "Filter runs by properties",
+      "filter_property_placeholder": "Filter by properties",
       "project": "Project",
       "project_placeholder": "Filtering by project",
       "repo": "Repository",
@@ -449,18 +449,20 @@
   },
   "offer": {
     "title": "Offers",
-    "filter_property_placeholder": "Filter offers by properties",
+    "filter_property_placeholder": "Filter by properties",
     "backend": "Backend",
     "backend_plural": "Backends",
     "availability": "Availability",
-    "groupBy": "Group by",
+    "groupBy": "Group by properties",
     "region": "Region",
     "count": "Count",
     "price": "$/GPU",
     "memory_mib": "Memory",
     "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_select_groupBy": "Select a group by",
+    "empty_message_text_select_groupBy": "Use the field above to select a group by",
     "empty_message_title": "No offers",
     "empty_message_text": "No offers to display.",
     "nomatch_message_title": "No matches",
@@ -509,7 +511,7 @@
     "nomatch_message_text": "We can't find a match.",
     "nomatch_message_button_label": "Clear filter",
     "active_only": "Active fleets",
-    "filter_property_placeholder": "Filter fleets by properties",
+    "filter_property_placeholder": "Filter by properties",
     "statuses": {
       "active": "Active",
       "submitted": "Submitted",
@@ -519,7 +521,7 @@
     },
     "instances": {
       "active_only": "Active instances",
-      "filter_property_placeholder": "Filter instances by properties",
+      "filter_property_placeholder": "Filter by properties",
       "title": "Instances",
       "empty_message_title": "No instances",
       "empty_message_text": "No instances to display.",
@@ -557,7 +559,7 @@
     "delete_volumes_confirm_title": "Delete volumes",
     "delete_volumes_confirm_message": "Are you sure you want to delete these volumes?",
     "active_only": "Active volumes",
-    "filter_property_placeholder": "Filter volumes by properties",
+    "filter_property_placeholder": "Filter by properties",
 
     "name": "Name",
     "project": "Project name",

frontend/src/pages/Offers/List/hooks/useEmptyMessages.tsx

@@ -7,10 +7,12 @@ export const useEmptyMessages = ({
     clearFilter,
     isDisabledClearFilter,
     projectNameSelected,
+    groupBySelected,
 }: {
     clearFilter?: () => void;
     isDisabledClearFilter?: boolean;
     projectNameSelected?: boolean;
+    groupBySelected?: boolean;
 }) => {
     const { t } = useTranslation();
 
@@ -24,6 +26,15 @@ export const useEmptyMessages = ({
             );
         }
 
+        if (!groupBySelected) {
+            return (
+                <ListEmptyMessage
+                    title={t('offer.empty_message_title_select_groupBy')}
+                    message={t('offer.empty_message_text_select_groupBy')}
+                ></ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('offer.empty_message_title')} message={t('offer.empty_message_text')}>
                 <Button disabled={isDisabledClearFilter} onClick={clearFilter}>