[Docs] URL Drilldown (#76529)

docs/user/dashboard/dashboard-drilldown.asciidoc

@@ -0,0 +1,76 @@
+[[dashboard-drilldown]]
+=== Dashboard drilldown
+
+The dashboard drilldown allows you to navigate from one dashboard to another dashboard.
+For example, you might have a dashboard that shows the overall status of multiple data centers.
+You can create a drilldown that navigates from this dashboard to a dashboard
+that shows a single data center or server.
+
+This example shows a dashboard panel that contains a pie chart with a configured dashboard drilldown:
+
+[role="screenshot"]
+image::images/drilldown_on_piechart.gif[Drilldown on pie chart that navigates to another dashboard]
+
+[float]
+[[drilldowns-example]]
+==== Try it: Create a dashboard drilldown
+
+Create the *Host Overview* drilldown shown above.
+
+*Set up the dashboards*
+
+. Add the <<gs-get-data-into-kibana, sample web logs>> data set.
+
+. Create a new dashboard, called `Host Overview`, and include these visualizations
+from the sample data set:
++
+[%hardbreaks]
+*[Logs] Heatmap*
+*[Logs] Visitors by OS*
+*[Logs] Host, Visits, and Bytes Table*
+*[Logs] Total Requests and Bytes*
++
+TIP: If you don’t see data for a panel, try changing the time range.
+
+. Open the *[Logs] Web traffic* dashboard.
+
+. Set a search and filter.
++
+[%hardbreaks]
+Search: `extension.keyword:( “gz” or “css” or “deb”)`
+Filter: `geo.src : CN`
+
+
+*Create the drilldown*
+
+
+. In the dashboard menu bar, click *Edit*.
+
+. In *[Logs] Visitors by OS*, open the panel menu, and then select *Create drilldown*.
+
+. Pick *Go to dashboard* action.
+
+. Give the drilldown a name.
+
+. Select *Host Overview* as the destination dashboard.
+
+. Keep both filters enabled so that the drilldown carries over the global filters and date range.
++
+Your input should look similar to this:
++
+[role="screenshot"]
+image::images/drilldown_create.png[Create drilldown with entries for drilldown name and destination]
+
+. Click *Create drilldown.*
+
+. Save the dashboard.
++
+If you don’t save the drilldown, and then navigate away, the drilldown is lost.
+
+. In *[Logs] Visitors by OS*, click the `win 8` slice of the pie, and then select the name of your drilldown.
++
+[role="screenshot"]
+image::images/drilldown_on_panel.png[Drilldown on pie chart that navigates to another dashboard]
++
+You are navigated to your destination dashboard. Verify that the search query, filters,
+and time range are carried over.

docs/user/dashboard/dashboard.asciidoc

@@ -495,6 +495,8 @@ include::edit-dashboards.asciidoc[]
 
 include::explore-dashboard-data.asciidoc[]
 
+include::drilldowns.asciidoc[]
+
 include::share-dashboards.asciidoc[]
 
 include::tutorials.asciidoc[]

docs/user/dashboard/drilldowns.asciidoc

@@ -1,106 +1,51 @@
-[float]
 [[drilldowns]]
-=== Use drilldowns for dashboard actions
+== Use drilldowns for dashboard actions
 
 Drilldowns, also known as custom actions, allow you to configure a
 workflow for analyzing and troubleshooting your data.
-Using a drilldown, you can navigate from one dashboard to another,
+For example, using a drilldown, you can navigate from one dashboard to another,
 taking the current time range, filters, and other parameters with you,
 so the context remains the same. You can continue your analysis from a new perspective.
 
-For example, you might have a dashboard that shows the overall status of multiple data centers.
-You can create a drilldown that navigates from this dashboard to a dashboard
-that shows a single data center or server.
-
-[float]
-[[how-drilldowns-work]]
-==== How drilldowns work
-
-Drilldowns are user-configurable {kib} actions that are stored with the
-dashboard metadata. Drilldowns are specific to the dashboard panel
-for which you create them—they are not shared across panels.
-A panel can have multiple drilldowns.
-
-This example shows a dashboard panel that contains a pie chart.
-Typically, clicking a pie slice applies the current filter.
-When a panel has a drilldown, clicking a pie slice opens a menu with
-the default action and your drilldowns. Refer to the <<drilldowns-example, Try it section>>
-for instructions on how to create this drilldown.
-
 [role="screenshot"]
 image::images/drilldown_on_piechart.gif[Drilldown on pie chart that navigates to another dashboard]
 
+Drilldowns are specific to the dashboard panel for which you create them—they are not shared across panels. A panel can have multiple drilldowns.
+
+[float]
+[[actions]]
+=== Drilldown actions
+
+Drilldowns are user-configurable {kib} actions that are stored with the dashboard metadata.
+Kibana provides the following types of actions:
+
+[cols="2"]
+|===
+
+a| <<dashboard-drilldown, Dashboard drilldown>>
+
+| Navigate to a dashboard.
+
+a| <<url-drilldown, URL drilldown>>
+
+| Navigate to external or internal URL.
+
+|===
+
+[NOTE]
+==============================================
+Some action types are paid commercial features, while others are free.
+For a comparison of the Elastic subscription levels,
+see https://www.elastic.co/subscriptions[the subscription page].
+==============================================
+
+[float]
+[[code-drilldowns]]
+=== Code drilldowns
 Third-party developers can create drilldowns.
-Refer to https://github.com/elastic/kibana/tree/master/x-pack/examples/ui_actions_enhanced_examples[this example plugin]
+Refer to {kib-repo}blob/{branch}/x-pack/examples/ui_actions_enhanced_examples[this example plugin]
 to learn how to code drilldowns.
 
-[float]
-[[create-manage-drilldowns]]
-==== Create and manage drilldowns
+include::dashboard-drilldown.asciidoc[]
+include::url-drilldown.asciidoc[]
 
-Your dashboard must be in *Edit* mode to create a drilldown.
-Once a panel has at least one drilldown, the menu also includes a *Manage drilldowns* action
-for editing and deleting drilldowns.
-
-[role="screenshot"]
-image::images/drilldown_menu.png[Panel menu with Create drilldown and Manage drilldown actions]
-
-[float]
-[[drilldowns-example]]
-==== Try it: Create a drilldown
-
-This example shows how to create the *Host Overview* drilldown shown earlier in this doc.
-
-*Set up the dashboards*
-
-. Add the <<gs-get-data-into-kibana, sample web logs>> data set.
-
-. Create a new dashboard, called `Host Overview`, and include these visualizations
-from the sample data set:
-+
-[%hardbreaks]
-*[Logs] Heatmap*
-*[Logs] Visitors by OS*
-*[Logs] Host, Visits, and Bytes Table*
-*[Logs] Total Requests and Bytes*
-+
-TIP: If you don’t see data for a panel, try changing the time range.
-
-. Open the *[Logs] Web traffic* dashboard.
-
-. Set a search and filter.
-+
-[%hardbreaks]
-Search: `extension.keyword:( “gz” or “css” or “deb”)`
-Filter: `geo.src : CN`
-
-*Create the drilldown*
-
-. In the dashboard menu bar, click *Edit*.
-
-. In *[Logs] Visitors by OS*, open the panel menu, and then select *Create drilldown*.
-
-. Give the drilldown a name.
-
-. Select *Host Overview* as the destination dashboard.
-
-. Keep both filters enabled so that the drilldown carries over the global filters and date range.
-+
-Your input should look similar to this:
-+
-[role="screenshot"]
-image::images/drilldown_create.png[Create drilldown with entries for drilldown name and destination]
-
-. Click *Create drilldown.*
-
-. Save the dashboard.
-+
-If you don’t save the drilldown, and then navigate away, the drilldown is lost.
-
-. In *[Logs] Visitors by OS*, click the `win 8` slice of the pie, and then select the name of your drilldown.
-+
-[role="screenshot"]
-image::images/drilldown_on_panel.png[Drilldown on pie chart that navigates to another dashboard]
-+
-You are navigated to your destination dashboard. Verify that the search query, filters,
-and time range are carried over.

docs/user/dashboard/explore-dashboard-data.asciidoc

@@ -16,5 +16,3 @@ The data that displays depends on the element that you inspect.
 image:images/Dashboard_inspect.png[Inspect in dashboard]
 
 include::explore-underlying-data.asciidoc[]
-
-include::drilldowns.asciidoc[]

docs/user/dashboard/url-drilldown.asciidoc

@@ -0,0 +1,221 @@
+[[url-drilldown]]
+=== URL drilldown
+
+The URL drilldown allows you to navigate from a dashboard to an internal or external URL.
+The destination URL can be dynamic, depending on the dashboard context or user’s interaction with a visualization.
+
+For example, you might have a dashboard that shows data from a Github repository.
+You can create a drilldown that navigates from this dashboard to Github.
+
+[role="screenshot"]
+image:images/url_drilldown_go_to_github.gif[Drilldown on pie chart that navigates to Github]
+
+NOTE: URL drilldown is available with the https://www.elastic.co/subscriptions[Gold subscription] and higher.
+
+[float]
+[[try-it]]
+==== Try it: Create a URL drilldown
+
+This example shows how to create the "Show on Github" drilldown shown above.
+
+. Add the <<gs-get-data-into-kibana, sample web logs>> data set.
+. Open the *[Logs] Web traffic* dashboard. This isn’t data from Github, but it should work for demonstration purposes.
+. In the dashboard menu bar, click *Edit*.
+. In *[Logs] Visitors by OS*, open the panel menu, and then select *Create drilldown*.
+. Give the drilldown a name: *Show on Github*.
+. Select a drilldown action: *Go to URL*.
++
+[role="screenshot"]
+image:images/url_drilldown_pick_an_action.png[Action picker]
+. Enter a URL template: 
++
+[source, bash]
+----
+https://github.com/elastic/kibana/issues?q=is:issue+is:open+{{event.value}}
+----
++
+This example URL navigates to {kib} issues on Github. `{{event.value}}` will be substituted with a value associated with a clicked pie slice. In _preview_ `{{event.value}}` is substituted with a <<values-in-preview, dummy>> value.
+[role="screenshot"]
+image:images/url_drilldown_url_template.png[URL template input]
+. Click *Create drilldown*.
+. Save the dashboard.
++
+If you don’t save the drilldown, and then navigate away, the drilldown is lost.
+
+. In *[Logs] Visitors by OS*, click any slice of the pie, and then select the drilldown *Show on Github*.
++
+[role="screenshot"]
+image:images/url_drilldown_popup.png[URL drilldown popup]
++
+You are navigated to the issue list in the {kib} repository. Verify that value from a pie slice you’ve clicked on is carried over to Github.
++
+[role="screenshot"]
+image:images/url_drilldown_github.png[Github]
+
+[float]
+[[trigger-picker]]
+==== Picking a trigger for a URL drilldown
+
+Some panels support multiple user interactions (called triggers) for which you can configure a URL drilldown. The list of supported variables in the URL template depends on the trigger you selected.
+In the preceding example, you configured a URL drilldown on a pie chart. The only trigger that pie chart supports is clicking on a pie slice, so you didn’t have to pick a trigger.
+
+However, the sample *[Logs] Unique Visitors vs. Average Bytes* chart supports both clicking on a data point and selecting a range. When you create a URL drilldown for this  chart, you have the following choices:
+
+[role="screenshot"]
+image:images/url_drilldown_trigger_picker.png[Trigger picker: Single click and Range selection]
+
+Variables in the URL template differ per trigger. 
+For example, *Single click* has `{{event.value}}` and *Range selection* has `{{event.from}}` and `{{event.to}}`. 
+You can create multiple URL drilldowns per panel and attach them to different triggers.
+
+[float]
+[[templating]]
+==== URL templating language
+
+The URL template input uses Handlebars — a simple templating language. Handlebars templates look like regular text with embedded Handlebars expressions.
+
+[source, bash]
+----
+https://github.com/elastic/kibana/issues?q={{event.value}}
+----
+
+A Handlebars expression is a `{{`, some contents, followed by a `}}`. When the drilldown is executed, these expressions are replaced by values from the dashboard and interaction context.
+
+Refer to Handlebars https://handlebarsjs.com/guide/expressions.html#expressions[documentation] to learn about advanced use cases.
+
+[[helpers]]
+In addition to https://handlebarsjs.com/guide/builtin-helpers.html[built-in] Handlebars helpers, you can use the following custom helpers:
+
+
+|===
+|Helper |Use case
+
+|json
+a|Serialize variables in JSON format.
+
+Example:
+
+`{{json event}}` +
+`{{json event.key event.value}}` +
+`{{json filters=context.panel.filters}}`
+
+
+|rison
+a|Serialize variables in https://github.com/w33ble/rison-node[rison] format. Rison is a common format for {kib} apps for storing state in the URL.
+
+Example:
+
+`{{rison event}}` +
+`{{rison event.key event.value}}` +
+`{{rison filters=context.panel.filters}}`
+
+
+|date
+a|Format dates. Supports relative dates expressions (for example,  "now-15d"). Refer to the https://momentjs.com/docs/#/displaying/format/[moment] docs for different formatting options.
+
+Example:
+
+`{{ date event.from “YYYY MM DD”}}` +
+`{{date “now-15”}}`
+|===
+
+
+[float]
+[[variables]]
+==== URL template variables
+
+The URL drilldown template has three sources for variables:
+
+* *Global* static variables that don’t change depending on the  place where the URL drilldown is used or which user interaction executed the drilldown. For example: `{{kibanaUrl}}`.
+* *Context* variables that change depending on where the drilldown is created and used. These variables are extracted from a context of a panel on a dashboard. For example, `{{context.panel.filters}}` gives access to filters that applied to the current panel.
+* *Event* variables that depend on the trigger context. These variables are dynamically extracted from the interaction context when the drilldown is executed.
+
+[[values-in-preview]]
+A subtle but important difference between *context* and *event* variables is that *context* variables use real values in previews when creating a URL drilldown. 
+For example, `{{context.panel.filters}}` are previewed with the current filters that applied to a panel. 
+*Event* variables are extracted during drilldown execution from a user interaction with a panel (for example, from a pie slice that the user clicked on).
+
+Because there is no user interaction with a panel in preview, there is no interaction context to use in a preview.
+To work around this, {kib} provides a sample interaction that relies on a picked <<trigger-picker, trigger>>.
+So in a preview, you might notice that `{{event.value}}` is replaced with `{{event.value}}` instead of with a sample from your data.
+Such previews can help you make sure that the structure of your URL template is valid.
+However, to ensure that the configured URL drilldown works as expected with your data, you have to save the dashboard and test in the panel.
+
+You can access the full list of variables available for the current panel and selected trigger by clicking *Add variable* in the top-right corner of a URL template input.
+
+[float]
+[[variables-reference]]
+==== Variables reference
+
+
+|===
+|Source |Variable |Description
+
+|*Global*
+| kibanaUrl
+| {kib} base URL. Useful for creating URL drilldowns that navigate within {kib}.
+
+| *Context*
+| context.panel
+| Context provided by current dashboard panel.
+
+|
+| context.panel.id
+| ID of a panel.
+
+|
+| context.panel.title
+| Title of a panel.
+
+|
+| context.panel.filters
+| List of {kib} filters applied to a panel. +
+Tip: Use in combination with <<helpers, rison>> helper for
+internal {kib} navigations with carrying over current filters.
+
+|
+| context.panel.query.query
+| Current query string.
+
+|
+| context.panel.query.lang
+| Current query language.
+
+|
+| context.panel.timeRange.from +
+context.panel.timeRange.to
+| Current time picker values. +
+Tip: Use in combination with <<helpers, date>> helper to format date.
+
+|
+| context.panel.timeRange.indexPatternId +
+context.panel.timeRange.indexPatternIds
+|Index pattern ids used by a panel.
+
+|
+| context.panel.savedObjectId
+| ID of saved object behind a panel.
+
+| *Single click*
+| event.value
+| Value behind clicked data point.
+
+|
+| event.key
+| Field name behind clicked data point
+
+|
+| event.negate
+| Boolean, indicating whether clicked data point resulted in negative filter.
+
+| *Range selection*
+| event.from +
+event.to
+| `from` and `to` values of selected range. Depending on your data, could be either a date or number. +
+Tip: Consider using <<helpers, date>> helper for date formatting.
+
+|
+| event.key
+| Aggregation field behind the selected range, if available.
+
+|===