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

fix: Order By filter feedback on new QB (#2626)

Browse Source 
* fix: removing key from groupby is not updating value of orderby

* fix: removing operator is not updating value of orderby

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
This commit is contained in:
Chintan Sudani 2023-04-25 13:27:37 +05:30 committed by GitHub
parent 17438ca823
commit b27bdac1f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/container/QueryBuilder/components/Query/Query.tsx
View File

@ -71,8 +71,6 @@ export const Query = memo(function Query({
...query, ...query,
aggregateOperator: value, aggregateOperator: value,
having: [], having: [],
groupBy: [],
orderBy: [],
limit: null, limit: null,
tagFilters: { items: [], op: 'AND' }, tagFilters: { items: [], op: 'AND' },
}; };

114
frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx
View File

@ -1,12 +1,10 @@
import { Select, Spin } from 'antd'; import { Select, Spin } from 'antd';
import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys'; import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
import { QueryBuilderKeys } from 'constants/queryBuilder'; import { QueryBuilderKeys } from 'constants/queryBuilder';
import { IOption } from 'hooks/useResourceAttribute/types';
import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix'; import { transformStringWithPrefix } from 'lib/query/transformStringWithPrefix';
import React, { useCallback, useMemo, useState } from 'react'; import React, { useCallback, useMemo, useState } from 'react';
import { useQuery } from 'react-query'; import { useQuery } from 'react-query';
import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { IBuilderQueryForm } from 'types/api/queryBuilder/queryBuilderData';
import { MetricAggregateOperator } from 'types/common/queryBuilder'; import { MetricAggregateOperator } from 'types/common/queryBuilder';
import { selectStyle } from '../QueryBuilderSearch/config'; import { selectStyle } from '../QueryBuilderSearch/config';
@ -41,45 +39,51 @@ export function OrderByFilter({
[], [],
); );
const generateOptionsData = ( const noAggregationOptions = useMemo(
attributeKeys: BaseAutocompleteData[] | undefined, () =>
selectedValue: OrderByFilterValue[], data?.payload?.attributeKeys
query: IBuilderQueryForm, ? mapLabelValuePairs(data?.payload?.attributeKeys)
): IOption[] => { .flat()
const selectedValueLabels = getLabelFromValue(selectedValue); .filter(
(option) =>
!getLabelFromValue(selectedValue).includes(option.label.split(' ')[0]),
)
: [],
[data?.payload?.attributeKeys, selectedValue],
);
const noAggregationOptions = attributeKeys const aggregationOptions = useMemo(
? mapLabelValuePairs(attributeKeys) () =>
.flat() mapLabelValuePairs(query.groupBy)
.filter( .flat()
(option) => !selectedValueLabels.includes(option.label.split(' ')[0]), .concat([
) {
: []; label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`,
value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`,
const aggregationOptions = mapLabelValuePairs(query.groupBy) },
.flat() {
.concat([ label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`,
{ value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`,
label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`, },
value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) asc`, ])
}, .filter(
{ (option) =>
label: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`, !getLabelFromValue(selectedValue).includes(option.label.split(' ')[0]),
value: `${query.aggregateOperator}(${query.aggregateAttribute.key}) desc`, ),
}, [
]) query.aggregateAttribute.key,
.filter( query.aggregateOperator,
(option) => !selectedValueLabels.includes(option.label.split(' ')[0]), query.groupBy,
); selectedValue,
],
return query.aggregateOperator === MetricAggregateOperator.NOOP );
? noAggregationOptions
: aggregationOptions;
};
const optionsData = useMemo( const optionsData = useMemo(
() => generateOptionsData(data?.payload?.attributeKeys, selectedValue, query), () =>
[data?.payload?.attributeKeys, query, selectedValue], query.aggregateOperator === MetricAggregateOperator.NOOP
? noAggregationOptions
: aggregationOptions,
[aggregationOptions, noAggregationOptions, query.aggregateOperator],
); );
const handleChange = (values: OrderByFilterValue[]): void => { const handleChange = (values: OrderByFilterValue[]): void => {
@ -103,17 +107,29 @@ export function OrderByFilter({
onChange(orderByValues); onChange(orderByValues);
}; };
const values: OrderByFilterValue[] = query.orderBy.map((item) => ({ const values: OrderByFilterValue[] = useMemo(
label: transformStringWithPrefix({ () =>
str: item.key, query.orderBy
prefix: item.type || '', .filter((order) =>
condition: !item.isColumn, query.groupBy.find(
}), (group) =>
key: item.key, order.key.includes(group.key) ||
value: item.key, order.key.includes(query.aggregateOperator),
disabled: undefined, ),
title: undefined, )
})); .map((item) => ({
label: transformStringWithPrefix({
str: item.key,
prefix: item.type || '',
condition: !item.isColumn,
}),
key: item.key,
value: item.key,
disabled: undefined,
title: undefined,
})),
[query.aggregateOperator, query.groupBy, query.orderBy],
);
const isDisabledSelect = useMemo( const isDisabledSelect = useMemo(
() => () =>