feat(browser-starfish): fetch real data for content length (#58174)

We are now fetching the actual content length size in the resource
module page.
<img width="840" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/2e2fef6b-baef-464d-9340-0626d954da71">

The only hardcoded data on this page is now the `is compressed` column.

static/app/views/performance/browser/resources/resourceTable.tsx

@@ -16,15 +16,22 @@ import {useResourcesQuery} from 'sentry/views/performance/browser/resources/util
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
 import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell';
-import {SpanMetricsField} from 'sentry/views/starfish/types';
+import {SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
 
-const {SPAN_DESCRIPTION, RESOURCE_RENDER_BLOCKING_STATUS, SPAN_OP, SPAN_SELF_TIME} =
-  SpanMetricsField;
+const {
+  SPAN_DESCRIPTION,
+  RESOURCE_RENDER_BLOCKING_STATUS,
+  SPAN_OP,
+  SPAN_SELF_TIME,
+  HTTP_RESPONSE_CONTENT_LENGTH,
+} = SpanMetricsField;
+
+const {SPM} = SpanFunction;
 
 type Row = {
+  'avg(http.response_content_length)': number;
   'avg(span.self_time)': number;
   'http.decoded_response_content_length': number;
-  'http.response_content_length': number;
   'resource.render_blocking_status': string;
   'span.description': string;
   'span.domain': string;
@@ -48,24 +55,24 @@ function ResourceTable({sort}: Props) {
     {key: SPAN_OP, width: COL_WIDTH_UNDEFINED, name: 'Type'},
     {key: `avg(${SPAN_SELF_TIME})`, width: COL_WIDTH_UNDEFINED, name: 'Avg Duration'},
     {
-      key: 'spm()',
+      key: `${SPM}()`,
       width: COL_WIDTH_UNDEFINED,
-      name: 'Throughput',
+      name: t('Throughput'),
     },
     {
-      key: 'http.response_content_length',
+      key: `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
       width: COL_WIDTH_UNDEFINED,
-      name: 'Resource size',
+      name: t('Avg Resource size'),
     },
     {
       key: RESOURCE_RENDER_BLOCKING_STATUS,
       width: COL_WIDTH_UNDEFINED,
-      name: 'Render blocking',
+      name: t('Render blocking'),
     },
     {
       key: 'http.decoded_response_content_length',
       width: COL_WIDTH_UNDEFINED,
-      name: 'Uncompressed',
+      name: t('Uncompressed'),
     },
   ];
   const tableData: Row[] = data.length
@@ -74,7 +81,6 @@ function ResourceTable({sort}: Props) {
         'http.decoded_response_content_length': Math.floor(
           Math.random() * (1000 - 500) + 500
         ),
-        'http.response_content_length': Math.floor(Math.random() * (500 - 50) + 50),
       }))
     : [];
 
@@ -90,7 +96,7 @@ function ResourceTable({sort}: Props) {
     if (key === 'spm()') {
       return <ThroughputCell rate={row[key] * 60} unit={RateUnits.PER_SECOND} />;
     }
-    if (key === 'http.response_content_length') {
+    if (key === 'avg(http.response_content_length)') {
       return <FileSize bytes={row[key]} />;
     }
     if (key === `avg(span.self_time)`) {
@@ -109,10 +115,10 @@ function ResourceTable({sort}: Props) {
       return <span>{opName}</span>;
     }
     if (key === 'http.decoded_response_content_length') {
-      const isCompressed =
-        row['http.response_content_length'] !==
+      const isUncompressed =
+        row['http.response_content_length'] ===
         row['http.decoded_response_content_length'];
-      return <span>{isCompressed ? t('true') : t('false')}</span>;
+      return <span>{isUncompressed ? t('true') : t('false')}</span>;
     }
     return <span>{row[key]}</span>;
   };

static/app/views/performance/browser/resources/utils/useResourceSort.ts

@@ -4,13 +4,18 @@ import {useLocation} from 'sentry/utils/useLocation';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
-const {SPAN_SELF_TIME, SPAN_DESCRIPTION} = SpanMetricsField;
+const {SPAN_SELF_TIME, SPAN_DESCRIPTION, HTTP_RESPONSE_CONTENT_LENGTH} = SpanMetricsField;
 
 type Query = {
   sort?: string;
 };
 
-const SORTABLE_FIELDS = [`avg(${SPAN_SELF_TIME})`, SPAN_DESCRIPTION, 'spm()'] as const;
+const SORTABLE_FIELDS = [
+  `avg(${SPAN_SELF_TIME})`,
+  SPAN_DESCRIPTION,
+  'spm()',
+  `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
+] as const;
 
 export type ValidSort = Sort & {
   field: (typeof SORTABLE_FIELDS)[number];

static/app/views/performance/browser/resources/utils/useResourcesQuery.ts

@@ -15,6 +15,7 @@ const {
   SPAN_OP,
   SPAN_SELF_TIME,
   RESOURCE_RENDER_BLOCKING_STATUS,
+  HTTP_RESPONSE_CONTENT_LENGTH,
 } = SpanMetricsField;
 
 export const useResourcesQuery = ({sort}: {sort: ValidSort}) => {
@@ -49,6 +50,7 @@ export const useResourcesQuery = ({sort}: {sort: ValidSort}) => {
         SPAN_GROUP,
         RESOURCE_RENDER_BLOCKING_STATUS,
         SPAN_DOMAIN,
+        `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
       ],
       name: 'Resource module - resource table',
       query: queryConditions.join(' '),
@@ -77,6 +79,9 @@ export const useResourcesQuery = ({sort}: {sort: ValidSort}) => {
       | 'non-blocking'
       | 'blocking',
     [SPAN_DOMAIN]: row[SPAN_DOMAIN][0]?.toString(),
+    [`avg(http.response_content_length)`]: row[
+      `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`
+    ] as number,
   }));
 
   return {...result, data: data || []};

static/app/views/starfish/components/tableCells/renderHeadCell.tsx

@@ -23,7 +23,7 @@ type Options = {
 
 const DEFAULT_SORT_PARAMETER_NAME = 'sort';
 
-const {SPAN_SELF_TIME} = SpanMetricsField;
+const {SPAN_SELF_TIME, HTTP_RESPONSE_CONTENT_LENGTH} = SpanMetricsField;
 const {TIME_SPENT_PERCENTAGE, SPS, SPM, HTTP_ERROR_COUNT} = SpanFunction;
 
 export const SORTABLE_FIELDS = new Set([
@@ -37,6 +37,7 @@ export const SORTABLE_FIELDS = new Set([
   `${SPM}()`,
   `${TIME_SPENT_PERCENTAGE}()`,
   `${HTTP_ERROR_COUNT}()`,
+  `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
 ]);
 
 export const renderHeadCell = ({column, location, sort, sortParameterName}: Options) => {

static/app/views/starfish/types.tsx

@@ -27,6 +27,7 @@ export enum SpanMetricsField {
   SPAN_SELF_TIME = 'span.self_time',
   PROJECT_ID = 'project.id',
   RESOURCE_RENDER_BLOCKING_STATUS = 'resource.render_blocking_status',
+  HTTP_RESPONSE_CONTENT_LENGTH = 'http.response_content_length',
 }
 
 export type SpanNumberFields = 'span.self_time' | 'span.duration';