[Drilldowns] URL drilldown MVP by Dosant · Pull Request #75450 · elastic/kibana

Dosant · 2020-08-19T15:51:55Z

Summary

URL Drilldowns MVP. Closes URL Drilldown MVP #69409
Future plans URL drilldown #55324
Docs draft
Feature spec
Available with gold licence
We are considering making this feature beta to get ourselves more room for improvements based on first users feedback. Add beta badge support in action picker - [Drilldowns] Beta badge support. Mark URL Drilldown as Beta #75654
There is an idea to discuss to improve VALUE_CLICK_EVENT variables with points variables. see [Drilldown] URL drilldown: support multiple values in click Dosant/kibana#5

TLDR feature description

Url drilldown is a new drilldown type which allows users to drilldown to internal or external URLs.
Url drilldown configuration includes destination URL and it supports dynamic variables.

Supported variables

URL drilldown will have 3 sources for variables:

Global static variables, for now only kibanaBaseUrl.
Context variables are dynamic and different depending on where drilldown is created and used. Now it includes {{context.panel.*}} variables extracted from embeddable.
Event variables depend on a trigger context. These variables are dynamically extracted from the trigger context when drilldown is executed.

Subtle but important difference between context and event variables is that context variables have real values during creation. But in case of event variables we have to mock them for the user during creation.

comment: On last drilldown sync, we agreed to revises this and see how hard would it be to propagate real values from the visualization during drilldown creation. but for now event variables are mocked during drilldown creation. More information on these issues here: [discuss][Drilldowns] More specific triggers and trigger context samples #76226

Templating language

It uses handlebars with a set of custom helpers:
- date. Uses moment and @kbn/datemath. example: {{date "now-15d" "DD MM YYYY"}}
- rison. example {{rison context.filters}}. or {{rison filters=context.filters}}
- json. example {{json context.filters}}. or {{json filters=context.filters}}

Reusability considerations

Current version relies on embeddable and supports only VALUE_CLICK_TRIGGER and RANGE_SELECT_TRIGGER.
In future we could expose extension points to support more triggers and provide more variables in a context. There was a POC with such extension points see details

In case solution needs a URL drilldown and wants more customisation then just supporting more triggers and providing custom variables, then we'd recommend to build custom URL drilldown and reuse our building blocks from ui_actions_enhanced.

Templating UI

Is very straightforward for now, but it does the job. We have a follow up issue: #69413
Validation is pretty good already.

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~~ Follow up with user facing documentation URL drilldown docs #69414
Unit or functional tests were updated or added to match the most common scenarios.
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

elasticmachine · 2020-08-21T14:41:36Z

Pinging @elastic/kibana-app-arch (Team:AppArch)

mdefazio

Let's add the text Add variable in front of the icon for the context variable menu
Change the switch to a checkbox for 'Open in new window' (sorry)
Let's make the trigger picker full width

…down-impl

Dosant · 2020-08-25T09:10:26Z

@mdefazio,

Add variable text added
EuiCheckbox used instead of switch
Agreed offline to leave not full-width

Dosant · 2020-08-25T12:24:29Z

x-pack/plugins/embeddable_enhanced/public/drilldowns/url_drilldown/url_drilldown_scope.tsx

