fix(insights): Improve Requests span sample panel response code breakdown chart (#74101)

I got some great feedback that this chart is confusing.

**Before:**

<img width="701" alt="Screenshot 2024-07-10 at 4 45 14 PM"
src="https://github.com/getsentry/sentry/assets/989898/150ac845-9308-4f23-b1f8-68799080df4d">

- why is "other" so popular? If it's taking up so much room, why doesn't
it have a label?
- what is this graph of, even? Why are those the response codes that
were chosen?

**After:**

<img width="771" alt="Screenshot 2024-07-10 at 4 50 46 PM"
src="https://github.com/getsentry/sentry/assets/989898/052723c4-1a1f-4019-9927-5583ff9f779b">

- the highest lines in the chart are all known response codes
- the title is clearer

My biggest mistake was _not sorting the top N series_. This means that
even if a series had high volume, it might get lumped into "Other". Now
it's sorted by count, so the top series all have correctly known status
codes.

I also updated the label while I was in there.

static/app/views/insights/common/queries/useSpanMetricsTopNSeries.tsx

@@ -1,4 +1,5 @@
 import type {Series} from 'sentry/types/echarts';
+import type {Sort} from 'sentry/utils/discover/fields';
 import type {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {getSeriesEventView} from 'sentry/views/insights/common/queries/getSeriesEventView';
@@ -16,6 +17,7 @@ interface UseSpanMetricsSeriesOptions<Fields> {
   fields?: Fields;
   referrer?: string;
   search?: MutableSearch;
+  sorts?: Sort[];
   yAxis?: Fields;
 }
 
@@ -27,6 +29,7 @@ export const useSpanMetricsTopNSeries = <Fields extends SpanMetricsProperty[]>(
     fields = [],
     yAxis = [],
     topEvents,
+    sorts = [],
     referrer = 'span-metrics-top-n-series',
   } = options;
 
@@ -46,6 +49,10 @@ export const useSpanMetricsTopNSeries = <Fields extends SpanMetricsProperty[]>(
     topEvents
   );
 
+  if (sorts.length > 0) {
+    eventView.sorts = sorts;
+  }
+
   const result = useWrappedDiscoverTimeseriesQuery<SpanMetricTimeseriesRow[]>({
     eventView,
     initialData: [],

static/app/views/insights/http/components/charts/responseCodeCountChart.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 export function ResponseCodeCountChart({series, isLoading, error}: Props) {
   return (
-    <ChartPanel title={t('Response Codes')}>
+    <ChartPanel title={t('Top 5 Response Codes')}>
       <Chart
         showLegend
         height={CHART_HEIGHT}

static/app/views/insights/http/components/httpSamplesPanel.spec.tsx

@@ -222,7 +222,7 @@ describe('HTTPSamplesPanel', () => {
             excludeOther: 0,
             field: ['span.status_code', 'count()'],
             interval: '30m',
-            orderby: undefined,
+            orderby: '-count()',
             partial: 1,
             per_page: 50,
             project: [],
@@ -230,6 +230,7 @@ describe('HTTPSamplesPanel', () => {
               'span.module:http span.op:http.client !has:span.domain transaction:/api/0/users span.status_code:[300,301,302,303,304,305,307,308]',
             referrer: 'api.performance.http.samples-panel-response-code-chart',
             statsPeriod: '10d',
+            sort: '-count()',
             topEvents: '5',
             yAxis: 'count()',
           },

static/app/views/insights/http/components/httpSamplesPanel.tsx

@@ -207,6 +207,12 @@ export function HTTPSamplesPanel() {
     fields: ['span.status_code', 'count()'],
     yAxis: ['count()'],
     topEvents: 5,
+    sorts: [
+      {
+        kind: 'desc',
+        field: 'count()',
+      },
+    ],
     enabled: isPanelOpen && query.panel === 'status',
     referrer: Referrer.SAMPLES_PANEL_RESPONSE_CODE_CHART,
   });