feat(insights): add table pagination analytics (#72531)

Adds table pagination analytics.

static/app/utils/analytics/insightAnalyticEvents.tsx

@@ -61,7 +61,7 @@ export const insightEventMap: Record<InsightEventKey, string | null> = {
   'insight.general.search': 'Insights: search in modules',
   'insight.general.select_action_value': 'Insights: select actionSelector dropdown value',
   'insight.general.select_domain_value': 'Insights: select domainSelector dropdown value',
-  'insight.general.table_paginate': 'Insights: paginate',
+  'insight.general.table_paginate': 'Insights: paginate table',
   'insight.general.table_sort': 'Insights: sort table',
   'insight.screen_load.spans.filter_by_device_class':
     'Insights: Screen Loads - filter device class',

static/app/views/performance/browser/resources/resourceView/resourceTable.tsx

@@ -9,6 +9,7 @@ import Pagination from 'sentry/components/pagination';
 import {IconImage} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import {DismissId, usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
 import {decodeScalar} from 'sentry/utils/queryString';
@@ -208,7 +209,17 @@ function ResourceTable({sort, defaultResourceTypes}: Props) {
           renderBodyCell,
         }}
       />
-      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      <Pagination
+        pageLinks={pageLinks}
+        onCursor={handleCursor}
+        paginationAnalyticsEvent={(direction: string) => {
+          trackAnalytics('insight.general.table_paginate', {
+            organization,
+            source: ModuleName.RESOURCE,
+            direction,
+          });
+        }}
+      />
     </Fragment>
   );
 }

static/app/views/performance/cache/tables/transactionsTable.tsx

@@ -9,6 +9,7 @@ import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import type {EventsMetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
@@ -20,6 +21,7 @@ import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/render
 import {
   MetricsFields,
   type MetricsResponse,
+  ModuleName,
   SpanFunction,
   SpanMetricsField,
   type SpanMetricsResponse,
@@ -161,7 +163,17 @@ export function TransactionsTable({
         }}
       />
 
-      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      <Pagination
+        pageLinks={pageLinks}
+        onCursor={handleCursor}
+        paginationAnalyticsEvent={(direction: string) => {
+          trackAnalytics('insight.general.table_paginate', {
+            organization,
+            source: ModuleName.CACHE,
+            direction,
+          });
+        }}
+      />
     </Fragment>
   );
 }

static/app/views/performance/database/queriesTable.tsx

@@ -6,6 +6,7 @@ import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import type {Organization} from 'sentry/types/organization';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import {browserHistory} from 'sentry/utils/browserHistory';
 import type {EventsMetaType} from 'sentry/utils/discover/eventView';
 import {getFieldRenderer} from 'sentry/utils/discover/fieldRenderers';
@@ -121,7 +122,17 @@ export function QueriesTable({response, sort}: Props) {
             renderBodyCell(column, row, meta, location, organization),
         }}
       />
-      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      <Pagination
+        pageLinks={pageLinks}
+        onCursor={handleCursor}
+        paginationAnalyticsEvent={(direction: string) => {
+          trackAnalytics('insight.general.table_paginate', {
+            organization,
+            source: ModuleName.DB,
+            direction,
+          });
+        }}
+      />
     </VisuallyCompleteWithData>
   );
 }

static/app/views/performance/http/tables/domainsTable.tsx

@@ -17,7 +17,7 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {DomainCell} from 'sentry/views/performance/http/tables/domainCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
-import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
+import {ModuleName, type SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
@@ -123,11 +123,6 @@ export function DomainsTable({response, sort}: Props) {
   const organization = useOrganization();
 
   const handleCursor: CursorHandler = (newCursor, pathname, query) => {
-    trackAnalytics('insight.general.table_paginate', {
-      organization,
-      source: 'http_domains',
-      direction: 'p',
-    });
     browserHistory.push({
       pathname,
       query: {...query, [QueryParameterNames.DOMAINS_CURSOR]: newCursor},
@@ -164,7 +159,17 @@ export function DomainsTable({response, sort}: Props) {
             renderBodyCell(column, row, meta, location, organization),
         }}
       />
-      <Pagination pageLinks={pageLinks} onCursor={handleCursor} />
+      <Pagination
+        pageLinks={pageLinks}
+        onCursor={handleCursor}
+        paginationAnalyticsEvent={(direction: string) => {
+          trackAnalytics('insight.general.table_paginate', {
+            organization,
+            source: ModuleName.HTTP,
+            direction,
+          });
+        }}
+      />
     </VisuallyCompleteWithData>
   );
 }

static/app/views/performance/mobile/appStarts/screens/screensTable.tsx

@@ -19,7 +19,7 @@ import {
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/starfish/components/releaseSelector';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 
 type Props = {
   data: TableData | undefined;
@@ -138,6 +138,7 @@ export function AppStartScreens({data, eventView, isLoading, pageLinks}: Props)
         },
       ]}
       customBodyCellRenderer={renderBodyCell}
+      moduleName={ModuleName.APP_START}
     />
   );
 }

