refactor(graph): changed how graph stores panel yaxis options

public/app/features/dashboard/dashboardSrv.js

@@ -212,7 +212,7 @@ function (angular, $, _, moment) {
       var i, j, k;
       var oldVersion = this.schemaVersion;
       var panelUpgrades = [];
-      this.schemaVersion = 11;
+      this.schemaVersion = 12;
 
       if (oldVersion === this.schemaVersion) {
         return;
@@ -409,6 +409,49 @@ function (angular, $, _, moment) {
         });
       }
 
+      if (oldVersion < 12) {
+        // update graph yaxes changes
+        panelUpgrades.push(function(panel) {
+          if (panel.type !== 'graph') { return; }
+          if (!panel.yaxes) {
+            panel.yaxes = [
+              {
+                show: panel['y-axis'],
+                min: panel.grid.leftMin,
+                max: panel.grid.leftMax,
+                logBase: panel.grid.leftLogBase,
+                format: panel.y_formats[0],
+                label: panel.leftYAxisLabel,
+              },
+              {
+                show: panel['y-axis'],
+                min: panel.grid.rightMin,
+                max: panel.grid.rightMax,
+                logBase: panel.grid.rightLogBase,
+                format: panel.y_formats[1],
+                label: panel.rightYAxisLabel,
+              }
+            ];
+
+            panel.xaxis = {
+              show: panel['x-axis'],
+            };
+
+            delete panel.grid.leftMin;
+            delete panel.grid.leftMax;
+            delete panel.grid.leftLogBase;
+            delete panel.grid.rightMin;
+            delete panel.grid.rightMax;
+            delete panel.grid.rightLogBase;
+            delete panel.y_formats;
+            delete panel.leftYAxisLabel;
+            delete panel.rightYAxisLabel;
+            delete panel['y-axis'];
+            delete panel['x-axis'];
+          }
+        });
+      }
+
       if (panelUpgrades.length === 0) {
         return;
       }

public/app/plugins/panel/graph/axisEditor.html

@@ -1,116 +1,87 @@
 <div class="editor-row gf-form-group">
-	<div class="section">
-		<h5 class="section-heading">Left Y</h5>
+	<div class="section" ng-repeat="yaxis in ctrl.panel.yaxes">
 
-		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.leftShow" on-change="ctrl.render()"></gf-form-switch>
-		<div class="gf-form">
-			<label class="gf-form-label width-5">Unit</label>
-			<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[0]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)"></div>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label width-5">Scale</label>
-			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
+		<h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
+		<h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
+
+		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>
+
+		<div ng-if="yaxis.show">
+			<div class="gf-form">
+				<label class="gf-form-label width-5">Unit</label>
+				<div class="gf-form-dropdown-typeahead max-width-15" ng-model="yaxis.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)"></div>
 			</div>
-		</div>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-10">
-				<label class="gf-form-label width-5">Y-Min</label>
-				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMin" ng-change="ctrl.render()" ng-model-onblur>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-5">Scale</label>
+				<div class="gf-form-select-wrapper max-width-15">
+					<select class="gf-form-input" ng-model="yaxis.logBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
+				</div>
 			</div>
-			<div class="gf-form max-width-10">
-				<label class="gf-form-label width-5">Y-Max</label>
-				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMax" ng-change="ctrl.render()" ng-model-onblur>
+
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-10">
+					<label class="gf-form-label width-5">Y-Min</label>
+					<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
+				</div>
+				<div class="gf-form max-width-10">
+					<label class="gf-form-label width-5">Y-Max</label>
+					<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
+				</div>
+			</div>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-5">Label</label>
+				<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
 			</div>
-		</div>
-		<div class="gf-form">
-			<label class="gf-form-label width-5">Label</label>
-			<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
 		</div>
 	</div>
 
 	<div class="section">
-		<h5 class="section-heading">Right Y</h5>
-		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.rightShow" on-change="ctrl.render()"></gf-form-switch>
+		<h5 class="section-heading">X-Axis</h5>
+		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch>
+	</div>
+</div>
+
+<div class="section gf-form-group">
+	<h5 class="section-heading">Thresholds</h5>
+	<div class="gf-form-inline">
 		<div class="gf-form">
-			<label class="gf-form-label width-5">Unit</label>
-			<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[1]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)"></div>
+			<label class="gf-form-label width-5">Level 1</label>
+			<input type="number" class="gf-form-input max-width-5" ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
 		</div>
 		<div class="gf-form">
