From 78888158ca08614e743aadcacb762625eed28d42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 17 Nov 2021 16:15:41 +0100
Subject: [PATCH] Alerting: Fixing threshold handle color (#41813)

* Alerting: Fixing color of threshold handles

* Use theme colors test
---
 .../unified/components/rule-editor/QueryRows.tsx       |  6 +++---
 .../panel/timeseries/plugins/ThresholdDragHandle.tsx   | 10 ++++------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
index 4bde536aa5e..1bd3a6598f1 100644
--- a/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/QueryRows.tsx
@@ -9,7 +9,7 @@ import {
   ThresholdsConfig,
   ThresholdsMode,
 } from '@grafana/data';
-import { getDataSourceSrv } from '@grafana/runtime';
+import { config, getDataSourceSrv } from '@grafana/runtime';
 import { QueryWrapper } from './QueryWrapper';
 import { AlertQuery } from 'app/types/unified-alerting-dto';
 import { isExpressionQuery } from 'app/features/expressions/guards';
@@ -211,7 +211,7 @@ export class QueryRows extends PureComponent<Props, State> {
             steps: [
               {
                 value: -Infinity,
-                color: 'green',
+                color: config.theme2.colors.success.main,
               },
             ],
           };
@@ -219,7 +219,7 @@ export class QueryRows extends PureComponent<Props, State> {
 
         record[refId].steps.push({
           value: threshold,
-          color: 'red',
+          color: config.theme2.colors.error.main,
         });
       });
     }
diff --git a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
index 7bc93429fc7..26ef7e18307 100644
--- a/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import { css } from '@emotion/css';
 import { Threshold, GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, useTheme2 } from '@grafana/ui';
@@ -24,10 +24,8 @@ export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
   const [currentValue, setCurrentValue] = useState(step.value);
-
-  const textColor = useMemo(() => {
-    return theme.colors.getContrastText(theme.visualization.getColorByName(step.color));
-  }, [step.color, theme]);
+  const bgColor = theme.visualization.getColorByName(step.color);
+  const textColor = theme.colors.getContrastText(bgColor);
 
   return (
     <Draggable
@@ -44,7 +42,7 @@ export const ThresholdDragHandle: React.FC<ThresholdDragHandleProps> = ({
     >
       <div
         className={styles.handle}
-        style={{ color: textColor, background: step.color, borderColor: step.color, borderWidth: 0 }}
+        style={{ color: textColor, background: bgColor, borderColor: bgColor, borderWidth: 0 }}
       >
         <span className={styles.handleText}>{formatValue(currentValue)}</span>
       </div>