From 7735cad08bf6c9a946b59ee0ca762aef26e34157 Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Wed, 29 Oct 2025 11:54:54 +0100 Subject: [PATCH 1/2] ref(insights): Update laravel/nextjs cursor logic --- .../agents/components/headSortCell.tsx | 9 +++---- .../agents/components/modelsTable.tsx | 2 -- .../insights/agents/components/toolsTable.tsx | 2 -- .../mcp/components/mcpPromptsTable.tsx | 4 --- .../mcp/components/mcpResourcesTable.tsx | 4 --- .../insights/mcp/components/mcpToolsTable.tsx | 4 --- .../pages/platform/laravel/commandsTable.tsx | 3 --- .../insights/pages/platform/laravel/index.tsx | 9 +++---- .../pages/platform/laravel/jobsTable.tsx | 3 --- .../pages/platform/laravel/pathsTable.tsx | 3 --- .../pages/platform/nextjs/apiTable.tsx | 3 --- .../pages/platform/nextjs/clientTable.tsx | 3 --- .../pages/platform/shared/table/index.tsx | 25 +++---------------- .../platform/shared/table/useTableData.tsx | 14 +++-------- 14 files changed, 15 insertions(+), 73 deletions(-) diff --git a/static/app/views/insights/agents/components/headSortCell.tsx b/static/app/views/insights/agents/components/headSortCell.tsx index d58772b68c6c47..2caf2855b728ca 100644 --- a/static/app/views/insights/agents/components/headSortCell.tsx +++ b/static/app/views/insights/agents/components/headSortCell.tsx @@ -5,6 +5,7 @@ import SortLink from 'sentry/components/tables/gridEditable/sortLink'; import type {QueryValue} from 'sentry/utils/queryString'; import useLocationQuery from 'sentry/utils/url/useLocationQuery'; import {useLocation} from 'sentry/utils/useLocation'; +import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams'; function decodeSortField(value: QueryValue): string { if (typeof value === 'string') { @@ -39,13 +40,11 @@ export const HeadSortCell = memo(function HeadCell({ children, align = 'left', forceCellGrow = false, - cursorParamName = 'cursor', onClick, }: { children: React.ReactNode; sortKey: string; align?: 'left' | 'right'; - cursorParamName?: string; forceCellGrow?: boolean; onClick?: (sortKey: string, newDirection: 'asc' | 'desc') => void; }) { @@ -64,9 +63,9 @@ export const HeadSortCell = memo(function HeadCell({ ...location, query: { ...location.query, - [cursorParamName]: undefined, - field: sortKey, - order: newDirection, + [TableUrlParams.CURSOR]: undefined, + [TableUrlParams.SORT_FIELD]: sortKey, + [TableUrlParams.SORT_ORDER]: newDirection, }, })} onClick={() => onClick?.(sortKey, newDirection)} diff --git a/static/app/views/insights/agents/components/modelsTable.tsx b/static/app/views/insights/agents/components/modelsTable.tsx index baddf07f13cea0..e37df5943c86b0 100644 --- a/static/app/views/insights/agents/components/modelsTable.tsx +++ b/static/app/views/insights/agents/components/modelsTable.tsx @@ -31,7 +31,6 @@ import {ErrorCell} from 'sentry/views/insights/agents/utils/cells'; import {formatLLMCosts} from 'sentry/views/insights/agents/utils/formatLLMCosts'; import {getAIGenerationsFilter} from 'sentry/views/insights/agents/utils/query'; import {Referrer} from 'sentry/views/insights/agents/utils/referrers'; -import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams'; import {ChartType} from 'sentry/views/insights/common/components/chart'; import {TextAlignRight} from 'sentry/views/insights/common/components/textAlign'; import {useSpans} from 'sentry/views/insights/common/queries/useDiscover'; @@ -155,7 +154,6 @@ export function ModelsTable() { return ( {column.name} @@ -132,7 +129,6 @@ export function McpPromptsTable() { renderBodyCell, renderHeadCell, }} - cursorParamName={TableUrlParams.CURSOR} pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/mcp/components/mcpResourcesTable.tsx b/static/app/views/insights/mcp/components/mcpResourcesTable.tsx index ca2743d2b4c483..f0ee09956a33e7 100644 --- a/static/app/views/insights/mcp/components/mcpResourcesTable.tsx +++ b/static/app/views/insights/mcp/components/mcpResourcesTable.tsx @@ -14,7 +14,6 @@ import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode'; import {getExploreUrl} from 'sentry/views/explore/utils'; import {HeadSortCell} from 'sentry/views/insights/agents/components/headSortCell'; import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQuery'; -import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams'; import {ChartType} from 'sentry/views/insights/common/components/chart'; import {MCPReferrer} from 'sentry/views/insights/mcp/utils/referrer'; import {PlatformInsightsTable} from 'sentry/views/insights/pages/platform/shared/table'; @@ -56,7 +55,6 @@ export function McpResourcesTable() { AVG_DURATION, P95_DURATION, ], - cursorParamName: TableUrlParams.CURSOR, referrer: MCPReferrer.MCP_RESOURCE_TABLE, }); @@ -79,7 +77,6 @@ export function McpResourcesTable() { sortKey={column.key} align={rightAlignColumns.has(column.key) ? 'right' : 'left'} forceCellGrow={column.key === SpanFields.MCP_RESOURCE_URI} - cursorParamName={TableUrlParams.CURSOR} onClick={handleSort} > {column.name} @@ -132,7 +129,6 @@ export function McpResourcesTable() { renderBodyCell, renderHeadCell, }} - cursorParamName={TableUrlParams.CURSOR} pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/mcp/components/mcpToolsTable.tsx b/static/app/views/insights/mcp/components/mcpToolsTable.tsx index 97218542b267ce..e655bdfe7cf711 100644 --- a/static/app/views/insights/mcp/components/mcpToolsTable.tsx +++ b/static/app/views/insights/mcp/components/mcpToolsTable.tsx @@ -14,7 +14,6 @@ import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode'; import {getExploreUrl} from 'sentry/views/explore/utils'; import {HeadSortCell} from 'sentry/views/insights/agents/components/headSortCell'; import {useCombinedQuery} from 'sentry/views/insights/agents/hooks/useCombinedQuery'; -import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams'; import {ChartType} from 'sentry/views/insights/common/components/chart'; import {MCPReferrer} from 'sentry/views/insights/mcp/utils/referrer'; import {PlatformInsightsTable} from 'sentry/views/insights/pages/platform/shared/table'; @@ -56,7 +55,6 @@ export function McpToolsTable() { AVG_DURATION, P95_DURATION, ], - cursorParamName: TableUrlParams.CURSOR, referrer: MCPReferrer.MCP_TOOL_TABLE, }); @@ -79,7 +77,6 @@ export function McpToolsTable() { sortKey={column.key} align={rightAlignColumns.has(column.key) ? 'right' : 'left'} forceCellGrow={column.key === SpanFields.MCP_TOOL_NAME} - cursorParamName={TableUrlParams.CURSOR} onClick={handleSort} > {column.name} @@ -132,7 +129,6 @@ export function McpToolsTable() { renderBodyCell, renderHeadCell, }} - cursorParamName={TableUrlParams.CURSOR} pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/pages/platform/laravel/commandsTable.tsx b/static/app/views/insights/pages/platform/laravel/commandsTable.tsx index b0b48a070ff2d7..bc469d9cda59db 100644 --- a/static/app/views/insights/pages/platform/laravel/commandsTable.tsx +++ b/static/app/views/insights/pages/platform/laravel/commandsTable.tsx @@ -55,7 +55,6 @@ export function CommandsTable() { 'p95(span.duration)', 'sum(span.duration)', ], - cursorParamName: 'commandsCursor', referrer: Referrer.PATHS_TABLE, }); @@ -65,7 +64,6 @@ export function CommandsTable() { sortKey={column.key} align={rightAlignColumns.has(column.key) ? 'right' : 'left'} forceCellGrow={column.key === 'command'} - cursorParamName="commandsCursor" > {column.name} @@ -115,7 +113,6 @@ export function CommandsTable() { renderBodyCell, renderHeadCell, }} - cursorParamName="commandsCursor" pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/pages/platform/laravel/index.tsx b/static/app/views/insights/pages/platform/laravel/index.tsx index 7014ad758cf352..c24005c6855232 100644 --- a/static/app/views/insights/pages/platform/laravel/index.tsx +++ b/static/app/views/insights/pages/platform/laravel/index.tsx @@ -8,6 +8,7 @@ import {trackAnalytics} from 'sentry/utils/analytics'; import {useLocation} from 'sentry/utils/useLocation'; import {useNavigate} from 'sentry/utils/useNavigate'; import useOrganization from 'sentry/utils/useOrganization'; +import {TableUrlParams} from 'sentry/views/insights/agents/utils/urlParams'; import OverviewApiLatencyChartWidget from 'sentry/views/insights/common/components/widgets/overviewApiLatencyChartWidget'; import OverviewCacheMissChartWidget from 'sentry/views/insights/common/components/widgets/overviewCacheMissChartWidget'; import OverviewJobsChartWidget from 'sentry/views/insights/common/components/widgets/overviewJobsChartWidget'; @@ -66,12 +67,10 @@ export function LaravelOverviewPage() { query: { ...location.query, // Reset cursors when view changes - pathsCursor: undefined, - commandsCursor: undefined, - jobsCursor: undefined, + [TableUrlParams.CURSOR]: undefined, // Reset sort parameters when view changes - field: undefined, - order: undefined, + [TableUrlParams.SORT_FIELD]: undefined, + [TableUrlParams.SORT_ORDER]: undefined, view, }, }, diff --git a/static/app/views/insights/pages/platform/laravel/jobsTable.tsx b/static/app/views/insights/pages/platform/laravel/jobsTable.tsx index bcdf7f2804e5b9..c73f417acc4c3a 100644 --- a/static/app/views/insights/pages/platform/laravel/jobsTable.tsx +++ b/static/app/views/insights/pages/platform/laravel/jobsTable.tsx @@ -69,7 +69,6 @@ export function JobsTable() { 'failure_rate()', 'sum(span.duration)', ], - cursorParamName: 'jobsCursor', referrer: Referrer.PATHS_TABLE, }); @@ -79,7 +78,6 @@ export function JobsTable() { sortKey={column.key} align={rightAlignColumns.has(column.key) ? 'right' : 'left'} forceCellGrow={column.key === 'transaction'} - cursorParamName="jobsCursor" > {column.name} @@ -132,7 +130,6 @@ export function JobsTable() { renderBodyCell, renderHeadCell, }} - cursorParamName="jobsCursor" pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/pages/platform/laravel/pathsTable.tsx b/static/app/views/insights/pages/platform/laravel/pathsTable.tsx index c6949f2abd24ec..a2f3d248865d8d 100644 --- a/static/app/views/insights/pages/platform/laravel/pathsTable.tsx +++ b/static/app/views/insights/pages/platform/laravel/pathsTable.tsx @@ -73,7 +73,6 @@ export function PathsTable() { 'http.request.method', 'count_unique(user)', ], - cursorParamName: 'pathsCursor', referrer: Referrer.PATHS_TABLE, }); @@ -83,7 +82,6 @@ export function PathsTable() { sortKey={column.key} align={rightAlignColumns.has(column.key) ? 'right' : 'left'} forceCellGrow={column.key === 'transaction'} - cursorParamName="pathsCursor" > {column.name} @@ -157,7 +155,6 @@ export function PathsTable() { renderBodyCell, renderHeadCell, }} - cursorParamName="pathsCursor" pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/pages/platform/nextjs/apiTable.tsx b/static/app/views/insights/pages/platform/nextjs/apiTable.tsx index ee8ae6e3280e7b..65e7443ce7559b 100644 --- a/static/app/views/insights/pages/platform/nextjs/apiTable.tsx +++ b/static/app/views/insights/pages/platform/nextjs/apiTable.tsx @@ -58,7 +58,6 @@ export function ApiTable() { 'count()', 'sum(span.duration)', ], - cursorParamName: 'tableCursor', referrer: Referrer.API_TABLE, }); @@ -68,7 +67,6 @@ export function ApiTable() { sortKey={column.key} align={rightAlignColumns.has(column.key) ? 'right' : 'left'} forceCellGrow={column.key === 'transaction'} - cursorParamName="tableCursor" > {column.name} @@ -132,7 +130,6 @@ export function ApiTable() { renderBodyCell, renderHeadCell, }} - cursorParamName="tableCursor" pageLinks={tableDataRequest.pageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} /> diff --git a/static/app/views/insights/pages/platform/nextjs/clientTable.tsx b/static/app/views/insights/pages/platform/nextjs/clientTable.tsx index f1c9c5b7539266..86e0464b736a2e 100644 --- a/static/app/views/insights/pages/platform/nextjs/clientTable.tsx +++ b/static/app/views/insights/pages/platform/nextjs/clientTable.tsx @@ -85,7 +85,6 @@ export function ClientTable() { 'count_if(span.op,equals,navigation)', 'count_if(span.op,equals,pageload)', ], - cursorParamName: 'tableCursor', referrer: Referrer.CLIENT_TABLE, }); @@ -94,7 +93,6 @@ export function ClientTable() { {column.name} @@ -193,7 +191,6 @@ export function ClientTable() { data={tableDataRequest.data} initialColumnOrder={pageloadColumnOrder as Array>} stickyHeader - cursorParamName="tableCursor" pageLinks={pagesTablePageLinks} isPlaceholderData={tableDataRequest.isPlaceholderData} grid={{ diff --git a/static/app/views/insights/pages/platform/shared/table/index.tsx b/static/app/views/insights/pages/platform/shared/table/index.tsx index c04adb3c068ce6..b9e040863f4f5d 100644 --- a/static/app/views/insights/pages/platform/shared/table/index.tsx +++ b/static/app/views/insights/pages/platform/shared/table/index.tsx @@ -1,8 +1,7 @@ -import {Fragment, useCallback} from 'react'; +import {Fragment} from 'react'; import styled from '@emotion/styled'; import EmptyMessage from 'sentry/components/emptyMessage'; -import type {CursorHandler} from 'sentry/components/pagination'; import Pagination from 'sentry/components/pagination'; import type { GridColumnOrder, @@ -13,15 +12,14 @@ import useStateBasedColumnResize from 'sentry/components/tables/gridEditable/use import {IconSearch} from 'sentry/icons'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; -import {useNavigate} from 'sentry/utils/useNavigate'; import {useTableSortParams} from 'sentry/views/insights/agents/components/headSortCell'; +import {useTableCursor} from 'sentry/views/insights/agents/hooks/useTableCursor'; interface PlatformInsightsTableProps> extends Omit< React.ComponentProps>, 'columnOrder' | 'columnSortBy' > { - cursorParamName: string; initialColumnOrder: | Array> | (() => Array>); @@ -32,33 +30,18 @@ interface PlatformInsightsTableProps> const COL_WIDTH_MINIMUM = 120; export function PlatformInsightsTable>({ - cursorParamName, pageLinks, isPlaceholderData, initialColumnOrder, ...props }: PlatformInsightsTableProps) { - const navigate = useNavigate(); - const {sortField, sortOrder} = useTableSortParams(); + const {setCursor} = useTableCursor(); const {columns: columnOrder, handleResizeColumn} = useStateBasedColumnResize({ columns: initialColumnOrder, }); - const handleCursor = useCallback( - (cursor, pathname, previousQuery) => { - navigate( - { - pathname, - query: {...previousQuery, [cursorParamName]: cursor}, - }, - {replace: true, preventScrollReset: true} - ); - }, - [cursorParamName, navigate] - ); - return ( @@ -84,7 +67,7 @@ export function PlatformInsightsTable>({ /> {isPlaceholderData && } - + ); } diff --git a/static/app/views/insights/pages/platform/shared/table/useTableData.tsx b/static/app/views/insights/pages/platform/shared/table/useTableData.tsx index 6dad3eeb2f01dd..cea6ee88bdc4de 100644 --- a/static/app/views/insights/pages/platform/shared/table/useTableData.tsx +++ b/static/app/views/insights/pages/platform/shared/table/useTableData.tsx @@ -1,8 +1,8 @@ import {useMemo} from 'react'; import type {MutableSearch} from 'sentry/utils/tokenizeSearch'; -import {useLocation} from 'sentry/utils/useLocation'; import {useTableSortParams} from 'sentry/views/insights/agents/components/headSortCell'; +import {useTableCursor} from 'sentry/views/insights/agents/hooks/useTableCursor'; import {useSpans} from 'sentry/views/insights/common/queries/useDiscover'; import type {SpanProperty} from 'sentry/views/insights/types'; @@ -12,15 +12,13 @@ export function useSpanTableData({ fields, referrer, query, - cursorParamName, }: { - cursorParamName: string; fields: Fields[]; query: string | MutableSearch; referrer: string; }) { - const location = useLocation(); const {sortField, sortOrder} = useTableSortParams(); + const {cursor} = useTableCursor(); const isValidSortKey = fields.includes(sortField as Fields); @@ -31,10 +29,7 @@ export function useSpanTableData({ fields, limit: PER_PAGE, keepPreviousData: true, - cursor: - typeof location.query[cursorParamName] === 'string' - ? location.query[cursorParamName] - : undefined, + cursor, }, referrer ); @@ -43,10 +38,8 @@ export function useSpanTableData({ export function useTableDataWithController({ fields, referrer, - cursorParamName, query, }: { - cursorParamName: string; fields: Fields[]; query: string | MutableSearch; referrer: string; @@ -54,7 +47,6 @@ export function useTableDataWithController({ const transactionsRequest = useSpanTableData({ query, fields: ['transaction', ...fields], - cursorParamName, referrer, }); From 17c32127b3ee62d0c9ecdb1a1fe4efef6d58e5df Mon Sep 17 00:00:00 2001 From: Priscila Oliveira Date: Wed, 29 Oct 2025 12:08:36 +0100 Subject: [PATCH 2/2] cursor feedback --- static/app/views/insights/agents/components/headSortCell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/app/views/insights/agents/components/headSortCell.tsx b/static/app/views/insights/agents/components/headSortCell.tsx index 2caf2855b728ca..d372f900f30058 100644 --- a/static/app/views/insights/agents/components/headSortCell.tsx +++ b/static/app/views/insights/agents/components/headSortCell.tsx @@ -28,8 +28,8 @@ function decodeSortOrder(value: QueryValue): 'asc' | 'desc' { export function useTableSortParams() { const {field: sortField, order: sortOrder} = useLocationQuery({ fields: { - field: decodeSortField, - order: decodeSortOrder, + [TableUrlParams.SORT_FIELD]: decodeSortField, + [TableUrlParams.SORT_ORDER]: decodeSortOrder, }, }); return {sortField, sortOrder};