[Input Controls] Options List Embeddable, Factory & Frame #106877

ThomThomson · 2021-07-27T16:30:43Z

Summary

This PR is a follow-up to #103512, which is intended to be merged into master.

This re-creates the options list component as an embeddable, with a couple notable improvements over the initial design

The embeddable takes an async fetchData method, which is passed in. In storybook this is a stub, and it can be replaced with a real implementation inside of Kibana.
Embeddable input works as a public facing API only, where the component manages its own internal state for things like available options, searching, and selection.
The storybook implementation and the embeddable are totally separated now, such that no POC code will leak into the implementation.
Most design ideas from Design comments for initial OptionsList ThomThomson/kibana#8 have been implemented

For maintainers

This was checked for breaking API changes and was labeled appropriately

…ibana into controls/initialOptionsListComponent

…ialOptionsListComponent

…rolFrame

elasticmachine · 2021-07-28T13:15:22Z

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

ThomThomson · 2021-07-28T17:47:05Z

@elasticmachine merge upstream

[Input Controls] Using EuiFilterButton

ryankeairns

Andrea is out this week. Is it safe to assume we can merge this, from a design perspective, and come back to additional tweaks after this is merged? From what I understood, this was big step along an iterative journey. (i.e. I'm considering just hitting approve for the SCSS changes)

ThomThomson · 2021-08-09T14:13:08Z

@elasticmachine merge upstream

ThomThomson · 2021-08-09T17:56:21Z

@ryankeairns, I was also out last week, but yes I believe now that the design PR has been merged in, this should be safe to merge from a design perspective! I will ask @andreadelrio to review & triple-check that though.

andreadelrio · 2021-08-10T03:15:01Z

@ryankeairns, I was also out last week, but yes I believe now that the design PR has been merged in, this should be safe to merge from a design perspective! I will ask @andreadelrio to review & triple-check that though.

@ThomThomson This is looking good to me. I have a related PR up on the EUI repo fixing the issue of hiding the count when no selections have been made.

poffdeluxe

Looks good overall! Few small questions but the storybook demo is very neat! My one other thought is about where this lives. Is its home presentation util plugin permanently or is this where the POC is kinda being worked on and built out?

poffdeluxe · 2021-08-10T13:08:00Z

..._util/public/components/input_controls/control_types/options_list/options_list_component.tsx

+      setAvailableOptions(newAvailableOptions);
+
+      if (toggleOff) selectedOptions.current.delete(item.label);
+      else selectedOptions.current.add(item.label);


nit: the two line if-else here is a little hard to read but that might just be me

Yeah, some braces here might help readability!

poffdeluxe · 2021-08-10T13:12:35Z

..._util/public/components/input_controls/control_types/options_list/options_list_component.tsx

+      })}
+    >
+      <EuiPopover
+        id="popoverExampleMultiSelect"


Is this id correct? I can't find a reference to it in this PR

Looks like that's a leftover from copying from the EUI examples - will remove!

kibanamachine · 2021-08-10T19:26:44Z

💛 Build succeeded, but was flaky

continuous-integration/kibana-ci/pull-request
Commit: 606555f
Storybooks Preview
Flaky suites:
- xpack-kibana-ciGroup13

Test Failures

Kibana Pipeline / general / X-Pack Detection Engine API Integration Tests.x-pack/test/detection_engine_api_integration/security_and_spaces/tests/exception_operators_data_types/text·ts.detection engine api security and spaces enabled Detection exceptions data types and operators Rule exception operators for data type text "is not" operator will return 0 results if it cannot find what it is excluding

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has failed 2 times on tracked branches: https://github.com/elastic/kibana/issues/107911

