feat: sorting duration is added (#1032)

* feat: sorting duration is added in trace filter page

frontend/src/api/trace/getSpansAggregate.ts

@@ -16,6 +16,7 @@ const getSpanAggregate = async (
 			limit: props.limit,
 			offset: props.offset,
 			order: props.order,
+			orderParam: props.orderParam,
 		};
 
 		const exclude: TraceFilterEnum[] = [];

frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx

@@ -120,6 +120,8 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 						userSelected: preUserSelectedMap,
 						isFilterExclude: preIsFilterExclude,
 						order: spansAggregate.order,
+						orderParam: spansAggregate.orderParam,
+						pageSize: spansAggregate.pageSize,
 					},
 				});
 
@@ -134,6 +136,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 					preUserSelectedMap,
 					spansAggregate.order,
 					spansAggregate.pageSize,
+					spansAggregate.orderParam,
 				);
 			} else {
 				setIsLoading(false);

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx

@@ -119,6 +119,7 @@ function Duration(): JSX.Element {
 					isFilterExclude,
 					order: spansAggregate.order,
 					pageSize: spansAggregate.pageSize,
+					orderParam: spansAggregate.orderParam,
 				},
 			});
 
@@ -131,6 +132,7 @@ function Duration(): JSX.Element {
 				userSelectedFilter,
 				spansAggregate.order,
 				spansAggregate.pageSize,
+				spansAggregate.orderParam,
 			);
 		}
 	};

frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx

@@ -103,6 +103,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 						isFilterExclude,
 						order: spansAggregate.order,
 						pageSize: spansAggregate.pageSize,
+						orderParam: spansAggregate.orderParam,
 					},
 				});
 
@@ -115,6 +116,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					getPreUserSelected,
 					spansAggregate.order,
 					spansAggregate.pageSize,
+					spansAggregate.orderParam,
 				);
 			} else {
 				notification.error({
@@ -154,6 +156,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 				isFilterExclude,
 				order: spansAggregate.order,
 				pageSize: spansAggregate.pageSize,
+				orderParam: spansAggregate.orderParam,
 			},
 		});
 
@@ -166,6 +169,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 			userSelectedFilter,
 			spansAggregate.order,
 			spansAggregate.pageSize,
+			spansAggregate.orderParam,
 		);
 	};
 
@@ -205,6 +209,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 						isFilterExclude: postIsFilterExclude,
 						order: spansAggregate.order,
 						pageSize: spansAggregate.pageSize,
+						orderParam: spansAggregate.orderParam,
 					},
 				});
 
@@ -217,6 +222,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					preUserSelected,
 					spansAggregate.order,
 					spansAggregate.pageSize,
