feat(thresholds): migration from previous threshold schema

public/app/features/dashboard/dashboardSrv.js

@@ -219,7 +219,7 @@ function (angular, $, _, moment) {
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var panelUpgrades = [];
-      this.schemaVersion = 12;
+      this.schemaVersion = 13;
 
       if (oldVersion === this.schemaVersion) {
         return;
@@ -468,6 +468,55 @@ function (angular, $, _, moment) {
         });
       }
 
+      if (oldVersion < 13) {
+        // update graph yaxes changes
+        panelUpgrades.push(function(panel) {
+          if (panel.type !== 'graph') { return; }
+
+          panel.thresholds = [];
+          var t1 = {}, t2 = {};
+
+          if (panel.grid.threshold1 !== null) {
+            t1.value = panel.grid.threshold1;
+            if (panel.grid.thresholdLine) {
+              t1.line = true;
+              t1.lineColor = panel.grid.threshold1Color;
+            } else {
+              t1.fill = true;
+              t1.fillColor = panel.grid.threshold1Color;
+            }
+          }
+
+          if (panel.grid.threshold2 !== null) {
+            t2.value = panel.grid.threshold2;
+            if (panel.grid.thresholdLine) {
+              t2.line = true;
+              t2.lineColor = panel.grid.threshold2Color;
+            } else {
+              t2.fill = true;
+              t2.fillColor = panel.grid.threshold2Color;
+            }
+          }
+
+          if (_.isNumber(t1.value)) {
+            if (_.isNumber(t2.value)) {
+              if (t1.value > t2.value) {
+                t1.op = t2.op = '<';
+                panel.thresholds.push(t2);
+                panel.thresholds.push(t1);
+              } else {
+                t1.op = t2.op = '>';
+                panel.thresholds.push(t2);
+                panel.thresholds.push(t1);
+              }
+            } else {
+              t1.op = '>';
+              panel.thresholds.push(t1);
+            }
+          }
+        });
+      }
+
       if (panelUpgrades.length === 0) {
         return;
       }

public/app/plugins/panel/graph/specs/graph_specs.ts

@@ -45,6 +45,7 @@ describe('grafanaGraph', function() {
                   logBase: 1
                 }
               ],
