From 85d0d6f7cdf53ff6c9d125ee22c99b1bd13eab21 Mon Sep 17 00:00:00 2001 From: Justin Palpant Date: Mon, 3 Aug 2020 09:50:36 -0700 Subject: [PATCH] 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 | 3 ++- .../app/features/alerting/state/ThresholdMapper.test.ts | 3 +++ public/app/features/alerting/state/ThresholdMapper.ts | 8 ++++++-- public/app/features/dashboard/state/PanelModel.ts | 1 + public/app/plugins/panel/graph/module.ts | 9 ++++++++- public/app/plugins/panel/graph/tab_display.html | 9 +++++++++ 6 files changed, 29 insertions(+), 4 deletions(-) diff --git a/docs/sources/panels/visualizations/graph-panel.md b/docs/sources/panels/visualizations/graph-panel.md index e2e68a52afb..f087fde0566 100644 --- a/docs/sources/panels/visualizations/graph-panel.md +++ b/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 diff --git a/public/app/features/alerting/state/ThresholdMapper.test.ts b/public/app/features/alerting/state/ThresholdMapper.test.ts index 8e91d0b6d0a..8491073ce4e 100644 --- a/public/app/features/alerting/state/ThresholdMapper.test.ts +++ b/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: [ { diff --git a/public/app/features/alerting/state/ThresholdMapper.ts b/public/app/features/alerting/state/ThresholdMapper.ts index 0ab5777c5e8..c2b053056c4 100644 --- a/public/app/features/alerting/state/ThresholdMapper.ts +++ b/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'; } diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts index 1a3a0afedfb..9d27be85b72 100644 --- a/public/app/features/dashboard/state/PanelModel.ts +++ b/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[]; diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 9821720218e..08ec86d6969 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/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); diff --git a/public/app/plugins/panel/graph/tab_display.html b/public/app/plugins/panel/graph/tab_display.html index c17177ac5c2..3d941f8f711 100644 --- a/public/app/plugins/panel/graph/tab_display.html +++ b/public/app/plugins/panel/graph/tab_display.html @@ -79,6 +79,15 @@ > + + +