Skip to content

Commit b546940

Browse files
KOTungsethDosantkibanamachine
committed
[DOCS] Consolidates drilldown pages (#82081)
* [DOCS] Consolidated drilldowns * Review comments pt 1 * Update docs/user/dashboard/drilldowns.asciidoc Co-authored-by: Anton Dosov <dosantappdev@gmail.com> * Fixes supported drilldowns link * Update src/core/public/doc_links/doc_links_service.ts Co-authored-by: Anton Dosov <dosantappdev@gmail.com> * Fixes rogue disable section and fixes intro formatting * Fixes URL drilldown link Co-authored-by: Anton Dosov <dosantappdev@gmail.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # docs/user/dashboard/url-drilldown.asciidoc
1 parent 33fdc42 commit b546940

4 files changed

Lines changed: 249 additions & 237 deletions

File tree

docs/user/dashboard/dashboard-drilldown.asciidoc

Lines changed: 0 additions & 96 deletions
This file was deleted.
Lines changed: 238 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,259 @@
11
[role="xpack"]
22
[[drilldowns]]
3-
== Use drilldowns for dashboard actions
3+
== Create custom dashboard actions
44

5-
Drilldowns, also known as custom actions, allow you to configure a
6-
workflow for analyzing and troubleshooting your data.
7-
For example, using a drilldown, you can navigate from one dashboard to another,
8-
taking the current time range, filters, and other parameters with you,
9-
so the context remains the same. You can continue your analysis from a new perspective.
5+
Custom dashboard actions, also known as drilldowns, allow you to create
6+
workflows for analyzing and troubleshooting your data. Drilldowns apply only to the panel that you created the drilldown from, and are not shared across all of the panels. Each panel can have multiple drilldowns.
107

11-
[role="screenshot"]
12-
image::images/drilldown_on_piechart.gif[Drilldown on pie chart that navigates to another dashboard]
8+
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].
9+
10+
[float]
11+
[[supported-drilldowns]]
12+
=== Supported drilldowns
13+
14+
{kib} supports two types of drilldowns.
15+
16+
[NOTE]
17+
==============================================
18+
Some drilldowns are paid subscription features, while others are free.
19+
For a comparison of the Elastic subscription levels,
20+
refer https://www.elastic.co/subscriptions[the subscription page].
21+
==============================================
22+
23+
[float]
24+
[[dashboard-drilldown]]
25+
==== Dashboard drilldowns
26+
27+
Dashboard drilldowns enable you to open a dashboard from another dashboard,
28+
taking the time range, filters, and other parameters with you,
29+
so the context remains the same. Dashboard drilldowns help you to continue your analysis from a new perspective.
30+
31+
For example, if you have a dashboard that shows the overall status of multiple data center,
32+
you can create a drilldown that navigates from the overall status dashboard to a dashboard
33+
that shows a single data center or server.
34+
35+
[float]
36+
[[url-drilldown]]
37+
==== URL drilldowns
38+
39+
beta[] URL drilldowns enable you to navigate from a dashboard to internal or external URLs.
40+
Destination URLs can be dynamic, depending on the dashboard context or user interaction with a panel.
41+
For example, if you have a dashboard that shows data from a Github repository, you can create a URL drilldown
42+
that opens Github from the dashboard.
43+
44+
Some panels support multiple interactions, also known as triggers.
45+
The <<variables,variables>> you use to create a <<url_templating, URL template>> depends on the trigger you choose. URL drilldowns support these types of triggers:
46+
47+
* *Single click* &mdash; A single data point in the visualization.
48+
49+
* *Range selection* &mdash; A range of values in a visualization.
50+
51+
For example, *Single click* has `{{event.value}}` and *Range selection* has `{{event.from}}` and `{{event.to}}`.
52+
53+
To disable URL drilldowns on your {kib} instance, disable the plugin:
1354

14-
Drilldowns are specific to the dashboard panel for which you create them—they are not shared across panels. A panel can have multiple drilldowns.
55+
["source","yml"]
56+
-----------
57+
url_drilldown.enabled: false
58+
-----------
1559

1660
[float]
17-
[[actions]]
18-
=== Drilldown actions
61+
[[dashboard-drilldown-supported-panels]]
62+
=== Supported panels
1963

20-
Drilldowns are user-configurable {kib} actions that are stored with the dashboard metadata.
21-
Kibana provides the following types of actions:
64+
The following panels support dashboard and URL drilldowns.
2265

23-
[cols="2"]
66+
[options="header"]
2467
|===
2568

26-
a| <<dashboard-drilldown, Dashboard drilldown>>
69+
| Panel | Dashboard drilldown | URL drilldown
2770

28-
| Navigate to a dashboard.
71+
| Lens
72+
^| X
73+
^| X
2974

30-
a| <<url-drilldown, URL drilldown>>
75+
| Area
76+
^| X
77+
^| X
3178

32-
| Navigate to external or internal URL.
79+
| Controls
80+
^|
81+
^|
82+
83+
| Data Table
84+
^| X
85+
^| X
86+
87+
| Gauge
88+
^|
89+
^|
90+
91+
| Goal
92+
^|
93+
^|
94+
95+
| Heat map
96+
^| X
97+
^| X
98+
99+
| Horizontal Bar
100+
^| X
101+
^| X
102+
103+
| Line
104+
^| X
105+
^| X
106+
107+
| Maps
108+
^| X
109+
^|
110+
111+
| Markdown
112+
^|
113+
^|
114+
115+
| Metric
116+
^|
117+
^|
118+
119+
| Pie
120+
^| X
121+
^| X
122+
123+
| TSVB
124+
^| X
125+
^|
126+
127+
| Tag Cloud
128+
^| X
129+
^| X
130+
131+
| Timelion
132+
^| X
133+
^|
134+
135+
| Vega
136+
^| X
137+
^|
138+
139+
| Vertical Bar
140+
^| X
141+
^| X
33142