+ * VALUE_CLICK_TRIGGER could have multiple data points
+ * Prompt user which data point to use in a drilldown
+ */
+async function getSingleValue(


@streamich, @ppisljar, this is an alternative to getSingleValue popup that we discussed: Dosant#5
We can decide later if we want to go with event.points instead of popup

mdefazio

LGTM!

elastic-jb · 2020-08-31T20:35:30Z

I'm looking at the Handlebar documentation and it mentions that I need to register a custom helper to use upper/lower case. In this case I am trying to go to the NBA.com team page (https://www.nba.com/teams/wizards) from my dashboard and the NBA URL values are case sensitive. The team names are capitalized in the data, so the page is silently redirecting away.

Handlebars.registerHelper('toLowerCase', function(str) {
return str.toLowerCase();
});

Is there a more direct way to do this? If not, we should consider some basic operations to add helpers for things like case, left/mid/right string, etc.

Dosant · 2020-09-01T10:39:53Z

@elastic-jb,

If we'd agree on a set of most useful functions, we could add them
1.1. Shouldn't be a problem to add those in following prs
1.2. We could consider using these helpers lib, but it seems that there are a lot of redundant stuff, and if possible, I think, I'd prefer to keep our api surface as lean as possible and avoid adding new dependencies. But we could pick helpers we think would be most useful for our scenarios.
1.3 We discussed with @streamich that worth exposing registerHelper as extension point. So 3rd party plugin developers could add their own helpers to URL drilldown
Other alternative you could try is to:
2.1 change your data
2.2. use scripted fields
With URL drilldown there is always a workaround to create you own custom proxy server and do proper redirect from there (for such unfortunate cases)

…down-impl

Dosant · 2020-09-02T10:24:25Z

We discussed offline with @elastic-jb to not rush with adding more helpers. JB, will try scripted fields for his example.

ppisljar

LGTM, tested out in chrome linux

…down-impl # Conflicts: # x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx

ThomThomson

Tested Locally in Chrome - URL drilldown behavior looks good to me.

Code LGTM.

Additionally, I agree with @streamich's ideas about the variable dropdown in a followup. I also wonder, though if the variable dropdown needs the moustache braces around each item, or if we could place the braces when a variable is clicked. Seems much cleaner to me:

I am also wondering if we could revisit the error messaging on invalid variables and syntax.

I'm thinking that something a little more generic could be more user-friendly:
Invalid Format: "testingHello" does not exist or just Invalid Format

Overall, looks great and works well. This is going to be a huge addition to Kibana!

cchaos · 2020-09-02T17:42:08Z

Can I offer a component suggestion for the dropdown? I see that this list continues to grow and no overflow is being taken into consideration yet. We have a virtualized list component that can help with overflow, adds filter ability, etc. You can use EuiSelectable whose docs page shows an example of a popover usage. You don't have to use the icons either to signify selection, you can just handle the clicks.

And the list items can be of any display you need.

…down-impl

Dosant · 2020-09-03T11:19:54Z

@ThomThomson, thanks for review.

I removed {{ .. }} 👍
I agree that error messaging is far from ideal, but I am glad it is there :). In this MVP it just forwards error messages from handlebars. So there is no layer where we parse the expression ourselves to check the validity. I think for now it is a OK tradeoff.

Dosant · 2020-09-03T11:21:30Z

@cchaos, thanks for the suggestion!

Dosant · 2020-09-03T12:22:06Z

@elasticmachine merge upstream

elastic-jb

This is looking really good. Approve!

Dosant · 2020-09-04T08:41:26Z

@elasticmachine merge upstream

…down-impl

kibanamachine · 2020-09-04T11:29:02Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 3328a35

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
embeddableEnhanced	141	+131	10
uiActionsEnhanced	256	+127	129
total		+258

page load bundle size

id	value	diff	baseline
dashboardEnhanced	185.7KB	+74.0B	185.6KB
embeddableEnhanced	92.1KB	+66.9KB	25.2KB
uiActions	218.6KB	+8.0B	218.6KB
uiActionsEnhanced	335.1KB	+171.6KB	163.5KB
total		+238.6KB

History

💚 Build #72236 succeeded 2ef9426
💔 Build #72216 failed eeb7a7f
💚 Build #71920 succeeded 0c0e19b
💚 Build #71528 succeeded 9d0ef8f
💚 Build #70809 succeeded 0ad40f8

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

Dosant changed the title ~~[Drilldowns] URL drilldown~~ [Drilldowns] URL drilldown MVP Aug 21, 2020

url drilldown mvp

ae2e7f6

Dosant force-pushed the dev/url-drilldown-impl branch from 217b142 to ae2e7f6 Compare August 21, 2020 11:18

Dosant added Feature:Drilldowns Embeddable panel Drilldowns release_note:roadmap v7.10.0 v8.0.0 labels Aug 21, 2020

Add functional test

20ba75d

streamich mentioned this pull request Aug 21, 2020

URL Drilldown MVP #69409

Closed

24 tasks

rename test folder

cdfd8f4

Dosant marked this pull request as ready for review August 21, 2020 14:41

Dosant requested a review from a team August 21, 2020 14:41

Dosant requested review from a team as code owners August 21, 2020 14:41

Dosant requested review from elastic-jb, mdefazio, ppisljar and streamich August 24, 2020 09:51

