chore: pr review fixes for 12137

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdColorSelect.tsx

@@ -1,5 +1,6 @@
 import { ChevronDown } from '@signozhq/icons';
 import { ColorPicker } from 'antd';
+import { ThresholdColor } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/threshold';
 
 import styles from './ThresholdsSection.module.scss';
 
@@ -11,11 +12,11 @@ interface ThresholdColorSelectProps {
 
 // Named presets from the SigNoz palette (cherry / amber / forest / robin). They surface
 // as quick swatches in the picker; the full picker below covers any custom color.
-const PRESETS: { label: string; value: string }[] = [
-	{ label: 'Red', value: '#F1575F' },
-	{ label: 'Orange', value: '#F5B225' },
-	{ label: 'Green', value: '#2BB673' },
-	{ label: 'Blue', value: '#4E74F8' },
+const PRESETS: { label: string; value: ThresholdColor }[] = [
+	{ label: 'Red', value: ThresholdColor.RED },
+	{ label: 'Orange', value: ThresholdColor.ORANGE },
+	{ label: 'Green', value: ThresholdColor.GREEN },
+	{ label: 'Blue', value: ThresholdColor.BLUE },
 ];
 
 /**

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelEditor/ConfigPane/sections/ThresholdsSection/ThresholdsSection.tsx

@@ -12,6 +12,7 @@ import {
 	AnyThreshold,
 	ThresholdVariant,
 } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/sections';
+import { ThresholdColor } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/threshold';
 
 import type { TableColumnOption } from '../../../hooks/useTableColumns';
 import type { SectionEditorContext } from '../../sectionContext';
@@ -22,7 +23,7 @@ import TableThresholdRow from './rows/TableThresholdRow';
 import styles from './ThresholdsSection.module.scss';
 
 // New thresholds default to red (the first palette preset); the user recolors per rule.
-const DEFAULT_THRESHOLD_COLOR = '#F1575F';
+const DEFAULT_THRESHOLD_COLOR = ThresholdColor.RED;
 
 // Add-button testId per variant — kept stable so existing E2E/unit selectors hold.
 const ADD_TESTID: Record<ThresholdVariant, string> = {

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/threshold.ts

@@ -22,6 +22,22 @@ export interface ComparisonThresholdShape {
 	format?: DashboardtypesThresholdFormatDTO;
 }
 
+/** SigNoz threshold palette; single source of truth for the hex values. */
+export enum ThresholdColor {
+	RED = '#F1575F',
+	ORANGE = '#F5B225',
+	GREEN = '#2BB673',
+	BLUE = '#4E74F8',
+}
+
+/** Palette ordered most-dangerous first (preset order + alert-severity ranking). */
+export const THRESHOLD_COLOR_DANGER_ORDER: ThresholdColor[] = [
+	ThresholdColor.RED,
+	ThresholdColor.ORANGE,
+	ThresholdColor.GREEN,
+	ThresholdColor.BLUE,
+];
+
 /** Comparison operators a threshold can use, as evaluable symbols. */
 export type ThresholdComparisonOperator = '>' | '<' | '>=' | '<=' | '=' | '!=';
 

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/utils/deriveAlertPrefill.ts

@@ -5,11 +5,13 @@ import type {
 	DashboardtypesPanelDTO,
 	DashboardtypesPanelPluginDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { normalizeOperator } from 'container/CreateAlertV2/context/conditionNormalizers';
 import {
 	AlertThresholdMatchType,
 	AlertThresholdOperator,
 	Threshold,
 } from 'container/CreateAlertV2/context/types';
+import { THRESHOLD_COLOR_DANGER_ORDER } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/threshold';
 import type { MetricAggregation } from 'types/api/v5/queryRange';
 import type { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { ReduceOperators } from 'types/common/queryBuilder';
@@ -21,14 +23,6 @@ export interface PanelAlertPrefill {
 	threshold?: Threshold;
 }
 
-// Most-dangerous first, matching the panel editor palette; unknown colors sort last.
-const THRESHOLD_COLOR_DANGER_ORDER = [
-	'#f1575f',
-	'#f5b225',
-	'#2bb673',
-	'#4e74f8',
-];
-
 interface NormalizedPanelThreshold {
 	color: string;
 	value: number;
@@ -93,8 +87,12 @@ function readPanelThresholds(
 	}
 }
 
+// Match case-insensitively (picker emits lowercase hex); unknown colors sort last.
 function colorRank(color: string): number {
-	const index = THRESHOLD_COLOR_DANGER_ORDER.indexOf(color.toLowerCase());
+	const target = color.toLowerCase();
+	const index = THRESHOLD_COLOR_DANGER_ORDER.findIndex(
+		(paletteColor) => paletteColor.toLowerCase() === target,
+	);
 	return index === -1 ? THRESHOLD_COLOR_DANGER_ORDER.length : index;
 }
 
@@ -106,22 +104,17 @@ function pickHighestDanger(
 	)[0];
 }
 
+// The alert UI has no inclusive operator; collapse "or equal" onto its strict variant.
 function panelOperatorToAlertOperator(
 	operator: DashboardtypesComparisonOperatorDTO | undefined,
 ): AlertThresholdOperator | undefined {
 	switch (operator) {
-		case 'above':
 		case 'above_or_equal':
-			return AlertThresholdOperator.IS_ABOVE;
-		case 'below':
+			return normalizeOperator('above');
 		case 'below_or_equal':
-			return AlertThresholdOperator.IS_BELOW;
-		case 'equal':
-			return AlertThresholdOperator.IS_EQUAL_TO;
-		case 'not_equal':
-			return AlertThresholdOperator.IS_NOT_EQUAL_TO;
+			return normalizeOperator('below');
 		default:
-			return undefined;
+			return normalizeOperator(operator);
 	}
 }