[Controls] [Portable Dashboards] Add control group renderer example plugin #146189

Heenawter · 2022-11-23T16:51:17Z

Summary

This PR expands on the control group building block by

Replacing the old input declarative API and replacing it with a getCreationOptions callback
Exposing the redux embeddable tools to the consumer

As part of this, I created an example plugin to demonstrate some of the new functionality 👍

Also, to avoid some code duplication, I had to move some code to the generic control_group_helpers.tsx so that both the controls plugin and the new example plugin could use it.

Checklist

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

elasticmachine · 2022-11-23T17:50:12Z

Pinging @elastic/kibana-presentation (Team:Presentation)

kibana-ci · 2022-11-24T16:45:38Z

💚 Build Succeeded

Buildkite Build
Commit: 88d02ac

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`controls`	157	158	+1

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`controls`	228	231	+3

Async chunks

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

id	before	after	diff
`controls`	475.4KB	451.5KB	-23.9KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`controls`	7	8	+1

Page load bundle

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

id	before	after	diff
`controls`	21.8KB	30.6KB	+8.7KB

Unknown metric groups

API count

id	before	after	diff
`controls`	237	240	+3

async chunk count

id	before	after	diff
`controls`	8	6	-2

ESLint disabled in files

id	before	after	diff
`osquery`	1	2	+1

ESLint disabled line counts

id	before	after	diff
`enterpriseSearch`	19	21	+2
`fleet`	59	65	+6
`osquery`	109	115	+6
`securitySolution`	443	449	+6
total			+20

Total ESLint disabled count

id	before	after	diff
`enterpriseSearch`	20	22	+2
`fleet`	68	74	+6
`osquery`	110	117	+7
`securitySolution`	520	526	+6
total			+21

History

💚 Build #90440 succeeded bf5bfe4
💔 Build #90420 failed 1f1d8dc
💔 Build #90412 failed 56ae123

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

cc @Heenawter

ThomThomson

LGTM! Code only review. The only comments I added are related to forward-looking future things and ideas, but all the code in this PR is exactly what I was hoping for. Nice work!

ThomThomson · 2022-11-24T19:23:19Z

examples/controls_example/public/app.tsx

