chore(ts): Use UPPER_CASE for GenericPerformanceWidgetDataType (#50373)

static/app/views/performance/landing/widgets/components/widgetContainer.tsx

@@ -168,11 +168,11 @@ const _WidgetContainer = (props: Props) => {
   const titleTooltip = showNewWidgetDesign ? '' : widgetProps.titleTooltip;
 
   switch (widgetProps.dataType) {
-    case GenericPerformanceWidgetDataType.trends:
+    case GenericPerformanceWidgetDataType.TRENDS:
       return (
         <TrendsWidget {...passedProps} {...widgetProps} titleTooltip={titleTooltip} />
       );
-    case GenericPerformanceWidgetDataType.area:
+    case GenericPerformanceWidgetDataType.AREA:
       return (
         <SingleFieldAreaWidget
           {...passedProps}
@@ -180,11 +180,11 @@ const _WidgetContainer = (props: Props) => {
           titleTooltip={titleTooltip}
         />
       );
-    case GenericPerformanceWidgetDataType.vitals:
+    case GenericPerformanceWidgetDataType.VITALS:
       return (
         <VitalWidget {...passedProps} {...widgetProps} titleTooltip={titleTooltip} />
       );
-    case GenericPerformanceWidgetDataType.line_list:
+    case GenericPerformanceWidgetDataType.LINE_LIST:
       return (
         <LineChartListWidget
           {...passedProps}
@@ -192,11 +192,11 @@ const _WidgetContainer = (props: Props) => {
           titleTooltip={titleTooltip}
         />
       );
-    case GenericPerformanceWidgetDataType.histogram:
+    case GenericPerformanceWidgetDataType.HISTOGRAM:
       return (
         <HistogramWidget {...passedProps} {...widgetProps} titleTooltip={titleTooltip} />
       );
-    case GenericPerformanceWidgetDataType.stacked_area:
+    case GenericPerformanceWidgetDataType.STACKED_AREA:
       return <StackedAreaChartListWidget {...passedProps} {...widgetProps} />;
     default:
       throw new Error(`Widget type "${widgetProps.dataType}" has no implementation.`);

static/app/views/performance/landing/widgets/types.tsx

@@ -17,12 +17,20 @@ export enum VisualizationDataState {
 }
 
 export enum GenericPerformanceWidgetDataType {
-  histogram = 'histogram',
-  area = 'area',
-  vitals = 'vitals',
-  line_list = 'line_list',
-  trends = 'trends',
-  stacked_area = 'stacked_area',
+  HISTOGRAM = 'histogram',
+  AREA = 'area',
+  VITALS = 'vitals',
+  LINE_LIST = 'line_list',
+  TRENDS = 'trends',
+  STACKED_AREA = 'stacked_area',
+
+  // TODO(epurkhiser): Delete
+  Histogram = 'histogram',
+  Area = 'area',
+  Vitals = 'vitals',
+  LineList = 'line_list',
+  Trends = 'trends',
+  StackedArea = 'stacked_area',
 }
 
 export type PerformanceWidgetProps = {

static/app/views/performance/landing/widgets/widgetDefinitions.tsx

@@ -74,28 +74,28 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Duration Distribution'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
     fields: ['transaction.duration'],
-    dataType: GenericPerformanceWidgetDataType.histogram,
+    dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
     chartColor: WIDGET_PALETTE[5],
   },
   [PerformanceWidgetSetting.LCP_HISTOGRAM]: {
     title: t('LCP Distribution'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
     fields: ['measurements.lcp'],
-    dataType: GenericPerformanceWidgetDataType.histogram,
+    dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
     chartColor: WIDGET_PALETTE[5],
   },
   [PerformanceWidgetSetting.FCP_HISTOGRAM]: {
     title: t('FCP Distribution'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
     fields: ['measurements.fcp'],
-    dataType: GenericPerformanceWidgetDataType.histogram,
+    dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
     chartColor: WIDGET_PALETTE[5],
   },
   [PerformanceWidgetSetting.FID_HISTOGRAM]: {
     title: t('FID Distribution'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.DURATION_DISTRIBUTION),
     fields: ['measurements.fid'],
-    dataType: GenericPerformanceWidgetDataType.histogram,
+    dataType: GenericPerformanceWidgetDataType.HISTOGRAM,
     chartColor: WIDGET_PALETTE[5],
   },
   [PerformanceWidgetSetting.WORST_LCP_VITALS]: {
@@ -106,7 +106,7 @@ export const WIDGET_DEFINITIONS: ({
       poor: 4000,
       meh: 2500,
     },
-    dataType: GenericPerformanceWidgetDataType.vitals,
+    dataType: GenericPerformanceWidgetDataType.VITALS,
   },
   [PerformanceWidgetSetting.WORST_FCP_VITALS]: {
     title: t('Worst FCP Web Vitals'),
@@ -116,7 +116,7 @@ export const WIDGET_DEFINITIONS: ({
       poor: 3000,
       meh: 1000,
     },
-    dataType: GenericPerformanceWidgetDataType.vitals,
+    dataType: GenericPerformanceWidgetDataType.VITALS,
   },
   [PerformanceWidgetSetting.WORST_FID_VITALS]: {
     title: t('Worst FID Web Vitals'),
@@ -126,7 +126,7 @@ export const WIDGET_DEFINITIONS: ({
       poor: 300,
       meh: 100,
     },
-    dataType: GenericPerformanceWidgetDataType.vitals,
+    dataType: GenericPerformanceWidgetDataType.VITALS,
   },
   [PerformanceWidgetSetting.WORST_CLS_VITALS]: {
     title: t('Worst CLS Web Vitals'),
@@ -136,13 +136,13 @@ export const WIDGET_DEFINITIONS: ({
       poor: 0.25,
       meh: 0.1,
     },
-    dataType: GenericPerformanceWidgetDataType.vitals,
+    dataType: GenericPerformanceWidgetDataType.VITALS,
   },
   [PerformanceWidgetSetting.TPM_AREA]: {
     title: t('Transactions Per Minute'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.TPM),
     fields: ['tpm()'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[1],
     allowsOpenInDiscover: true,
   },
@@ -150,7 +150,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Apdex'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.APDEX),
     fields: ['apdex()'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[4],
     allowsOpenInDiscover: true,
   },
@@ -158,7 +158,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('p50 Duration'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.P50),
     fields: ['p50(transaction.duration)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[3],
     allowsOpenInDiscover: true,
   },
@@ -166,7 +166,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('p75 Duration'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.P75),
     fields: ['p75(transaction.duration)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[3],
     allowsOpenInDiscover: true,
   },
@@ -174,7 +174,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('p95 Duration'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.P95),
     fields: ['p95(transaction.duration)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[3],
     allowsOpenInDiscover: true,
   },
@@ -182,7 +182,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('p99 Duration'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.P99),
     fields: ['p99(transaction.duration)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[3],
     allowsOpenInDiscover: true,
   },
@@ -190,7 +190,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('p75 LCP'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.P75),
     fields: ['p75(measurements.lcp)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[1],
     allowsOpenInDiscover: true,
   },
@@ -198,7 +198,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Failure Rate'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.FAILURE_RATE),
     fields: ['failure_rate()'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[2],
     allowsOpenInDiscover: true,
   },
@@ -206,7 +206,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('User Misery'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.USER_MISERY),
     fields: [`user_misery()`],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[0],
     allowsOpenInDiscover: true,
   },
@@ -214,7 +214,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Cold Startup Time'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_COLD),
     fields: ['p75(measurements.app_start_cold)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[4],
     allowsOpenInDiscover: true,
   },
@@ -222,7 +222,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Warm Startup Time'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.APP_START_WARM),
     fields: ['p75(measurements.app_start_warm)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[3],
     allowsOpenInDiscover: true,
   },
@@ -230,7 +230,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Slow Frames'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_FRAMES),
     fields: ['p75(measurements.frames_slow_rate)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[0],
     allowsOpenInDiscover: true,
   },
@@ -238,7 +238,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Frozen Frames'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.FROZEN_FRAMES),
     fields: ['p75(measurements.frames_frozen_rate)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[5],
     allowsOpenInDiscover: true,
   },
@@ -246,49 +246,49 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Most Related Errors'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.MOST_ERRORS),
     fields: [`failure_count()`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.MOST_RELATED_ISSUES]: {
     title: t('Most Related Issues'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.MOST_ISSUES),
     fields: [`count()`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.SLOW_HTTP_OPS]: {
     title: t('Slow HTTP Ops'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_HTTP_SPANS),
     fields: [`p75(spans.http)`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.SLOW_BROWSER_OPS]: {
     title: t('Slow Browser Ops'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_HTTP_SPANS),
     fields: [`p75(spans.browser)`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.SLOW_RESOURCE_OPS]: {
     title: t('Slow Resource Ops'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_HTTP_SPANS),
     fields: [`p75(spans.resource)`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.SLOW_DB_OPS]: {
     title: t('Slow DB Ops'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_HTTP_SPANS),
     fields: [`p75(spans.db)`],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.TIME_TO_INITIAL_DISPLAY]: {
     title: t('Time to Initial Display'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.TIME_TO_INITIAL_DISPLAY),
     fields: ['p75(measurements.time_to_initial_display)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[4],
     allowsOpenInDiscover: true,
   },
@@ -296,7 +296,7 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Time to Full Display'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.TIME_TO_FULL_DISPLAY),
     fields: ['p75(measurements.time_to_full_display)'],
-    dataType: GenericPerformanceWidgetDataType.area,
+    dataType: GenericPerformanceWidgetDataType.AREA,
     chartColor: WIDGET_PALETTE[4],
     allowsOpenInDiscover: true,
   },
@@ -304,14 +304,14 @@ export const WIDGET_DEFINITIONS: ({
     title: t('Most Slow Frames'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.SLOW_FRAMES),
     fields: ['avg(measurements.frames_slow)'],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.MOST_FROZEN_FRAMES]: {
     title: t('Most Frozen Frames'),
     titleTooltip: getTermHelp(organization, PERFORMANCE_TERM.FROZEN_FRAMES),
     fields: ['avg(measurements.frames_frozen)'],
-    dataType: GenericPerformanceWidgetDataType.line_list,
+    dataType: GenericPerformanceWidgetDataType.LINE_LIST,
     chartColor: WIDGET_PALETTE[0],
   },
   [PerformanceWidgetSetting.MOST_IMPROVED]: {
@@ -321,7 +321,7 @@ export const WIDGET_DEFINITIONS: ({
       'improved'
     ),
     fields: [],
-    dataType: GenericPerformanceWidgetDataType.trends,
+    dataType: GenericPerformanceWidgetDataType.TRENDS,
   },
   [PerformanceWidgetSetting.MOST_REGRESSED]: {
     title: t('Most Regressed'),
@@ -330,12 +330,12 @@ export const WIDGET_DEFINITIONS: ({
       'regressed'
     ),
     fields: [],
-    dataType: GenericPerformanceWidgetDataType.trends,
+    dataType: GenericPerformanceWidgetDataType.TRENDS,
   },
   [PerformanceWidgetSetting.SPAN_OPERATIONS]: {
     title: t('Span Operations Breakdown'),
     titleTooltip: '',
     fields: SPAN_OP_BREAKDOWN_FIELDS.map(spanOp => `p75(${spanOp})`),
-    dataType: GenericPerformanceWidgetDataType.stacked_area,
+    dataType: GenericPerformanceWidgetDataType.STACKED_AREA,
   },
 });