diff --git a/docs/user/dashboard/dashboard.asciidoc b/docs/user/dashboard/dashboard.asciidoc index af67b3016454..516f4c66d47b 100644 --- a/docs/user/dashboard/dashboard.asciidoc +++ b/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. | <> -| Display an anomaly chart from the *Anomaly Explorer. +| Display an anomaly chart from the *Anomaly Explorer*. | <> | Display a table of live streaming logs. -| <> +| <> | Add context to your panels with <>, or add dynamic filters with <>. |=== @@ -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[] diff --git a/docs/user/dashboard/images/drilldown_on_data_table.gif b/docs/user/dashboard/images/drilldown_on_data_table.gif new file mode 100644 index 000000000000..926b0ff43aea Binary files /dev/null and b/docs/user/dashboard/images/drilldown_on_data_table.gif differ diff --git a/docs/user/dashboard/images/drilldown_on_panel.png b/docs/user/dashboard/images/drilldown_on_panel.png index 591f3280c7ec..71b83ae45706 100644 Binary files a/docs/user/dashboard/images/drilldown_on_panel.png and b/docs/user/dashboard/images/drilldown_on_panel.png differ diff --git a/docs/user/dashboard/make-dashboards-interactive.asciidoc b/docs/user/dashboard/make-dashboards-interactive.asciidoc new file mode 100644 index 000000000000..3c2397d0241b --- /dev/null +++ b/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. + +++++ + + +
+++++ + +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 <>. + +* *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 <> 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 <> 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 <> 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 <> you use to create a <> 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[]