feat(nextjs-insights): add avg & p95 duration to navigations table (#91708)

Author: shellmayr

static/app/views/insights/pages/platform/shared/pagesTable.tsx

@@ -36,11 +36,13 @@ type SortableField =
   | 'failure_rate()'
   | 'sum(span.duration)'
   | 'avg(span.duration)'
+  | 'p95(span.duration)'
   | 'performance_score(measurements.score.total)';
 
 interface TableData {
   avgDuration: number;
   errorRate: number;
+  p95: number;
   page: string;
   pageViews: number;
   projectID: number;
@@ -54,6 +56,13 @@ const errorRateColorThreshold = {
   warning: 0.05,
 } as const;
 
+const getP95Threshold = (avg: number) => {
+  return {
+    error: avg * 3,
+    warning: avg * 2,
+  };
+};
+
 const getCellColor = (value: number, thresholds: Record<string, number>) => {
   return Object.entries(thresholds).find(([_, threshold]) => value >= threshold)?.[0] as
     | 'errorText'
@@ -80,6 +89,8 @@ const pageloadColumnOrder: Array<GridColumnOrder<SortableField>> = [
 const navigationColumnOrder: Array<GridColumnOrder<SortableField>> = [
   {key: 'transaction', name: t('Page'), width: COL_WIDTH_UNDEFINED},
   {key: 'count()', name: t('Navigations'), width: 132},
+  {key: 'avg(span.duration)', name: t('Avg'), width: 90},
+  {key: 'p95(span.duration)', name: t('P95'), width: 90},
   {key: 'sum(span.duration)', name: t('Time Spent'), width: 110},
 ];
 
@@ -169,6 +180,7 @@ export function PagesTable({spanOperationFilter}: PagesTableProps) {
         'count()',
         'sum(span.duration)',
         'avg(span.duration)',
+        'p95(span.duration)',
         'performance_score(measurements.score.total)',
         'project.id',
       ],
@@ -195,6 +207,7 @@ export function PagesTable({spanOperationFilter}: PagesTableProps) {
       errorRate: span['failure_rate()'],
       totalTime: span['sum(span.duration)'],
       avgDuration: span['avg(span.duration)'],
+      p95: span['p95(span.duration)'],
       spanOp: span['span.op'],
       projectID: span['project.id'],
       'performance_score(measurements.score.total)':
@@ -368,6 +381,18 @@ const BodyCell = memo(function PagesBodyCell({
     }
     case 'sum(span.duration)':
       return <Duration>{getDuration(dataRow.totalTime / 1000, 2, true)}</Duration>;
+    case 'avg(span.duration)': {
+      return <Duration>{getDuration(dataRow.avgDuration / 1000, 2, true)}</Duration>;
+    }
+    case 'p95(span.duration)': {
+      const thresholds = getP95Threshold(dataRow.avgDuration);
+      const color = getCellColor(dataRow.p95, thresholds);
+      return (
+        <ColoredValue color={color}>
+          {getDuration(dataRow.p95 / 1000, 2, true)}
+        </ColoredValue>
+      );
+    }
     default:
       return <div />;
   }