feat(consecutive-http): Add threshold options to frontend (#48368)

Adds LCP ratio threshold and max duration between span options
to UI

static/app/views/admin/adminSettings.tsx

@@ -47,6 +47,8 @@ const optionsAvailable = [
   'performance.issues.m_n_plus_one_db.la-rollout',
   'performance.issues.m_n_plus_one_db.ea-rollout',
   'performance.issues.m_n_plus_one_db.ga-rollout',
+  'performance.issues.consecutive_http.lcp_ratio_threshold',
+  'performance.issues.consecutive_http.max_duration_between_spans',
   'profile.issues.blocked_main_thread-ingest.la-rollout',
   'profile.issues.blocked_main_thread-ingest.ea-rollout',
   'profile.issues.blocked_main_thread-ingest.ga-rollout',
@@ -185,6 +187,13 @@ export default class AdminSettings extends AsyncView<{}, State> {
               {fields['performance.issues.m_n_plus_one_db.ea-rollout']}
               {fields['performance.issues.m_n_plus_one_db.ga-rollout']}
             </Panel>
+            <Panel>
+              <PanelHeader>
+                Performance Issues - Consecutive HTTP Span Detector
+              </PanelHeader>
+              {fields['performance.issues.consecutive_http.lcp_ratio_threshold']}
+              {fields['performance.issues.consecutive_http.max_duration_between_spans']}
+            </Panel>
             <Panel>
               <PanelHeader>
                 Profiling Issues - Block Main Thread Detector Ingest

static/app/views/admin/options.tsx

@@ -371,6 +371,27 @@ const performanceOptionDefinitions: Field[] = [
       'Controls the rate at which performance problems are detected by the large render blocking asset detector for GA organizations.'
     ),
   },
+  {
+    key: 'performance.issues.consecutive_http.lcp_ratio_threshold',
+    label: t('LCP Ratio Threshold'),
+    help: t(
+      'The sum of consecutive HTTP spans must be larger than this percentage of the LCP to be considered a problem.'
+    ),
+    ...HIGH_THROUGHPUT_RATE_OPTION,
+    defaultValue: () => '0.33',
+  },
+  {
+    key: 'performance.issues.consecutive_http.max_duration_between_spans',
+    label: t('Time Between Spans'),
+    help: t(
+      'Maximum time, in ms, between consecutive HTTP spans to be considered part of the same problem.'
+    ),
+    defaultValue: () => '1000',
+    component: NumberField,
+    min: 0,
+    max: Number.MAX_SAFE_INTEGER,
+    step: 1,
+  },
   {
     key: 'profile.issues.blocked_main_thread-ingest.la-rollout',
     label: t('Limited Availability Detection Rate'),