ux(): updated and polished legend option forms

public/app/core/components/switch.ts

@@ -7,10 +7,10 @@ import coreModule from 'app/core/core_module';
 import Drop from 'tether-drop';
 
 var template = `
-<label for="check-{{$id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
+<label for="check-{{ctrl.id}}" class="gf-form-label {{ctrl.labelClass}} pointer">{{ctrl.label}}</label>
 <div class="gf-form-switch {{ctrl.switchClass}}" ng-if="ctrl.show">
-  <input id="check-{{$id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
-  <label for="check-{{$id}}" data-on="Yes" data-off="No"></label>
+  <input id="check-{{ctrl.id}}" type="checkbox" ng-model="ctrl.checked" ng-change="ctrl.internalOnChange()">
+  <label for="check-{{ctrl.id}}" data-on="Yes" data-off="No"></label>
 </div>
 `;
 
@@ -18,10 +18,12 @@ export class SwitchCtrl {
   onChange: any;
   checked: any;
   show: any;
+  id: any;
 
   /** @ngInject */
-  constructor() {
+  constructor($scope) {
     this.show = true;
+    this.id = $scope.$id;
   }
 
   internalOnChange() {

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

@@ -1,160 +0,0 @@
-<div class="editor-row gf-form-group">
-	<div class="section" ng-repeat="yaxis in ctrl.panel.yaxes">
-
-		<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 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-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>
-
-	<div class="section">
-		<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">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">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">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 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>
-
-<div class="editor-row">
-	<div class="section">
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					Legend
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Show" model="ctrl.panel.legend.show" change="ctrl.refresh()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Table" model="ctrl.panel.legend.alignAsTable" change="ctrl.render()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Right side" model="ctrl.panel.legend.rightSide" change="ctrl.render()"></editor-checkbox>
-				</li>
-				<li ng-if="ctrl.panel.legend.rightSide" class="tight-form-item">
-					Side width
-				</li>
-				<li ng-if="ctrl.panel.legend.rightSide" style="width: 105px">
-					<input type="number" class="input-small tight-form-input" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right"
-																																																																								ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-		<div class="tight-form">
-			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
-					Hide series
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="With only nulls" model="ctrl.panel.legend.hideEmpty" change="ctrl.render()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item last">
-					<editor-checkbox text="With only zeroes" model="ctrl.panel.legend.hideZero" change="ctrl.render()"></editor-checkbox>
-				</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">
-					Values
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Min" model="ctrl.panel.legend.min" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Max" model="ctrl.panel.legend.max" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Avg" model="ctrl.panel.legend.avg" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Current" model="ctrl.panel.legend.current" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					<editor-checkbox text="Total" model="ctrl.panel.legend.total" change="ctrl.legendValuesOptionChanged()"></editor-checkbox>
-				</li>
-				<li class="tight-form-item">
-					Decimals
-				</li>
-				<li style="width: 105px">
-					<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
-																																																																															ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-	</div>
-</div>

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

@@ -123,8 +123,9 @@ class GraphCtrl extends MetricsPanelCtrl {
   }
 
   onInitEditMode() {
-    this.addEditorTab('Axes', 'public/app/plugins/panel/graph/axisEditor.html', 2);
-    this.addEditorTab('Display', 'public/app/plugins/panel/graph/styleEditor.html', 3);
+    this.addEditorTab('Axes', 'public/app/plugins/panel/graph/tab_axes.html', 2);
+    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html', 3);
+    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html', 4);
 
     this.logScales = {
       'linear': 1,

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

@@ -0,0 +1,70 @@
+<div class="editor-row">
+	<div class="section gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
+
+		<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 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-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>
+
+	<div class="section gf-form-group">
+		<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">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">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">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 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>
+	</div>
+</div>

public/app/plugins/panel/graph/styleEditor.html → public/app/plugins/panel/graph/tab_display.html

@@ -1,5 +1,5 @@
-<div class="editor-row gf-form-group">
-  <div class="section">
+<div class="editor-row">
+  <div class="section gf-form-group">
     <h5 class="section-heading">Draw Modes</h5>
 		<gf-form-switch class="gf-form"
 			label="Bars" label-class="width-5"
@@ -14,7 +14,7 @@
 			checked="ctrl.panel.points" on-change="ctrl.render()">
 		</gf-form-switch>
 	</div>
-	<div class="section">
+	<div class="section gf-form-group">
 		<h5 class="section-heading">Mode Options</h5>
 		<div class="gf-form" ng-show="ctrl.panel.lines">
 			<label class="gf-form-label width-8">Fill</label>
@@ -39,7 +39,7 @@
 			checked="ctrl.panel.steppedLine" on-change="ctrl.render()">
 		</gf-form-switch>
 	</div>
-	<div class="section">
+	<div class="section gf-form-group">
 		<h5 class="section-heading">Misc options</h5>
 		<div class="gf-form">
 			<label class="gf-form-label width-7">Null value</label>
@@ -61,7 +61,7 @@
 		</div>
 	</div>
 
-	<div class="section">
+	<div class="section gf-form-group">
 		<h5 class="section-heading">Multiple Series</h5>
 		<gf-form-switch class="gf-form"
 			label="Stack" label-class="width-7"
@@ -82,7 +82,7 @@
 </div>
 
 <div class="editor-row">
-	<div class="section">
+	<div class="section gf-form-group">
 		<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
 		<div class="tight-form-container">
 			<div class="tight-form" ng-repeat="override in ctrl.panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">

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

@@ -0,0 +1,74 @@
+<div class="editor-row">
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Options</h5>
+		<gf-form-switch class="gf-form"
+			label="Show" label-class="width-7"
+			checked="ctrl.panel.legend.show" on-change="ctrl.refresh()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="As Table" label-class="width-7"
+			checked="ctrl.panel.legend.alignAsTable" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="To the right" label-class="width-7"
+			checked="ctrl.panel.legend.rightSide" on-change="ctrl.render()">
+		</gf-form-switch>
+
+		<div ng-if="ctrl.panel.legend.rightSide" class="gf-form">
+			<label class="gf-form-label width-7">Width</label>
+			<input type="number" class="gf-form-input max-width-5" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right" ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
+		</div>
+	</div>
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Values</h5>
+
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form"
+				label="Min" label-class="width-4"
+				checked="ctrl.panel.legend.min" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+
+			<gf-form-switch class="gf-form max-width-12"
+				label="Max" label-class="width-6" switch-class="max-width-5"
+				checked="ctrl.panel.legend.max" on-change="ctrl.legendCaluesOptionChanged()">
+			</gf-form-switch>
+		</div>
+
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form"
+				label="Avg" label-class="width-4"
+				checked="ctrl.panel.legend.avg" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+
+			<gf-form-switch class="gf-form max-width-12"
+				label="Current" label-class="width-6" switch-class="max-width-5"
+				checked="ctrl.panel.legend.current" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+		</div>
+
+		<div class="gf-form-inline">
+			<gf-form-switch class="gf-form"
+				label="Total" label-class="width-4"
+				checked="ctrl.panel.legend.total" on-change="ctrl.legendValuesOptionChanged()">
+			</gf-form-switch>
+
+			<div class="gf-form">
+				<label class="gf-form-label width-6">Decimals</label>
+				<input type="number" class="gf-form-input width-5" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right" ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+		</div>
+	</div>
+
+	<div class="section gf-form-group">
+		<h5 class="section-heading">Hide series</h5>
+		<gf-form-switch class="gf-form"
+			label="With only nulls" label-class="width-10"
+			checked="ctrl.panel.legend.hideEmpty" on-change="ctrl.render()">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form"
+			label="With only zeros" label-class="width-10"
+			checked="ctrl.panel.legend.hideZero" on-change="ctrl.render()">
+		</gf-form-switch>
+	</div>
+</div>