fix(perf): Allow string values for size fields in span waterfall (#62780)

Apparently sometimes size fields like the request size can be strings
like `"77"`. This PR makes sure they're parsed as such. See
getsentry/sentry-go#758

- Add spec
- Treat request size as a size field
- Support string values for size fields

Fixes JAVASCRIPT-2QGM

Author: gggritso

Diff for: static/app/components/events/interfaces/spans/newTraceDetailsSpanDetails.tsx

@@ -71,6 +71,7 @@ const SIZE_DATA_KEYS = [
   'Encoded Body Size',
   'Decoded Body Size',
   'Transfer Size',
+  'http.request_content_length',
   'http.response_content_length',
   'http.decoded_response_content_length',
   'http.response_transfer_size',
@@ -343,7 +344,11 @@ function NewTraceDetailsSpanDetail(props: SpanDetailProps) {
   } {
     const sizeKeys = SIZE_DATA_KEYS.reduce((keys, key) => {
       if (data.hasOwnProperty(key) && defined(data[key])) {
-        keys[key] = data[key];
+        try {
+          keys[key] = parseInt(data[key], 10);
+        } catch (e) {
+          keys[key] = data[key];
+        }
       }
       return keys;
     }, {});

Diff for: static/app/components/events/interfaces/spans/spanDetail.spec.tsx

@@ -91,6 +91,29 @@ describe('SpanDetail', function () {
     });
   });
 
+  describe('http.client spans', function () {
+    it('shows size fields for integer and string values', function () {
+      render(
+        renderSpanDetail({
+          span: SpanFixture({
+            op: 'http.client',
+            description: 'POST /resources.json',
+            data: {
+              'http.response_content_length': '143',
+              'http.request_content_length': 12,
+            },
+          }),
+        })
+      );
+
+      expect(screen.getByText('http.response_content_length')).toBeInTheDocument();
+      expect(screen.getByText('143.0 B')).toBeInTheDocument();
+
+      expect(screen.getByText('http.request_content_length')).toBeInTheDocument();
+      expect(screen.getByText('12.0 B')).toBeInTheDocument();
+    });
+  });
+
   describe('db spans', function () {
     it('renders "Similar Span" button but no Query Details button by default', function () {
       render(

Diff for: static/app/components/events/interfaces/spans/spanDetail.tsx

@@ -75,6 +75,7 @@ const SIZE_DATA_KEYS = [
   'Encoded Body Size',
   'Decoded Body Size',
   'Transfer Size',
+  'http.request_content_length',
   'http.response_content_length',
   'http.decoded_response_content_length',
   'http.response_transfer_size',
@@ -361,7 +362,11 @@ function SpanDetail(props: Props) {
   } {
     const sizeKeys = SIZE_DATA_KEYS.reduce((keys, key) => {
       if (data.hasOwnProperty(key) && defined(data[key])) {
-        keys[key] = data[key];
+        try {
+          keys[key] = parseInt(data[key], 10);
+        } catch (e) {
+          keys[key] = data[key];
+        }
       }
       return keys;
     }, {});