Progress on template editor & new templating features

src/app/controllers/dashboardCtrl.js

@@ -11,9 +11,16 @@ function (angular, $, config, _) {
   var module = angular.module('grafana.controllers');
 
   module.controller('DashboardCtrl', function(
-      $scope, $rootScope, dashboardKeybindings,
-      filterSrv, dashboardSrv, dashboardViewStateSrv,
-      panelMoveSrv, timer, $timeout) {
+      $scope,
+      $rootScope,
+      dashboardKeybindings,
+      filterSrv,
+      templateSrv,
+      dashboardSrv,
+      dashboardViewStateSrv,
+      panelMoveSrv,
+      timer,
+      $timeout) {
 
     $scope.editor = { index: 0 };
     $scope.panelNames = config.panels;
@@ -47,6 +54,7 @@ function (angular, $, config, _) {
 
       $scope.filter = filterSrv;
       $scope.filter.init($scope.dashboard);
+      templateSrv.init($scope.dashboard);
 
       $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable;
 

src/app/controllers/submenuCtrl.js

@@ -50,7 +50,6 @@ function (angular, app, _) {
     $scope.applyFilter = function(templateParam) {
       return datasourceSrv.default.metricFindQuery($scope.filter, templateParam.query)
         .then(function (results) {
-          templateParam.editing = undefined;
           templateParam.options = _.map(results, function(node) {
             return { text: node.text, value: node.text };
           });

src/app/controllers/templateEditorCtrl.js

@@ -10,7 +10,7 @@ function (angular, _) {
   module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) {
 
     var replacementDefaults = {
-      type: 'metric query',
+      type: 'query',
       datasource: null,
       refresh_on_load: false,
       name: '',
@@ -24,8 +24,17 @@ function (angular, _) {
       $scope.templateParameters = $scope.filter.templateParameters;
       $scope.reset();
 
-      $scope.$watch('editor.index', function(newVal) {
-        if (newVal !== 2) { $scope.reset(); }
+      _.each($scope.templateParameters, function(param) {
+        if (param.datasource === void 0) {
+          param.datasource = null;
+          param.type = 'query';
+        }
+      });
+
+      $scope.$watch('editor.index', function(index) {
+        if ($scope.currentIsNew === false && index === 1) {
+          $scope.reset();
+        }
       });
     };
 
@@ -33,6 +42,11 @@ function (angular, _) {
       $scope.current.datasource = $scope.currentDatasource.name;
       $scope.templateParameters.push($scope.current);
       $scope.reset();
+      $scope.editor.index = 0;
+    };
+
+    $scope.runQuery = function() {
+      $scope.filter.refreshTemplateParameter($scope.current);
     };
 
     $scope.edit = function(param) {
@@ -47,10 +61,14 @@ function (angular, _) {
       $scope.editor.index = 2;
     };
 
+    $scope.update = function() {
+      $scope.reset();
+      $scope.editor.index = 0;
+    };
+
     $scope.reset = function() {
       $scope.currentIsNew = true;
       $scope.current = angular.copy(replacementDefaults);
-      $scope.editor.index = 0;
     };
 
     $scope.removeTemplateParam = function(templateParam) {

src/app/partials/influxdb/editor.html

@@ -14,7 +14,7 @@
             <a class="pointer dropdown-toggle"
                data-toggle="dropdown"
                tabindex="1">
-              <i class="icon-cog"></i>
+              <i class="icon icon-cog"></i>
             </a>
             <ul class="dropdown-menu pull-right" role="menu">
               <li role="menuitem">
@@ -26,7 +26,7 @@
           </li>
           <li>
             <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-              <i class="icon-remove"></i>
+              <i class="icon icon-remove"></i>
             </a>
           </li>
         </ul>
@@ -171,7 +171,9 @@
       </div>
     </div>
   </div>
+</div>
 
+<div class="editor-row">
   <div class="pull-left metrics-editor-help" style="margin-top: 30px;">
     <div class="span6">
       <span class="pointer">

src/app/partials/inspector.html

@@ -1,69 +1,80 @@
 <div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
-  <div class="pull-right editor-title">Inspector</div>
+	<div class="dashboard-editor-header">
+		<div class="dashboard-editor-title">
+			<i class="icon icon-eye-open"></i>
+			Inspector
+		</div>
 
-  <div ng-model="editor.index" bs-tabs>
-    <div ng-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}">
-    </div>
-  </div>
+		<div ng-model="editor.index" bs-tabs>
+			<div ng-repeat="tab in ['Request', 'Response', 'JS Error']" data-title="{{tab}}">
+			</div>
+		</div>
 
-  <div ng-if="editor.index == 0">
-    <h5>Request details</h5>
-    <table class="table table-striped small inspector-request-table">
-      <tr>
-        <td>Url</td>
-        <td>{{inspector.error.config.url}}</td>
-      </tr>
-      <tr>
-        <td>Method</td>
-        <td>{{inspector.error.config.method}}</td>
-      </tr>
-      <tr ng-repeat="(key, value) in inspector.error.config.headers">
-        <td>
-          {{key}}
-        </td>
-        <td>
-          {{value}}
-        </td>
-      </tr>
-    </table>
+	</div>
 
-    <h5>Request parameters</h5>
-    <table class="table table-striped small inspector-request-table">
-        <tr ng-repeat="param in request_parameters">
-          <td>
-            {{param.key}}
-          </td>
-          <td>
-            {{param.value}}
-          </td>
-        </tr>
-    </table>
-  </div>
+	<div class="dashboard-editor-body">
 
-  <div ng-if="editor.index == 1">
-		<h5 ng-if="response" ng-bind="response"></h5>
+		<div ng-if="editor.index == 0">
+			<h5>Request details</h5>
+			<table class="table table-striped small inspector-request-table">
+				<tr>
+					<td>Url</td>
+					<td>{{inspector.error.config.url}}</td>
+				</tr>
+				<tr>
+					<td>Method</td>
+					<td>{{inspector.error.config.method}}</td>
+				</tr>
+				<tr ng-repeat="(key, value) in inspector.error.config.headers">
+					<td>
+						{{key}}
+					</td>
+					<td>
+						{{value}}
+					</td>
+				</tr>
+			</table>
 
-    <div ng-if="response_html">
-      <div iframe-content="response_html"></div>
-    </div>
+			<h5>Request parameters</h5>
+			<table class="table table-striped small inspector-request-table">
+				<tr ng-repeat="param in request_parameters">
+					<td>
+						{{param.key}}
+					</td>
+					<td>
+						{{param.value}}
+					</td>
+				</tr>
+			</table>
+		</div>
 
-  </div>
+		<div ng-if="editor.index == 1">
+			<h5 ng-if="response" ng-bind="response"></h5>
 
-  <div ng-if="editor.index == 2">
+			<div ng-if="response_html">
+				<div iframe-content="response_html"></div>
+			</div>
 
-    <label>Message:</label>
-    <pre>
-      {{message}}
-    </pre>
+		</div>
 
-    <label>Stack trace:</label>
-    <pre>
-      {{stack_trace}}
-    </pre>
+		<div ng-if="editor.index == 2">
 
-  </div>
+			<label>Message:</label>
+			<pre>
+			{{message}}
+		</pre>
+
+			<label>Stack trace:</label>
+			<pre>
+			{{stack_trace}}
+		</pre>
+
+		</div>
+
+	</div>
 
 </div>
+
 <div class="modal-footer">
-  <button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
+	<button type="button" class="btn btn-info" ng-click="dismiss()">Close</button>
 </div>

src/app/partials/opentsdb/editor.html

@@ -12,7 +12,7 @@
             <a  class="pointer dropdown-toggle"
                 data-toggle="dropdown"
                 tabindex="1">
-              <i class="icon-cog"></i>
+              <i class="icon icon-cog"></i>
             </a>
             <ul class="dropdown-menu pull-right" role="menu">
               <li role="menuitem">
@@ -25,7 +25,7 @@
           </li>
           <li>
             <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-              <i class="icon-remove"></i>
+              <i class="icon icon-remove"></i>
             </a>
           </li>
         </ul>

src/app/partials/templating_editor.html

@@ -22,8 +22,8 @@
 					</div>
 					<table class="grafana-options-table">
 						<tr ng-repeat="templateParam in templateParameters">
-							<td>
-								{{templateParam.name}}
+							<td style="width: 1%">
+								[[{{templateParam.name}}]]
 							</td>
 							<td class="max-width" style="max-width: 200px;">
 								{{templateParam.query}}
@@ -54,7 +54,7 @@
 				</div>
 				<div class="editor-option">
 					<label class="small">Type</label>
-					<select class="input-medium" ng-model="current.type" ng-options="f for f in ['metric query', 'custom']"></select>
+					<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'custom']"></select>
 				</div>
 				<div class="editor-option">
 					<label class="small">Datasource</label>
@@ -63,9 +63,29 @@
 			</div>
 
 			<div class="editor-row">
-				<div class="editor-option">
-					<label class="small">Metric query</label>
-					<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="query"></input>
+				<div class="editor-option form-inline">
+					<label class="small">Metric name query</label>
+					<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
+					<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
+				</div>
+			</div>
+
+			<div class="editor-row" style="margin-top: 10px;">
+				<div class="editor-option form-inline">
+					<label class="small">Regex (optional, if you want to extract part of a series name or metric node segment)</label>
+					<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
+					<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
+				</div>
+			</div>
+
+			<div class="editor-row" style="margin-top: 10px;">
+				<div class="editor-option form-inline">
+					<label class="small">Current replacement values</label>
+					<ul>
+						<li ng-repeat="option in current.options">
+							{{option.text}}
+						</li>
+					</ul>
 				</div>
 			</div>
 
@@ -74,8 +94,8 @@
 	</div>
 
 	<div class="dashboard-editor-footer">
-		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="dismiss();">Update</button>
-		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="dismiss();">Add</button>
+		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
+		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
 		<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
 	</div>
 </div>

src/app/services/all.js

@@ -2,6 +2,7 @@ define([
   './alertSrv',
   './datasourceSrv',
   './filterSrv',
+  './templateSrv',
   './panelSrv',
   './timer',
   './panelMove',

src/app/services/datasourceSrv.js

@@ -12,7 +12,7 @@ function (angular, _, config) {
 
   var module = angular.module('grafana.services');
 
-  module.service('datasourceSrv', function($q, filterSrv, $http, $injector) {
+  module.service('datasourceSrv', function($q, $http, $injector) {
     var datasources = {};
     var metricSources = [];
     var annotationSources = [];

src/app/services/filterSrv.js

@@ -78,11 +78,6 @@ define([
         }
       },
 
-      removeTemplateParameter: function(templateParameter) {
-        this.templateParameters = _.without(this.templateParameters, templateParameter);
-        this.dashboard.templating.list = this.templateParameters;
-      },
-
       init: function(dashboard) {
         this.dashboard = dashboard;
         this.templateSettings = { interpolate : /\[\[([\s\S]+?)\]\]/g };

src/app/services/templateSrv.js

@@ -0,0 +1,21 @@
+define([
+  'angular',
+  'lodash',
+  'kbn',
+  'store'
+],
+function (angular) {
+  'use strict';
+
+  var module = angular.module('grafana.services');
+
+  module.service('templateSrv', function() {
+
+    this.init = function(dashboard) {
+      this.dashboard = dashboard;
+
+    };
+
+  });
+
+});

src/css/less/overrides.less

@@ -467,7 +467,6 @@ div.flot-text {
 /*************************
  *   Right Positions
  *************************/
-
 .popover {
   &.rightTop .arrow {
     top: 10%;
@@ -639,3 +638,4 @@ code, pre {
   background-color: @grafanaPanelBackground;
   color: @textColor;
 }
+

src/css/less/tables_lists.less

@@ -9,7 +9,12 @@
     padding: 5px 10px;
     white-space: nowrap;
     border-bottom: 1px solid @grafanaListBorderBottom;
-    border-top: 1px solid @grafanaListBorderTop;
+  }
+
+  tr:first-child {
+    td {
+      border-top: 1px solid @grafanaListBorderBottom;
+    }
   }
 
   td:first-child {

src/css/less/variables.dark.less

@@ -6,7 +6,7 @@
 // -------------------------
 @black:                 #000;
 @gray:                  #bbb;
-@grayDark:              #303030;
+@grayDark:              #242424;
 @grayDarker:            #1f1f1f;
 
 @grayLight:             #ADAFAE;
@@ -29,10 +29,6 @@
 // -------------------------
 @grafanaPanelBackground: @grayDarker;
 
-// Submenu
-@submenuBackground: #292929;
-@submenuBorder: #202020;
-
 // Tabs
 @fullEditBorder:          #555;
 
@@ -43,8 +39,8 @@
 @grafanaTargetColorHide:      darken(#c8c8c8, 25%);
 @grafanaTargetSegmentBorder:  #050505;
 
-@grafanaTargetFuncBackground: #444;
-@grafanaTargetFuncHightlight: #555;
+@grafanaTargetFuncBackground: #333;
+@grafanaTargetFuncHightlight: #444;
 
 // Scaffolding
 // -------------------------
@@ -133,7 +129,7 @@
 
 // Forms
 // -------------------------
-@inputBackground:               lighten(@grayDark,0%);
+@inputBackground:               lighten(@grayDark,5%);
 @inputBorder:                   lighten(@grayDark,5%);
 @inputBorderRadius:             @baseBorderRadius;
 @inputDisabledBackground:       #555;