[Input Control] Custom renderer #84423

sulemanof · 2020-11-26T15:25:46Z

Summary

Part of #46801

Implement a custom renderer for Input Control visualization. This PR includes next changes:

create a toExpressionAst function for building pipeline;
implement a custom renderer;
significantly decrease the initial bundle size ( - 92kB) by lazy loading the vis controller and option tabs components for editor ;
import styles directly into dedicated files, remove single import in index.ts of the plugin (also decreased the bundle size);
add unit tests;

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
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

…l_renderer

elasticmachine · 2020-11-27T09:38:03Z

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

src/plugins/input_control_vis/public/components/editor/controls_tab.tsx

src/plugins/input_control_vis/public/components/editor/index.tsx

alexwizp

Overall LGTM. Thank you

stratoula · 2020-11-30T08:26:32Z

@elasticmachine merge upstream

stratoula

Code LGTM. I have mostly reviewed the kibana app team codebase but I have tested the vis locally and it seems to work fine.

…l_renderer

kibanamachine · 2020-12-01T10:16:53Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 2aaf88d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`inputControlVis`	41	53	+12

Async chunks

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

id	before	after	diff
`inputControlVis`	0.0B	114.4KB	+114.4KB

Distributable file count

id	before	after	diff
`default`	43182	43188	+6
`oss`	22579	22585	+6

Page load bundle

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

id	before	after	diff
`inputControlVis`	104.7KB	12.8KB	-91.9KB
`visualizations`	169.1KB	169.0KB	-87.0B
total			-91.9KB

Unknown metric groups

async chunk count

id	before	after	diff
`inputControlVis`	0	3	+3

History

💚 Build #90605 succeeded 90caae9
💛 Build #90456 was flaky 664d479
💚 Build #90459 succeeded 8d8af00

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

ThomThomson

Tested locally in chrome - everything still works, lazy loading works great - couldn't see any style differences with this PR.

Code LGTM as well.

nickofthyme

Nice work! Code looks great, input control still functions as normal. 🎉

nickofthyme · 2020-12-01T22:03:37Z

src/plugins/input_control_vis/public/types.ts

+export interface InputControlVisParams {
+  controls: ControlParams[];
+  pinFilters: boolean;
+  updateFiltersOnChange: boolean;
+  useTimeFilter: boolean;
+}


* Create custom renderer * Reduce initial bundle size * Fix tests * Add unit test * Remove injectI18n usage Co-authored-by: Kibana Machine <[email protected]>

