Annotations: fixing so when changing annotations query links submenu will be updated. (#28990)

* fixing so changes to annotations query links will update submenu.

* Refactored so we dont use the events to trigger a refresh but instead recreating the annotations list instead of mutating the existing list.

* updated snapshot.

* uppdates according to feedback.

* fixed so it also works to update a annotation.

packages/grafana-data/src/types/annotations.ts

@@ -12,6 +12,7 @@ export interface AnnotationQuery<TQuery extends DataQuery = DataQuery> {
   enable: boolean;
   name: string;
   iconColor: string;
+  hide?: boolean;
 
   // Standard datasource query
   target?: TQuery;

public/app/features/annotations/editor_ctrl.ts

@@ -5,7 +5,7 @@ import coreModule from 'app/core/core_module';
 import { DashboardModel } from 'app/features/dashboard/state';
 import DatasourceSrv from '../plugins/datasource_srv';
 import appEvents from 'app/core/app_events';
-import { AppEvents } from '@grafana/data';
+import { AnnotationQuery, AppEvents } from '@grafana/data';
 
 // Registeres the angular directive
 import './components/StandardAnnotationQueryEditor';
@@ -13,7 +13,6 @@ import './components/StandardAnnotationQueryEditor';
 export class AnnotationsEditorCtrl {
   mode: any;
   datasources: any;
-  annotations: any[];
   currentAnnotation: any;
   currentDatasource: any;
   currentIsNew: any;
@@ -59,7 +58,7 @@ export class AnnotationsEditorCtrl {
     this.dashboard = $scope.dashboard;
     this.mode = 'list';
     this.datasources = datasourceSrv.getAnnotationSources();
-    this.annotations = this.dashboard.annotations.list;
+    this.dashboard.annotations.list = this.dashboard.annotations.list ?? [];
     this.reset();
 
     this.onColorChange = this.onColorChange.bind(this);
@@ -75,17 +74,25 @@ export class AnnotationsEditorCtrl {
   /**
    * Called from the react editor
    */
-  onAnnotationChange = (annotation: any) => {
-    const currentIndex = this.dashboard.annotations.list.indexOf(this.currentAnnotation);
-    if (currentIndex >= 0) {
-      this.dashboard.annotations.list[currentIndex] = annotation;
-    } else {
+  onAnnotationChange = (annotation: AnnotationQuery) => {
+    let replaced = false;
+
+    this.dashboard.annotations.list = this.dashboard.annotations.list.map(a => {
+      if (a.name !== annotation.name) {
+        return a;
+      }
+      replaced = true;
+      return annotation;
+    });
+
+    if (!replaced) {
       console.warn('updating annotatoin, but not in the dashboard', annotation);
     }
+
     this.currentAnnotation = annotation;
   };
 
-  edit(annotation: any) {
+  edit(annotation: AnnotationQuery) {
     this.currentAnnotation = annotation;
     this.currentAnnotation.showIn = this.currentAnnotation.showIn || 0;
     this.currentIsNew = false;
@@ -102,6 +109,7 @@ export class AnnotationsEditorCtrl {
   }
 
   update() {
+    this.dashboard.annotations.list = [...this.dashboard.annotations.list];
     this.reset();
     this.mode = 'list';
   }
@@ -116,25 +124,27 @@ export class AnnotationsEditorCtrl {
   }
 
   move(index: number, dir: number) {
-    // @ts-ignore
-    _.move(this.annotations, index, index + dir);
+    const list = [...this.dashboard.annotations.list];
+    Array.prototype.splice.call(list, index + dir, 0, Array.prototype.splice.call(list, index, 1)[0]);
+    this.dashboard.annotations.list = list;
   }
 
   add() {
-    const sameName: any = _.find(this.annotations, { name: this.currentAnnotation.name });
+    const sameName: any = _.find(this.dashboard.annotations.list, { name: this.currentAnnotation.name });
     if (sameName) {
       appEvents.emit(AppEvents.alertWarning, ['Validation', 'Annotations with the same name already exists']);
       return;
     }
-    this.annotations.push(this.currentAnnotation);
+    this.dashboard.annotations.list = [...this.dashboard.annotations.list, this.currentAnnotation];
     this.reset();
     this.mode = 'list';
     this.dashboard.updateSubmenuVisibility();
   }
 
-  removeAnnotation(annotation: any) {
-    const index = _.indexOf(this.annotations, annotation);
-    this.annotations.splice(index, 1);
+  removeAnnotation(annotation: AnnotationQuery) {
+    this.dashboard.annotations.list = this.dashboard.annotations.list.filter(a => {
+      return a.name !== annotation.name;
+    });
     this.dashboard.updateSubmenuVisibility();
   }
 

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

@@ -12,7 +12,7 @@
       type="button"
       class="btn btn-primary"
       ng-click="ctrl.setupNew();"
-      ng-if="ctrl.annotations.length > 1"
+      ng-if="ctrl.dashboard.annotations.list.length > 1"
       ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'"
     >
       New
@@ -29,7 +29,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr ng-repeat="annotation in ctrl.annotations track by annotation.name">
+        <tr ng-repeat="annotation in ctrl.dashboard.annotations.list track by annotation.name">
           <td style="width:90%" ng-hide="annotation.builtIn" class="pointer" ng-click="ctrl.edit(annotation)">
             <icon name="'comment-alt'" style="color:{{ annotation.iconColor }}"></icon> &nbsp; {{ annotation.name }}
           </td>
@@ -60,7 +60,7 @@
     </table>
 
     <!-- empty list cta, there is always one built in query -->
-    <div ng-if="ctrl.annotations.length === 1" class="p-t-2">
+    <div ng-if="ctrl.dashboard.annotations.list.length === 1" class="p-t-2">
       <empty-list-cta
         title="ctrl.emptyListCta.title"
         buttonIcon="ctrl.emptyListCta.buttonIcon"

public/app/features/dashboard/components/SubMenu/Annotations.tsx

 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { LegacyForms } from '@grafana/ui';
+import { AnnotationQuery } from '@grafana/data';
 const { Switch } = LegacyForms;
 
 interface Props {
-  annotations: any[];
+  annotations: AnnotationQuery[];
   onAnnotationChanged: (annotation: any) => void;
 }
 

public/app/features/dashboard/components/SubMenu/SubMenu.tsx

@@ -8,10 +8,12 @@ import { DashboardLinks } from './DashboardLinks';
 import { Annotations } from './Annotations';
 import { SubMenuItems } from './SubMenuItems';
 import { DashboardLink } from '../../state/DashboardModel';
+import { AnnotationQuery } from '@grafana/data';
 
 interface OwnProps {
   dashboard: DashboardModel;
   links: DashboardLink[];
+  annotations: AnnotationQuery[];
 }
 
 interface ConnectedProps {
@@ -51,7 +53,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
   };
 
   render() {
-    const { dashboard, variables, links } = this.props;
+    const { dashboard, variables, links, annotations } = this.props;
 
     if (!this.isSubMenuVisible()) {
       return null;
@@ -60,7 +62,7 @@ class SubMenuUnConnected extends PureComponent<Props> {
     return (
       <div className="submenu-controls">
         <SubMenuItems variables={variables} />
-        <Annotations annotations={dashboard.annotations.list} onAnnotationChanged={this.onAnnotationStateChanged} />
+        <Annotations annotations={annotations} onAnnotationChanged={this.onAnnotationStateChanged} />
         <div className="gf-form gf-form--grow" />
         {dashboard && <DashboardLinks dashboard={dashboard} links={links} />}
         <div className="clearfix" />

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -320,7 +320,9 @@ export class DashboardPage extends PureComponent<Props, State> {
           >
             <div className="dashboard-content">
               {initError && this.renderInitFailedState()}
-              {!editPanel && <SubMenu dashboard={dashboard} links={dashboard.links} />}
+              {!editPanel && (
+                <SubMenu dashboard={dashboard} annotations={dashboard.annotations.list} links={dashboard.links} />
+              )}
 
               <DashboardGrid
                 dashboard={dashboard}

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -120,6 +120,19 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
         className="dashboard-content"
       >
         <SubMenu
+          annotations={
+            Array [
+              Object {
+                "builtIn": 1,
+                "datasource": "-- Grafana --",
+                "enable": true,
+                "hide": true,
+                "iconColor": "rgba(0, 211, 255, 1)",
+                "name": "Annotations & Alerts",
+                "type": "dashboard",
+              },
+            ]
+          }
           dashboard={
             DashboardModel {
               "annotations": Object {
@@ -479,6 +492,19 @@ exports[`DashboardPage When dashboard has editview url state should render setti
         className="dashboard-content"
       >
         <SubMenu
+          annotations={
+            Array [
+              Object {
+                "builtIn": 1,
+                "datasource": "-- Grafana --",
+                "enable": true,
+                "hide": true,
+                "iconColor": "rgba(0, 211, 255, 1)",
+                "name": "Annotations & Alerts",
+                "type": "dashboard",
+              },
+            ]
+          }
           dashboard={
             DashboardModel {
               "annotations": Object {