diff --git a/frontend/src/hooks/logs/useActiveLog.ts b/frontend/src/hooks/logs/useActiveLog.ts index 004d7e1d92..fae1b6f063 100644 --- a/frontend/src/hooks/logs/useActiveLog.ts +++ b/frontend/src/hooks/logs/useActiveLog.ts @@ -1,20 +1,20 @@ -import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder'; +import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys'; +import { QueryBuilderKeys } from 'constants/queryBuilder'; import ROUTES from 'constants/routes'; +import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; +import { useNotifications } from 'hooks/useNotifications'; import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString'; import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue'; import { useCallback, useMemo, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { useQueryClient } from 'react-query'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory, useLocation } from 'react-router-dom'; import { AppState } from 'store/reducers'; import { SET_DETAILED_LOG_DATA } from 'types/actions/logs'; -import { SuccessResponse } from 'types/api'; import { ILog } from 'types/api/logs/log'; -import { - BaseAutocompleteData, - IQueryAutocompleteResponse, -} from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { ILogsReducer } from 'types/reducer/logs'; import { v4 as uuid } from 'uuid'; @@ -31,6 +31,9 @@ export const useActiveLog = (): UseActiveLog => { const { pathname } = useLocation(); const history = useHistory(); const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder(); + const { notifications } = useNotifications(); + + const { t } = useTranslation('common'); const isLogsPage = useMemo(() => pathname === ROUTES.LOGS, [pathname]); @@ -60,48 +63,64 @@ export const useActiveLog = (): UseActiveLog => { const onClearActiveLog = useCallback((): void => setActiveLog(null), []); const onAddToQueryExplorer = useCallback( - (fieldKey: string, fieldValue: string, operator: string): void => { - const keysAutocomplete: BaseAutocompleteData[] = - queryClient.getQueryData>( - [QueryBuilderKeys.GET_AGGREGATE_KEYS], - { exact: false }, - )?.payload.attributeKeys || []; + async ( + fieldKey: string, + fieldValue: string, + operator: string, + ): Promise => { + try { + const keysAutocompleteResponse = await queryClient.fetchQuery( + [QueryBuilderKeys.GET_AGGREGATE_KEYS, fieldKey], + async () => + getAggregateKeys({ + searchText: fieldKey, + aggregateOperator: currentQuery.builder.queryData[0].aggregateOperator, + dataSource: currentQuery.builder.queryData[0].dataSource, + aggregateAttribute: + currentQuery.builder.queryData[0].aggregateAttribute.key, + }), + ); - const existAutocompleteKey = chooseAutocompleteFromCustomValue( - keysAutocomplete, - fieldKey, - ); + const keysAutocomplete: BaseAutocompleteData[] = + keysAutocompleteResponse.payload?.attributeKeys || []; - const currentOperator = - Object.keys(OPERATORS).find((op) => op === operator) || ''; + const existAutocompleteKey = chooseAutocompleteFromCustomValue( + keysAutocomplete, + fieldKey, + ); - const nextQuery: Query = { - ...currentQuery, - builder: { - ...currentQuery.builder, - queryData: currentQuery.builder.queryData.map((item) => ({ - ...item, - filters: { - ...item.filters, - items: [ - ...item.filters.items.filter( - (item) => item.key?.id !== existAutocompleteKey.id, - ), - { - id: uuid(), - key: existAutocompleteKey, - op: currentOperator, - value: fieldValue, - }, - ], - }, - })), - }, - }; + const currentOperator = getOperatorValue(operator); - redirectWithQueryBuilderData(nextQuery); + const nextQuery: Query = { + ...currentQuery, + builder: { + ...currentQuery.builder, + queryData: currentQuery.builder.queryData.map((item) => ({ + ...item, + filters: { + ...item.filters, + items: [ + ...item.filters.items.filter( + (item) => item.key?.id !== existAutocompleteKey.id, + ), + { + id: uuid(), + key: existAutocompleteKey, + op: currentOperator, + value: fieldValue, + }, + ], + }, + })), + }, + }; + + redirectWithQueryBuilderData(nextQuery); + } catch { + notifications.error({ message: t('something_went_wrong') }); + } }, - [currentQuery, queryClient, redirectWithQueryBuilderData], + [currentQuery, notifications, queryClient, redirectWithQueryBuilderData, t], ); const onAddToQueryLogs = useCallback( diff --git a/frontend/src/lib/newQueryBuilder/chooseAutocompleteFromCustomValue.ts b/frontend/src/lib/newQueryBuilder/chooseAutocompleteFromCustomValue.ts index ccd69df45f..3b1bad0abe 100644 --- a/frontend/src/lib/newQueryBuilder/chooseAutocompleteFromCustomValue.ts +++ b/frontend/src/lib/newQueryBuilder/chooseAutocompleteFromCustomValue.ts @@ -9,8 +9,9 @@ export const chooseAutocompleteFromCustomValue = ( (sourceAutoComplete) => value === sourceAutoComplete.key, ); - if (!firstBaseAutoCompleteValue) - return { ...initialAutocompleteData, key: value }; + if (!firstBaseAutoCompleteValue) { + return { ...initialAutocompleteData, key: value, dataType: 'string' }; + } return firstBaseAutoCompleteValue; };