GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 06:26:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: filter change value (#3117)

Browse Source 
* fix: filter change value

Fix for getting value from current autocomplete response instead of all options.

* fix: change group by with correct values

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Yevhen Shevchenko 2023-07-12 17:15:40 +03:00 committed by GitHub
parent 8e20ca8405
commit 10ffbf7d81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 82 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
View File

@ -89,34 +89,54 @@ export const AggregatorFilter = memo(function AggregatorFilter({
? `${transformToUpperCase(query.dataSource)} name` ? `${transformToUpperCase(query.dataSource)} name`
: 'Aggregate attribute'; : 'Aggregate attribute';
const getAttributes = useCallback( const getAttributesData = useCallback(
(): BaseAutocompleteData[] => (): BaseAutocompleteData[] =>
queryClient.getQueryData<SuccessResponse<IQueryAutocompleteResponse>>( queryClient.getQueryData<SuccessResponse<IQueryAutocompleteResponse>>([
[QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE], QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
{ exact: false }, debouncedValue,
)?.payload.attributeKeys || [], query.aggregateOperator,
[queryClient], query.dataSource,
])?.payload.attributeKeys || [],
[debouncedValue, query.aggregateOperator, query.dataSource, queryClient],
); );
const handleChangeCustomValue = useCallback( const getResponseAttributes = useCallback(async () => {
(value: string) => { const response = await queryClient.fetchQuery(
const aggregateAttributes = getAttributes(); [
QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
searchText,
query.aggregateOperator,
query.dataSource,
],
async () =>
getAggregateAttribute({
searchText,
aggregateOperator: query.aggregateOperator,
dataSource: query.dataSource,
}),
);
return response.payload?.attributeKeys || [];
}, [query.aggregateOperator, query.dataSource, queryClient, searchText]);
const handleChangeCustomValue = useCallback(
async (value: string, attributes: BaseAutocompleteData[]) => {
const customAttribute: BaseAutocompleteData = chooseAutocompleteFromCustomValue( const customAttribute: BaseAutocompleteData = chooseAutocompleteFromCustomValue(
aggregateAttributes, attributes,
value, value,
); );
onChange(customAttribute); onChange(customAttribute);
}, },
[getAttributes, onChange], [onChange],
); );
const handleBlur = useCallback(() => { const handleBlur = useCallback(async () => {
if (searchText) { if (searchText) {
handleChangeCustomValue(searchText); const aggregateAttributes = await getResponseAttributes();
handleChangeCustomValue(searchText, aggregateAttributes);
} }
}, [handleChangeCustomValue, searchText]); }, [getResponseAttributes, handleChangeCustomValue, searchText]);
const handleChange = useCallback( const handleChange = useCallback(
( (
@ -125,7 +145,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({
): void => { ): void => {
const currentOption = option as ExtendedSelectOption; const currentOption = option as ExtendedSelectOption;
const aggregateAttributes = getAttributes(); const aggregateAttributes = getAttributesData();
if (currentOption.key) { if (currentOption.key) {
const attribute = aggregateAttributes.find( const attribute = aggregateAttributes.find(
@ -136,12 +156,12 @@ export const AggregatorFilter = memo(function AggregatorFilter({
onChange(attribute); onChange(attribute);
} }
} else { } else {
handleChangeCustomValue(value); handleChangeCustomValue(value, aggregateAttributes);
} }
setSearchText(''); setSearchText('');
}, },
[getAttributes, handleChangeCustomValue, onChange], [getAttributesData, handleChangeCustomValue, onChange],
); );
const value = transformStringWithPrefix({ const value = transformStringWithPrefix({

72
frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
View File

@ -15,11 +15,7 @@ import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import { isEqual, uniqWith } from 'lodash-es'; import { isEqual, uniqWith } from 'lodash-es';
import { memo, useCallback, useEffect, useState } from 'react'; import { memo, useCallback, useEffect, useState } from 'react';
import { useQuery, useQueryClient } from 'react-query'; import { useQuery, useQueryClient } from 'react-query';
import { SuccessResponse } from 'types/api'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import {
BaseAutocompleteData,
IQueryAutocompleteResponse,
} from 'types/api/queryBuilder/queryAutocompleteResponse';
import { SelectOption } from 'types/common/select'; import { SelectOption } from 'types/common/select';
import { selectStyle } from '../QueryBuilderSearch/config'; import { selectStyle } from '../QueryBuilderSearch/config';
@ -83,14 +79,27 @@ export const GroupByFilter = memo(function GroupByFilter({
}, },
); );
const getAttributeKeys = useCallback( const getAttributeKeys = useCallback(async () => {
(): BaseAutocompleteData[] => const response = await queryClient.fetchQuery(
queryClient.getQueryData<SuccessResponse<IQueryAutocompleteResponse>>( [QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText, isFocused],
[QueryBuilderKeys.GET_AGGREGATE_KEYS], async () =>
{ exact: false }, getAggregateKeys({
)?.payload.attributeKeys || [], aggregateAttribute: query.aggregateAttribute.key,
[queryClient], dataSource: query.dataSource,
); aggregateOperator: query.aggregateOperator,
searchText,
}),
);
return response.payload?.attributeKeys || [];
}, [
isFocused,
query.aggregateAttribute.key,
query.aggregateOperator,
query.dataSource,
queryClient,
searchText,
]);
const handleSearchKeys = (searchText: string): void => { const handleSearchKeys = (searchText: string): void => {
setSearchText(searchText); setSearchText(searchText);
@ -105,26 +114,35 @@ export const GroupByFilter = memo(function GroupByFilter({
setIsFocused(true); setIsFocused(true);
}; };
const handleChange = (values: SelectOption<string, string>[]): void => { const handleChange = useCallback(
const groupByValues: BaseAutocompleteData[] = values.map((item) => { async (values: SelectOption<string, string>[]): Promise<void> => {
const [currentValue, id] = item.value.split(selectValueDivider); const keys = await getAttributeKeys();
const keys = getAttributeKeys();
if (id && id.includes(idDivider)) { const groupByValues: BaseAutocompleteData[] = values.map((item) => {
const attribute = keys.find((item) => item.id === id); const [currentValue, id] = item.value.split(selectValueDivider);
if (attribute) { if (id && id.includes(idDivider)) {
return attribute; const attribute = keys.find((item) => item.id === id);
const existAttribute = query.groupBy.find((item) => item.id === id);
if (attribute) {
return attribute;
}
if (existAttribute) {
return existAttribute;
}
} }
}
return chooseAutocompleteFromCustomValue(keys, currentValue); return chooseAutocompleteFromCustomValue(keys, currentValue);
}); });
const result = uniqWith(groupByValues, isEqual); const result = uniqWith(groupByValues, isEqual);
onChange(result); onChange(result);
}; },
[getAttributeKeys, onChange, query.groupBy],
);
const clearSearch = useCallback(() => { const clearSearch = useCallback(() => {
setSearchText(''); setSearchText('');