[00:00:00]       │
[00:00:00]         └-: detection engine api security and spaces enabled
[00:00:00]           └-> "before all" hook in "detection engine api security and spaces enabled"
[00:00:00]           └-: 
[00:00:00]             └-> "before all" hook in ""
[00:00:00]             └-: Detection exceptions data types and operators
[00:00:00]               └-> "before all" hook in "Detection exceptions data types and operators"
[00:00:00]               └-: 
[00:00:00]                 └-> "before all" hook in ""
[00:00:00]                 └-: Rule exception operators for data type text
[00:00:00]                   └-> "before all" hook in "Rule exception operators for data type text"
[00:00:00]                   └-: "is not" operator
[00:00:00]                     └-> "before all" hook for "will return 0 results if it cannot find what it is excluding"
[00:00:00]                     └-> will return 0 results if it cannot find what it is excluding
[00:00:00]                       └-> "before each" hook: global before each for "will return 0 results if it cannot find what it is excluding"
[00:00:00]                       └-> "before each" hook for "will return 0 results if it cannot find what it is excluding"
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.siem-signals-default-migration-cleanup]
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.c.m.MetadataIndexTemplateService] [node-01] adding index template [.siem-signals-default] for index patterns [.siem-signals-default-*]
[00:00:00]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.siem-signals-default-000001] creating index, cause [api], templates [.siem-signals-default], shards [1]/[1]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.siem-signals-default-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.siem-signals-default-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] in policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.lists-default]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.siem-signals-default-000001] from [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] to [{"phase":"hot","action":"rollover","name":"check-rollover-ready"}] in policy [.siem-signals-default]
[00:00:00]                         │ info [o.e.x.i.a.TransportPutLifecycleAction] [node-01] adding index lifecycle policy [.items-default]
[00:00:00]                         │ info [o.e.c.m.MetadataIndexTemplateService] [node-01] adding template [.lists-default] for index patterns [.lists-default-*]
[00:00:00]                         │ info [o.e.c.m.MetadataIndexTemplateService] [node-01] adding template [.items-default] for index patterns [.items-default-*]
[00:00:00]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.lists-default-000001] creating index, cause [api], templates [.lists-default], shards [1]/[1]
[00:00:00]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.lists-default-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [.lists-default]
[00:00:00]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [.items-default-000001] creating index, cause [api], templates [.items-default], shards [1]/[1]
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.lists-default-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] in policy [.lists-default]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Loading "mappings.json"
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Loading "data.json"
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.items-default-000001] from [null] to [{"phase":"new","action":"complete","name":"complete"}] in policy [.items-default]
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.lists-default-000001] from [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] to [{"phase":"hot","action":"rollover","name":"check-rollover-ready"}] in policy [.lists-default]
[00:00:01]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [text] creating index, cause [api], templates [], shards [1]/[1]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Created index "text"
[00:00:01]                         │ debg [x-pack/test/functional/es_archives/rule_exceptions/text] "text" settings {"index":{"number_of_replicas":"1","number_of_shards":"1"}}
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.items-default-000001] from [{"phase":"new","action":"complete","name":"complete"}] to [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] in policy [.items-default]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text] Indexed 4 docs into "text"
[00:00:01]                         │ info [o.e.x.i.IndexLifecycleTransition] [node-01] moving index [.items-default-000001] from [{"phase":"hot","action":"unfollow","name":"branch-check-unfollow-prerequisites"}] to [{"phase":"hot","action":"rollover","name":"check-rollover-ready"}] in policy [.items-default]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Loading "mappings.json"
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Loading "data.json"
[00:00:01]                         │ info [o.e.c.m.MetadataCreateIndexService] [node-01] [text_no_spaces] creating index, cause [api], templates [], shards [1]/[1]
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Created index "text_no_spaces"
[00:00:01]                         │ debg [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] "text_no_spaces" settings {"index":{"number_of_replicas":"1","number_of_shards":"1"}}
[00:00:01]                         │ info [x-pack/test/functional/es_archives/rule_exceptions/text_no_spaces] Indexed 4 docs into "text_no_spaces"
[00:00:01]                       │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/zYro7t7gTj-KP1nukWW05w] update_mapping [_doc]
[00:00:06]                       │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/zYro7t7gTj-KP1nukWW05w] update_mapping [_doc]
[00:00:07]                       │ info [o.e.c.m.MetadataMappingService] [node-01] [.kibana_8.0.0_001/zYro7t7gTj-KP1nukWW05w] update_mapping [_doc]
[00:00:10]                       │ proc [kibana]   log   [18:09:45.678] [info][eventLog][plugins] event logged: {"@timestamp":"2021-08-10T18:09:45.676Z","event":{"provider":"alerting","action":"execute-start","kind":"alert","category":["siem"],"start":"2021-08-10T18:09:45.676Z"},"kibana":{"saved_objects":[{"rel":"primary","type":"alert","id":"221150c0-fa06-11eb-bc55-dfca44238504","type_id":"siem.signals"}],"task":{"scheduled":"2021-08-10T18:09:45.394Z","schedule_delay":282000000},"server_uuid":"5b2de169-2785-441b-ae8c-186a1936b17d"},"rule":{"id":"221150c0-fa06-11eb-bc55-dfca44238504","license":"basic","category":"siem.signals","ruleset":"siem"},"message":"alert execution start: \"221150c0-fa06-11eb-bc55-dfca44238504\"","ecs":{"version":"1.8.0"}}
[00:00:11]                       │ proc [kibana]   log   [18:09:46.490] [info][eventLog][plugins] event logged: {"@timestamp":"2021-08-10T18:09:45.676Z","event":{"provider":"alerting","action":"execute","kind":"alert","category":["siem"],"start":"2021-08-10T18:09:45.676Z","outcome":"failure","end":"2021-08-10T18:09:46.489Z","duration":813000000,"reason":"execute"},"kibana":{"saved_objects":[{"rel":"primary","type":"alert","id":"221150c0-fa06-11eb-bc55-dfca44238504","type_id":"siem.signals"}],"task":{"scheduled":"2021-08-10T18:09:45.394Z","schedule_delay":282000000},"alerting":{"status":"error"},"server_uuid":"5b2de169-2785-441b-ae8c-186a1936b17d"},"rule":{"id":"221150c0-fa06-11eb-bc55-dfca44238504","license":"basic","category":"siem.signals","ruleset":"siem"},"message":"alert execution failure: siem.signals:221150c0-fa06-11eb-bc55-dfca44238504: 'Signal Testing Query'","error":{"message":"[siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1]: version_conflict_engine_exception: [version_conflict_engine_exception] Reason: [siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1]"},"ecs":{"version":"1.8.0"}}
[00:00:11]                       │ proc [kibana]   log   [18:09:46.508] [error][alerting][plugins] Executing Alert default:siem.signals:221150c0-fa06-11eb-bc55-dfca44238504 has resulted in Error: [siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1]: version_conflict_engine_exception: [version_conflict_engine_exception] Reason: [siem-detection-engine-rule-status:24bfa7e0-fa06-11eb-bc55-dfca44238504]: version conflict, required seqNo [18], primary term [1]. current document has seqNo [19] and primary term [1], caused by: ""
[00:01:44]                       └- ✖ fail: detection engine api security and spaces enabled  Detection exceptions data types and operators  Rule exception operators for data type text "is not" operator will return 0 results if it cannot find what it is excluding
[00:01:44]                       │      Error: timed out waiting for function condition to be true within waitForRuleSuccessOrStatus
[00:01:44]                       │       at /dev/shm/workspace/parallel/20/kibana/x-pack/test/detection_engine_api_integration/utils.ts:785:9
[00:01:44]                       │ 
[00:01:44]                       │

