Merge pull request #10838 from ilgizar/7107_right_y_axis

Thresholds for Right Y axis

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('<div grafana-graph><div>');
+          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);
+      });
+    });
   });
 });

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,
+          });
+        }
       }
     }
   }

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 = `
         </span>
       </div>
 
+      <div class="gf-form">
+        <label class="gf-form-label">Y-Axis</label>
+        <div class="gf-form-select-wrapper">
+          <select class="gf-form-input" ng-model="threshold.yaxis"
+                  ng-init="threshold.yaxis = threshold.yaxis === 'left' || threshold.yaxis === 'right' ? threshold.yaxis : 'left'"
+                  ng-options="f for f in ['left', 'right']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
+          </select>
+        </div>
+      </div>
+
       <div class="gf-form">
         <label class="gf-form-label">
           <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">