fix(browser-starfish): minor ui improvements resource module (#60528)

1. Right align resource size columns
<img width="229" alt="image"
src="https://github.com/getsentry/sentry/assets/44422760/44cc3a88-3bd7-4181-86a4-a30f0d281aa3">

2. Ensure we never see a `NaN` resource

static/app/utils/discover/fields.tsx

@@ -1204,6 +1204,7 @@ const alignedTypes: ColumnValueType[] = [
   'percentage',
   'percent_change',
   'rate',
+  'size',
 ];
 
 export function fieldAlignment(

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

@@ -14,11 +14,11 @@ import {space} from 'sentry/styles/space';
 import {decodeScalar} from 'sentry/utils/queryString';
 import {useLocation} from 'sentry/utils/useLocation';
 import {RESOURCE_THROUGHPUT_UNIT} from 'sentry/views/performance/browser/resources';
-import ResourceSize from 'sentry/views/performance/browser/resources/shared/resourceSize';
 import {ValidSort} from 'sentry/views/performance/browser/resources/utils/useResourceSort';
 import {useResourcesQuery} from 'sentry/views/performance/browser/resources/utils/useResourcesQuery';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
+import ResourceSizeCell from 'sentry/views/starfish/components/tableCells/resourceSizeCell';
 import {SpanDescriptionCell} from 'sentry/views/starfish/components/tableCells/spanDescriptionCell';
 import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell';
 import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
@@ -132,7 +132,7 @@ function ResourceTable({sort, defaultResourceTypes}: Props) {
       return <ThroughputCell rate={row[key]} unit={RESOURCE_THROUGHPUT_UNIT} />;
     }
     if (key === 'avg(http.response_content_length)') {
-      return <ResourceSize bytes={row[key]} />;
+      return <ResourceSizeCell bytes={row[key]} />;
     }
     if (key === `avg(span.self_time)`) {
       return <DurationCell milliseconds={row[key]} />;

static/app/views/performance/browser/resources/resourceSummaryPage/resourceSummaryTable.tsx

@@ -1,7 +1,6 @@
 import {Fragment} from 'react';
 import {browserHistory, Link} from 'react-router';
 
-import FileSize from 'sentry/components/fileSize';
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
   GridColumnHeader,
@@ -18,6 +17,7 @@ import {useResourcePagesQuery} from 'sentry/views/performance/browser/resources/
 import {useResourceSummarySort} from 'sentry/views/performance/browser/resources/utils/useResourceSummarySort';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
+import ResourceSizeCell from 'sentry/views/starfish/components/tableCells/resourceSizeCell';
 import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
 import {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
@@ -81,7 +81,7 @@ function ResourceSummaryTable() {
       return <DurationCell milliseconds={row[key]} />;
     }
     if (key === 'avg(http.response_content_length)') {
-      return <FileSize bytes={row[key]} />;
+      return <ResourceSizeCell bytes={row[key]} />;
     }
     if (key === 'transaction') {
       const blockingStatus = row['resource.render_blocking_status'];

static/app/views/performance/browser/resources/shared/resourceSize.tsx

@@ -3,12 +3,12 @@ import {Fragment} from 'react';
 import FileSize from 'sentry/components/fileSize';
 
 type Props = {
-  bytes: number;
+  bytes?: number;
 };
 
 function ResourceSize(props: Props) {
   const {bytes} = props;
-  if (bytes === 0) {
+  if (!bytes) {
     return <Fragment>--</Fragment>;
   }
 

static/app/views/starfish/components/chart.tsx

@@ -62,6 +62,15 @@ export const STARFISH_FIELDS: Record<string, {outputType: AggregationOutputType}
   [SpanMetricsField.SPAN_SELF_TIME]: {
     outputType: 'duration',
   },
+  [SpanMetricsField.HTTP_RESPONSE_TRANSFER_SIZE]: {
+    outputType: 'size',
+  },
+  [SpanMetricsField.HTTP_DECODED_RESPONSE_CONTENT_LENGTH]: {
+    outputType: 'size',
+  },
+  [SpanMetricsField.HTTP_RESPONSE_CONTENT_LENGTH]: {
+    outputType: 'size',
+  },
 };
 
 type Props = {

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

@@ -13,9 +13,9 @@ import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import ResourceSize from 'sentry/views/performance/browser/resources/shared/resourceSize';
 import {DurationComparisonCell} from 'sentry/views/starfish/components/samplesTable/common';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
+import ResourceSizeCell from 'sentry/views/starfish/components/tableCells/resourceSizeCell';
 import {
   OverflowEllipsisTextContainer,
   TextAlignRight,
@@ -136,7 +136,7 @@ export function SpanSamplesTable({
 
     if (column.key === HTTP_RESPONSE_CONTENT_LENGTH) {
       const size = parseInt(row[HTTP_RESPONSE_CONTENT_LENGTH], 10);
-      return <ResourceSize bytes={size} />;
+      return <ResourceSizeCell bytes={size} />;
     }
     if (column.key === 'profile_id') {
       return (

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

@@ -0,0 +1,17 @@
+import {NumberContainer} from 'sentry/utils/discover/styles';
+import ResourceSize from 'sentry/views/performance/browser/resources/shared/resourceSize';
+
+type Props = {
+  bytes?: number;
+};
+
+function ResourceSizeCell(props: Props) {
+  const {bytes} = props;
+  return (
+    <NumberContainer>
+      <ResourceSize bytes={bytes} />
+    </NumberContainer>
+  );
+}
+
+export default ResourceSizeCell;