diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx index 3994c6c73b..7cacaa9877 100644 --- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx +++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/OrderByFilter.tsx @@ -18,6 +18,7 @@ import { getLabelFromValue, mapLabelValuePairs, orderByValueDelimiter, + splitOrderByFromString, transformToOrderByStringValues, } from './utils'; @@ -115,7 +116,11 @@ export function OrderByFilter({ if (!match) return { label: item.label, value: item.value }; // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/no-unused-vars const [_, order] = match.data.flat() as string[]; - if (order) return { label: item.label, value: item.value }; + if (order) + return { + label: item.label, + value: item.value, + }; return { label: `${item.value} ${FILTERS.ASC}`, @@ -131,29 +136,69 @@ export function OrderByFilter({ ); }, []); - const handleChange = (values: IOption[]): void => { - const result = getUniqValues(values); + const getValidResult = useCallback( + (result: IOption[]): IOption[] => + result.reduce((acc, item) => { + if (item.value === FILTERS.ASC || item.value === FILTERS.DESC) return acc; + + if (item.value.includes(FILTERS.ASC) || item.value.includes(FILTERS.DESC)) { + const splittedOrderBy = splitOrderByFromString(item.value); + + if (splittedOrderBy) { + acc.push({ + label: `${splittedOrderBy.columnName} ${splittedOrderBy.order}`, + value: `${splittedOrderBy.columnName}${orderByValueDelimiter}${splittedOrderBy.order}`, + }); + + return acc; + } + } + + acc.push(item); + + return acc; + }, []), + [], + ); + + const handleChange = (values: IOption[]): void => { + const validResult = getValidResult(values); + const result = getUniqValues(validResult); - setSelectedValue(result); const orderByValues: OrderByPayload[] = result.map((item) => { const match = Papa.parse(item.value, { delimiter: orderByValueDelimiter }); - if (match) { - const [columnName, order] = match.data.flat() as string[]; + if (!match) { return { - columnName: checkIfKeyPresent(columnName, query.aggregateAttribute.key) - ? '#SIGNOZ_VALUE' - : columnName, - order: order ?? 'asc', + columnName: item.value, + order: 'asc', }; } + const [columnName, order] = match.data.flat() as string[]; + + const columnNameValue = checkIfKeyPresent( + columnName, + query.aggregateAttribute.key, + ) + ? '#SIGNOZ_VALUE' + : columnName; + + const orderValue = order ?? 'asc'; + return { - columnName: item.value, - order: 'asc', + columnName: columnNameValue, + order: orderValue, }; }); + const selectedValue: IOption[] = orderByValues.map((item) => ({ + label: `${item.columnName} ${item.order}`, + value: `${item.columnName} ${item.order}`, + })); + + setSelectedValue(selectedValue); + setSearchText(''); onChange(orderByValues); }; diff --git a/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts b/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts index 1d415ec2d5..345a2eaab9 100644 --- a/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts +++ b/frontend/src/container/QueryBuilder/filters/OrderByFilter/utils.ts @@ -4,6 +4,8 @@ import * as Papa from 'papaparse'; import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse'; import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData'; +import { FILTERS } from './config'; + export const orderByValueDelimiter = '|'; export const transformToOrderByStringValues = ( @@ -66,3 +68,13 @@ export function getLabelFromValue(arr: IOption[]): string[] { export function checkIfKeyPresent(str: string, valueToCheck: string): boolean { return new RegExp(`\\(${valueToCheck}\\)`).test(str); } + +export function splitOrderByFromString(str: string): OrderByPayload | null { + const splittedStr = str.split(' '); + const order = splittedStr.pop() || FILTERS.ASC; + const columnName = splittedStr.join(' '); + + if (!columnName) return null; + + return { columnName, order }; +}