Drilldowns Demo Dashboard

Demonstrates panel drilldowns including dashboard-to-dashboard navigation and URL drilldowns.

Overview

This example shows how to configure drilldowns on Lens panels to enable interactive navigation. Drilldowns allow users to click on chart elements and either navigate to another dashboard or open an external URL.

Features Demonstrated

Feature	Description
Dashboard Drilldowns	Navigate to another Kibana dashboard when clicking on a chart element
URL Drilldowns	Open an external URL (optionally with template variables)
Filter Preservation	Pass current filters to the target dashboard
Time Preservation	Pass current time range to the target dashboard
Multiple Triggers	Configure click, filter, or range triggers
Multiple Drilldowns	Add multiple drilldown actions to a single panel

Drilldown Types

Dashboard Drilldown

Navigate to another dashboard with optional context preservation:

drilldowns:
  - name: View Details
    dashboard: target-dashboard-id  # Required: target dashboard ID
    with_filters: true              # Optional: pass current filters (default: true)
    with_time: true                 # Optional: pass time range (default: true)
    triggers:                       # Optional: trigger types (default: [click])
      - click

URL Drilldown

Open an external URL with optional template variables:

drilldowns:
  - name: Open Documentation
    url: "https://docs.example.com/{{event.value}}"  # Required: URL template
    new_tab: true                                     # Optional: open in new tab (default: false)
    encode_url: true                                  # Optional: URL-encode variables (default: true)
    triggers:
      - click

Trigger Types

Trigger	Description
click	Triggered when clicking on a data point (VALUE_CLICK_TRIGGER)
filter	Triggered when applying a filter action (FILTER_TRIGGER)
range	Triggered when selecting a time range (SELECT_RANGE_TRIGGER)

Dashboard Definition

Drilldowns Demo (01-drilldowns-demo.yaml)

---
# Drilldowns Demo Dashboard
# This dashboard demonstrates various drilldown configurations including:
# - Dashboard-to-dashboard drilldowns (navigate to another dashboard)
# - URL drilldowns (open external URLs)
# - Different trigger types (click, filter, range)
#
# Note: For the dashboard drilldowns to work, the target dashboards must exist
# in your Kibana instance. Replace the dashboard IDs with actual dashboard IDs.
#
# Prerequisites: This example expects a `logs-*` data view with fields like
# http.response.status_code, event.dataset, host.name, and event.action.
# Adjust data_view and field names for your environment.
#
# To verify compilation: kb-dashboard compile --input-file packages/kb-dashboard-docs/content/examples/drilldowns/01-drilldowns-demo.yaml
dashboards:
  - name: Drilldowns Demo
    description: Demonstrates dashboard and URL drilldowns on various panel types
    panels:
      # Overview metric with dashboard drilldown
      - title: Total Events (Click for Details)
        size: {w: quarter, h: 8}
        lens:
          type: metric
          data_view: logs-*
          primary:
            aggregation: count
            id: total-events
        drilldowns:
          - name: View Event Details
            dashboard: event-details-dashboard
            with_filters: true
            with_time: true

      # Metric with URL drilldown
      - title: Error Rate (Click for Docs)
        size: {w: quarter, h: 8}
        lens:
          type: metric
          data_view: logs-*
          primary:
            aggregation: count
            id: error-count
          filters:
            - field: log.level
              equals: error
        drilldowns:
          - name: Open Error Documentation
            url: https://docs.example.com/errors
            new_tab: true

      # Panel with multiple drilldowns
      - title: Requests by Status
        size: {w: half, h: 8}
        lens:
          type: bar
          data_view: logs-*
          dimension:
            type: values
            field: http.response.status_code
            id: status-code
            size: 10
          metrics:
            - aggregation: count
              id: request-count
        drilldowns:
          # Dashboard drilldown for deeper analysis
          - name: Analyze Status Code
            dashboard: status-code-analysis
            id: status-drill
            with_filters: true
          # URL drilldown for external reference
          - name: HTTP Status Reference
            url: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/{{event.value}}
            id: mdn-status
            new_tab: true
            encode_url: true

      # Time series with range trigger drilldown
      - title: Events Over Time
        size: {w: half, h: 12}
        lens:
          type: line
          data_view: logs-*
          dimension:
            type: date_histogram
            field: '@timestamp'
            id: time-bucket
          metrics:
            - aggregation: count
              id: event-count
        drilldowns:
          - name: Zoom to Time Range
            dashboard: detailed-events-dashboard
            triggers:
              - range
            with_time: true
            with_filters: true

      # Pie chart with click trigger
      - title: Events by Source
        size: {w: half, h: 12}
        lens:
          type: pie
          data_view: logs-*
          breakdowns:
            - type: values
              field: event.dataset
              id: source-group
              size: 5
          metrics:
            - aggregation: count
              id: source-count
        drilldowns:
          - name: View Source Details
            dashboard: source-specific-dashboard
            triggers:
              - click
              - filter

      # Data table with URL drilldown
      - title: Top Hosts
        size: {w: whole, h: 10}
        lens:
          type: datatable
          data_view: logs-*
          breakdowns:
            - type: values
              field: host.name
              id: host-col
              size: 20
          metrics:
            - aggregation: count
              id: host-event-count
              label: Event Count
            - aggregation: unique_count
              field: event.action
              id: unique-actions
              label: Unique Actions
        drilldowns:
          - name: View Host in Fleet
            url: https://kibana.example.com/app/fleet/agents?kuery=host.name:{{event.value}}
            new_tab: true
            triggers:
              - click

Prerequisites

• Kibana: Version 8.x or later
• Target Dashboards: For dashboard drilldowns, the target dashboards must exist in your Kibana instance

Usage Notes

1. Dashboard IDs: Replace the example dashboard IDs (event-details-dashboard, status-code-analysis, etc.) with actual dashboard IDs from your Kibana instance.

2. URL Templates: URL drilldowns support Kibana's template syntax. Common variables include:

3. {{event.value}} - The clicked value
4. {{context.panel.query}} - The panel's query

5. {{context.panel.filters}} - Applied filters

6. Data View: This example uses logs-* as the data view. Adjust to match your data.

Related

• Drilldowns Documentation
• Lens Panel Configuration
• Base Panel Configuration