Worked on submenu row (templating, annotations), removed templating and…

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

 <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

-.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');
     });