From 81859880d3569fd45a5e2149cbf243c221601f0c Mon Sep 17 00:00:00 2001 From: Marcus Andersson Date: Sat, 21 Nov 2020 12:35:18 +0100 Subject: [PATCH] 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. --- .../grafana-data/src/types/annotations.ts | 1 + .../app/features/annotations/editor_ctrl.ts | 42 ++++++++++++------- .../features/annotations/partials/editor.html | 6 +-- .../components/SubMenu/Annotations.tsx | 3 +- .../dashboard/components/SubMenu/SubMenu.tsx | 6 ++- .../dashboard/containers/DashboardPage.tsx | 4 +- .../__snapshots__/DashboardPage.test.tsx.snap | 26 ++++++++++++ 7 files changed, 65 insertions(+), 23 deletions(-) diff --git a/packages/grafana-data/src/types/annotations.ts b/packages/grafana-data/src/types/annotations.ts index c2858bd1b83..e907725741e 100644 --- a/packages/grafana-data/src/types/annotations.ts +++ b/packages/grafana-data/src/types/annotations.ts @@ -12,6 +12,7 @@ export interface AnnotationQuery { enable: boolean; name: string; iconColor: string; + hide?: boolean; // Standard datasource query target?: TQuery; diff --git a/public/app/features/annotations/editor_ctrl.ts b/public/app/features/annotations/editor_ctrl.ts index 75d59652361..d9a45476a2f 100644 --- 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(); } diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index ff989dd4ec2..3c2df73fec7 100644 --- 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 @@ - +   {{ annotation.name }} @@ -60,7 +60,7 @@ -
+
void; } diff --git a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx index 5fa939a52cd..d2243d9cde3 100644 --- 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 { }; 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 { return (
- +
{dashboard && }
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index ca7092201ac..7cfdd9a7020 100644 --- 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 { >
{initError && this.renderInitFailedState()} - {!editPanel && } + {!editPanel && ( + + )}