Worked on submenu row (templating, annotations), removed templating and annotation feature toggles, the submenu row will be visible as soon as there are any template vars or annotations, #1503

src/app/features/annotations/editorCtrl.js

@@ -64,11 +64,13 @@ function (angular, _, $) {
       $scope.annotations.push($scope.currentAnnotation);
       $scope.reset();
       $scope.editor.index = 0;
+      $scope.updateSubmenuVisibility();
     };
 
     $scope.removeAnnotation = function(annotation) {
       var index = _.indexOf($scope.annotations, annotation);
       $scope.annotations.splice(index, 1);
+      $scope.updateSubmenuVisibility();
     };
 
   });

src/app/features/dashboard/dashboardCtrl.js

@@ -51,14 +51,18 @@ function (angular, $, config) {
       timeSrv.init($scope.dashboard);
       templateValuesSrv.init($scope.dashboard, $scope.dashboardViewState);
 
-      $scope.checkFeatureToggles();
       dashboardKeybindings.shortcuts($scope);
 
+      $scope.updateSubmenuVisibility();
       $scope.setWindowTitleAndTheme();
 
       $scope.appEvent("dashboard-loaded", $scope.dashboard);
     };
 
+    $scope.updateSubmenuVisibility = function() {
+      $scope.submenuEnabled = $scope.dashboard.hasTemplateVarsOrAnnotations();
+    };
+
     $scope.setWindowTitleAndTheme = function() {
       window.document.title = config.window_title_prefix + $scope.dashboard.title;
       $scope.contextSrv.lightTheme = $scope.dashboard.style === 'light';
@@ -101,10 +105,6 @@ function (angular, $, config) {
       $scope.appEvent('show-dash-editor', { src: 'app/partials/edit_json.html', scope: editScope });
     };
 
-    $scope.checkFeatureToggles = function() {
-      $scope.submenuEnabled = $scope.dashboard.templating.enable || $scope.dashboard.annotations.enable || false;
-    };
-
     $scope.onDrop = function(panelId, row, dropTarget) {
       var info = $scope.dashboard.getPanelInfoById(panelId);
       if (dropTarget) {

src/app/features/dashboard/dashboardSrv.js

@@ -91,6 +91,10 @@ function (angular, $, kbn, _, moment) {
       row.panels.push(panel);
     };
 
+    p.hasTemplateVarsOrAnnotations = function() {
+      return this.templating.list.length > 0 || this.annotations.list.length > 0;
+    };
+
     p.getPanelInfoById = function(panelId) {
       var result = {};
       _.each(this.rows, function(row) {
@@ -215,15 +219,11 @@ function (angular, $, kbn, _, moment) {
 
       if (oldVersion < 6) {
         // move pulldowns to new schema
-        var filtering = _.findWhere(old.pulldowns, { type: 'filtering' });
         var annotations = _.findWhere(old.pulldowns, { type: 'annotations' });
-        if (filtering) {
-          this.templating.enable = filtering.enable;
-        }
+
         if (annotations) {
           this.annotations = {
-            list: annotations.annotations,
-            enable: annotations.enable
+            list: annotations.annotations || [],
           };
         }
 

src/app/features/dashboard/submenuCtrl.js

@@ -18,6 +18,7 @@ function (angular, _) {
       $scope.panel = $scope.pulldown;
       $scope.row = $scope.pulldown;
       $scope.variables = $scope.dashboard.templating.list;
+      $scope.annotations = $scope.dashboard.templating.list;
     };
 
     $scope.disableAnnotation = function (annotation) {

src/app/features/templating/editorCtrl.js

@@ -36,6 +36,7 @@ function (angular, _) {
       if ($scope.isValid()) {
         $scope.variables.push($scope.current);
         $scope.update();
+        $scope.updateSubmenuVisibility();
       }
     };
 
@@ -104,6 +105,7 @@ function (angular, _) {
     $scope.removeVariable = function(variable) {
       var index = _.indexOf($scope.variables, variable);
       $scope.variables.splice(index, 1);
+      $scope.updateSubmenuVisibility();
     };
 
   });

src/app/partials/dasheditor.html

@@ -5,7 +5,7 @@
 	</div>
 
 	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['General', 'Rows', 'Features', 'Import']" data-title="{{tab}}">
+		<div ng-repeat="tab in ['General', 'Rows', 'Import']" data-title="{{tab}}">
 		</div>
 		<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
 		</div>
@@ -33,6 +33,7 @@
 						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
 					</div>
 					<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
+          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
 					<editor-opt-bool text="Editable" model="dashboard.editable"></editor-opt-bool>
 				</div>
 			</div>
@@ -70,25 +71,10 @@
 		</div>
 
 		<div ng-if="editor.index == 2">
-			<div class="editor-row">
-				<div class="section">
-					<editor-opt-bool text="Templating" model="dashboard.templating.enable" change="checkFeatureToggles()"></editor-opt-bool>
-					<editor-opt-bool text="Annotations" model="dashboard.annotations.enable" change="checkFeatureToggles()"></editor-opt-bool>
-					<div class="editor-option text-center" ng-repeat="pulldown in dashboard.nav">
-						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label>
-						<input class="cr1" id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
-						<label for="pulldown{{pulldown.type}}" class="cr1"></label>
-					</div>
-          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
-				</div>
-			</div>
-		</div>
-
-		<div ng-if="editor.index == 3">
 			<ng-include src="'app/partials/import.html'"></ng-include>
 		</div>
 
-		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
+		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 3+$index">
 			<ng-include ng-show="pulldown.enable" src="pulldownEditorPath(pulldown.type)"></ng-include>
 			<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
 		</div>

src/app/partials/submenu.html

@@ -1,7 +1,8 @@
 <div class="submenu-controls" ng-controller="SubmenuCtrl">
 	<div class="tight-form borderless">
 
-		<ul class="tight-form-list" ng-if="dashboard.templating.enable">
+
+		<ul class="tight-form-list" ng-if="dashboard.templating.list.length > 0">
 			<li class="tight-form-item">
 				<strong>Variables:</strong>
 			</li>
@@ -13,10 +14,15 @@
 
 			<li ng-repeat-end template-param-selector>
 			</li>
+
+			<li class="tight-form-item" style="width: 15px">
+			</li>
 		</ul>
 
-		<ul class="tight-form-list" ng-if="dashboard.annotations.enable">
-			<strong>ANNOTATIONS</strong>
+		<ul class="tight-form-list" ng-if="dashboard.annotations.list.length > 0">
+			<li class="tight-form-item">
+				<strong>Annotations:</strong>
+			</li>
 			<li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
 				<a ng-click="disableAnnotation(annotation)">
 					<i class="annotation-color-icon fa fa-bolt"></i>
@@ -25,6 +31,7 @@
 			</li>
 		</ul>
 
+
 		<div class="clearfix"></div>
 	</div>
 </div>

src/css/less/grafana.less

@@ -26,9 +26,6 @@
   .row-tab {
     display: none;
   }
-  .submenu-controls {
-    display: none;
-  }
   .add-row-panel-hint {
     display: none;
   }

src/css/less/submenu.less

@@ -1,11 +1,11 @@
-.submenu-controls-visible:not(.hide-controls) {
+.submenu-controls-visible {
   .panel-fullscreen {
     top: 88px;
   }
 }
 
 .submenu-controls {
-  margin: 5px 5px 0 10px;
+  margin: 5px 10px 0 10px;
 }
 
 .annotation-disabled, .annotation-disabled a {

src/test/specs/dashboardSrv-specs.js

@@ -157,8 +157,6 @@ define([
     });
 
     it('should move pulldowns to new schema', function() {
-      expect(model.templating.enable).to.be(true);
-      expect(model.annotations.enable).to.be(true);
       expect(model.annotations.list[0].name).to.be('old');
     });