More work on template editor

src/app/controllers/annotationsEditorCtrl.js

@@ -60,7 +60,6 @@ function (angular, _, $) {
     };
 
     $scope.add = function() {
-      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
       $scope.annotations.push($scope.currentAnnotation);
       $scope.reset();
       $scope.editor.index = 0;

src/app/controllers/templateEditorCtrl.js

@@ -23,6 +23,10 @@ function (angular, _) {
       $scope.currentDatasource = _.findWhere($scope.datasources, { default: true });
       $scope.templateParameters = $scope.filter.templateParameters;
       $scope.reset();
+
+      $scope.$watch('editor.index', function(newVal) {
+        if (newVal !== 2) { $scope.reset(); }
+      });
     };
 
     $scope.add = function() {
@@ -31,6 +35,18 @@ function (angular, _) {
       $scope.reset();
     };
 
+    $scope.edit = function(param) {
+      $scope.current = param;
+      $scope.currentIsNew = false;
+      $scope.currentDatasource = _.findWhere($scope.datasources, { name: param.datasource });
+
+      if (!$scope.currentDatasource) {
+        $scope.currentDatasource = $scope.datasources[0];
+      }
+
+      $scope.editor.index = 2;
+    };
+
     $scope.reset = function() {
       $scope.currentIsNew = true;
       $scope.current = angular.copy(replacementDefaults);
@@ -42,9 +58,6 @@ function (angular, _) {
       $scope.templateParameters.splice(index, 1);
     };
 
-    $scope.setDatasource = function() {
-    };
-
   });
 
 });

src/app/directives/grafanaVersionCheck.js