mdefazio requested changes Aug 24, 2020

View reviewed changes

Dosant added 2 commits August 25, 2020 10:37

Merge branch 'master' of github.com:elastic/kibana into dev/url-drill…

c1bf10b

…down-impl

@mdefazio review

9b723d1

Dosant requested a review from mdefazio August 25, 2020 09:10

Dosant mentioned this pull request Aug 25, 2020

[Drilldown] URL drilldown: support multiple values in click Dosant/kibana#5

Closed

Dosant added 2 commits August 25, 2020 12:40

fix ts, improve types

8e40b68

improve

1c4d099

Dosant commented Aug 25, 2020

View reviewed changes

mdefazio approved these changes Aug 25, 2020

View reviewed changes

improve

7772a89

Dosant mentioned this pull request Aug 28, 2020

[discuss][Drilldowns] More specific triggers and trigger context samples #76226

Closed

Dosant added 2 commits September 1, 2020 12:52

Merge branch 'master' of github.com:elastic/kibana into dev/url-drill…

cad6c54

…down-impl

add a note about dummy values

9d0ef8f

ppisljar approved these changes Sep 2, 2020

View reviewed changes

Dosant added 2 commits September 2, 2020 16:56

Merge branch 'master' of github.com:elastic/kibana into dev/url-drill…

ed1fc51

…down-impl # Conflicts: # x-pack/examples/ui_actions_enhanced_examples/public/dashboard_to_url_drilldown/index.tsx

integrate with licenseFeatureName

0c0e19b

ThomThomson approved these changes Sep 2, 2020

View reviewed changes

Dosant mentioned this pull request Sep 2, 2020

[Docs] URL Drilldown #76529

Merged

Dosant added 2 commits September 3, 2020 12:20

Merge branch 'master' of github.com:elastic/kibana into dev/url-drill…

148d246

…down-impl

better “add variable” popup

eeb7a7f

Merge branch 'master' into dev/url-drilldown-impl

2ef9426

elastic-jb approved these changes Sep 3, 2020

View reviewed changes

Merge branch 'master' of github.com:elastic/kibana into dev/url-drill…

3328a35

…down-impl

Dosant merged commit e7d80e7 into elastic:master Sep 4, 2020

Dosant added a commit to Dosant/kibana that referenced this pull request Sep 4, 2020

[Drilldowns] URL drilldown MVP (elastic#75450)

f659f7b

Dosant mentioned this pull request Sep 4, 2020

[7.x] [Drilldowns] URL drilldown MVP (#75450) #76759

Merged

Dosant added a commit that referenced this pull request Sep 4, 2020

[Drilldowns] URL drilldown MVP (#75450) (#76759)

008bca6

streamich mentioned this pull request Sep 8, 2020

Dashboard-to-XYZ drilldowns #61785

Closed

6 tasks

pmuellr mentioned this pull request Sep 16, 2020

how can I change kibana ui using open source? #77572

Closed

Dosant mentioned this pull request Sep 17, 2020

[Drilldowns] URL Drilldown template helpers #77758

Closed

1 task

Conversation

Dosant commented Aug 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

TLDR feature description

Supported variables

Templating language

Reusability considerations

Templating UI

Checklist

Uh oh!

elasticmachine commented Aug 21, 2020

Uh oh!

mdefazio left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant commented Aug 25, 2020

Uh oh!

Dosant Aug 25, 2020

Choose a reason for hiding this comment

Uh oh!

mdefazio left a comment

Choose a reason for hiding this comment

Uh oh!

elastic-jb commented Aug 31, 2020

Uh oh!

Dosant commented Sep 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Dosant commented Sep 2, 2020

Uh oh!

ppisljar left a comment

Choose a reason for hiding this comment

Uh oh!

ThomThomson left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos commented Sep 2, 2020

Uh oh!

Dosant commented Sep 3, 2020

Uh oh!

Dosant commented Sep 3, 2020

Uh oh!

Dosant commented Sep 3, 2020

Uh oh!

elastic-jb left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant commented Sep 4, 2020

Uh oh!

kibanamachine commented Sep 4, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

page load bundle size

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

Dosant commented Aug 19, 2020 •

edited

Loading

Dosant commented Sep 1, 2020 •

edited

Loading