bug: Rows per page setting is now working (#1026)

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

@@ -133,6 +133,7 @@ function CheckBoxComponent(props: CheckBoxProps): JSX.Element {
 					preIsFilterExclude,
 					preUserSelectedMap,
 					spansAggregate.order,
+					spansAggregate.pageSize,
 				);
 			} else {
 				setIsLoading(false);

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

@@ -118,6 +118,7 @@ function Duration(): JSX.Element {
 					userSelected: preUserSelected,
 					isFilterExclude,
 					order: spansAggregate.order,
+					pageSize: spansAggregate.pageSize,
 				},
 			});
 
@@ -129,6 +130,7 @@ function Duration(): JSX.Element {
 				isFilterExclude,
 				userSelectedFilter,
 				spansAggregate.order,
+				spansAggregate.pageSize,
 			);
 		}
 	};

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

@@ -102,6 +102,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 						userSelected: getPreUserSelected,
 						isFilterExclude,
 						order: spansAggregate.order,
+						pageSize: spansAggregate.pageSize,
 					},
 				});
 
@@ -113,6 +114,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					isFilterExclude,
 					getPreUserSelected,
 					spansAggregate.order,
+					spansAggregate.pageSize,
 				);
 			} else {
 				notification.error({
@@ -151,6 +153,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 				userSelected: userSelectedFilter,
 				isFilterExclude,
 				order: spansAggregate.order,
+				pageSize: spansAggregate.pageSize,
 			},
 		});
 
@@ -162,6 +165,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 			isFilterExclude,
 			userSelectedFilter,
 			spansAggregate.order,
+			spansAggregate.pageSize,
 		);
 	};
 
@@ -200,6 +204,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 						userSelected: preUserSelected,
 						isFilterExclude: postIsFilterExclude,
 						order: spansAggregate.order,
+						pageSize: spansAggregate.pageSize,
 					},
 				});
 
@@ -211,6 +216,7 @@ function PanelHeading(props: PanelHeadingProps): JSX.Element {
 					postIsFilterExclude,
 					preUserSelected,
 					spansAggregate.order,
+					spansAggregate.pageSize,
 				);
 			} else {
 				notification.error({

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

@@ -96,6 +96,7 @@ function Search({
 				userSelected: traces.userSelectedFilter,
 				isFilterExclude: traces.isFilterExclude,
 				order: traces.spansAggregate.order,
+				pageSize: traces.spansAggregate.pageSize,
 			},
 		});
 
@@ -107,6 +108,7 @@ function Search({
 			traces.isFilterExclude,
 			traces.userSelectedFilter,
 			traces.spansAggregate.order,
+			traces.spansAggregate.pageSize,
 		);
 	};
 

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

@@ -13,6 +13,7 @@ import AppActions from 'types/actions';
 import {
 	UPDATE_SPAN_ORDER,
 	UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
+	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 } from 'types/actions/trace';
 import { TraceReducer } from 'types/reducer/trace';
 
@@ -119,6 +120,13 @@ function TraceTable(): JSX.Element {
 					},
 				});
 
