fix: log details action not it (#3350)

* fix: log details action not it * fix: getting keys when query param redirect * fix: getting operator * fix: data type for not existing autocomplete value --------- Co-authored-by: Palash Gupta <[email protected]>
SigNoz · Aug 16, 2023 · 9a6fcb6 · 9a6fcb6
1 parent 8ef4c0b
commit 9a6fcb6
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 49 deletions.
diff --git 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<SuccessResponse<IQueryAutocompleteResponse>>(
-					[QueryBuilderKeys.GET_AGGREGATE_KEYS],
-					{ exact: false },
-				)?.payload.attributeKeys || [];
-
-			const existAutocompleteKey = chooseAutocompleteFromCustomValue(
-				keysAutocomplete,
-				fieldKey,
-			);
-
-			const currentOperator =
-				Object.keys(OPERATORS).find((op) => op === operator) || '';
-
-			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);
+		async (
+			fieldKey: string,
+			fieldValue: string,
+			operator: string,
+		): Promise<void> => {
+			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 keysAutocomplete: BaseAutocompleteData[] =
+					keysAutocompleteResponse.payload?.attributeKeys || [];
+
+				const existAutocompleteKey = chooseAutocompleteFromCustomValue(
+					keysAutocomplete,
+					fieldKey,
+				);
+
+				const currentOperator = getOperatorValue(operator);
+
+				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
@@ -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;
 };