Refactoring the pulldown (filtering/annotations), changing the ui slightly

src/app/controllers/all.js

@@ -13,5 +13,5 @@ define([
   './playlistCtrl',
   './inspectCtrl',
   './opentsdbTargetCtrl',
-  './console-ctrl',
+  './annotationsEditorCtrl',
 ], function () {});

src/app/controllers/annotationsEditorCtrl.js

@@ -0,0 +1,64 @@
+define([
+  'angular',
+  'app',
+  'lodash'
+],
+function (angular, app, _) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) {
+    var annotationDefaults = {
+      name: '',
+      datasource: null,
+      showLine: true,
+      iconColor: '#C0C6BE',
+      lineColor: 'rgba(255, 96, 96, 0.592157)',
+      iconSize: 13,
+      enable: true
+    };
+
+    $scope.init = function() {
+      $scope.currentAnnotation = angular.copy(annotationDefaults);
+      $scope.currentIsNew = true;
+      $scope.datasources = datasourceSrv.getAnnotationSources();
+      $scope.annotations = $scope.dashboard.annotations.list;
+
+      if ($scope.datasources.length > 0) {
+        $scope.currentDatasource = $scope.datasources[0];
+      }
+    };
+
+    $scope.setDatasource = function() {
+      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
+    };
+
+    $scope.edit = function(annotation) {
+      $scope.currentAnnotation = annotation;
+      $scope.currentIsNew = false;
+      $scope.currentDatasource = _.findWhere($scope.datasources, { name: annotation.datasource });
+
+      if (!$scope.currentDatasource) {
+        $scope.currentDatasource = $scope.datasources[0];
+      }
+    };
+
+    $scope.update = function() {
+      $scope.currentAnnotation = angular.copy(annotationDefaults);
+      $scope.currentIsNew = true;
+    };
+
+    $scope.add = function() {
+      $scope.currentAnnotation.datasource = $scope.currentDatasource.name;
+      $scope.annotations.push($scope.currentAnnotation);
+      $scope.currentAnnotation = angular.copy(annotationDefaults);
+    };
+
+    $scope.removeAnnotation = function(annotation) {
+      var index = _.indexOf($scope.annotations, annotation);
+      $scope.annotations.splice(index, 1);
+    };
+
+  });
+});

src/app/controllers/dashboardCtrl.js

@@ -48,8 +48,7 @@ function (angular, $, config, _) {
       $scope.filter = filterSrv;
       $scope.filter.init($scope.dashboard);
 
-      $scope.submenuEnabled = $scope.dashboard.templating.enable ||
-        $scope.dashboard.annotations.enable;
+      $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable;
 
       var panelMove = panelMoveSrv.create($scope.dashboard);
 

src/app/controllers/submenuCtrl.js

@@ -8,7 +8,7 @@ function (angular, app, _) {
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('SubmenuCtrl', function($scope) {
+  module.controller('SubmenuCtrl', function($scope, $q, datasourceSrv) {
     var _d = {
       enable: true
     };
@@ -20,6 +20,63 @@ function (angular, app, _) {
       $scope.row = $scope.pulldown;
     };
 
+    $scope.filterOptionSelected = function(templateParameter, option, recursive) {
+      templateParameter.current = option;
+
+      $scope.filter.updateTemplateData();
+
+      return $scope.applyFilterToOtherFilters(templateParameter)
+        .then(function() {
+          // only refresh in the outermost call
+          if (!recursive) {
+            $scope.dashboard.emit_refresh();
+          }
+        });
+    };
+
+    $scope.applyFilterToOtherFilters = function(updatedTemplatedParam) {
+      var promises = _.map($scope.filter.templateParameters, function(templateParam) {
+        if (templateParam === updatedTemplatedParam) {
+          return;
+        }
+        if (templateParam.query.indexOf('[[' + updatedTemplatedParam.name + ']]') !== -1) {
+          return $scope.applyFilter(templateParam);
+        }
+      });
+
+      return $q.all(promises);
+    };
+
+    $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 };
+          });
+
+          if (templateParam.includeAll) {
+            var allExpr = '{';
+            _.each(templateParam.options, function(option) {
+              allExpr += option.text + ',';
+            });
+            allExpr = allExpr.substring(0, allExpr.length - 1) + '}';
+            templateParam.options.unshift({text: 'All', value: allExpr});
+          }
+
+          // if parameter has current value
+          // if it exists in options array keep value
+          if (templateParam.current) {
+            var currentExists = _.findWhere(templateParam.options, { value: templateParam.current.value });
+            if (currentExists) {
+              return $scope.filterOptionSelected(templateParam, templateParam.current, true);
+            }
+          }
+
+          return $scope.filterOptionSelected(templateParam, templateParam.options[0], true);
+        });
+    };
+
     $scope.init();
 
   });