-			<label class="gf-form-label width-5">Scale</label>
-			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
-			</div>
-		</div>
-		<div class="gf-form-inline">
-			<div class="gf-form max-width-10">
-				<label class="gf-form-label width-5">Y-Min</label>
-				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMin" ng-change="ctrl.render()" ng-model-onblur>
-			</div>
-			<div class="gf-form max-width-10">
-				<label class="gf-form-label width-5">Y-Max</label>
-				<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMax" ng-change="ctrl.render()" ng-model-onblur>
+			<label class="gf-form-label width-5">Color</label>
+			<div class="gf-form-label">
+				<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
 			</div>
 		</div>
 		<div class="gf-form">
-			<label class="gf-form-label width-5">Label</label>
-			<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
+			<label class="gf-form-label width-5">Level 2</label>
+			<input type="number" class="gf-form-input max-width-5" ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
 		</div>
-	</div>
-</div>
-
-<div class="section" style="margin-bottom: 20px">
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 80px">
-				Show Axis
-			</li>
-			<li class="tight-form-item">
-				X-Axis&nbsp;
-				<input class="cr1" id="hideXAxis" type="checkbox"
-																			ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
-				<label for="hideXAxis" class="cr1"></label>
-			</li>
-			<li class="tight-form-item last">
-				Y-Axis&nbsp;
-				<input class="cr1" id="hideYAxis" type="checkbox"
-																			ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
-				<label for="hideYAxis" class="cr1"></label>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
-	</div>
-	<div class="tight-form last">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 80px">
-				Thresholds
-			</li>
-			<li class="tight-form-item">
-				Level 1
-			</li>
-			<li>
-				<input type="number" class="input-small tight-form-input"
-												 ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
-			</li>
-			<li class="tight-form-item">
-				<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
-			</li>
-			<li class="tight-form-item">
-				Level 2
-			</li>
-			<li>
-				<input type="number" class="input-small tight-form-input"
-													ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-				<li class="tight-form-item">
-					<spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
-				</li>
-				<li class="tight-form-item last">
-					<editor-checkbox text="Line mode" model="ctrl.panel.grid.thresholdLine" change="ctrl.render()"></editor-checkbox>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Color</label>
+			<div class="gf-form-label">
+				<spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
+			</div>
 		</div>
+		<!-- 	<li class="tight&#45;form&#45;item"> -->
+		<!-- 		Level 2 -->
+		<!-- 	</li> -->
+		<!-- 	<li> -->
+		<!-- 		<input type="number" class="input&#45;small tight&#45;form&#45;input" -->
+		<!-- 										 ng&#45;model="ctrl.panel.grid.threshold2" ng&#45;change="ctrl.render()" ng&#45;model&#45;onblur> -->
+		<!-- 	</li> -->
+		<!-- 	<li class="tight&#45;form&#45;item"> -->
+		<!-- 		<spectrum&#45;picker ng&#45;model="ctrl.panel.grid.threshold2Color" ng&#45;change="ctrl.render()" ></spectrum&#45;picker> -->
+		<!-- 	</li> -->
+		<!-- 	<li class="tight&#45;form&#45;item last"> -->
+		<!-- 		<editor&#45;checkbox text="Line mode" model="ctrl.panel.grid.thresholdLine" change="ctrl.render()"></editor&#45;checkbox> -->
+		<!-- 	</li> -->
+		<!-- 	</ul> -->
+		<!-- 	<div class="clearfix"></div> -->
+		<!-- </div> -->
 	</div>
 </div>
 

public/app/plugins/panel/graph/graph.js

