ux: dashboard settings progress

public/app/core/directives/dash_class.js

@@ -18,19 +18,6 @@ function (_, $, coreModule) {
           elem.toggleClass('panel-in-fullscreen', false);
         });
 
-        var lastHideControlsVal;
-        $scope.$watch('ctrl.dashboard.hideControls', function() {
-          if (!$scope.dashboard) {
-            return;
-          }
-
-          var hideControls = $scope.dashboard.hideControls;
-          if (lastHideControlsVal !== hideControls) {
-            elem.toggleClass('hide-controls', hideControls);
-            lastHideControlsVal = hideControls;
-          }
-        });
-
         $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) {
           elem.toggleClass('playlist-active', newValue === true);
         });

public/app/core/services/keybindingSrv.ts

@@ -84,10 +84,6 @@ export class KeybindingSrv {
       scope.broadcastRefresh();
     });
 
-    this.bind('mod+h', () => {
-      dashboard.hideControls = !dashboard.hideControls;
-    });
-
     this.bind('mod+s', e => {
       scope.appEvent('save-dashboard');
     });

public/app/features/dashboard/dashboard_model.ts

@@ -22,7 +22,6 @@ export class DashboardModel {
   graphTooltip: any;
   time: any;
   timepicker: any;
-  hideControls: any;
   templating: any;
   annotations: any;
   refresh: any;
@@ -67,7 +66,6 @@ export class DashboardModel {
     this.timezone = data.timezone || '';
     this.editable = data.editable !== false;
     this.graphTooltip = data.graphTooltip || 0;
-    this.hideControls = data.hideControls || false;
     this.time = data.time || {from: 'now-6h', to: 'now'};
     this.timepicker = data.timepicker || {};
     this.templating = this.ensureListExist(data.templating);

public/app/features/dashboard/partials/settings.html

@@ -60,7 +60,6 @@
 <!-- </div> -->
 <!--  -->
 <!-- <div ng&#45;if="editor.index == 2"> -->
-<!-- 	<gf&#45;time&#45;picker&#45;settings dashboard="ctrl.dashboard"></gf&#45;time&#45;picker&#45;settings> -->
 <!-- </div> -->
 <!--  -->
 <!-- </div> -->

public/app/features/dashboard/settings/settings.html

@@ -10,12 +10,55 @@
 	</a>
 </aside>
 
-<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'settings'">
+  <h3 class="dashboard-settings__header">
+    General
+  </h3>
+
+  <div class="gf-form-group">
+    <div class="gf-form">
+      <label class="gf-form-label width-7">Name</label>
+      <input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-7">Description</label>
+      <input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-7">
+        Tags
+        <info-popover mode="right-normal">Press enter to add a tag</info-popover>
+      </label>
+      <bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
+      </bootstrap-tagsinput>
+    </div>
+    <folder-picker initial-title="ctrl.dashboard.meta.folderTitle"
+                   initial-folder-id="ctrl.dashboard.folderId"
+                   on-change="ctrl.onFolderChange($folder)"
+                   label-class="width-7">
+    </folder-picker>
+    <gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-7">
+    </gf-form-switch>
+  </div>
+
+  <gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
+
+  <h5 class="section-heading">Panel Options</h5>
+  <div class="gf-form">
+    <label class="gf-form-label width-11">
+      Graph Tooltip
+      <info-popover mode="right-normal">
+        Cycle between options using Shortcut: CTRL+O or CMD+O
+      </info-popover>
+    </label>
+    <div class="gf-form-select-wrapper">
+      <select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
+    </div>
+  </div>
 </div>
 
 <div class="dashboard-settings__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
 </div>
 
-<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'">
-	annotationus
+<div class="dashboard-settings__content" ng-if="ctrl.viewId === 'templating'"  ng-include="'public/app/features/templating/partials/editor.html'">
 </div>

public/app/features/dashboard/settings/settings.ts

@@ -10,7 +10,6 @@ export class SettingsCtrl {
 
   sections: any[] = [
     {title: 'General',     id: 'settings', icon: "fa fa-fw fa-sliders"},
-    {title: 'Timepicker',  id: 'timepicker', icon: "fa fa-fw fa-clock-o"},
     {title: 'Annotations', id: 'annotations', icon: "fa fa-fw fa-comment-o"},
     {title: 'Templating',  id: 'templating', icon: "fa fa-fw fa-dollar"},
     {title: 'Links',       id: 'links', icon: "fa fa-fw fa-external-link"},

public/app/features/dashboard/timepicker/settings.html

@@ -1,14 +1,24 @@
 <div class="editor-row">
+	<h5 class="section-heading">Time Options</h5>
+
   <div class="gf-form-group">
-    <div class="gf-form">
-      <span class="gf-form-label width-10">Auto-refresh</span>
-      <input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
-    </div>
-    <div class="gf-form">
-      <span class="gf-form-label width-10">Now delay now-</span>
-      <input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.nowDelay" placeholder="0m" valid-time-span bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
-        data-placement="right">
-    </div>
-    <gf-form-switch class="gf-form" label="Hide time picker" checked="ctrl.panel.hidden" label-class="width-10"></gf-form-switch>
-  </div>
+		<div class="gf-form">
+			<label class="gf-form-label width-10">Timezone</label>
+			<div class="gf-form-select-wrapper">
+				<select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
+			</div>
+		</div>
+
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Auto-refresh</span>
+			<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.refresh_intervals" array-join>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label width-10">Now delay now-</span>
+			<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.panel.nowDelay" placeholder="0m" valid-time-span bs-tooltip="'Enter 1m to ignore the last minute (because it can contain incomplete metrics)'"
+																																																												 data-placement="right">
+		</div>
+
+		<gf-form-switch class="gf-form" label="Hide time picker" checked="ctrl.panel.hidden" label-class="width-10"></gf-form-switch>
+	</div>
 </div>

public/app/features/templating/partials/editor.html

@@ -1,325 +1,293 @@
+<h3 class="dashboard-settings__header">Templating</h3>
+
 <div ng-controller="VariableEditorCtrl" ng-init="init()">
-  <div class="tabbed-view-header">
-    <h2 class="tabbed-view-title">
-      Templating
-    </h2>
+	<div ng-if="mode === 'list'">
+		<div ng-if="variables.length === 0">
+			<em>No template variables defined</em>
+			<br /> <br />
+		</div>
+		<table class="filter-table filter-table--hover">
+			<thead>
+				<tr>
+					<th>Variable</th>
+					<th>Definition</th>
+					<th colspan="5"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="variable in variables">
+					<td style="width: 1%">
+						<span ng-click="edit(variable)" class="pointer template-variable">
+							${{variable.name}}
+						</span>
+					</td>
+					<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
+						{{variable.query}}
+					</td>
 
-    <ul class="gf-tabs">
-      <li class="gf-tabs-item" >
-        <a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">
-          Variables
-        </a>
-      </li>
-      <li class="gf-tabs-item" ng-show="mode === 'edit'">
-        <a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
-          Edit
-        </a>
-      </li>
-      <li class="gf-tabs-item" ng-show="mode === 'new'">
-        <span class="active gf-tabs-link">New</span>
-      </li>
-			<li class="gf-tabs-item" >
-        <a class="gf-tabs-link" ng-click="mode = 'help';" ng-class="{active: mode === 'help'}">
-          Help
-        </a>
-      </li>
-    </ul>
+					<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
+					<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
+					<td style="width: 1%">
+						<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
+							Duplicate
+						</a>
+					</td>
+					<td style="width: 1%">
+						<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
+							<i class="fa fa-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
 
-    <button class="tabbed-view-close-btn" ng-click="dismiss();">
-      <i class="fa fa-remove"></i>
-    </button>
-  </div>
+	<div ng-show="mode === 'help'">
+		<div class="grafana-info-box col-lg-8">
+			<h5>What does templating do?</h5>
+			<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
+			and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
+			the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
+			<br>
+			<br>
 
-  <div class="tabbed-view-body">
+			Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
+			</p>
+		</div>
+	</div>
 
-    <div ng-if="mode === 'list'">
-      <div ng-if="variables.length === 0">
-        <em>No template variables defined</em>
-        <br /> <br />
-			</div>
-      <table class="filter-table filter-table--hover">
-      	<thead>
-      		<tr>
-						<th>Variable</th>
-						<th>Definition</th>
-						<th colspan="5"></th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr ng-repeat="variable in variables">
-						<td style="width: 1%">
-							<span ng-click="edit(variable)" class="pointer template-variable">
-								${{variable.name}}
-							</span>
-						</td>
-						<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
-							{{variable.query}}
-						</td>
+	<div class="gf-form" ng-show="mode === 'list'">
+		<div class="gf-form-button-row">
+			<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
+		</div>
+	</div>
 
-						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-						<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
-						<td style="width: 1%">
-							<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
-								Duplicate
-							</a>
-						</td>
-						<td style="width: 1%">
-							<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
-								<i class="fa fa-remove"></i>
-							</a>
-						</td>
-					</tr>
-				</tbody>
-      </table>
-    </div>
+	<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
+		<h5 class="section-heading">Variable</h5>
+		<div class="gf-form-group">
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-19">
+					<span class="gf-form-label width-6">Name</span>
+					<input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
+				</div>
+				<div class="gf-form max-width-19">
+					<span class="gf-form-label width-6">
+						Type
+						<info-popover mode="right-normal">
+							{{variableTypes[current.type].description}}
+						</info-popover>
+					</span>
+					<div class="gf-form-select-wrapper max-width-17">
+						<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
+					</div>
+				</div>
+			</div>
 
-    <div ng-show="mode === 'help'">
-			<div class="grafana-info-box col-lg-8">
-				<h5>What does templating do?</h5>
-				<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
-				and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
-				the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
-				<br>
-				<br>
+			<div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
+				<span class="gf-form-label gf-form-label--error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
+			</div>
 
-				Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
-				</p>
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-19">
+					<span class="gf-form-label width-6">Label</span>
+					<input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input>
+				</div>
+				<div class="gf-form max-width-19">
+					<span class="gf-form-label width-6">Hide</span>
+					<div class="gf-form-select-wrapper max-width-15">
+						<select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
+					</div>
+				</div>
 			</div>
 		</div>
 
-    <div class="gf-form" ng-show="mode === 'list'">
-      <div class="gf-form-button-row">
-        <a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
-      </div>
-    </div>
-
-    <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
-      <h5 class="section-heading">Variable</h5>
-      <div class="gf-form-group">
-				<div class="gf-form-inline">
-          <div class="gf-form max-width-19">
-            <span class="gf-form-label width-6">Name</span>
-            <input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
-          </div>
-          <div class="gf-form max-width-19">
-            <span class="gf-form-label width-6">
-              Type
-              <info-popover mode="right-normal">
-                {{variableTypes[current.type].description}}
-              </info-popover>
-            </span>
-            <div class="gf-form-select-wrapper max-width-17">
-              <select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
-            </div>
-          </div>
-        </div>
-
-				<div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
-          <span class="gf-form-label gf-form-label--error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
-        </div>
-
-        <div class="gf-form-inline">
-          <div class="gf-form max-width-19">
-            <span class="gf-form-label width-6">Label</span>
-            <input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input>
-          </div>
-          <div class="gf-form max-width-19">
-            <span class="gf-form-label width-6">Hide</span>
-            <div class="gf-form-select-wrapper max-width-15">
-              <select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
-            </div>
-          </div>
-        </div>
-      </div>
+		<div ng-if="current.type === 'interval'" class="gf-form-group">
+			<h5 class="section-heading">Interval Options</h5>
 
-      <div ng-if="current.type === 'interval'" class="gf-form-group">
-        <h5 class="section-heading">Interval Options</h5>
-
-        <div class="gf-form">
-          <span class="gf-form-label width-9">Values</span>
-          <input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input>
-        </div>
+			<div class="gf-form">
+				<span class="gf-form-label width-9">Values</span>
+				<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input>
+			</div>
 
-        <div class="gf-form-inline">
-          <gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()">
-          </gf-form-switch>
+			<div class="gf-form-inline">
+				<gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()">
+				</gf-form-switch>
 
-          <div class="gf-form">
-            <span class="gf-form-label width-9" ng-show="current.auto">
-              Step count <tip>How many times should the current time range be divided to calculate the value</tip>
-            </span>
-            <div class="gf-form-select-wrapper max-width-10" ng-show="current.auto">
-              <select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [1,2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select>
-            </div>
-          </div>
-          <div class="gf-form">
-            <span class="gf-form-label" ng-show="current.auto">
-              Min interval <tip>The calculated value will not go below this threshold</tip>
-            </span>
-            <input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input>
-          </div>
-        </div>
-      </div>
+				<div class="gf-form">
+					<span class="gf-form-label width-9" ng-show="current.auto">
+						Step count <tip>How many times should the current time range be divided to calculate the value</tip>
+					</span>
+					<div class="gf-form-select-wrapper max-width-10" ng-show="current.auto">
+						<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [1,2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select>
+					</div>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label" ng-show="current.auto">
+						Min interval <tip>The calculated value will not go below this threshold</tip>
+					</span>
+					<input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input>
+				</div>
+			</div>
+		</div>
 
-      <div ng-if="current.type === 'custom'" class="gf-form-group">
-        <h5 class="section-heading">Custom Options</h5>
-        <div class="gf-form">
-          <span class="gf-form-label width-14">Values separated by comma</span>
-          <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
-        </div>
-      </div>
+		<div ng-if="current.type === 'custom'" class="gf-form-group">
+			<h5 class="section-heading">Custom Options</h5>
+			<div class="gf-form">
+				<span class="gf-form-label width-14">Values separated by comma</span>
+				<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
+			</div>
+		</div>
 
-      <div ng-if="current.type === 'constant'" class="gf-form-group">
-        <h5 class="section-heading">Constant options</h5>
-        <div class="gf-form">
-          <span class="gf-form-label">Value</span>
-          <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input>
-        </div>
-      </div>
+		<div ng-if="current.type === 'constant'" class="gf-form-group">
+			<h5 class="section-heading">Constant options</h5>
+			<div class="gf-form">
+				<span class="gf-form-label">Value</span>
+				<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input>
+			</div>
+		</div>
 
-      <div ng-if="current.type === 'query'" class="gf-form-group">
-        <h5 class="section-heading">Query Options</h5>
+		<div ng-if="current.type === 'query'" class="gf-form-group">
+			<h5 class="section-heading">Query Options</h5>
 
-        <div class="gf-form-inline">
-          <div class="gf-form max-width-21">
-            <span class="gf-form-label width-7">Data source</span>
-            <div class="gf-form-select-wrapper max-width-14">
-              <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required>
-                <option value="" ng-if="false"></option>
-              </select>
-            </div>
-          </div>
-          <div class="gf-form max-width-21">
-            <span class="gf-form-label width-7">
-              Refresh
-              <info-popover mode="right-normal">
-                When to update the values of this variable.
-              </info-popover>
-            </span>
-            <div class="gf-form-select-wrapper max-width-14">
-              <select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
-            </div>
-          </div>
-        </div>
-        <div class="gf-form">
-          <span class="gf-form-label width-7">Query</span>
-          <input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input>
-        </div>
-        <div class="gf-form">
-          <span class="gf-form-label width-7">
-            Regex
-            <info-popover mode="right-normal">
-              Optional, if you want to extract part of a series name or metric node segment.
-            </info-popover>
-          </span>
-          <input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
-        </div>
-        <div class="gf-form max-width-21">
-          <span class="gf-form-label width-7">
-            Sort
-            <info-popover mode="right-normal">
-              How to sort the values of this variable.
-            </info-popover>
-          </span>
-          <div class="gf-form-select-wrapper max-width-14">
-            <select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
-          </div>
-        </div>
-      </div>
+			<div class="gf-form-inline">
+				<div class="gf-form max-width-21">
+					<span class="gf-form-label width-7">Data source</span>
+					<div class="gf-form-select-wrapper max-width-14">
+						<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required>
+							<option value="" ng-if="false"></option>
+						</select>
+					</div>
+				</div>
+				<div class="gf-form max-width-21">
+					<span class="gf-form-label width-7">
+						Refresh
+						<info-popover mode="right-normal">
+							When to update the values of this variable.
+						</info-popover>
+					</span>
+					<div class="gf-form-select-wrapper max-width-14">
+						<select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
+					</div>
+				</div>
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label width-7">Query</span>
+				<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input>
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label width-7">
+					Regex
+					<info-popover mode="right-normal">
+						Optional, if you want to extract part of a series name or metric node segment.
+					</info-popover>
+				</span>
+				<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
+			</div>
+			<div class="gf-form max-width-21">
+				<span class="gf-form-label width-7">
+					Sort
+					<info-popover mode="right-normal">
+						How to sort the values of this variable.
+					</info-popover>
+				</span>
+				<div class="gf-form-select-wrapper max-width-14">
+					<select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
+				</div>
+			</div>
+		</div>
 
-      <div ng-show="current.type === 'datasource'" class="gf-form-group">
-        <h5 class="section-heading">Data source options</h5>
+		<div ng-show="current.type === 'datasource'" class="gf-form-group">
+			<h5 class="section-heading">Data source options</h5>
 
-        <div class="gf-form">
-          <label class="gf-form-label width-12">Type</label>
-          <div class="gf-form-select-wrapper max-width-18">
-            <select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
-          </div>
-        </div>
+			<div class="gf-form">
+				<label class="gf-form-label width-12">Type</label>
+				<div class="gf-form-select-wrapper max-width-18">
+					<select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
+				</div>
+			</div>
 
-        <div class="gf-form">
-          <label class="gf-form-label width-12">
-            Instance name filter
-            <info-popover mode="right-normal">
-              Regex filter for which data source instances to choose from in
-              the variable value dropdown. Leave empty for all.
-              <br><br>
-              Example: <code>/^prod/</code>
+			<div class="gf-form">
+				<label class="gf-form-label width-12">
+					Instance name filter
+					<info-popover mode="right-normal">
+						Regex filter for which data source instances to choose from in
+						the variable value dropdown. Leave empty for all.
+						<br><br>
+						Example: <code>/^prod/</code>
 
-            </info-popover>
-          </label>
-          <input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
-        </div>
-      </div>
+					</info-popover>
+				</label>
+				<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
+			</div>
+		</div>
 
-      <div ng-if="current.type === 'adhoc'" class="gf-form-group">
-        <h5 class="section-heading">Options</h5>
-        <div class="gf-form max-width-21">
-          <span class="gf-form-label width-8">Data source</span>
-          <div class="gf-form-select-wrapper max-width-14">
-            <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()">
-              <option value="" ng-if="false"></option>
-            </select>
-          </div>
-        </div>
-      </div>
+		<div ng-if="current.type === 'adhoc'" class="gf-form-group">
+			<h5 class="section-heading">Options</h5>
+			<div class="gf-form max-width-21">
+				<span class="gf-form-label width-8">Data source</span>
+				<div class="gf-form-select-wrapper max-width-14">
+					<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()">
+						<option value="" ng-if="false"></option>
+					</select>
+				</div>
+			</div>
+		</div>
 
-      <div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
-        <h5 class="section-heading">Selection Options</h5>
-        <div class="section">
-          <gf-form-switch class="gf-form"
-                          label="Multi-value"
-                          label-class="width-10"
-                          tooltip="Enables multiple values to be selected at the same time"
-                          checked="current.multi"
-                          on-change="runQuery()">
-          </gf-form-switch>
-          <gf-form-switch class="gf-form"
-                          label="Include All option"
-                          label-class="width-10"
-                          checked="current.includeAll"
-                          on-change="runQuery()">
-          </gf-form-switch>
-        </div>
-        <div class="gf-form" ng-if="current.includeAll">
-          <span class="gf-form-label width-10">Custom all value</span>
-          <input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
-        </div>
-      </div>
+		<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
+			<h5 class="section-heading">Selection Options</h5>
+			<div class="section">
+				<gf-form-switch class="gf-form"
+										label="Multi-value"
+					label-class="width-10"
+		 tooltip="Enables multiple values to be selected at the same time"
+	 checked="current.multi"
+	on-change="runQuery()">
+				</gf-form-switch>
+				<gf-form-switch class="gf-form"
+										label="Include All option"
+					label-class="width-10"
+		 checked="current.includeAll"
+	 on-change="runQuery()">
+				</gf-form-switch>
+			</div>
+			<div class="gf-form" ng-if="current.includeAll">
+				<span class="gf-form-label width-10">Custom all value</span>
+				<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
+			</div>
+		</div>
 
-      <div class="gf-form-group" ng-if="current.type === 'query'">
-        <h5>Value groups/tags (Experimental feature)</h5>
-        <gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()">
-        </gf-form-switch>
-        <div class="gf-form last" ng-if="current.useTags">
-          <span class="gf-form-label width-10">Tags query</span>
-          <input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
-        </div>
-        <div class="gf-form" ng-if="current.useTags">
-          <li class="gf-form-label width-10">Tag values query</li>
-          <input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
-        </div>
-      </div>
+		<div class="gf-form-group" ng-if="current.type === 'query'">
+			<h5>Value groups/tags (Experimental feature)</h5>
+			<gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()">
+			</gf-form-switch>
+			<div class="gf-form last" ng-if="current.useTags">
+				<span class="gf-form-label width-10">Tags query</span>
+				<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
+			</div>
+			<div class="gf-form" ng-if="current.useTags">
+				<li class="gf-form-label width-10">Tag values query</li>
+				<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
+			</div>
+		</div>
 
-      <div class="gf-form-group" ng-show="current.options.length">
-        <h5>Preview of values (shows max 20)</h5>
-        <div class="gf-form-inline">
-          <div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
-            <span class="gf-form-label">{{option.text}}</span>
-          </div>
-        </div>
-      </div>
+		<div class="gf-form-group" ng-show="current.options.length">
+			<h5>Preview of values (shows max 20)</h5>
+			<div class="gf-form-inline">
+				<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
+					<span class="gf-form-label">{{option.text}}</span>
+				</div>
+			</div>
+		</div>
 
-      <div class="alert alert-info gf-form-group" ng-if="infoText">
-        {{infoText}}
-      </div>
+		<div class="alert alert-info gf-form-group" ng-if="infoText">
+			{{infoText}}
+		</div>
 
-      <div class="gf-form-button-row p-y-0">
-        <button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
-        <button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
-      </div>
+		<div class="gf-form-button-row p-y-0">
+			<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
+			<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
+		</div>
 
-    </form>
-  </div>
+	</form>
 </div>
 

public/sass/components/_dashboard_settings.scss

@@ -38,6 +38,13 @@
   margin-bottom: 20px;
   padding-right: 60px;
   white-space: nowrap;
+
+  i {
+    font-size: 25px;
+    position: relative;
+    top: 1px;
+    padding-right: 5px;
+  }
 }
 
 .dashboard-settings__header {

public/sass/components/_navbar.scss

@@ -87,20 +87,6 @@
   }
 }
 
-.navbar-page-btn-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
-.navbar-section-wrapper {
-  position: relative;
-  float: left;
-}
-
-.navbar-mini-btn-wrapper {
-  padding: 15px;
-}
-
 .navbar-buttons {
   height: $navbarHeight;
   display: flex;

public/sass/components/_view_states.scss

@@ -1,19 +1,5 @@
-@mixin hide-controls() {
-  .add-row-panel-hint,
-  .dash-row-menu-container {
-    display: none;
-  }
-  .panel-drop-zone {
-    visibility: hidden;
-  }
-}
-
-.hide-controls {
-  @include hide-controls();
-}
 
 .page-kiosk-mode {
-  @include hide-controls();
   dashnav {
     display: none;
   }