diff --git a/docs/use-cases/observability/clickstack/dashboards.md b/docs/use-cases/observability/clickstack/dashboards.md index 75568897170..c390a24ab3b 100644 --- a/docs/use-cases/observability/clickstack/dashboards.md +++ b/docs/use-cases/observability/clickstack/dashboards.md @@ -25,6 +25,13 @@ import dashboard_edit from '@site/static/images/use-cases/observability/hyperdx- import dashboard_clickhouse from '@site/static/images/use-cases/observability/hyperdx-dashboard-clickhouse.png'; import dashboard_services from '@site/static/images/use-cases/observability/hyperdx-dashboard-services.png'; import dashboard_kubernetes from '@site/static/images/use-cases/observability/hyperdx-dashboard-kubernetes.png'; +import edit_filters from '@site/static/images/clickstack/dashboards/edit-filters.png'; +import add_filter from '@site/static/images/clickstack/dashboards/add-filter.png'; +import saved_filters from '@site/static/images/clickstack/dashboards/saved-filters.png'; +import filtered_dashboard from '@site/static/images/clickstack/dashboards/filtered-dashboard.png'; +import filter_dropdown from '@site/static/images/clickstack/dashboards/filter-dropdown.png'; +import save_filter_values from '@site/static/images/clickstack/dashboards/save-filter-values.png'; +import drilldown from '@site/static/images/clickstack/dashboards/drilldown.png'; import Tagging from '@site/docs/_snippets/_clickstack_tagging.mdx'; ClickStack supports visualizing events, with built-in support for charting in ClickStack UI (HyperDX). These charts can be added to dashboards for sharing with other users. @@ -170,6 +177,63 @@ Dashboards are accessible from the left-hand menu, with built-in search to quick ## Dashboards - Tagging {#tagging} +## Custom filters {#custom-filters} + +In addition to the [free-text filters](#filter-dashboards) available on all dashboards, saved dashboards support custom dropdown filters populated by data queried from ClickHouse. These provide reusable, point-and-click filter controls so that dashboard viewers can filter without writing expressions manually. + +Services dropdown filter showing available service names + +The following steps demonstrate adding a custom filter to the dashboard created in the ["Creating dashboards"](#creating-dashboards) section. + + + +### Open the Edit Filters dialog {#open-edit-filters} + +Open a saved dashboard and select **Edit Filters** from the toolbar. + +Edit Filters button in the dashboard toolbar + +### Add a new filter {#add-new-filter} + +Click **Add new filter**. Configure the filter by providing a **Name**, selecting a **Data source**, and entering a **Filter expression** — a SQL column or expression whose distinct values will populate the dropdown. Click **Save filter**. + +For example, to add a service filter for trace data, use `ServiceName` as the filter expression with the `Traces` data source. + +Add filter dialog with Name, Data source, and Filter expression fields + +The Filters modal shows all configured filters for the dashboard. From here you can edit or delete existing filters, or add additional ones. + +Filters modal showing a configured Services filter + +### Use the filter {#use-filter} + +Close the Filters modal. The new dropdown filter appears below the search bar. Click it to see the available values, then select one to filter all visualizations on the dashboard. + +Dashboard filtered to the frontend service + +### (Optional) Save filter values as default {#save-default-filters} + +To persist a filter selection as the dashboard default, choose **Save Query & Filters as Default** from the dashboard menu. The dashboard will always open with the selected filters applied. To reset, select **Remove Default Query & Filters** from the same menu. + +Dashboard menu showing Save Query and Filters as Default option + + + +:::note +Custom dropdown filters are available on saved dashboards. For an example of this pattern in action, see the [Kubernetes dashboard](#kubernetes-dashboard), which provides built-in dropdown filters for Pod, Deployment, Node name, Namespace, and Cluster. +::: + +## Drilldown to search {#drilldown-to-search} + +Dashboard tiles support drilldown to the Search page. Click on a data point in a visualization to open a context menu with the following options: + +- **View All Events** — navigates to the Search page showing all events from the selected time window. +- **Filter by group** — navigates to the Search page filtered to a specific series. + +Drilldown context menu showing View All Events and Filter by group options + +This is useful for investigating specific spikes or anomalies spotted in a dashboard — you can quickly pivot from an aggregated view to the underlying individual events. + ## Presets {#presets} HyperDX is deployed with out-of-the-box dashboards. diff --git a/static/images/clickstack/dashboards/add-filter.png b/static/images/clickstack/dashboards/add-filter.png new file mode 100644 index 00000000000..801a6691e69 Binary files /dev/null and b/static/images/clickstack/dashboards/add-filter.png differ diff --git a/static/images/clickstack/dashboards/drilldown.png b/static/images/clickstack/dashboards/drilldown.png new file mode 100644 index 00000000000..bc64694295e Binary files /dev/null and b/static/images/clickstack/dashboards/drilldown.png differ diff --git a/static/images/clickstack/dashboards/edit-filters.png b/static/images/clickstack/dashboards/edit-filters.png new file mode 100644 index 00000000000..f5a6eca6858 Binary files /dev/null and b/static/images/clickstack/dashboards/edit-filters.png differ diff --git a/static/images/clickstack/dashboards/filter-dropdown.png b/static/images/clickstack/dashboards/filter-dropdown.png new file mode 100644 index 00000000000..99549c12a0c Binary files /dev/null and b/static/images/clickstack/dashboards/filter-dropdown.png differ diff --git a/static/images/clickstack/dashboards/filtered-dashboard.png b/static/images/clickstack/dashboards/filtered-dashboard.png new file mode 100644 index 00000000000..3497a6a3e26 Binary files /dev/null and b/static/images/clickstack/dashboards/filtered-dashboard.png differ diff --git a/static/images/clickstack/dashboards/save-filter-values.png b/static/images/clickstack/dashboards/save-filter-values.png new file mode 100644 index 00000000000..14f4880f813 Binary files /dev/null and b/static/images/clickstack/dashboards/save-filter-values.png differ diff --git a/static/images/clickstack/dashboards/saved-filters.png b/static/images/clickstack/dashboards/saved-filters.png new file mode 100644 index 00000000000..f423da432fc Binary files /dev/null and b/static/images/clickstack/dashboards/saved-filters.png differ