From 578ee88ff37a339bdc63ca9a524ce00ce46d86f3 Mon Sep 17 00:00:00 2001
From: ilgizar <ilgizar@gmail.com>
Date: Thu, 8 Feb 2018 12:53:02 +0500
Subject: [PATCH 1/4] Fix #7107

---
 .../plugins/panel/graph/threshold_manager.ts  | 30 ++++++++++++++-----
 .../plugins/panel/graph/thresholds_form.ts    | 10 +++++++
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts
index b5159d823f8..6d781543bda 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.shouldDrawHandles) {
+          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.shouldDrawHandles) {
+          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..a6e821184e9 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,15 @@ 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-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">

From 98e5815c977cbc92f274e3c2e064e8b221fa71c6 Mon Sep 17 00:00:00 2001
From: ilgizar <ilgizar@gmail.com>
Date: Thu, 8 Feb 2018 17:28:24 +0500
Subject: [PATCH 2/4] append test to thresholds on right axis

---
 .../graph/specs/threshold_manager_specs.ts    | 39 ++++++++++++++++++-
 .../plugins/panel/graph/threshold_manager.ts  |  4 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

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('<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);
+      });
+    });
   });
 });
diff --git a/public/app/plugins/panel/graph/threshold_manager.ts b/public/app/plugins/panel/graph/threshold_manager.ts
index 6d781543bda..072e0bee6f7 100644
--- a/public/app/plugins/panel/graph/threshold_manager.ts
+++ b/public/app/plugins/panel/graph/threshold_manager.ts
@@ -222,7 +222,7 @@ export class ThresholdManager {
 
       // fill
       if (threshold.fill) {
-        if (threshold.yaxis === 'right' && this.shouldDrawHandles) {
+        if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: limit },
             color: fillColor,
@@ -235,7 +235,7 @@ export class ThresholdManager {
         }
       }
       if (threshold.line) {
-        if (threshold.yaxis === 'right' && this.shouldDrawHandles) {
+        if (threshold.yaxis === 'right' && this.hasSecondYAxis) {
           options.grid.markings.push({
             y2axis: { from: threshold.value, to: threshold.value },
             color: lineColor,

From 57e31ca71b50a652703b60d3e987519ac0a4431a Mon Sep 17 00:00:00 2001
From: ilgizar <ilgizar@gmail.com>
Date: Fri, 9 Feb 2018 10:06:50 +0500
Subject: [PATCH 3/4] Correct code style.

---
 public/app/plugins/panel/graph/thresholds_form.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index a6e821184e9..3f270b254f6 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -111,7 +111,7 @@ var template = `
       </div>
 
       <div class="gf-form">
-        <label class="gf-form-label">Y-axis</label>
+        <label class="gf-form-label">Y-Axis</label>
         <div class="gf-form-select-wrapper">
           <select class="gf-form-input" ng-model="threshold.yaxis"
                   ng-options="f for f in ['left', 'right']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">

From 425586f67deffd88b206e743501935c5090b9a5d Mon Sep 17 00:00:00 2001
From: ilgizar <ilgizar@gmail.com>
Date: Wed, 14 Feb 2018 23:44:04 +0500
Subject: [PATCH 4/4] Set default threshold axis to 'left' for panels created
 before this feature.

---
 public/app/plugins/panel/graph/thresholds_form.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts
index 3f270b254f6..d50aa238c50 100644
--- a/public/app/plugins/panel/graph/thresholds_form.ts
+++ b/public/app/plugins/panel/graph/thresholds_form.ts
@@ -114,6 +114,7 @@ var template = `
         <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>