diff --git a/public/app/plugins/panel/graph/specs/threshold_manager_specs.ts b/public/app/plugins/panel/graph/specs/threshold_manager_specs.ts index ec219642401..f16d5663f1b 100644 --- a/public/app/plugins/panel/graph/specs/threshold_manager_specs.ts +++ b/public/app/plugins/panel/graph/specs/threshold_manager_specs.ts @@ -1,5 +1,7 @@ import { describe, it, expect } from '../../../../../test/lib/common'; +import angular from 'angular'; +import TimeSeries from 'app/core/time_series2'; import { ThresholdManager } from '../threshold_manager'; describe('ThresholdManager', function() { @@ -15,9 +17,13 @@ describe('ThresholdManager', function() { panelCtrl: {}, }; - ctx.setup = function(thresholds) { + ctx.setup = function(thresholds, data) { ctx.panel.thresholds = thresholds; var manager = new ThresholdManager(ctx.panelCtrl); + if (data !== undefined) { + var element = angular.element('
'); + manager.prepare(element, data); + } manager.addFlotOptions(ctx.options, ctx.panel); }; @@ -101,5 +107,36 @@ describe('ThresholdManager', function() { expect(markings[1].yaxis.to).to.be(-Infinity); }); }); + + plotOptionsScenario('for threshold on two Y axes', ctx => { + var data = new Array(2); + data[0] = new TimeSeries({ + datapoints: [[0, 1], [300, 2]], + alias: 'left', + }); + data[0].yaxis = 1; + data[1] = new TimeSeries({ + datapoints: [[0, 1], [300, 2]], + alias: 'right', + }); + data[1].yaxis = 2; + ctx.setup( + [ + { op: 'gt', value: 100, line: true, colorMode: 'critical' }, + { op: 'gt', value: 200, line: true, colorMode: 'critical', yaxis: 'right' }, + ], + data + ); + + it('should add first threshold for left axis', function() { + var markings = ctx.options.grid.markings; + expect(markings[0].yaxis.from).to.be(100); + }); + + it('should add second threshold for right axis', function() { + var markings = ctx.options.grid.markings; + expect(markings[1].y2axis.from).to.be(200); + }); + }); }); }); diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts index b5159d823f8..072e0bee6f7 100644 --- a/public/app/plugins/panel/graph/threshold_manager.ts +++ b/public/app/plugins/panel/graph/threshold_manager.ts @@ -222,16 +222,30 @@ export class ThresholdManager { // fill if (threshold.fill) { - options.grid.markings.push({ - yaxis: { from: threshold.value, to: limit }, - color: fillColor, - }); + if (threshold.yaxis === 'right' && this.hasSecondYAxis) { + options.grid.markings.push({ + y2axis: { from: threshold.value, to: limit }, + color: fillColor, + }); + } else { + options.grid.markings.push({ + yaxis: { from: threshold.value, to: limit }, + color: fillColor, + }); + } } if (threshold.line) { - options.grid.markings.push({ - yaxis: { from: threshold.value, to: threshold.value }, - color: lineColor, - }); + if (threshold.yaxis === 'right' && this.hasSecondYAxis) { + options.grid.markings.push({ + y2axis: { from: threshold.value, to: threshold.value }, + color: lineColor, + }); + } else { + options.grid.markings.push({ + yaxis: { from: threshold.value, to: threshold.value }, + color: lineColor, + }); + } } } } diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts index 48b2112e4bc..d50aa238c50 100644 --- a/public/app/plugins/panel/graph/thresholds_form.ts +++ b/public/app/plugins/panel/graph/thresholds_form.ts @@ -29,6 +29,7 @@ export class ThresholdFormCtrl { op: 'gt', fill: true, line: true, + yaxis: 'left', }); this.panelCtrl.render(); } @@ -109,6 +110,16 @@ var template = `
+
+ +
+ +
+
+