annotations: added new options hide toggle, and show option

public/app/core/services/keybindingSrv.ts

@@ -83,10 +83,6 @@ export class KeybindingSrv {
   }
 
   setupDashboardBindings(scope, dashboard) {
-    // this.bind('b', () => {
-    //   dashboard.toggleEditMode();
-    // });
-
     this.bind('mod+o', () => {
       dashboard.graphTooltip = (dashboard.graphTooltip + 1) % 3;
       appEvents.emit('graph-hover-clear');

public/app/features/annotations/editor_ctrl.ts

@@ -17,9 +17,16 @@ export class AnnotationsEditorCtrl {
     name: '',
     datasource: null,
     iconColor: 'rgba(255, 96, 96, 1)',
-    enable: true
+    enable: true,
+    show: 0,
+    hide: false,
   };
 
+  showOptions: any = [
+    {text: 'All Panels', value: 0},
+    {text: 'Specifc Panels', value: 1},
+  ];
+
   /** @ngInject */
   constructor(private $scope, private datasourceSrv) {
     $scope.ctrl = this;
@@ -44,6 +51,7 @@ export class AnnotationsEditorCtrl {
 
   edit(annotation) {
     this.currentAnnotation = annotation;
+    this.currentAnnotation.show = this.currentAnnotation.show || 0;
     this.currentIsNew = false;
     this.datasourceChanged();
     this.mode = 'edit';
@@ -74,7 +82,7 @@ export class AnnotationsEditorCtrl {
   removeAnnotation(annotation) {
     var index = _.indexOf(this.annotations, annotation);
     this.annotations.splice(index, 1);
-    this.$scope.updateSubmenuVisibility();
+    this.$scope.dashboard.updateSubmenuVisibility();
     this.$scope.broadcastRefresh();
   }
 }

public/app/features/annotations/partials/editor.html

@@ -7,16 +7,16 @@
 		<ul class="gf-tabs">
 			<li class="gf-tabs-item" >
 				<a class="gf-tabs-link" ng-click="ctrl.mode = 'list';" ng-class="{active: ctrl.mode === 'list'}">
-					List
+					Queries
 				</a>
 			</li>
 			<li class="gf-tabs-item" ng-show="ctrl.mode === 'edit'">
 				<a class="gf-tabs-link" ng-class="{active: ctrl.mode === 'edit'}">
-					{{currentAnnotation.name}}
+					Edit Query
 				</a>
 			</li>
 			<li class="gf-tabs-item" ng-show="ctrl.mode === 'new'">
-				<span class="active gf-tabs-link">New</span>
+				<span class="active gf-tabs-link">New Query</span>
 			</li>
 		</ul>
 
@@ -62,37 +62,53 @@
 
 		<div class="annotations-basic-settings" ng-if="ctrl.mode === 'edit' || ctrl.mode === 'new'">
 			<div class="gf-form-group">
-				<div class="gf-form-inline">
-					<div class="gf-form gf-size-max-xxl">
-						<span class="gf-form-label">Name</span>
-						<input type="text" class="gf-form-input" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input>
-					</div>
-					<div class="gf-form">
-						<span class="gf-form-label max-width-10">Datasource</span>
-						<div class="gf-form-select-wrapper">
-							<select class="gf-form-input gf-size-auto" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
+				<h5 class="section-heading">Options</h5>
+					<div class="gf-form-inline">
+						<div class="gf-form">
+							<span class="gf-form-label width-7">Name</span>
+							<input type="text" class="gf-form-input width-12" ng-model='ctrl.currentAnnotation.name' placeholder="name"></input>
+						</div>
+						<div class="gf-form">
+							<span class="gf-form-label width-9">Data source</span>
+							<div class="gf-form-select-wrapper width-12">
+								<select class="gf-form-input" ng-model="ctrl.currentAnnotation.datasource" ng-options="f.name as f.name for f in ctrl.datasources" ng-change="ctrl.datasourceChanged()"></select>
+							</div>
 						</div>
 					</div>
-					<div class="gf-form">
-						<label class="gf-form-label">
-							<span>Color</span>
-						</label>
-						<spectrum-picker class="gf-form-input" ng-model="ctrl.currentAnnotation.iconColor"></spectrum-picker>
+					<div class="gf-form-group">
+						<div class="gf-form-inline">
+							<div class="gf-form">
+								<span class="gf-form-label width-7">Show in</span>
+								<div class="gf-form-select-wrapper width-12">
+									<select class="gf-form-input" ng-model="ctrl.currentAnnotation.show" ng-options="f.value as f.text for f in ctrl.showOptions"></select>
+								</div>
+							</div>
+							<gf-form-switch class="gf-form"
+															label="Hide toggle"
+															tooltip="Hides the annotation query toggle from showing at the top of the dashboard"
+															checked="ctrl.currentAnnotation.hide"
+															label-class="width-9">
+							</gf-form-switch>
+						</div>
+						<div class="gf-form">
+							<label class="gf-form-label width-7">Color</label>
+							<spectrum-picker class="gf-form-input width-3" ng-model="ctrl.currentAnnotation.iconColor"></spectrum-picker>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<rebuild-on-change property="ctrl.currentDatasource">
-				<plugin-component type="annotations-query-ctrl">
-				</plugin-component>
-			</rebuild-on-change>
+				<h5 class="section-heading">Query</h5>
+				<rebuild-on-change property="ctrl.currentDatasource">
+					<plugin-component type="annotations-query-ctrl">
+					</plugin-component>
+				</rebuild-on-change>
 
-			<div class="gf-form">
-				<div class="gf-form-button-row p-y-0">
-					<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
-					<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
+				<div class="gf-form">
+					<div class="gf-form-button-row p-y-0">
+						<button ng-show="ctrl.mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="ctrl.add()">Add</button>
+						<button ng-show="ctrl.mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="ctrl.update()">Update</button>
+					</div>
 				</div>
-			</div>
 		</div>
 
 	</div>

public/app/features/dashboard/model.ts

@@ -193,32 +193,22 @@ export class DashboardModel {
     });
   }
 
-  toggleEditMode() {
-    if (!this.meta.canEdit) {
-      console.log('Not allowed to edit dashboard');
-      return;
-    }
-
-    this.editMode = !this.editMode;
-    this.updateSubmenuVisibility();
-    this.events.emit('edit-mode-changed', this.editMode);
-  }
-
   setPanelFocus(id) {
     this.meta.focusPanelId = id;
   }
 
   updateSubmenuVisibility() {
-    if (this.editMode) {
-      this.meta.submenuEnabled = true;
-      return;
-    }
+    this.meta.submenuEnabled = (() => {
+      if (this.links.length > 0) { return true; }
 
-    var visibleVars = _.filter(this.templating.list, function(template) {
-      return template.hide !== 2;
-    });
+      var visibleVars = _.filter(this.templating.list, variable => variable.hide !== 2);
+      if (visibleVars.length > 0) { return true; }
+
+      var visibleAnnotations = _.filter(this.annotations.list, annotation => annotation.hide !== true);
+      if (visibleAnnotations.length > 0) { return true; }
 
-    this.meta.submenuEnabled = visibleVars.length > 0 || this.annotations.list.length > 0 || this.links.length > 0;
+      return false;
+    })();
   }
 
   getPanelInfoById(panelId) {

public/app/features/dashboard/specs/dashboard_model_specs.ts

@@ -364,4 +364,85 @@ describe('DashboardModel', function() {
     });
   });
 
+  describe('updateSubmenuVisibility with empty lists', function() {
+    var model;
+
+    beforeEach(function() {
+      model = new DashboardModel({});
+      model.updateSubmenuVisibility();
+    });
+
+    it('should not enable submmenu', function() {
+      expect(model.meta.submenuEnabled).to.be(false);
+    });
+  });
+
+  describe('updateSubmenuVisibility with annotation', function() {
+    var model;
+
+    beforeEach(function() {
+      model = new DashboardModel({
+        annotations: {
+          list: [{}]
+        }
+      });
+      model.updateSubmenuVisibility();
+    });
+
+    it('should enable submmenu', function() {
+      expect(model.meta.submenuEnabled).to.be(true);
+    });
+  });
+
+  describe('updateSubmenuVisibility with template var', function() {
+    var model;
+
+    beforeEach(function() {
+      model = new DashboardModel({
+        templating: {
+          list: [{}]
+        }
+      });
+      model.updateSubmenuVisibility();
+    });
+
+    it('should enable submmenu', function() {
+      expect(model.meta.submenuEnabled).to.be(true);
+    });
+  });
+
+  describe('updateSubmenuVisibility with hidden template var', function() {
+    var model;
+
+    beforeEach(function() {
+      model = new DashboardModel({
+        templating: {
+          list: [{hide: 2}]
+        }
+      });
+      model.updateSubmenuVisibility();
+    });
+
+    it('should not enable submmenu', function() {
+      expect(model.meta.submenuEnabled).to.be(false);
+    });
+  });
+
+  describe('updateSubmenuVisibility with hidden annotation toggle', function() {
+    var model;
+
+    beforeEach(function() {
+      model = new DashboardModel({
+        annotations: {
+          list: [{hide: true}]
+        }
+      });
+      model.updateSubmenuVisibility();
+    });
+
+    it('should not enable submmenu', function() {
+      expect(model.meta.submenuEnabled).to.be(false);
+    });
+  });
+
 });

public/app/features/dashboard/submenu/submenu.html

@@ -11,7 +11,7 @@
   </div>
 
   <div ng-if="ctrl.dashboard.annotations.list.length > 0">
-    <div ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item" ng-class="{'annotation-disabled': !annotation.enable}">
+    <div ng-repeat="annotation in ctrl.dashboard.annotations.list" ng-hide="annotation.hide" class="submenu-item" ng-class="{'annotation-disabled': !annotation.enable}">
       <gf-form-switch class="gf-form" label="{{annotation.name}}" checked="annotation.enable" on-change="ctrl.annotationStateChanged()"></gf-form-switch>
     </div>
   </div>

public/app/plugins/datasource/elasticsearch/partials/annotations.editor.html

@@ -3,9 +3,11 @@
 		<span class="gf-form-label width-14">Index name</span>
 		<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.index' placeholder="events-*"></input>
 	</div>
-	<div class="gf-form">
-		<span class="gf-form-label width-14">Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></span>
-		<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input>
+	<div class="gf-form-group">
+		<div class="gf-form">
+			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query'
+											placeholder="Elasticsearch lucene query"></input>
+		</div>
 	</div>
 </div>
 
@@ -33,4 +35,4 @@
 			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.textField' placeholder=""></input>
 		</div>
 	</div>
-</div>
+</div>

public/app/plugins/datasource/grafana/partials/annotations.editor.html

@@ -1,6 +1,5 @@
 
 <div class="gf-form-group">
-	<h6>Filters</h6>
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Type</span>

public/app/plugins/datasource/graphite/partials/annotations.editor.html

@@ -1,10 +1,13 @@
 <div class="gf-form-group">
   <div class="gf-form">
-    <span class="gf-form-label width-13">Graphite metrics query</span>
-    <input type="text" class="gf-form-input" ng-model='ctrl.annotation.target' placeholder=""></input>
+    <span class="gf-form-label width-12">Graphite query</span>
+    <input type="text" class="gf-form-input" ng-model='ctrl.annotation.target' placeholder="Example: statsd.application.counters.*.count"></input>
   </div>
+
+	<h5 class="section-heading">Or</h5>
+
   <div class="gf-form">
-    <span class="gf-form-label width-13">Or Graphite events query</span>
-    <input type="text" class="gf-form-input" ng-model='ctrl.annotation.tags' placeholder=""></input>
+    <span class="gf-form-label width-12">Graphite events tags</span>
+    <input type="text" class="gf-form-input" ng-model='ctrl.annotation.tags' placeholder="Example: event_tag_name"></input>
   </div>
 </div>

public/app/plugins/datasource/influxdb/partials/annotations.editor.html

@@ -1,12 +1,11 @@
 
-<h5 class="section-heading">Query</h5>
 <div class="gf-form-group">
 	<div class="gf-form">
 		<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
 	</div>
 </div>
 
-<h5 class="section-heading">Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
+<h5 class="section-heading">Field mappings <tip>If your influxdb query returns more than one field you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
 <div class="gf-form-group">
 	<div class="gf-form-inline">
 		<div class="gf-form">