From 3a7e26f42f80c901e2e07fdfe7e1ee44cb68fa6d Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Wed, 31 Dec 2025 23:00:36 +0000
Subject: [PATCH] fix: Temperature text color now respects configured
 thresholds. Related to #984
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously, the TemperatureGauge component used hardcoded thresholds
(critical: 80°C, warning: 70°C) for text coloring. Now it uses the
user-configured temperature threshold from alert settings.

Changes:
- Add getTemperatureThreshold() helper to alertsActivation store
- Pass critical/warning props to TemperatureGauge in NodeSummaryTable
- Warning is set to (threshold - 5°C) matching the hysteresis pattern
---
 .../src/components/shared/NodeSummaryTable.tsx      | 11 ++++++++++-
 frontend-modern/src/stores/alertsActivation.ts      | 13 +++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index 120e714c7..32d253009 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -38,6 +38,9 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
   const { isMobile } = useBreakpoint();
   const { viewMode } = useMetricsViewMode();
 
+  // Get user-configured temperature threshold for display coloring
+  const temperatureThreshold = createMemo(() => alertsActivation.getTemperatureThreshold());
+
   const isTemperatureMonitoringEnabled = (node: Node): boolean => {
     const globalEnabled = props.globalTemperatureMonitoringEnabled ?? true;
     if (node.temperatureMonitoringEnabled !== undefined && node.temperatureMonitoringEnabled !== null) {
@@ -701,13 +704,19 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                                       value={value}
                                       min={min}
                                       max={max}
+                                      critical={temperatureThreshold()}
+                                      warning={Math.max(0, temperatureThreshold() - 5)}
                                     />
                                   </div>
                                 );
                               }
 
                               return (
-                                <TemperatureGauge value={value} />
+                                <TemperatureGauge
+                                  value={value}
+                                  critical={temperatureThreshold()}
+                                  warning={Math.max(0, temperatureThreshold() - 5)}
+                                />
                               );
                             })()}
                           </Show>
diff --git a/frontend-modern/src/stores/alertsActivation.ts b/frontend-modern/src/stores/alertsActivation.ts
index 889e156ee..21de3e53e 100644
--- a/frontend-modern/src/stores/alertsActivation.ts
+++ b/frontend-modern/src/stores/alertsActivation.ts
@@ -127,6 +127,18 @@ const getBackupThresholds = (): { freshHours: number; staleHours: number } => {
   };
 };
 
+// Get temperature threshold from config (for display coloring)
+const getTemperatureThreshold = (): number => {
+  const cfg = config();
+  // nodeDefaults.temperature is a HysteresisThreshold with trigger/clear
+  const tempConfig = cfg?.nodeDefaults?.temperature;
+  if (typeof tempConfig === 'object' && tempConfig !== null && 'trigger' in tempConfig) {
+    return (tempConfig as { trigger: number }).trigger;
+  }
+  // Fallback to default 80°C
+  return 80;
+};
+
 // Export the store
 export const useAlertsActivation = () => ({
   // Signals
@@ -139,6 +151,7 @@ export const useAlertsActivation = () => ({
   // Computed
   isPastObservationWindow,
   getBackupThresholds,
+  getTemperatureThreshold,
 
   // Actions
   refreshConfig,