diff --git a/frontend/src/api/trace/getSpansAggregate.ts b/frontend/src/api/trace/getSpansAggregate.ts index ad18cb2143..077577febf 100644 --- a/frontend/src/api/trace/getSpansAggregate.ts +++ b/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[] = []; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx index e42da5d448..65a9a60112 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx +++ b/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); diff --git a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx index e00dd9d140..a2a5d163a1 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx +++ b/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, ); } }; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx index 2b634842d0..7c87f42531 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx +++ b/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({ diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx index 310a344522..890f69a6c4 100644 --- a/frontend/src/container/Trace/Search/index.tsx +++ b/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, ); }; diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index 2eacbcd263..b7ec79b6e5 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/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 => ( {`${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['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']} /> ); } diff --git a/frontend/src/pages/Trace/index.tsx b/frontend/src/pages/Trace/index.tsx index 9764c83afe..ed3d234436 100644 --- a/frontend/src/pages/Trace/index.tsx +++ b/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(() => { diff --git a/frontend/src/store/actions/trace/getInitialFilter.ts b/frontend/src/store/actions/trace/getInitialFilter.ts index a2b46d5796..fcc9c08b1c 100644 --- a/frontend/src/store/actions/trace/getInitialFilter.ts +++ b/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 { diff --git a/frontend/src/store/actions/trace/getInitialSpansAggregate.ts b/frontend/src/store/actions/trace/getInitialSpansAggregate.ts index 369bb402c6..fff9a01902 100644 --- a/frontend/src/store/actions/trace/getInitialSpansAggregate.ts +++ b/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']; } diff --git a/frontend/src/store/actions/trace/parseFilter/index.ts b/frontend/src/store/actions/trace/parseFilter/index.ts index b3b7b9fac4..f4db0bef3c 100644 --- a/frontend/src/store/actions/trace/parseFilter/index.ts +++ b/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'; diff --git a/frontend/src/store/actions/trace/parseFilter/spanAggregateOrderParam.ts b/frontend/src/store/actions/trace/parseFilter/spanAggregateOrderParam.ts new file mode 100644 index 0000000000..129fc2b9f8 --- /dev/null +++ b/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 => { + 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, + }; +}; diff --git a/frontend/src/store/actions/trace/selectTraceFilter.ts b/frontend/src/store/actions/trace/selectTraceFilter.ts index f9802bfd78..d11b12022a 100644 --- a/frontend/src/store/actions/trace/selectTraceFilter.ts +++ b/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, ); }; }; diff --git a/frontend/src/store/actions/trace/util.ts b/frontend/src/store/actions/trace/util.ts index 35c6d0329a..20e677ad97 100644 --- a/frontend/src/store/actions/trace/util.ts +++ b/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}`, ); }; diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index 7d01fbdfaf..793bf94889 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/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; } diff --git a/frontend/src/types/actions/trace.ts b/frontend/src/types/actions/trace.ts index 583a40d31a..da97d05129 100644 --- a/frontend/src/types/actions/trace.ts +++ b/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; diff --git a/frontend/src/types/api/trace/getSpanAggregate.ts b/frontend/src/types/api/trace/getSpanAggregate.ts index 5f6d413a81..f5bcbdc6c5 100644 --- a/frontend/src/types/api/trace/getSpanAggregate.ts +++ b/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 = { diff --git a/frontend/src/types/reducer/trace.ts b/frontend/src/types/reducer/trace.ts index 9e6544104a..babeb344c6 100644 --- a/frontend/src/types/reducer/trace.ts +++ b/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;