fix: order repeating in order by filter (#3053)

* fix: order repeating in order by filter

* fix: filter order

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>

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 getValidResult = useCallback(
-		const result = getUniqValues(values);
+		(result: IOption[]): IOption[] =>
+			result.reduce<IOption[]>((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) {
+			if (!match) {
-				const [columnName, order] = match.data.flat() as string[];
-				return {
-					columnName: checkIfKeyPresent(columnName, query.aggregateAttribute.key)
-						? '#SIGNOZ_VALUE'
-						: columnName,
-					order: order ?? 'asc',
-				};
-			}
-
 				return {
 					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: columnNameValue,
+				order: orderValue,
+			};
 		});
 
+		const selectedValue: IOption[] = orderByValues.map((item) => ({
+			label: `${item.columnName} ${item.order}`,
+			value: `${item.columnName} ${item.order}`,
+		}));
+
+		setSelectedValue(selectedValue);
+
 		setSearchText('');
 		onChange(orderByValues);
 	};

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 };
+}