feat(perf): Improve rendering of HTTP Status Code columns (#68208)

Huh what 403 which one is that is that rate limited or what, I don't
know! Adds a little tooltip to explain the status code field, and makes
sure it's aligned correctly and so on.

- Add special renderer for HTTP status code
- Right-align "Status" table column
- Provide metadata to the samples table

Author: gggritso

static/app/utils/discover/fieldRenderers.tsx

@@ -51,6 +51,7 @@ import {
   stringToFilter,
 } from 'sentry/views/performance/transactionSummary/filter';
 import {PercentChangeCell} from 'sentry/views/starfish/components/tableCells/percentChangeCell';
+import {ResponseStatusCodeCell} from 'sentry/views/starfish/components/tableCells/responseStatusCodeCell';
 import {TimeSpentCell} from 'sentry/views/starfish/components/tableCells/timeSpentCell';
 import {SpanMetricsField} from 'sentry/views/starfish/types';
 
@@ -340,6 +341,7 @@ type SpecialFields = {
   project: SpecialField;
   release: SpecialField;
   replayId: SpecialField;
+  'span.status_code': SpecialField;
   team_key_transaction: SpecialField;
   'timestamp.to_day': SpecialField;
   'timestamp.to_hour': SpecialField;
@@ -690,6 +692,18 @@ const SPECIAL_FIELDS: SpecialFields = {
       </Container>
     ),
   },
+  'span.status_code': {
+    sortField: 'span.status_code',
+    renderFunc: data => (
+      <NumberContainer>
+        {data['span.status_code'] ? (
+          <ResponseStatusCodeCell code={parseInt(data['span.status_code'], 10)} />
+        ) : (
+          t('Unknown')
+        )}
+      </NumberContainer>
+    ),
+  },
 };
 
 type SpecialFunctionFieldRenderer = (

static/app/views/performance/http/httpSamplesPanel.tsx

@@ -293,6 +293,13 @@ export function HTTPSamplesPanel() {
                   data={samplesData}
                   isLoading={isDurationDataFetching || isSamplesDataFetching}
                   error={samplesDataError}
+                  // TODO: The samples endpoint doesn't provide its own meta, so we need to create it manually
+                  meta={{
+                    fields: {
+                      'span.response_code': 'number',
+                    },
+                    units: {},
+                  }}
                 />
               </ModuleLayout.Full>
             </Fragment>

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

@@ -9,7 +9,11 @@ import {
   fieldAlignment,
   parseFunction,
 } from 'sentry/utils/discover/fields';
-import {SpanFunction, SpanMetricsField} from 'sentry/views/starfish/types';
+import {
+  SpanFunction,
+  SpanIndexedField,
+  SpanMetricsField,
+} from 'sentry/views/starfish/types';
 import type {QueryParameterNames} from 'sentry/views/starfish/views/queryParameters';
 
 type Options = {
@@ -22,6 +26,7 @@ type Options = {
 const DEFAULT_SORT_PARAMETER_NAME = 'sort';
 
 const {SPAN_SELF_TIME, HTTP_RESPONSE_CONTENT_LENGTH} = SpanMetricsField;
+const {RESPONSE_CODE} = SpanIndexedField;
 const {TIME_SPENT_PERCENTAGE, SPS, SPM, HTTP_ERROR_COUNT, HTTP_RESPONSE_RATE} =
   SpanFunction;
 
@@ -42,6 +47,8 @@ export const SORTABLE_FIELDS = new Set([
   `avg(${HTTP_RESPONSE_CONTENT_LENGTH})`,
 ]);
 
+const NUMERIC_FIELDS = new Set([`${RESPONSE_CODE}`]);
+
 export const renderHeadCell = ({column, location, sort, sortParameterName}: Options) => {
   const {key, name} = column;
   const alignment = getAlignment(key);
@@ -76,11 +83,17 @@ export const renderHeadCell = ({column, location, sort, sortParameterName}: Opti
 
 export const getAlignment = (key: string): Alignments => {
   const result = parseFunction(key);
+
   if (result) {
     const outputType = aggregateFunctionOutputType(result.name, result.arguments[0]);
+
     if (outputType) {
       return fieldAlignment(key, outputType);
     }
+  } else {
+    if (NUMERIC_FIELDS.has(key)) {
+      return 'right';
+    }
   }
   return 'left';
 };

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

@@ -0,0 +1,24 @@
+import {Tooltip} from 'sentry/components/tooltip';
+import {tct} from 'sentry/locale';
+import {HTTP_RESPONSE_STATUS_CODES} from 'sentry/views/performance/http/definitions';
+
+interface Props {
+  code: number;
+}
+
+export function ResponseStatusCodeCell({code}: Props) {
+  const explanation = HTTP_RESPONSE_STATUS_CODES[code.toString()];
+
+  return (
+    <Tooltip
+      disabled={!code}
+      isHoverable
+      title={tct('Status Code [code] “[explanation]”', {
+        code,
+        explanation,
+      })}
+    >
+      {code}
+    </Tooltip>
+  );
+}