fix: fix initial columns for the list view / fix attributes API call (#3056)

* fix: fix initial columns for the list view

* fix: replace columns

* fix: update attribute api call for the options menu

* fix: update call attributes API call

* fix: add error msg for the options list

frontend/src/container/OptionsMenu/AddColumnField/index.tsx

@@ -1,5 +1,5 @@
 import { SearchOutlined } from '@ant-design/icons';
-import { Input } from 'antd';
+import { Input, Spin } from 'antd';
 import Typography from 'antd/es/typography/Typography';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useTranslation } from 'react-i18next';
@@ -26,12 +26,17 @@ function AddColumnField({ config }: AddColumnFieldProps): JSX.Element | null {
 
 			<Input.Group compact>
 				<AddColumnSelect
+					loading={config.isFetching}
 					size="small"
 					mode="multiple"
 					placeholder="Search"
 					options={config.options}
 					value={[]}
-					onChange={config.onChange}
+					onSelect={config.onSelect}
+					onSearch={config.onSearch}
+					onFocus={config.onFocus}
+					onBlur={config.onBlur}
+					notFoundContent={config.isFetching ? <Spin size="small" /> : null}
 				/>
 				<SearchIconWrapper $isDarkMode={isDarkMode}>
 					<SearchOutlined />

frontend/src/container/OptionsMenu/types.ts

@@ -16,7 +16,11 @@ export interface InitialOptions
 export type OptionsMenuConfig = {
 	format?: Pick<RadioProps, 'value' | 'onChange'>;
 	maxLines?: Pick<InputNumberProps, 'value' | 'onChange'>;
-	addColumn?: Pick<SelectProps, 'options' | 'onChange'> & {
+	addColumn?: Pick<
+		SelectProps,
+		'options' | 'onSelect' | 'onFocus' | 'onSearch' | 'onBlur'
+	> & {
+		isFetching: boolean;
 		value: BaseAutocompleteData[];
 		onRemove: (key: string) => void;
 	};

frontend/src/container/OptionsMenu/useOptionsMenu.ts

@@ -4,15 +4,21 @@ import setToLocalstorage from 'api/browser/localstorage/set';
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
+import useDebounce from 'hooks/useDebounce';
+import { useNotifications } from 'hooks/useNotifications';
 import useUrlQueryData from 'hooks/useUrlQueryData';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQueries, useQuery } from 'react-query';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	BaseAutocompleteData,
+	IQueryAutocompleteResponse,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { defaultOptionsQuery, URL_OPTIONS } from './constants';
 import { InitialOptions, OptionsMenuConfig, OptionsQuery } from './types';
-import { getInitialColumns, getOptionsFromKeys } from './utils';
+import { getOptionsFromKeys } from './utils';
 
 interface UseOptionsMenuProps {
 	dataSource: DataSource;
@@ -21,7 +27,6 @@ interface UseOptionsMenuProps {
 }
 
 interface UseOptionsMenu {
-	isLoading: boolean;
 	options: OptionsQuery;
 	config: OptionsMenuConfig;
 }
@@ -31,41 +36,108 @@ const useOptionsMenu = ({
 	aggregateOperator,
 	initialOptions = {},
 }: UseOptionsMenuProps): UseOptionsMenu => {
+	const { notifications } = useNotifications();
+
+	const [searchText, setSearchText] = useState<string>('');
+	const [isFocused, setIsFocused] = useState<boolean>(false);
+	const debouncedSearchText = useDebounce(searchText, 300);
+
 	const localStorageOptionsQuery = getFromLocalstorage(
 		LOCALSTORAGE.LIST_OPTIONS,
 	);
 
+	const initialQueryParams = useMemo(
+		() => ({
+			searchText: '',
+			aggregateAttribute: '',
+			tagType: null,
+			dataSource,
+			aggregateOperator,
+		}),
+		[dataSource, aggregateOperator],
+	);
+
 	const {
 		query: optionsQuery,
 		queryData: optionsQueryData,
 		redirectWithQuery: redirectWithOptionsData,
 	} = useUrlQueryData<OptionsQuery>(URL_OPTIONS, defaultOptionsQuery);
 
-	const { data, isFetched, isLoading } = useQuery(
+	const initialQueries = useMemo(
-		[QueryBuilderKeys.GET_ATTRIBUTE_KEY, dataSource, aggregateOperator],
+		() =>
-		async () =>
+			initialOptions?.selectColumns?.map((column) => ({
-			getAggregateKeys({
+				queryKey: column,
-				searchText: '',
+				queryFn: (): Promise<
-				dataSource,
+					SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse
-				aggregateOperator,
+				> =>
-				aggregateAttribute: '',
+					getAggregateKeys({
-				tagType: null,
+						...initialQueryParams,
-			}),
+						searchText: column,
+					}),
+				enabled: !!column && !optionsQuery,
+			})) || [],
+		[initialOptions?.selectColumns, initialQueryParams, optionsQuery],
 	);
 
-	const attributeKeys = useMemo(() => data?.payload?.attributeKeys || [], [
+	const initialAttributesResult = useQueries(initialQueries);
-		data?.payload?.attributeKeys,
+
+	const isFetchedInitialAttributes = useMemo(
+		() => initialAttributesResult.every((result) => result.isFetched),
+		[initialAttributesResult],
+	);
+
+	const initialSelectedColumns = useMemo(() => {
+		if (!isFetchedInitialAttributes) return [];
+
+		const attributesData = initialAttributesResult?.reduce(
+			(acc, attributeResponse) => {
+				const data = attributeResponse?.data?.payload?.attributeKeys || [];
+
+				return [...acc, ...data];
+			},
+			[] as BaseAutocompleteData[],
+		);
+
+		return (
+			(initialOptions.selectColumns
+				?.map((column) => attributesData.find(({ key }) => key === column))
+				.filter(Boolean) as BaseAutocompleteData[]) || []
+		);
+	}, [
+		isFetchedInitialAttributes,
+		initialOptions?.selectColumns,
+		initialAttributesResult,
 	]);
 
+	const {
+		data: searchedAttributesData,
+		isFetching: isSearchedAttributesFetching,
+	} = useQuery(
+		[QueryBuilderKeys.GET_AGGREGATE_KEYS, debouncedSearchText, isFocused],
+		async () =>
+			getAggregateKeys({
+				...initialQueryParams,
+				searchText: debouncedSearchText,
+			}),
+		{
+			enabled: isFocused,
+		},
+	);
+
+	const searchedAttributeKeys = useMemo(
+		() => searchedAttributesData?.payload?.attributeKeys || [],
+		[searchedAttributesData?.payload?.attributeKeys],
+	);
+
 	const initialOptionsQuery: OptionsQuery = useMemo(
 		() => ({
 			...defaultOptionsQuery,
 			...initialOptions,
 			selectColumns: initialOptions?.selectColumns
-				? getInitialColumns(initialOptions?.selectColumns || [], attributeKeys)
+				? initialSelectedColumns
 				: defaultOptionsQuery.selectColumns,
 		}),
-		[initialOptions, attributeKeys],
+		[initialOptions, initialSelectedColumns],
 	);
 
 	const selectedColumnKeys = useMemo(
@@ -73,13 +145,13 @@ const useOptionsMenu = ({
 		[optionsQueryData],
 	);
 
-	const addColumnOptions = useMemo(() => {
+	const optionsFromAttributeKeys = useMemo(() => {
-		const filteredAttributeKeys = attributeKeys.filter(
+		const filteredAttributeKeys = searchedAttributeKeys.filter(
 			(item) => item.key !== 'body',
 		);
 
 		return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys);
-	}, [attributeKeys, selectedColumnKeys]);
+	}, [searchedAttributeKeys, selectedColumnKeys]);
 
 	const handleRedirectWithOptionsData = useCallback(
 		(newQueryData: OptionsQuery) => {
@@ -90,13 +162,14 @@ const useOptionsMenu = ({
 		[redirectWithOptionsData],
 	);
 
-	const handleSelectedColumnsChange = useCallback(
+	const handleSelectColumns = useCallback(
-		(value: string[]) => {
+		(value: string) => {
-			const newSelectedColumnKeys = [
+			const newSelectedColumnKeys = [...new Set([...selectedColumnKeys, value])];
-				...new Set([...selectedColumnKeys, ...value]),
-			];
 			const newSelectedColumns = newSelectedColumnKeys.reduce((acc, key) => {
-				const column = attributeKeys.find(({ id }) => id === key);
+				const column = [
+					...searchedAttributeKeys,
+					...optionsQueryData.selectColumns,
+				].find(({ id }) => id === key);
 
 				if (!column) return acc;
 				return [...acc, column];
@@ -110,10 +183,10 @@ const useOptionsMenu = ({
 			handleRedirectWithOptionsData(optionsData);
 		},
 		[
+			searchedAttributeKeys,
 			selectedColumnKeys,
 			optionsQueryData,
 			handleRedirectWithOptionsData,
-			attributeKeys,
 		],
 	);
 
@@ -123,14 +196,20 @@ const useOptionsMenu = ({
 				({ id }) => id !== columnKey,
 			);
 
-			const optionsData: OptionsQuery = {
+			if (!newSelectedColumns.length && dataSource !== DataSource.LOGS) {
-				...optionsQueryData,
+				notifications.error({
-				selectColumns: newSelectedColumns,
+					message: 'There must be at least one selected column',
-			};
+				});
+			} else {
+				const optionsData: OptionsQuery = {
+					...optionsQueryData,
+					selectColumns: newSelectedColumns,
+				};
 
-			handleRedirectWithOptionsData(optionsData);
+				handleRedirectWithOptionsData(optionsData);
+			}
 		},
-		[optionsQueryData, handleRedirectWithOptionsData],
+		[dataSource, notifications, optionsQueryData, handleRedirectWithOptionsData],
 	);
 
 	const handleFormatChange = useCallback(
@@ -157,13 +236,30 @@ const useOptionsMenu = ({
 		[handleRedirectWithOptionsData, optionsQueryData],
 	);
 
+	const handleSearchAttribute = useCallback((value: string) => {
+		setSearchText(value);
+	}, []);
+
+	const handleFocus = (): void => {
+		setIsFocused(true);
+	};
+
+	const handleBlur = (): void => {
+		setIsFocused(false);
+		setSearchText('');
+	};
+
 	const optionsMenuConfig: Required<OptionsMenuConfig> = useMemo(
 		() => ({
 			addColumn: {
-				value: optionsQueryData.selectColumns || defaultOptionsQuery.selectColumns,
+				isFetching: isSearchedAttributesFetching,
-				options: addColumnOptions || [],
+				value: optionsQueryData?.selectColumns || defaultOptionsQuery.selectColumns,
-				onChange: handleSelectedColumnsChange,
+				options: optionsFromAttributeKeys || [],
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				onSelect: handleSelectColumns,
 				onRemove: handleRemoveSelectedColumn,
+				onSearch: handleSearchAttribute,
 			},
 			format: {
 				value: optionsQueryData.format || defaultOptionsQuery.format,
@@ -175,11 +271,13 @@ const useOptionsMenu = ({
 			},
 		}),
 		[
-			addColumnOptions,
+			optionsFromAttributeKeys,
 			optionsQueryData?.maxLines,
 			optionsQueryData?.format,
 			optionsQueryData?.selectColumns,
-			handleSelectedColumnsChange,
+			isSearchedAttributesFetching,
+			handleSearchAttribute,
+			handleSelectColumns,
 			handleRemoveSelectedColumn,
 			handleFormatChange,
 			handleMaxLinesChange,
@@ -187,7 +285,7 @@ const useOptionsMenu = ({
 	);
 
 	useEffect(() => {
-		if (optionsQuery || !isFetched) return;
+		if (optionsQuery || !isFetchedInitialAttributes) return;
 
 		const nextOptionsQuery = localStorageOptionsQuery
 			? JSON.parse(localStorageOptionsQuery)
@@ -195,15 +293,14 @@ const useOptionsMenu = ({
 
 		redirectWithOptionsData(nextOptionsQuery);
 	}, [
-		isFetched,
+		isFetchedInitialAttributes,
 		optionsQuery,
 		initialOptionsQuery,
-		redirectWithOptionsData,
 		localStorageOptionsQuery,
+		redirectWithOptionsData,
 	]);
 
 	return {
-		isLoading,
 		options: optionsQueryData,
 		config: optionsMenuConfig,
 	};

frontend/src/container/OptionsMenu/utils.ts

@@ -14,15 +14,3 @@ export const getOptionsFromKeys = (
 		({ value }) => !selectedKeys.find((key) => key === value),
 	);
 };
-
-export const getInitialColumns = (
-	initialColumnTitles: string[],
-	attributeKeys: BaseAutocompleteData[],
-): BaseAutocompleteData[] =>
-	initialColumnTitles.reduce((acc, title) => {
-		const initialColumn = attributeKeys.find(({ key }) => title === key);
-
-		if (!initialColumn) return acc;
-
-		return [...acc, initialColumn];
-	}, [] as BaseAutocompleteData[]);

frontend/src/container/TracesExplorer/ListView/index.tsx

@@ -65,7 +65,9 @@ function ListView(): JSX.Element {
 				options?.selectColumns,
 			],
 			enabled:
-				!!stagedQuery && panelType === PANEL_TYPES.LIST && !!options?.selectColumns,
+				!!stagedQuery &&
+				panelType === PANEL_TYPES.LIST &&
+				!!options?.selectColumns?.length,
 		},
 	);