[Discover] Deangularization of search embeddable #100552

majagrubic · 2021-05-25T13:51:52Z

Summary

This is an attempt to deangularize search embeddable. I've created a new component - SavedSearchEmbeddable that is instantiated by the factory. Much of the logic inside it remains the same, with a few caveats around lifecycle and updates.

I've tested it for doc table extensively and a bit for DiscoverGrid.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
~~- [ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
~~- [ ] Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)~~
~~- [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)~~
~~- [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list~~
-~ [ ] This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)~
~~- [ ] This was checked for cross-browser compatibility~~

For maintainers

This was checked for breaking API changes and was labeled appropriately

kertal

Tested in Chrome, Firefox, Safari, works as expected, LLGW! will have a closer look when you flag ready for review

src/plugins/discover/public/application/components/create_discover_grid_directive.tsx

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

majagrubic · 2021-05-31T16:11:35Z

@elasticmachine merge upstream

elasticmachine · 2021-06-01T07:18:22Z

Pinging @elastic/kibana-app (Team:KibanaApp)

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

kertal

Review in progress, one more file, looks pretty nice, great work!

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

src/plugins/discover/public/application/components/discover_grid/discover_grid.tsx

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

kertal

Code LGTM 👍 , found 2 more files to cleanup: search_template.html, search_template_datagrid.html, will continue with checking performance

kertal · 2021-06-08T17:19:12Z

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

+    if (renderProps.refs) {
+      const fn = getRenderFn(renderProps.refs, renderProps);
+      fn().then((newScope) => {
+        scope.current = newScope;
+      });
+    }


I think I've found the reason why the domNode count is much higher in this PR compared to the one in master. So currently, with the current code, the classic table is re-rendered completely with every change. with the following change, it would just render once, and then Angular would take care of the additional renderings:

if (renderProps.refs && !scope.current) { const fn = getRenderFn(renderProps.refs, renderProps); fn().then((newScope) => { scope.current = newScope; }); } else if (scope && scope.current) { scope.current.renderProps = { ...renderProps }; scope.current.$applyAsync(); }

Some additional typings is necessary to satisfy TypeScript, best to look here how it was solved:

kibana/src/plugins/discover/public/application/angular/doc_table/create_doc_table_react.tsx

Lines 128 to 140 in 3ad0532

useEffect(() => {

if (ref && ref.current && !scope.current) {

const fn = getRenderFn(ref.current, { ...renderProps, rows, minimumVisibleRows });

fn().then((newScope) => {

scope.current = newScope;

});

} else if (scope && scope.current) {

scope.current.renderProps = { ...renderProps, rows, minimumVisibleRows };

scope.current.$apply();

}

}, [renderProps, minimumVisibleRows, rows]);

useEffect(() => {

🎨 Optional chaining :)

ref?.current scope?.current

kertal

I think search_embeddable.ts can be cleaned up?

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

majagrubic · 2021-06-09T08:44:31Z

@kertal I intentionally left search_embeddable in here, to make reviewing easier (as a lot of logic is the same). Happy to remove it though ⚡

majagrubic · 2021-06-09T10:18:22Z

@elasticmachine merge upstream

timroes · 2021-06-09T10:10:59Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx

+    const docTableProps = props as DocTableEmbeddableProps;
+    return <DiscoverDocTableEmbeddable {...docTableProps} />;
+  }
+  const discoverGridProps = props as DiscoverGridProps;


This cast should be unnecessary.

SearchProps differ in more than just refs from DiscoverGridProps

timroes · 2021-06-09T10:13:35Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

+    if (!this.searchProps) {
+      return;
+    }
+    this.searchProps.refs = domNode;


I think we could improve readability and type saftyness if we'd not store the domNode in the searchProps. We have the domNode available in the renderReactComponent method, so we could explicitly pass it into the SaveSearchEmbeddableComponent there besides the searchProps, thus making us able to type the SavedSearchEmbeddableComponent props in a way, that we know ref is always there (instead of - as currently - type un-safe case the property type to something that has ref explcitily non null on it.

tl;dr: Removing refs from searchProps, pass domNode in renderReactComponent explicitly to SavedSearchEmbeddableComponent and fix types to match that.