Stack Trace

Error: timed out waiting for function condition to be true within waitForRuleSuccessOrStatus
    at /dev/shm/workspace/parallel/20/kibana/x-pack/test/detection_engine_api_integration/utils.ts:785:9

Metrics [docs]

✅ unchanged

History

💚 Build #143710 succeeded 60c9d56
💚 Build #142083 succeeded a3578dc
💔 Build #142075 failed be63947
💚 Build #141436 succeeded 99f020a
💔 Build #141385 failed 3caa0e6

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

ryankeairns

Looks great and works as expected!

Note to future selves:

add ability to clear options
add ability to view only selected options
add option to limit input width (i.e. so 1 input doesn't go full width)

…6877) Co-authored-by: Clint Andrew Hall <clint@clintandrewhall.com> Co-authored-by: andreadelrio <delrio.andre@gmail.com>

…108101) Co-authored-by: Clint Andrew Hall <clint@clintandrewhall.com> Co-authored-by: andreadelrio <delrio.andre@gmail.com> Co-authored-by: Clint Andrew Hall <clint@clintandrewhall.com> Co-authored-by: andreadelrio <delrio.andre@gmail.com>

clintandrewhall and others added 13 commits May 1, 2021 23:49

Option 1a and 1b

a982f35

Merge branch 'input_controls/options' of github.com:clintandrewhall/k…

ada1576

…ibana into controls/initialOptionsListComponent

Remove some demo data. Create options list components

026d8c4

Merge branch 'master' of github.com:elastic/kibana into controls/init…

450076c

…ialOptionsListComponent

Merge branch 'master' of github.com:elastic/kibana into controls/init…