+  { data }: ControlsExampleStartDeps,
+  { element }: AppMountParameters
+) => {
+  const dataViews = await data.dataViews.find('kibana_sample_data_ecommerce');


Not required for this PR - as this one is mostly about upgrading the API, but food for thought - maybe for all of our examples, we should align behind the sample web logs data set, as it has more relevance to solution use cases.

Additionally, maybe we should show some sort of warning asking developers who want to use the examples to install this data set if it doesn't exist.

ThomThomson · 2022-11-24T19:30:09Z

examples/controls_example/public/basic_redux_example.tsx

+interface Props {
+  dataView: DataView;
+}
+const ControlGroupRenderer = withSuspense(LazyControlGroupRenderer);


Again, not for right now, but I've been thinking about our usages of withSuspense, and how we actually export the LazyControlGroupRenderer. I'm thinking that maybe we should write our own version of withSuspense that only works with the Control Group (with a better / centered loading indicator), and export that instead so that implementors don't need to also use presentation_util.

ThomThomson · 2022-11-24T20:43:52Z

src/plugins/controls/public/control_group/control_group_renderer.tsx

  onEmbeddableLoad: (controlGroupContainer: ControlGroupContainer) => void;
+  getCreationOptions: (
+    builder: typeof ControlGroupInputBuilder


ThomThomson · 2022-11-24T20:48:17Z

src/plugins/controls/public/control_group/control_group_renderer.tsx

  const id = useMemo(() => uuid.v4(), []);
-
  /**
   * Use Lifecycles to load initial control group container
   */
  useLifecycles(


I think that while I was working on Portable Dashboard I ran into some problem with the useLifecycles hook which made me replace it with a general useEffect. Not sure exactly what the problem was anymore because it was a while ago, but I'd make sure that it gets called when you expect it to, and that the cleanup function works as / when expected.

ThomThomson · 2022-11-24T20:52:00Z

src/plugins/controls/public/control_group/control_group_renderer.tsx

+import { getCompatibleControlType, getNextPanelOrder } from './embeddable/control_group_helpers';
+import { controlGroupReducers } from './state/control_group_reducers';
+
+const ControlGroupInputBuilder = {


The next step of this process will be to use an input builder like this one in the inline editor to serve the Control Creation use case. This is because the control editor in that case simply returns a partial input object for the Control type you're creating, so it would be cool to eventually use the same APIs for partial input creation inside or outside of the Controls plugin.

ThomThomson · 2022-11-24T20:54:47Z

src/plugins/controls/public/control_group/control_group_renderer.tsx

+const ControlGroupInputBuilder = {
+  addDataControlFromField: async (
+    initialInput: Partial<ControlGroupInput>,
+    newPanelInput: {


@nreese, I'm appreciating your suggestion to expose API methods here for individual control types, but I think we should also keep this generic one for simplicity.

In the individual control type builders, we would be able to take selections, in case a consumer wanted to build an Options List control for instance with some options pre-selected.

* main: (30 commits) [Cloud Posture] test latest findings table sort (elastic#144668) [api-docs] 2022-11-28 Daily api_docs build (elastic#146359) [api-docs] 2022-11-27 Daily api_docs build (elastic#146353) [api-docs] 2022-11-26 Daily api_docs build (elastic#146350) [DataViews] Fix form validation UX when the same data view name already exists (elastic#146126) [Discover] Prevent agg based visualizations of Discover saved objects with adhoc data views (elastic#145583) [Health Gateway] Update response aggregation (elastic#145761) [api-docs] 2022-11-25 Daily api_docs build (elastic#146341) [Metric threshold rule] Adds new context variable for group by keys (elastic#145654) [Controls] [Portable Dashboards] Add control group renderer example plugin (elastic#146189) Refactor Observability Overview Page (elastic#146182) Send complete test data to xMatters, so it can create an alert (elastic#145431) [Dashboard] [Controls] Allow options list suggestions to be sorted (elastic#144867) Add open API specification for list connector types (elastic#145951) skip flaky suite (elastic#146086) [ML] Removing duplicate tooltip text (elastic#146308) Refactor Rules Page (elastic#146193) [DOCS] Alert limit for cases (elastic#145950) Extend session index fields mapping with a session creation timestamp. (elastic#145997) [Files] Move <Image /> component to `@kbn/shared-ux` package (elastic#145995) ...

Basic example plugin

2505cad

Heenawter self-assigned this Nov 23, 2022

Heenawter added 4 commits November 23, 2022 09:53

Add first control group renderer example

1eb8838

Dynamically determine type

e8f2201

Fix logic of grow + width

a7f8a47

Expose redux embeddable tools

e298f4b

Heenawter force-pushed the enhance-control-group-building-block_2022-11-18 branch 4 times, most recently from 1f1d8dc to a3f800e Compare November 23, 2022 17:32

Clean up code

bbb2342

Heenawter force-pushed the enhance-control-group-building-block_2022-11-18 branch from a3f800e to bbb2342 Compare November 23, 2022 17:39

Heenawter marked this pull request as ready for review November 23, 2022 17:50

Heenawter requested a review from a team as a code owner November 23, 2022 17:50

Heenawter and others added 2 commits November 23, 2022 10:51

Merge branch 'main' into enhance-control-group-building-block_2022-11-18

b68abaf

Rename component

bf5bfe4

Heenawter force-pushed the enhance-control-group-building-block_2022-11-18 branch from 0c7a4a3 to bf5bfe4 Compare November 23, 2022 18:00

Clean up commented out line

88d02ac

ThomThomson approved these changes Nov 24, 2022

View reviewed changes

Heenawter merged commit bb91749 into elastic:main Nov 24, 2022

This was referenced Nov 29, 2022

[Infrastructure UI] Host filtering controls #145935

Merged

[Controls] Revert input prop deletion from ControlGroupRenderer #146593

Closed

Heenawter deleted the enhance-control-group-building-block_2022-11-18 branch December 30, 2022 17:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Controls] [Portable Dashboards] Add control group renderer example plugin #146189

[Controls] [Portable Dashboards] Add control group renderer example plugin #146189

Heenawter commented Nov 23, 2022 •

edited

elasticmachine commented Nov 23, 2022

kibana-ci commented Nov 24, 2022

API count

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

ThomThomson left a comment

ThomThomson Nov 24, 2022

ThomThomson Nov 24, 2022

ThomThomson Nov 24, 2022

ThomThomson Nov 24, 2022

ThomThomson Nov 24, 2022

ThomThomson Nov 24, 2022

[Controls] [Portable Dashboards] Add control group renderer example plugin #146189

[Controls] [Portable Dashboards] Add control group renderer example plugin #146189

Conversation

Heenawter commented Nov 23, 2022 • edited

Summary

Checklist

For maintainers

elasticmachine commented Nov 23, 2022

kibana-ci commented Nov 24, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

async chunk count

ESLint disabled in files

ESLint disabled line counts

Total ESLint disabled count

History

ThomThomson left a comment

Choose a reason for hiding this comment

ThomThomson Nov 24, 2022

Choose a reason for hiding this comment

ThomThomson Nov 24, 2022

Choose a reason for hiding this comment

ThomThomson Nov 24, 2022

Choose a reason for hiding this comment

ThomThomson Nov 24, 2022

Choose a reason for hiding this comment

ThomThomson Nov 24, 2022

Choose a reason for hiding this comment

ThomThomson Nov 24, 2022

Choose a reason for hiding this comment

Heenawter commented Nov 23, 2022 •

edited