@@ -115,7 +115,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           for (var i = 0; i < data.length; i++) {
             var series = data[i];
             var axis = yaxis[series.yaxis - 1];
-            var formater = kbn.valueFormats[panel.y_formats[series.yaxis - 1]];
+            var formater = kbn.valueFormats[panel.yaxes[series.yaxis - 1].format];
 
             // decimal override
             if (_.isNumber(panel.decimals)) {
@@ -132,18 +132,18 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           }
 
           // add left axis labels
-          if (panel.leftYAxisLabel) {
+          if (panel.yaxes[0].label) {
             var yaxisLabel = $("<div class='axisLabel left-yaxis-label'></div>")
-              .text(panel.leftYAxisLabel)
+              .text(panel.yaxes[0].label)
               .appendTo(elem);
 
             yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
           }
 
           // add right axis labels
-          if (panel.rightYAxisLabel) {
+          if (panel.yaxes[1].label) {
             var rightLabel = $("<div class='axisLabel right-yaxis-label'></div>")
-              .text(panel.rightYAxisLabel)
+              .text(panel.yaxes[1].label)
               .appendTo(elem);
 
             rightLabel.css("margin-top", rightLabel.width() / 2);
@@ -151,7 +151,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
         }
 
         function processOffsetHook(plot, gridMargin) {
-          if (panel.leftYAxisLabel) { gridMargin.left = 20; }
+          if (panel.yaxis) { gridMargin.left = 20; }
           if (panel.rightYAxisLabel) { gridMargin.right = 20; }
         }
 
@@ -217,7 +217,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
 
           for (var i = 0; i < data.length; i++) {
             var series = data[i];
-            series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode, panel.y_formats);
+            series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode);
 
             // if hidden remove points and disable stack
             if (ctrl.hiddenSeries[series.alias]) {
@@ -340,11 +340,11 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
         function configureAxisOptions(data, options) {
           var defaults = {
             position: 'left',
-            show: panel['y-axis'],
-            min: panel.grid.leftMin,
+            show: panel.yaxes[0].show,
+            min: panel.yaxes[0].min,
             index: 1,
-            logBase: panel.grid.leftLogBase || 1,
-            max: panel.percentage && panel.stack ? 100 : panel.grid.leftMax,
+            logBase: panel.yaxes[0].logBase || 1,
+            max: panel.percentage && panel.stack ? 100 : panel.yaxes[0].max,
           };
 
           options.yaxes.push(defaults);
@@ -352,18 +352,19 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           if (_.findWhere(data, {yaxis: 2})) {
             var secondY = _.clone(defaults);
             secondY.index = 2,
-            secondY.logBase = panel.grid.rightLogBase || 1,
+            secondY.show = panel.yaxes[1].show;
+            secondY.logBase = panel.yaxes[1].logBase || 1,
             secondY.position = 'right';
-            secondY.min = panel.grid.rightMin;
-            secondY.max = panel.percentage && panel.stack ? 100 : panel.grid.rightMax;
+            secondY.min = panel.yaxes[1].min;
+            secondY.max = panel.percentage && panel.stack ? 100 : panel.yaxes[1].max;
             options.yaxes.push(secondY);
 
             applyLogScale(options.yaxes[1], data);
-            configureAxisMode(options.yaxes[1], panel.percentage && panel.stack ? "percent" : panel.y_formats[1]);
+            configureAxisMode(options.yaxes[1], panel.percentage && panel.stack ? "percent" : panel.yaxes[1].format);
           }
 
           applyLogScale(options.yaxes[0], data);
-          configureAxisMode(options.yaxes[0], panel.percentage && panel.stack ? "percent" : panel.y_formats[0]);
+          configureAxisMode(options.yaxes[0], panel.percentage && panel.stack ? "percent" : panel.yaxes[0].format);
         }
 
         function applyLogScale(axis, data) {
@@ -456,7 +457,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           url += panel['x-axis'] ? '' : '&hideAxes=true';
           url += panel['y-axis'] ? '' : '&hideYAxis=true';
 
-          switch(panel.y_formats[0]) {
+          switch(panel.yaxes[0].format) {
             case 'bytes':
               url += '&yUnitSystem=binary';
               break;

public/app/plugins/panel/graph/module.ts

@@ -17,20 +17,28 @@ var panelDefaults = {
   datasource: null,
   // sets client side (flot) or native graphite png renderer (png)
   renderer: 'flot',
-  // Show/hide the x-axis
-  'x-axis'      : true,
-  // Show/hide y-axis
-  'y-axis'      : true,
-  // y axis formats, [left axis,right axis]
-  y_formats    : ['short', 'short'],
-  // grid options
+  yaxes: [
+    {
+      label: null,
+      show: true,
+      logBase: 1,
+      min: null,
+      max: null,
+      format: 'short'
+    },
+    {
+      label: null,
+      show: true,
+      logBase: 1,
+      min: null,
+      max: null,
+      format: 'short'
+    }
+  ],
+  xaxis: {
+    show: true
+  },
   grid          : {
-    leftLogBase: 1,
-    leftMax: null,
-    rightMax: null,
-    leftMin: null,
-    rightMin: null,
-    rightLogBase: 1,
     threshold1: null,
     threshold2: null,
     threshold1Color: 'rgba(216, 200, 27, 0.27)',
@@ -115,8 +123,8 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Axes & Grid', 'public/app/plugins/panel/graph/axisEditor.html', 2);
-    this.addEditorTab('Display Styles', 'public/app/plugins/panel/graph/styleEditor.html', 3);
+    this.addEditorTab('Axes', 'public/app/plugins/panel/graph/axisEditor.html', 2);
+    this.addEditorTab('Display', 'public/app/plugins/panel/graph/styleEditor.html', 3);
 
     this.logScales = {
       'linear': 1,
@@ -135,7 +143,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   setUnitFormat(axis, subItem) {
-    this.panel.y_formats[axis] = subItem.value;
+    axis.format = subItem.value;
     this.render();
   }
 

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

@@ -31,7 +31,21 @@ describe('grafanaGraph', function() {
             panel: {
               legend: {},
               grid: { },
-              y_formats: [],
+              yaxes: [
+                {
+                  min: null,
+                  max: null,
+                  format: 'short',
+                  logBase: 1
+                },
+                {
+                  min: null,
+                  max: null,
+                  format: 'short',
+                  logBase: 1
+                }
+              ],
+              xaxis: {},
               seriesOverrides: [],
               tooltip: {
                 shared: true
@@ -151,13 +165,7 @@ describe('grafanaGraph', function() {
 
   graphScenario('when logBase is log 10', function(ctx) {
     ctx.setup(function(ctrl) {
-      ctrl.panel.grid = {
-        leftMax: null,
-        rightMax: null,
-        leftMin: null,
-        rightMin: null,
-        leftLogBase: 10,
-      };
+      ctrl.panel.yaxes[0].logBase = 10;
     });
 
     it('should apply axis transform and ticks', function() {

public/test/specs/dashboardSrv-specs.js

@@ -122,7 +122,10 @@ define([
             {
               panels: [
                 {
-                  type: 'graphite', legend: true, aliasYAxis: { test: 2 }, grid: { min: 1, max: 10 },
+                  type: 'graph', legend: true, aliasYAxis: { test: 2 },
+                  y_formats: ['kbyte', 'ms'],
+                  grid: {min: 1, max: 10, rightMin: 5, rightMax: 15, leftLogBase: 1, rightLogBase: 2},
+                  leftYAxisLabel: 'left label',
                   targets: [{refId: 'A'}, {}],
                 },
                 {
@@ -172,11 +175,6 @@ define([
         expect(graph.legend.show).to.be(true);
       });
 
-      it('update grid options', function() {
-        expect(graph.grid.leftMin).to.be(1);
-        expect(graph.grid.leftMax).to.be(10);
-      });
-
       it('move aliasYAxis to series override', function() {
         expect(graph.seriesOverrides[0].alias).to.be("test");
         expect(graph.seriesOverrides[0].yaxis).to.be(2);
@@ -193,8 +191,24 @@ define([
         expect(table.styles[1].thresholds[1]).to.be("300");
       });
 
+      it('graph grid to yaxes options', function() {
+        expect(graph.yaxes[0].min).to.be(1);
+        expect(graph.yaxes[0].max).to.be(10);
+        expect(graph.yaxes[0].format).to.be('kbyte');
+        expect(graph.yaxes[0].label).to.be('left label');
+        expect(graph.yaxes[0].logBase).to.be(1);
+        expect(graph.yaxes[1].min).to.be(5);
+        expect(graph.yaxes[1].max).to.be(15);
+        expect(graph.yaxes[1].format).to.be('ms');
+        expect(graph.yaxes[1].logBase).to.be(2);
+
+        expect(graph.grid.rightMax).to.be(undefined);
+        expect(graph.grid.rightLogBase).to.be(undefined);
+        expect(graph.y_formats).to.be(undefined);
+      });
+
       it('dashboard schema version should be set to latest', function() {
-        expect(model.schemaVersion).to.be(11);
+        expect(model.schemaVersion).to.be(12);
       });
 
     });
@@ -248,6 +262,8 @@ define([
           rows: [{
             panels: [{
               type: 'graph',
+              grid: {},
+              yaxes: [{}, {}],
               targets: [{
                 "alias": "$tag_datacenter $tag_source $col",
                 "column": "value",