feat: soring filter is added

frontend/src/api/trace/getSpansAggregate.ts

@@ -15,6 +15,7 @@ const getSpanAggregate = async (
 			end: String(props.end),
 			limit: props.limit,
 			offset: props.offset,
+			order: props.order,
 		};
 
 		const exclude: TraceFilterEnum[] = [];

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

@@ -1,26 +1,24 @@
-import React from 'react';
-
-import Table, { ColumnsType } from 'antd/lib/table';
 import { TableProps, Tag } from 'antd';
-
+import Table, { ColumnsType } from 'antd/lib/table';
+import ROUTES from 'constants/routes';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import history from 'lib/history';
+import React from 'react';
 import { connect, useSelector } from 'react-redux';
-import { AppState } from 'store/reducers';
-import { TraceReducer } from 'types/reducer/trace';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
-import AppActions from 'types/actions';
 import {
 	GetSpansAggregate,
 	GetSpansAggregateProps,
 } from 'store/actions/trace/getInitialSpansAggregate';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import dayjs from 'dayjs';
+import { TraceReducer } from 'types/reducer/trace';
-import duration from 'dayjs/plugin/duration';
-import history from 'lib/history';
-import ROUTES from 'constants/routes';
 dayjs.extend(duration);
 
-const TraceTable = ({ getSpansAggregate }: TraceProps) => {
+const TraceTable = ({ getSpansAggregate }: TraceProps): JSX.Element => {
 	const {
 		spansAggregate,
 		selectedFilter,
@@ -41,19 +39,16 @@ const TraceTable = ({ getSpansAggregate }: TraceProps) => {
 			title: 'Date',
 			dataIndex: 'timestamp',
 			key: 'timestamp',
-			render: (value: TableType['timestamp']) => {
+			sorter: true,
+			render: (value: TableType['timestamp']): JSX.Element => {
 				const day = dayjs(value);
 				return <div>{day.format('DD/MM/YYYY hh:mm:ss A')}</div>;
 			},
-			sorter: (a, b) =>
-				dayjs(a.timestamp).toDate().getTime() -
-				dayjs(b.timestamp).toDate().getTime(),
 		},
 		{
 			title: 'Service',
 			dataIndex: 'serviceName',
 			key: 'serviceName',
-			sorter: (a, b) => a.serviceName.length - b.serviceName.length,
 		},
 		{
 			title: 'Operation',
@@ -64,22 +59,19 @@ const TraceTable = ({ getSpansAggregate }: TraceProps) => {
 			title: 'Duration',
 			dataIndex: 'durationNano',
 			key: 'durationNano',
-			sorter: (a, b) => a.durationNano - b.durationNano,
+			render: (value: TableType['durationNano']): JSX.Element => (
-			render: (value: TableType['durationNano']) => {
+				<div>
-				return (
+					{`${dayjs
-					<div>
+						.duration({ milliseconds: value / 1000000 })
-						{`${dayjs
+						.asMilliseconds()} ms`}
-							.duration({ milliseconds: value / 1000000 })
+				</div>
-							.asMilliseconds()} ms`}
+			),
-					</div>
-				);
-			},
 		},
 		{
 			title: 'Method',
 			dataIndex: 'httpMethod',
 			key: 'httpMethod',
-			render: (value: TableType['httpMethod']) => {
+			render: (value: TableType['httpMethod']): JSX.Element => {
 				if (value.length === 0) {
 					return <div>-</div>;
 				}
@@ -90,8 +82,7 @@ const TraceTable = ({ getSpansAggregate }: TraceProps) => {
 			title: 'Status Code',
 			dataIndex: 'httpCode',
 			key: 'httpCode',
-			sorter: (a, b) => a.httpCode.length - b.httpCode.length,
+			render: (value: TableType['httpCode']): JSX.Element => {
-			render: (value: TableType['httpCode']) => {
 				if (value.length === 0) {
 					return <div>-</div>;
 				}
@@ -100,7 +91,13 @@ const TraceTable = ({ getSpansAggregate }: TraceProps) => {
 		},
 	];
 
-	const onChangeHandler: TableProps<TableType>['onChange'] = (props) => {
+	const onChangeHandler: TableProps<TableType>['onChange'] = (
+		props,
+		_,
+		sort,
+	) => {
+		const { order = 'ascend' } = sort;
+
 		if (props.current && props.pageSize) {
 			getSpansAggregate({
 				maxTime: globalTime.maxTime,
@@ -109,6 +106,7 @@ const TraceTable = ({ getSpansAggregate }: TraceProps) => {
 				current: props.current,
 				pageSize: props.pageSize,
 				selectedTags,
+				order: order === 'ascend' ? 'ascending' : 'descending',
 			});
 		}
 	};
@@ -120,7 +118,7 @@ const TraceTable = ({ getSpansAggregate }: TraceProps) => {
 			loading={loading || filterLoading}
 			columns={columns}
 			onRow={(record) => ({
-				onClick: () => {
+				onClick: (): void => {
 					history.push({
 						pathname: ROUTES.TRACE + '/' + record.traceID,
 						state: {

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

@@ -1,11 +1,12 @@
+import { notification } from 'antd';
+import getSpansAggregate from 'api/trace/getSpansAggregate';
 import { Dispatch, Store } from 'redux';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_SPANS_AGGREEGATE } from 'types/actions/trace';
-import getSpansAggregate from 'api/trace/getSpansAggregate';
+import { Props as GetSpanAggregateProps } from 'types/api/trace/getSpanAggregate';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { TraceReducer } from 'types/reducer/trace';
-import { notification } from 'antd';
 
 export const GetSpansAggregate = (
 	props: GetSpansAggregateProps,
@@ -52,6 +53,7 @@ export const GetSpansAggregate = (
 				offset: props.current * props.pageSize - props.pageSize,
 				selectedTags: props.selectedTags,
 				isFilterExclude: traces.isFilterExclude,
+				order: props.order,
 			});
 
 			if (response.statusCode === 200) {
@@ -112,4 +114,5 @@ export interface GetSpansAggregateProps {
 	current: TraceReducer['spansAggregate']['currentPage'];
 	pageSize: TraceReducer['spansAggregate']['pageSize'];
 	selectedTags: TraceReducer['selectedTags'];
+	order: GetSpanAggregateProps['order'];
 }

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

@@ -7,6 +7,7 @@ export interface Props {
 	limit: number;
 	offset: number;
 	selectedTags: TraceReducer['selectedTags'];
+	order?: 'descending' | 'ascending';
 	isFilterExclude: TraceReducer['isFilterExclude'];
 }