Support fleet filters in the Offers and Launch UI

frontend/src/libs/filters.test.ts

@@ -0,0 +1,36 @@
+import { getTokenAwareNamePatternFilterRequestParams } from './filters';
+
+describe('filters helpers', () => {
+    test('loads the full list when reopening an existing token value', () => {
+        expect(
+            getTokenAwareNamePatternFilterRequestParams({
+                filteringText: 'main',
+                limit: 100,
+                propertyKey: 'project_name',
+                tokens: [{ propertyKey: 'project_name', operator: '=', value: 'main' }],
+            }),
+        ).toEqual({ limit: 100 });
+    });
+
+    test('keeps the typed text when the value is being edited', () => {
+        expect(
+            getTokenAwareNamePatternFilterRequestParams({
+                filteringText: 'mai',
+                limit: 100,
+                propertyKey: 'project_name',
+                tokens: [{ propertyKey: 'project_name', operator: '=', value: 'main' }],
+            }),
+        ).toEqual({ limit: 100, name_pattern: 'mai' });
+    });
+
+    test('ignores matching values from other properties', () => {
+        expect(
+            getTokenAwareNamePatternFilterRequestParams({
+                filteringText: 'main',
+                limit: 100,
+                propertyKey: 'project_name',
+                tokens: [{ propertyKey: 'username', operator: '=', value: 'main' }],
+            }),
+        ).toEqual({ limit: 100, name_pattern: 'main' });
+    });
+});

frontend/src/libs/filters.ts

