feat(starfish): add p95 to duration charts, use shared title (#50101)

Three main changes are made here
1. Adds p95 to all duration charts in module -> span sample flow
2. Adds a shared colour variable for p95/p50 line graph colours (colours
were inconsistent, sometimes p50 was yellow, sometimes orange, etc)
3. Adds a shared titles for duration (Sometimes we just wrote
'Duration', sometimes, we wrote 'Duration (P50)')

static/app/views/starfish/colours.tsx

@@ -1,5 +1,6 @@
 import {CHART_PALETTE} from 'sentry/constants/chartPalette';
 
 export const THROUGHPUT_COLOR = CHART_PALETTE[0][0];
-export const DURATION_COLOR = CHART_PALETTE[1][1];
+export const P50_COLOR = CHART_PALETTE[2][2];
+export const P95_COLOR = CHART_PALETTE[2][1];
 export const ERRORS_COLOR = CHART_PALETTE[2][2];

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

@@ -32,6 +32,7 @@ import {PERIOD_REGEX} from 'sentry/views/starfish/utils/dates';
 import {queryToSeries} from 'sentry/views/starfish/utils/queryToSeries';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 import {zeroFillSeries} from 'sentry/views/starfish/utils/zeroFillSeries';
+import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 export type EndpointDataRow = {
   count: number;
@@ -169,7 +170,7 @@ function EndpointDetailBody({row}: EndpointDetailBodyProps) {
       <pre>{row?.domain}</pre>
       <FlexRowContainer>
         <FlexRowItem>
-          <SubHeader>{t('Duration (P50)')}</SubHeader>
+          <SubHeader>{DataTitles.p50}</SubHeader>
           <SubSubHeader>
             <Duration
               seconds={row['p50(span.self_time)'] / 1000}

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

@@ -1,8 +1,8 @@
-import {useTheme} from '@emotion/react';
 import moment from 'moment';
 
 import {Series} from 'sentry/types/echarts';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import {P50_COLOR, P95_COLOR} from 'sentry/views/starfish/colours';
 import Chart from 'sentry/views/starfish/components/chart';
 import {PERIOD_REGEX} from 'sentry/views/starfish/utils/dates';
 import {queryDataToChartData} from 'sentry/views/starfish/utils/queryDataToChartData';
@@ -19,7 +19,6 @@ type Props = {
 };
 
 function DurationChart({groupId, transactionName, spanDescription}: Props) {
-  const theme = useTheme();
   const pageFilter = usePageFilters();
   const {isLoading, data} = useQuerySpansInTransaction({groupId});
 
@@ -69,7 +68,7 @@ function DurationChart({groupId, transactionName, spanDescription}: Props) {
       loading={isLoading || isLoadingSeriesData}
       scatterPlot={isSamplesLoading ? undefined : sampledSpanDataSeries}
       utc={false}
-      chartColors={theme.charts.getColorPalette(4).slice(3, 6)}
+      chartColors={[P50_COLOR, P95_COLOR]}
       stacked
       isLineChart
       definedAxisTicks={4}

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

@@ -1,11 +1,11 @@
 import omit from 'lodash/omit';
 
-import {t} from 'sentry/locale';
 import useRouter from 'sentry/utils/useRouter';
 import DetailPanel from 'sentry/views/starfish/components/detailPanel';
+import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 import DurationChart from 'sentry/views/starfish/views/spanSummaryPage/sampleList/durationChart';
 import SampleInfo from 'sentry/views/starfish/views/spanSummaryPage/sampleList/sampleInfo';
-import SampleTable from 'sentry/views/starfish/views/spanSummaryPage/sampleList/sampleTable';
+import SampleTable from 'sentry/views/starfish/views/spanSummaryPage/sampleList/sampleTable/sampleTable';
 
 type Props = {
   groupId: string;
@@ -28,7 +28,7 @@ function SampleList({groupId, transactionName, spanDescription}: Props) {
     >
       <h3>{transactionName}</h3>
       <SampleInfo groupId={groupId} transactionName={transactionName} />
-      <h5>{t('Duration (p50, p95)')}</h5>
+      <h5>{DataTitles.p50p95}</h5>
       <DurationChart
         groupId={groupId}
         transactionName={transactionName}

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

@@ -28,7 +28,7 @@ function SampleInfo(props: Props) {
   return (
     <BlockContainer>
       <Block title={t('Throughput')}>{spm?.toFixed(2)} / min</Block>
-      <Block title={t('Duration (P50)')}>{p50?.toFixed(2)} ms</Block>
+      <Block title={DataTitles.p50}>{p50?.toFixed(2)} ms</Block>
       <Block title={DataTitles.timeSpent}>
         <Tooltip title={tooltip}>
           {formatPercentage(span_total_time / application_total_time)}

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

@@ -9,7 +9,7 @@ import {Tooltip} from 'sentry/components/tooltip';
 import {Series} from 'sentry/types/echarts';
 import {formatPercentage} from 'sentry/utils/formatters';
 import {useLocation} from 'sentry/utils/useLocation';
-import {DURATION_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
+import {P50_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
 import {SpanDescription} from 'sentry/views/starfish/components/spanDescription';
 import Sparkline, {
   generateHorizontalLine,
@@ -133,7 +133,7 @@ function P50Cell({row}: CellProps) {
     <Fragment>
       {p50Series ? (
         <Sparkline
-          color={DURATION_COLOR}
+          color={P50_COLOR}
           series={p50Series}
           markLine={
             p50 ? generateHorizontalLine(`${p50.toFixed(2)}`, p50, theme) : undefined
@@ -194,7 +194,7 @@ const COLUMN_ORDER: TableColumnHeader[] = [
   },
   {
     key: 'p50(span.self_time)',
-    name: 'Duration (P50)',
+    name: DataTitles.p50,
     width: COL_WIDTH_UNDEFINED,
   },
   {

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

@@ -11,7 +11,7 @@ import Truncate from 'sentry/components/truncate';
 import {Series} from 'sentry/types/echarts';
 import {formatPercentage} from 'sentry/utils/formatters';
 import {useLocation} from 'sentry/utils/useLocation';
-import {DURATION_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
+import {P50_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
 import Sparkline, {
   generateHorizontalLine,
 } from 'sentry/views/starfish/components/sparkline';
@@ -175,7 +175,7 @@ function P50Cell({row}: CellProps) {
     <Fragment>
       {p50Series ? (
         <Sparkline
-          color={DURATION_COLOR}
+          color={P50_COLOR}
           series={p50Series}
           markLine={
             p50 ? generateHorizontalLine(`${p50.toFixed(2)}`, p50, theme) : undefined
@@ -219,7 +219,7 @@ const COLUMN_ORDER: TableColumnHeader[] = [
   },
   {
     key: 'p50(transaction.duration)',
-    name: 'Duration (P50)',
+    name: DataTitles.p50,
     width: COL_WIDTH_UNDEFINED,
   },
   {

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

@@ -8,7 +8,7 @@ import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {useLocation} from 'sentry/utils/useLocation';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import {DURATION_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
+import {P50_COLOR, P95_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
 import {getSegmentLabel} from 'sentry/views/starfish/components/breakdownBar';
 import Chart, {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
@@ -19,6 +19,7 @@ import {
 } from 'sentry/views/starfish/utils/dates';
 import {useSpansQuery} from 'sentry/views/starfish/utils/useSpansQuery';
 import {zeroFillSeries} from 'sentry/views/starfish/utils/zeroFillSeries';
+import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 
 type Props = {
   appliedFilters: AppliedFilters;
@@ -91,6 +92,23 @@ export function SpanTimeCharts({moduleName, appliedFilters}: Props) {
     );
   });
 
+  const p95Series = Object.keys(dataByGroup).map(groupName => {
+    const groupData = dataByGroup[groupName];
+
+    return zeroFillSeries(
+      {
+        seriesName: label ?? 'p95()',
+        data: groupData.map(datum => ({
+          value: datum['p95(span.duration)'],
+          name: datum.interval,
+        })),
+      },
+      moment.duration(1, 'day'),
+      startTime,
+      endTime
+    );
+  });
+
   useSynchronizeCharts([!isLoading]);
 
   return (
@@ -123,11 +141,11 @@ export function SpanTimeCharts({moduleName, appliedFilters}: Props) {
       </ChartsContainerItem>
 
       <ChartsContainerItem>
-        <ChartPanel title={t('Duration (P50)')}>
+        <ChartPanel title={DataTitles.p50p95}>
           <Chart
             statsPeriod="24h"
             height={100}
-            data={p50Series}
+            data={[...p50Series, ...p95Series]}
             start=""
             end=""
             loading={isLoading}
@@ -141,7 +159,7 @@ export function SpanTimeCharts({moduleName, appliedFilters}: Props) {
             definedAxisTicks={4}
             stacked
             isLineChart
-            chartColors={[DURATION_COLOR]}
+            chartColors={[P50_COLOR, P95_COLOR]}
           />
         </ChartPanel>
       </ChartsContainerItem>
@@ -163,6 +181,7 @@ const getQuery = (
   return `SELECT
     divide(count(), multiply(12, 60)) as "spm()",
     quantile(0.50)(exclusive_time) AS "p50(span.duration)",
+    quantile(0.95)(exclusive_time) AS "p95(span.duration)",
     toStartOfInterval(start_timestamp, INTERVAL 1 DAY) as interval
     FROM spans_experimental_starfish
     WHERE greaterOrEquals(start_timestamp, '${start_timestamp}')
@@ -203,7 +222,7 @@ const getEventView = (
   return EventView.fromSavedQuery({
     name: '',
     fields: [''],
-    yAxis: ['spm()', 'p50(span.duration)'],
+    yAxis: ['spm()', 'p50(span.duration)', 'p95(span.duration)'],
     query,
     dataset: DiscoverDatasets.SPANS_METRICS,
     start: pageFilters.datetime.start ?? undefined,

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

@@ -13,7 +13,7 @@ import {Series} from 'sentry/types/echarts';
 import {formatPercentage, getDuration} from 'sentry/utils/formatters';
 import {useLocation} from 'sentry/utils/useLocation';
 import {TableColumnSort} from 'sentry/views/discover/table/types';
-import {DURATION_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
+import {P50_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
 import {FormattedCode} from 'sentry/views/starfish/components/formattedCode';
 import Sparkline, {
   generateHorizontalLine,
@@ -209,7 +209,7 @@ function renderBodyCell(
     );
     return (
       <Sparkline
-        color={DURATION_COLOR}
+        color={P50_COLOR}
         series={row[column.key]}
         width={column.width ? column.width - column.width / 5 : undefined}
         markLine={horizontalLine}
@@ -323,7 +323,7 @@ function getColumns(moduleName: ModuleName): TableColumnHeader[] {
     },
     {
       key: 'p50_trend',
-      name: 'Duration (p50)',
+      name: DataTitles.p50,
       width: 175,
     },
     {