docs: panel header updates (#65073)

* updated all text related to panel actions menu

* removed to do notes and updated intro text for panel inspect

* added screenshot

* added indents

* replaced panel links image and updated intro text

* added missed panel header related updates

* updated panel editor overview image

* chunked out steps per review feedback
This commit is contained in:
Isabel 2023-03-28 16:04:17 -04:00 committed by GitHub
parent ae3be459f0
commit 1d38d03d09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 59 additions and 30 deletions

View File

@ -24,7 +24,7 @@ weight: 500
You can use links to navigate between commonly-used dashboards or to connect others to your visualizations. Links let you create shortcuts to other dashboards, panels, and even external websites.
Grafana supports dashboard links, panel links, and data links. Dashboard links are displayed at the top of the dashboard. Panel links are accessible by clicking an icon on the top left corner of the panel.
Grafana supports dashboard links, panel links, and data links. Dashboard links are displayed at the top of the dashboard. Panel links are accessible by clicking the icon next to the panel title.
## Which link should you use?
@ -110,17 +110,21 @@ To delete an existing dashboard link, click the trash icon next to the duplicate
## Panel links
Each panel can have its own set of links that are shown in the upper left corner of the panel. 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.
Each panel can have its own set of links that are shown in the upper left of the panel after the panel title. 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.
Click the icon on the top left corner of a panel to see available panel links.
Click the icon next to the panel title to see available panel links.
{{< figure src="/static/img/docs/linking/panel-links.png" width="200px" >}}
{{< figure src="/media/docs/grafana/screenshot-panel-links.png" width="200px" >}}
### Add a panel link
1. Hover your cursor over the panel that you want to add a link to and then press `e`. Or click the dropdown arrow next to the panel title and then click **Edit**.
1. On the Panel tab, scroll down to the Links section.
1. Expand Links and then click **Add link**.
1. Hover over any part of the panel to which you want to add the link to display the actions menu on the top right corner.
1. Click the menu and select **Edit**.
To use a keyboard shortcut to open the panel, hover over the panel and press `e`.
1. Expand the **Panel options** section, scroll down to Panel links.
1. Click **Add link**.
1. Enter a **Title**. **Title** is a human-readable label for the link that will be displayed in the UI.
1. Enter the **URL** you want to link to.
You can even add one of the template variables defined in the dashboard. Press Ctrl+Space or Cmd+Space and click in the **URL** field to see the available variables. By adding template variables to your panel link, the link sends the user to the right context, with the relevant variables already set. You can also use time variables:
@ -133,7 +137,13 @@ Click the icon on the top left corner of a panel to see available panel links.
### Update a panel link
1. On the Panel tab, find the link that you want to make changes to.
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**.
To use a keyboard shortcut to open the panel, hover over the panel and press `e`.
1. Expand the **Panel options** section, scroll down to Panel links.
1. Find the link that you want to make changes to.
1. Click the Edit (pencil) icon to open the Edit link window.
1. Make any necessary changes.
1. Click **Save** to save changes and close the window.
@ -141,6 +151,12 @@ Click the icon on the top left corner of a panel to see available panel links.
### Delete a panel link
1. On the Panel tab, find the link that you want to delete.
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**.
To use a keyboard shortcut to open the panel, hover over the panel and press `e`.
1. Expand the **Panel options** section, scroll down to Panel links.
1. Find the link that you want to delete.
1. Click the **X** icon next to the link you want to delete.
1. Click **Save** in the upper right to save your changes to the dashboard.

View File

@ -27,8 +27,8 @@ The InfluxQL query editor helps you select metrics and tags to create InfluxQL q
**To enter edit mode:**
1. Click the panel title.
1. Click **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**.
![InfluxQL query editor](/static/img/docs/influxdb/influxql-query-editor-8-0.png)

View File

@ -93,9 +93,13 @@ When creating or updating a data link, press Cmd+Space or Ctrl+Space on your key
### Add a data link
1. Hover your cursor over the panel that you want to add a link to and then press `e`. Or click the dropdown arrow next to the panel title and then click **Edit**.
1. On the Field tab, scroll down to the Data links section.
1. Expand Data links and then click **Add link**.
1. Hover over any part of the panel you want to which you want to add the data link to display the actions menu on the top right corner.
1. Click the menu and select **Edit**.
To use a keyboard shortcut to open the panel, hover over the panel and press `e`.
1. Scroll down to the Data links section and expand it.
1. Click **Add link**.
1. Enter a **Title**. **Title** is a human-readable label for the link that will be displayed in the UI.
1. Enter the **URL** you want to link to.
@ -107,7 +111,7 @@ When creating or updating a data link, press Cmd+Space or Ctrl+Space on your key
### Update a data link
1. On the Field tab, find the link that you want to make changes to.
1. Scroll down to the Data links section, expand it, and find the link that you want to make changes to.
1. Click the Edit (pencil) icon to open the Edit link window.
1. Make any necessary changes.
1. Click **Save** to save changes and close the window.
@ -115,6 +119,6 @@ When creating or updating a data link, press Cmd+Space or Ctrl+Space on your key
### Delete a data link
1. On the Field tab, find the link that you want to delete.
1. Scroll down to the Data links section, expand it, and find the link that you want to delete.
1. Click the **X** icon next to the link you want to delete.
1. Click **Save** in the upper right to save your changes to the dashboard.

View File

@ -36,7 +36,13 @@ After you add a panel to a dashboard, you can open it at any time to change chan
1. Open the dashboard that contains the panel you want to edit.
1. Click in the panel title and select **Edit**. To use a keyboard shortcut to open the panel, hover over the panel and press `e`.
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.
@ -66,8 +72,8 @@ Explore and export panel, panel data, and data frame JSON models.
1. Open the dashboard that contains the panel.
1. Click in the panel title and select **Inspect > Panel JSON**.
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.

View File

@ -27,10 +27,9 @@ For a complete list of field formatting options, refer to [Standard options defi
> You can apply standard options to most built-in Grafana panels. Some older panels and community panels that have not updated to the new panel and data model will be missing either all or some of these field options.
1. Open a dashboard, click the panel title, and click **Edit**.
1. Open a dashboard. Hover over any part of the panel to display the actions menu on the top right corner.
1. Click the menu and select **Edit**.
1. In the panel display options pane, locate the **Standard options** section.
1. Select the standard options you want to apply.
For more information about standard options, refer to [Standard options definitions]({{< relref "#standard-options-definitions" >}}).

View File

@ -23,13 +23,12 @@ weight: 1
# Panel editor overview
{{< figure src="/static/img/docs/panel-editor/panel-editor-8-0.png" class="docs-image--no-shadow" max-width="1500px" >}}
![Panel editor](/media/docs/grafana/panels-visualizations/screenshot-panel-editor-view.png)
This section describes the areas of the Grafana panel editor.
1. Panel header: The header section lists the dashboard in which the panel appears and the following controls:
- **Dashboard settings (gear) icon:** Click to access the dashboard settings.
- **Discard:** Discards changes you have made to the panel since you last saved the dashboard.
- **Save:** Saves changes you made to the panel.
- **Apply:** Applies changes you made and closes the panel editor, returning you to the dashboard. You will have to save the dashboard to persist the applied changes.
@ -53,6 +52,8 @@ This section describes the areas of the Grafana panel editor.
The inspect drawer helps you understand and troubleshoot your panels. You can view the raw data for any panel, export that data to a comma-separated values (CSV) file, view query requests, and export panel and data JSON.
To access the panel inspect drawer from the edit view, hover over any part of the panel to display the actions menu on the top right corner. Click the menu and select **Inspect**.
> **Note:** Not all panel types include all tabs. For example, dashboard list panels do not have raw data to inspect, so they do not display the Stats, Data, or Query tabs.
The panel inspector consists of the following options:

View File

@ -47,7 +47,8 @@ The order in which Grafana applies transformations directly impacts the results.
The following steps guide you in adding a transformation to data. This documentation does not include steps for each type of transformation. For a complete list of transformations, refer to [Transformation functions]({{< relref "#transformation-functions" >}}).
1. Navigate to the panel where you want to add one or more transformations.
1. Click the panel title and then click **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**.
1. Click the **Transform** tab.
1. Click a transformation.
A transformation row appears where you configure the transformation options. For more information about how to configure a transformation, refer to [Transformation functions]({{< relref "#transformation-functions" >}}).

View File

@ -22,7 +22,7 @@ While an image is being rendered, the PNG image is temporarily written to the fi
A background job runs every 10 minutes and removes temporary images. You can configure how long an image should be stored before being removed by configuring the [temp_data_lifetime]({{< relref "../configure-grafana/#temp_data_lifetime" >}}) setting.
You can also render a PNG by clicking the dropdown arrow next to a panel title, then clicking **Share > Direct link rendered image**.
You can also render a PNG by clicking hovering over the panel to display the actions menu in the top right corner, and then clicking **Share > Direct link rendered image** in the Link tab.
## Alerting and render limits

View File

@ -2,4 +2,4 @@
title: Panel links intro
---
Each panel can have its own set of links that are shown in the upper left corner of the panel. 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.
Each panel can have its own set of links that are shown in top left of a panel after the panel title. 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.

View File

@ -18,7 +18,9 @@ The panel that you send includes all query response data and all visualizations
1. Open the dashboard that contains the panel you want to send to Grafana Labs.
1. Hover your mouse cursor over the panel title and click **More > Get help**.
1. Hover over any part of the panel to display the actions menu on the top right corner.
1. Click the menu and select **More > Get help**.
Grafana opens a standalone support dashboard that contains the data you are sending to Grafana Labs Technical Support.
@ -28,9 +30,9 @@ The panel that you send includes all query response data and all visualizations
1. To send the panel data to Grafana Labs via Github:
a. Click **Copy for Github**.
a. Click **Copy to clipboard**.
b. In the [Grafana/Grafana](https://github.com/grafana/grafana) repository, create an issue and paste the contents of the support dashboard.
b. In the [Grafana/Grafana](https://github.com/grafana/grafana) repository, create an issue, and paste the contents of the support dashboard.
1. To send the panel data to Grafana Labs via a support ticket: