feat(profileHours): add ui profile hours to stats page (#87135)

Adds UI profile hours category to frontend and closes
getsentry/getsentry#16902

Author: brendanhsentry

static/app/constants/index.tsx

@@ -377,6 +377,16 @@ export const DATA_CATEGORY_INFO = {
     uid: 17,
     isBilledCategory: false, // TODO(Continuous Profiling GA): make true for launch to show spend notification toggle
   },
+  [DataCategoryExact.PROFILE_DURATION_UI]: {
+    name: DataCategoryExact.PROFILE_DURATION_UI,
+    apiName: 'profile_duration_ui',
+    plural: 'profileDurationUI',
+    displayName: 'UI profile hour',
+    titleName: t('UI Profile Hours'),
+    productName: t('UI Profiling'),
+    uid: 25,
+    isBilledCategory: false, // TODO(Continuous Profiling GA): make true for launch to show spend notification toggle
+  },
   [DataCategoryExact.UPTIME]: {
     name: DataCategoryExact.UPTIME,
     apiName: 'uptime',

static/app/types/core.tsx

@@ -79,6 +79,7 @@ export enum DataCategory {
   REPLAYS = 'replays',
   MONITOR_SEATS = 'monitorSeats',
   PROFILE_DURATION = 'profileDuration',
+  PROFILE_DURATION_UI = 'profileDurationUI',
   SPANS = 'spans',
   SPANS_INDEXED = 'spansIndexed',
   PROFILE_CHUNKS = 'profileChunks',
@@ -102,6 +103,7 @@ export enum DataCategoryExact {
   MONITOR = 'monitor',
   MONITOR_SEAT = 'monitorSeat',
   PROFILE_DURATION = 'profileDuration',
+  PROFILE_DURATION_UI = 'profileDurationUI',
   SPAN = 'span',
   SPAN_INDEXED = 'spanIndexed',
   UPTIME = 'uptime',

static/app/utils/theme/theme.tsx

@@ -911,7 +911,13 @@ const iconSizes: Sizes = {
 const dataCategory: Record<
   Exclude<
     DataCategory,
-    'profiles' | 'profileChunks' | 'profileDuration' | 'spans' | 'spansIndexed' | 'uptime'
+    | 'profiles'
+    | 'profileChunks'
+    | 'profileDuration'
+    | 'profileDurationUI'
+    | 'spans'
+    | 'spansIndexed'
+    | 'uptime'
   >,
   string
 > = {

static/app/views/organizationStats/index.tsx

@@ -263,7 +263,10 @@ export class OrganizationStats extends Component<OrganizationStatsProps> {
       if (DATA_CATEGORY_INFO.transaction.plural === opt.value) {
         return !organization.features.includes('spans-usage-tracking');
       }
-      if (DATA_CATEGORY_INFO.profileDuration.plural === opt.value) {
+      if (
+        DATA_CATEGORY_INFO.profileDuration.plural === opt.value ||
+        DATA_CATEGORY_INFO.profileDurationUI.plural === opt.value
+      ) {
         return (
           organization.features.includes('continuous-profiling-stats') ||
           organization.features.includes('continuous-profiling')

static/app/views/organizationStats/usageChart/index.tsx

@@ -86,6 +86,12 @@ export const CHART_OPTIONS_DATACATEGORY: CategoryOption[] = [
     disabled: false,
     yAxisMinInterval: 100,
   },
+  {
+    label: DATA_CATEGORY_INFO.profileDurationUI.titleName,
+    value: DATA_CATEGORY_INFO.profileDurationUI.plural,
+    disabled: false,
+    yAxisMinInterval: 100,
+  },
 ];
 
 export enum ChartDataTransform {