mirror of
https://github.com/grafana/grafana.git
synced 2026-01-15 05:35:41 +00:00
Compare commits
1 Commits
ash/react-
...
j-fs-fix-l
| Author | SHA1 | Date | |
|---|---|---|---|
|
1aea178e23 |
@@ -78,9 +78,9 @@ For every dashboard and data source, you can access usage information.
|
||||
|
||||
### Dashboard insights
|
||||
|
||||
To see dashboard usage information, click the dashboard insights icon in the sidebar.
|
||||
To see dashboard usage information, click the dashboard insights icon in the header.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-dashboard-insights-v12.4.png" max-width="500px" alt="Dashboard insights icon" >}}
|
||||
|
||||
|
||||
Dashboard insights show the following information:
|
||||
|
||||
|
||||
@@ -2,423 +2,238 @@
|
||||
aliases:
|
||||
- ../../../dashboards/build-dashboards/add-organize-panels/ # /docs/grafana/next/dashboards/build-dashboards/add-organize-panels/
|
||||
- ../../../dashboards/build-dashboards/create-dashboard/ # /docs/grafana/next/dashboards/build-dashboards/create-dashboard/
|
||||
- ../../../dashboards/build-dashboards/create-dynamic-dashboard/ # /docs/grafana/latest/dashboards/build-dashboards/create-dynamic-dashboard/
|
||||
- ./create-dynamic-dashboard/ # /docs/grafana/latest/visualizations/dashboards/build-dashboards/create-dynamic-dashboard/
|
||||
keywords:
|
||||
- panel
|
||||
- dashboard
|
||||
- create
|
||||
- dynamic dashboard
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
title: Create dashboards
|
||||
menuTitle: Create a dashboard
|
||||
title: Create a dashboard
|
||||
description: Create and edit a dashboard
|
||||
weight: 1
|
||||
image_maps:
|
||||
- key: editpane-sidebar
|
||||
src: /media/docs/grafana/dashboards/screenshot-edit-sidebar-v12.4.png
|
||||
alt: An annotated image of the edit pane and sidebar
|
||||
points:
|
||||
- x_coord: 96
|
||||
y_coord: 17
|
||||
content: |
|
||||
**Dashboard options**
|
||||
|
||||
Click the icon to open the edit pane. Edit mode only.
|
||||
- x_coord: 96
|
||||
y_coord: 25
|
||||
content: |
|
||||
**Feedback**
|
||||
|
||||
Submit feedback on the new editing experience. Edit mode only.
|
||||
- x_coord: 96
|
||||
y_coord: 33
|
||||
content: |
|
||||
**Export**
|
||||
|
||||
Click to display [export](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/share-dashboards-panels/#export-dashboards) options.
|
||||
- x_coord: 96
|
||||
y_coord: 41
|
||||
content: |
|
||||
**Content outline**
|
||||
|
||||
Navigate a dashboard using the [Content outline](#navigate-using-the-content-outline).
|
||||
- x_coord: 96
|
||||
y_coord: 49
|
||||
content: |
|
||||
**Dashboard insights**
|
||||
|
||||
View [dashboard analytics](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/assess-dashboard-usage/) including information about users, activity, and query counts.
|
||||
refs:
|
||||
built-in-special-data-sources:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#special-data-sources
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/#special-data-sources
|
||||
visualization-specific-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/visualizations/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/
|
||||
configure-standard-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-standard-options/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/
|
||||
configure-value-mappings:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-value-mappings/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-value-mappings/
|
||||
generative-ai-features:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
configure-thresholds:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-thresholds/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-thresholds/
|
||||
data-sources:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/
|
||||
add-a-data-source:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#add-a-data-source
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#add-a-data-source
|
||||
about-users-and-permissions:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/
|
||||
visualizations-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/visualizations/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/
|
||||
configure-repeating-panels:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-panel-options/#configure-repeating-panels
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-panel-options/#configure-repeating-panels
|
||||
override-field-values:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
saved-queries:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/query-transform-data/#saved-queries
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/#saved-queries
|
||||
save-query:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/query-transform-data/#save-a-query
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/query-transform-data/#save-a-query
|
||||
---
|
||||
|
||||
# Create dashboards
|
||||
|
||||
{{< admonition type="note">}}
|
||||
Dynamic dashboards is currently in public preview. Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available.
|
||||
|
||||
For information on the generally available dashboard creation experience, refer to the [documentation for the latest self-managed version of Grafana](https://grafana.com/docs/grafana/latest/visualizations/dashboards/build-dashboards/create-dashboard/).
|
||||
{{< /admonition >}}
|
||||
|
||||
Dashboards and panels allow you to show your data in visual form.
|
||||
Each panel needs at least one query to display a visualization.
|
||||
|
||||
**Before you begin:**
|
||||
|
||||
- Ensure that you have the proper permissions. For more information about permissions, refer to [About users and permissions](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/).
|
||||
- Understand the query language of the target data source.
|
||||
|
||||
## Create a dashboard
|
||||
|
||||
Dashboards and panels allow you to show your data in visual form. Each panel needs at least one query to display a visualization.
|
||||
|
||||
**Before you begin:**
|
||||
|
||||
- Ensure that you have the proper permissions. For more information about permissions, refer to [About users and permissions](ref:about-users-and-permissions).
|
||||
- Identify the dashboard to which you want to add the panel.
|
||||
- Understand the query language of the target data source.
|
||||
- Ensure that data source for which you are writing a query has been added. For more information about adding a data source, refer to [Add a data source](ref:add-a-data-source) if you need instructions.
|
||||
|
||||
To create a dashboard, follow these steps:
|
||||
|
||||
{{< shared id="create-dashboard" >}}
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Click **New** and select **New Dashboard**.
|
||||
1. Click **+ Add visualization**.
|
||||
1. On the empty dashboard, click **+ Add visualization**.
|
||||
|
||||
|
||||
|
||||
{{< /shared >}}
|
||||
|
||||
1. In the dialog box that opens, do one of the following:
|
||||
- Select one of your existing data sources.
|
||||
- Select one of the Grafana [built-in special data sources](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/datasources/#special-data-sources).
|
||||
- Select one of the Grafana [built-in special data sources](ref:built-in-special-data-sources).
|
||||
- Click **Configure a new data source** to set up a new one (Admins only).
|
||||
|
||||
{{< figure class="float-right" src="/media/docs/grafana/dashboards/screenshot-data-source-selector-10.0.png" max-width="800px" alt="Select data source modal" >}}
|
||||
|
||||
The **Edit panel** view opens with your data source selected.
|
||||
You can change the panel data source later using the drop-down in the **Query** tab of the panel editor if needed.
|
||||
You can change the panel data source later using the drop-down in the **Queries** tab of the panel editor if needed.
|
||||
|
||||
For more information about data sources, refer to [Data sources](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/datasources/) for specific guidelines.
|
||||
For more information about data sources, refer to [Data sources](ref:data-sources) for specific guidelines.
|
||||
|
||||
1. To create a query, do one of the following:
|
||||
- Write or construct a query in the query language of your data source.
|
||||
- Open the **Saved queries** drop-down menu and click **Replace query** to reuse a [saved query](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/query-transform-data/#saved-queries).
|
||||
- Open the **Saved queries** drop-down menu and click **Replace query** to reuse a [saved query](ref:saved-queries).
|
||||
|
||||
1. (Optional) To [save the query](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/query-transform-data/#save-a-query) for reuse, open the **Saved queries** drop-down menu and click the **Save query** option.
|
||||
1. (Optional) To [save the query](ref:save-query) for reuse, open the **Saved queries** drop-down menu and click the **Save query** option.
|
||||
1. Click **Refresh** to query the data source.
|
||||
1. (Optional) To add subsequent queries, click **+ Add query** or **+ Add from saved queries**, and refresh the data source as many times as needed.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
[Saved queries](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/query-transform-data/#saved-queries) is currently in [public preview](https://grafana.com/docs/release-life-cycle/) in Grafana Enterprise and Grafana Cloud only.
|
||||
[Saved queries](ref:saved-queries) is currently in [public preview](https://grafana.com/docs/release-life-cycle/) in Grafana Enterprise and Grafana Cloud only.
|
||||
{{< /admonition >}}
|
||||
|
||||
1. Click **Refresh** to query the data source.
|
||||
1. In the visualization list, select a visualization type.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-select-visualization-v12.png" max-width="350px" alt="Visualization selector" >}}
|
||||
|
||||
|
||||
Grafana displays a preview of your query results with the visualization applied.
|
||||
|
||||
For more information about configuring individual visualizations, refer to [Visualizations options](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/visualizations/).
|
||||
For more information about individual visualizations, refer to [Visualizations options](ref:visualizations-options).
|
||||
|
||||
1. Under **Panel options**, enter a title and description for the panel or have Grafana create them using [generative AI features](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards).
|
||||
1. Under **Panel options**, enter a title and description for your panel or have Grafana create them using [generative AI features](ref:generative-ai-features).
|
||||
1. Refer to the following documentation for ways you can adjust panel settings.
|
||||
|
||||
While not required, most visualizations need some adjustment before they properly display the information that you need.
|
||||
- [Configure value mappings](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-value-mappings/)
|
||||
- [Visualization-specific options](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/visualizations/)
|
||||
- [Override field values](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-overrides/)
|
||||
- [Configure thresholds](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-thresholds/)
|
||||
- [Configure standard options](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/panels-visualizations/configure-standard-options/)
|
||||
- [Configure value mappings](ref:configure-value-mappings)
|
||||
- [Visualization-specific options](ref:visualization-specific-options)
|
||||
- [Override field values](ref:override-field-values)
|
||||
- [Configure thresholds](ref:configure-thresholds)
|
||||
- [Configure standard options](ref:configure-standard-options)
|
||||
|
||||
1. When you've finished editing the panel, click **Save**.
|
||||
1. Enter a title and description for the dashboard if you haven't already or have Grafana create them using [generative AI features](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards).
|
||||
1. When you've finished editing your panel, click **Save dashboard**.
|
||||
|
||||
Alternatively, click **Back to dashboard** if you want to see your changes applied to the dashboard first. Then click **Save dashboard** when you're ready.
|
||||
|
||||
1. Enter a title and description for your dashboard or have Grafana create them using [generative AI features](ref:generative-ai-features).
|
||||
1. Select a folder, if applicable.
|
||||
1. Click **Save**
|
||||
1. Click **Back to dashboard**.
|
||||
1. (Optional) Continue building the dashboard by clicking one or more of the following options:
|
||||
- **+ Add panel**: Set panel options in the edit pane or click **Configure** to complete panel setup.
|
||||
- **+ Add variable**: Follow the steps to [add a variable to the dashboard](#add-variables).
|
||||
- **Group panels**: Choose from **Group into row** or **Group into tab**. For more information on groupings, refer to [Panel groupings](#panel-groupings).
|
||||
- **Dashboard options** icon: Open the edit pane to access [panel layout options](#panel-layouts).
|
||||
|
||||
1. When you've finished making changes, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
1. To add more panels to the dashboard, click **Back to dashboard**.
|
||||
Then click **Add** in the dashboard header and select **Visualization** in the drop-down.
|
||||
|
||||
## Dashboard edit
|
||||
|
||||
|
||||
Now that you've created a basic dashboard, you can augment it with more options.
|
||||
You can make several updates without leaving the dashboard by using the edit pane, which is explained in the next section.
|
||||
When you add additional panels to the dashboard, you're taken straight to the **Edit panel** view.
|
||||
|
||||
### The edit pane and sidebar
|
||||
1. When you've saved all the changes you want to make to the dashboard, click **Exit edit**.
|
||||
|
||||
The _edit pane_ allows you to make changes without leaving the dashboard, by displaying options associated with the part of the dashboard that's in focus.
|
||||
The _sidebar_ is on the next to the edit pane, and it includes options that are useful to have available all the time.
|
||||
Now, when you want to make more changes to the saved dashboard, click **Edit** in the top-right corner.
|
||||
|
||||
The following image shows the parts of the edit pane and the sidebar.
|
||||
Hover your cursor over the numbers to display descriptions of the sidebar options (descriptions also follow the image):
|
||||
### Begin dashboard creation from data source configuration
|
||||
|
||||
{{< image-map key="editpane-sidebar" >}}
|
||||
You can start the process of creating a dashboard directly from a data source rather than from the **Dashboards** page.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
The sidebar is displayed in both edit and view mode, but the **Dashboard options** and **Feedback** icons aren't available in view mode.
|
||||
{{< /admonition >}}
|
||||
To begin building a dashboard directly from a data source, follow these steps:
|
||||
|
||||
You can dock, undock, and resize the edit pane.
|
||||
When the edit pane is closed, you can resize the sidebar so the icon names are visible.
|
||||
1. Navigate to **Connections > Data sources**.
|
||||
1. On the row of the data source for which you want to build a dashboard, click **Build a dashboard**.
|
||||
|
||||
{{< video-embed src="/media/docs/grafana/dashboards/screenrecord-edit-side-v12.4.mp4" >}}
|
||||
The empty dashboard page opens.
|
||||
|
||||
The available configuration options in the edit pane differ depending on the selected dashboard element:
|
||||
|
||||
- Dashboards: High-level options are in the edit pane and further configuration options are in the **Settings** page.
|
||||
- Groupings (rows and tabs): All configuration options are available in the edit pane.
|
||||
- Panels: High-level options are in the edit pane and further configuration options are in the **Edit panel** view.
|
||||
|
||||
### Navigate using the content outline
|
||||
|
||||
The **Content outline** provides a tree-like structure that shows you all the parts of the dashboard and their relationships to each other, including panels, rows, tabs, and variables.
|
||||
The outline also lets you quickly navigate the dashboard and is available in both view and edit modes (note that variables are only included in edit mode).
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-content-outline-v12.4.png" max-width="750px" alt="Dashboard with outline open" >}}
|
||||
|
||||
To navigate the dashboard using the outline, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to view or update.
|
||||
1. In the right sidebar, click the **Content outline** icon to open it.
|
||||
1. Expand the outline to find the part of the dashboard you want to view or update.
|
||||
1. Click the tree item to navigate that part of the dashboard.
|
||||
|
||||
### Edit a dashboard
|
||||
|
||||
To edit a dashboard, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the part of the dashboard you want to update to open the edit pane, or click the **Dashboard options** icon to open it.
|
||||
|
||||
If the dashboard is large, open the **Content outline** and use it to navigate to the part of the dashboard you want to update.
|
||||
|
||||
1. Update the dashboard as needed.
|
||||
1. When you've finished making changes, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Back to dashboard**, if needed.
|
||||
1. Click **Exit edit**
|
||||
|
||||
## Panel layouts
|
||||
|
||||
Panel layouts control the size and arrangement of panels in the dashboard.
|
||||
There are two panel layout options:
|
||||
|
||||
- **Custom**: You can position and size panels individually. This is the default selection for a new dashboard. **Show/hide rules** are not supported.
|
||||
- **Auto grid**: Panels resize and fit automatically to create a uniform grid. You can't make manual changes to this layout. **Show/hide rules** are supported.
|
||||
|
||||
You can use both layouts in row or tab groupings.
|
||||
|
||||
### Auto grid layout
|
||||
|
||||
In the auto grid layout, panels are automatically sized and positioned as you add them.
|
||||
There are default parameters to constrain the layout, and you can update these to have more control over the display:
|
||||
|
||||
- **Min column width**: Choose from **Standard**, **Narrow**, **Wide**, or **Custom**, for which you can enter the minimum width in pixels.
|
||||
- **Max columns**: Set a number up to 10.
|
||||
- **Row height**: Choose from **Standard**, **Short**, **Tall**, and **Custom**, for which you can enter the row height in pixels.
|
||||
- **Fill screen**: Toggle the switch on to have the panel fill the entire height of the screen. If the panel is in a row, the **Fill screen** toggle for the row must also be enabled (refer to [grouping configuration options](#grouping-configuration-options)).
|
||||
|
||||
### Update panel layout
|
||||
|
||||
To update the panel layout, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the dashboard or the grouping that contains the panel layout you want to update.
|
||||
1. Click the **Dashboard options** icon to open the edit pane, if needed.
|
||||
1. Under **Layout**, select **Custom** or **Auto grid**.
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**
|
||||
|
||||
## Panel groupings
|
||||
|
||||
To help create meaningful sections in your dashboard, you can group panels into rows or tabs.
|
||||
Rows and tabs let you break up big dashboards or make one dashboard out of several smaller ones.
|
||||
|
||||
You can think of the dashboard as a series of nested containers: the dashboard is the largest container and it contains panels, rows, or tabs.
|
||||
Rows and tabs are the next largest containers, and they contain panels.
|
||||
|
||||
You can also nest:
|
||||
|
||||
- Rows in a row
|
||||
- Rows in a tab
|
||||
- Tabs in a row
|
||||
|
||||
You can nest up to two levels deep, which means a dashboard can have a maximum of four configuration levels:
|
||||
|
||||
- Dashboard
|
||||
- Grouping 1 - Row or tab
|
||||
- Grouping 2 - Row or tab
|
||||
- Panels
|
||||
|
||||
You can only have one type of grouping at each level.
|
||||
Inside of those groupings however, you have to freedom to add different elements.
|
||||
Also, custom and auto grid panel layouts are supported for rows and tabs, so each grouping can have a different panel layout.
|
||||
|
||||
<!-- {{< figure src="/media/docs/grafana/dashboards/screenshot-groupings-v12.4.png" alt="Dashboard with nested groupings" max-width="750px" >}} -->
|
||||
|
||||
The following sections describe:
|
||||
|
||||
- [Grouping configuration options](#grouping-configuration-options)
|
||||
- [Grouping layouts](#grouping-layouts)
|
||||
- [How to group panels](#group-panels)
|
||||
- [How to ungroup panels](#ungroup-panels)
|
||||
|
||||
### Grouping configuration options
|
||||
|
||||
The following table describes the options you can set for a row or tab:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ----------------| --------------------------------------------------------------------------- |
|
||||
| Title | Title of the row or tab. |
|
||||
| Fill screen | Toggle the switch on to make the row fill the screen. Rows only. |
|
||||
| Hide row header | Toggle the switch on to hide row headers in view mode. In edit mode, the row header is visible, but crossed out with the hidden icon next to it. Rows only. |
|
||||
| Layout | Select the layout. If the grouping contains another grouping, choose from **Rows** or **Tabs**. If the grouping contains panels, choose from **Custom** or **Auto grid**. For more information, refer to [Panel layouts](#panel-layouts) or [Grouping layouts](#grouping-layouts). |
|
||||
| Repeat options > [Repeat by variable](#configure-repeat-options) | Configure the dashboard to dynamically add panels, rows, or tabs based on the value of a variable. |
|
||||
| Show / hide rules > [Panel/Row/Tab visibility](#configure-showhide-rules) | Control whether or not panels, rows, or tabs are displayed based on variable values, a time range, or query results (panels only). |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Grouping layouts
|
||||
|
||||
When you have panels grouped into rows or tabs, the **Layout** options available depend on which dashboard element is selected and the nesting level of that element.
|
||||
|
||||
You can nest up to two levels deep, which means a dashboard can have a maximum of four configuration levels, with the following layout options:
|
||||
|
||||
- **Dashboard**: Layout options allow you to choose between rows or tabs.
|
||||
- **Grouping 1 (outer)**: Layout options allow you to choose between rows or tabs.
|
||||
- **Grouping 2 (inner)**: Layout options allow you to choose between custom and auto grid (refer to [Panel layouts](#panel-layouts)).
|
||||
- **Panels**: No layout options
|
||||
|
||||
You can switch between rows and tabs or update the panel layout by clicking the parent container and changing the layout selection.
|
||||
|
||||
### Group panels
|
||||
|
||||
To group panels, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Under a panel, click **Group panels**.
|
||||
|
||||
While grouping is typically used for multiple panels, you can start a grouping with just one panel.
|
||||
|
||||
1. Select **Group into row** or **Group into tab**.
|
||||
|
||||
All the panels are moved into the grouping, and a dotted blue line surrounds the row or tab.
|
||||
The edit pane opens, displaying the relevant options.
|
||||
|
||||
1. Set the [grouping configuration options](#grouping-configuration-options) in the edit pane.
|
||||
1. (Optional) Add one or both of the following:
|
||||
- A [nested grouping](#add-nested-groupings)
|
||||
- Other [groupings at the same level](#add-more-groupings-at-the-same-level).
|
||||
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
|
||||
#### Add nested groupings
|
||||
|
||||
To add a second-level (or nested) grouping, follow these steps:
|
||||
|
||||
1. In the existing grouping, under the panels, click **Group panels**.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-nest-group-v12.4.png" alt="Adding a nested grouping" max-width="500px" >}}
|
||||
|
||||
1. Click **Group into row** or **Group into tab** (**Group into tab** is only available if the parent grouping is a row).
|
||||
|
||||
The new grouping is added inside the first grouping, and the panels are moved into the nested grouping.
|
||||
The edit pane opens displaying the relevant options.
|
||||
|
||||
1. Set the configuration options for the nested grouping.
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
|
||||
#### Add more groupings at the same level
|
||||
|
||||
To add more first-level groupings, follow these steps:
|
||||
|
||||
1. On the dashboard, outside the existing first-level grouping, click **New row** or **New tab** (only one option will be available).
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-add-group-v12.4.png" alt="Adding a nested grouping" max-width="500px" >}}
|
||||
|
||||
1. Set the configuration options for the new grouping.
|
||||
1. Click **+ Add panel** to begin adding panels.
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
|
||||
### Ungroup panels
|
||||
|
||||
You can ungroup some or all of the dashboard groupings without losing your panels.
|
||||
Ungrouping behavior depends on whether you're working with first-level or nested groupings:
|
||||
|
||||
| Grouping | Action and outcome |
|
||||
| ---------- | -------------------------------------------------------------------------------------------------- |
|
||||
| Rows | **Ungroup rows** ungroups all first-level rows in the dashboard and all of their nested groupings. |
|
||||
| Tabs | **Ungroup tabs** ungroups all first-level tabs in the dashboard and all of their nested groupings. |
|
||||
| Row > row | **Ungroup rows** ungroups the nested row. |
|
||||
| Row > tabs | **Ungroup tabs** ungroups all the nested tabs in that row. Tabs in other rows are not affected. |
|
||||
| Tab > rows | **Ungroup rows** ungroups all the nested rows in that tab. Rows in other tabs are not affected. |
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-ungrouping-v12.4.png" alt="Dashboard with ungrouping behavior annotated" max-width="750px" >}}
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
If you delete a grouping, rather than ungrouping it, its panels are deleted as well.
|
||||
{{< /admonition >}}
|
||||
|
||||
To remove groupings, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. (Optional) Click the **Content outline** icon to quickly navigate to the grouping you want to remove.
|
||||
1. Do one of the following:
|
||||
- Click **Ungroup rows** or **Ungroup tabs** at the bottom of the dashboard to ungroup all rows or tabs, including any nested groupings.
|
||||
- Click in a grouping and click **Ungroup rows** or **Ungroup tabs** to ungroup only the tabs or rows nested in that grouping.
|
||||
- Click **+Add visualization** to configure all the elements of the new dashboard.
|
||||
- Select one of the suggested dashboards by clicking its **Use dashboard** button. This can be helpful when you're not sure how to most effectively visualize your data.
|
||||
The suggested dashboards are specific to your data source type (for example, Prometheus, Loki, or Elasticsearch). If there are more than three dashboard suggestions, you can click **View all** to see the rest of them.
|
||||
|
||||
|
||||
|
||||
{{< docs/public-preview product="Suggested dashboards" >}}
|
||||
|
||||
1. Complete the rest of the dashboard configuration. For more detailed steps, refer to [Create a dashboard](#create-a-dashboard), beginning at step five.
|
||||
|
||||
## Copy a dashboard
|
||||
|
||||
To copy a dashboard, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Open the dashboard you want to copy.
|
||||
1. Click **Edit** in top-right corner.
|
||||
1. Click the **Save dashboard** drop-down and select **Save as copy**.
|
||||
1. (Optional) Specify the name, folder, description, and whether or not to copy the original dashboard tags for the copied dashboard.
|
||||
|
||||
By default, the copied dashboard has the same name as the original dashboard with the word "Copy" appended and is in the same folder.
|
||||
|
||||
1. If you've ungrouped panels that were previously in different panel layouts, you'll be prompted to select a common layout type for all the panels; click **Convert to Auto grid** or **Convert to Custom**.
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
|
||||
## Configure repeat options
|
||||
## Configure repeating rows
|
||||
|
||||
You can configure Grafana to dynamically add panels, rows, or tabs to a dashboard based on the value of a variable.
|
||||
Variables dynamically change your queries across all panels, rows, or tabs in a dashboard.
|
||||
You can configure Grafana to dynamically add panels or rows to a dashboard based on the value of a variable. Variables dynamically change your queries across all rows in a dashboard. For more information about repeating panels, refer to [Configure repeating panels](ref:configure-repeating-panels).
|
||||
|
||||
This only applies to queries that include a multi-value variable.
|
||||
To see an example of repeating rows, refer to [Dashboard with repeating rows](https://play.grafana.org/d/000000153/repeat-rows). The example shows that you can also repeat rows if you have variables set with `Multi-value` or `Include all values` selected.
|
||||
|
||||
To configure repeats, follow these steps:
|
||||
**Before you begin:**
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the panel, row, or tab you want to update to open the edit pane, or click the **Dashboard options** icon to open it.
|
||||
- Ensure that the query includes a multi-value variable.
|
||||
|
||||
If the dashboard is large, open the **Content outline** and use it to navigate to the part of the dashboard you want to update.
|
||||
**To configure repeating rows:**
|
||||
|
||||
1. Expand the **Repeat options** section.
|
||||
1. Select the **Repeat by variable**.
|
||||
1. For panels in a custom layout, set the following options:
|
||||
1. Under **Repeat direction**, choose one of the following:
|
||||
- **Horizontal** - Arrange panels side-by-side. Grafana adjusts the width of a repeated panel. You can’t mix other panels on a row with a repeated panel.
|
||||
- **Vertical** - Arrange panels in a column. The width of repeated panels is the same as the original, repeated panel.
|
||||
1. If you selected **Horizontal**, select a value in the **Max per row** drop-down list to control the maximum number of panels that can be in a row.
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to work on.
|
||||
1. At the top of the dashboard, click **Add** and select **Row** in the drop-down.
|
||||
|
||||
1. (Optional) To provide context to dashboard users, add the variable name to the panel, row, or tab title.
|
||||
1. When you've finished setting the repeat option, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
If the dashboard is empty, you can click the **+ Add row** button in the middle of the dashboard.
|
||||
|
||||
### Repeating rows and tabs and the Dashboard special data source
|
||||
1. Hover over the row title and click the cog icon.
|
||||
1. In the **Row Options** dialog box, add a title and select the variable for which you want to add repeating rows.
|
||||
1. Click **Update**.
|
||||
|
||||
If a row includes panels using the special [Dashboard data source](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/datasources/#special-data-sources)—the data source that uses a result set from another panel in the same dashboard—then corresponding panels in repeated rows will reference the panel in the original row, not the ones in the repeated rows.
|
||||
The same behavior applies to tabs.
|
||||
To provide context to dashboard users, add the variable to the row title.
|
||||
|
||||
### Repeating rows and the Dashboard special data source
|
||||
|
||||
If a row includes panels using the special [Dashboard data source](ref:built-in-special-data-sources)—the data source that uses a result set from another panel in the same dashboard—then corresponding panels in repeated rows will reference the panel in the original row, not the ones in the repeated rows.
|
||||
|
||||
For example, in a dashboard:
|
||||
|
||||
@@ -427,196 +242,28 @@ For example, in a dashboard:
|
||||
- Repeating row, `Row 2`, includes `Panel 2A` and `Panel 2B`
|
||||
- `Panel 2B` references `Panel 1A`, not `Panel 2A`
|
||||
|
||||
## Show/hide rules
|
||||
|
||||
You can configure panels, rows, and tabs to be shown or hidden based on rules.
|
||||
For example, you can set a panel to be hidden if there's no data returned by a query or a tab to only be shown if a specific variable value is present.
|
||||
|
||||
There are three types of show/hide rules to choose from:
|
||||
|
||||
- [Query result](#query-result-rule)
|
||||
- [Template variable](#template-variable-rule)
|
||||
- [Time range less than](#time-range-less-than-rule)
|
||||
|
||||
For steps on how to create show/hide rules, refer to [Configure show/hide rules](#configure-showhide-rules).
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
You can only configure show/hide rules for panels in the **Auto grid** layout. Set the panel layout at the dashboard, row, or tab-level.
|
||||
{{< /admonition >}}
|
||||
|
||||
### Query result rule
|
||||
|
||||
Show or hide a panel based on whether or not the query returns any results.
|
||||
The rule provides **Has data** and **No data** options, so you can choose to show or hide the panel based on the presence or absence of data.
|
||||
|
||||
For example, if you have a dashboard with several panels and only want panels that return data to appear, set the rule as follows:
|
||||
|
||||
- Panel visibility > Show
|
||||
- Query result > Has data
|
||||
|
||||
Alternatively, you might also want to troubleshoot a dashboard with several panels to see which ones contain broken queries that aren't returning any results.
|
||||
In this case, you'd set the rule as follows:
|
||||
|
||||
- Panel visibility > Show
|
||||
- Query result > No data
|
||||
|
||||
### Template variable rule
|
||||
|
||||
Show or hide a panel, row, or tab dynamically based on the variable value.
|
||||
You can select any variable that's configured for the dashboard and choose from the following operators for maximum flexibility:
|
||||
|
||||
- Equals
|
||||
- Not equals
|
||||
- Matches (regular expression values)
|
||||
- Not matches (regular expression values)
|
||||
|
||||
You can [add more variables](#add-variables) if you need to without leaving the dashboard.
|
||||
|
||||
### Time range less than rule
|
||||
|
||||
Show or hide a panel, row, or tab if the dashboard time range is shorter than the selected time range.
|
||||
This ensures that as you change the time range of the dashboard, you only see data relevant to that time period.
|
||||
|
||||
For example, a dashboard is tracking adoption of a feature over time has the following setup:
|
||||
|
||||
- Dashboard time range is **Last 7 days**
|
||||
- One panel tracks weekly stats
|
||||
- One panel tracks daily stats
|
||||
|
||||
For the panel tracking weekly stats, a rule is set up to hide it if the dashboard time range is less than 7 days.
|
||||
For the panel tracking daily stats, a rule is set up to hide it if the dashboard time range is less 24 hours.
|
||||
This configuration ensures that these time-based panels are only displayed when enough time has passed to make them relevant.
|
||||
|
||||
For this rule type, you can select time ranges from **5 minutes** to **5 years**.
|
||||
|
||||
### Configure show/hide rules
|
||||
|
||||
To configure show/hide rules, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the panel, row, or tab you want to update to open the edit pane, or click the **Dashboard options** icon to open it.
|
||||
|
||||
If the dashboard is large, open the **Content outline** and use it to navigate to the part of the dashboard you want to update.
|
||||
|
||||
1. Expand the **Show / hide rules** section.
|
||||
1. Select **Show** or **Hide** to set whether the panel, row, or tab is shown or hidden based on the rules outcome.
|
||||
1. Click **+ Add rule**.
|
||||
1. Select a rule type:
|
||||
- **Query result**: Show or hide a panel based on query results. Choose from **Has data** and **No data**.
|
||||
- **Template variable**: Show or hide the panel, row, or tab dynamically based on the variable value. Select a variable and operator and enter a value.
|
||||
- **Time range less than**: Show or hide the panel, row, or tab if the dashboard time range is shorter than the selected time range. Select a time range from **5 minutes** to **5 years**.
|
||||
|
||||
1. If you've configured more than rule, under **Match rules**, select one of the following:
|
||||
- **Match all**: The panel, row, or tab is shown or hidden only if _all_ the rules are matched.
|
||||
- **Match any**: The panel, row, or tab is shown or hidden if _any_ of the rules are matched.
|
||||
|
||||
This option is only displayed if you add multiple rules.
|
||||
|
||||
1. When you've finished setting rules, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**
|
||||
|
||||
Hidden panels, rows, or tabs aren't visible when the dashboard is in view mode.
|
||||
In edit mode, hidden dashboard elements are displayed with an icon or overlay indicating this.
|
||||
|
||||
## Move a panel
|
||||
|
||||
To move a panel, follow these steps:
|
||||
You can place a panel on a dashboard in any location.
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Navigate to the panel you want to move.
|
||||
|
||||
If the dashboard is large, open the **Content outline** and use it to navigate to the panel.
|
||||
|
||||
1. Click the panel title and drag the panel to another row or tab, or to a new position on the dashboard.
|
||||
|
||||
If the dashboard has groupings, you can only move the panel to another grouping.
|
||||
|
||||
1. Click **Save**.
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to work on.
|
||||
1. Click **Edit** in the top-right corner.
|
||||
1. Click the panel title and drag the panel to the new location.
|
||||
1. Click **Save dashboard**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**
|
||||
1. Click **Exit edit**.
|
||||
|
||||
## Resize a panel
|
||||
|
||||
When your dashboard or grouping has a **Custom** layout, you can manually resize a panel.
|
||||
You can size a dashboard panel to suits your needs.
|
||||
|
||||
To resize a panel, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Navigate to the panel you want to resize.
|
||||
|
||||
If the dashboard is large, open the **Content outline** and use it to navigate to the panel.
|
||||
|
||||
1. Click and drag the lower-right corner of the panel to change the size of the panel.
|
||||
1. Click **Save**.
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to work on.
|
||||
1. Click **Edit** in the top-right corner.
|
||||
1. To adjust the size of the panel, click and drag the lower-right corner of the panel.
|
||||
1. Click **Save dashboard**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**
|
||||
|
||||
## Add variables
|
||||
|
||||
To add variables without leaving the dashboard, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click **+ Add variable** at the top of the dashboard.
|
||||
1. Choose a variable type from the list.
|
||||
1. Set the options for the variable.
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**
|
||||
|
||||
### Add variables using the content outline
|
||||
|
||||
You can also add variables without leaving the dashboard using the content outline.
|
||||
|
||||
To access the variables creation flow this way, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the **Content outline** icon.
|
||||
1. Click **Variables** in the outline.
|
||||
1. Click **+ Add variable**.
|
||||
1. Complete the rest of the steps to [add a variable without leaving the dashboard](#add-variables).
|
||||
|
||||
## Copy or duplicate dashboard elements
|
||||
|
||||
You can copy and paste or duplicate panels, rows, and tabs.
|
||||
|
||||
To copy or duplicate dashboard elements, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the panel, row, or tab you want to update to open the edit pane, or click the **Dashboard options** icon to open it.
|
||||
|
||||
If the dashboard is large, open the **Content outline** and use it to navigate to the part of the dashboard you want to update.
|
||||
|
||||
1. In the top-corner of the edit pane, click the **Copy or Duplicate** icon and do one of the following:
|
||||
- Click **Copy**.
|
||||
- Click **Duplicate**. The duplicated element is added next to the original one. Proceed to step 6.
|
||||
|
||||
1. If you selected **Copy**, navigate to the part of the dashboard where you want to add the copied element, and click **Paste panel**, **Paste row**, or **Paste tab**.
|
||||
1. Update the copied or duplicated element if needed.
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**
|
||||
|
||||
## Copy a dashboard
|
||||
|
||||
To make a copy of a dashboard, follow these steps:
|
||||
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Click **Edit**.
|
||||
1. Click the **Save** drop-down list and select **Save as copy**.
|
||||
1. (Optional) Specify the name, folder, description, and whether or not to copy the original dashboard tags for the copied dashboard.
|
||||
|
||||
By default, the copied dashboard has the same name as the original dashboard with the word "Copy" appended and is in the same folder.
|
||||
|
||||
1. Click **Save**.
|
||||
1. Click **Exit edit**.
|
||||
|
||||
@@ -0,0 +1,416 @@
|
||||
---
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- oss
|
||||
stage:
|
||||
- experimental
|
||||
_build:
|
||||
list: false
|
||||
noindex: true
|
||||
title: Create a dynamic dashboard
|
||||
description: Create and edit a dynamic dashboard
|
||||
weight: 900
|
||||
refs:
|
||||
built-in-special-data-sources:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#special-data-sources
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/#special-data-sources
|
||||
visualization-specific-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/visualizations/
|
||||
configure-standard-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-standard-options/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-standard-options/
|
||||
configure-value-mappings:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-value-mappings/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-value-mappings/
|
||||
generative-ai-features:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
configure-thresholds:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-thresholds/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-thresholds/
|
||||
data-sources:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/connect-externally-hosted/data-sources/
|
||||
add-a-data-source:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#add-a-data-source
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/datasources/#add-a-data-source
|
||||
about-users-and-permissions:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/administration/roles-and-permissions/
|
||||
visualizations-options:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/visualizations/
|
||||
configure-repeating-panels:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-panel-options/#configure-repeating-panels
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-panel-options/#configure-repeating-panels
|
||||
override-field-values:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/configure-overrides/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/configure-overrides/
|
||||
aliases:
|
||||
- ../../../dashboards/build-dashboards/create-dynamic-dashboard/ # /docs/grafana/next/dashboards/build-dashboards/create-dynamic-dashboard/
|
||||
---
|
||||
|
||||
# Create and edit dynamic dashboards
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
|
||||
Dynamic dashboards is an [experimental](https://grafana.com/docs/release-life-cycle/) feature. Engineering and on-call support is not available. Documentation is either limited or not provided outside of code comments. No SLA is provided. To get early access to this feature, request it through [this form](https://docs.google.com/forms/d/e/1FAIpQLSd73nQzuhzcHJOrLFK4ef_uMxHAQiPQh1-rsQUT2MRqbeMLpg/viewform?usp=dialog).
|
||||
|
||||
**Do not enable this feature in production environments as it may result in the irreversible loss of data.**
|
||||
|
||||
{{< /admonition >}}
|
||||
|
||||
Dashboards and panels allow you to show your data in visual form. Each panel needs at least one query to display a visualization.
|
||||
|
||||
## Before you begin
|
||||
|
||||
- Ensure that you have the proper permissions. For more information about permissions, refer to [About users and permissions](ref:about-users-and-permissions).
|
||||
- Identify the dashboard to which you want to add the panel.
|
||||
- Understand the query language of the target data source.
|
||||
- Ensure that data source for which you are writing a query has been added. For more information about adding a data source, refer to [Add a data source](ref:add-a-data-source) if you need instructions.
|
||||
|
||||
## Create a dashboard
|
||||
|
||||
To create a dashboard, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Click **New** and select **New Dashboard**.
|
||||
1. In the edit pane, enter the dashboard title and description.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-new-dashboard-v12.png" max-width="750px" alt="New dashboard" >}}
|
||||
|
||||
1. Under **Panel layout**, choose one of the following options:
|
||||
- **Custom** - Position and size panels manually. The default selection.
|
||||
- **Auto grid** - Panels are automatically resized to create a uniform grid based on the column and row settings.
|
||||
|
||||
1. Click **+ Add visualization**.
|
||||
1. In the dialog box that opens, do one of the following:
|
||||
- Select one of your existing data sources.
|
||||
- Select one of the Grafana [built-in special data sources](ref:built-in-special-data-sources).
|
||||
- Click **Configure a new data source** to set up a new one (Admins only).
|
||||
|
||||
{{< figure class="float-right" src="/media/docs/grafana/dashboards/screenshot-data-source-selector-10.0.png" max-width="800px" alt="Select data source modal" >}}
|
||||
|
||||
The **Edit panel** view opens with your data source selected.
|
||||
You can change the panel data source later using the drop-down in the **Query** tab of the panel editor if needed.
|
||||
|
||||
For more information about data sources, refer to [Data sources](ref:data-sources) for specific guidelines.
|
||||
|
||||
1. Write or construct a query in the query language of your data source.
|
||||
1. Click **Refresh** to query the data source.
|
||||
1. In the visualization list, select a visualization type.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-select-visualization-v12.png" max-width="350px" alt="Visualization selector" >}}
|
||||
|
||||
Grafana displays a preview of your query results with the visualization applied.
|
||||
|
||||
For more information about configuring individual visualizations, refer to [Visualizations options](ref:visualizations-options).
|
||||
|
||||
1. Under **Panel options**, enter a title and description for your panel or have Grafana create them using [generative AI features](ref:generative-ai-features).
|
||||
1. Refer to the following documentation for ways you can adjust panel settings.
|
||||
|
||||
While not required, most visualizations need some adjustment before they properly display the information that you need.
|
||||
- [Configure value mappings](ref:configure-value-mappings)
|
||||
- [Visualization-specific options](ref:visualization-specific-options)
|
||||
- [Override field values](ref:override-field-values)
|
||||
- [Configure thresholds](ref:configure-thresholds)
|
||||
- [Configure standard options](ref:configure-standard-options)
|
||||
|
||||
1. When you've finished editing your panel, click **Save**.
|
||||
|
||||
Alternatively, click **Back to dashboard** if you want to see your changes applied to the dashboard first. Then click **Save** when you're ready.
|
||||
|
||||
1. Enter a title and description for your dashboard if you haven't already or have Grafana create them using [generative AI features](ref:generative-ai-features).
|
||||
1. Select a folder, if applicable.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. To add more panels to the dashboard, click **Back to dashboard** and at the bottom-left corner of the dashboard, click **+ Add panel**.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-add-panel-v12.png" max-width="500px" alt="Add panel button" >}}
|
||||
|
||||
1. (Optional) In the edit pane, enter a title and description for the panel and set the panel transparency and repeat options, if applicable.
|
||||
1. Click **Configure** in either the edit pane or on the panel to the configuration process.
|
||||
1. When you've saved all the changes you want to make to the dashboard, click **Back to dashboard**.
|
||||
1. Toggle off the edit mode switch.
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
|
||||
Dynamic dashboards is an [experimental](https://grafana.com/docs/release-life-cycle/) feature. Engineering and on-call support is not available. Documentation is either limited or not provided outside of code comments. No SLA is provided. To get early access to this feature, request it through [this form](https://docs.google.com/forms/d/e/1FAIpQLSd73nQzuhzcHJOrLFK4ef_uMxHAQiPQh1-rsQUT2MRqbeMLpg/viewform?usp=dialog).
|
||||
|
||||
**Do not enable this feature in production environments as it may result in the irreversible loss of data.**
|
||||
|
||||
{{< /admonition >}}
|
||||
|
||||
## Group panels
|
||||
|
||||
To help create meaningful sections in your dashboard, you can group panels into rows or tabs.
|
||||
Rows and tabs let you break up big dashboards or make one dashboard out of several smaller ones.
|
||||
You can nest tabs and rows within each other or themselves.
|
||||
Also, tabs are included in the dashboard URL.
|
||||
|
||||
The following sections describe the configuration options for adding tabs and rows.
|
||||
While grouping is meant for multiple panels, you can start a grouping with just one panel.
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
1. At the bottom-left corner of the dashboard, click **Group panels**.
|
||||
1. Select **Group into row** or **Group into tab**.
|
||||
|
||||
A dotted line surrounds the panels and the **Row** or **Tab** edit pane is displayed on the right side of the dashboard.
|
||||
|
||||
1. Set the [grouping configuration options](#grouping-configuration-options).
|
||||
1. When you're finished, click **Save** at the top-right corner of the dashboard.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
|
||||
### Grouping configuration options
|
||||
|
||||
The following table describes the options you can set for a row.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
| Option | Description |
|
||||
| ------ | ----------- |
|
||||
| Title | Title of the row or tab. |
|
||||
| Fill screen | Toggle the switch on to make the row fill the screen. Only applies to rows. |
|
||||
| Hide row header | Toggle the switch on to hide the header. In edit mode, the row header is visible, but crossed out with the hidden icon next to it. Only applies to rows. |
|
||||
| Group layout | Select the grouping option, between **Rows** and **Tabs**. Only available when there's a nested grouping and applies to the nested grouping. |
|
||||
| Panel layout | Select whether panels are sized and positioned manually, **Custom**, or automatically, **Auto grid**. Only available when a grouping contains panels. |
|
||||
| Repeat options > [Repeat by variable](#configure-repeat-options) | Configure the dashboard to dynamically add rows or tabs based on the value of a variable. |
|
||||
| Show / hide rules > [Row/Tab visibility](#configure-showhide-rules) | Control whether or not rows or tabs are displayed based on variables or a time range. |
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Configure repeat options
|
||||
|
||||
<!-- previous heading "Configure repeating rows" -->
|
||||
|
||||
You can configure Grafana to dynamically add panels, rows, or tabs to a dashboard based on the value of that variable.
|
||||
Variables dynamically change your queries across all rows in a dashboard.
|
||||
|
||||
This only applies to queries that include a multi-value variable.
|
||||
|
||||
<!-- To see an example of repeating rows, refer to [Dashboard with repeating rows](https://play.grafana.org/d/000000153/repeat-rows).
|
||||
The example shows that you can also repeat rows if you have variables set with `Multi-value` or `Include all values` selected.
|
||||
Might be good to update this Play example -->
|
||||
|
||||
To configure repeats, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
|
||||
The **Dashboard** edit pane opens on the right side of the dashboard.
|
||||
|
||||
1. Click in the panel, row, or tab you want to work with to bring it into focus and display the associated options in the edit pane.
|
||||
1. Expand the **Repeat options** section.
|
||||
1. Select the **Repeat by variable**.
|
||||
1. For panels only, set the following options:
|
||||
- Under **Repeat direction**, choose one of the following:
|
||||
- **Horizontal** - Arrange panels side-by-side. Grafana adjusts the width of a repeated panel. You can’t mix other panels on a row with a repeated panel.
|
||||
- **Vertical** - Arrange panels in a column. The width of repeated panels is the same as the original, repeated panel.
|
||||
|
||||
- If you selected **Horizontal**, select a value in the **Max per row** drop-down list to control the maximum number of panels that can be in a row.
|
||||
|
||||
1. (Optional) To provide context to dashboard users, add the variable name to the panel, row, or tab title.
|
||||
1. When you've finished setting the repeat option, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Toggle off the edit mode switch.
|
||||
|
||||
### Repeating rows and tabs and the Dashboard special data source
|
||||
|
||||
<!-- is this next section still true? -->
|
||||
|
||||
If a row includes panels using the special [Dashboard data source](ref:built-in-special-data-sources)—the data source that uses a result set from another panel in the same dashboard—then corresponding panels in repeated rows will reference the panel in the original row, not the ones in the repeated rows.
|
||||
The same behavior applies to tabs.
|
||||
|
||||
For example, in a dashboard:
|
||||
|
||||
- `Row 1` includes `Panel 1A` and `Panel 1B`
|
||||
- `Panel 1B` uses the results from `Panel 1A` by way of the `-- Dashboard --` data source
|
||||
- Repeating row, `Row 2`, includes `Panel 2A` and `Panel 2B`
|
||||
- `Panel 2B` references `Panel 1A`, not `Panel 2A`
|
||||
|
||||
## Configure show/hide rules
|
||||
|
||||
You can configure panels, rows, and tabs to be shown or hidden based on rules.
|
||||
For example, you might want to set a panel to be hidden if there's no data returned by a query or a tab to only be shown based on a variable being present.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
You can only configure show/hide rules for panels when the dashboard is using the **Auto grid** panel layout.
|
||||
{{< /admonition >}}
|
||||
|
||||
To configure show/hide rules, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
|
||||
The **Dashboard** edit pane opens on the right side of the dashboard.
|
||||
|
||||
1. Click in the panel, row, or tab you want to work with to bring it into focus and display the associated options in the edit pane.
|
||||
1. Expand the **Show / hide rules** section.
|
||||
1. Select **Show** or **Hide** to set whether the panel, row, or tab is shown or hidden based on the rules outcome.
|
||||
1. Click **+ Add rule**.
|
||||
1. Select a rule type:
|
||||
- **Query result** - Show or hide a panel based on query results. Choose from **Has data** and **No data**. For panels only.
|
||||
- **Template variable** - Show or hide the panel, row, or tab dynamically based on the variable value. Select a variable and operator and enter a value.
|
||||
- **Time range less than** - Show or hide the panel, row, or tab if the dashboard time range is shorter than the selected time frame. Select or enter a time range.
|
||||
|
||||
1. Configure the rule.
|
||||
1. Under **Match rules**, select one of the following:
|
||||
- **Match all** - The panel, row, or tab is shown or hidden only if _all_ the rules are matched.
|
||||
- **Match any** - The panel, row, or tab is shown or hidden if _any_ of the rules are matched.
|
||||
|
||||
This option is only displayed if you add multiple rules.
|
||||
|
||||
1. When you've finished setting rules, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Toggle off the edit mode switch.
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
|
||||
Dynamic dashboards is an [experimental](https://grafana.com/docs/release-life-cycle/) feature. Engineering and on-call support is not available. Documentation is either limited or not provided outside of code comments. No SLA is provided. To get early access to this feature, request it through [this form](https://docs.google.com/forms/d/e/1FAIpQLSd73nQzuhzcHJOrLFK4ef_uMxHAQiPQh1-rsQUT2MRqbeMLpg/viewform?usp=dialog).
|
||||
|
||||
**Do not enable this feature in production environments as it may result in the irreversible loss of data.**
|
||||
|
||||
{{< /admonition >}}
|
||||
|
||||
## Edit dashboards
|
||||
|
||||
When the dashboard is in edit mode, the edit pane that opens displays options associated with the part of the dashboard that it's in focus.
|
||||
For example, if you click in the area of a panel, row, or tab, that area comes into focus and the edit pane shows the options for that area:
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-edit-pane-focus-v12.png" max-width="750px" alt="Dashboard with a panel in focus" >}}
|
||||
|
||||
- For rows and tabs, all of the available options are in the edit pane.
|
||||
- For panels, high-level options are in the edit pane and further configuration options are in the **Edit panel** view.
|
||||
- For dashboards, high-level options are in the edit pane and further configuration options are in the **Settings** page.
|
||||
|
||||
To edit dashboards, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
|
||||
The **Dashboard** edit pane opens on the right side of the dashboard.
|
||||
|
||||
1. Click in the area you want to work with to bring it into focus and display the associated options in the edit pane.
|
||||
1. Do one of the following:
|
||||
- For rows or tabs, make the required changes using the edit pane.
|
||||
- For panels, update the panel title, description, repeat options or show/hide rules in the edit pane. For more changes, click **Configure** and continue in **Edit panel** view.
|
||||
- For dashboards, update the dashboard title, description, grouping or panel layout. For more changes, click the settings (gear) icon in the top-right corner.
|
||||
|
||||
1. When you've finished making changes, click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Toggle off the edit mode switch.
|
||||
|
||||
### Undo and redo
|
||||
|
||||
When a dashboard is in edit mode, you can undo and redo changes you've made using the buttons on the toolbar:
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-undo-redo-icons-v12.0.png" max-width="500px" alt="Undo and redo buttons" >}}
|
||||
|
||||
When you've made a change and hover the cursor over the buttons, the tooltip displays the change you're about to undo or redo.
|
||||
Also, you can continue undoing or redoing as many changes as you need:
|
||||
|
||||
{{< video-embed src="/media/docs/grafana/dashboards/screen-record-undo-redo-v12.0.mp4" >}}
|
||||
|
||||
The undo and redo buttons are only available at the dashboard level and only apply to changes made there, such as dashboard layout and grouping and high-level dashboard or panel updates.
|
||||
They aren't visible and don't apply when you're configuring a panel or making changes in the dashboard settings.
|
||||
|
||||
{{< admonition type="note" >}}
|
||||
Not all dashboard edit actions can be undone or redone yet.
|
||||
{{< /admonition >}}
|
||||
|
||||
## Move or resize a panel
|
||||
|
||||
<!-- previous headings Move a panel & Resize a panel -->
|
||||
|
||||
When you're dashboard has a **Custom** layout, you can resize or move a panel to any location on the dashboard.
|
||||
|
||||
To move or resize, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
1. Do one of the following:
|
||||
- Click the panel title and drag the panel to the new location.
|
||||
- Click and drag the lower-right corner of the panel to change the size of the panel.
|
||||
|
||||
1. Click **Save**.
|
||||
1. (Optional) Enter a description of the changes you've made.
|
||||
1. Click **Save**.
|
||||
1. Toggle off the edit mode switch.
|
||||
|
||||
## Navigate using the dashboard outline
|
||||
|
||||
The dashboard **Outline** provides a tree-like structure that shows you all of the parts of your dashboard and their relationships to each other including panels, rows, tabs, and variables.
|
||||
The outline also lets you quickly navigate the dashboard so that you don't have to spend time finding a particular element to work with it.
|
||||
By default, the outline is collapsed except for the part that's currently in focus.
|
||||
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-dashboard-outline-v12.png" max-width="750px" alt="Dashboard with outline open showing panel in focus" >}}
|
||||
|
||||
To navigate the dashboard using the outline, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
|
||||
The **Dashboard** edit pane opens on the right side of the dashboard.
|
||||
|
||||
1. In the edit pane, expand the **Outline** section.
|
||||
1. Expand the outline to find the dashboard part to which you want to navigate.
|
||||
1. Click the tree item to navigate that part of the dashboard.
|
||||
|
||||
## Copy a dashboard
|
||||
|
||||
To make a copy of a dashboard, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Navigate to the dashboard you want to update.
|
||||
1. Toggle on the edit mode switch.
|
||||
1. Click the **Save** drop-down and select **Save as copy**.
|
||||
1. (Optional) Specify the name, folder, description, and whether or not to copy the original dashboard tags for the copied dashboard.
|
||||
|
||||
By default, the copied dashboard has the same name as the original dashboard with the word "Copy" appended and is in the same folder.
|
||||
|
||||
1. Click **Save**.
|
||||
|
||||
{{< admonition type="caution" >}}
|
||||
|
||||
Dynamic dashboards is an [experimental](https://grafana.com/docs/release-life-cycle/) feature. Engineering and on-call support is not available. Documentation is either limited or not provided outside of code comments. No SLA is provided. To get early access to this feature, request it through [this form](https://docs.google.com/forms/d/e/1FAIpQLSd73nQzuhzcHJOrLFK4ef_uMxHAQiPQh1-rsQUT2MRqbeMLpg/viewform?usp=dialog).
|
||||
|
||||
**Do not enable this feature in production environments as it may result in the irreversible loss of data.**
|
||||
|
||||
{{< /admonition >}}
|
||||
@@ -3,26 +3,21 @@ keywords:
|
||||
- grafana
|
||||
- dashboard
|
||||
- template
|
||||
- suggestions
|
||||
labels:
|
||||
products:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
menuTitle: Create template and suggested dashboards
|
||||
title: Create dashboards from templates and suggestions
|
||||
description: Learn how to create dashboards from templates and suggestions
|
||||
menuTitle: Create template dashboards
|
||||
title: Create dashboards from templates
|
||||
description: Learn how to create dashboards from templates
|
||||
weight: 3
|
||||
---
|
||||
|
||||
# Create dashboards from templates and suggestions
|
||||
|
||||
Grafana provides alternative ways to start building a dashboard.
|
||||
|
||||
## Create dashboards from templates
|
||||
|
||||
{{< docs/public-preview product="Dashboard templates" >}}
|
||||
|
||||
# Create dashboards from templates
|
||||
|
||||
Grafana provides a variety of pre-built dashboard templates that you can use to quickly set up visualizations for your data. These dashboards use sample data, which you can replace with your own data, making it easier to get started with monitoring and analysis.
|
||||
|
||||
The templates provide standardized dashboard layouts designed to help you answer engineering or business questions consistently. For instance, the DORA template allows all teams within an organization to measure delivery performance using a widely adopted industry framework.
|
||||
@@ -53,23 +48,3 @@ To create a dashboard from a template, follow these steps:
|
||||
{{< figure src="/media/docs/grafana/dashboards/screenshot-remove-banner-v12.3.png" max-width="750px" alt="Removing the sample data banner panel" >}}
|
||||
|
||||
1. Click **Save dashboard**.
|
||||
|
||||
## Create dashboards from suggestions
|
||||
|
||||
{{< docs/public-preview product="Suggested dashboards" >}}
|
||||
|
||||
You can start the process of creating a dashboard directly from a data source rather than from the **Dashboards** page, which gives you access to suggestions based on the data source.
|
||||
|
||||
To begin building a dashboard directly from a data source, follow these steps:
|
||||
|
||||
1. Navigate to **Connections > Data sources**.
|
||||
1. On the row of the data source for which you want to build a dashboard, click **Build a dashboard**.
|
||||
|
||||
The empty dashboard page opens.
|
||||
|
||||
1. Select one of the suggested dashboards by clicking its **Use dashboard** button. This can be helpful when you're not sure how to most effectively visualize your data.
|
||||
The suggested dashboards are specific to your data source type (for example, Prometheus, Loki, or Elasticsearch). If there are more than three dashboard suggestions, you can click **View all** to see the rest of them.
|
||||
|
||||
|
||||
|
||||
1. Complete the rest of the dashboard configuration. For more detailed steps, refer to [Create a dashboard](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/build-dashboards/create-dashboard/), beginning at step five.
|
||||
|
||||
@@ -85,8 +85,7 @@ Once you've added a dashboard link, it appears in the upper right corner of your
|
||||
Add links to other dashboards at the top of your current dashboard.
|
||||
|
||||
1. In the dashboard you want to link, click **Edit**.
|
||||
1. In the sidebar, click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Click **Settings**.
|
||||
1. Go to the **Links** tab and then click **Add dashboard link**.
|
||||
|
||||
The default link type is **Dashboards**.
|
||||
@@ -110,8 +109,7 @@ Add links to other dashboards at the top of your current dashboard.
|
||||
Add a link to a URL at the top of your current dashboard. You can link to any available URL, including dashboards, panels, or external sites. You can even control the time range to ensure the user is zoomed in on the right data in Grafana.
|
||||
|
||||
1. In the dashboard you want to link, click **Edit**.
|
||||
1. In the sidebar, click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Click **Settings**.
|
||||
1. Go to the **Links** tab and then click **Add dashboard link**.
|
||||
1. In the **Type** drop-down, select **Link**.
|
||||
1. In the **URL** field, enter the URL to which you want to link.
|
||||
@@ -134,8 +132,7 @@ Add a link to a URL at the top of your current dashboard. You can link to any av
|
||||
To edit, duplicate, or delete dashboard link, follow these steps:
|
||||
|
||||
1. In the dashboard you want to link, click **Edit**.
|
||||
1. In the sidebar, click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Click **Settings**.
|
||||
1. Go to the **Links** tab.
|
||||
1. Do one of the following:
|
||||
- **Edit** - Click the name of the link and update the link settings.
|
||||
|
||||
@@ -14,7 +14,7 @@ labels:
|
||||
- cloud
|
||||
- enterprise
|
||||
- oss
|
||||
menuTitle: Manage version history
|
||||
menutitle: Manage version history
|
||||
title: Manage dashboard version history
|
||||
description: View and compare previous versions of your dashboard
|
||||
weight: 400
|
||||
@@ -32,9 +32,8 @@ The dashboard version history feature lets you compare and restore to previously
|
||||
|
||||
To compare two dashboard versions, follow these steps:
|
||||
|
||||
1. Click **Edit**.
|
||||
1. In the sidebar, click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Click **Edit** in the top-right corner of the dashboard.
|
||||
1. Click **Settings**.
|
||||
1. Go to the **Versions** tab.
|
||||
1. Select the two dashboard versions that you want to compare.
|
||||
1. Click **Compare versions** to view the diff between the two versions.
|
||||
@@ -50,9 +49,8 @@ When you're comparing versions, if one of the versions you've selected is the la
|
||||
|
||||
To restore to a previously saved dashboard version, follow these steps:
|
||||
|
||||
1. Click **Edit**.
|
||||
1. Click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Click **Edit** in the top-right corner of the dashboard.
|
||||
1. Click **Settings**.
|
||||
1. Go to the **Versions** tab.
|
||||
1. Click the **Restore** button next to the version.
|
||||
|
||||
|
||||
@@ -50,9 +50,8 @@ The dashboard settings page allows you to:
|
||||
|
||||
To access the dashboard setting page:
|
||||
|
||||
1. Click **Edit**.
|
||||
1. In the sidebar, click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Click **Edit** in the top-right corner of the dashboard.
|
||||
1. Click **Settings**.
|
||||
|
||||
## Modify dashboard time settings
|
||||
|
||||
|
||||
@@ -59,11 +59,11 @@ There are currently three dashboard JSON schema models:
|
||||
|
||||
To access the JSON representation of a dashboard:
|
||||
|
||||
1. Click **Edit**.
|
||||
1. In the sidebar, click the **Dashboard options** icon.
|
||||
1. In the edit pane, click **Settings**.
|
||||
1. Go to the **JSON Model** tab.
|
||||
1. When you've finished viewing the JSON, click **Back to dashboard** and **Exit edit**.
|
||||
1. Click **Edit** in the top-right corner of the dashboard.
|
||||
1. Click the gear icon in the right sidebar and click **Settings** in the secondary sidebar.
|
||||
1. Select the **JSON Model** tab.
|
||||
1. Update the JSON structure as needed.
|
||||
1. Click **Save changes**.
|
||||
|
||||
## Classic model
|
||||
|
||||
|
||||
@@ -213,7 +213,7 @@ To export a dashboard in its current state as a PDF, follow these steps:
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Open the dashboard you want to export.
|
||||
1. Click the **Export** drop-down in the sidebar and select **Export as PDF**.
|
||||
1. Click the **Export** drop-down in the top-right corner and select **Export as PDF**.
|
||||
1. In the **Export dashboard PDF** drawer that opens, select either **Landscape** or **Portrait** for the PDF orientation.
|
||||
1. Select either **Grid** or **Simple** for the PDF layout.
|
||||
1. Set the **Zoom** level; zoom in to enlarge text, or zoom out to see more data (like table columns) per panel.
|
||||
@@ -229,7 +229,7 @@ Export a Grafana JSON file that contains everything you need, including layout,
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Open the dashboard you want to export.
|
||||
1. Click the **Export** drop-down list in the sidebar and select **Export as code**.
|
||||
1. Click the **Export** drop-down list in the top-right corner and select **Export as code**.
|
||||
|
||||
The **Export dashboard** drawer opens.
|
||||
|
||||
@@ -255,7 +255,7 @@ To export a dashboard in its current state as a PNG image file, follow these ste
|
||||
|
||||
1. Click **Dashboards** in the main menu.
|
||||
1. Open the dashboard you want to export.
|
||||
1. Click the **Export** drop-down list in the sidebar and select **Export as image**.
|
||||
1. Click the **Export** drop-down list in the top-right corner and select **Export as image**.
|
||||
|
||||
The **Export as image** drawer opens.
|
||||
|
||||
|
||||
@@ -21,144 +21,67 @@ menuTitle: Use dashboards
|
||||
title: Use dashboards
|
||||
description: Learn about the features of a Grafana dashboard
|
||||
weight: 100
|
||||
image_maps:
|
||||
- key: annotated-dashboard
|
||||
src: /media/docs/grafana/dashboards/screenshot-ann-dashboards-v12.4.png
|
||||
alt: An annotated image of a Grafana dashboard
|
||||
points:
|
||||
- x_coord: 8
|
||||
y_coord: 5
|
||||
content: |
|
||||
**Dashboard folder**
|
||||
|
||||
Click the dashboard folder name to access the folder and perform other [folder management tasks](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/manage-dashboards/).
|
||||
- x_coord: 17
|
||||
y_coord: 5
|
||||
content: |
|
||||
**Dashboard title**
|
||||
|
||||
Create your own dashboard titles or have Grafana create them for you using [generative AI features](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards).
|
||||
- x_coord: 23
|
||||
y_coord: 5
|
||||
content: |
|
||||
**Mark as favorite**
|
||||
|
||||
Mark the dashboard as one of your favorites to include it in your list of **Starred** dashboards in the main menu.
|
||||
- x_coord: 27
|
||||
y_coord: 5
|
||||
content: |
|
||||
**Public label**
|
||||
|
||||
[Externally shared dashboards](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/share-dashboards-panels/shared-dashboards/), it's marked with the **Public** label.
|
||||
- x_coord: 84
|
||||
y_coord: 5
|
||||
content: |
|
||||
**Grafana Assistant**
|
||||
|
||||
[Grafana Assistant](https://grafana.com/docs/grafana-cloud/machine-learning/assistant/introduction/) combines large language models with Grafana-integrated tools.
|
||||
- x_coord: 89
|
||||
y_coord: 5
|
||||
content: |
|
||||
**Invite new users**
|
||||
|
||||
Invite new users to join your Grafana organization.
|
||||
- x_coord: 32
|
||||
y_coord: 23
|
||||
content: |
|
||||
**Variables**
|
||||
|
||||
Use [variables](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/variables/), including ad hoc filters, to create more interactive and dynamic dashboards.
|
||||
- x_coord: 45
|
||||
y_coord: 23
|
||||
content: |
|
||||
**Dashboard links**
|
||||
|
||||
Link to other dashboards, panels, and external websites. Learn more about [dashboard links](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/build-dashboards/manage-dashboard-links/).
|
||||
- x_coord: 59
|
||||
y_coord: 29
|
||||
content: |
|
||||
**Current dashboard time range and time picker**
|
||||
|
||||
Select [relative time range](#relative-time-range) options or set custom [absolute time ranges](#absolute-time-range).
|
||||
You can also change the **Timezone** and **Fiscal year** settings by clicking the **Change time settings** button.
|
||||
- x_coord: 67
|
||||
y_coord: 29
|
||||
content: |
|
||||
**Time range zoom out**
|
||||
|
||||
Click to zoom out the time range. Learn more about [common time range controls](#common-time-range-controls).
|
||||
- x_coord: 73
|
||||
y_coord: 29
|
||||
content: |
|
||||
**Refresh dashboard**
|
||||
|
||||
Trigger queries and refresh dashboard data.
|
||||
- x_coord: 78
|
||||
y_coord: 29
|
||||
content: |
|
||||
**Auto refresh control**
|
||||
|
||||
Select a dashboard auto refresh time interval.
|
||||
- x_coord: 85
|
||||
y_coord: 29
|
||||
content: |
|
||||
**Share dashboard**
|
||||
|
||||
Access [dashboard sharing](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/share-dashboards-panels/) options.
|
||||
- x_coord: 98
|
||||
y_coord: 22.5
|
||||
content: |
|
||||
**Edit**
|
||||
|
||||
Enter edit mode, so you can make changes and access dashboard settings.
|
||||
- x_coord: 98
|
||||
y_coord: 31
|
||||
content: |
|
||||
**Export**
|
||||
|
||||
Access [dashboard exporting](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/share-dashboards-panels/#export-dashboards) options.
|
||||
- x_coord: 98
|
||||
y_coord: 39
|
||||
content: |
|
||||
**Content outline**
|
||||
|
||||
The outline provides a tree-like structure that lets you quickly navigate the dashboard.
|
||||
- x_coord: 98
|
||||
y_coord: 47
|
||||
content: |
|
||||
**Dashboard insights**
|
||||
|
||||
View [dashboard analytics](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/assess-dashboard-usage/) including information about users, activity, query counts.
|
||||
- x_coord: 11.5
|
||||
y_coord: 30
|
||||
content: |
|
||||
**Row title**
|
||||
|
||||
A row is one way you can [group panels](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/build-dashboards/create-dashboard/#panel-groupings) in a dashboard.
|
||||
- x_coord: 20
|
||||
y_coord: 36
|
||||
content: |
|
||||
**Tab title**
|
||||
|
||||
A tab is one way you can [group panels](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/build-dashboards/create-dashboard/#panel-groupings) in a dashboard.
|
||||
- x_coord: 21
|
||||
y_coord: 45
|
||||
content: |
|
||||
**Panel title**
|
||||
|
||||
Create your own panel titles or have Grafana create them for you using [generative AI features](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards).
|
||||
- x_coord: 27
|
||||
y_coord: 63
|
||||
content: |
|
||||
**Dashboard panel**
|
||||
|
||||
The [panel](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/panels-visualizations/panel-overview/) is the primary building block of a dashboard.
|
||||
- x_coord: 19.5
|
||||
y_coord: 91
|
||||
content: |
|
||||
**Panel legend**
|
||||
|
||||
Change series colors as well as y-axis and series visibility directly from the legend.
|
||||
refs:
|
||||
dashboard-analytics:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/assess-dashboard-usage/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/assess-dashboard-usage/
|
||||
generative-ai-features:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
dashboard-settings:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/modify-dashboard-settings/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/modify-dashboard-settings/
|
||||
repeating-rows:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/#configure-repeating-rows
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/#configure-repeating-rows
|
||||
variables:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/variables/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/variables/
|
||||
dashboard-folders:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/manage-dashboards/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/manage-dashboards/
|
||||
sharing:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/share-dashboards-panels/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/share-dashboards-panels/
|
||||
dashboard-links:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/manage-dashboard-links/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/manage-dashboard-links/
|
||||
panel-overview:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/panels-visualizations/panel-overview/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/panels-visualizations/panel-overview/
|
||||
export-dashboards:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/share-dashboards-panels/#export-dashboards
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/share-dashboards-panels/#export-dashboards
|
||||
add-ad-hoc-filters:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/variables/add-template-variables/#add-ad-hoc-filters
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/variables/add-template-variables/#add-ad-hoc-filters
|
||||
shared-dashboards:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/share-dashboards-panels/shared-dashboards/
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/share-dashboards-panels/shared-dashboards/
|
||||
---
|
||||
|
||||
# Use dashboards
|
||||
@@ -172,9 +95,32 @@ This topic provides an overview of dashboard features and shortcuts, and describ
|
||||
The dashboard user interface provides a number of features that you can use to customize the presentation of your data.
|
||||
|
||||
The following image and descriptions highlight all dashboard features.
|
||||
Hover your cursor over a number to display information about the dashboard element.
|
||||
|
||||
{{< image-map key="annotated-dashboard" >}}
|
||||
|
||||
|
||||
1. **Dashboard folder** - When you click the dashboard folder name, you can search for other dashboards contained in the folder and perform other [folder management tasks](ref:dashboard-folders).
|
||||
1. **Dashboard title** - You can create your own dashboard titles or have Grafana create them for you using [generative AI features](ref:generative-ai-features).
|
||||
1. **Kiosk mode** - Click to display the dashboard on a large screen such as a TV or a kiosk. Kiosk mode hides the main menu, navbar, and dashboard controls. Learn more about kiosk mode in our [How to Create Kiosks to Display Dashboards on a TV blog post](https://grafana.com/blog/2019/05/02/grafana-tutorial-how-to-create-kiosks-to-display-dashboards-on-a-tv/). Press `Esc` to leave kiosk mode.
|
||||
1. **Mark as favorite** - Mark the dashboard as one of your favorites so it's included in your list of **Starred** dashboards in the main menu.
|
||||
1. **Public label** - When you [share a dashboard externally](ref:shared-dashboards), it's marked with the **Public** label.
|
||||
1. **Dashboard insights** - Click to view analytics about your dashboard including information about users, activity, query counts. Learn more about [dashboard analytics](ref:dashboard-analytics).
|
||||
1. **Edit** - Click to leave view-only mode and enter edit mode, where you can make changes directly to the dashboard and access dashboard settings, as well as several panel editing functions.
|
||||
1. **Export** - Access [dashboard exporting](ref:export-dashboards) options.
|
||||
1. **Share dashboard** - Access several [dashboard sharing](ref:sharing) options.
|
||||
1. **Variables** - Use [variables](ref:variables), including ad hoc filters, to create more interactive and dynamic dashboards.
|
||||
1. **Dashboard links** - Link to other dashboards, panels, and external websites. Learn more about [dashboard links](ref:dashboard-links).
|
||||
1. **Current dashboard time range and time picker** - Click to select [relative time range](#relative-time-range) options and set custom [absolute time ranges](#absolute-time-range).
|
||||
- You can change the **Timezone** and **Fiscal year** settings from the time range controls by clicking the **Change time settings** button.
|
||||
- Time settings are saved on a per-dashboard basis.
|
||||
1. **Time range zoom out** - Click to zoom out the time range. Learn more about how to use [common time range controls](#common-time-range-controls).
|
||||
1. **Refresh dashboard** - Click to immediately trigger queries and refresh dashboard data.
|
||||
1. **Auto refresh control** - Click to select a dashboard auto refresh time interval.
|
||||
1. **Dashboard row** - A dashboard row is a logical divider within a dashboard that groups panels together.
|
||||
- Rows can be collapsed or expanded allowing you to hide parts of the dashboard.
|
||||
- Panels inside a collapsed row do not issue queries.
|
||||
- Use [repeating rows](ref:repeating-rows) to dynamically create rows based on a template variable.
|
||||
1. **Dashboard panel** - The [panel](ref:panel-overview) is the primary building block of a dashboard.
|
||||
1. **Panel legend** - Change series colors as well as y-axis and series visibility directly from the legend.
|
||||
|
||||
## Keyboard shortcuts
|
||||
|
||||
@@ -188,7 +134,7 @@ Grafana has a number of keyboard shortcuts available. Press `?` on your keyboard
|
||||
- `Ctrl+K`: Opens the command palette.
|
||||
- `Esc`: Exits panel when in full screen view or edit mode. Also returns you to the dashboard from dashboard settings.
|
||||
|
||||
### Focused panel
|
||||
**Focused panel**
|
||||
|
||||
By hovering over a panel with the mouse you can use some shortcuts that will target that panel.
|
||||
|
||||
@@ -339,7 +285,7 @@ Selecting the **Auto** interval schedules a refresh based on the query time rang
|
||||
|
||||
## Filter dashboard data
|
||||
|
||||
Once you've [added an ad hoc filter](https://grafana.com/docs/grafana/<GRAFANA_VERSION>/visualizations/dashboards/variables/add-template-variables/#add-ad-hoc-filters) in the dashboard settings, you can create label/value filter pairs on the dashboard.
|
||||
Once you've [added an ad hoc filter](ref:add-ad-hoc-filters) in the dashboard settings, you can create label/value filter pairs on the dashboard.
|
||||
These filters are applied to all metric queries that use the specified data source and to all panels on the dashboard.
|
||||
|
||||
To filter dashboard data, follow these steps:
|
||||
|
||||
@@ -35,9 +35,9 @@ refs:
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/manage-dashboard-links/#panel-links
|
||||
configure-repeating-rows:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/#configure-repeat-options
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/build-dashboards/create-dashboard/#configure-repeating-rows
|
||||
- pattern: /docs/grafana-cloud/
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/#configure-repeat-options
|
||||
destination: /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard/#configure-repeating-rows
|
||||
set-up-generative-ai-features-for-dashboards:
|
||||
- pattern: /docs/grafana/
|
||||
destination: /docs/grafana/<GRAFANA_VERSION>/dashboards/manage-dashboards/#set-up-generative-ai-features-for-dashboards
|
||||
|
||||
@@ -2,15 +2,6 @@ import { Page } from '@playwright/test';
|
||||
|
||||
import { test, expect } from '@grafana/plugin-e2e';
|
||||
|
||||
// Enable required feature toggles for Saved Searches (part of RuleList.v2)
|
||||
test.use({
|
||||
featureToggles: {
|
||||
alertingListViewV2: true,
|
||||
alertingFilterV2: true,
|
||||
alertingSavedSearches: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* UI selectors for Saved Searches e2e tests.
|
||||
* Each selector is a function that takes the page and returns a locator.
|
||||
@@ -35,50 +26,26 @@ const ui = {
|
||||
|
||||
// Indicators
|
||||
emptyState: (page: Page) => page.getByText(/no saved searches/i),
|
||||
defaultIcon: (page: Page) => page.getByRole('img', { name: /default search/i }),
|
||||
defaultIcon: (page: Page) => page.locator('[title="Default search"]'),
|
||||
duplicateError: (page: Page) => page.getByText(/already exists/i),
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper to clear saved searches from UserStorage.
|
||||
* UserStorage persists data server-side via k8s API, so we need to delete via API.
|
||||
* Helper to clear saved searches storage.
|
||||
* UserStorage uses localStorage as fallback, so we clear both potential keys.
|
||||
*/
|
||||
async function clearSavedSearches(page: Page) {
|
||||
// Get namespace and user info from Grafana config
|
||||
const storageInfo = await page.evaluate(() => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const bootData = (window as any).grafanaBootData;
|
||||
const user = bootData?.user;
|
||||
const userUID = user?.uid === '' || !user?.uid ? String(user?.id ?? 'anonymous') : user.uid;
|
||||
const resourceName = `alerting:${userUID}`;
|
||||
const namespace = bootData?.settings?.namespace || 'default';
|
||||
|
||||
return { namespace, resourceName };
|
||||
});
|
||||
|
||||
// Delete the UserStorage resource
|
||||
try {
|
||||
await page.request.delete(
|
||||
`/apis/userstorage.grafana.app/v0alpha1/namespaces/${storageInfo.namespace}/user-storage/${storageInfo.resourceName}`
|
||||
);
|
||||
} catch (error) {
|
||||
// Ignore 404 errors (resource doesn't exist)
|
||||
if (!(error && typeof error === 'object' && 'status' in error && error.status === 404)) {
|
||||
console.warn('Failed to clear saved searches:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Also clear localStorage as fallback storage
|
||||
await page.evaluate(({ resourceName }) => {
|
||||
// The UserStorage key pattern is always `{resourceName}:{key}`
|
||||
// For saved searches, the key is 'savedSearches'
|
||||
const key = `${resourceName}:savedSearches`;
|
||||
window.localStorage.removeItem(key);
|
||||
}, storageInfo);
|
||||
|
||||
// Clear session storage visited flag
|
||||
await page.evaluate(() => {
|
||||
window.sessionStorage.removeItem('grafana.alerting.ruleList.visited');
|
||||
// Clear localStorage keys that might contain saved searches
|
||||
// UserStorage stores under 'grafana.userstorage.alerting' pattern
|
||||
const keysToRemove = Object.keys(localStorage).filter(
|
||||
(key) => key.includes('alerting') && (key.includes('savedSearches') || key.includes('userstorage'))
|
||||
);
|
||||
keysToRemove.forEach((key) => localStorage.removeItem(key));
|
||||
|
||||
// Also clear session storage visited flag
|
||||
const sessionKeysToRemove = Object.keys(sessionStorage).filter((key) => key.includes('alerting'));
|
||||
sessionKeysToRemove.forEach((key) => sessionStorage.removeItem(key));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -183,7 +150,7 @@ test.describe(
|
||||
|
||||
await ui.saveButton(page).click();
|
||||
|
||||
await ui.saveNameInput(page).fill('Firing Rules');
|
||||
await ui.saveNameInput(page).fill('Apply Test');
|
||||
await ui.saveConfirmButton(page).click();
|
||||
|
||||
// Clear the search
|
||||
@@ -192,7 +159,7 @@ test.describe(
|
||||
|
||||
// Apply the saved search
|
||||
await ui.savedSearchesButton(page).click();
|
||||
await page.getByRole('button', { name: /apply.*search.*firing rules/i }).click();
|
||||
await page.getByRole('button', { name: /apply search.*apply test/i }).click();
|
||||
|
||||
// Verify the search input is updated
|
||||
await expect(ui.searchInput(page)).toHaveValue('state:firing');
|
||||
@@ -215,7 +182,7 @@ test.describe(
|
||||
await ui.renameMenuItem(page).click();
|
||||
|
||||
// Enter new name
|
||||
const renameInput = page.getByRole('textbox', { name: /enter a name/i });
|
||||
const renameInput = page.getByDisplayValue('Original Name');
|
||||
await renameInput.clear();
|
||||
await renameInput.fill('Renamed Search');
|
||||
await page.keyboard.press('Enter');
|
||||
@@ -293,12 +260,12 @@ test.describe(
|
||||
|
||||
await expect(ui.saveNameInput(page)).toBeVisible();
|
||||
|
||||
// Press Escape to cancel - this closes the entire dropdown
|
||||
// Press Escape to cancel
|
||||
await page.keyboard.press('Escape');
|
||||
|
||||
// Verify the entire dialog is closed
|
||||
await expect(ui.dropdown(page)).not.toBeVisible();
|
||||
await expect(ui.saveButton(page)).not.toBeVisible();
|
||||
// Verify we're back to list mode
|
||||
await expect(ui.saveNameInput(page)).not.toBeVisible();
|
||||
await expect(ui.saveButton(page)).toBeVisible();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -22,7 +22,7 @@ import { getBarColorByDiff, getBarColorByPackage, getBarColorByValue } from './c
|
||||
import { CollapseConfig, CollapsedMap, FlameGraphDataContainer, LevelItem } from './dataTransform';
|
||||
|
||||
type RenderOptions = {
|
||||
canvasRef: RefObject<HTMLCanvasElement | null>;
|
||||
canvasRef: RefObject<HTMLCanvasElement>;
|
||||
data: FlameGraphDataContainer;
|
||||
root: LevelItem;
|
||||
direction: 'children' | 'parents';
|
||||
@@ -373,7 +373,7 @@ function useColorFunction(
|
||||
);
|
||||
}
|
||||
|
||||
function useSetupCanvas(canvasRef: RefObject<HTMLCanvasElement | null>, wrapperWidth: number, numberOfLevels: number) {
|
||||
function useSetupCanvas(canvasRef: RefObject<HTMLCanvasElement>, wrapperWidth: number, numberOfLevels: number) {
|
||||
const [ctx, setCtx] = useState<CanvasRenderingContext2D>();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -7,7 +7,7 @@ const CAUGHT_KEYS = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Tab'];
|
||||
|
||||
/** @internal */
|
||||
export interface UseListFocusProps {
|
||||
localRef: RefObject<HTMLUListElement | null>;
|
||||
localRef: RefObject<HTMLUListElement>;
|
||||
options: TimeOption[];
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { RefObject, useRef } from 'react';
|
||||
|
||||
export function useFocus(): [RefObject<HTMLInputElement | null>, () => void] {
|
||||
const ref = useRef<HTMLInputElement | null>(null);
|
||||
export function useFocus(): [RefObject<HTMLInputElement>, () => void] {
|
||||
const ref = useRef<HTMLInputElement>(null);
|
||||
const setFocus = () => {
|
||||
ref.current && ref.current.focus();
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@ const UNFOCUSED = -1;
|
||||
|
||||
/** @internal */
|
||||
export interface UseMenuFocusProps {
|
||||
localRef: RefObject<HTMLDivElement | null>;
|
||||
localRef: RefObject<HTMLDivElement>;
|
||||
isMenuOpen?: boolean;
|
||||
close?: () => void;
|
||||
onOpen?: (focusOnItem: (itemId: number) => void) => void;
|
||||
|
||||
@@ -22,7 +22,7 @@ interface Props extends Omit<BoxProps, 'display' | 'direction' | 'element' | 'fl
|
||||
*
|
||||
* https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-scrollcontainer--docs
|
||||
*/
|
||||
export const ScrollContainer = forwardRef<HTMLDivElement | null, PropsWithChildren<Props>>(
|
||||
export const ScrollContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
|
||||
@@ -20,7 +20,7 @@ export interface TableCellTooltipProps {
|
||||
field: Field;
|
||||
getActions: (field: Field, rowIdx: number) => ActionModel[];
|
||||
getTextColorForBackground: (bgColor: string) => string;
|
||||
gridRef: RefObject<DataGridHandle | null>;
|
||||
gridRef: RefObject<DataGridHandle>;
|
||||
height: number;
|
||||
placement?: TableCellTooltipPlacement;
|
||||
renderer: TableCellRenderer;
|
||||
|
||||
@@ -463,7 +463,7 @@ export function useColumnResize(
|
||||
return dataGridResizeHandler;
|
||||
}
|
||||
|
||||
export function useScrollbarWidth(ref: RefObject<DataGridHandle | null>, height: number) {
|
||||
export function useScrollbarWidth(ref: RefObject<DataGridHandle>, height: number) {
|
||||
const [scrollbarWidth, setScrollbarWidth] = useState(0);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
|
||||
@@ -135,7 +135,7 @@ export const Table = memo((props: Props) => {
|
||||
// `useTableStateReducer`, which is needed to construct options for `useTable` (the hook that returns
|
||||
// `toggleAllRowsExpanded`), and if we used a variable, that variable would be undefined at the time
|
||||
// we initialize `useTableStateReducer`.
|
||||
const toggleAllRowsExpandedRef = useRef<((value?: boolean) => void) | null>(null);
|
||||
const toggleAllRowsExpandedRef = useRef<(value?: boolean) => void>();
|
||||
|
||||
// Internal react table state reducer
|
||||
const stateReducer = useTableStateReducer({
|
||||
|
||||
@@ -14,8 +14,8 @@ import { GrafanaTableState } from './types';
|
||||
Select the scrollbar element from the VariableSizeList scope
|
||||
*/
|
||||
export function useFixScrollbarContainer(
|
||||
variableSizeListScrollbarRef: React.RefObject<HTMLDivElement | null>,
|
||||
tableDivRef: React.RefObject<HTMLDivElement | null>
|
||||
variableSizeListScrollbarRef: React.RefObject<HTMLDivElement>,
|
||||
tableDivRef: React.RefObject<HTMLDivElement>
|
||||
) {
|
||||
useEffect(() => {
|
||||
if (variableSizeListScrollbarRef.current && tableDivRef.current) {
|
||||
@@ -43,7 +43,7 @@ export function useFixScrollbarContainer(
|
||||
*/
|
||||
export function useResetVariableListSizeCache(
|
||||
extendedState: GrafanaTableState,
|
||||
listRef: React.RefObject<VariableSizeList | null>,
|
||||
listRef: React.RefObject<VariableSizeList>,
|
||||
data: DataFrame,
|
||||
hasUniqueId: boolean
|
||||
) {
|
||||
|
||||
@@ -19,7 +19,7 @@ interface EventsCanvasProps {
|
||||
}
|
||||
|
||||
export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config }: EventsCanvasProps) {
|
||||
const plotInstance = useRef<uPlot | null>(null);
|
||||
const plotInstance = useRef<uPlot>();
|
||||
// render token required to re-render annotation markers. Rendering lines happens in uPlot and the props do not change
|
||||
// so we need to force the re-render when the draw hook was performed by uPlot
|
||||
const [renderToken, setRenderToken] = useState(0);
|
||||
|
||||
@@ -140,7 +140,7 @@ export const TooltipPlugin2 = ({
|
||||
|
||||
const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, null, initState);
|
||||
|
||||
const sizeRef = useRef<TooltipContainerSize | null>(null);
|
||||
const sizeRef = useRef<TooltipContainerSize>();
|
||||
const styles = useStyles2(getStyles, maxWidth);
|
||||
|
||||
const renderRef = useRef(render);
|
||||
|
||||
@@ -96,7 +96,7 @@ export interface GraphNGState {
|
||||
export class GraphNG extends Component<GraphNGProps, GraphNGState> {
|
||||
static contextType = PanelContextRoot;
|
||||
panelContext: PanelContext = {} as PanelContext;
|
||||
private plotInstance: React.RefObject<uPlot | null>;
|
||||
private plotInstance: React.RefObject<uPlot>;
|
||||
|
||||
private subscription = new Subscription();
|
||||
|
||||
|
||||
@@ -187,6 +187,112 @@ func TestFrontendService_Middleware(t *testing.T) {
|
||||
})
|
||||
}
|
||||
|
||||
func TestFrontendService_LoginErrorCookie(t *testing.T) {
|
||||
publicDir := setupTestWebAssets(t)
|
||||
cfg := &setting.Cfg{
|
||||
HTTPPort: "3000",
|
||||
StaticRootPath: publicDir,
|
||||
BuildVersion: "10.3.0",
|
||||
OAuthLoginErrorMessage: "oauth.login.error",
|
||||
CookieSecure: false,
|
||||
CookieSameSiteDisabled: false,
|
||||
CookieSameSiteMode: http.SameSiteLaxMode,
|
||||
}
|
||||
|
||||
t.Run("should detect login_error cookie and set generic error message", func(t *testing.T) {
|
||||
service := createTestService(t, cfg)
|
||||
|
||||
mux := web.New()
|
||||
service.addMiddlewares(mux)
|
||||
service.registerRoutes(mux)
|
||||
|
||||
req := httptest.NewRequest("GET", "/", nil)
|
||||
// Set the login_error cookie (with some encrypted-looking value)
|
||||
req.AddCookie(&http.Cookie{
|
||||
Name: "login_error",
|
||||
Value: "abc123encryptedvalue",
|
||||
})
|
||||
recorder := httptest.NewRecorder()
|
||||
|
||||
mux.ServeHTTP(recorder, req)
|
||||
|
||||
assert.Equal(t, 200, recorder.Code)
|
||||
body := recorder.Body.String()
|
||||
|
||||
// Check that the generic error message is in the response
|
||||
assert.Contains(t, body, "loginError", "Should contain loginError when cookie is present")
|
||||
assert.Contains(t, body, "oauth.login.error", "Should contain the generic OAuth error message")
|
||||
|
||||
// Check that the cookie was deleted (MaxAge=-1)
|
||||
cookies := recorder.Result().Cookies()
|
||||
var foundDeletedCookie bool
|
||||
for _, cookie := range cookies {
|
||||
if cookie.Name == "login_error" {
|
||||
assert.Equal(t, -1, cookie.MaxAge, "Cookie should be deleted (MaxAge=-1)")
|
||||
assert.Equal(t, "", cookie.Value, "Cookie value should be empty")
|
||||
foundDeletedCookie = true
|
||||
break
|
||||
}
|
||||
}
|
||||
assert.True(t, foundDeletedCookie, "Should have set a cookie deletion header")
|
||||
})
|
||||
|
||||
t.Run("should not set error when login_error cookie is absent", func(t *testing.T) {
|
||||
service := createTestService(t, cfg)
|
||||
|
||||
mux := web.New()
|
||||
service.addMiddlewares(mux)
|
||||
service.registerRoutes(mux)
|
||||
|
||||
req := httptest.NewRequest("GET", "/", nil)
|
||||
// No login_error cookie
|
||||
recorder := httptest.NewRecorder()
|
||||
|
||||
mux.ServeHTTP(recorder, req)
|
||||
|
||||
assert.Equal(t, 200, recorder.Code)
|
||||
body := recorder.Body.String()
|
||||
|
||||
// The page should render but without the login error
|
||||
assert.Contains(t, body, "window.grafanaBootData")
|
||||
// Check that loginError is not set (or is empty/omitted in JSON)
|
||||
// Since it's omitempty, it shouldn't appear at all
|
||||
assert.NotContains(t, body, "loginError", "Should not contain loginError when cookie is absent")
|
||||
})
|
||||
|
||||
t.Run("should handle custom OAuth error message from config", func(t *testing.T) {
|
||||
customCfg := &setting.Cfg{
|
||||
HTTPPort: "3000",
|
||||
StaticRootPath: publicDir,
|
||||
BuildVersion: "10.3.0",
|
||||
OAuthLoginErrorMessage: "Oh no a boo-boo happened!",
|
||||
CookieSecure: false,
|
||||
CookieSameSiteDisabled: false,
|
||||
CookieSameSiteMode: http.SameSiteLaxMode,
|
||||
}
|
||||
service := createTestService(t, customCfg)
|
||||
|
||||
mux := web.New()
|
||||
service.addMiddlewares(mux)
|
||||
service.registerRoutes(mux)
|
||||
|
||||
req := httptest.NewRequest("GET", "/", nil)
|
||||
req.AddCookie(&http.Cookie{
|
||||
Name: "login_error",
|
||||
Value: "abc123encryptedvalue",
|
||||
})
|
||||
recorder := httptest.NewRecorder()
|
||||
|
||||
mux.ServeHTTP(recorder, req)
|
||||
|
||||
assert.Equal(t, 200, recorder.Code)
|
||||
body := recorder.Body.String()
|
||||
|
||||
// Check that the custom error message is used
|
||||
assert.Contains(t, body, "Oh no a boo-boo happened!", "Should use custom OAuth error message from config")
|
||||
})
|
||||
}
|
||||
|
||||
func TestFrontendService_IndexHooks(t *testing.T) {
|
||||
publicDir := setupTestWebAssets(t)
|
||||
cfg := &setting.Cfg{
|
||||
|
||||
@@ -47,4 +47,6 @@ type FSFrontendSettings struct {
|
||||
CSPReportOnlyEnabled bool `json:"cspReportOnlyEnabled,omitempty"`
|
||||
Http2Enabled bool `json:"http2Enabled,omitempty"`
|
||||
ReportingStaticContext map[string]string `json:"reportingStaticContext,omitempty"`
|
||||
|
||||
LoginError string `json:"loginError,omitempty"`
|
||||
}
|
||||
|
||||
@@ -148,6 +148,30 @@ func (p *IndexProvider) HandleRequest(writer http.ResponseWriter, request *http.
|
||||
data.Nonce = nonce
|
||||
data.PublicDashboardAccessToken = reqCtx.PublicDashboardAccessToken
|
||||
|
||||
// TODO -- reevaluate with mt authnz
|
||||
// Check for login_error cookie and set a generic error message.
|
||||
// The backend sets an encrypted cookie on oauth login failures that we can't read
|
||||
// so we just show a generic error if the cookie is present.
|
||||
if cookie, err := request.Cookie("login_error"); err == nil && cookie.Value != "" {
|
||||
p.log.Info("request has login_error cookie")
|
||||
// Defaults to a translation key that the frontend will resolve to a localized message
|
||||
data.Settings.LoginError = p.data.Config.OAuthLoginErrorMessage
|
||||
|
||||
cookiePath := "/"
|
||||
if p.data.AppSubUrl != "" {
|
||||
cookiePath = p.data.AppSubUrl
|
||||
}
|
||||
http.SetCookie(writer, &http.Cookie{
|
||||
Name: "login_error",
|
||||
Value: "",
|
||||
Path: cookiePath,
|
||||
MaxAge: -1,
|
||||
HttpOnly: true,
|
||||
Secure: p.data.Config.CookieSecure,
|
||||
SameSite: p.data.Config.CookieSameSiteMode,
|
||||
})
|
||||
}
|
||||
|
||||
if data.CSPEnabled {
|
||||
data.CSPContent = middleware.ReplacePolicyVariables(p.data.CSPContent, p.data.AppSubUrl, data.Nonce)
|
||||
writer.Header().Set("Content-Security-Policy", data.CSPContent)
|
||||
|
||||
@@ -179,10 +179,6 @@ export default defineConfig<PluginOptions>({
|
||||
name: 'cloud-plugins',
|
||||
testDir: path.join(testDirRoot, '/cloud-plugins-suite'),
|
||||
}),
|
||||
withAuth({
|
||||
name: 'alerting',
|
||||
testDir: path.join(testDirRoot, '/alerting-suite'),
|
||||
}),
|
||||
withAuth({
|
||||
name: 'dashboard-new-layouts',
|
||||
testDir: path.join(testDirRoot, '/dashboard-new-layouts'),
|
||||
|
||||
@@ -109,7 +109,7 @@ const defaultMatchers = {
|
||||
* "Time as X" core component, expects ascending x
|
||||
*/
|
||||
export class GraphNG extends Component<GraphNGProps, GraphNGState> {
|
||||
private plotInstance: React.RefObject<uPlot | null>;
|
||||
private plotInstance: React.RefObject<uPlot>;
|
||||
|
||||
constructor(props: GraphNGProps) {
|
||||
super(props);
|
||||
|
||||
@@ -121,10 +121,11 @@ export function SavedSearchItem({
|
||||
{/* Apply button (magnifying glass) */}
|
||||
<IconButton
|
||||
name="search"
|
||||
tooltip={t('alerting.saved-searches.apply-tooltip', 'Apply search "{{name}}"', {
|
||||
aria-label={t('alerting.saved-searches.apply-aria-label', 'Apply search "{{name}}"', {
|
||||
name: search.name,
|
||||
})}
|
||||
onClick={onApply}
|
||||
tooltip={t('alerting.saved-searches.apply-tooltip', 'Apply this search')}
|
||||
size="md"
|
||||
variant="secondary"
|
||||
disabled={isDisabled}
|
||||
|
||||
@@ -19,7 +19,7 @@ const ui = {
|
||||
saveInput: byPlaceholderText(/enter a name/i),
|
||||
// Action buttons
|
||||
cancelButton: byRole('button', { name: /cancel/i }),
|
||||
applyButtons: byRole('button', { name: /apply search/i }),
|
||||
applyButtons: byRole('button', { name: /apply this search/i }),
|
||||
actionMenuButtons: byRole('button', { name: /actions/i }),
|
||||
deleteButton: byRole('button', { name: /delete/i }),
|
||||
// Menu items (using byRole for proper accessibility testing)
|
||||
|
||||
@@ -134,7 +134,7 @@ function TabRepeatSelect({ tab, id }: { tab: TabItem; id?: string }) {
|
||||
<TextLink
|
||||
external
|
||||
href={
|
||||
'https://grafana.com/docs/grafana/next/visualizations/dashboards/build-dashboards/create-dashboard/#repeating-rows-and-tabs-and-the-dashboard-special-data-source'
|
||||
'https://grafana.com/docs/grafana/latest/visualizations/dashboards/build-dashboards/create-dynamic-dashboard/#repeating-rows-and-tabs-and-the-dashboard-special-data-source'
|
||||
}
|
||||
>
|
||||
<Trans i18nKey="dashboard.tabs-layout.tab.repeat.learn-more">Learn more</Trans>
|
||||
|
||||
@@ -33,7 +33,7 @@ global.ResizeObserver = jest.fn().mockImplementation((callback) => {
|
||||
});
|
||||
|
||||
// Helper function to assign a mock div to a ref
|
||||
function assignMockDivToRef(ref: React.RefObject<HTMLDivElement | null>, mockDiv: HTMLDivElement) {
|
||||
function assignMockDivToRef(ref: React.RefObject<HTMLDivElement>, mockDiv: HTMLDivElement) {
|
||||
// Use type assertion to bypass readonly restriction in tests
|
||||
(ref as { current: HTMLDivElement | null }).current = mockDiv;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ import grafanaTextLogoDarkSvg from 'img/grafana_text_logo_dark.svg';
|
||||
import grafanaTextLogoLightSvg from 'img/grafana_text_logo_light.svg';
|
||||
|
||||
interface SoloPanelPageLogoProps {
|
||||
containerRef: React.RefObject<HTMLDivElement | null>;
|
||||
containerRef: React.RefObject<HTMLDivElement>;
|
||||
isHovered: boolean;
|
||||
hideLogo?: UrlQueryValue;
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@ interface State {
|
||||
|
||||
class UnThemedTransformationsEditor extends React.PureComponent<TransformationsEditorProps, State> {
|
||||
subscription?: Unsubscribable;
|
||||
ref: RefObject<HTMLDivElement | null>;
|
||||
ref: RefObject<HTMLDivElement>;
|
||||
|
||||
constructor(props: TransformationsEditorProps) {
|
||||
super(props);
|
||||
|
||||
@@ -43,7 +43,7 @@ export const LibraryPanelsView = ({
|
||||
}
|
||||
);
|
||||
const asyncDispatch = useMemo(() => asyncDispatcher(dispatch), [dispatch]);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const abortControllerRef = useRef<AbortController>();
|
||||
|
||||
useDebounce(
|
||||
() => {
|
||||
|
||||
@@ -12,7 +12,7 @@ export interface Props {}
|
||||
|
||||
export const LiveConnectionWarning = memo(function LiveConnectionWarning() {
|
||||
const [show, setShow] = useState<boolean | undefined>(undefined);
|
||||
const subscriptionRef = useRef<Unsubscribable | null>(null);
|
||||
const subscriptionRef = useRef<Unsubscribable>();
|
||||
const styles = useStyles2(getStyle);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -38,7 +38,7 @@ export function useSearchKeyboardNavigation(
|
||||
): ItemSelection {
|
||||
const highlightIndexRef = useRef<ItemSelection>({ x: 0, y: -1 });
|
||||
const [highlightIndex, setHighlightIndex] = useState<ItemSelection>({ x: 0, y: -1 });
|
||||
const urlsRef = useRef<Field | null>(null);
|
||||
const urlsRef = useRef<Field>();
|
||||
|
||||
// Clear selection when the search results change
|
||||
useEffect(() => {
|
||||
|
||||
@@ -77,7 +77,7 @@ export const SuggestionsInput = ({
|
||||
const theme = useTheme2();
|
||||
const styles = getStyles(theme, inputHeight);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>();
|
||||
|
||||
useEffect(() => {
|
||||
scrollRef.current?.scrollTo(0, scrollTop);
|
||||
|
||||
@@ -11,7 +11,7 @@ import checkboxWhitePng from 'img/checkbox_white.png';
|
||||
|
||||
import { ALL_VARIABLE_VALUE } from '../../constants';
|
||||
|
||||
export interface Props extends Omit<React.HTMLProps<HTMLUListElement>, 'onToggle'>, Themeable2 {
|
||||
export interface Props extends React.HTMLProps<HTMLUListElement>, Themeable2 {
|
||||
multi: boolean;
|
||||
values: VariableOption[];
|
||||
selectedValues: VariableOption[];
|
||||
|
||||
@@ -20,8 +20,8 @@ interface CodeEditorProps {
|
||||
export const LogsQLCodeEditor = (props: CodeEditorProps) => {
|
||||
const { query, datasource, onChange } = props;
|
||||
|
||||
const monacoRef = useRef<Monaco | null>(null);
|
||||
const disposalRef = useRef<monacoType.IDisposable | undefined>(undefined);
|
||||
const monacoRef = useRef<Monaco>();
|
||||
const disposalRef = useRef<monacoType.IDisposable>();
|
||||
|
||||
const onFocus = useCallback(async () => {
|
||||
disposalRef.current = await reRegisterCompletionProvider(
|
||||
|
||||
@@ -42,8 +42,8 @@ interface LogsCodeEditorProps {
|
||||
export const PPLQueryEditor = (props: LogsCodeEditorProps) => {
|
||||
const { query, datasource, onChange } = props;
|
||||
|
||||
const monacoRef = useRef<Monaco | null>(null);
|
||||
const disposalRef = useRef<monacoType.IDisposable | undefined>(undefined);
|
||||
const monacoRef = useRef<Monaco>();
|
||||
const disposalRef = useRef<monacoType.IDisposable>();
|
||||
|
||||
const onFocus = useCallback(async () => {
|
||||
disposalRef.current = await reRegisterCompletionProvider(
|
||||
|
||||
@@ -20,8 +20,8 @@ interface SQLCodeEditorProps {
|
||||
export const SQLQueryEditor = (props: SQLCodeEditorProps) => {
|
||||
const { query, datasource, onChange } = props;
|
||||
|
||||
const monacoRef = useRef<Monaco | null>(null);
|
||||
const disposalRef = useRef<monacoType.IDisposable | undefined>(undefined);
|
||||
const monacoRef = useRef<Monaco>();
|
||||
const disposalRef = useRef<monacoType.IDisposable>();
|
||||
|
||||
const onFocus = useCallback(async () => {
|
||||
disposalRef.current = await reRegisterCompletionProvider(
|
||||
|
||||
@@ -94,7 +94,7 @@ const EDITOR_HEIGHT_OFFSET = 2;
|
||||
* Hook that returns function that will set up monaco autocomplete for the label selector
|
||||
*/
|
||||
function useAutocomplete(getLabelValues: (label: string) => Promise<string[]>, labels?: string[]) {
|
||||
const providerRef = useRef<CompletionProvider | null>(null);
|
||||
const providerRef = useRef<CompletionProvider>();
|
||||
if (providerRef.current === undefined) {
|
||||
providerRef.current = new CompletionProvider();
|
||||
}
|
||||
|
||||
@@ -126,7 +126,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
|
||||
window.localStorage.getItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS) === 'true'
|
||||
);
|
||||
|
||||
const timerHandle = useRef<number | null>(null);
|
||||
const timerHandle = useRef<number>();
|
||||
const previousInitialized = useRef<boolean>(false);
|
||||
const previousContextFilters = useRef<ContextFilter[]>([]);
|
||||
|
||||
@@ -191,18 +191,14 @@ export function LokiContextUi(props: LokiContextUiProps) {
|
||||
}, 1500);
|
||||
|
||||
return () => {
|
||||
if (timerHandle.current) {
|
||||
clearTimeout(timerHandle.current);
|
||||
}
|
||||
clearTimeout(timerHandle.current);
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [contextFilters, initialized]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timerHandle.current) {
|
||||
clearTimeout(timerHandle.current);
|
||||
}
|
||||
clearTimeout(timerHandle.current);
|
||||
onClose();
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
@@ -52,7 +52,7 @@ export function TraceQLEditor(props: Props) {
|
||||
const onRunQueryRef = useRef(onRunQuery);
|
||||
onRunQueryRef.current = onRunQuery;
|
||||
|
||||
const errorTimeoutId = useRef<number | null>(null);
|
||||
const errorTimeoutId = useRef<number>();
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -103,9 +103,7 @@ export function TraceQLEditor(props: Props) {
|
||||
}
|
||||
|
||||
// Remove previous callback if existing, to prevent squiggles from been shown while the user is still typing
|
||||
if (errorTimeoutId.current) {
|
||||
window.clearTimeout(errorTimeoutId.current);
|
||||
}
|
||||
window.clearTimeout(errorTimeoutId.current);
|
||||
|
||||
const errorNodes = getErrorNodes(model.getValue());
|
||||
const cursorPosition = changeEvent.changes[0].rangeOffset;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export function renderHistogram(
|
||||
can: React.RefObject<HTMLCanvasElement | null>,
|
||||
can: React.RefObject<HTMLCanvasElement>,
|
||||
histCanWidth: number,
|
||||
histCanHeight: number,
|
||||
xVals: number[],
|
||||
|
||||
@@ -196,7 +196,7 @@ export const LogsPanel = ({
|
||||
const dataSourcesMap = useDatasourcesFromTargets(panelData.request?.targets);
|
||||
// Prevents the scroll position to change when new data from infinite scrolling is received
|
||||
const keepScrollPositionRef = useRef<null | 'infinite-scroll' | 'user'>(null);
|
||||
const closeCallback = useRef<(() => void) | null>(null);
|
||||
let closeCallback = useRef<() => void>();
|
||||
const { app, eventBus, onAddAdHocFilter } = usePanelContext();
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -70,7 +70,7 @@ export function useLayout(
|
||||
const currentSignature = createDataSignature(rawNodes, rawEdges);
|
||||
|
||||
const isMounted = useMountedState();
|
||||
const layoutWorkerCancelRef = useRef<(() => void) | null>(null);
|
||||
const layoutWorkerCancelRef = useRef<(() => void) | undefined>();
|
||||
|
||||
useUnmount(() => {
|
||||
if (layoutWorkerCancelRef.current) {
|
||||
|
||||
@@ -133,7 +133,7 @@ export const AnnotationsPlugin2 = ({
|
||||
const newRangeRef = useRef(newRange);
|
||||
newRangeRef.current = newRange;
|
||||
|
||||
const xAxisRef = useRef<HTMLDivElement | null>(null);
|
||||
const xAxisRef = useRef<HTMLDivElement>();
|
||||
|
||||
useLayoutEffect(() => {
|
||||
config.addHook('ready', (u) => {
|
||||
|
||||
@@ -23,7 +23,7 @@ export const ExemplarsPlugin = ({
|
||||
maxHeight,
|
||||
maxWidth,
|
||||
}: ExemplarsPluginProps) => {
|
||||
const plotInstance = useRef<uPlot | null>(null);
|
||||
const plotInstance = useRef<uPlot>();
|
||||
|
||||
const [lockedExemplarRowIndex, setLockedExemplarRowIndex] = useState<number | undefined>();
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ interface ThresholdControlsPluginProps {
|
||||
}
|
||||
|
||||
export const OutsideRangePlugin = ({ config, onChangeTimeRange }: ThresholdControlsPluginProps) => {
|
||||
const plotInstance = useRef<uPlot | null>(null);
|
||||
const plotInstance = useRef<uPlot>();
|
||||
const [timevalues, setTimeValues] = useState<number[] | TypedArray>([]);
|
||||
const [timeRange, setTimeRange] = useState<Scale | undefined>();
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ interface ThresholdControlsPluginProps {
|
||||
}
|
||||
|
||||
export const ThresholdControlsPlugin = ({ config, fieldConfig, onThresholdsChange }: ThresholdControlsPluginProps) => {
|
||||
const plotInstance = useRef<uPlot | null>(null);
|
||||
const plotInstance = useRef<uPlot>();
|
||||
const [renderToken, setRenderToken] = useState(0);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
|
||||
@@ -2681,7 +2681,8 @@
|
||||
},
|
||||
"saved-searches": {
|
||||
"actions-aria-label": "Actions",
|
||||
"apply-tooltip": "Apply search \"{{name}}\"",
|
||||
"apply-aria-label": "Apply search \"{{name}}\"",
|
||||
"apply-tooltip": "Apply this search",
|
||||
"button-label": "Saved searches",
|
||||
"cancel": "Cancel",
|
||||
"default-indicator": "Default search",
|
||||
|
||||
Reference in New Issue
Block a user