fix(submenu): fixed issue with submenu and annotation display, and annotation issue in table panel

public/app/features/annotations/annotations_srv.ts

@@ -29,7 +29,7 @@ export class AnnotationsSrv {
       this.getGlobalAnnotations(options),
       this.getPanelAnnotations(options)
     ]).then(allResults => {
-      return _.flatten(allResults);
+      return _.flattenDeep(allResults);
     }).catch(err => {
       this.$rootScope.appEvent('alert-error', ['Annotations failed', (err.message || err)]);
     });

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

@@ -1,30 +1,23 @@
 <div class="submenu-controls gf-form-query">
-	<ul ng-if="ctrl.dashboard.templating.list.length > 0">
-		<li ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
-			<div class="gf-form">
-				<label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
-					{{variable.label || variable.name}}:
-				</label>
-				<value-select-dropdown ng-if="variable.type !== 'adhoc'" variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
-			</div>
-			<ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable"></ad-hoc-filters>
-		</li>
-	</ul>
+  <div ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
+    <div class="gf-form">
+      <label class="gf-form-label template-variable" ng-hide="variable.hide === 1">
+        {{variable.label || variable.name}}:
+      </label>
+      <value-select-dropdown ng-if="variable.type !== 'adhoc'" variable="variable" on-updated="ctrl.variableUpdated(variable)" get-values-for-tag="ctrl.getValuesForTag(variable, tagKey)"></value-select-dropdown>
+    </div>
+    <ad-hoc-filters ng-if="variable.type === 'adhoc'" variable="variable"></ad-hoc-filters>
+  </div>
 
-	<ul ng-if="ctrl.dashboard.annotations.list.length > 0">
-		<li ng-repeat="annotation in ctrl.dashboard.annotations.list" class="submenu-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
-			<a ng-click="ctrl.disableAnnotation(annotation)">
-				<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i>
-				{{annotation.name}}
-				<input class="cr1" id="hideYAxis" type="checkbox" ng-model="annotation.enable" ng-checked="annotation.enable">
-				<label for="hideYAxis" class="cr1"></label>
-			</a>
-		</li>
-	</ul>
+  <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}">
+      <gf-form-switch class="gf-form" label="{{annotation.name}}" checked="annotation.enable" on-change="ctrl.annotationStateChanged()"></gf-form-switch>
+    </div>
+  </ul>
 
-	<ul class="pull-right" ng-if="ctrl.dashboard.links.length > 0">
-		<dash-links-container links="ctrl.dashboard.links"></dash-links-container>
-	</ul>
+  <ul class="pull-right" ng-if="ctrl.dashboard.links.length > 0">
+    <dash-links-container links="ctrl.dashboard.links"></dash-links-container>
+  </ul>
 
-	<div class="clearfix"></div>
+  <div class="clearfix"></div>
 </div>

public/app/features/dashboard/submenu/submenu.ts

@@ -17,8 +17,7 @@ export class SubmenuCtrl {
     this.variables = this.variableSrv.variables;
   }
 
-  disableAnnotation(annotation) {
-    annotation.enable = !annotation.enable;
+  annotationStateChanged() {
     this.$rootScope.$broadcast('refresh');
   }
 

public/app/plugins/panel/table/module.ts

@@ -78,7 +78,8 @@ class TablePanelCtrl extends MetricsPanelCtrl {
 
     if (this.panel.transform === 'annotations') {
       this.setTimeQueryStart();
-      return this.annotationsSrv.getAnnotations(this.dashboard).then(annotations => {
+      return this.annotationsSrv.getAnnotations({dashboard: this.dashboard, panel: this.panel, range: this.range})
+      .then(annotations => {
         return {data: annotations};
       });
     }