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

public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx

@@ -110,10 +110,20 @@ export class PanelChromeAngular extends PureComponent<Props, State> {
   }
 
   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<Props, State> {
 
     // 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;
     }
 

public/app/features/dashboard/dashgrid/PanelResizer.tsx

@@ -23,16 +23,12 @@ export class PanelResizer extends PureComponent<Props, State> {
 
   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<Props, State> {
   onDrag: DraggableEventHandler = (evt, data) => {
     const newHeight = this.state.editorHeight + data.y;
     this.throttledChangeHeight(newHeight);
-    this.throttledResizeDone();
   };
 
   render() {

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,

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() {

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:
+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==
-
-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"