Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

have Kibana has 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 Drill-downs let you customize customise the interactive behavior behaviour while keeping the context of the interaction.

There are three types of drilldowns drill-downs you can add to dashboards:

  • Dashboard — Navigates you from one dashboard to another dashboard. For example, 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.

  • Discover — Navigates you from a Lens dashboard panel to Discover. For example, create a drilldown for a Lens visualization that opens the visualization data in Discover for further exploration.

Third-party developers can create drilldowns. To learn how to code drilldowns, refer to this example plugin.type_of_drilldows-20240517-031429.pngImage Added

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.

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


Add the sample data

Sample data sets come with sample visualizations, dashboards, and more to help you explore Kibana before you ingest or add your own data.

  1. On the home page, click Try sample data.

  2. Click Other sample data sets.

  3. On the Sample eCommerce orders card, click Add data.

...

Create and set up the dashboards you want to connect

Use the Sample web logs [eCommerce] Revenue Dashboard data to create a dashboard and add panels, then set a search and filter on the [LogseCommerce] Web TrafficRevenue Dashboard dashboard.

  1. Add the Sample web logs data.

  2. Create a new dashboard, click Add from Library, then add the following panels:

    • [Logs] Response Codes Over Time + Annotations

    • [Logs] Visits

  3. Set the time filter to Last 30 days.

  4. Save the dashboard. In the Title field, enter Detailed logs.

  5. Open the [Logs] Web Traffic dashboard, then set a search and filter.

    Search: extension.keyword: ("gz" or "css" or "deb")
    Filter: geo.src: US

...

image-20240517-033218.pngImage Added

Create the dashboard drilldown

Create a drilldown that opens the Detailed logs Category wise dashboard from the [LogseCommerce] Web TrafficRevenue Dashboard dashboard.

  1. Open the panel menu for the [Logs] Errors by host Breakdown by category data table, then select Create drilldown.

  2. Click Go to dashboard.

    1. Give the drilldown a name. For example, View detailsby category.

    2. From the Choose a destination dashboard dropdown, select Detailed logs Category Details.

    3. 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.

    4. Click Create drilldown.

  3. Save the dashboard.

  4. In the data table panel, hover over a value, click +, then select View detailsCategory Details.

Screenshot from 2024-05-17 08-46-33-20240517-031633.pngImage Added

Screenshot from 2024-05-17 08-45-29-20240517-031529.pngImage Added

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 to a URL template, which configures the behavior of the drilldown. All panels that you create with the visualization editors support dashboard drilldowns.

...

Refer to Handlebars documentation to learn about advanced use cases.

Custom helper

Use case

json

Serialize variables in JSON format.

Example:

{{json event}}
{{json event.key event.value}}
{{json filters=context.panel.filters}}

rison

Serialize variables in rison format. Rison is a common format for Kibana apps for storing state in the URL.

Example:

{{rison event}}
{{rison event.key event.value}}
{{rison filters=context.panel.filters}}

date

Format dates. Supports relative dates expressions (for example, "now-15d"). Refer to the moment docs for different formatting options.

Example:

{{date event.from “YYYY MM DD”}}
{{date “now-15”}}

formatNumber

Format numbers. Numbers can be formatted to look like currency, percentages, times or numbers with decimal places, thousands, and abbreviations. Refer to the numeral.js for different formatting options.

Example:

{{formatNumber event.value "0.0"}}

lowercase

Converts a string to lower case.

Example:

{{lowercase event.value}}

uppercase

Converts a string to upper case.

Example:

{{uppercase event.value}}

trim

Removes leading and trailing spaces from a string.

Example:

{{trim event.value}}

trimLeft

Removes leading spaces from a string.

Example:

{{trimLeft event.value}}

trimRight

Removes trailing spaces from a string.

Example:

{{trimRight event.value}}

mid

Extracts a substring from a string by start position and number of characters to extract.

Example:

{{mid event.value 3 5}} - extracts five characters starting from a third character.

left

Extracts a number of characters from a string (starting from left).

Example:

{{left event.value 3}}

right

Extracts a number of characters from a string (starting from right).

Example:

{{right event.value 3}}

concat

Concatenates two or more strings.

Example:

{{concat event.value "," event.key}}

replace

Replaces all substrings within a string.

Example:

{{replace event.value "stringToReplace" "stringToReplaceWith"}}

split

Splits a string using a provided splitter.

Example:

{{split event.value ","}}

encodeURIComponent

Escapes string using built in encodeURIComponent function.

encodeURIQuery

Escapes string using built in encodeURIComponent function, while keeping "@", ":", "$", ",", and ";" characters as is.

URL template variables

The URL drilldown template has three sources for variables:

...

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.

Variables reference

Source

Variable

Description

Global

kibanaUrl

Kibana base URL. Useful for creating URL drilldowns that navigate within Kibana.

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 Kibana filters applied to a panel.
Tip: Use in combination with rison helper for internal Kibana navigations with carrying over current filters.

context.panel.query.query

Current query string.

context.panel.query.language

Current query language.

context.panel.timeRange.from
context.panel.timeRange.to

Current time picker values.
Tip: Use in combination with date helper to format date.

context.panel.indexPatternId
context.panel.indexPatternIds

The data view 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.

event.points

Some visualizations have clickable points that emit more than one data point. Use list of data points in case a single value is insufficient.

Example:

{{json event.points}}
{{event.points.[0].key}}
{{event.points.[0].value}} {{#each event.points}}key=value&{{/each}}

Note:

{{event.value}} is a shorthand for {{event.points.[0].value}}
{{event.key}} is a shorthand for {{event.points.[0].key}}

Row click

event.rowIndex

Number, representing the row that was clicked, starting from 0.

event.values

An array of all cell values for the row on which the action will execute. To access a column value, use {{event.values.[x]}}, where x represents the column number.

event.keys

An array of field names for each column.

event.columnNames

An array of column names.

Range selection

event.from


http://event.to


from and to values of the selected range as numbers.
Tip: Consider using date helper for date formatting.

event.key

Aggregation field behind the selected range, if available.