@@ -11,7 +11,7 @@ function (angular) {
         restrict: 'A',
         link: function(scope, elem) {
           if (grafanaVersion[0] === '@') {
-          //  return;
+            return;
           }
 
           $http({ method: 'GET', url: 'https://grafanarel.s3.amazonaws.com/latest.json' })

src/app/partials/annotations_editor.html

@@ -14,7 +14,6 @@
 	</div>
 
 	<div class="dashboard-editor-body">
-
 		<div class="editor-row" ng-if="editor.index == 0">
 			<table class="table table-striped annotation-editor-table" style="width: 700px">
 				<tr ng-repeat="annotation in annotations">

src/app/partials/search.html

@@ -49,8 +49,7 @@
 				<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
 
 				<div class="search-results-container" ng-if="tagsOnly">
-					<div ng-repeat="tag in results.tags"
-						class="search-result-item pointer"
+					<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
 						ng-class="{'selected': $index === selectedIndex }"
 						ng-click="filterByTag(tag.term, $event)">
 						<a class="search-result-tag label label-tag" tag-color-from-name>

src/app/partials/submenu.html

@@ -36,8 +36,10 @@
 						</li>
 
 						<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-							<i class="annotation-color-icon icon-bolt"></i>
-							<a ng-click="disableAnnotation(annotation)">{{annotation.name}}</a>
+							<a ng-click="disableAnnotation(annotation)">
+								<i class="annotation-color-icon icon-bolt"></i>
+								{{annotation.name}}
+							</a>
 						</li>
 
 					</ul>

src/app/partials/templating_editor.html

@@ -15,23 +15,28 @@
 
 		<div ng-if="editor.index == 0">
 
-			<div class="editor-row">
-				<div class="span4">
+			<div class="editor-row row">
+				<div class="span8">
 					<div ng-if="templateParameters.length === 0">
 						<em>No replacements defined</em>
 					</div>
-					<table class="table table-striped">
+					<table class="grafana-options-table">
 						<tr ng-repeat="templateParam in templateParameters">
-							<td>{{templateParam.name}}</td>
-							<td>{{templateParam.query}}</td>
 							<td>
-								<a ng-click="asd">
+								{{templateParam.name}}
+							</td>
+							<td class="max-width" style="max-width: 200px;">
+								{{templateParam.query}}
+							</td>
+							<td style="width: 1%">
+								<a ng-click="edit(templateParam)" class="btn btn-success btn-mini">
+									<i class="icon-edit"></i>
 									Edit
 								</a>
 							</td>
-							<td>
-								<a ng-click="removeTemplateParam(templateParam)">
-									Remove
+							<td style="width: 1%">
+								<a ng-click="removeTemplateParam(templateParam)" class="btn btn-danger btn-mini">
+									<i class="icon-remove"></i>
 								</a>
 							</td>
 						</tr>
@@ -41,7 +46,7 @@
 
 		</div>
 
-		<div ng-if="editor.index == 1">
+		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
 			<div class="editor-row">
 				<div class="editor-option">
 					<label class="small">Replacement name</label>
@@ -53,7 +58,7 @@
 				</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>
+					<select ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
 				</div>
 			</div>
 
@@ -64,13 +69,14 @@
 				</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>
+		<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-right" ng-click="dismiss();">Close</button>
 	</div>
 </div>
 

src/css/less/grafana.less

@@ -2,6 +2,8 @@
 @import "graph.less";
 @import "console.less";
 @import "bootstrap-tagsinput.less";
+@import "tables_lists.less";
+@import "search.less";
 
 .hide-controls {
   padding: 0;
@@ -32,85 +34,6 @@
   }
 }
 
-// Search
-.grafana-search-panel {
-  .search-field-wrapper {
-    padding: 6px 10px;
-    input {
-      width: 100%;
-    }
-    button {
-      margin: 0 4px 0 0;
-    }
-    > span {
-      display: block;
-      overflow: hidden;
-      padding-right: 25px;
-    }
-  }
-}
-
-.search-results-container {
-  height: 500px;
-  overflow: auto;
-  display: block;
-  line-height: 28px;
-
-  .search-result-item:hover, .search-result-item.selected {
-    .search-result-link, .search-result-link > .icon {
-      color: @grafanaListHighlight;
-    }
-    .search-result-tag {
-      opacity: 0.70;
-      color: white;
-    }
-  }
-
-  .search-result-link {
-    color: @grafanaListMainLinkColor;
-    .icon {
-      padding-right: 10px;
-      color: @grafanaListHighlightContrast;
-    }
-  }
-
-  .search-result-item:nth-child(odd) {
-    background-color: lighten(@grayDarker, 2%);
-  }
-
-  .search-result-item {
-    padding: 0px 10px;
-    white-space: nowrap;
-    border-bottom: 1px solid @grafanaListBorderBottom;
-    border-top: 1px solid @grafanaListBorderTop;
-    border-left: 1px solid @grafanaListBorderBottom;
-  }
-
-  .search-result-tags {
-    float: right;
-    .label-tag {
-      margin-left: 6px;
-      font-size: 11px;
-      padding: 2px 6px;
-    }
-  }
-
-  .search-result-actions {
-    float: right;
-    padding-left: 20px;
-  }
-}
-
-.search-tagview-switch {
-  position: absolute;
-  top: 6px;
-  right: 24px;
-  color: darken(@linkColor, 30%);
-  &.active {
-    color: @linkColor;
-  }
-}
-
 .row-button {
   width: 24px;
 }

src/css/less/search.less

@@ -0,0 +1,83 @@
+// Search
+.grafana-search-panel {
+  .search-field-wrapper {
+    padding: 6px 10px;
+    input {
+      width: 100%;
+    }
+    button {
+      margin: 0 4px 0 0;
+    }
+    > span {
+      display: block;
+      overflow: hidden;
+      padding-right: 25px;
+    }
+  }
+}
+
+.search-results-container {
+  height: 500px;
+  overflow: auto;
+  display: block;
+  line-height: 28px;
+
+  .search-result-item:hover, .search-result-item.selected {
+    .search-result-link, .search-result-link > .icon {
+      color: @grafanaListHighlight;
+    }
+  }
+
+  .selected {
+    .search-result-tag {
+      opacity: 0.70;
+      color: white;
+    }
+  }
+
+  .search-result-link {
+    color: @grafanaListMainLinkColor;
+    .icon {
+      padding-right: 10px;
+      color: @grafanaListHighlightContrast;
+    }
+  }
+
+  .search-result-item:nth-child(odd) {
+    background-color: lighten(@grayDarker, 2%);
+  }
+
+  .search-result-item {
+    padding: 0px 10px;
+    white-space: nowrap;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+    border-top: 1px solid @grafanaListBorderTop;
+    border-left: 1px solid @grafanaListBorderBottom;
+  }
+
+  .search-result-tags {
+    float: right;
+    .label-tag {
+      margin-left: 6px;
+      font-size: 11px;
+      padding: 2px 6px;
+    }
+  }
+
+  .search-result-actions {
+    float: right;
+    padding-left: 20px;
+  }
+}
+
+.search-tagview-switch {
+  position: absolute;
+  top: 6px;
+  right: 24px;
+  color: darken(@linkColor, 30%);
+  &.active {
+    color: @linkColor;
+  }
+}
+
+

src/css/less/tables_lists.less

@@ -0,0 +1,29 @@
+.grafana-options-table {
+  width: 100%;
+
+  tr:nth-child(odd) td {
+    background-color: lighten(@grayDarker, 2%);
+  }
+
+  td {
+    padding: 5px 10px;
+    white-space: nowrap;
+    border-bottom: 1px solid @grafanaListBorderBottom;
+    border-top: 1px solid @grafanaListBorderTop;
+  }
+
+  td:first-child {
+    border-left: 1px solid @grafanaListBorderBottom;
+  }
+
+  td:last-child {
+    border-right: 1px solid @grafanaListBorderBottom;
+  }
+
+  .max-width {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}