fix(starfish): Update useSpanMetrics to check for defined transaction name and transaction method (#52674)

Updates useSpanMetrics to check for defined transaction name and
transaction method to determine if query is enabled. This moves the
enabled check logic into the function. Also constrains param type a bit
tighter. Also fixes a bug where the span summary page uses the wrong
transaction method field.

static/app/views/starfish/queries/useSpanMeta.tsx

@@ -19,7 +19,7 @@ export type SpanMeta = {
 
 export const useSpanMeta = (
   group: string,
-  queryFilters: SpanSummaryQueryFilters = {},
+  queryFilters: SpanSummaryQueryFilters,
   referrer: string = 'span-metrics'
 ) => {
   const location = useLocation();
@@ -34,7 +34,7 @@ export const useSpanMeta = (
 function getEventView(
   groupId,
   location: Location,
-  queryFilters?: SpanSummaryQueryFilters
+  queryFilters: SpanSummaryQueryFilters
 ) {
   return EventView.fromNewQueryWithLocation(
     {

static/app/views/starfish/queries/useSpanMetrics.tsx

@@ -24,20 +24,22 @@ export type SpanSummaryQueryFilters = {
 };
 
 export const useSpanMetrics = (
-  span?: Pick<IndexedSpan, 'group'>,
-  queryFilters: SpanSummaryQueryFilters = {},
+  span: Pick<IndexedSpan, 'group'>,
+  queryFilters: SpanSummaryQueryFilters,
   fields: string[] = [],
-  referrer: string = 'span-metrics',
-  enabled: boolean = true
+  referrer: string = 'span-metrics'
 ) => {
   const location = useLocation();
   const eventView = span ? getEventView(span, location, queryFilters, fields) : undefined;
 
+  const enabled =
+    Boolean(span?.group) && Object.values(queryFilters).every(value => Boolean(value));
+
   // TODO: Add referrer
   const result = useSpansQuery<SpanMetrics[]>({
     eventView,
     initialData: [],
-    enabled: Boolean(span) && enabled,
+    enabled,
     referrer,
   });
 

static/app/views/starfish/queries/useSpanMetricsSeries.tsx

@@ -25,7 +25,7 @@ export type SpanMetrics = {
 
 export const useSpanMetricsSeries = (
   span: Pick<IndexedSpan, 'group'>,
-  queryFilters: SpanSummaryQueryFilters = {},
+  queryFilters: SpanSummaryQueryFilters,
   yAxis: string[] = [],
   referrer = 'span-metrics-series'
 ) => {
@@ -70,7 +70,7 @@ function getEventView(
   location: Location,
   pageFilters: PageFilters,
   yAxis: string[],
-  queryFilters?: SpanSummaryQueryFilters
+  queryFilters: SpanSummaryQueryFilters
 ) {
   const cleanGroupId = span.group.replaceAll('-', '').slice(-16);
 

static/app/views/starfish/views/spanSummaryPage/index.tsx

@@ -29,7 +29,11 @@ import DurationCell from 'sentry/views/starfish/components/tableCells/durationCe
 import ThroughputCell from 'sentry/views/starfish/components/tableCells/throughputCell';
 import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import {SpanMeta} from 'sentry/views/starfish/queries/useSpanMeta';
-import {SpanMetrics, useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
+import {
+  SpanMetrics,
+  SpanSummaryQueryFilters,
+  useSpanMetrics,
+} from 'sentry/views/starfish/queries/useSpanMetrics';
 import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
 import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import formatThroughput from 'sentry/views/starfish/utils/chartValueFormatters/formatThroughput';
@@ -60,9 +64,9 @@ function SpanSummaryPage({params, location}: Props) {
   const {groupId} = params;
   const {transaction, transactionMethod, endpoint, endpointMethod} = location.query;
 
-  const queryFilter = endpoint
-    ? {transactionName: endpoint, 'transaction.method': transactionMethod}
-    : undefined;
+  const queryFilter: SpanSummaryQueryFilters = endpoint
+    ? {transactionName: endpoint, 'transaction.method': endpointMethod}
+    : {};
   const sort =
     fromSorts(location.query[QueryParameterNames.SORT]).filter(isAValidSort)[0] ??
     DEFAULT_SORT; // We only allow one sort on this table in this view

static/app/views/starfish/views/spanSummaryPage/sampleList/durationChart/index.tsx

@@ -74,8 +74,7 @@ function DurationChart({
     {group: groupId},
     {transactionName, 'transaction.method': transactionMethod},
     [`p95(${SPAN_SELF_TIME})`, SPAN_OP],
-    'span-summary-panel-samples-table-p95',
-    Boolean(groupId && transactionName && transactionMethod)
+    'span-summary-panel-samples-table-p95'
   );
 
   const p95 = spanMetrics?.[`p95(${SPAN_SELF_TIME})`] || 0;

static/app/views/starfish/views/spanSummaryPage/sampleList/sampleInfo/index.tsx

@@ -29,8 +29,7 @@ function SampleInfo(props: Props) {
       `p95(${SPAN_SELF_TIME})`,
       'time_spent_percentage(local)',
     ],
-    'span-summary-panel-metrics',
-    Boolean(groupId && transactionName && transactionMethod)
+    'span-summary-panel-metrics'
   );
 
   const style: CSSProperties = {

static/app/views/starfish/views/spanSummaryPage/sampleList/sampleTable/sampleTable.tsx

@@ -36,8 +36,7 @@ function SampleTable({
     {group: groupId},
     {transactionName, 'transaction.method': transactionMethod},
     [`p95(${SPAN_SELF_TIME})`, SPAN_OP],
-    'span-summary-panel-samples-table-p95',
-    Boolean(groupId && transactionName && transactionMethod)
+    'span-summary-panel-samples-table-p95'
   );
   const organization = useOrganization();