GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 22:19:01 +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`
: 'Aggregate attribute';
const getAttributes = useCallback(
const getAttributesData = useCallback(
(): BaseAutocompleteData[] =>
queryClient.getQueryData<SuccessResponse<IQueryAutocompleteResponse>>(
[QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE],
{ exact: false },
)?.payload.attributeKeys || [],
[queryClient],
queryClient.getQueryData<SuccessResponse<IQueryAutocompleteResponse>>([
QueryBuilderKeys.GET_AGGREGATE_ATTRIBUTE,
debouncedValue,
query.aggregateOperator,
query.dataSource,
])?.payload.attributeKeys || [],
[debouncedValue, query.aggregateOperator, query.dataSource, queryClient],
);
const handleChangeCustomValue = useCallback(
(value: string) => {
const aggregateAttributes = getAttributes();
const getResponseAttributes = useCallback(async () => {
const response = await queryClient.fetchQuery(
[
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(
aggregateAttributes,
attributes,
value,
);
onChange(customAttribute);
},
[getAttributes, onChange],
[onChange],
);
const handleBlur = useCallback(() => {
const handleBlur = useCallback(async () => {
if (searchText) {
handleChangeCustomValue(searchText);
const aggregateAttributes = await getResponseAttributes();
handleChangeCustomValue(searchText, aggregateAttributes);
}
}, [handleChangeCustomValue, searchText]);
}, [getResponseAttributes, handleChangeCustomValue, searchText]);
const handleChange = useCallback(
(
@ -125,7 +145,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({
): void => {
const currentOption = option as ExtendedSelectOption;
const aggregateAttributes = getAttributes();
const aggregateAttributes = getAttributesData();
if (currentOption.key) {
const attribute = aggregateAttributes.find(
@ -136,12 +156,12 @@ export const AggregatorFilter = memo(function AggregatorFilter({
onChange(attribute);
}
} else {
handleChangeCustomValue(value);
handleChangeCustomValue(value, aggregateAttributes);
}
setSearchText('');
},
[getAttributes, handleChangeCustomValue, onChange],
[getAttributesData, handleChangeCustomValue, onChange],
);
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 { memo, useCallback, useEffect, useState } from 'react';
import { useQuery, useQueryClient } from 'react-query';
import { SuccessResponse } from 'types/api';
import {
BaseAutocompleteData,
IQueryAutocompleteResponse,
} from 'types/api/queryBuilder/queryAutocompleteResponse';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { SelectOption } from 'types/common/select';
import { selectStyle } from '../QueryBuilderSearch/config';
@ -83,14 +79,27 @@ export const GroupByFilter = memo(function GroupByFilter({
},
);
const getAttributeKeys = useCallback(
(): BaseAutocompleteData[] =>
queryClient.getQueryData<SuccessResponse<IQueryAutocompleteResponse>>(
[QueryBuilderKeys.GET_AGGREGATE_KEYS],
{ exact: false },
)?.payload.attributeKeys || [],
[queryClient],
);
const getAttributeKeys = useCallback(async () => {
const response = await queryClient.fetchQuery(
[QueryBuilderKeys.GET_AGGREGATE_KEYS, searchText, isFocused],
async () =>
getAggregateKeys({
aggregateAttribute: query.aggregateAttribute.key,
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 => {
setSearchText(searchText);
@ -105,26 +114,35 @@ export const GroupByFilter = memo(function GroupByFilter({
setIsFocused(true);
};
const handleChange = (values: SelectOption<string, string>[]): void => {
const groupByValues: BaseAutocompleteData[] = values.map((item) => {
const [currentValue, id] = item.value.split(selectValueDivider);
const keys = getAttributeKeys();
const handleChange = useCallback(
async (values: SelectOption<string, string>[]): Promise<void> => {
const keys = await getAttributeKeys();
if (id && id.includes(idDivider)) {
const attribute = keys.find((item) => item.id === id);
const groupByValues: BaseAutocompleteData[] = values.map((item) => {
const [currentValue, id] = item.value.split(selectValueDivider);
if (attribute) {
return attribute;
if (id && id.includes(idDivider)) {
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(() => {
setSearchText('');