feat(browser-starfish): handle 0 resource size case (#59014)

If the resource size is 0, we will display `---`. This complements the
CTA in #59009


![image](https://github.com/getsentry/sentry/assets/44422760/c55feb0e-afd4-4071-a3df-d4fa83ae6e6d)

This is to solve some confusion over a 0 size.
Its very unlikely that the resource size is ever 0.0B, every case i have
seen, the resource size was 0 because we simply don't have the size.
Showing 0 may mislead users to thinking the size is actually 0.

---------

Co-authored-by: Abhijeet Prasad <aprasad@sentry.io>

Author: DominikB2014

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

@@ -1,7 +1,6 @@
 import {Fragment} from 'react';
 import {Link} from 'react-router';
 
-import FileSize from 'sentry/components/fileSize';
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
   GridColumnHeader,
@@ -12,6 +11,7 @@ import {t} from 'sentry/locale';
 import {useLocation} from 'sentry/utils/useLocation';
 import {ValidSort} from 'sentry/views/performance/browser/resources/imageView/utils/useImageResourceSort';
 import {useIndexedResourcesQuery} from 'sentry/views/performance/browser/resources/imageView/utils/useIndexedResourcesQuery';
+import ResourceSize from 'sentry/views/performance/browser/resources/shared/resourceSize';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
 import {renderHeadCell} from 'sentry/views/starfish/components/tableCells/renderHeadCell';
 import {WiderHovercard} from 'sentry/views/starfish/components/tableCells/spanDescriptionCell';
@@ -77,7 +77,7 @@ function ResourceTable({sort}: Props) {
       );
     }
     if (key === 'http.response_content_length') {
-      return <FileSize bytes={row[key]} />;
+      return <ResourceSize bytes={row[key]} />;
     }
     if (key === `span.self_time`) {
       return <DurationCell milliseconds={row[key]} />;

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

@@ -1,6 +1,5 @@
 import {Fragment} from 'react';
 
-import FileSize from 'sentry/components/fileSize';
 import GridEditable, {
   COL_WIDTH_UNDEFINED,
   GridColumnHeader,
@@ -10,6 +9,7 @@ import Pagination from 'sentry/components/pagination';
 import {t} from 'sentry/locale';
 import {RateUnits} from 'sentry/utils/discover/fields';
 import {useLocation} from 'sentry/utils/useLocation';
+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';
@@ -95,7 +95,7 @@ function ResourceTable({sort}: Props) {
       return <ThroughputCell rate={row[key] * 60} unit={RateUnits.PER_SECOND} />;
     }
     if (key === 'avg(http.response_content_length)') {
-      return <FileSize bytes={row[key]} />;
+      return <ResourceSize bytes={row[key]} />;
     }
     if (key === `avg(span.self_time)`) {
       return <DurationCell milliseconds={row[key]} />;

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

@@ -1,12 +1,12 @@
 import {Fragment} from 'react';
 
 import Alert from 'sentry/components/alert';
-import FileSize from 'sentry/components/fileSize';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t, tct} from 'sentry/locale';
 import {formatBytesBase2} from 'sentry/utils';
 import {RateUnits} from 'sentry/utils/discover/fields';
 import getDynamicText from 'sentry/utils/getDynamicText';
+import ResourceSize from 'sentry/views/performance/browser/resources/shared/resourceSize';
 import {DurationCell} from 'sentry/views/starfish/components/tableCells/durationCell';
 import {ThroughputCell} from 'sentry/views/starfish/components/tableCells/throughputCell';
 import {DataTitles, getThroughputTitle} from 'sentry/views/starfish/views/spans/types';
@@ -63,18 +63,33 @@ function ResourceInfo(props: Props) {
     <Fragment>
       <BlockContainer>
         <Block title={t('Avg encoded size')}>
-          <Tooltip isHoverable title={tooltips.avgContentLength} showUnderline>
-            <FileSize bytes={avgContentLength} />
+          <Tooltip
+            isHoverable
+            title={tooltips.avgContentLength}
+            showUnderline
+            disabled={!avgContentLength}
+          >
+            <ResourceSize bytes={avgContentLength} />
           </Tooltip>
         </Block>
         <Block title={t('Avg decoded size')}>
-          <Tooltip isHoverable title={tooltips.avgDecodedContentLength} showUnderline>
-            <FileSize bytes={avgDecodedContentLength} />
+          <Tooltip
+            isHoverable
+            title={tooltips.avgDecodedContentLength}
+            showUnderline
+            disabled={!avgDecodedContentLength}
+          >
+            <ResourceSize bytes={avgDecodedContentLength} />
           </Tooltip>
         </Block>
         <Block title={t('Avg transfer size')}>
-          <Tooltip isHoverable title={tooltips.avgTransferSize} showUnderline>
-            <FileSize bytes={avgTransferSize} />
+          <Tooltip
+            isHoverable
+            title={tooltips.avgTransferSize}
+            showUnderline
+            disabled={!avgTransferSize}
+          >
+            <ResourceSize bytes={avgTransferSize} />
           </Tooltip>
         </Block>
         <Block title={DataTitles.avg}>

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

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