+				dispatch({
+					type: UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
+					payload: {
+						pageSize: props.pageSize,
+					},
+				});
+
 				dispatch({
 					type: UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
 					payload: {
@@ -134,6 +142,7 @@ function TraceTable(): JSX.Element {
 					isFilterExclude,
 					userSelectedFilter,
 					spanOrder,
+					props.pageSize,
 				);
 			}
 		}

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

@@ -19,6 +19,7 @@ import {
 	parseQueryIntoCurrent,
 	parseQueryIntoFilter,
 	parseQueryIntoOrder,
+	parseQueryIntoPageSize,
 	parseQueryIntoSelectedTags,
 	parseSelectedFilter,
 } from './util';
@@ -72,6 +73,11 @@ export const GetInitialTraceFilter = (
 				traces.spansAggregate.order,
 			);
 
+			const parsedPageSize = parseQueryIntoPageSize(
+				query,
+				traces.spansAggregate.pageSize,
+			);
+
 			const isSelectionSkipped = parseIsSkippedSelection(query);
 
 			const parsedSelectedTags = parseQueryIntoSelectedTags(
@@ -155,6 +161,7 @@ export const GetInitialTraceFilter = (
 						userSelected: getUserSelected.currentValue,
 						isFilterExclude: getIsFilterExcluded.currentValue,
 						order: parsedQueryOrder.currentValue,
+						pageSize: parsedPageSize.currentValue,
 					},
 				});
 			} else {

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

@@ -85,6 +85,7 @@ export const GetSpansAggregate = (
 					traces.isFilterExclude,
 					traces.userSelectedFilter,
 					order,
+					traces.spansAggregate.pageSize,
 				);
 			} else {
 				notification.error({

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

@@ -6,4 +6,5 @@ export * from './selectedFilter';
 export * from './selectedTags';
 export * from './skippedSelected';
 export * from './spanAggregateCurrentPage';
+export * from './spanAggregateCurrentPageSize';
 export * from './spanAggregateOrder';

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

@@ -0,0 +1,37 @@
+import { TraceReducer } from 'types/reducer/trace';
+
+import { ParsedUrl } from '../util';
+
+export const parseQueryIntoPageSize = (
+	query: string,
+	stateCurrent: TraceReducer['spansAggregate']['pageSize'],
+): ParsedUrl<TraceReducer['spansAggregate']['pageSize']> => {
+	const url = new URLSearchParams(query);
+
+	let current = 1;
+
+	const selected = url.get('spanAggregateCurrentPageSize');
+
+	if (selected) {
+		try {
+			const parsedValue = JSON.parse(decodeURIComponent(selected));
+			if (Number.isInteger(parsedValue)) {
+				current = parseInt(parsedValue, 10);
+			}
+		} catch (error) {
+			console.log('error while parsing json');
+		}
+	}
+
+	if (selected) {
+		return {
+			currentValue: parseInt(selected, 10),
+			urlValue: current,
+		};
+	}
+
+	return {
+		currentValue: stateCurrent,
+		urlValue: current,
+	};
+};

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

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

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

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

frontend/src/store/reducers/trace.ts

@@ -12,6 +12,7 @@ import {
 	UPDATE_SPAN_ORDER,
 	UPDATE_SPANS_AGGREGATE,
 	UPDATE_SPANS_AGGREGATE_PAGE_NUMBER,
+	UPDATE_SPANS_AGGREGATE_PAGE_SIZE,
 	UPDATE_TAG_MODAL_VISIBILITY,
 	UPDATE_TRACE_FILTER,
 	UPDATE_TRACE_FILTER_LOADING,
@@ -75,6 +76,7 @@ const traceReducer = (
 				userSelected,
 				isFilterExclude,
 				order,
+				pageSize,
 			} = payload;
 
 			return {
@@ -88,6 +90,7 @@ const traceReducer = (
 				spansAggregate: {
 					...state.spansAggregate,
 					currentPage: current,
+					pageSize,
 					order,
 				},
 			};
@@ -224,6 +227,16 @@ const traceReducer = (
 			};
 		}
 
+		case UPDATE_SPANS_AGGREGATE_PAGE_SIZE: {
+			return {
+				...state,
+				spansAggregate: {
+					...state.spansAggregate,
+					pageSize: action.payload.pageSize,
+				},
+			};
+		}
+
 		default:
 			return state;
 	}

frontend/src/types/actions/trace.ts

@@ -28,6 +28,8 @@ export const UPDATE_FILTER_EXCLUDE = 'UPDATE_FILTER_EXCLUDE';
 export const UPDATE_SPAN_ORDER = 'UPDATE_SPAN_ORDER';
 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 interface UpdateFilter {
 	type: typeof UPDATE_TRACE_FILTER;
@@ -75,6 +77,7 @@ export interface UpdateAllFilters {
 		userSelected: TraceReducer['userSelectedFilter'];
 		isFilterExclude: TraceReducer['isFilterExclude'];
 		order: TraceReducer['spansAggregate']['order'];
+		pageSize: TraceReducer['spansAggregate']['pageSize'];
 	};
 }
 
@@ -168,6 +171,13 @@ export interface UpdateSpanOrder {
 	};
 }
 
+export interface UpdateSpanSize {
+	type: typeof UPDATE_SPANS_AGGREGATE_PAGE_SIZE;
+	payload: {
+		pageSize: TraceReducer['spansAggregate']['pageSize'];
+	};
+}
+
 export type TraceActions =
 	| UpdateFilter
 	| GetTraceFilter
@@ -187,4 +197,5 @@ export type TraceActions =
 	| UpdateSelected
 	| UpdateFilterExclude
 	| UpdateSpanOrder
-	| UpdateSpansAggregatePageNumber;
+	| UpdateSpansAggregatePageNumber
+	| UpdateSpanSize;