a64cf4a

…ialOptionsListComponent

Remove commented code

e73028c

First pass creating input controls embeddables

5a005fd

Merge branch 'master' of github.com:elastic/kibana into controls/cont…

b3f5e9c

…rolFrame

slightly refined embeddables. Before rewrite

9b61889

niave implementation of diffing for embeddable data fetching

beec344

with data fetching done in component, exhaustive deps disable needed

a70eba5

used useRef for selectedOptions

d015ff2

Merge branch 'master' of github.com:elastic/kibana into controls/cont…

2ca7bad

…rolFrame

ThomThomson mentioned this pull request Jul 27, 2021

[Controls] Initial Options List Component Design #103512

Closed

9 tasks

ThomThomson changed the title ~~Controls/control frame~~ [Input Controls] Options List Embeddable, Factory & Frame Jul 27, 2021

Fix types

afbb045

ThomThomson marked this pull request as ready for review July 28, 2021 13:15

ThomThomson requested review from a team as code owners July 28, 2021 13:15

remove some demo data, use defined flight field labels

3caa0e6

kibanamachine and others added 10 commits July 28, 2021 13:47

Merge branch 'master' into controls/controlFrame

99f020a

about to clean up css

131e8e0

cleaning up css

c063199

placeholder color

e6a93df

remove more css

6b7ad1c

fixing conflicts

1605c24

prevent resizing of control upon selecting items

ba7559f

feedback

87b410f

Merge pull request #9 from andreadelrio/controls-dsgn-ii

be63947

[Input Controls] Using EuiFilterButton

fix scss lint error

a3578dc

ryankeairns reviewed Aug 2, 2021

View reviewed changes

Merge branch 'master' into controls/controlFrame

60c9d56

poffdeluxe approved these changes Aug 10, 2021

View reviewed changes

review feedback

606555f

ryankeairns approved these changes Aug 10, 2021

View reviewed changes

ThomThomson merged commit faf6482 into elastic:master Aug 10, 2021

ThomThomson mentioned this pull request Aug 10, 2021

[7.x] [Input Controls] Options List Embeddable, Factory & Frame (#106877) #108101

Merged

This was referenced Aug 11, 2021

[Controls] Create Initial Options List React Component #101190

Closed

[Controls] Options List Embeddable & Factory #108288

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Input Controls] Options List Embeddable, Factory & Frame #106877

[Input Controls] Options List Embeddable, Factory & Frame #106877

ThomThomson commented Jul 27, 2021 •

edited

Loading

elasticmachine commented Jul 28, 2021

ThomThomson commented Jul 28, 2021

ryankeairns left a comment •

edited

Loading

ThomThomson commented Aug 9, 2021

ThomThomson commented Aug 9, 2021

andreadelrio commented Aug 10, 2021

poffdeluxe left a comment

poffdeluxe Aug 10, 2021

ThomThomson Aug 10, 2021

poffdeluxe Aug 10, 2021

ThomThomson Aug 10, 2021 •

edited

Loading

kibanamachine commented Aug 10, 2021

Standard Out

Stack Trace

ryankeairns left a comment

[Input Controls] Options List Embeddable, Factory & Frame #106877

[Input Controls] Options List Embeddable, Factory & Frame #106877

Conversation

ThomThomson commented Jul 27, 2021 • edited Loading

Summary

For maintainers

elasticmachine commented Jul 28, 2021

ThomThomson commented Jul 28, 2021

ryankeairns left a comment • edited Loading

Choose a reason for hiding this comment

ThomThomson commented Aug 9, 2021

ThomThomson commented Aug 9, 2021

andreadelrio commented Aug 10, 2021

poffdeluxe left a comment

Choose a reason for hiding this comment

poffdeluxe Aug 10, 2021

Choose a reason for hiding this comment

ThomThomson Aug 10, 2021

Choose a reason for hiding this comment

poffdeluxe Aug 10, 2021

Choose a reason for hiding this comment

ThomThomson Aug 10, 2021 • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Aug 10, 2021

💛 Build succeeded, but was flaky

Test Failures

Standard Out

Stack Trace

Metrics [docs]

History

ryankeairns left a comment

Choose a reason for hiding this comment

ThomThomson commented Jul 27, 2021 •

edited

Loading

ryankeairns left a comment •

edited

Loading

ThomThomson Aug 10, 2021 •

edited

Loading