Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds row click trigger for Lens table drilldowns #83167

Merged
merged 74 commits into from
Dec 14, 2020
Merged

Adds row click trigger for Lens table drilldowns #83167

merged 74 commits into from
Dec 14, 2020

Conversation

streamich
Copy link
Contributor

@streamich streamich commented Nov 11, 2020

Summary

Summarize your PR. If it involves visual changes include a screenshot or gif.

Closes #78289

Checklist

Delete any items that are not applicable to this PR.

For maintainers


Release note

A ROW_CLICK_TRIGGER UI Actions trigger was introduced for Kibana dashboard tables. In this first iteration the row click trigger is added to Lens embeddable for datatable expression renderer.

URL drilldown makes use of the row click trigger to allow users to attach URL drilldowns to that trigger:

image

When row click trigger is picked as the trigger for a drilldown, user can use new event scope variables: event.values, event.keys, event.columnNames and event.rowIndex.

image

Once one or more row click triggers are attached to a lens datatable, a new "Actions" column appears with a context menu for each row.

image

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks pretty good, left a small nit about typing.

Also, I'm not sure whether it's a bug or not, but I configured this drilldown url: https://google.com/{{event.values}}/{{event.columnNames}}/{{event.keys}}/{{event.rowIndex}}/{{panel.id}}/{{panel.title}}

It doesn't give me any actions in the table, seems like something is wrong with it but it looks like it should work fine.

Also, it's pretty hard to get the template right because there are so many clicks between editing the template, testing it and editing it again - save drilldown, close flyout, save dashboard, edit dashboard, context menu, edit drilldowns, select correct drilldown. Pretty annoying because you there's no way to "preview" the values you will get before actually using them

@streamich streamich requested a review from a team as a code owner December 10, 2020 11:49
Copy link
Member

@jbudz jbudz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

operations optimizer limits LGTM

Copy link
Contributor

@spalger spalger left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bundle limit change is just a shift of 36.5k between bundles, LGTM

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks almost ready to merge to me, left some nits

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM from Lens side, didn't run the code again

