From e5d4b9858a9d299c7d5aaf077b0e0b2798c5b79f Mon Sep 17 00:00:00 2001 From: Dominik Buszowiecki <44422760+DominikB2014@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:36:42 -0500 Subject: [PATCH] fix(browser-starfish): cursor persisting when navigating between pages/filters (#60378) Fixes two issues in resource module 1. The cursor was not being reset when adding filters such as type, blocking status in the main resources page. 2. When you navigate to another page in the resources table, then click on a resource, that same cursor would be used to fetch the "found in pages" table. To solve this we use the `spansCursor` query param in the resources page, and `pagesCursor` query param in the resourceSummary. --- .../browser/resources/jsCssView/index.tsx | 3 +++ .../resources/jsCssView/resourceTable.tsx | 17 +++++++++++++++-- .../resourceSummaryTable.tsx | 4 ++-- .../browser/resources/shared/domainSelector.tsx | 1 + .../resources/shared/renderBlockingSelector.tsx | 2 ++ .../resources/utils/useResourcesQuery.ts | 10 +++++++++- .../views/starfish/views/queryParameters.tsx | 1 + 7 files changed, 33 insertions(+), 5 deletions(-) diff --git a/static/app/views/performance/browser/resources/jsCssView/index.tsx b/static/app/views/performance/browser/resources/jsCssView/index.tsx index 472e84e94ae634..bdcdfad3de383e 100644 --- a/static/app/views/performance/browser/resources/jsCssView/index.tsx +++ b/static/app/views/performance/browser/resources/jsCssView/index.tsx @@ -17,6 +17,7 @@ import { import {useResourcePagesQuery} from 'sentry/views/performance/browser/resources/utils/useResourcePagesQuery'; import {useResourceSort} from 'sentry/views/performance/browser/resources/utils/useResourceSort'; import {ModuleName} from 'sentry/views/starfish/types'; +import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters'; import {SpanTimeCharts} from 'sentry/views/starfish/views/spans/spanTimeCharts'; import {ModuleFilters} from 'sentry/views/starfish/views/spans/useModuleFilters'; @@ -88,6 +89,7 @@ function ResourceTypeSelector({value}: {value?: string}) { query: { ...location.query, [RESOURCE_TYPE]: newValue?.value, + [QueryParameterNames.SPANS_CURSOR]: undefined, }, }); }} @@ -159,6 +161,7 @@ export function TransactionSelector({ query: { ...location.query, [TRANSACTION]: newValue?.value, + [QueryParameterNames.SPANS_CURSOR]: undefined, }, }); }} diff --git a/static/app/views/performance/browser/resources/jsCssView/resourceTable.tsx b/static/app/views/performance/browser/resources/jsCssView/resourceTable.tsx index 967dcbf455d67e..e53704a91a3df8 100644 --- a/static/app/views/performance/browser/resources/jsCssView/resourceTable.tsx +++ b/static/app/views/performance/browser/resources/jsCssView/resourceTable.tsx @@ -1,4 +1,5 @@ import {Fragment} from 'react'; +import {browserHistory} from 'react-router'; import styled from '@emotion/styled'; import {PlatformIcon} from 'platformicons'; @@ -7,9 +8,10 @@ import GridEditable, { GridColumnHeader, GridColumnOrder, } from 'sentry/components/gridEditable'; -import Pagination from 'sentry/components/pagination'; +import Pagination, {CursorHandler} from 'sentry/components/pagination'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; +import {decodeScalar} from 'sentry/utils/queryString'; import {useLocation} from 'sentry/utils/useLocation'; import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources'; import ResourceSize from 'sentry/views/performance/browser/resources/shared/resourceSize'; @@ -21,6 +23,7 @@ import {SpanDescriptionCell} from 'sentry/views/starfish/components/tableCells/s import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell'; import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell'; import {ModuleName, SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types'; +import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters'; import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types'; const { @@ -61,9 +64,12 @@ type Props = { function ResourceTable({sort, defaultResourceTypes}: Props) { const location = useLocation(); + const cursor = decodeScalar(location.query?.[QueryParameterNames.SPANS_CURSOR]); + const {data, isLoading, pageLinks} = useResourcesQuery({ sort, defaultResourceTypes, + cursor, }); const columnOrder: GridColumnOrder[] = [ @@ -159,6 +165,13 @@ function ResourceTable({sort, defaultResourceTypes}: Props) { return {row[key]}; }; + const handleCursor: CursorHandler = (newCursor, pathname, query) => { + browserHistory.push({ + pathname, + query: {...query, [QueryParameterNames.SPANS_CURSOR]: newCursor}, + }); + }; + return ( - + ); } diff --git a/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable.tsx b/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable.tsx index f7c635d284f436..8715f6df4aa038 100644 --- a/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable.tsx +++ b/static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable.tsx @@ -41,7 +41,7 @@ function ResourceSummaryTable() { const {groupId} = useParams(); const sort = useResourceSummarySort(); const filters = useResourceModuleFilters(); - const cursor = decodeScalar(location.query?.[QueryParameterNames.SPANS_CURSOR]); + const cursor = decodeScalar(location.query?.[QueryParameterNames.PAGES_CURSOR]); const {data, isLoading, pageLinks} = useResourcePagesQuery(groupId, { sort, cursor, @@ -121,7 +121,7 @@ function ResourceSummaryTable() { const handleCursor: CursorHandler = (newCursor, pathname, query) => { browserHistory.push({ pathname, - query: {...query, [QueryParameterNames.SPANS_CURSOR]: newCursor}, + query: {...query, [QueryParameterNames.PAGES_CURSOR]: newCursor}, }); }; diff --git a/static/app/views/performance/browser/resources/shared/domainSelector.tsx b/static/app/views/performance/browser/resources/shared/domainSelector.tsx index 55daecb16d8365..7692fae0a23275 100644 --- a/static/app/views/performance/browser/resources/shared/domainSelector.tsx +++ b/static/app/views/performance/browser/resources/shared/domainSelector.tsx @@ -47,6 +47,7 @@ export function DomainSelector({ query: { ...location.query, [SPAN_DOMAIN]: newValue?.value, + cursor: undefined, }, }); }} diff --git a/static/app/views/performance/browser/resources/shared/renderBlockingSelector.tsx b/static/app/views/performance/browser/resources/shared/renderBlockingSelector.tsx index 654a7ec06528a0..ba6b7d7b002cfa 100644 --- a/static/app/views/performance/browser/resources/shared/renderBlockingSelector.tsx +++ b/static/app/views/performance/browser/resources/shared/renderBlockingSelector.tsx @@ -6,6 +6,7 @@ import SelectControlWithProps, { Option, } from 'sentry/views/performance/browser/resources/shared/selectControlWithProps'; import {SpanMetricsField} from 'sentry/views/starfish/types'; +import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters'; const {RESOURCE_RENDER_BLOCKING_STATUS} = SpanMetricsField; @@ -29,6 +30,7 @@ function RenderBlockingSelector({value}: {value?: string}) { query: { ...location.query, [RESOURCE_RENDER_BLOCKING_STATUS]: newValue?.value, + [QueryParameterNames.SPANS_CURSOR]: undefined, }, }); }} diff --git a/static/app/views/performance/browser/resources/utils/useResourcesQuery.ts b/static/app/views/performance/browser/resources/utils/useResourcesQuery.ts index 61d191efccb27d..0a91251f89e575 100644 --- a/static/app/views/performance/browser/resources/utils/useResourcesQuery.ts +++ b/static/app/views/performance/browser/resources/utils/useResourcesQuery.ts @@ -28,6 +28,7 @@ const {TIME_SPENT_PERCENTAGE} = SpanFunction; type Props = { sort: ValidSort; + cursor?: string; defaultResourceTypes?: string[]; limit?: number; query?: string; @@ -54,7 +55,13 @@ export const getResourcesEventViewQuery = ( ]; }; -export const useResourcesQuery = ({sort, defaultResourceTypes, query, limit}: Props) => { +export const useResourcesQuery = ({ + sort, + defaultResourceTypes, + query, + limit, + cursor, +}: Props) => { const pageFilters = usePageFilters(); const location = useLocation(); const resourceFilters = useResourceModuleFilters(); @@ -102,6 +109,7 @@ export const useResourcesQuery = ({sort, defaultResourceTypes, query, limit}: Pr options: { refetchOnWindowFocus: false, }, + cursor, }); const data = result?.data?.data.map(row => ({ diff --git a/static/app/views/starfish/views/queryParameters.tsx b/static/app/views/starfish/views/queryParameters.tsx index 9a7601f1e8cb6d..3e5983c0a15ca3 100644 --- a/static/app/views/starfish/views/queryParameters.tsx +++ b/static/app/views/starfish/views/queryParameters.tsx @@ -3,4 +3,5 @@ export enum QueryParameterNames { SPANS_SORT = 'spansSort', ENDPOINTS_CURSOR = 'endpointsCursor', ENDPOINTS_SORT = 'endpointsSort', + PAGES_CURSOR = 'pagesCursor', }