[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>
This commit is contained in:
parent
a9dbf80012
commit
0e6d596991
4 changed files with 276 additions and 5 deletions
|
@ -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[]
|
||||
|
|
BIN
docs/user/dashboard/images/drilldown_on_data_table.gif
Normal file
BIN
docs/user/dashboard/images/drilldown_on_data_table.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 109 KiB |
241
docs/user/dashboard/make-dashboards-interactive.asciidoc
Normal file
241
docs/user/dashboard/make-dashboards-interactive.asciidoc
Normal file
|
@ -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* — 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* — 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* — 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* — A single data point in the panel.
|
||||
|
||||
* *Range selection* — 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[]
|
Loading…
Reference in a new issue