static/app/views/performance/mobile/components/screensTable.tsx

@@ -9,6 +9,7 @@ import GridEditable, {COL_WIDTH_UNDEFINED} from 'sentry/components/gridEditable'
 import SortLink from 'sentry/components/gridEditable/sortLink';
 import Pagination from 'sentry/components/pagination';
 import {defined} from 'sentry/utils';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import type EventView from 'sentry/utils/discover/eventView';
 import {isFieldSortable} from 'sentry/utils/discover/eventView';
@@ -17,6 +18,7 @@ import {fieldAlignment} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {PercentChangeCell} from 'sentry/views/starfish/components/tableCells/percentChangeCell';
+import type {ModuleName} from 'sentry/views/starfish/types';
 
 type Props = {
   columnNameMap: Record<string, string>;
@@ -30,6 +32,7 @@ type Props = {
     column: GridColumn<string>,
     row: TableDataRow
   ) => React.ReactNode;
+  moduleName?: ModuleName;
 };
 
 export function ScreensTable({
@@ -41,6 +44,7 @@ export function ScreensTable({
   columnOrder,
   defaultSort,
   customBodyCellRenderer,
+  moduleName,
 }: Props) {
   const location = useLocation();
   const organization = useOrganization();
@@ -133,7 +137,18 @@ export function ScreensTable({
           renderBodyCell,
         }}
       />
-      <Pagination pageLinks={pageLinks} />
+      <Pagination
+        pageLinks={pageLinks}
+        paginationAnalyticsEvent={(direction: string) => {
+          if (moduleName !== undefined) {
+            trackAnalytics('insight.general.table_paginate', {
+              organization,
+              source: moduleName,
+              direction,
+            });
+          }
+        }}
+      />
     </Fragment>
   );
 }

static/app/views/performance/mobile/screenload/screens/screensTable.tsx

@@ -11,6 +11,7 @@ import type {CursorHandler} from 'sentry/components/pagination';
 import Pagination from 'sentry/components/pagination';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t, tct} from 'sentry/locale';
+import {trackAnalytics} from 'sentry/utils/analytics';
 import type {TableData, TableDataRow} from 'sentry/utils/discover/discoverQuery';
 import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
 import type {MetaType} from 'sentry/utils/discover/eventView';
@@ -31,7 +32,7 @@ import {
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/starfish/components/releaseSelector';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 
 type Props = {
   data: TableData | undefined;
@@ -231,7 +232,17 @@ export function ScreensTable({data, eventView, isLoading, pageLinks, onCursor}:
           renderBodyCell,
         }}
       />
-      <Pagination pageLinks={pageLinks} onCursor={onCursor} />
+      <Pagination
+        pageLinks={pageLinks}
+        onCursor={onCursor}
+        paginationAnalyticsEvent={(direction: string) => {
+          trackAnalytics('insight.general.table_paginate', {
+            organization,
+            source: ModuleName.SCREEN_LOAD,
+            direction,
+          });
+        }}
+      />
     </Fragment>
   );
 }

static/app/views/performance/mobile/ui/screenSummary/spanOperationTable.tsx

@@ -24,7 +24,7 @@ import {
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/starfish/components/releaseSelector';
 import {OverflowEllipsisTextContainer} from 'sentry/views/starfish/components/textAlign';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
 import {appendReleaseFilters} from 'sentry/views/starfish/utils/releaseComparison';
 
@@ -193,6 +193,7 @@ export function SpanOperationTable({
         },
       ]}
       customBodyCellRenderer={renderBodyCell}
+      moduleName={ModuleName.MOBILE_UI}
     />
   );
 }

static/app/views/performance/mobile/ui/screens/table.tsx

@@ -17,6 +17,7 @@ import {
   SECONDARY_RELEASE_ALIAS,
 } from 'sentry/views/starfish/components/releaseSelector';
 import {useReleaseSelection} from 'sentry/views/starfish/queries/useReleases';
+import {ModuleName} from 'sentry/views/starfish/types';
 
 type Props = {
   data: TableData | undefined;
@@ -136,6 +137,7 @@ export function UIScreensTable({data, eventView, isLoading, pageLinks}: Props) {
         },
       ]}
       customBodyCellRenderer={renderBodyCell}
+      moduleName={ModuleName.MOBILE_UI}
     />
   );
 }