@streamich streamich merged commit b01a327 into elastic:master Dec 14, 2020
gmmorris added a commit to gmmorris/kibana that referenced this pull request Dec 14, 2020
* master: (116 commits)
  Fix UX E2E tests (elastic#85722)
  Increasing default api key removalDelay to 1h (elastic#85576)
  align cors settings names with elasticsearch (elastic#85738)
  unskip tests and make sure submit is not triggered too quickly (elastic#85567)
  Row trigger 2 (elastic#83167)
  Add session id to audit log (elastic#85451)
  [TSVB] Fields lists do not populate all the times (elastic#85530)
  [Visualize] Removes the external link icon from OSS badges (elastic#85580)
  fixes EQL tests (elastic#85712)
  [APM] enable 'log_level' for Go (elastic#85511)
  ini `1.3.5` -> `1.3.7` (elastic#85707)
  Fix fleet route protections (elastic#85626)
  [Monitoring] Some progress on making alerts better in the UI (elastic#81569)
  [Security Solution] Refactor Timeline Notes to use EuiCommentList (elastic#85256)
  [Security Solution][Detections][Threshold Rules] Threshold rule exceptions (elastic#85103)
  [Security Solution] Alerts details (elastic#83963)
  skip flaky suite (elastic#62060)
  skip flaky suite (elastic#85098)
  skip flaky suite (elastic#84020)
  skip flaky suite (elastic#85671)
  ...
streamich added a commit that referenced this pull request Dec 14, 2020
* feat: 🎸 add ROW_CLICK_TRIGGER

* feat: 🎸 wire row click event to UI Actions trigger in Lens

* feat: 🎸 add row click trigger to url drilldown

* feat: 🎸 add datatable to row click context

* feat: 🎸 pass in row index in row click trigger context

* feat: 🎸 add columns to row click trigger context

* feat: 🎸 fill values and keys event scope array

* feat: 🎸 generate correct row scope variables

* fix: 🐛 report triggers from lens embeddable

* feat: 🎸 add sample preview for row click trigger

* feat: 🎸 remove url drilldown preview box

* chore: 🤖 remove mock variable generation functions

* feat: 🎸 generate context and global variable lists

* feat: 🎸 preview event variable list

* feat: 🎸 show empty url error on blur

* feat: 🎸 add ability to always show popup for executed actions

* refactor: 💡 rename multiple action execution method

* fix: 🐛 don't add separator befor group on no main items

* feat: 🎸 wire in uiActions service into datatable renderer

* feat: 🎸 check each row if it has compatible row click actions

* feat: 🎸 allow passing data to expression renderer

* feat: 🎸 add isEmbeddable helper

* feat: 🎸 pass embeddable to lens table renderer

* feat: 🎸 hide lens table row actions which are empty

* feat: 🎸 re-render lens embeddable when dynamic actions chagne

* feat: 🎸 hide actions column if there are no row actions

* feat: 🎸 re-render lens embeddable on view mode chagne

* fix: 🐛 fix TypeScript errors

* chore: 🤖 fix TypeScript errors

* docs: ✏️ update auto-generated docs

* feat: 🎸 add hasCompatibleActions to expression layer

* feat: 🎸 remove "data" from expression renderer handlers

* fix: 🐛 fix TypeScript errors

* test: 💍 fix Jest tests

* docs: ✏️ update autogenerated docs

* fix: 🐛 wrap event payload into data

* test: 💍 add "alwaysShowPopup" test

* chore: 🤖 add comment requested in review

#83167 (comment)

* test: 💍 add hasCompatibleActions test

* test: 💍 add datatable renderer test

* test: 💍 add Lens embeddable input change tests

* test: 💍 add embeddable row click test

* fix: 🐛 add url validation

* test: 💍 add url drilldown tests

* docs: ✏️ remove url drilldown preview from docs

* docs: ✏️ remove preview from url templating

* docs: ✏️ add row click description

* chore: 🤖 move 36.5 KB bundle balance to url_drilldown

* test: 💍 simplify test case

* style: 💄 change types places

* refactor: 💡 clean up panel variable generation

* test: 💍 add getPanelVariables() tests

* fix: 🐛 generate runtime variables correctly

* fix: 🐛 improve getVariableList() and add tests for it

* feat: 🎸 add translation, improve types
# Conflicts:
#	packages/kbn-optimizer/limits.yml
@streamich streamich changed the title Row trigger 2 Adds row click trigger for Lens table drilldowns Dec 14, 2020
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
embeddable 101 102 +1
lens 460 461 +1
uiActions 29 30 +1
uiActionsEnhanced 140 120 -20
urlDrilldown 8 28 +20
total +3

Async chunks

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

id before after diff
lens 1012.6KB 1017.9KB +5.4KB

Distributable file count

id before after diff
default 47129 47889 +760

Page load bundle

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

id before after diff
embeddable 226.1KB 228.3KB +2.2KB
expressions 189.9KB 190.3KB +478.0B
lens 53.2KB 53.7KB +534.0B
uiActions 65.3KB 69.4KB +4.1KB
uiActionsEnhanced 304.4KB 267.3KB -37.0KB
urlDrilldown 13.9KB 50.6KB +36.8KB
visualizations 169.0KB 169.1KB +64.0B
total +7.0KB

History

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

streamich added a commit that referenced this pull request Dec 15, 2020
* feat: 🎸 add ROW_CLICK_TRIGGER

* feat: 🎸 wire row click event to UI Actions trigger in Lens

* feat: 🎸 add row click trigger to url drilldown

* feat: 🎸 add datatable to row click context

* feat: 🎸 pass in row index in row click trigger context

* feat: 🎸 add columns to row click trigger context

* feat: 🎸 fill values and keys event scope array

* feat: 🎸 generate correct row scope variables

* fix: 🐛 report triggers from lens embeddable

* feat: 🎸 add sample preview for row click trigger

* feat: 🎸 remove url drilldown preview box

* chore: 🤖 remove mock variable generation functions

* feat: 🎸 generate context and global variable lists

* feat: 🎸 preview event variable list

* feat: 🎸 show empty url error on blur

* feat: 🎸 add ability to always show popup for executed actions

* refactor: 💡 rename multiple action execution method

* fix: 🐛 don't add separator befor group on no main items

* feat: 🎸 wire in uiActions service into datatable renderer

* feat: 🎸 check each row if it has compatible row click actions

* feat: 🎸 allow passing data to expression renderer

* feat: 🎸 add isEmbeddable helper

* feat: 🎸 pass embeddable to lens table renderer

* feat: 🎸 hide lens table row actions which are empty

* feat: 🎸 re-render lens embeddable when dynamic actions chagne

* feat: 🎸 hide actions column if there are no row actions

* feat: 🎸 re-render lens embeddable on view mode chagne

* fix: 🐛 fix TypeScript errors

* chore: 🤖 fix TypeScript errors

* docs: ✏️ update auto-generated docs

* feat: 🎸 add hasCompatibleActions to expression layer

* feat: 🎸 remove "data" from expression renderer handlers

* fix: 🐛 fix TypeScript errors

* test: 💍 fix Jest tests

* docs: ✏️ update autogenerated docs

* fix: 🐛 wrap event payload into data

* test: 💍 add "alwaysShowPopup" test

* chore: 🤖 add comment requested in review

#83167 (comment)

* test: 💍 add hasCompatibleActions test

* test: 💍 add datatable renderer test

* test: 💍 add Lens embeddable input change tests

* test: 💍 add embeddable row click test

* fix: 🐛 add url validation

* test: 💍 add url drilldown tests

* docs: ✏️ remove url drilldown preview from docs

* docs: ✏️ remove preview from url templating

* docs: ✏️ add row click description

* chore: 🤖 move 36.5 KB bundle balance to url_drilldown

* test: 💍 simplify test case

* feat: 🎸 check if external URL is valid before redirecting user

* test: 💍 check for external URL validity

* feat: 🎸 check if external URL is allowed in exec and getHref

* test: 💍 fix test import
streamich added a commit that referenced this pull request Dec 15, 2020
* feat: 🎸 add ROW_CLICK_TRIGGER

* feat: 🎸 wire row click event to UI Actions trigger in Lens

* feat: 🎸 add row click trigger to url drilldown

* feat: 🎸 add datatable to row click context

* feat: 🎸 pass in row index in row click trigger context

* feat: 🎸 add columns to row click trigger context

* feat: 🎸 fill values and keys event scope array

* feat: 🎸 generate correct row scope variables

* fix: 🐛 report triggers from lens embeddable

* feat: 🎸 add sample preview for row click trigger

* feat: 🎸 remove url drilldown preview box

* chore: 🤖 remove mock variable generation functions

* feat: 🎸 generate context and global variable lists

* feat: 🎸 preview event variable list

* feat: 🎸 show empty url error on blur

* feat: 🎸 add ability to always show popup for executed actions

* refactor: 💡 rename multiple action execution method

* fix: 🐛 don't add separator befor group on no main items

* feat: 🎸 wire in uiActions service into datatable renderer

* feat: 🎸 check each row if it has compatible row click actions

* feat: 🎸 allow passing data to expression renderer

* feat: 🎸 add isEmbeddable helper

* feat: 🎸 pass embeddable to lens table renderer

* feat: 🎸 hide lens table row actions which are empty

* feat: 🎸 re-render lens embeddable when dynamic actions chagne

* feat: 🎸 hide actions column if there are no row actions

* feat: 🎸 re-render lens embeddable on view mode chagne

* fix: 🐛 fix TypeScript errors

* chore: 🤖 fix TypeScript errors

* docs: ✏️ update auto-generated docs

* feat: 🎸 add hasCompatibleActions to expression layer

* feat: 🎸 remove "data" from expression renderer handlers

* fix: 🐛 fix TypeScript errors

* test: 💍 fix Jest tests

* docs: ✏️ update autogenerated docs

* fix: 🐛 wrap event payload into data

* test: 💍 add "alwaysShowPopup" test

* chore: 🤖 add comment requested in review

#83167 (comment)

* test: 💍 add hasCompatibleActions test

* test: 💍 add datatable renderer test

* test: 💍 add Lens embeddable input change tests

* test: 💍 add embeddable row click test

* fix: 🐛 add url validation

* test: 💍 add url drilldown tests

* docs: ✏️ remove url drilldown preview from docs

* docs: ✏️ remove preview from url templating

* docs: ✏️ add row click description

* chore: 🤖 move 36.5 KB bundle balance to url_drilldown

* test: 💍 simplify test case

* feat: 🎸 check if external URL is valid before redirecting user

* test: 💍 check for external URL validity

* feat: 🎸 check if external URL is allowed in exec and getHref

* test: 💍 fix test import

Co-authored-by: Kibana Machine <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Drilldowns Embeddable panel Drilldowns Feature:Embedding Embedding content via iFrame Feature:ExpressionLanguage Interpreter expression language (aka canvas pipeline) Feature:UIActions UI actions. These are client side only, not related to the server side actions.. release_note:enhancement review v7.11.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Drilldowns] Improve URL Drilldown experience for table visualizations
8 participants