feat(insights): minor adjustments to modern frontend overview (#97852)

Some minor changes to the modern frontend overview
- Graph p75 on all overview span charts
- Add p75 into table
- Show `span.duration` instead of `span.self_time` in overview span
charts, it's a little more intuitive for the user to understand vs
self_time, and in practice it's the same for asssets and http client
spans

Author: DominikB2014

static/app/views/insights/common/components/tableCells/renderHeadCell.tsx

@@ -79,7 +79,10 @@ const SORTABLE_FIELDS = new Set([
   'performance_score(measurements.score.total)',
   'count_unique(user)',
   'p50_if(span.duration,is_transaction,equals,true)',
+  'p75_if(span.duration,is_transaction,equals,true)',
+  'p90_if(span.duration,is_transaction,equals,true)',
   'p95_if(span.duration,is_transaction,equals,true)',
+  'p99_if(span.duration,is_transaction,equals,true)',
   'failure_rate_if(is_transaction,equals,true)',
   'sum_if(span.duration,is_transaction,equals,true)',
   'p75(measurements.frames_slow_rate)',

static/app/views/insights/common/components/widgets/overviewSlowAssetsWidget.tsx

@@ -46,8 +46,8 @@ export default function OverviewAssetsByTimeSpentWidget(props: LoadableChartWidg
   const search = new MutableSearch(`has:span.group ${resourceQuery} ${query}`);
   const referrer = Referrer.ASSETS_BY_TIME_SPENT;
   const groupBy = SpanFields.NORMALIZED_DESCRIPTION;
-  const yAxes = 'sum(span.self_time)';
-  const totalTimeField = 'sum(span.self_time)';
+  const yAxes = 'p75(span.duration)';
+  const totalTimeField = 'sum(span.duration)';
 
   const {
     data: assetListData,
@@ -93,6 +93,12 @@ export default function OverviewAssetsByTimeSpentWidget(props: LoadableChartWidg
 
   const colorPalette = theme.chart.getColorPalette(assetSeriesData.length - 1);
 
+  const aliases: Record<string, string> = {};
+
+  assetListData.forEach(item => {
+    aliases[item[groupBy]] = `${yAxes}, ${item[groupBy]}`;
+  });
+
   const visualization = (
     <WidgetVisualizationStates
       isEmpty={!hasData}
@@ -107,6 +113,7 @@ export default function OverviewAssetsByTimeSpentWidget(props: LoadableChartWidg
           (ts, index) =>
             new Line(convertSeriesToTimeseries(ts), {
               color: colorPalette[index],
+              alias: aliases[ts.seriesName],
             })
         ),
         ...props,

static/app/views/insights/common/components/widgets/overviewTimeConsumingRequestsWidget.tsx

@@ -45,7 +45,7 @@ export default function OverviewTimeConsumingRequestsWidget(
   const search = new MutableSearch(`${SpanFields.SPAN_CATEGORY}:http ${query}`);
   const referrer = Referrer.TIME_CONSUMING_REQUESTS;
   const groupBy = SpanFields.SPAN_DOMAIN;
-  const yAxes = `avg(${SpanFields.SPAN_SELF_TIME})`;
+  const yAxes = `p75(${SpanFields.SPAN_DURATION})`;
   const totalTimeField = `sum(${SpanFields.SPAN_SELF_TIME})`;
   const title = t('Network Requests by Time Spent');
 

static/app/views/insights/pages/frontend/frontendOverviewPage.tsx

@@ -225,6 +225,7 @@ function EAPOverviewPage() {
         'project',
         'tpm()',
         'p50_if(span.duration,is_transaction,equals,true)',
+        'p75_if(span.duration,is_transaction,equals,true)',
         'p95_if(span.duration,is_transaction,equals,true)',
         'failure_rate_if(is_transaction,equals,true)',
         ...(displayPerfScore

static/app/views/insights/pages/frontend/frontendOverviewTable.tsx

@@ -32,6 +32,7 @@ type Row = Pick<
   | 'project'
   | 'tpm()'
   | 'p50_if(span.duration,is_transaction,equals,true)'
+  | 'p75_if(span.duration,is_transaction,equals,true)'
   | 'p95_if(span.duration,is_transaction,equals,true)'
   | 'failure_rate_if(is_transaction,equals,true)'
   | 'count_unique(user)'
@@ -45,6 +46,7 @@ type Column = GridColumnHeader<
   | 'project'
   | 'tpm()'
   | 'p50_if(span.duration,is_transaction,equals,true)'
+  | 'p75_if(span.duration,is_transaction,equals,true)'
   | 'p95_if(span.duration,is_transaction,equals,true)'
   | 'failure_rate_if(is_transaction,equals,true)'
   | 'count_unique(user)'
@@ -73,6 +75,11 @@ const COLUMN_ORDER: Column[] = [
     name: t('p50()'),
     width: COL_WIDTH_UNDEFINED,
   },
+  {
+    key: `p75_if(span.duration,is_transaction,equals,true)`,
+    name: t('p75()'),
+    width: COL_WIDTH_UNDEFINED,
+  },
   {
     key: `p95_if(span.duration,is_transaction,equals,true)`,
     name: t('p95()'),
@@ -108,6 +115,7 @@ const SORTABLE_FIELDS = [
   'project',
   'tpm()',
   'p50_if(span.duration,is_transaction,equals,true)',
+  'p75_if(span.duration,is_transaction,equals,true)',
   'p95_if(span.duration,is_transaction,equals,true)',
   'failure_rate_if(is_transaction,equals,true)',
   'count_unique(user)',

static/app/views/insights/pages/frontend/newFrontendOverviewPage.tsx

@@ -135,6 +135,7 @@ export function NewFrontendOverviewPage() {
         'project',
         'tpm()',
         'p50_if(span.duration,is_transaction,equals,true)',
+        'p75_if(span.duration,is_transaction,equals,true)',
         'p95_if(span.duration,is_transaction,equals,true)',
         'failure_rate_if(is_transaction,equals,true)',
         ...(displayPerfScore