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.
2025-01-07 22:53:56 -06:00 · 2020-11-21 12:35:18 +01:00 · 2020-11-21 12:35:18 +01:00 · 81859880d3
commit 81859880d3
parent 917b5c5f2a
7 changed files with 65 additions and 23 deletions
--- a/packages/grafana-data/src/types/annotations.ts
+++ b/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;
--- a/public/app/features/annotations/editor_ctrl.ts
+++ b/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();
  }

--- a/public/app/features/annotations/partials/editor.html
+++ b/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"
--- a/public/app/features/dashboard/components/SubMenu/Annotations.tsx
+++ b/public/app/features/dashboard/components/SubMenu/Annotations.tsx
@ -1,9 +1,10 @@
 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;
 }

--- a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx
+++ b/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" />
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/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}
--- a/public/app/features/dashboard/containers/snapshots/DashboardPage.test.tsx.snap
+++ b/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 {