* master: [Lens] Show color in flyout instead of auto (elastic#84532) [Lens] Use index pattern through service instead of reading saved object (elastic#84432) Make it possible to use Kibana anonymous authentication provider with ES anonymous access. (elastic#84074) TelemetryCollectionManager: Use X-Pack strategy as an OSS overwrite (elastic#84477) migrate away from rest_total_hits_as_int (elastic#84508) [Input Control] Custom renderer (elastic#84423) Attempt to more granularly separate App Search vs Workplace Search vs shared GitHub notifications (elastic#84713) [Security Solutino][Case] Case connector alert UI (elastic#82405) [Maps] Support runtime fields in tooltips (elastic#84377) [CCR] Fix row actions in follower index and auto-follow pattern tables (elastic#84433) [Enterprise Search] Migrate shared Indexing Status component (elastic#84571) [maps] remove fields from index-pattern test artifacts (elastic#84379) Add routes for use in Sources Schema (elastic#84579) Changes UI links for drilldowns (elastic#83971) endpoint telemetry cloned endpoint tests (elastic#81498) [Fleet] Handler api key creation errors when Fleet Admin is invalid (elastic#84576)

* Create custom renderer * Reduce initial bundle size * Fix tests * Add unit test * Remove injectI18n usage Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>

* master: (72 commits) Make alert status fetching more resilient (elastic#84676) [APM] Refactor hooks and context (elastic#84615) Added word break styles to the texts in the item details card. (elastic#84654) [Search] Disable "send to background" when auto-refresh is enabled (elastic#84106) Add readme for new palette service (elastic#84512) Make all providers to preserve original URL when session expires. (elastic#84229) [Lens] Show color in flyout instead of auto (elastic#84532) [Lens] Use index pattern through service instead of reading saved object (elastic#84432) Make it possible to use Kibana anonymous authentication provider with ES anonymous access. (elastic#84074) TelemetryCollectionManager: Use X-Pack strategy as an OSS overwrite (elastic#84477) migrate away from rest_total_hits_as_int (elastic#84508) [Input Control] Custom renderer (elastic#84423) Attempt to more granularly separate App Search vs Workplace Search vs shared GitHub notifications (elastic#84713) [Security Solutino][Case] Case connector alert UI (elastic#82405) [Maps] Support runtime fields in tooltips (elastic#84377) [CCR] Fix row actions in follower index and auto-follow pattern tables (elastic#84433) [Enterprise Search] Migrate shared Indexing Status component (elastic#84571) [maps] remove fields from index-pattern test artifacts (elastic#84379) Add routes for use in Sources Schema (elastic#84579) Changes UI links for drilldowns (elastic#83971) ...

sulemanof added 5 commits November 26, 2020 13:05

Create custom renderer

3f6c1de

Reduce initial bundle size

d7b2612

Fix tests

8d5e26e

Add unit test

664d479

Merge remote-tracking branch 'upstream/master' into feat/input_contro…

8d8af00

…l_renderer

sulemanof added Feature:Input Control Input controls visualization release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.11.0 v8.0.0 labels Nov 27, 2020

sulemanof requested review from nickofthyme, stratoula and alexwizp November 27, 2020 09:37

sulemanof marked this pull request as ready for review November 27, 2020 09:38

sulemanof requested a review from a team November 27, 2020 09:38

sulemanof requested review from a team as code owners November 27, 2020 09:38

alexwizp reviewed Nov 30, 2020

View reviewed changes

src/plugins/input_control_vis/public/components/editor/controls_tab.tsx Outdated Show resolved Hide resolved

alexwizp reviewed Nov 30, 2020

View reviewed changes

src/plugins/input_control_vis/public/components/editor/index.tsx Show resolved Hide resolved

alexwizp approved these changes Nov 30, 2020

View reviewed changes

Merge branch 'master' into feat/input_control_renderer

90caae9

stratoula approved these changes Nov 30, 2020

View reviewed changes

ryankeairns approved these changes Nov 30, 2020

View reviewed changes

sulemanof added 2 commits December 1, 2020 11:34

Remove injectI18n usage

28a107d

Merge remote-tracking branch 'upstream/master' into feat/input_contro…

2aaf88d

…l_renderer

sulemanof mentioned this pull request Dec 1, 2020

Renderers for all visualizations #46801

Closed

13 tasks

ThomThomson approved these changes Dec 1, 2020

View reviewed changes

nickofthyme approved these changes Dec 1, 2020

View reviewed changes

sulemanof merged commit 2c084b7 into elastic:master Dec 2, 2020

sulemanof deleted the feat/input_control_renderer branch December 2, 2020 08:02

sulemanof mentioned this pull request Dec 2, 2020

[7.x] [Input Control] Custom renderer (#84423) #84730

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Input Control] Custom renderer #84423

[Input Control] Custom renderer #84423

sulemanof commented Nov 26, 2020 •

edited

Loading

elasticmachine commented Nov 27, 2020

alexwizp left a comment

stratoula commented Nov 30, 2020

stratoula left a comment

kibanamachine commented Dec 1, 2020

async chunk count

ThomThomson left a comment

nickofthyme left a comment

nickofthyme Dec 1, 2020

[Input Control] Custom renderer #84423

[Input Control] Custom renderer #84423

Conversation

sulemanof commented Nov 26, 2020 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented Nov 27, 2020

alexwizp left a comment

Choose a reason for hiding this comment

stratoula commented Nov 30, 2020

stratoula left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 1, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

Page load bundle

async chunk count

History

ThomThomson left a comment

Choose a reason for hiding this comment

nickofthyme left a comment

Choose a reason for hiding this comment

nickofthyme Dec 1, 2020

Choose a reason for hiding this comment

sulemanof commented Nov 26, 2020 •

edited

Loading