@@ -21,6 +21,31 @@ export const tokensToSearchParams = <RequestParamsKeys extends string>(
 
 export type RequestParam = string | { min: number } | { max: number };
 
+export const getNamePatternFilterRequestParams = (filteringText: string, limit: number) => {
+    return {
+        ...(filteringText ? { name_pattern: filteringText } : {}),
+        limit,
+    };
+};
+
+export const getTokenAwareNamePatternFilterRequestParams = <PropertyKey extends string>({
+    filteringText,
+    limit,
+    propertyKey,
+    tokens,
+}: {
+    filteringText: string;
+    limit: number;
+    propertyKey: PropertyKey;
+    tokens: PropertyFilterProps.Query['tokens'];
+}) => {
+    const matchingExistingToken = tokens.some((token) => {
+        return token.propertyKey === propertyKey && typeof token.value === 'string' && token.value === filteringText;
+    });
+
+    return getNamePatternFilterRequestParams(matchingExistingToken ? '' : filteringText, limit);
+};
+
 const convertTokenValueToRequestParam = (token: PropertyFilterProps.Query['tokens'][number]): RequestParam => {
     const { value, operator } = token;
 

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

@@ -4,7 +4,13 @@ import { omit } from 'lodash';
 
 import type { PropertyFilterProps } from 'components';
 
-import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import {
+    EMPTY_QUERY,
+    getNamePatternFilterRequestParams,
+    requestParamsToTokens,
+    tokensToRequestParams,
+    tokensToSearchParams,
+} from 'libs/filters';
 import { useLazyGetProjectsQuery } from 'services/project';
 import { useLazyGetUserListQuery } from 'services/user';
 
@@ -340,14 +346,10 @@ export const useFilters = ({
     const handleLoadItems: PropertyFilterProps['onLoadItems'] = async ({ detail: { filteringProperty, filteringText } }) => {
         setDynamicFilteringOptions([]);
 
-        if (!filteringText.length) {
-            return Promise.resolve();
-        }
-
         setFilteringStatusType('loading');
 
         if (filteringProperty?.key === filterKeys.TARGET_PROJECTS || filteringProperty?.key === filterKeys.WITHIN_PROJECTS) {
-            await getProjects({ name_pattern: filteringText, limit })
+            await getProjects(getNamePatternFilterRequestParams(filteringText, limit))
                 .unwrap()
                 .then(({ data }) =>
                     data.map(({ project_name, project_id }) => ({
@@ -361,7 +363,7 @@ export const useFilters = ({
         }
 
         if (filteringProperty?.key === filterKeys.TARGET_USERS || filteringProperty?.key === filterKeys.ACTORS) {
-            await getUsers({ name_pattern: filteringText, limit })
+            await getUsers(getNamePatternFilterRequestParams(filteringText, limit))
                 .unwrap()
                 .then(({ data }) =>
                     data.map(({ username, id }) => ({

frontend/src/pages/Fleets/List/hooks.tsx

@@ -9,7 +9,13 @@ import { Button, ListEmptyMessage, NavigateLink, StatusIndicator, TableProps } f
 
 import { DATE_TIME_FORMAT } from 'consts';
 import { useLocalStorageState } from 'hooks';
-import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import {
+    EMPTY_QUERY,
+    getNamePatternFilterRequestParams,
+    requestParamsToTokens,
+    tokensToRequestParams,
+    tokensToSearchParams,
+} from 'libs/filters';
 import {
     formatFleetBackend,
     formatFleetResources,
@@ -190,14 +196,10 @@ export const useFilters = () => {
     const handleLoadItems: PropertyFilterProps['onLoadItems'] = async ({ detail: { filteringProperty, filteringText } }) => {
         setDynamicFilteringOptions([]);
 
-        if (!filteringText.length) {
-            return Promise.resolve();
-        }
-
         setFilteringStatusType('loading');
 
         if (filteringProperty?.key === filterKeys.PROJECT_NAME) {
-            await getProjects({ name_pattern: filteringText, limit })
+            await getProjects(getNamePatternFilterRequestParams(filteringText, limit))
                 .unwrap()
                 .then(({ data }) =>
                     data.map(({ project_name }) => ({

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

@@ -5,7 +5,13 @@ import { ToggleProps } from '@cloudscape-design/components';
 import type { PropertyFilterProps } from 'components';
 
 import { useLocalStorageState } from 'hooks';
-import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import {
+    EMPTY_QUERY,
+    getNamePatternFilterRequestParams,
+    requestParamsToTokens,
+    tokensToRequestParams,
+    tokensToSearchParams,
+} from 'libs/filters';
 import { useLazyGetProjectsQuery } from 'services/project';
 
 type RequestParamsKeys = keyof Pick<TInstanceListRequestParams, 'only_active' | 'project_names' | 'fleet_ids'>;
@@ -85,16 +91,10 @@ export const useFilters = () => {
     const handleLoadItems: PropertyFilterProps['onLoadItems'] = async ({ detail: { filteringProperty, filteringText } }) => {
         setDynamicFilteringOptions([]);
 
-        console.log({ filteringProperty, filteringText });
-
-        if (!filteringText.length) {
-            return Promise.resolve();
-        }
-
         setFilteringStatusType('loading');
 
         if (filteringProperty?.key === filterKeys.PROJECT_NAMES) {
-            await getProjects({ name_pattern: filteringText, limit })
+            await getProjects(getNamePatternFilterRequestParams(filteringText, limit))
                 .unwrap()
                 .then(({ data }) =>
                     data.map(({ project_name }) => ({

frontend/src/pages/Models/List/hooks.tsx

@@ -7,7 +7,13 @@ import type { PropertyFilterProps } from 'components';
 import { Button, ListEmptyMessage, NavigateLink, TableProps } from 'components';
 
 import { DATE_TIME_FORMAT } from 'consts';
-import { EMPTY_QUERY, requestParamsToTokens, tokensToRequestParams, tokensToSearchParams } from 'libs/filters';
+import {
+    EMPTY_QUERY,
+    getNamePatternFilterRequestParams,
+    requestParamsToTokens,
+    tokensToRequestParams,
+    tokensToSearchParams,
+} from 'libs/filters';
 import { ROUTES } from 'routes';
 import { useLazyGetProjectsQuery } from 'services/project';
 import { useLazyGetUserListQuery } from 'services/user';
@@ -184,14 +190,10 @@ export const useFilters = () => {
     const handleLoadItems: PropertyFilterProps['onLoadItems'] = async ({ detail: { filteringProperty, filteringText } }) => {
         setFilteringOptions([]);
 
-        if (!filteringText.length) {
-            return Promise.resolve();
-        }
-
         setFilteringStatusType('loading');
 
         if (filteringProperty?.key === filterKeys.PROJECT_NAME) {
-            await getProjects({ name_pattern: filteringText, limit })
+            await getProjects(getNamePatternFilterRequestParams(filteringText, limit))
                 .unwrap()
                 .then(({ data }) =>
                     data.map(({ project_name }) => ({
@@ -203,7 +205,7 @@ export const useFilters = () => {
         }
 
         if (filteringProperty?.key === filterKeys.USER_NAME) {
-            await getUsers({ name_pattern: filteringText, limit })
+            await getUsers(getNamePatternFilterRequestParams(filteringText, limit))
                 .unwrap()
                 .then(({ data }) =>
                     data.map(({ username }) => ({

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

@@ -40,6 +40,14 @@ export const getPropertyFilterOptions = (gpus: IGpu[]) => {
     };
 };
 
+export const getFleetFilterValue = (fleet: IFleet, selectedProjectName?: string) => {
+    if (selectedProjectName && fleet.project_name === selectedProjectName) {
+        return fleet.name;
+    }
+
+    return `${fleet.project_name}/${fleet.name}`;
+};
+
 export const round = (number: number) => Math.round(number * 100) / 100;
 
 export const renderRange = (range: { min?: number; max?: number }) => {