src/app/panels/annotations/editor.html → src/app/partials/annotations_editor.html

@@ -10,16 +10,16 @@
         <th width="1%"></th>
         <th width="1%"></th>
       </thead>
-      <tr ng-repeat="annotation in panel.annotations">
+      <tr ng-repeat="annotation in annotations">
         <td>
           <a ng-click="edit(annotation)" bs-tooltip="'Click to edit'">
             <i class="icon-cog"></i>
             {{annotation.name}}
           </a>
         </td>
-        <td><i ng-click="_.move(panel.annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
-        <td><i ng-click="_.move(panel.annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
-        <td><i ng-click="panel.annotations = _.without(panel.annotations, annotation)" class="pointer icon-remove"></i></td>
+        <td><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
+        <td><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
+        <td><i ng-click="removeAnnotation(annotation)" class="pointer icon-remove"></i></td>
       </tr>
     </table>
   </div>

src/app/partials/submenu.html

@@ -5,29 +5,40 @@
 
 					<ul class="grafana-target-controls-left">
 						<li class="grafana-target-segment">
-							<i class="icon-remove pointer"></i>
+							<div class="dropdown">
+								<a class="pointer" data-toggle="dropdown">
+									<i class="icon-cog"></i>
+								</a>
+								<ul class="dropdown-menu">
+									<li><a class="pointer" config-modal="app/partials/templating_editor.html">Edit replacements</a></li>
+									<li><a class="pointer" config-modal="app/partials/annotations_editor.html">Edit annotations</a></li>
+								</ul>
+							</div>
 						</li>
 					</ul>
 
 					<ul class="grafana-segment-list">
-						<li ng-repeat="filter in filter.templateParameters" class="grafana-target-segment">
-								<div class="dropdown">
-								{{filter.name}} =
-								<a class="dropdown-toggle" data-toggle="dropdown">
-									{{filter.current.text}}
+						<li ng-repeat-start="param in filter.templateParameters" class="grafana-target-segment template-param-name">
+							{{param.name}}:
+						</li>
+
+						<li ng-repeat-end>
+							<div class="dropdown">
+								<a class="dropdown-toggle grafana-target-segment" data-toggle="dropdown">
+									{{param.current.text}}
 								</a>
 								<ul class="dropdown-menu">
-									<li ng-repeat="option in filter.options">
-										<a ng-click="filterOptionSelected(filter, option)">{{option.text}}</a>
+									<li ng-repeat="option in param.options">
+										<a ng-click="filterOptionSelected(param, option)">{{option.text}}</a>
 									</li>
 								</ul>
-								</div>
-						</li>
-						<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment" ng-class="{'annotation-disabled': !annotation.enable }">
-							<i class="annotation-color-icon icon-minus"></i>
-							<a ng-click="hide(annotation)" class="small">{{annotation.name}}</a>
+							</div>
 						</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="hide(annotation)">{{annotation.name}}</a>
+						</li>
 
 					</ul>
 

src/css/less/grafana.less

@@ -284,6 +284,14 @@
   &a:hover {
     background: @grafanaTargetFuncBackground;
   }
+
+  &.template-param-name {
+    border-right: none;
+    padding-right: 3px;
+  }
+  &.annotation-segment {
+    padding: 8px 15px;
+  }
 }
 
 .grafana-target-function {
@@ -405,7 +413,6 @@ select.grafana-target-segment-input {
   }
 }
 
-
 .scrollable {
   max-height: 300px;
   overflow: auto;