feat: 🎸 add render complete dispatcher to embeddable

src/plugins/embeddable/kibana.json

@@ -12,6 +12,7 @@
   ],
   "requiredBundles": [
     "savedObjects",
-    "kibanaReact"
+    "kibanaReact",
+    "kibanaUtils"
   ]
 }

src/plugins/embeddable/public/lib/embeddables/embeddable.tsx

@@ -19,6 +19,7 @@
 
 import { cloneDeep, isEqual } from 'lodash';
 import * as Rx from 'rxjs';
+import { RenderCompleteDispatcher } from '../../../../kibana_utils/public';
 import { Adapters, ViewMode } from '../types';
 import { IContainer } from '../containers';
 import { EmbeddableInput, EmbeddableOutput, IEmbeddable } from './i_embeddable';
@@ -47,6 +48,8 @@ export abstract class Embeddable<
   private readonly input$: Rx.BehaviorSubject<TEmbeddableInput>;
   private readonly output$: Rx.BehaviorSubject<TEmbeddableOutput>;
 
+  protected renderComplete = new RenderCompleteDispatcher();
+
   // Listener to parent changes, if this embeddable exists in a parent, in order
   // to update input when the parent changes.
   private parentSubscription?: Rx.Subscription;
@@ -133,7 +136,9 @@ export abstract class Embeddable<
     }
   }
 
-  public render(domNode: HTMLElement | Element): void {
+  public render(domNode: HTMLElement): void {
+    this.renderComplete.setEl(domNode);
+
     if (this.destroyed) {
       throw new Error('Embeddable has been destroyed');
     }

src/plugins/embeddable/public/lib/embeddables/i_embeddable.ts

@@ -197,21 +197,4 @@ export interface IEmbeddable<
    * List of triggers that this embeddable will execute.
    */
   supportedTriggers(): Array<keyof TriggerContextMapping>;
-
-  /**
-   * Should emit `true` when embeddable has finished loading its data and has
-   * completely rendered. Should emit `false` when when embeddable is loading data
-   * again. At the start it is assumed that embeddable is has not completed
-   * rendering, so this embeddable has to emit `true` at least once.
-   *
-   * This is used for reporting to know that embeddable is ready, so
-   * it can take a screenshot. It is also used in functional tests to know that
-   * page has stabilized.
-   */
-  renderComplete$?: Observable<boolean>;
-
-  /**
-   * Use this hook to report when error happened during rendering.
-   */
-  renderError$?: Observable<Error>;
 }

src/plugins/kibana_utils/public/render_complete/render_complete.ts → src/plugins/kibana_utils/public/render_complete/render_complete_dispatcher.ts

@@ -29,25 +29,50 @@ export function dispatchRenderStart(el: HTMLElement) {
   dispatchEvent(el, 'renderStart');
 }
 
-export class RenderComplete {
-  constructor(private readonly el: HTMLElement) {}
+/**
+ * Should call `dispatchComplete()` when UI block has finished loading its data and has
+ * completely rendered. Should `dispatchInProgress()` every time UI block
+ * starts loading data again. At the start it is assumed that UI block is loading
+ * so it dispatches "in progress" automatically, so you need to call `setRenderComplete`
+ * at least once.
+ *
+ * This is used for reporting to know that UI block is ready, so
+ * it can take a screenshot. It is also used in functional tests to know that
+ * page has stabilized.
+ */
+export class RenderCompleteDispatcher {
+  private count: number = 0;
+  private el?: HTMLElement;
+
+  constructor(el?: HTMLElement) {
+    this.setEl(el);
+  }
+
+  public setEl(el?: HTMLElement) {
+    this.el = el;
+    this.count = 0;
+    if (el) this.dispatchInProgress();
+  }
 
-  public readonly dispatchInProgress = () => {
+  public dispatchInProgress() {
+    if (!this.el) return;
     this.el.setAttribute('data-render-complete', 'false');
+    this.el.setAttribute('data-rendering-count', String(this.count));
     dispatchRenderStart(this.el);
-  };
+  }
 
-  public readonly dispatchComplete = (count: number) => {
+  public dispatchComplete() {
+    if (!this.el) return;
+    this.count++;
     this.el.setAttribute('data-render-complete', 'true');
-    this.el.setAttribute('data-rendering-count', count.toString());
+    this.el.setAttribute('data-rendering-count', String(this.count));
     dispatchRenderComplete(this.el);
-  };
+  }
 
-  public readonly dispatchError = () => {
-    this.el.setAttribute(
-      'data-rendering-count',
-      String(Number(this.el.getAttribute('data-rendering-count')) + 1)
-    );
+  public dispatchError() {
+    if (!this.el) return;
+    this.count++;
     this.el.setAttribute('data-render-complete', 'false');
-  };
+    this.el.setAttribute('data-rendering-count', String(this.count));
+  }
 }

src/plugins/visualizations/public/embeddable/visualize_embeddable.ts

@@ -36,7 +36,6 @@ import {
   IContainer,
   Adapters,
 } from '../../../../plugins/embeddable/public';
-import { dispatchRenderComplete } from '../../../../plugins/kibana_utils/public';
 import {
   IExpressionLoaderParams,
   ExpressionsStart,
@@ -97,9 +96,6 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   private readonly deps: VisualizeEmbeddableFactoryDeps;
   private readonly inspectorAdapters?: Adapters;
 
-  protected renderComplete$ = new Rx.Subject<boolean>();
-  protected renderError$ = new Rx.Subject<Error>();
-
   constructor(
     timefilter: TimefilterContract,
     { vis, editPath, editUrl, indexPatterns, editable, deps }: VisualizeEmbeddableConfiguration,
@@ -248,26 +244,20 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
   hasInspector = () => Boolean(this.getInspectorAdapters());
 
   onContainerLoading = () => {
-    this.domNode.setAttribute('data-render-complete', 'false');
+    this.renderComplete.dispatchInProgress();
     this.updateOutput({ loading: true, error: undefined });
   };
 
-  onContainerRender = (count: number) => {
-    this.domNode.setAttribute('data-render-complete', 'true');
-    this.domNode.setAttribute('data-rendering-count', count.toString());
+  onContainerRender = () => {
+    this.renderComplete.dispatchComplete();
     this.updateOutput({ loading: false, error: undefined });
-    dispatchRenderComplete(this.domNode);
   };
 
   onContainerError = (error: ExpressionRenderError) => {
     if (this.abortController) {
       this.abortController.abort();
     }
-    this.domNode.setAttribute(
-      'data-rendering-count',
-      this.domNode.getAttribute('data-rendering-count') + 1
-    );
-    this.domNode.setAttribute('data-render-complete', 'false');
+    this.renderComplete.dispatchError();
     this.updateOutput({ loading: false, error });
   };
 
@@ -287,6 +277,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
     domNode.appendChild(div);
 
     this.domNode = div;
+    this.renderComplete.setEl(div);
 
     const expressions = getExpressions();
     this.handler = new expressions.ExpressionLoader(this.domNode, undefined, {
@@ -334,11 +325,8 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
 
     div.setAttribute('data-test-subj', 'visualizationLoader');
     div.setAttribute('data-shared-item', '');
-    div.setAttribute('data-rendering-count', '0');
-    div.setAttribute('data-render-complete', 'false');
 
     this.subscriptions.push(this.handler.loading$.subscribe(this.onContainerLoading));
-
     this.subscriptions.push(this.handler.render$.subscribe(this.onContainerRender));
 
     this.updateHandler();