feat(starfish): Updates wsv and endpoint overview to use average (#53649)

Updates wsv and endpoint overview to use average

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

@@ -34,7 +34,7 @@ type Keys =
   | 'profile_id'
   | 'timestamp'
   | 'transaction.duration'
-  | 'p95_comparison'
+  | 'avg_comparison'
   | 'span_ops_breakdown.relative'
   | 'http.status_code'
   | 'transaction.status';
@@ -102,8 +102,8 @@ export function TransactionSamplesTable({queryConditions, sampleFilter}: Props)
             width: 100,
           } as TableColumnHeader,
           {
-            key: 'p95_comparison',
-            name: 'Compared to P95',
+            key: 'avg_comparison',
+            name: 'Compared to Average',
             width: 100,
           } as TableColumnHeader,
         ]
@@ -132,7 +132,7 @@ export function TransactionSamplesTable({queryConditions, sampleFilter}: Props)
     useErrorSamples(eventView);
 
   function renderHeadCell(column: GridColumnHeader): React.ReactNode {
-    if (column.key === 'p95_comparison' || column.key === 'transaction.duration') {
+    if (column.key === 'avg_comparison' || column.key === 'transaction.duration') {
       return (
         <TextAlignRight>
           <OverflowEllipsisTextContainer>{column.name}</OverflowEllipsisTextContainer>
@@ -187,12 +187,12 @@ export function TransactionSamplesTable({queryConditions, sampleFilter}: Props)
       return <DateTime date={row[column.key]} year timeZone seconds />;
     }
 
-    if (column.key === 'p95_comparison') {
+    if (column.key === 'avg_comparison') {
       return (
         <DurationComparisonCell
           duration={row['transaction.duration']}
           compareToDuration={
-            (aggregatesData?.['p95(transaction.duration)'] as number) ?? 0
+            (aggregatesData?.['avg(transaction.duration)'] as number) ?? 0
           }
         />
       );

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

@@ -60,6 +60,7 @@ export default function useSlowMedianFastSamplesQuery(eventView: EventView) {
   const eventViewAggregates = eventView.clone().withColumns([
     {kind: 'function', function: ['p50', 'transaction.duration', undefined, undefined]},
     {kind: 'function', function: ['p95', 'transaction.duration', undefined, undefined]},
+    {kind: 'function', function: ['avg', 'transaction.duration', undefined, undefined]},
   ]);
 
   const {isLoading: isLoadingAgg, data: aggregatesData} = useDiscoverQuery({

static/app/views/starfish/utils/generatePerformanceEventView.tsx

@@ -122,7 +122,7 @@ function generateWebServiceSavedQuery(location: Location) {
     'transaction',
     'http.method',
     'tps()',
-    'p95(transaction.duration)',
+    'avg(transaction.duration)',
     'http_error_count()',
     'time_spent_percentage()',
     'sum(transaction.duration)',

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

@@ -407,6 +407,7 @@ const BlockWrapper = styled('div')`
   padding-right: ${space(4)};
   flex: 1;
   min-width: 0;
+  word-break: break-word;
 `;
 
 const DescriptionTitle = styled('h4')`

static/app/views/starfish/views/webServiceView/endpointList.tsx

@@ -34,7 +34,7 @@ import {DataTitles} from 'sentry/views/starfish/views/spans/types';
 const COLUMN_TITLES = [
   t('Endpoint'),
   DataTitles.throughput,
-  DataTitles.p95,
+  DataTitles.avg,
   DataTitles.errorCount,
   DataTitles.timeSpent,
 ];
@@ -157,7 +157,7 @@ function EndpointList({eventView, location, organization, setError}: Props) {
             'equation|(percentile_range(transaction.duration,0.95,lessOrEquals'
           )
         ) {
-          deltaColumnMap['p95()'] = col;
+          deltaColumnMap['avg()'] = col;
         }
       });
     }

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

@@ -31,7 +31,7 @@ import usePageFilters from 'sentry/utils/usePageFilters';
 import withApi from 'sentry/utils/withApi';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
 import {SidebarSpacer} from 'sentry/views/performance/transactionSummary/utils';
-import {ERRORS_COLOR, P95_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
+import {AVG_COLOR, ERRORS_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
 import Chart, {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import StarfishDatePicker from 'sentry/views/starfish/components/datePicker';
 import {TransactionSamplesTable} from 'sentry/views/starfish/components/samplesTable/transactionSamplesTable';
@@ -91,7 +91,7 @@ export default function EndpointOverview() {
     id: undefined,
     name: t('Endpoint Overview'),
     query: query.formatString(),
-    fields: ['tps()', 'p95(transaction.duration)', 'http_error_count()'],
+    fields: ['tps()', 'avg(transaction.duration)', 'http_error_count()'],
     dataset: DiscoverDatasets.METRICS,
     start: pageFilter.selection.datetime.start ?? undefined,
     end: pageFilter.selection.datetime.end ?? undefined,
@@ -126,7 +126,7 @@ export default function EndpointOverview() {
         start={eventView.start}
         end={eventView.end}
         organization={organization}
-        yAxis={['tps()', 'http_error_count()', 'p95(transaction.duration)']}
+        yAxis={['tps()', 'http_error_count()', 'avg(transaction.duration)']}
         dataset={DiscoverDatasets.METRICS}
       >
         {({loading, results}) => {
@@ -142,13 +142,11 @@ export default function EndpointOverview() {
           return (
             <Fragment>
               <Header>
-                <ChartLabel>{DataTitles.p95}</ChartLabel>
+                <ChartLabel>{DataTitles.avg}</ChartLabel>
                 <QuestionTooltip
                   size="sm"
                   position="right"
-                  title={t(
-                    '95% of requests in the selected period have a lower duration than this value'
-                  )}
+                  title={t('The average duration of requests in the selected period')}
                 />
               </Header>
               <ChartSummaryValue
@@ -157,7 +155,7 @@ export default function EndpointOverview() {
                   defined(totals)
                     ? t(
                         '%sms',
-                        (totals.data[0]['p95(transaction.duration)'] as number).toFixed(2)
+                        (totals.data[0]['avg(transaction.duration)'] as number).toFixed(2)
                       )
                     : undefined
                 }
@@ -176,7 +174,7 @@ export default function EndpointOverview() {
                 disableXAxis
                 definedAxisTicks={2}
                 isLineChart
-                chartColors={[P95_COLOR]}
+                chartColors={[AVG_COLOR]}
                 tooltipFormatterOptions={{
                   valueFormatter: value =>
                     tooltipFormatterUsingAggregateOutputType(value, 'duration'),

static/app/views/starfish/views/webServiceView/spanGroupBreakdownContainer.tsx

@@ -44,6 +44,7 @@ export enum DataDisplayType {
   DURATION_P95 = 'duration_p95',
   CUMULATIVE_DURATION = 'cumulative_duration',
   PERCENTAGE = 'percentage',
+  DURATION_AVG = 'duration_avg',
 }
 
 export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Props) {
@@ -54,9 +55,9 @@ export function SpanGroupBreakdownContainer({transaction, transactionMethod}: Pr
   const theme = useTheme();
 
   const options: SelectOption<DataDisplayType>[] = [
-    {label: 'Percentages', value: DataDisplayType.PERCENTAGE},
-    {label: 'Duration (p95)', value: DataDisplayType.DURATION_P95},
-    {label: 'Total Duration', value: DataDisplayType.CUMULATIVE_DURATION},
+    {label: t('Percentages'), value: DataDisplayType.PERCENTAGE},
+    {label: t('Average Duration'), value: DataDisplayType.DURATION_AVG},
+    {label: t('Total Duration'), value: DataDisplayType.CUMULATIVE_DURATION},
   ];
 
   const [dataDisplayType, setDataDisplayType] = useState<DataDisplayType>(
@@ -207,12 +208,14 @@ const getEventView = (
   const yAxis =
     dataDisplayType === DataDisplayType.DURATION_P95
       ? `p95(${SPAN_SELF_TIME})`
+      : dataDisplayType === DataDisplayType.DURATION_AVG
+      ? `avg(${SPAN_SELF_TIME})`
       : `sum(${SPAN_SELF_TIME})`;
 
   return EventView.fromNewQueryWithPageFilters(
     {
       name: '',
-      fields: [`sum(${SPAN_SELF_TIME})`, `p95(${SPAN_SELF_TIME})`, ...groups],
+      fields: [`sum(${SPAN_SELF_TIME})`, `avg(${SPAN_SELF_TIME})`, ...groups],
       yAxis: getTimeseries ? [yAxis] : [],
       query,
       dataset: DiscoverDatasets.SPANS_METRICS,

static/app/views/starfish/views/webServiceView/starfishView.tsx

@@ -21,7 +21,7 @@ import {formatRate} from 'sentry/utils/formatters';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import withApi from 'sentry/utils/withApi';
-import {P95_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
+import {AVG_COLOR, THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
 import Chart, {useSynchronizeCharts} from 'sentry/views/starfish/components/chart';
 import MiniChartPanel from 'sentry/views/starfish/components/miniChartPanel';
 import {STARFISH_CHART_INTERVAL_FIDELITY} from 'sentry/views/starfish/utils/constants';
@@ -62,7 +62,7 @@ export function StarfishView(props: BaseStarfishViewProps) {
         start={eventView.start}
         end={eventView.end}
         organization={organization}
-        yAxis={['tps()', 'http_error_count()', 'p95(transaction.duration)']}
+        yAxis={['tps()', 'http_error_count()', 'avg(transaction.duration)']}
         dataset={DiscoverDatasets.METRICS}
       >
         {({loading, results}) => {
@@ -90,7 +90,7 @@ export function StarfishView(props: BaseStarfishViewProps) {
 
           return (
             <Fragment>
-              <MiniChartPanel title={DataTitles.p95}>
+              <MiniChartPanel title={DataTitles.avg}>
                 <Chart
                   height={71}
                   data={[percentileData]}
@@ -104,7 +104,7 @@ export function StarfishView(props: BaseStarfishViewProps) {
                   }}
                   definedAxisTicks={2}
                   isLineChart
-                  chartColors={[P95_COLOR]}
+                  chartColors={[AVG_COLOR]}
                   tooltipFormatterOptions={{
                     valueFormatter: value =>
                       tooltipFormatterUsingAggregateOutputType(value, 'duration'),