+              thresholds: [],
               xaxis: {},
               seriesOverrides: [],
               tooltip: {
@@ -113,101 +114,32 @@ describe('grafanaGraph', function() {
 
   graphScenario('grid thresholds 100, 200', function(ctx) {
     ctx.setup(function(ctrl) {
-      ctrl.panel.alert = {
+      ctrl.panel.thresholds = [
-        warn: { op: ">", value: 100},
+        {op: ">", value: 300, fillColor: 'red', lineColor: 'blue', fill: true, line: true},
-        crit: { op: ">", value: 200}
+        {op: ">", value: 200, fillColor: '#ed2e18', fill: true}
-      };
+      ];
     });
 
-    it('should add crit fill', function() {
+    it('should add fill for threshold with fill: true', function() {
       var markings = ctx.plotOptions.grid.markings;
 
-      expect(markings[0].yaxis.from).to.be(200);
+      expect(markings[0].yaxis.from).to.be(300);
       expect(markings[0].yaxis.to).to.be(Infinity);
-      expect(markings[0].color).to.be('rgba(234, 112, 112, 0.10)');
+      expect(markings[0].color).to.be('red');
     });
 
-    it('should add crit line', function() {
+    it('should add line', function() {
       var markings = ctx.plotOptions.grid.markings;
 
-      expect(markings[1].yaxis.from).to.be(200);
+      expect(markings[1].yaxis.from).to.be(300);
-      expect(markings[1].yaxis.to).to.be(200);
+      expect(markings[1].yaxis.to).to.be(300);
-      expect(markings[1].color).to.be('#ed2e18');
+      expect(markings[1].color).to.be('blue');
     });
 
-    it('should add warn fill', function() {
+    it('should add fill for second thresholds to previous threshold', function() {
-      var markings = ctx.plotOptions.grid.markings;
-
-      expect(markings[2].yaxis.from).to.be(100);
-      expect(markings[2].yaxis.to).to.be(200);
-      expect(markings[2].color).to.be('rgba(216, 200, 27, 0.10)');
-    });
-
-    it('should add warn line', function() {
-      var markings = ctx.plotOptions.grid.markings;
-      expect(markings[3].yaxis.from).to.be(100);
-      expect(markings[3].yaxis.to).to.be(100);
-      expect(markings[3].color).to.be('#F79520');
-    });
-  });
-
-  graphScenario('inverted grid thresholds 200, 100', function(ctx) {
-    ctx.setup(function(ctrl) {
-      ctrl.panel.alert = {
-        warn: { op: "<", value: 200},
-        crit: { op: "<", value: 100}
-      };
-    });
-
-    it('should add crit fill', function() {
-      var markings = ctx.plotOptions.grid.markings;
-      expect(markings[0].yaxis.from).to.be(100);
-      expect(markings[0].yaxis.to).to.be(-Infinity);
-      expect(markings[0].color).to.be('rgba(234, 112, 112, 0.10)');
-    });
-
-    it('should add crit line', function() {
-      var markings = ctx.plotOptions.grid.markings;
-      expect(markings[1].yaxis.from).to.be(100);
-      expect(markings[1].yaxis.to).to.be(100);
-      expect(markings[1].color).to.be('#ed2e18');
-    });
-
-    it('should add warn fill', function() {
       var markings = ctx.plotOptions.grid.markings;
       expect(markings[2].yaxis.from).to.be(200);
-      expect(markings[2].yaxis.to).to.be(100);
+      expect(markings[2].yaxis.to).to.be(300);
-      expect(markings[2].color).to.be('rgba(216, 200, 27, 0.10)');
-    });
-
-    it('should add warn line', function() {
-      var markings = ctx.plotOptions.grid.markings;
-      expect(markings[3].yaxis.from).to.be(200);
-      expect(markings[3].yaxis.to).to.be(200);
-      expect(markings[3].color).to.be('#F79520');
-    });
-  });
-
-  graphScenario('grid warn thresholds from zero', function(ctx) {
-    ctx.setup(function(ctrl) {
-      ctrl.panel.alert = {
-        warn: { op: ">", value: 0},
-        crit: { op: ">", value: undefined}
-      };
-    });
-
-    it('should add warn fill', function() {
-      var markings = ctx.plotOptions.grid.markings;
-      expect(markings[0].yaxis.from).to.be(0);
-      expect(markings[0].yaxis.to).to.be(Infinity);
-      expect(markings[0].color).to.be('rgba(216, 200, 27, 0.10)');
-    });
-
-    it('should add warn line', function() {
-      var markings = ctx.plotOptions.grid.markings;
-      expect(markings[1].yaxis.from).to.be(0);
-      expect(markings[1].yaxis.to).to.be(0);
-      expect(markings[1].color).to.be('#F79520');
     });
   });
 

public/test/specs/dashboardSrv-specs.js

@@ -128,7 +128,18 @@ define([
                 {
                   type: 'graph', legend: true, aliasYAxis: { test: 2 },
                   y_formats: ['kbyte', 'ms'],
-                  grid: {min: 1, max: 10, rightMin: 5, rightMax: 15, leftLogBase: 1, rightLogBase: 2},
+                  grid: {
+                    min: 1,
+                    max: 10,
+                    rightMin: 5,
+                    rightMax: 15,
+                    leftLogBase: 1,
+                    rightLogBase: 2,
+                    threshold1: 200,
+                    threshold2: 400,
+                    threshold1Color: 'yellow',
+                    threshold2Color: 'red',
+                  },
                   leftYAxisLabel: 'left label',
                   targets: [{refId: 'A'}, {}],
                 },
@@ -212,9 +223,17 @@ define([
       });
 
       it('dashboard schema version should be set to latest', function() {
-        expect(model.schemaVersion).to.be(12);
+        expect(model.schemaVersion).to.be(13);
       });
 
+      it('graph thresholds should be migrated', function() {
+        expect(graph.thresholds.length).to.be(2);
+        expect(graph.thresholds[0].op).to.be('>');
+        expect(graph.thresholds[0].value).to.be(400);
+        expect(graph.thresholds[0].fillColor).to.be('red');
+        expect(graph.thresholds[1].value).to.be(200);
+        expect(graph.thresholds[1].fillColor).to.be('yellow');
+      });
     });
 
     describe('when creating dashboard model with missing list for annoations or templating', function() {