From 29c0b434815bb648260e3396aa9fccb62eba53b4 Mon Sep 17 00:00:00 2001 From: palash-signoz Date: Tue, 3 May 2022 15:30:08 +0530 Subject: [PATCH] bug: Rows per page setting is now working (#1026) --- .../Panel/PanelBody/Common/Checkbox.tsx | 1 + .../Panel/PanelBody/Duration/index.tsx | 2 + .../Filters/Panel/PanelHeading/index.tsx | 6 +++ frontend/src/container/Trace/Search/index.tsx | 2 + .../src/container/Trace/TraceTable/index.tsx | 9 +++++ .../store/actions/trace/getInitialFilter.ts | 7 ++++ .../actions/trace/getInitialSpansAggregate.ts | 1 + .../store/actions/trace/parseFilter/index.ts | 1 + .../spanAggregateCurrentPageSize.ts | 37 +++++++++++++++++++ .../store/actions/trace/selectTraceFilter.ts | 1 + frontend/src/store/actions/trace/util.ts | 4 +- frontend/src/store/reducers/trace.ts | 13 +++++++ frontend/src/types/actions/trace.ts | 13 ++++++- 13 files changed, 95 insertions(+), 2 deletions(-) create mode 100644 frontend/src/store/actions/trace/parseFilter/spanAggregateCurrentPageSize.ts 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 1c0c5fae75..e42da5d448 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Common/Checkbox.tsx +++ b/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); 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 e6d44f3b61..e00dd9d140 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/index.tsx +++ b/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, ); } }; diff --git a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx b/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx index 9d2b9b1da1..2b634842d0 100644 --- a/frontend/src/container/Trace/Filters/Panel/PanelHeading/index.tsx +++ b/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({ diff --git a/frontend/src/container/Trace/Search/index.tsx b/frontend/src/container/Trace/Search/index.tsx index 54bb51fa5a..310a344522 100644 --- a/frontend/src/container/Trace/Search/index.tsx +++ b/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, ); }; diff --git a/frontend/src/container/Trace/TraceTable/index.tsx b/frontend/src/container/Trace/TraceTable/index.tsx index 18d73bf5f0..2eacbcd263 100644 --- a/frontend/src/container/Trace/TraceTable/index.tsx +++ b/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, ); } } diff --git a/frontend/src/store/actions/trace/getInitialFilter.ts b/frontend/src/store/actions/trace/getInitialFilter.ts index 9b189cf60c..a2b46d5796 100644 --- a/frontend/src/store/actions/trace/getInitialFilter.ts +++ b/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 { diff --git a/frontend/src/store/actions/trace/getInitialSpansAggregate.ts b/frontend/src/store/actions/trace/getInitialSpansAggregate.ts index e723a84939..369bb402c6 100644 --- a/frontend/src/store/actions/trace/getInitialSpansAggregate.ts +++ b/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({ diff --git a/frontend/src/store/actions/trace/parseFilter/index.ts b/frontend/src/store/actions/trace/parseFilter/index.ts index f2489c2076..b3b7b9fac4 100644 --- a/frontend/src/store/actions/trace/parseFilter/index.ts +++ b/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'; diff --git a/frontend/src/store/actions/trace/parseFilter/spanAggregateCurrentPageSize.ts b/frontend/src/store/actions/trace/parseFilter/spanAggregateCurrentPageSize.ts new file mode 100644 index 0000000000..6bdabe7870 --- /dev/null +++ b/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 => { + 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, + }; +}; diff --git a/frontend/src/store/actions/trace/selectTraceFilter.ts b/frontend/src/store/actions/trace/selectTraceFilter.ts index 23cf27d648..f9802bfd78 100644 --- a/frontend/src/store/actions/trace/selectTraceFilter.ts +++ b/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, ); }; }; diff --git a/frontend/src/store/actions/trace/util.ts b/frontend/src/store/actions/trace/util.ts index 1693f2693a..35c6d0329a 100644 --- a/frontend/src/store/actions/trace/util.ts +++ b/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}`, ); }; diff --git a/frontend/src/store/reducers/trace.ts b/frontend/src/store/reducers/trace.ts index 010813c16e..7d01fbdfaf 100644 --- a/frontend/src/store/reducers/trace.ts +++ b/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; } diff --git a/frontend/src/types/actions/trace.ts b/frontend/src/types/actions/trace.ts index cfdb86bcbb..583a40d31a 100644 --- a/frontend/src/types/actions/trace.ts +++ b/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;