34143
|===
35144

36-
[NOTE]
37-
==============================================
38-
Some action types are paid commercial features, while others are free.
39-
For a comparison of the Elastic subscription levels,
40-
see https://www.elastic.co/subscriptions[the subscription page].
41-
==============================================
145+
[float]
146+
[[drilldowns-example]]
147+
=== Try it: Create a dashboard drilldown
148+
149+
To create dashboard drilldowns, you create or locate the dashboards you want to connect, then configure the drilldown that allows you to easily open one dashboard from the other dashboard.
150+
151+
image:images/drilldown_on_piechart.gif[Drilldown on pie chart that navigates to another dashboard]
42152

43153
[float]
44-
[[code-drilldowns]]
45-
=== Code drilldowns
46-
Third-party developers can create drilldowns.
47-
Refer to {kib-repo}blob/{branch}/x-pack/examples/ui_actions_enhanced_examples[this example plugin]
48-
to learn how to code drilldowns.
154+
==== Create the dashboard
49155

50-
include::dashboard-drilldown.asciidoc[]
51-
include::url-drilldown.asciidoc[]
156+
. Add the *Sample web logs* data.
157+
158+
. Create a new dashboard, then add the following panels:
159+
160+
* *[Logs] Heatmap*
161+
* *[Logs] Host, Visits, and Bytes Table*
162+
* *[Logs] Total Requests and Bytes*
163+
* *[Logs] Visitors by OS*
164+
+
165+
If you don’t see data for a panel, try changing the <<set-time-filter,time filter>>.
166+
167+
. Save the dashboard. In the *Title* field, enter `Host Overview`.
168+
169+
. Open the *[Logs] Web traffic* dashboard.
170+
171+
. Set a search and filter.
172+
+
173+
[%hardbreaks]
174+
Search: `extension.keyword: ("gz" or "css" or "deb")`
175+
Filter: `geo.src: CN`
176+
177+
[float]
178+
==== Create the drilldown
179+
180+
. In the toolbar, click *Edit*.
181+
182+
. Open the *[Logs] Visitors by OS* panel menu, then select *Create drilldown*.
183+
184+
. Give the drilldown a name, then select *Go to dashboard*.
185+
186+
. From the *Choose a destination dashboard* dropdown, select *Host Overview*.
187+
188+
. To carry over the filter, query, and date range, make sure that *Use filters and query from origin dashboard* and *Use date range from origin dashboard* are selected.
189+
+
190+
[role="screenshot"]
191+
image::images/drilldown_create.png[Create drilldown with entries for drilldown name and destination]
192+
193+
. Click *Create drilldown*.
194+
+
195+
The drilldown is stored as dashboard metadata.
196+
197+
. Save the dashboard.
198+
+
199+
If you fail to save the dashboard, the drilldown is lost when you navigate away from the dashboard.
200+
201+
. In the *[Logs] Visitors by OS* panel, click *win 8*, then select the drilldown.
202+
+
203+
[role="screenshot"]
204+
image::images/drilldown_on_panel.png[Drilldown on pie chart that navigates to another dashboard]
52205

206+
. On the *Host Overview* dashboard, verify that the search query, filters,
207+
and date range are carried over.
208+
209+
[float]
210+
[[create-a-url-drilldown]]
211+
=== Try it: Create a URL drilldown
212+
213+
beta[] To create URL drilldowns, you add <<variables,variables>> to a URL template, which configures the bahavior of the drilldown.
214+
215+
image:images/url_drilldown_go_to_github.gif[Drilldown on pie chart that navigates to Github]
216+
217+
. Add the *Sample web logs* data.
218+
219+
. Open the *[Logs] Web traffic* dashboard. This isn’t data from Github, but works for demonstration purposes.
220+
221+
. In the toolbar, click *Edit*.
222+
223+
. Open the *[Logs] Visitors by OS* panel menu, then select *Create drilldown*.
224+
225+
.. In the *Name* field, enter `Show on Github`.
226+
227+
.. Select *Go to URL*.
228+
229+
.. Enter the URL template:
230+
+
231+
[source, bash]
232+
----
233+
https://github.com/elastic/kibana/issues?q=is:issue+is:open+{{event.value}}
234+
----
235+
+
236+
The example URL navigates to {kib} issues on Github. `{{event.value}}` is substituted with a value associated with a selected pie slice. In *URL preview*, `{{event.value}}` is substituted with a <<values-in-preview, dummy>> value.
237+
+
238+
[role="screenshot"]
239+
image:images/url_drilldown_url_template.png[URL template input]
240+
241+
.. Click *Create drilldown*.
242+
+
243+
The drilldown is stored as dashboard metadata.
244+
245+
. Save the dashboard.
246+
+
247+
If you fail to save the dashboard, the drilldown is lost when you navigate away from the dashboard.
248+
249+
. On the *[Logs] Visitors by OS* panel, click any chart slice, then select *Show on Github*.
250+
+
251+
[role="screenshot"]
252+
image:images/url_drilldown_popup.png[URL drilldown popup]
253+
254+
. On the page that lists the issues in the {kib} repository, verify the slice value appears in Github.
255+
+
256+
[role="screenshot"]
257+
image:images/url_drilldown_github.png[Github]
258+
259+
include::url-drilldown.asciidoc[]

0 commit comments

Comments
 (0)