ref(starfish): use starfish field enum (#52657)

static/app/views/starfish/components/spanDescription.tsx

@@ -1,8 +1,11 @@
 import styled from '@emotion/styled';
 
 import {FormattedCode} from 'sentry/views/starfish/components/formattedCode';
+import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import {highlightSql} from 'sentry/views/starfish/utils/highlightSql';
 
+const {SPAN_DESCRIPTION, SPAN_ACTION, SPAN_DOMAIN} = SpanMetricsFields;
+
 type SpanMeta = {
   'span.action': string;
   'span.description': string;
@@ -15,16 +18,16 @@ export function SpanDescription({spanMeta}: {spanMeta: SpanMeta}) {
     return <DatabaseSpanDescription spanMeta={spanMeta} />;
   }
 
-  return <DescriptionWrapper>{spanMeta['span.description']}</DescriptionWrapper>;
+  return <DescriptionWrapper>{spanMeta[SPAN_DESCRIPTION]}</DescriptionWrapper>;
 }
 
 function DatabaseSpanDescription({spanMeta}: {spanMeta: SpanMeta}) {
   return (
     <CodeWrapper>
       <FormattedCode>
-        {highlightSql(spanMeta['span.description'] || '', {
-          action: spanMeta['span.action'] || '',
-          domain: spanMeta['span.domain'] || '',
+        {highlightSql(spanMeta[SPAN_DESCRIPTION] || '', {
+          action: spanMeta[SPAN_ACTION] || '',
+          domain: spanMeta[SPAN_DOMAIN] || '',
         })}
       </FormattedCode>
     </CodeWrapper>

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

@@ -10,12 +10,21 @@ import {ModuleName, SpanMetricsFields} from 'sentry/views/starfish/types';
 import {useWrappedDiscoverQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 import {NULL_SPAN_CATEGORY} from 'sentry/views/starfish/views/webServiceView/spanGroupBreakdownContainer';
 
-const {SPAN_SELF_TIME} = SpanMetricsFields;
+const {
+  SPAN_SELF_TIME,
+  SPAN_DESCRIPTION,
+  SPAN_GROUP,
+  SPAN_OP,
+  SPAN_DOMAIN,
+  SPAN_ACTION,
+  SPAN_MODULE,
+} = SpanMetricsFields;
+
 const SPAN_FILTER_KEYS = [
-  'span.op',
-  'span.domain',
-  'span.action',
-  '!span.module',
+  SPAN_OP,
+  SPAN_DOMAIN,
+  SPAN_ACTION,
+  `!${SPAN_MODULE}`,
   '!span.category',
 ];
 
@@ -86,10 +95,10 @@ function getEventView(
     .join(' ');
 
   const fields = [
-    'span.op',
-    'span.group',
-    'span.description',
-    'span.domain',
+    SPAN_OP,
+    SPAN_GROUP,
+    SPAN_DESCRIPTION,
+    SPAN_DOMAIN,
     'sps()',
     'sps_percent_change()',
     `sum(${SPAN_SELF_TIME})`,
@@ -142,7 +151,7 @@ function buildEventViewQuery(
         // When omitting database spans, explicitly allow `db.redis` spans, because
         // we're not including those spans in the database category
         const categoriesAsideFromDatabase = value.filter(v => v !== 'db');
-        return `(!span.category:db OR span.op:db.redis) !span.category:[${categoriesAsideFromDatabase.join(
+        return `(!span.category:db OR ${SPAN_OP}:db.redis) !span.category:[${categoriesAsideFromDatabase.join(
           ','
         )}]`;
       }
@@ -150,14 +159,14 @@ function buildEventViewQuery(
       return `${key}:${isArray ? `[${value}]` : value}`;
     });
 
-  result.push('has:span.description');
+  result.push(`has:${SPAN_DESCRIPTION}`);
 
   if (moduleName !== ModuleName.ALL) {
-    result.push(`span.module:${moduleName}`);
+    result.push(`${SPAN_MODULE}:${moduleName}`);
   }
 
   if (moduleName === ModuleName.DB) {
-    result.push('!span.op:db.redis');
+    result.push(`!${SPAN_OP}:db.redis`);
   }
 
   if (defined(spanCategory)) {

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

@@ -4,8 +4,12 @@ import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useLocation} from 'sentry/utils/useLocation';
 import {SpanSummaryQueryFilters} from 'sentry/views/starfish/queries/useSpanMetrics';
+import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 
+const {SPAN_OP, SPAN_ACTION, SPAN_DESCRIPTION, SPAN_DOMAIN, SPAN_GROUP} =
+  SpanMetricsFields;
+
 export type SpanMeta = {
   'span.action': string;
   'span.description': string;
@@ -35,7 +39,7 @@ function getEventView(
   return EventView.fromNewQueryWithLocation(
     {
       name: '',
-      query: `span.group:${groupId}${
+      query: `${SPAN_GROUP}:${groupId}${
         queryFilters?.transactionName
           ? ` transaction:${queryFilters?.transactionName}`
           : ''
@@ -44,7 +48,7 @@ function getEventView(
           ? ` transaction.method:${queryFilters?.['transaction.method']}`
           : ''
       }`,
-      fields: ['span.op', 'span.description', 'span.action', 'span.domain', 'count()'], // TODO: Failing to pass a field like `count()` causes an error
+      fields: [SPAN_OP, SPAN_DESCRIPTION, SPAN_ACTION, SPAN_DOMAIN, 'count()'], // TODO: Failing to pass a field like `count()` causes an error
       dataset: DiscoverDatasets.SPANS_METRICS,
       version: 2,
     },

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

@@ -4,8 +4,11 @@ import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useLocation} from 'sentry/utils/useLocation';
 import type {IndexedSpan} from 'sentry/views/starfish/queries/types';
+import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 
+const {SPAN_GROUP} = SpanMetricsFields;
+
 export type SpanMetrics = {
   [metric: string]: number | string;
   'http_error_count()': number;
@@ -52,7 +55,7 @@ function getEventView(
   return EventView.fromNewQueryWithLocation(
     {
       name: '',
-      query: `span.group:${cleanGroupId}${
+      query: `${SPAN_GROUP}:${cleanGroupId}${
         queryFilters?.transactionName
           ? ` transaction:${queryFilters?.transactionName}`
           : ''

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

@@ -10,8 +10,11 @@ import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import type {IndexedSpan} from 'sentry/views/starfish/queries/types';
 import {SpanSummaryQueryFilters} from 'sentry/views/starfish/queries/useSpanMetrics';
+import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 
+const {SPAN_GROUP} = SpanMetricsFields;
+
 export type SpanMetrics = {
   interval: number;
   'p95(span.self_time)': number;
@@ -74,7 +77,7 @@ function getEventView(
   return EventView.fromNewQueryWithLocation(
     {
       name: '',
-      query: `span.group:${cleanGroupId}${
+      query: `${SPAN_GROUP}:${cleanGroupId}${
         queryFilters?.transactionName
           ? ` transaction:${queryFilters?.transactionName}`
           : ''

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

@@ -8,15 +8,11 @@ import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {computeAxisMax} from 'sentry/views/starfish/components/chart';
 import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
-import {
-  SpanIndexedFields,
-  SpanIndexedFieldTypes,
-  SpanMetricsFields,
-} from 'sentry/views/starfish/types';
+import {SpanIndexedFields, SpanIndexedFieldTypes} from 'sentry/views/starfish/types';
 import {getDateConditions} from 'sentry/views/starfish/utils/getDateConditions';
 import {DATE_FORMAT} from 'sentry/views/starfish/utils/useSpansQuery';
 
-const {SPAN_SELF_TIME} = SpanMetricsFields;
+const {SPAN_SELF_TIME, SPAN_GROUP} = SpanIndexedFields;
 
 type Options = {
   groupId: string;
@@ -41,7 +37,7 @@ export const useSpanSamples = (options: Options) => {
   const location = useLocation();
 
   const query = new MutableSearch([
-    `span.group:${groupId}`,
+    `${SPAN_GROUP}:${groupId}`,
     `transaction:${transactionName}`,
     `transaction.method:${transactionMethod}`,
   ]);
@@ -83,9 +79,7 @@ export const useSpanSamples = (options: Options) => {
           ...d,
           timestamp: moment(d.timestamp).format(DATE_FORMAT),
         }))
-        .sort(
-          (a: SpanSample, b: SpanSample) => b['span.self_time'] - a['span.self_time']
-        );
+        .sort((a: SpanSample, b: SpanSample) => b[SPAN_SELF_TIME] - a[SPAN_SELF_TIME]);
     },
     refetchOnWindowFocus: false,
     enabled: Boolean(groupId && transactionName && !isLoadingSeries),

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

@@ -9,7 +9,7 @@ import type {IndexedSpan} from 'sentry/views/starfish/queries/types';
 import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import {useWrappedDiscoverQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 
-const {SPAN_SELF_TIME} = SpanMetricsFields;
+const {SPAN_SELF_TIME, SPAN_GROUP} = SpanMetricsFields;
 
 export type SpanTransactionMetrics = {
   'p50(span.self_time)': number;
@@ -51,7 +51,7 @@ function getEventView(
   const cleanGroupId = span.group.replaceAll('-', '').slice(-16);
 
   const search = new MutableSearch('');
-  search.addFilterValues('span.group', [cleanGroupId]);
+  search.addFilterValues(SPAN_GROUP, [cleanGroupId]);
   search.addFilterValues('transaction.op', ['http.server']);
 
   if (transactions.length > 0) {

static/app/views/starfish/types.tsx

@@ -13,20 +13,24 @@ export enum ModuleName {
 export enum SpanMetricsFields {
   SPAN_OP = 'span.op',
   SPAN_DESCRIPTION = 'span.description',
+  SPAN_MODULE = 'span.module',
   SPAN_ACTION = 'span.action',
   SPAN_DOMAIN = 'span.domain',
+  SPAN_GROUP = 'span.group',
   SPAN_DURATION = 'span.duration',
   SPAN_SELF_TIME = 'span.self_time',
 }
 
 export enum SpanIndexedFields {
   SPAN_SELF_TIME = 'span.self_time',
-  MODULE = 'span.module',
+  SPAN_GROUP = 'span.group',
+  SPAN_MODULE = 'span.module',
+  SPAN_DESCRIPTION = 'span.description',
+  SPAN_OP = 'span.op',
   ID = 'span_id',
-  DESCRIPTION = 'span.description',
-  ACTION = 'span.action',
+  SPAN_ACTION = 'span.action',
   TRANSACTION_ID = 'transaction.id',
-  DOMAIN = 'span.domain',
+  SPAN_DOMAIN = 'span.domain',
   TIMESTAMP = 'timestamp',
   GROUP = 'span.group',
   PROJECT = 'project',
@@ -42,9 +46,9 @@ export enum StarfishFunctions {
 export type SpanIndexedFieldTypes = {
   [SpanIndexedFields.SPAN_SELF_TIME]: number;
   [SpanIndexedFields.TIMESTAMP]: string;
-  [SpanIndexedFields.ACTION]: string;
+  [SpanIndexedFields.SPAN_ACTION]: string;
   [SpanIndexedFields.TRANSACTION_ID]: string;
-  [SpanIndexedFields.DOMAIN]: string;
+  [SpanIndexedFields.SPAN_DOMAIN]: string;
   [SpanIndexedFields.PROJECT]: string;
   [SpanIndexedFields.ID]: string;
 };

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

@@ -43,7 +43,8 @@ import {
   SpanTransactionsTable,
 } from 'sentry/views/starfish/views/spanSummaryPage/spanTransactionsTable';
 
-const {SPAN_SELF_TIME} = SpanMetricsFields;
+const {SPAN_SELF_TIME, SPAN_OP, SPAN_DESCRIPTION, SPAN_ACTION, SPAN_DOMAIN} =
+  SpanMetricsFields;
 
 const DEFAULT_SORT: Sort = {
   kind: 'desc',
@@ -74,10 +75,10 @@ function SpanSummaryPage({params, location}: Props) {
     {group: groupId},
     queryFilter,
     [
-      'span.op',
-      'span.description',
-      'span.action',
-      'span.domain',
+      SPAN_OP,
+      SPAN_DESCRIPTION,
+      SPAN_ACTION,
+      SPAN_DOMAIN,
       'count()',
       'sps()',
       `sum(${SPAN_SELF_TIME})`,
@@ -101,7 +102,7 @@ function SpanSummaryPage({params, location}: Props) {
   useSynchronizeCharts([!areSpanMetricsSeriesLoading]);
 
   const spanMetricsThroughputSeries = {
-    seriesName: span?.['span.op']?.startsWith('db') ? 'Queries' : 'Requests',
+    seriesName: span?.[SPAN_OP]?.startsWith('db') ? 'Queries' : 'Requests',
     data: spanMetricsSeriesData?.['sps()'].data,
   };
 
@@ -153,7 +154,7 @@ function SpanSummaryPage({params, location}: Props) {
                   <StarfishDatePicker />
                 </FilterOptionsContainer>
                 <BlockContainer>
-                  <Block title={t('Operation')}>{span?.['span.op']}</Block>
+                  <Block title={t('Operation')}>{span?.[SPAN_OP]}</Block>
                   <Block
                     title={t('Throughput')}
                     description={t('Throughput of this span per second')}
@@ -168,7 +169,7 @@ function SpanSummaryPage({params, location}: Props) {
                       milliseconds={spanMetrics?.[`p95(${SPAN_SELF_TIME})`]}
                     />
                   </Block>
-                  {span?.['span.op']?.startsWith('http') && (
+                  {span?.[SPAN_OP]?.startsWith('http') && (
                     <Block
                       title={t('5XX Responses')}
                       description={t('5XX responses in this span')}
@@ -190,7 +191,7 @@ function SpanSummaryPage({params, location}: Props) {
                 </BlockContainer>
               </BlockContainer>
 
-              {span?.['span.description'] && (
+              {span?.[SPAN_DESCRIPTION] && (
                 <BlockContainer>
                   <Block>
                     <Panel>
@@ -241,7 +242,7 @@ function SpanSummaryPage({params, location}: Props) {
                     </ChartPanel>
                   </Block>
 
-                  {span?.['span.op']?.startsWith('http') && (
+                  {span?.[SPAN_OP]?.startsWith('http') && (
                     <Block>
                       <ChartPanel title={DataTitles.errorCount}>
                         <Chart
@@ -373,7 +374,7 @@ const getDescriptionLabel = (location: Location, spanMeta: SpanMeta, title?: boo
     return title ? t('Query Summary') : t('Query');
   }
 
-  const spanOp = spanMeta['span.op'];
+  const spanOp = spanMeta[SPAN_OP];
   let label;
   if (spanOp?.startsWith('http')) {
     label = title ? t('URL Request Summary') : t('URL Request');

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

@@ -111,7 +111,7 @@ function DurationChart({
   const sampledSpanDataSeries: Series[] = spans.map(
     ({
       timestamp,
-      'span.self_time': duration,
+      [SPAN_SELF_TIME]: duration,
       'transaction.id': transaction_id,
       span_id,
     }) => ({
@@ -129,7 +129,7 @@ function DurationChart({
   );
 
   const getSample = (timestamp: string, duration: number) => {
-    return spans.find(s => s.timestamp === timestamp && s['span.self_time'] === duration);
+    return spans.find(s => s.timestamp === timestamp && s[SPAN_SELF_TIME] === duration);
   };
 
   const handleChartClick: EChartClickHandler = e => {