From 2c95782b101db95d9e4deac29032ec5d987617f7 Mon Sep 17 00:00:00 2001 From: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> Date: Wed, 28 Feb 2024 23:37:29 -0500 Subject: [PATCH] Docs: restructure Configure panel options (#83438) * Moved view json panel content from configure panel options to panel inspect view * Converted add title and description task to reference section * Removed edit panel section * Updated bullet list to match content * Removed view json content to be integrated later * Ran prettier * Docs: Edit Configure panel options (#83439) * Updated intro * Updated intro, descriptions, and repeating panels task * Reformatted sections of task and updated wording of LLM info * Copy edits * Added Cloud links and updated version syntax * Fixed link * Fixed formatting and removed vestigial sentence --- .../configure-panel-options/index.md | 119 ++++++------------ 1 file changed, 37 insertions(+), 82 deletions(-) diff --git a/docs/sources/panels-visualizations/configure-panel-options/index.md b/docs/sources/panels-visualizations/configure-panel-options/index.md index e6946c8567d..72483d4e456 100644 --- a/docs/sources/panels-visualizations/configure-panel-options/index.md +++ b/docs/sources/panels-visualizations/configure-panel-options/index.md @@ -25,111 +25,66 @@ weight: 50 # Configure panel options -A Grafana panel is a visual representation of data that you can customize by defining a data source query, transforming and formatting data, and configuring visualization settings. +There are settings common to all visualizations, which you set in the **Panel options** section of the panel editor pane. The following sections describe these options as well as how to set them. -A panel editor includes a query builder and a series of options that you can use to transform data and add information to your panels. +## Panel options -This topic describes how to: +Set the following options to provide basic information about a panel and define basic display elements: -- Open a panel for editing -- Add a panel title and description -- View a panel JSON model -- Configure repeating rows and panels +| Option | Description | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Title | Text entered in this field appears at the top of your panel in the panel editor and in the dashboard. You can use [variables you have defined][] in the **Title** field, but not [global variables][]. | +| Description | Text entered in this field appears in a tooltip in the upper-left corner of the panel. Add a description to a panel to share with users any important information about it, such as its purpose. You can use [variables you have defined][] in the **Description** field, but not [global variables][]. | +| Transparent background | Toggle this switch on and off to control whether or not the panel has the same background color as the dashboard. | +| Panel links | Add [links to the panel][] to create shortcuts to other dashboards, panels, and external websites. Access panel links by clicking the icon next to the panel title. | +| Repeat options | Set whether to repeat the panel for each value in the selected variable. For more information, refer to [Configure repeating panels](#configure-repeating-panels). | -## Edit a panel - -After you add a panel to a dashboard, you can open it at any time to change or update queries, add data transformation, and change visualization settings. - -1. Open the dashboard that contains the panel you want to edit. - -1. Hover over any part of the panel to display the actions menu on the top right corner. - -1. Click the menu and select **Edit**. - - ![Panel with menu displayed](/media/docs/grafana/screenshot-panel-menu.png) - - To use a keyboard shortcut to open the panel, hover over the panel and press `e`. - - The panel opens in edit mode. - -## Add a title and description to a panel - -You can use generative AI to create panel titles and descriptions with the [Grafana LLM plugin][], which is currently in public preview. To enable this, refer to the [Set up generative AI features for dashboards documentation][]. Alternatively, you can take the following steps to create them yourself. - -Add a title and description to a panel to share with users any important information about the visualization. For example, use the description to document the purpose of the visualization. - -1. [Edit a panel](#edit-a-panel). - -1. In the panel display options pane, locate the **Panel options** section. - -1. Enter a **Title**. - - Text entered in this field appears at the top of your panel in the panel editor and in the dashboard. - -1. Write a description of the panel and the data you are displaying. - - Text entered in this field appears in a tooltip in the upper-left corner of the panel. - - You can use [variables you have defined][] in the **Title** and **Description** field, but not [global variables][]. - - ![Panel editor pane with Panel options section expanded](/static/img/docs/panels/panel-options-8-0.png) - -## View a panel JSON model - -Explore and export panel, panel data, and data frame JSON models. - -1. Open the dashboard that contains the panel. - -1. Hover over any part of the panel to display the actions menu on the top right corner. -1. Click the menu and select **Inspect > Panel JSON**. -1. In the **Select source** field, select one of the following options: - - - **Panel JSON:** Displays a JSON object representing the panel. - - **Panel data:** Displays a JSON object representing the data that was passed to the panel. - - **DataFrame structure:** Displays the data structure of the panel, including any transformations, field configurations, and override configurations that have been applied. - -1. To explore the JSON, click `>` to expand or collapse portions of the JSON model. +You can use generative AI to populate the **Title** and **Description** fields with the [Grafana LLM plugin][], which is currently in public preview. To enable this, refer to [Set up generative AI features for dashboards][]. ## Configure repeating panels You can configure Grafana to dynamically add panels or rows to a dashboard. A dynamic panel is a panel that the system creates based on the value of a variable. Variables dynamically change your queries across all panels in a dashboard. For more information about repeating rows, refer to [Configure repeating rows][]. -{{% admonition type="note" %}} -Repeating panels require variables to have one or more items selected; you can't repeat a panel zero times to hide it. -{{% /admonition %}} - To see an example of repeating panels, refer to [this dashboard with repeating panels](https://play.grafana.org/d/testdata-repeating/testdata-repeating-panels?orgId=1). **Before you begin:** - Ensure that the query includes a multi-value variable. -**To configure repeating panels:** +To configure repeating panels, follow these steps: -1. [Edit the panel](#edit-a-panel) you want to repeat. +1. Navigate to the panel you want to update. +1. Hover over any part of the panel to display the menu on the top right corner. +1. Click the menu and select **Edit**. +1. Open the **Panel options** section of the panel editor pane. +1. Under **Repeat options**, select a variable in the **Repeat by variable** drop-down list. +1. Under **Repeat direction**, choose one of the following: -1. On the display options pane, click **Panel options > Repeat options**. - -1. Select a `direction`. - - - Choose `horizontal` to arrange panels side-by-side. Grafana adjusts the width of a repeated panel. Currently, you can't mix other panels on a row with a repeated panel. - - Choose `vertical` to arrange panels in a column. The width of repeated panels is the same as the original, repeated panel. + - **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** in the previous step, 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 **Save**. 1. To propagate changes to all panels, reload the dashboard. +You can stop a panel from repeating by selecting **Disable repeating** in the **Repeat by variable** drop-down list. + {{% docs/reference %}} -[variables you have defined]: "/docs/grafana/ -> /docs/grafana//dashboards/variables" -[variables you have defined]: "/docs/grafana-cloud/ -> /docs/grafana//dashboards/variables" +[variables you have defined]: "/docs/grafana/ -> /docs/grafana//dashboards/variables" +[variables you have defined]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/dashboards/variables" -[global variables]: "/docs/grafana/ -> /docs/grafana//dashboards/variables/add-template-variables#global-variables" -[global variables]: "/docs/grafana-cloud/ -> /docs/grafana//dashboards/variables/add-template-variables#global-variables" +[global variables]: "/docs/grafana/ -> /docs/grafana//dashboards/variables/add-template-variables#global-variables" +[global variables]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/dashboards/variables/add-template-variables#global-variables" -[Configure repeating rows]: "/docs/grafana/ -> /docs/grafana//dashboards/build-dashboards/create-dashboard#configure-repeating-rows" -[Configure repeating rows]: "/docs/grafana-cloud/ -> /docs/grafana//dashboards/build-dashboards/create-dashboard#configure-repeating-rows" +[Configure repeating rows]: "/docs/grafana/ -> /docs/grafana//dashboards/build-dashboards/create-dashboard#configure-repeating-rows" +[Configure repeating rows]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/dashboards/build-dashboards/create-dashboard#configure-repeating-rows" -[Grafana LLM plugin]: "/docs/grafana/ -> /docs/grafana-cloud/alerting-and-irm/machine-learning/llm-plugin" -[Grafana LLM plugin]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/alerting-and-irm/machine-learning/llm-plugin" +[Grafana LLM plugin]: "/docs/grafana/ -> /docs/grafana-cloud/alerting-and-irm/machine-learning/configure/llm-plugin" +[Grafana LLM plugin]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/alerting-and-irm/machine-learning/configure/llm-plugin" -[Set up generative AI features for dashboards documentation]: "/docs/grafana/ -> /docs/grafana//dashboards/manage-dashboards#set-up-generative-ai-features-for-dashboards" -[Set up generative AI features for dashboards documentation]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/dashboards/manage-dashboards#set-up-generative-ai-features-for-dashboards" +[Set up generative AI features for dashboards]: "/docs/grafana/ -> /docs/grafana//dashboards/manage-dashboards#set-up-generative-ai-features-for-dashboards" +[Set up generative AI features for dashboards]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/dashboards/manage-dashboards#set-up-generative-ai-features-for-dashboards" + +[links to the panel]: "/docs/grafana/ -> /docs/grafana//dashboards/build-dashboards/manage-dashboard-links#panel-links" +[links to the panel]: "/docs/grafana-cloud/ -> /docs/grafana-cloud/visualizations/dashboards/build-dashboards/manage-dashboard-links#panel-links" {{% /docs/reference %}}