[Drilldowns] URL drilldown MVP

[Dosant]

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

spec

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:

1. Global static variables, for now only kibanaBaseUrl.
2. Context variables are dynamic and different depending on where drilldown is created and used. Now it includes {{context.panel.*}} variables extracted from embeddable.
3. 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]

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

[mdefazio]

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

[Dosant]

@mdefazio,

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

[elastic-jb]

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]

@elastic-jb,

1. 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
2. Other alternative you could try is to:
   2.1 change your data
   2.2. use scripted fields
3. 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)

[Dosant]

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

[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]

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.

[Dosant]

@ThomThomson, thanks for review.

1. I removed {{ .. }} 👍
2. 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]

@cchaos, thanks for the suggestion!

[Dosant]

@elasticmachine merge upstream

[elastic-jb]

This is looking really good. Approve!

[Dosant]

@elasticmachine merge upstream

[kibanamachine]

💚 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