[DOCS] Adds Making dashboards interactive (#102815)

* [DOCS] M Adds interactive dashboard content

* [DOCS] Adds Making dashboards interactive

* Fixes drilldowns broken links

* Update docs/user/dashboard/make-dashboards-interactive.asciidoc

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>

* Adds metadata

* Update docs/user/dashboard/make-dashboards-interactive.asciidoc

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

* Update docs/user/dashboard/make-dashboards-interactive.asciidoc

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

* Update docs/user/dashboard/make-dashboards-interactive.asciidoc

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

* Review comments

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>
Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>

docs/user/dashboard/dashboard.asciidoc

@@ -27,12 +27,12 @@ Panels display your data in charts, tables, maps, and more, which allow you to c
 | Display the results from machine learning anomaly detection jobs.
 
 | <<xpack-ml-anomalies,Anomaly chart>>
-| Display an anomaly chart from the *Anomaly Explorer.
+| Display an anomaly chart from the *Anomaly Explorer*.
 
 | <<logs-app,Log stream>>
 | Display a table of live streaming logs.
 
-| <<enhance-dashboards,Tools>>
+| <<add-controls,Tools>>
 | Add context to your panels with <<add-text,text>>, or add dynamic filters with <<add-controls,*Controls*>>.
 
 |===
@@ -131,6 +131,38 @@ If you change your mind and want to add the panel to the *Visualize Library*:
 
 . Enter the panel title, then click *Save*.
 
+[float]
+[[add-text]]
+== Add context to panels
+
+To provide context to your dashboard panels, add *Text* panels that display important information, instructions, images, and more.
+
+You create *Text* panels using GitHub-flavored Markdown text. For information about GitHub-flavored Markdown text, click *Help*.
+
+. From the dashboard, click *All types*, then select *Text*.
+
+. In the *Markdown* field, enter the text, then click *Update*.
+
+For example, when you enter:
+
+[role="screenshot"]
+image::images/markdown_example_1.png[]
+
+The following instructions are displayed:
+
+[role="screenshot"]
+image::images/markdown_example_2.png[]
+
+Or when you enter:
+
+[role="screenshot"]
+image::images/markdown_example_3.png[]
+
+The following image is displayed:
+
+[role="screenshot"]
+image::images/markdown_example_4.png[]
+
 [float]
 [[edit-panels]]
 == Edit panels
@@ -316,8 +348,6 @@ include::lens-advanced.asciidoc[]
 
 include::create-panels-with-editors.asciidoc[]
 
-include::enhance-dashboards.asciidoc[]
-
-include::drilldowns.asciidoc[]
+include::make-dashboards-interactive.asciidoc[]
 
 include::aggregation-reference.asciidoc[]

docs/user/dashboard/make-dashboards-interactive.asciidoc

@@ -0,0 +1,241 @@
+[[role="xpack"]]
+[[drilldowns]]
+== Make dashboards interactive
+
+:keywords: administrator, analyst, concept, task, analyze, dashboard, controls, drilldowns
+:description: Add interactive capabilities to your dashboard, such as controls that allow \
+you to apply dashboard-level filters, and drilldowns that allow you to navigate to other \
+dashboards and external websites.
+
+Add interactive capabilities to your dashboard, such as controls that allow you to apply dashboard-level filters, and drilldowns that allow you to navigate to other dashboards and external websites. 
+
+*Controls* panels allow you to apply dashboard-level filters based on values from a list, or a range of values. 
+
+{kib} supports two types of *Controls*:
+
+* *Options list* — Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. 
+For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city.
+
+* *Range slider* — Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a 
+min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price.
++
+[role="screenshot"]
+image::images/dashboard-controls.png[]
+
+Panels have built-in interactive capabilities that apply filters to the dashboard data. For example, when you drag a time range or click a pie slice, a filter for the time range or pie slice is applied. Drilldowns let you customize the interactive behavior while keeping the context of the interaction. 
+
+{kib} supports two types of drilldowns:
+
+* *Dashboard* — Navigates you from one dashboard to another dashboard. For example, when can create a drilldown for a *Lens* panel that navigates you from a summary dashboard to a dashboard with a filter for a specific host name.
+
+* *URL* — Navigates you from a dashboard to an external website. For example, a website with the specific host name as a parameter. 
+
+++++
+<script type="text/javascript" async 
+src="https://play.vidyard.com/embed/v4.js"></script>
+<img
+style="width: 100%; margin: auto; display: block;"
+class="vidyard-player-embed"
+src="https://play.vidyard.com/UhGkdJGC32HRn3oS5ZYJL1.jpg"
+data-uuid="UhGkdJGC32HRn3oS5ZYJL1"
+data-v="4"
+data-type="inline"
+/>
+</br>
+++++
+
+Third-party developers can create drilldowns. To learn how to code drilldowns, refer to {kib-repo}blob/{branch}/x-pack/examples/ui_actions_enhanced_examples[this example plugin].
+
+[float]
+[[add-controls]]
+=== Add Controls panels
+
+Add interactive dashboard-level filter panels to your dashboard.
+
+. On the dashboard, click *All types*, then select *Controls*.
+
+. Click *Options*, then configure the following options:
+
+* *Update {kib} filters on each change* &mdash; When selected, all interactive inputs create filters that refresh the dashboard. When unselected,
+ {kib} filters are created only when you click *Apply changes*.
+
+* *Use time filter* &mdash; When selected, the aggregations that generate the options list and time range are connected to the <<set-time-filter,time filter>>.
+
+* *Pin filters for all applications* &mdash; When selected, all filters created by interacting with the inputs are automatically pinned.
+
+. Click *Update*
+
+[float]
+[[dashboard-drilldowns]]
+=== Create dashboard drilldowns
+
+Dashboard drilldowns enable you to open a dashboard from another dashboard, taking the time range, filters, and other parameters with you so the context remains the same. Dashboard drilldowns help you to continue your analysis from a new perspective.
+
+For example, if you have a dashboard that shows the logs and metrics for multiple data centers, you can create a drilldown that navigates from the dashboard that shows multiple data centers, to a dashboard that shows a single data center or server.
+
+[role="screenshot"]
+image:images/drilldown_on_data_table.gif[Drilldown on data table that navigates to another dashboard]
+
+The panels you create using the following editors support dashboard drilldowns:
+
+* *Lens*
+* *Maps*
+* *TSVB*
+* *Vega*
+* *Aggregation-based* area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart
+* *Timelion*
+
+[float]
+==== Create and set up the dashboards you want to connect
+
+Use the <<gs-get-data-into-kibana,*Sample web logs*>> data to create a dashboard and add panels, then set a search and filter on the *[Logs] Web traffic* dashboard.
+
+. Add the *Sample web logs* data.
+
+. Create a new dashboard, click *Add from Library*, then add the following panels:
+
+* *[Logs] Heatmap*
+* *[Logs] Host, Visits, and Bytes Table*
+* *[Logs] Total Requests and Bytes*
+* *[Logs] Visitors by OS*
+
+. Set the <<set-time-filter,time filter>> to *Last 30 days*.
+
+. Save the dashboard. In the *Title* field, enter `Host Overview`.
+
+. Open the *[Logs] Web traffic* dashboard.
+
+. Create a data table. 
+
+.. In the toolbar, click *Edit*.
+
+.. Click *Create visualization*.
+
+.. From the *Chart type* dropdown, select *Table*.
+
+.. From the *Available fields* list, drag and drop the following fields onto the visualization builder:
+
+* *agent.keyword*
+
+* *bytes*
+
+* *geo.src*
+
+* *ip*
+
+.. In the editor, remove *Count of records*, then click *Save and return*.
+
+. On the *[Logs] Web traffic* dashboard, set a search and filter.
++
+[%hardbreaks]
+Search: `extension.keyword: ("gz" or "css" or "deb")`
+Filter: `geo.src: CN`
+
+[float]
+==== Create the drilldown
+
+Create a drilldown that opens the *Host Overview* dashboard from the *[Logs] Web traffic* dashboard.
+
+. Open the panel menu for the data table you created, then select *Create drilldown*.
+
+. Click *Go to dashboard*.
+
+.. Give the drilldown a name. For example, `My Drilldown`.
+
+.. From the *Choose a destination dashboard* dropdown, select *Host Overview*.
+
+.. To use the geo.src filter, KQL query, and time filter, select *Use filters and query from origin dashboard* and *Use date range from origin dashboard*.
+
+.. Click *Create drilldown*.
+
+. Save the dashboard.
+
+. In the data table panel, hover over a value, click *+*, then select `My Drilldown`.
++
+[role="screenshot"]
+image::images/drilldown_on_panel.png[Drilldown on data table that navigates to another dashboard]
+
+[float]
+[[url-drilldowns]]
+=== Create URL drilldowns
+
+URL drilldowns enable you to navigate from a dashboard to external websites. Destination URLs can be dynamic, depending on the dashboard context or user interaction with a panel. To create URL drilldowns, you add <<variables,variables>> to a URL template, which configures the behavior of the drilldown.
+
+[role="screenshot"]
+image:images/url_drilldown_go_to_github.gif[Drilldown on pie chart that navigates to Github]
+
+Some panels support multiple interactions, also known as triggers. 
+The <<url-template-variables,variables>> you use to create a <<url_templating-language, URL template>> depends on the trigger you choose. URL drilldowns support these types of triggers:
+
+* *Single click* &mdash; A single data point in the panel.
+
+* *Range selection* &mdash; A range of values in a panel.
+
+For example, *Single click* has `{{event.value}}` and *Range selection* has `{{event.from}}` and `{{event.to}}`.
+
+The panels you create using the following editors support dashboard drilldowns:
+
+* *Lens*
+* *Maps*
+* *TSVB*
+* *Aggregation-based* area chart, data table, heat map, horitizontal bar chart, line chart, pie chart, tag cloud, and vertical bar chart
+
+[float]
+==== Create a URL drilldown
+
+For example, if you have a dashboard that shows data from a Github repository, you can create a URL drilldown that opens Github from the dashboard panel.
+
+. Add the *Sample web logs* data.
+
+. Open the *[Logs] Web traffic* dashboard.
+
+. In the toolbar, click *Edit*.
+
+. Open the *[Logs] Visitors by OS* panel menu, then select *Create drilldown*.
+
+. Click *Go to URL*.
+
+.. Give the drilldown a name. For example, `Show on Github`.
+
+.. For the *Trigger*, select *Single click*.
+
+.. To navigate to the {kib} repository Github issues, enter the following in the *Enter URL* field:
++
+[source, bash]
+----
+https://github.com/elastic/kibana/issues?q=is:issue+is:open+{{event.value}}
+----
++
+{kib} substitutes `{{event.value}}` with a value associated with the selected pie slice.
+
+.. Click *Create drilldown*.
+
+. Save the dashboard.
+
+. On the *[Logs] Visitors by OS* panel, click any chart slice, then select *Show on Github*.
++
+[role="screenshot"]
+image:images/url_drilldown_popup.png[URL drilldown popup]
+
+. In the list of {kib} repository issues, verify that the slice value appears.
++
+[role="screenshot"]
+image:images/url_drilldown_github.png[Github]
+
+[float]
+[[manage-drilldowns]]
+=== Manage drilldowns
+
+Make changes to your drilldowns, make a copy of your drilldowns for another panel, and delete drilldowns. 
+
+. Open the panel menu that includes the drilldown, then click *Manage drilldowns*.
+
+. On the *Manage* tab, use the following options:
+
+* To change drilldowns, click *Edit* next to the drilldown you want to change, make your changes, then click *Save*.
+
+* To make a copy, click *Copy* next to the drilldown you want to change, enter the drilldown name, then click *Create drilldown*. 
+
+* To delete a drilldown, select the drilldown you want to delete, then click *Delete*.
+
+include::url-drilldown.asciidoc[]