Add toggle to disable alert rendering line and fill on Graph panel (#25705)

* Squash four commits and claim.

Credit to @ikkemaniac in #25034, but taking this to sign CLA and get it landed. Four commit message were:

- add 'fill' switch on Alert Tab
- add 'fill' to Alert init model. Make default value 'true' not to break current design
- use newly created alert.fill when rendering graph
- add 'line' switch on Alert tab, add 'line' to Alert init model. Set default to 'true' not to break current design. Use newly created alert.line when rendering graph

Should close feature req #7258.

* Move alert toggle to Display tab.

* Move alertThreshold to PanelModel.options.

* Fix ThresholdMapper tests by adding options to each mocked panel.

* Update documentation for the new display option.

* Update docs with review feedback.

* Handle onRender with null panel in ThresholdMapper

docs/sources/panels/visualizations/graph-panel.md

@@ -28,9 +28,10 @@ Use these settings to refine your visualization.
 - **Line width -** The width of the line for a series. (default 1).
 - **Staircase -** Draws adjacent points as staircase.
 - **Area fill -** Amount of color fill for a series. (default 1, 0 is none)
-- **Fill gradient -** XXX
+- **Fill gradient -** Degree of gradient on the area fill. (0 is no gradient, 10 is a steep gradient. Default is 0.)
 - **Points -** Display points for values.
 - **Point radius -** Controls how large the points are.
+- **Alert thresholds -** Display alert thresholds and regions on the panel.
 
 ### Stacking and null value
 

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

@@ -7,6 +7,7 @@ describe('ThresholdMapper', () => {
     it('can map query conditions to thresholds', () => {
       const panel: any = {
         type: 'graph',
+        options: { alertThresholds: true },
         alert: {
           conditions: [
             {
@@ -28,6 +29,7 @@ describe('ThresholdMapper', () => {
     it('can map query conditions to thresholds', () => {
       const panel: any = {
         type: 'graph',
+        options: { alertThresholds: true },
         alert: {
           conditions: [
             {
@@ -52,6 +54,7 @@ describe('ThresholdMapper', () => {
     it('can map query conditions to thresholds', () => {
       const panel: any = {
         type: 'graph',
+        options: { alertThresholds: true },
         alert: {
           conditions: [
             {

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

@@ -2,6 +2,10 @@ import { PanelModel } from 'app/features/dashboard/state';
 
 export class ThresholdMapper {
   static alertToGraphThresholds(panel: PanelModel) {
+    if (!panel.alert) {
+      return false; // no update when no alerts
+    }
+
     for (let i = 0; i < panel.alert.conditions.length; i++) {
       const condition = panel.alert.conditions[i];
       if (condition.type !== 'query') {
@@ -54,8 +58,8 @@ export class ThresholdMapper {
     }
 
     for (const t of panel.thresholds) {
-      t.fill = true;
-      t.line = true;
+      t.fill = panel.options.alertThreshold;
+      t.line = panel.options.alertThreshold;
       t.colorMode = 'critical';
     }
 

public/app/features/dashboard/state/PanelModel.ts

@@ -112,6 +112,7 @@ export class PanelModel implements DataConfigSource {
   repeatedByRow?: boolean;
   maxPerRow?: number;
   collapsed?: boolean;
+
   panels?: any;
   soloMode?: boolean;
   targets: DataQuery[];

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

@@ -26,6 +26,8 @@ import { getDataTimeRange } from './utils';
 import { changePanelPlugin } from 'app/features/dashboard/state/actions';
 import { dispatch } from 'app/store/store';
 
+import { ThresholdMapper } from 'app/features/alerting/state/ThresholdMapper';
+
 export class GraphCtrl extends MetricsPanelCtrl {
   static template = template;
 
@@ -135,7 +137,10 @@ export class GraphCtrl extends MetricsPanelCtrl {
     seriesOverrides: [],
     thresholds: [],
     timeRegions: [],
-    options: {},
+    options: {
+      // show/hide alert threshold lines and fill
+      alertThreshold: true,
+    },
   };
 
   /** @ngInject */
@@ -302,6 +307,8 @@ export class GraphCtrl extends MetricsPanelCtrl {
       return;
     }
 
+    ThresholdMapper.alertToGraphThresholds(this.panel);
+
     for (const series of this.seriesList) {
       series.applySeriesOverrides(this.panel.seriesOverrides);
 

public/app/plugins/panel/graph/tab_display.html

@@ -79,6 +79,15 @@
       ></select>
     </div>
   </div>
+
+  <gf-form-switch
+    class="gf-form"
+    label="Alert thresholds"
+    label-class="width-8"
+    checked="ctrl.panel.options.alertThreshold"
+    on-change="ctrl.render()"
+  ></gf-form-switch>
+
 </div>
 
 <div class="gf-form-group">