+					spansAggregate.orderParam,
 				);
 			} else {
 				notification.error({

frontend/src/container/Trace/Search/index.tsx

@@ -97,6 +97,7 @@ function Search({
 				isFilterExclude: traces.isFilterExclude,
 				order: traces.spansAggregate.order,
 				pageSize: traces.spansAggregate.pageSize,
+				orderParam: traces.spansAggregate.orderParam,
 			},
 		});
 
@@ -109,6 +110,7 @@ function Search({
 			traces.userSelectedFilter,
 			traces.spansAggregate.order,
 			traces.spansAggregate.pageSize,
+			traces.spansAggregate.orderParam,
 		);
 	};
 

frontend/src/container/Trace/TraceTable/index.tsx

@@ -12,6 +12,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import {
 	UPDATE_SPAN_ORDER,
+	UPDATE_SPAN_ORDER_PARAMS,
 	UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 } from 'types/actions/trace';
@@ -80,6 +81,7 @@ function TraceTable(): JSX.Element {
 			title: 'Duration',
 			dataIndex: 'durationNano',
 			key: 'durationNano',
+			sorter: true,
 			render: (value: TableType['durationNano']): JSX.Element => (
 				<Typography>
 					{`${dayjs
@@ -103,6 +105,16 @@ function TraceTable(): JSX.Element {
 		},
 	];
 
+	const getSortKey = (key: string): string => {
+		if (key === 'durationNano') {
+			return 'durationNano';
+		}
+		if (key === 'timestamp') {
+			return 'timestamp';
+		}
+		return '';
+	};
+
 	const onChangeHandler: TableProps<TableType>['onChange'] = (
 		props,
 		_,
@@ -111,7 +123,10 @@ function TraceTable(): JSX.Element {
 		if (!Array.isArray(sort)) {
 			const { order = spansAggregateOrder } = sort;
 			if (props.current && props.pageSize) {
-				const spanOrder = order || spansAggregateOrder;
+				const spanOrder = order === 'ascend' ? 'ascending' : 'descending';
+				const orderParam = getSortKey(sort.field as string);
+
+				console.log({ spanOrder });
 
 				dispatch({
 					type: UPDATE_SPAN_ORDER,
@@ -120,6 +135,13 @@ function TraceTable(): JSX.Element {
 					},
 				});
 
+				dispatch({
+					type: UPDATE_SPAN_ORDER_PARAMS,
+					payload: {
+						orderParam,
+					},
+				});
+
 				dispatch({
 					type: UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 					payload: {
@@ -143,6 +165,7 @@ function TraceTable(): JSX.Element {
 					userSelectedFilter,
 					spanOrder,
 					props.pageSize,
+					orderParam,
 				);
 			}
 		}
@@ -172,7 +195,6 @@ function TraceTable(): JSX.Element {
 				position: ['bottomLeft'],
 				total,
 			}}
-			sortDirections={['ascend', 'descend']}
 		/>
 	);
 }

frontend/src/pages/Trace/index.tsx

@@ -64,7 +64,8 @@ function Trace({
 			current: spansAggregate.currentPage,
 			pageSize: spansAggregate.pageSize,
 			selectedTags,
-			order: spansAggregate.order === 'ascend' ? 'ascending' : 'descending',
+			order: spansAggregate.order,
+			orderParam: spansAggregate.orderParam,
 		});
 	}, [
 		selectedTags,
@@ -75,6 +76,7 @@ function Trace({
 		spansAggregate.currentPage,
 		spansAggregate.pageSize,
 		spansAggregate.order,
+		spansAggregate.orderParam,
 	]);
 
 	useEffect(() => {

frontend/src/store/actions/trace/getInitialFilter.ts

@@ -13,6 +13,7 @@ import { TraceFilterEnum, TraceReducer } from 'types/reducer/trace';
 
 import {
 	isTraceFilterEnum,
+	parseAggregateOrderParams,
 	parseFilterExclude,
 	parseFilterToFetchData,
 	parseIsSkippedSelection,
@@ -85,6 +86,11 @@ export const GetInitialTraceFilter = (
 				traces.selectedTags,
 			);
 
+			const parsedOrderParams = parseAggregateOrderParams(
+				query,
+				traces.spansAggregate.orderParam,
+			);
+
 			const parsedFilter = parseQueryIntoFilter(query, traces.filter);
 
 			// now filter are not matching we need to fetch the data and make in sync
@@ -162,6 +168,7 @@ export const GetInitialTraceFilter = (
 						isFilterExclude: getIsFilterExcluded.currentValue,
 						order: parsedQueryOrder.currentValue,
 						pageSize: parsedPageSize.currentValue,
+						orderParam: parsedOrderParams.currentValue,
 					},
 				});
 			} else {

frontend/src/store/actions/trace/getInitialSpansAggregate.ts

@@ -31,7 +31,7 @@ export const GetSpansAggregate = (
 			return;
 		}
 
-		const order = props.order === 'ascending' ? 'ascend' : 'descend';
+		const { order = '' } = props;
 
 		try {
 			// triggering loading
@@ -46,6 +46,7 @@ export const GetSpansAggregate = (
 						total: spansAggregate.total,
 						pageSize: props.pageSize,
 						order,
+						orderParam: spansAggregate.orderParam,
 					},
 				},
 			});
@@ -59,6 +60,7 @@ export const GetSpansAggregate = (
 				selectedTags: props.selectedTags,
 				isFilterExclude: traces.isFilterExclude,
 				order,
+				orderParam: props.orderParam,
 			});
 
 			if (response.statusCode === 200) {
@@ -73,6 +75,7 @@ export const GetSpansAggregate = (
 							total: response.payload.totalSpans,
 							pageSize: props.pageSize,
 							order,
+							orderParam: spansAggregate.orderParam,
 						},
 					},
 				});
@@ -86,6 +89,7 @@ export const GetSpansAggregate = (
 					traces.userSelectedFilter,
 					order,
 					traces.spansAggregate.pageSize,
+					spansAggregate.orderParam,
 				);
 			} else {
 				notification.error({
@@ -103,6 +107,7 @@ export const GetSpansAggregate = (
 							total: spansAggregate.total,
 							pageSize: props.pageSize,
 							order,
+							orderParam: spansAggregate.orderParam,
 						},
 					},
 				});
@@ -119,6 +124,7 @@ export const GetSpansAggregate = (
 						total: spansAggregate.total,
 						pageSize: props.pageSize,
 						order,
+						orderParam: spansAggregate.orderParam,
 					},
 				},
 			});
@@ -134,4 +140,5 @@ export interface GetSpansAggregateProps {
 	pageSize: TraceReducer['spansAggregate']['pageSize'];
 	selectedTags: TraceReducer['selectedTags'];
 	order: GetSpanAggregateProps['order'];
+	orderParam: GetSpanAggregateProps['orderParam'];
 }

frontend/src/store/actions/trace/parseFilter/index.ts

@@ -8,3 +8,4 @@ export * from './skippedSelected';
 export * from './spanAggregateCurrentPage';
 export * from './spanAggregateCurrentPageSize';
 export * from './spanAggregateOrder';
+export * from './spanAggregateOrderParam';

frontend/src/store/actions/trace/parseFilter/spanAggregateOrderParam.ts

@@ -0,0 +1,39 @@
+import { TraceReducer } from 'types/reducer/trace';
+
+import { ParsedUrl } from '../util';
+
+export const parseAggregateOrderParams = (
+	query: string,
+	stateCurrent: TraceReducer['spansAggregate']['orderParam'],
+): ParsedUrl<TraceReducer['spansAggregate']['orderParam']> => {
+	const url = new URLSearchParams(query);
+
+	let current = '';
+
+	const selected = url.get('spanAggregateOrderParam');
+
+	if (selected) {
+		try {
+			const parsedValue = selected;
+
+			if (parsedValue && typeof parsedValue === 'string') {
+				current = parsedValue;
+			}
+		} catch (error) {
+			console.log(error);
+			console.log('error while parsing json');
+		}
+	}
+
+	if (selected) {
+		return {
+			currentValue: current,
+			urlValue: current,
+		};
+	}
+
+	return {
+		currentValue: stateCurrent,
+		urlValue: current,
+	};
+};

frontend/src/store/actions/trace/selectTraceFilter.ts

@@ -48,6 +48,7 @@ export const SelectedTraceFilter = (props: {
 			traces.userSelectedFilter,
 			traces.spansAggregate.order,
 			traces.spansAggregate.pageSize,
+			traces.spansAggregate.orderParam,
 		);
 	};
 };

frontend/src/store/actions/trace/util.ts

@@ -24,6 +24,7 @@ export const updateURL = (
 	userSelectedFilter: TraceReducer['userSelectedFilter'],
 	spanAggregateOrder: TraceReducer['spansAggregate']['order'],
 	spanAggregateCurrentPageSize: TraceReducer['spansAggregate']['pageSize'],
+	spanAggregateOrderParam: TraceReducer['spansAggregate']['orderParam'],
 ): void => {
 	const search = new URLSearchParams(window.location.search);
 	const preResult: { key: string; value: string }[] = [];
@@ -38,6 +39,7 @@ export const updateURL = (
 		'spanAggregateCurrentPage',
 		'spanAggregateOrder',
 		'spanAggregateCurrentPageSize',
+		'spanAggregateOrderParam',
 	];
 
 	search.forEach((value, key) => {
@@ -62,7 +64,7 @@ export const updateURL = (
 			Object.fromEntries(isFilterExclude),
 		)}&userSelectedFilter=${JSON.stringify(
 			Object.fromEntries(userSelectedFilter),
-		)}&spanAggregateCurrentPage=${spanAggregateCurrentPage}&spanAggregateOrder=${spanAggregateOrder}&spanAggregateCurrentPageSize=${spanAggregateCurrentPageSize}`,
+		)}&spanAggregateCurrentPage=${spanAggregateCurrentPage}&spanAggregateOrder=${spanAggregateOrder}&spanAggregateCurrentPageSize=${spanAggregateCurrentPageSize}&spanAggregateOrderParam=${spanAggregateOrderParam}`,
 	);
 };
 

frontend/src/store/reducers/trace.ts

@@ -10,6 +10,7 @@ import {
 	UPDATE_SELECTED_GROUP_BY,
 	UPDATE_SELECTED_TAGS,
 	UPDATE_SPAN_ORDER,
+	UPDATE_SPAN_ORDER_PARAMS,
 	UPDATE_SPANS_AGGREGATE,
 	UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
 	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
@@ -41,6 +42,7 @@ const initialValue: TraceReducer = {
 		total: 0,
 		pageSize: 10,
 		order: 'ascend',
+		orderParam: '',
 	},
 	selectedGroupBy: '',
 	selectedFunction: 'count',
@@ -77,6 +79,7 @@ const traceReducer = (
 				isFilterExclude,
 				order,
 				pageSize,
+				orderParam,
 			} = payload;
 
 			return {
@@ -92,6 +95,7 @@ const traceReducer = (
 					currentPage: current,
 					pageSize,
 					order,
+					orderParam,
 				},
 			};
 		}
@@ -237,6 +241,16 @@ const traceReducer = (
 			};
 		}
 
+		case UPDATE_SPAN_ORDER_PARAMS: {
+			return {
+				...state,
+				spansAggregate: {
+					...state.spansAggregate,
+					orderParam: action.payload.orderParam,
+				},
+			};
+		}
+
 		default:
 			return state;
 	}

frontend/src/types/actions/trace.ts

@@ -30,6 +30,7 @@ export const UPDATE_SPANS_AGGREGATE_PAGE_NUMBER =
 	'UPDATE_SPANS_AGGREGATE_PAGE_NUMBER';
 export const UPDATE_SPANS_AGGREGATE_PAGE_SIZE =
 	'UPDATE_SPANS_AGGREGATE_PAGE_SIZE';
+export const UPDATE_SPAN_ORDER_PARAMS = 'UPDATE_SPAN_ORDER_PARAMS';
 
 export interface UpdateFilter {
 	type: typeof UPDATE_TRACE_FILTER;
@@ -78,6 +79,7 @@ export interface UpdateAllFilters {
 		isFilterExclude: TraceReducer['isFilterExclude'];
 		order: TraceReducer['spansAggregate']['order'];
 		pageSize: TraceReducer['spansAggregate']['pageSize'];
+		orderParam: TraceReducer['spansAggregate']['orderParam'];
 	};
 }
 
@@ -178,6 +180,13 @@ export interface UpdateSpanSize {
 	};
 }
 
+export interface UpdateSpanParams {
+	type: typeof UPDATE_SPAN_ORDER_PARAMS;
+	payload: {
+		orderParam: TraceReducer['spansAggregate']['orderParam'];
+	};
+}
+
 export type TraceActions =
 	| UpdateFilter
 	| GetTraceFilter
@@ -198,4 +207,5 @@ export type TraceActions =
 	| UpdateFilterExclude
 	| UpdateSpanOrder
 	| UpdateSpansAggregatePageNumber
-	| UpdateSpanSize;
+	| UpdateSpanSize
+	| UpdateSpanParams;

frontend/src/types/api/trace/getSpanAggregate.ts

@@ -9,6 +9,7 @@ export interface Props {
 	selectedTags: TraceReducer['selectedTags'];
 	order?: TraceReducer['spansAggregate']['order'];
 	isFilterExclude: TraceReducer['isFilterExclude'];
+	orderParam: TraceReducer['spansAggregate']['orderParam'];
 }
 
 export type PayloadProps = {

frontend/src/types/reducer/trace.ts

@@ -21,6 +21,7 @@ export interface TraceReducer {
 		total: number;
 		pageSize: number;
 		order: string;
+		orderParam: string;
 	};
 	selectedGroupBy: string;
 	selectedFunction: string;