feat(starfish): Cleanup (#50957)

A bunch of little things done here.
1. Remove the `time spent` info on the span sample sidebar
2. Use `Data titles` in a few more places
3. Ensure throughput charts and duration charts display units in the
tooltip.

Author: DominikB2014

static/app/utils/discover/fields.tsx

@@ -7,6 +7,7 @@ import {
   SESSIONS_FIELDS,
   SESSIONS_OPERATIONS,
 } from 'sentry/views/dashboards/widgetBuilder/releaseWidget/fields';
+import {STARFISH_FIELDS} from 'sentry/views/starfish/components/chart';
 
 import {
   AGGREGATION_FIELDS,
@@ -1026,6 +1027,10 @@ export function aggregateFunctionOutputType(
     return SESSIONS_FIELDS[firstArg].type as AggregationOutputType;
   }
 
+  if (firstArg && STARFISH_FIELDS[firstArg]) {
+    return STARFISH_FIELDS[firstArg].outputType;
+  }
+
   // If the function is an inherit type it will have a field as
   // the first parameter and we can use that to get the type.
   const fieldDef = getFieldDefinition(firstArg ?? '');

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

@@ -35,14 +35,21 @@ import {
   getDurationUnit,
   tooltipFormatter,
 } from 'sentry/utils/discover/charts';
-import {aggregateOutputType} from 'sentry/utils/discover/fields';
+import {aggregateOutputType, AggregationOutputType} from 'sentry/utils/discover/fields';
 import {DAY, HOUR} from 'sentry/utils/formatters';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
+import {SpanMetricsFields} from 'sentry/views/starfish/types';
 import {getDateFilters} from 'sentry/views/starfish/utils/getDateFilters';
 
 const STARFISH_CHART_GROUP = 'starfish_chart_group';
 
+export const STARFISH_FIELDS: Record<string, {outputType: AggregationOutputType}> = {
+  [SpanMetricsFields.SPAN_DURATION]: {
+    outputType: 'duration',
+  },
+};
+
 type Props = {
   data: Series[];
   end: DateString;

static/app/views/starfish/components/samplesTable/transactionSamplesTable.tsx

@@ -22,6 +22,7 @@ import {
   TextAlignLeft,
   TextAlignRight,
 } from 'sentry/views/starfish/components/textAlign';
+import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 type Keys =
   | 'id'
@@ -55,7 +56,7 @@ const COLUMN_ORDER: TableColumnHeader[] = [
   },
   {
     key: 'transaction.duration',
-    name: 'Duration',
+    name: DataTitles.duration,
     width: 100,
   },
   {

static/app/views/starfish/types.tsx

@@ -4,3 +4,11 @@ export enum ModuleName {
   NONE = 'none',
   ALL = '',
 }
+
+export enum SpanMetricsFields {
+  SPAN_OP = 'span.op',
+  SPAN_DESCRIPTION = 'span.description',
+  SPAN_ACTION = 'span.action',
+  SPAN_DOMAIN = 'span.domain',
+  SPAN_DURATION = 'span.duration',
+}

static/app/views/starfish/utils/chartValueFormatters/formatThroughput.ts

@@ -0,0 +1,8 @@
+import {t} from 'sentry/locale';
+
+const formatThroughput = (throughputPerSecond: number = -1) => {
+  const throughput = throughputPerSecond === -1 ? '--' : throughputPerSecond.toFixed(2);
+  return `${throughput} / ${t('s')}`;
+};
+
+export default formatThroughput;

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

@@ -24,6 +24,7 @@ import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpe
 import {useSpanMeta} from 'sentry/views/starfish/queries/useSpanMeta';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
 import {useSpanMetricsSeries} from 'sentry/views/starfish/queries/useSpanMetricsSeries';
+import formatThroughput from 'sentry/views/starfish/utils/chartValueFormatters/formatThroughput';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import {SampleList} from 'sentry/views/starfish/views/spanSummaryPage/sampleList';
 import {SpanTransactionsTable} from 'sentry/views/starfish/views/spanSummaryPage/spanTransactionsTable';
@@ -134,6 +135,9 @@ function SpanSummaryPage({params, location}: Props) {
                         chartColors={[THROUGHPUT_COLOR]}
                         isLineChart
                         definedAxisTicks={4}
+                        tooltipFormatterOptions={{
+                          valueFormatter: value => formatThroughput(value),
+                        }}
                       />
                     </ChartPanel>
                   </Block>

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

@@ -1,6 +1,5 @@
 import DurationCell from 'sentry/views/starfish/components/tableCells/durationCell';
 import ThroughputCell from 'sentry/views/starfish/components/tableCells/throughputCell';
-import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import {useSpanMetrics} from 'sentry/views/starfish/queries/useSpanMetrics';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import {Block, BlockContainer} from 'sentry/views/starfish/views/spanSummaryPage';
@@ -28,12 +27,6 @@ function SampleInfo(props: Props) {
       <Block title={DataTitles.p95}>
         <DurationCell milliseconds={spanMetrics?.['p95(span.duration)']} />
       </Block>
-      <Block title={DataTitles.timeSpent}>
-        <TimeSpentCell
-          timeSpentPercentage={spanMetrics?.['time_spent_percentage(local)']}
-          totalSpanTime={spanMetrics?.['sum(span.duration)']}
-        />
-      </Block>
     </BlockContainer>
   );
 }

static/app/views/starfish/views/spans/spanTimeCharts.tsx

@@ -15,6 +15,7 @@ import {ERRORS_COLOR, P95_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/c
 import Chart, {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
 import {ModuleName} from 'sentry/views/starfish/types';
+import formatThroughput from 'sentry/views/starfish/utils/chartValueFormatters/formatThroughput';
 import {getDateFilters} from 'sentry/views/starfish/utils/getDateFilters';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 import {zeroFillSeries} from 'sentry/views/starfish/utils/zeroFillSeries';
@@ -154,7 +155,7 @@ function ThroughputChart({moduleName, filters}: ChartProps): JSX.Element {
       isLineChart
       chartColors={[THROUGHPUT_COLOR]}
       tooltipFormatterOptions={{
-        valueFormatter: value => `${value.toFixed(3)} / ${t('sec')}`,
+        valueFormatter: value => formatThroughput(value),
       }}
     />
   );

static/app/views/starfish/views/spans/types.tsx

@@ -10,13 +10,15 @@ export type DataKey =
   | 'p50'
   | 'p95'
   | 'throughput'
+  | 'duration'
   | 'errorCount';
 
 export const DataTitles: Record<DataKey, string> = {
   timeSpent: t('Time Spent'),
   p50p95: t('Duration (P50, P95)'),
   p50: t('Duration (P50)'),
   p95: t('Duration (P95)'),
+  duration: t('Duration'),
   errorCount: t('5XX Responses'),
   throughput: t('Throughput'),
 };

static/app/views/starfish/views/webServiceView/endpointOverview/index.tsx

@@ -27,6 +27,7 @@ import {ERRORS_COLOR, P95_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/c
 import Chart from 'sentry/views/starfish/components/chart';
 import {TransactionSamplesTable} from 'sentry/views/starfish/components/samplesTable/transactionSamplesTable';
 import {ModuleName} from 'sentry/views/starfish/types';
+import formatThroughput from 'sentry/views/starfish/utils/chartValueFormatters/formatThroughput';
 import SpansTable from 'sentry/views/starfish/views/spans/spansTable';
 import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import IssuesTable from 'sentry/views/starfish/views/webServiceView/endpointOverview/issuesTable';
@@ -111,7 +112,7 @@ export default function EndpointOverview() {
           return (
             <Fragment>
               <Header>
-                <ChartLabel>{t('Throughput Per Second')}</ChartLabel>
+                <ChartLabel>{DataTitles.throughput}</ChartLabel>
               </Header>
               <ChartSummaryValue
                 isLoading={isTotalsLoading}
@@ -140,7 +141,7 @@ export default function EndpointOverview() {
                   bottom: '0',
                 }}
                 tooltipFormatterOptions={{
-                  valueFormatter: value => t('%s/sec', value.toFixed(2)),
+                  valueFormatter: value => formatThroughput(value),
                 }}
               />
               <SidebarSpacer />