timroes · 2021-06-09T10:14:36Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx

+export function SavedSearchEmbeddableComponent(props: SearchProps) {
+  const { useLegacyTable } = props;
+  if (useLegacyTable) {
+    const docTableProps = props as DocTableEmbeddableProps;


See my comment above, on how we can get rid of this type un-safe cast.

timroes · 2021-06-09T12:15:55Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx

+
+import React from 'react';
+
+import { DiscoverGridEmbeddable } from 'src/plugins/discover/public/application/angular/create_discover_grid_directive';


Let's try to keep this import relative since it's within the same plugin, so we avoid later problems in case the overall plugin folder structure from the Kibana platform changes (once again :D)

timroes · 2021-06-09T12:16:26Z

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

+      if (scope.current) {
+        scope.current.$destroy();
+      }


Suggested change

if (scope.current) {

scope.current.$destroy();

}

scope.current?.$destroy();

timroes · 2021-06-09T12:37:59Z

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

+      const injector = await getServices().getEmbeddableInjector();
+      return await injectAngularElement(domNode, directive.template, props, injector);
+    } catch (e) {
+      render(<div>error</div>, domNode);


I assume we expect this to never happen. Since we still catch it, I think we should render a more meaningful message, that will help us trace this in case it would ever happen. If we expect it to "NEVER" happen, I think alternatively we might just not catch the error at all, and instead let it be handled by the overall embeddable error infrastructure.

timroes · 2021-06-09T12:38:51Z

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx

+}
+
+function getRenderFn(domNode: Element, props: DocTableEmbeddableProps) {
+  const directive = {


🎨 Since this object has only one property, and doesn't seem to be used anywhere except for accessing that single property, maybe we could just make this a const template instead.

For consistency with other angular directives and overall readability, I'd like to keep it as is

timroes · 2021-06-09T12:41:57Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

+  }
+
+  public reload() {
+    if (this.searchProps)


🎨 I think we try not to skip the curly braces whenever possible, so I believe it might be a bit more aligned with the rest of the code if we'd also put that block into curly braces.

timroes · 2021-06-09T12:42:31Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }


🎨

Suggested change

if (this.subscription) {

this.subscription.unsubscribe();

}

this.subscription?.unsubscribe();

timroes · 2021-06-09T12:48:30Z

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

+    return new Promise(() => {
+      ReactDOM.render(<SavedSearchEmbeddableComponentMemoized {...searchProps} />, domNode);
+    });


❓ Could you clarify for me, why we create a new promise here? Are we trying to "delay" the rendering to the next execution slot for some reason? (Which would not work via that code, since the executor of a Promise is executed synchronously.) Because the way this is currently written we return a promise that will never resolve, and thus potentially creating a memory leak, since we're waiting on it in other places with await (which will never pass).

Matthias says it makes debugging easier :)

but there's something missing in the code? one moment

The 3rd param of ReactDom.render will be executed once rendering has finished, it should resolve the Promise

However fine with doing it simpler, main purpose was just to use 1 ReactDOM.render instead of 2

Ah okay, I see, you planned to do that as:

return new Promise((resolve) => { ReactDOM.render(<SavedSearchEmbeddableComponentMemoized {...searchProps} />, domNode, resolve); });

If that actually helps lowering the amount of rendering, it might be a reasonable change. Though we should keep in mind, that the 3rd parameter or render will be called on every Render or update, meaning React will also keep a reference around to that to call it again when updated, so I think we should make sure we're not accidentally leaking promises around between re-renderings (that anyway can only resolve once).

used that to debug the issue about the dom node count increase, it wasn't the cause. fine with keeping it the way it was used before .. for now

src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx

kertal · 2021-06-14T06:27:41Z

@elasticmachine merge upstream

kertal

Code LGTM 👍 , with the latest changes performance issues were resolved 🥳 , no more detached DOM nodes, and, now the performance is comparable with the old embeddable, in the attached example, it's even faster.

kibanamachine · 2021-06-14T08:32:24Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`discover`	377	368	-9

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	426.8KB	416.9KB	-9.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`discover`	74.5KB	74.7KB	+227.0B

Unknown metric groups

async chunk count

id	before	after	diff
`discover`	7	8	+1

History

💚 Build #130599 succeeded 69e7646
💚 Build #130398 succeeded c540629
💔 Build #130130 failed 2603f3d
💔 Build #130089 failed 3bf5eb5
💔 Build #130065 failed 04a3cfa

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* [Discover] Render empty embeddable * First version of grid embeddable * More search embeddable * Almost stable version * Fixing typescript errors * Fixing filtering and sorting * Add data-shared-item to DiscoverGridEmbeddable * Trigger rerender when title changes * Fixing incorrectly touched files * Remove search_embeddable * Remove lodash * Fixing imports * Minor fixes * Removing unnecessary files * Minor fix * Remove unused import * Applying PR comments * Applying PR comments * Removing search embeddable * Fix missing import * Addressing PR comments * Do not memoize saved search component * Applying Matthias's suggestion Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # api_docs/deprecations.mdx

* master: [Security solution][Endpoint] Removes zip compression when creating artifacts (elastic#101379) [Dashboard]: Fixes disabled viz filter is applied (elastic#101859) [Discover] Deangularization of search embeddable (elastic#100552)

* [Discover] Render empty embeddable * First version of grid embeddable * More search embeddable * Almost stable version * Fixing typescript errors * Fixing filtering and sorting * Add data-shared-item to DiscoverGridEmbeddable * Trigger rerender when title changes * Fixing incorrectly touched files * Remove search_embeddable * Remove lodash * Fixing imports * Minor fixes * Removing unnecessary files * Minor fix * Remove unused import * Applying PR comments * Applying PR comments * Removing search embeddable * Fix missing import * Addressing PR comments * Do not memoize saved search component * Applying Matthias's suggestion Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # api_docs/deprecations.mdx Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

* [Discover] Render empty embeddable * First version of grid embeddable * More search embeddable * Almost stable version * Fixing typescript errors * Fixing filtering and sorting * Add data-shared-item to DiscoverGridEmbeddable * Trigger rerender when title changes * Fixing incorrectly touched files * Remove search_embeddable * Remove lodash * Fixing imports * Minor fixes * Removing unnecessary files * Minor fix * Remove unused import * Applying PR comments * Applying PR comments * Removing search embeddable * Fix missing import * Addressing PR comments * Do not memoize saved search component * Applying Matthias's suggestion Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

majagrubic changed the title ~~Discover ss embeddable~~ [Discover] Deangularization of search embeddable May 27, 2021

kertal reviewed May 28, 2021

View reviewed changes

src/plugins/discover/public/application/components/create_discover_grid_directive.tsx Outdated Show resolved Hide resolved

kertal reviewed May 28, 2021

View reviewed changes

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx Outdated Show resolved Hide resolved

majagrubic added Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Discover Discover Application release_note:skip Skip the PR/issue when compiling release notes v7.14.0 v8.0.0 labels Jun 1, 2021

majagrubic marked this pull request as ready for review June 1, 2021 07:18

majagrubic requested a review from a team June 1, 2021 07:18

majagrubic requested a review from kertal June 1, 2021 07:18

kertal reviewed Jun 2, 2021

View reviewed changes

src/plugins/discover/public/application/angular/doc_table/create_doc_table_embeddable.tsx Outdated Show resolved Hide resolved

kertal reviewed Jun 2, 2021

View reviewed changes

botelastic bot added the Team:APM All issues that need APM UI Team support label Jun 4, 2021

majagrubic requested review from a team as code owners June 4, 2021 08:17

Maja Grubic added 9 commits June 4, 2021 09:33

[Discover] Render empty embeddable

6478960

First version of grid embeddable

c796fdf

More search embeddable

b7bbfb3

Almost stable version

3ad0532

Fixing typescript errors

7b943fc

Fixing filtering and sorting

f6dd986

Add data-shared-item to DiscoverGridEmbeddable

1ec4052

Trigger rerender when title changes

9dcb235

Fixing incorrectly touched files

abdd8e4

kertal reviewed Jun 8, 2021

View reviewed changes

kertal reviewed Jun 9, 2021

View reviewed changes

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx Outdated Show resolved Hide resolved

Applying PR comments

2e9a9c8

majagrubic force-pushed the discover-ss-embeddable branch from be39589 to 2e9a9c8 Compare June 9, 2021 08:20

Merge master

a1cb95f

Removing search embeddable

d334657

kibanamachine and others added 2 commits June 9, 2021 06:18

Merge branch 'master' into discover-ss-embeddable

04a3cfa

Fix missing import

3bf5eb5

timroes reviewed Jun 9, 2021

View reviewed changes

Maja Grubic added 2 commits June 9, 2021 15:07

Addressing PR comments

2603f3d

Do not memoize saved search component

c540629

kertal reviewed Jun 10, 2021

View reviewed changes

src/plugins/discover/public/application/embeddable/saved_search_embeddable_component.tsx Outdated Show resolved Hide resolved

kertal reviewed Jun 10, 2021

View reviewed changes

src/plugins/discover/public/application/embeddable/saved_search_embeddable.tsx Outdated Show resolved Hide resolved

Applying Matthias's suggestion

69e7646

Merge branch 'master' into discover-ss-embeddable

99548a5

kertal approved these changes Jun 14, 2021

View reviewed changes

majagrubic merged commit 80b109f into elastic:master Jun 14, 2021

majagrubic deleted the discover-ss-embeddable branch June 14, 2021 08:34

majagrubic mentioned this pull request Jun 14, 2021

[7.x] [Discover] Deangularization of search embeddable (#100552) #102027

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Discover] Deangularization of search embeddable #100552

[Discover] Deangularization of search embeddable #100552

majagrubic commented May 25, 2021 •

edited

Loading

kertal left a comment

majagrubic commented May 31, 2021

elasticmachine commented Jun 1, 2021

kertal left a comment

kertal left a comment

kertal Jun 8, 2021 •

edited

Loading

timroes Jun 9, 2021

kertal left a comment

majagrubic commented Jun 9, 2021

majagrubic commented Jun 9, 2021

timroes Jun 9, 2021

majagrubic Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

majagrubic Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

timroes Jun 9, 2021

majagrubic Jun 9, 2021

kertal Jun 9, 2021

kertal Jun 9, 2021

kertal Jun 9, 2021

timroes Jun 9, 2021 •

edited

Loading

timroes Jun 9, 2021

kertal Jun 9, 2021 •

edited

Loading

kertal commented Jun 14, 2021

kertal left a comment

kibanamachine commented Jun 14, 2021

async chunk count

	useEffect(() => {
	if (ref && ref.current && !scope.current) {
	const fn = getRenderFn(ref.current, { ...renderProps, rows, minimumVisibleRows });
	fn().then((newScope) => {
	scope.current = newScope;
	});
	} else if (scope && scope.current) {
	scope.current.renderProps = { ...renderProps, rows, minimumVisibleRows };
	scope.current.$apply();
	}
	}, [renderProps, minimumVisibleRows, rows]);

	useEffect(() => {


		import React from 'react';

		import { DiscoverGridEmbeddable } from 'src/plugins/discover/public/application/angular/create_discover_grid_directive';

[Discover] Deangularization of search embeddable #100552

[Discover] Deangularization of search embeddable #100552

Conversation

majagrubic commented May 25, 2021 • edited Loading

Summary

Checklist

For maintainers

kertal left a comment

Choose a reason for hiding this comment

majagrubic commented May 31, 2021

elasticmachine commented Jun 1, 2021

kertal left a comment

Choose a reason for hiding this comment

kertal left a comment

Choose a reason for hiding this comment

kertal Jun 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kertal left a comment

Choose a reason for hiding this comment

majagrubic commented Jun 9, 2021

majagrubic commented Jun 9, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timroes Jun 9, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kertal Jun 9, 2021 • edited Loading

Choose a reason for hiding this comment

kertal commented Jun 14, 2021

kertal left a comment

Choose a reason for hiding this comment

kibanamachine commented Jun 14, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

async chunk count

History

majagrubic commented May 25, 2021 •

edited

Loading

kertal Jun 8, 2021 •

edited

Loading

timroes Jun 9, 2021 •

edited

Loading

kertal Jun 9, 2021 •

edited

Loading