ref(starfish): create a shared useSeries function (#70235)

1. Create shared `useSeries` which support `useSpanMetricsSeries` and
`useMetricsSeries` where SpanMetrics and Metrics are the dataset names.
2. Rename `MetricsResponse` to `SpanMetricsResponse`, `MetricsProperty`
to `SpanMetricsProperty`, etc so that they match the datasetname
3. Create `MetricsResponse`, `MetricsProperty` etc for fields in the
Metrics dataset

static/app/views/aiMonitoring/PipelinesTable.tsx

@@ -25,11 +25,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import type {MetricsResponse} from 'sentry/views/starfish/types';
+import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'project.id'
   | 'span.description'
   | 'span.group'

static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryCharts.tsx

@@ -8,7 +8,7 @@ import {useResourceModuleFilters} from 'sentry/views/performance/browser/resourc
 import {AVG_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colors';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
 import {
   DataTitles,

static/app/views/performance/cache/cacheLandingPage.tsx

@@ -31,8 +31,8 @@ import {
 } from 'sentry/views/performance/cache/tables/transactionsTable';
 import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import {SpanFunction} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 

static/app/views/performance/cache/samplePanel/charts/transactionDurationChart.tsx

@@ -1,11 +1,13 @@
 import {decodeScalar} from 'sentry/utils/queryString';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import {Referrer} from 'sentry/views/performance/cache/referrers';
-import {useTransactionDurationSeries} from 'sentry/views/performance/cache/samplePanel/charts/useTransactionDurationSeries';
 import {CHART_HEIGHT} from 'sentry/views/performance/cache/settings';
 import {AVG_COLOR} from 'sentry/views/starfish/colors';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
+import {useMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
+import type {MetricsQueryFilters} from 'sentry/views/starfish/types';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 export function TransactionDurationChart() {
@@ -16,8 +18,13 @@ export function TransactionDurationChart() {
     },
   });
 
-  const {data, isLoading} = useTransactionDurationSeries({
-    transactionName: transaction,
+  const search: MetricsQueryFilters = {
+    transaction,
+  };
+
+  const {data, isLoading} = useMetricsSeries({
+    yAxis: ['avg(transaction.duration)'],
+    search: MutableSearch.fromQueryObject(search),
     referrer: Referrer.SAMPLES_CACHE_TRANSACTION_DURATION,
   });
 

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

@@ -17,14 +17,14 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {TransactionCell} from 'sentry/views/performance/cache/tables/transactionCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
-import {type MetricsResponse, SpanFunction} from 'sentry/views/starfish/types';
+import {SpanFunction, type SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 const {CACHE_MISS_RATE, SPM, TIME_SPENT_PERCENTAGE} = SpanFunction;
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'project'
   | 'project.id'
   | 'transaction'

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

@@ -29,8 +29,8 @@ import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import Onboarding from 'sentry/views/performance/onboarding';
 import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import {ModuleName, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {ActionSelector} from 'sentry/views/starfish/views/spans/selectors/actionSelector';

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

@@ -25,8 +25,8 @@ import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders'
 import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import {DatabaseSpanDescription} from 'sentry/views/starfish/components/spanDescription';
 import {getTimeSpentExplanation} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
 import {SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';

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

@@ -16,13 +16,13 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
 import {SpanDescriptionCell} from 'sentry/views/starfish/components/tableCells/spanDescriptionCell';
-import type {MetricsResponse} from 'sentry/views/starfish/types';
+import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'project.id'
   | 'span.description'
   | 'span.group'

static/app/views/performance/http/httpDomainSummaryPage.tsx

@@ -46,8 +46,8 @@ import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import {getTimeSpentExplanation} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import type {SpanMetricsQueryFilters} from 'sentry/views/starfish/types';
 import {ModuleName, SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';

static/app/views/performance/http/httpLandingPage.tsx

@@ -32,8 +32,8 @@ import * as ModuleLayout from 'sentry/views/performance/moduleLayout';
 import {ModulePageProviders} from 'sentry/views/performance/modulePageProviders';
 import Onboarding from 'sentry/views/performance/onboarding';
 import {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import {ModuleName} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 

static/app/views/performance/http/httpSamplesPanel.tsx

@@ -39,8 +39,8 @@ import {computeAxisMax} from 'sentry/views/starfish/components/chart';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
 import {getTimeSpentExplanation} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import {useIndexedSpans} from 'sentry/views/starfish/queries/useIndexedSpans';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import {useSpanMetricsTopNSeries} from 'sentry/views/starfish/queries/useSpanMetricsTopNSeries';
 import {
   ModuleName,

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

@@ -17,12 +17,12 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {TransactionCell} from 'sentry/views/performance/http/tables/transactionCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
-import type {MetricsResponse} from 'sentry/views/starfish/types';
+import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'project.id'
   | 'transaction'
   | 'transaction.method'

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

@@ -16,12 +16,12 @@ 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 {MetricsResponse} from 'sentry/views/starfish/types';
+import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'project'
   | 'project.id'
   | 'span.domain'

static/app/views/performance/queues/destinationSummary/transactionsTable.tsx

@@ -21,11 +21,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {useQueuesByTransactionQuery} from 'sentry/views/performance/queues/queries/useQueuesByTransactionQuery';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
-import type {MetricsResponse} from 'sentry/views/starfish/types';
+import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'avg_if(span.self_time,span.op,queue.process)'
   | 'count_op(queue.publish)'
   | 'count_op(queue.process)'

static/app/views/performance/queues/messageConsumerSamplesPanel.tsx

@@ -25,7 +25,7 @@ import {MessageSpanSamplesTable} from 'sentry/views/performance/queues/messageSp
 import {useQueuesMetricsQuery} from 'sentry/views/performance/queues/queries/useQueuesMetricsQuery';
 import {computeAxisMax} from 'sentry/views/starfish/components/chart';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
 import {useSampleScatterPlotSeries} from 'sentry/views/starfish/views/spanSummaryPage/sampleList/durationChart/useSampleScatterPlotSeries';
 
 // We're defining our own query filter here, apart from settings.ts because the spans endpoint doesn't accept IN operations

static/app/views/performance/queues/queries/useQueuesTimeSeriesQuery.tsx

@@ -1,13 +1,13 @@
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
-import type {MetricsProperty} from 'sentry/views/starfish/types';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
+import type {SpanMetricsProperty} from 'sentry/views/starfish/types';
 
 type Props = {
   destination?: string;
   enabled?: boolean;
 };
 
-const yAxis: MetricsProperty[] = [
+const yAxis: SpanMetricsProperty[] = [
   'avg_if(span.self_time,span.op,queue.publish)',
   'avg_if(span.self_time,span.op,queue.process)',
   'avg(messaging.message.receive.latency)',

static/app/views/performance/queues/queuesTable.tsx

@@ -21,11 +21,11 @@ import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {useQueuesByDestinationQuery} from 'sentry/views/performance/queues/queries/useQueuesByDestinationQuery';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
-import type {MetricsResponse} from 'sentry/views/starfish/types';
+import type {SpanMetricsResponse} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Row = Pick<
-  MetricsResponse,
+  SpanMetricsResponse,
   | 'avg_if(span.self_time,span.op,queue.process)'
   | 'count_op(queue.publish)'
   | 'count_op(queue.process)'

static/app/views/starfish/queries/useSpanMetricsSeries.spec.tsx → static/app/views/starfish/queries/useSeries.spec.tsx

@@ -9,8 +9,8 @@ import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
-import type {MetricsProperty} from 'sentry/views/starfish/types';
+import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSeries';
+import type {SpanMetricsProperty} from 'sentry/views/starfish/types';
 
 jest.mock('sentry/utils/useLocation');
 jest.mock('sentry/utils/usePageFilters');
@@ -109,7 +109,7 @@ describe('useSpanMetricsSeries', () => {
             'resource.render_blocking_status': 'blocking' as const,
             environment: undefined,
           },
-          yAxis: ['spm()'] as MetricsProperty[],
+          yAxis: ['spm()'] as SpanMetricsProperty[],
         },
       }
     );
@@ -144,7 +144,7 @@ describe('useSpanMetricsSeries', () => {
     const {rerender} = renderHook(({yAxis}) => useSpanMetricsSeries({yAxis}), {
       wrapper: Wrapper,
       initialProps: {
-        yAxis: ['avg(span.self_time)', 'spm()'] as MetricsProperty[],
+        yAxis: ['avg(span.self_time)', 'spm()'] as SpanMetricsProperty[],
       },
     });
 
@@ -154,13 +154,13 @@ describe('useSpanMetricsSeries', () => {
         method: 'GET',
         query: expect.objectContaining({
           interval: '30m',
-          yAxis: ['avg(span.self_time)', 'spm()'] as MetricsProperty[],
+          yAxis: ['avg(span.self_time)', 'spm()'] as SpanMetricsProperty[],
         }),
       })
     );
 
     rerender({
-      yAxis: ['p95(span.self_time)', 'spm()'] as MetricsProperty[],
+      yAxis: ['p95(span.self_time)', 'spm()'] as SpanMetricsProperty[],
     });
 
     await waitFor(() =>
@@ -170,7 +170,7 @@ describe('useSpanMetricsSeries', () => {
           method: 'GET',
           query: expect.objectContaining({
             interval: '1h',
-            yAxis: ['p95(span.self_time)', 'spm()'] as MetricsProperty[],
+            yAxis: ['p95(span.self_time)', 'spm()'] as SpanMetricsProperty[],
           }),
         })
       )
@@ -192,7 +192,7 @@ describe('useSpanMetricsSeries', () => {
     const {result} = renderHook(({yAxis}) => useSpanMetricsSeries({yAxis}), {
       wrapper: Wrapper,
       initialProps: {
-        yAxis: ['spm()'] as MetricsProperty[],
+        yAxis: ['spm()'] as SpanMetricsProperty[],
       },
     });
 
@@ -232,7 +232,10 @@ describe('useSpanMetricsSeries', () => {
     const {result} = renderHook(({yAxis}) => useSpanMetricsSeries({yAxis}), {
       wrapper: Wrapper,
       initialProps: {
-        yAxis: ['http_response_rate(3)', 'http_response_rate(4)'] as MetricsProperty[],
+        yAxis: [
+          'http_response_rate(3)',
+          'http_response_rate(4)',
+        ] as SpanMetricsProperty[],
       },
     });