Progress on new filter/templating editor

package.json

@@ -4,7 +4,7 @@
     "company": "Coding Instinct AB"
   },
   "name": "grafana",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
     "url": "http://github.com/torkelo/grafana.git"

src/app/controllers/all.js

@@ -14,4 +14,5 @@ define([
   './inspectCtrl',
   './opentsdbTargetCtrl',
   './annotationsEditorCtrl',
+  './templateEditorCtrl',
 ], function () {});

src/app/controllers/annotationsEditorCtrl.js

@@ -1,10 +1,9 @@
 define([
   'angular',
-  'app',
   'lodash',
   'jquery'
 ],
-function (angular, app, _, $) {
+function (angular, _, $) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
@@ -63,7 +62,8 @@ function (angular, app, _, $) {
     $scope.add = function() {
       $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
       $scope.annotations.push($scope.currentAnnotation);
-      $scope.currentAnnotation = angular.copy(annotationDefaults);
+      $scope.reset();
+      $scope.editor.index = 0;
     };
 
     $scope.removeAnnotation = function(annotation) {

src/app/controllers/templateEditorCtrl.js

@@ -0,0 +1,50 @@
+define([
+  'angular',
+  'lodash',
+],
+function (angular, _) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('TemplateEditorCtrl', function($scope, datasourceSrv) {
+
+    var replacementDefaults = {
+      type: 'metric query',
+      datasource: null,
+      refresh_on_load: false,
+      name: '',
+      options: [],
+    };
+
+    $scope.init = function() {
+      $scope.editor = { index: 0 };
+      $scope.datasources = datasourceSrv.getMetricSources();
+      $scope.currentDatasource = _.findWhere($scope.datasources, { default: true });
+      $scope.templateParameters = $scope.filter.templateParameters;
+      $scope.reset();
+    };
+
+    $scope.add = function() {
+      $scope.current.datasource = $scope.currentDatasource.name;
+      $scope.templateParameters.push($scope.current);
+      $scope.reset();
+    };
+
+    $scope.reset = function() {
+      $scope.currentIsNew = true;
+      $scope.current = angular.copy(replacementDefaults);
+      $scope.editor.index = 0;
+    };
+
+    $scope.removeTemplateParam = function(templateParam) {
+      var index = _.indexOf($scope.templateParameters, templateParam);
+      $scope.templateParameters.splice(index, 1);
+    };
+
+    $scope.setDatasource = function() {
+    };
+
+  });
+
+});

src/app/panels/graph/styleEditor.html

@@ -67,8 +67,7 @@
   <div class="section">
 		<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
 		<div>
-		<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
+			<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
-			<div class="grafana-target-inner-wrapper">
 				<div class="grafana-target-inner">
 
 					<ul class="grafana-target-controls-left">
@@ -83,11 +82,11 @@
 						</li>
 						<li>
 							<input type="text"
-										ng-model="override.alias"
+							ng-model="override.alias"
-                    bs-typeahead="getSeriesNames"
+							bs-typeahead="getSeriesNames"
-										ng-blur="render()"
+							ng-blur="render()"
-										data-min-length=0 data-items=100
+							data-min-length=0 data-items=100
-										class="input-medium grafana-target-segment-input" >
+							class="input-medium grafana-target-segment-input" >
 						</li>
 						<li class="grafana-target-segment" ng-repeat="option in currentOverrides">
 							<i class="pointer icon-remove" ng-click="removeOverride(option)"></i>
@@ -103,7 +102,6 @@
 				</div>
 			</div>
 		</div>
-		</div>
 
 		<button class="btn btn-success" style="margin-top: 20px" ng-click="addSeriesOverride()">Add series override rule</button>
 	</div>

src/app/partials/playlist.html

@@ -38,8 +38,8 @@
 				<div class="editor-option">
 					<div class="span4">
 						<span><i class="icon-question-sign"></i>
-							Dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
+							dashboards available in the playlist are only the once marked as favorites (stored in local browser storage).
-							To mark a dashboard as favorite, use save icon in the menu and in the dropdown select Mark as favorite
+							to mark a dashboard as favorite, use save icon in the menu and in the dropdown select mark as favorite
 							<br/><br/>
 						</span>
 					</div>

src/app/partials/templating_editor.html

@@ -1,23 +1,86 @@
-<div class="dashboard-editor-header">
+<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
-	<div class="dashboard-editor-title">
+		<div class="dashboard-editor-title">
-		<i class="icon icon-code"></i>
+			<i class="icon icon-code"></i>
-		Templating
+			Templating
-	</div>
-
-	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
 		</div>
+
+		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
+			</div>
+		</div>
+
 	</div>
 
-</div>
+	<div class="dashboard-editor-body">
-
-<div class="dashboard-editor-body">
 
 		<div ng-if="editor.index == 0">
+
+			<div class="editor-row">
+				<div class="span4">
+					<div ng-if="templateParameters.length === 0">
+						<em>No replacements defined</em>
+					</div>
+					<table class="table table-striped">
+						<tr ng-repeat="templateParam in templateParameters">
+							<td>{{templateParam.name}}</td>
+							<td>{{templateParam.query}}</td>
+							<td>
+								<a ng-click="asd">
+									Edit
+								</a>
+							</td>
+							<td>
+								<a ng-click="removeTemplateParam(templateParam)">
+									Remove
+								</a>
+							</td>
+						</tr>
+					</table>
+				</div>
+			</div>
+
 		</div>
 
+		<div ng-if="editor.index == 1">
+			<div class="editor-row">
+				<div class="editor-option">
+					<label class="small">Replacement name</label>
+					<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
+				</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>
+				</div>
+				<div class="editor-option">
+					<label class="small">Datasource</label>
+					<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
+				</div>
+			</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>
+			</div>
+
+			<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add template replacement</button>
+		</div>
+
+	</div>
+
+	<div class="dashboard-editor-footer">
+		<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();">Close</button>
+	</div>
 </div>
 
-<div class="dashboard-editor-footer">
+<!-- <div class="span4"> -->
-		<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();">Close</button>
+	<!-- 	<tip class="info&#45;box"> -->
-</div>
+	<!-- 	<i class="icon&#45;question&#45;sign"></i> -->
+	<!-- 	The templating feature in Grafana lets easily create and manage templated queries. Templated queries use [[replacement]] syntax -->
+	<!-- 	to replace a part of your metric key or query. By using this feature you can make your dashboards more generic. You can for example create -->
+	<!-- 	a query replacement for your cluster name or server name. Then use that replacement in your metric queries and change -->
+	<!-- 	it globably for all graphs on the dashboard. -->
+	<!-- 	<br/><br/> -->
+	<!-- 	</tip> -->
+	<!-- </div> -->

src/app/services/datasourceSrv.js

@@ -20,10 +20,12 @@ function (angular, _, config) {
 
     this.init = function() {
       _.each(config.datasources, function(value, key) {
-        datasources[key] = this.datasourceFactory(value);
+        var ds = this.datasourceFactory(value);
         if (value.default) {
-          this.default = datasources[key];
+          this.default = ds;
+          ds.default = true;
         }
+        datasources[key] = ds;
       }, this);
 
       if (!this.default) {
@@ -37,6 +39,7 @@ function (angular, _, config) {
           metricSources.push({
             name: value.name,
             value: value.default ? null : key,
+            default: value.default,
           });
         }
         if (value.supportAnnotations) {

src/css/less/grafana.less

@@ -572,6 +572,15 @@ select.grafana-target-segment-input {
   }
 }
 
+// .panel-fullscreen {
+//   .dashboard-editor-header {
+//     margin-left: -20px;
+//     margin-right: -20px;
+//     background: @grayDark;
+//     padding-left: 20px;
+//   }
+// }
+
 .dashboard-editor-title {
   border-bottom: 1px solid @grayDark;
   padding-right: 20px;