Alerting: Hides threshold handle for percentual thresholds (#30431)

public/app/features/alerting/AlertTabCtrl.ts

@@ -390,6 +390,7 @@ export class AlertTabCtrl {
       case 'action': {
         conditionModel.source.reducer.type = evt.action.value;
         conditionModel.reducerPart = alertDef.createReducerPart(conditionModel.source.reducer);
+        this.evaluatorParamsChanged();
         break;
       }
       case 'get-part-actions': {

public/app/features/alerting/state/ThresholdMapper.test.ts

@@ -1,6 +1,9 @@
-import { describe, it, expect } from 'test/lib/common';
+import { hiddenReducerTypes, ThresholdMapper } from './ThresholdMapper';
+import alertDef from './alertDef';
 
-import { ThresholdMapper } from './ThresholdMapper';
+const visibleReducerTypes = alertDef.reducerTypes
+  .filter(({ value }) => hiddenReducerTypes.indexOf(value) === -1)
+  .map(({ value }) => value);
 
 describe('ThresholdMapper', () => {
   describe('with greater than evaluator', () => {
@@ -74,4 +77,62 @@ describe('ThresholdMapper', () => {
       expect(panel.thresholds[1].value).toBe(200);
     });
   });
+
+  visibleReducerTypes.forEach((type) => {
+    describe(`with {${type}} reducer`, () => {
+      it('visible should be true', () => {
+        const panel = getPanel({ reducerType: type });
+
+        const updated = ThresholdMapper.alertToGraphThresholds(panel);
+
+        expect(updated).toBe(true);
+        expect(panel.thresholds[0]).toEqual({
+          value: 100,
+          op: 'gt',
+          fill: true,
+          line: true,
+          colorMode: 'critical',
+          visible: true,
+        });
+      });
+    });
+  });
+
+  hiddenReducerTypes.forEach((type) => {
+    describe(`with {${type}} reducer`, () => {
+      it('visible should be false', () => {
+        const panel = getPanel({ reducerType: type });
+
+        const updated = ThresholdMapper.alertToGraphThresholds(panel);
+
+        expect(updated).toBe(true);
+        expect(panel.thresholds[0]).toEqual({
+          value: 100,
+          op: 'gt',
+          fill: true,
+          line: true,
+          colorMode: 'critical',
+          visible: false,
+        });
+      });
+    });
+  });
 });
+
+function getPanel({ reducerType }: { reducerType?: string } = {}) {
+  const panel: any = {
+    type: 'graph',
+    options: { alertThreshold: true },
+    alert: {
+      conditions: [
+        {
+          type: 'query',
+          evaluator: { type: 'gt', params: [100] },
+          reducer: { type: reducerType },
+        },
+      ],
+    },
+  };
+
+  return panel;
+}

public/app/features/alerting/state/ThresholdMapper.ts

@@ -1,5 +1,6 @@
 import { PanelModel } from 'app/features/dashboard/state';
 
+export const hiddenReducerTypes = ['percent_diff', 'percent_diff_abs'];
 export class ThresholdMapper {
   static alertToGraphThresholds(panel: PanelModel) {
     if (!panel.alert) {
@@ -14,16 +15,17 @@ export class ThresholdMapper {
 
       const evaluator = condition.evaluator;
       const thresholds: any[] = (panel.thresholds = []);
+      const visible = hiddenReducerTypes.indexOf(condition.reducer?.type) === -1;
 
       switch (evaluator.type) {
         case 'gt': {
           const value = evaluator.params[0];
-          thresholds.push({ value: value, op: 'gt' });
+          thresholds.push({ value: value, op: 'gt', visible });
           break;
         }
         case 'lt': {
           const value = evaluator.params[0];
-          thresholds.push({ value: value, op: 'lt' });
+          thresholds.push({ value: value, op: 'lt', visible });
           break;
         }
         case 'outside_range': {
@@ -31,11 +33,11 @@ export class ThresholdMapper {
           const value2 = evaluator.params[1];
 
           if (value1 > value2) {
-            thresholds.push({ value: value1, op: 'gt' });
-            thresholds.push({ value: value2, op: 'lt' });
+            thresholds.push({ value: value1, op: 'gt', visible });
+            thresholds.push({ value: value2, op: 'lt', visible });
           } else {
-            thresholds.push({ value: value1, op: 'lt' });
-            thresholds.push({ value: value2, op: 'gt' });
+            thresholds.push({ value: value1, op: 'lt', visible });
+            thresholds.push({ value: value2, op: 'gt', visible });
           }
 
           break;
@@ -45,11 +47,11 @@ export class ThresholdMapper {
           const value2 = evaluator.params[1];
 
           if (value1 > value2) {
-            thresholds.push({ value: value1, op: 'lt' });
-            thresholds.push({ value: value2, op: 'gt' });
+            thresholds.push({ value: value1, op: 'lt', visible });
+            thresholds.push({ value: value2, op: 'gt', visible });
           } else {
-            thresholds.push({ value: value1, op: 'gt' });
-            thresholds.push({ value: value2, op: 'lt' });
+            thresholds.push({ value: value1, op: 'gt', visible });
+            thresholds.push({ value: value2, op: 'lt', visible });
           }
           break;
         }

public/app/plugins/panel/graph/threshold_manager.ts

@@ -87,6 +87,10 @@ export class ThresholdManager {
 
   renderHandle(handleIndex: number, defaultHandleTopPos: number) {
     const model = this.thresholds[handleIndex];
+    if (!model.visible) {
+      return;
+    }
+
     const value = model.value;
     let valueStr = value;
     let handleTopPos = 0;