From d9414b4693c20b74752e2d0220164ce336344637 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 17 Feb 2020 07:28:53 +0100 Subject: [PATCH] NewPanelEditor: Making angular panels reuse data and render on edit mode enter (#22229) * First stab at angular panels load in new edit * Things are working --- .../dashboard/dashgrid/PanelChromeAngular.tsx | 14 ++++++++++--- .../dashboard/dashgrid/PanelResizer.tsx | 5 ----- .../app/features/panel/metrics_panel_ctrl.ts | 10 ++++++---- public/app/plugins/panel/graph/module.ts | 1 + yarn.lock | 20 ++++--------------- 5 files changed, 22 insertions(+), 28 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx index 8d4a7de7c28..96595f738d5 100644 --- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx @@ -110,10 +110,20 @@ export class PanelChromeAngular extends PureComponent { } componentDidUpdate(prevProps: Props, prevState: State) { - if (prevProps.plugin !== this.props.plugin) { + const { plugin, height, width, panel } = this.props; + + if (prevProps.plugin !== plugin) { this.cleanUpAngularPanel(); this.loadAngularPanel(); } + + if (prevProps.width !== width || prevProps.height !== height) { + if (this.scopeProps) { + this.scopeProps.size.height = height; + this.scopeProps.size.width = width; + panel.events.emit(PanelEvents.panelSizeChanged); + } + } } loadAngularPanel() { @@ -121,8 +131,6 @@ export class PanelChromeAngular extends PureComponent { // if we have no element or already have loaded the panel return if (!this.element || panel.angularPanel) { - this.scopeProps.size.height = height; - this.scopeProps.size.width = width; return; } diff --git a/public/app/features/dashboard/dashgrid/PanelResizer.tsx b/public/app/features/dashboard/dashgrid/PanelResizer.tsx index 6c742cc01f5..6b169e2b1f8 100644 --- a/public/app/features/dashboard/dashgrid/PanelResizer.tsx +++ b/public/app/features/dashboard/dashgrid/PanelResizer.tsx @@ -23,16 +23,12 @@ export class PanelResizer extends PureComponent { constructor(props: Props) { super(props); - const { panel } = this.props; this.state = { editorHeight: this.initialHeight, }; this.throttledChangeHeight = throttle(this.changeHeight, 20, { trailing: true }); - this.throttledResizeDone = throttle(() => { - panel.resizeDone(); - }, 50); } get largestHeight() { @@ -57,7 +53,6 @@ export class PanelResizer extends PureComponent { onDrag: DraggableEventHandler = (evt, data) => { const newHeight = this.state.editorHeight + data.y; this.throttledChangeHeight(newHeight); - this.throttledResizeDone(); }; render() { diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index ebb82cea870..f2beb68d10a 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -48,6 +48,12 @@ class MetricsPanelCtrl extends PanelCtrl { this.events.on(PanelEvents.refresh, this.onMetricsPanelRefresh.bind(this)); this.events.on(PanelEvents.panelTeardown, this.onPanelTearDown.bind(this)); + this.events.on(PanelEvents.componentDidMount, this.onMetricsPanelMounted.bind(this)); + } + + private onMetricsPanelMounted() { + const queryRunner = this.panel.getQueryRunner(); + this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver); } private onPanelTearDown() { @@ -174,10 +180,6 @@ class MetricsPanelCtrl extends PanelCtrl { const panel = this.panel as PanelModel; const queryRunner = panel.getQueryRunner(); - if (!this.querySubscription) { - this.querySubscription = queryRunner.getData().subscribe(this.panelDataObserver); - } - return queryRunner.run({ datasource: panel.datasource, queries: panel.targets, diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index f7fc9aa986e..d82c09d49ba 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -164,6 +164,7 @@ class GraphCtrl extends MetricsPanelCtrl { this.events.on(PanelEvents.initPanelActions, this.onInitPanelActions.bind(this)); this.onDataLinksChange = this.onDataLinksChange.bind(this); + this.annotationsPromise = Promise.resolve({ annotations: [] }); } onInitEditMode() { diff --git a/yarn.lock b/yarn.lock index 416d857a62b..ea54e6deb4f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10026,12 +10026,7 @@ diff-sequences@^24.9.0: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5" integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew== -diff@3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" - integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== - -diff@^3.0.0: +diff@3.5.0, diff@^3.0.0: version "3.5.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== @@ -14942,7 +14937,7 @@ js-tokens@^3.0.2: resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls= -js-yaml@3.13.1, js-yaml@^3.13.1, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4: +js-yaml@3.13.1, js-yaml@^3.13.1, js-yaml@^3.4.6, js-yaml@^3.5.1, js-yaml@^3.5.4, js-yaml@~3.13.0: version "3.13.1" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847" integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw== @@ -23170,7 +23165,7 @@ stylis@3.5.0: resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1" integrity sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw== -supports-color@5.5.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.5.0: +supports-color@5.5.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== @@ -25034,20 +25029,13 @@ which-pm-runs@^1.0.0: resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.0.0.tgz#670b3afbc552e0b55df6b7780ca74615f23ad1cb" integrity sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs= -which@1, which@1.3.1, which@^1.2.10, which@^1.2.14, which@^1.2.4, which@^1.2.9, which@^1.3.0, which@^1.3.1: +which@1, which@1.3.1, which@^1.2.10, which@^1.2.14, which@^1.2.4, which@^1.2.9, which@^1.3.0, which@^1.3.1, which@~1.3.0: version "1.3.1" resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a" integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ== dependencies: isexe "^2.0.0" -which@~1.2.1: - version "1.2.14" - resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5" - integrity sha1-mofEN48D6CfOyvGs31bHNsAcFOU= - dependencies: - isexe "^2.0.0" - wide-align@1.1.3, wide-align@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"