From 3725463c4381ee13069949b33fe1e6c93bc456ba Mon Sep 17 00:00:00 2001 From: Isabel <76437239+imatwawana@users.noreply.github.com> Date: Thu, 6 Apr 2023 12:45:55 -0400 Subject: [PATCH] docs: nav updates for dashboards (#66078) * navigation related text and image updates in dashboards topics * fix typo * fixed style and formatting issues --- .../manage-library-panels/index.md | 13 ++-- .../manage-version-history/index.md | 14 ++--- .../create-manage-playlists/index.md | 60 ++++++++++++------- .../dashboards/manage-dashboards/index.md | 26 ++++---- .../share-dashboards-panels/index.md | 22 ++++--- 5 files changed, 79 insertions(+), 56 deletions(-) diff --git a/docs/sources/dashboards/build-dashboards/manage-library-panels/index.md b/docs/sources/dashboards/build-dashboards/manage-library-panels/index.md index ab1c8e1f06f..56d67efafca 100644 --- a/docs/sources/dashboards/build-dashboards/manage-library-panels/index.md +++ b/docs/sources/dashboards/build-dashboards/manage-library-panels/index.md @@ -25,8 +25,8 @@ When you create a library panel, the panel on the source dashboard is converted 1. Open a panel in edit mode. 1. In the panel display options, click the down arrow option to bring changes to the visualization. - {{< figure src="/static/img/docs/library-panels/create-lib-panel-from-edit-8-0.png" class="docs-image--no-shadow" max-width= "800px" caption="Screenshot of the edit panel" >}} -1. Click the **Library panels** option, and then click **Create library panel** to open the create dialog. + {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-create-lib-panel-from-edit-9-5.png" class="docs-image--no-shadow" max-width= "800px" >}} +1. Click **Library panels**, and then click **+ Create library panel** to open the create dialog. 1. In **Library panel name**, enter the name. 1. In **Save in folder**, select the folder to save the library panel. 1. Click **Create library panel** to save your changes. @@ -34,14 +34,16 @@ When you create a library panel, the panel on the source dashboard is converted Once created, you can modify the library panel using any dashboard on which it appears. After you save the changes, all instances of the library panel reflect these modifications. -{{< figure src="/static/img/docs/library-panels/create-from-more-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}} +You can also create a library panel directly from the edit menu of any panel. + +{{< figure src="/media/docs/grafana/panels-visualizations/screenshot-create-from-more-9-5.png" class="docs-image--no-shadow" max-width= "900px" >}} ## Add a library panel to a dashboard Add a Grafana library panel to a dashboard when you want to provide visualizations to other dashboard users. 1. Click **Dashboards** in the left-side menu. -1. Click **New** and select **New Dashboard**. +1. Click **New** and select **New Dashboard** in the dropdown. 1. On the empty dashboard, click **+ Import library panel**. You will see a list of your library panels. @@ -60,6 +62,7 @@ Unlink a library panel when you want to make a change to the panel and not affec 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 **Unlink** on the top right corner of the page. +1. Click **Yes, unlink**. ## View a list of library panels @@ -69,7 +72,7 @@ You can view a list of available library panels and search for a library panel. 1. Click **Library panels**. You can see a list of previously defined library panels. - {{< figure src="/static/img/docs/library-panels/library-panel-list-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}} + {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-library-panel-list-9-5.png" class="docs-image--no-shadow" max-width= "900px" >}} 1. Search for a specific library panel if you know its name. diff --git a/docs/sources/dashboards/build-dashboards/manage-version-history/index.md b/docs/sources/dashboards/build-dashboards/manage-version-history/index.md index 8ab7439f047..c2b8e3fa286 100644 --- a/docs/sources/dashboards/build-dashboards/manage-version-history/index.md +++ b/docs/sources/dashboards/build-dashboards/manage-version-history/index.md @@ -17,7 +17,7 @@ weight: 400 Whenever you save a version of your dashboard, a copy of that version is saved so that previous versions of your dashboard are never lost. A list of these versions is available by entering the dashboard settings and then selecting "Versions" in the left side menu. - +![Dashboards versions list](/media/docs/grafana/dashboards/screenshot-dashboard-versions-list.png) The dashboard version history feature lets you compare and restore to previously saved dashboard versions. @@ -25,20 +25,18 @@ The dashboard version history feature lets you compare and restore to previously To compare two dashboard versions, select the two versions from the list that you wish to compare. Once selected, the "Compare versions" button will become clickable. Click the button to view the diff between the two versions. - +![Dashboard versions selected](/media/docs/grafana/dashboards/screenshot-dashboard-versions-select.png) Upon clicking the button, you'll be brought to the diff view. By default, you'll see a textual summary of the changes, like in the image below. - +![Dashboards versions diff](/media/docs/grafana/dashboards/screenshot-dashboard-versions-diff-basic.png) -If you want to view the diff of the raw JSON that represents your dashboard, you can do that as well by clicking the "View JSON Diff" button at the bottom. - -If you want to restore to the version you are diffing against, you can do so by clicking the "Restore to version \" button in the top right. +If you want to view the diff of the raw JSON that represents your dashboard, you can do that as well by clicking the expand icon for the View JSON Diff section at the bottom. ## Restoring to a previously saved dashboard version -If you need to restore to a previously saved dashboard version, you can do so by either clicking the "Restore" button on the right of a row in the dashboard version list, or by clicking the "Restore to version \" button appearing in the diff view. Clicking the button will bring up the following popup prompting you to confirm the restoration. +If you need to restore to a previously saved dashboard version, you can do so by either clicking the "Restore" button on the right of a row in the dashboard version list, or by clicking the **Restore to version \** button appearing in the diff view. Clicking the button will bring up the following popup prompting you to confirm the restoration. - +![Restore dashboard version](/media/docs/grafana/dashboards/screenshot-dashboard-versions-restore.png) After restoring to a previous version, a new version will be created containing the same exact data as the previous version, only with a different version number. This is indicated in the "Notes column" for the row in the new dashboard version. This is done simply to ensure your previous dashboard versions are not affected by the change. diff --git a/docs/sources/dashboards/create-manage-playlists/index.md b/docs/sources/dashboards/create-manage-playlists/index.md index e3c12996a26..9be403a304d 100644 --- a/docs/sources/dashboards/create-manage-playlists/index.md +++ b/docs/sources/dashboards/create-manage-playlists/index.md @@ -26,21 +26,22 @@ Use the information in this section to access existing playlists. Start and cont ### Access a playlist -1. Hover your cursor over Grafana’s side menu. -1. Click **Playlists**. You will see a list of existing playlists. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. ### Start a playlist -You can start a playlist in five different view modes. View mode determine how the menus and navigation bar appear on the dashboards. +You can start a playlist in five different view modes. View modes determine how the menus and navigation bar appear on the dashboards. By default, each dashboard is displayed for the amount of time entered in the Interval field, which you set when you create or edit a playlist. After you start a playlist, you can control it with the navbar at the top of the page. -1. [Access](#access-playlist) the playlist page to see a list of existing playlists. -1. Find the playlist you want to start, then click **Start playlist**. The start playlist dialog opens. -1. Select one of the five playlist modes available based on the information in the following table. -1. Click **Start **. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Find the playlist you want to start, then click **Start playlist**. +1. In the modal that opens, select one of the five playlist modes available, based on the information in the table below. +1. Click **Start \**. -The playlist displays each dashboard for the time specified in the `Interval` field, set when creating or editing a playlist. Once a playlist starts, you can [control](#control-a-playlist) it using the navbar at the top of your screen. +The playlist displays each dashboard for the time specified in the **Interval** field, set when creating or editing a playlist. Once a playlist starts, you can [control](#control-a-playlist) it using the navbar at the top of your screen. | Mode | Description | | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -67,7 +68,9 @@ You can control a playlist in **Normal** or **TV** mode after it's started, usin You can create a playlist to present dashboards in a sequence, with a set order and time interval between dashboards. -1. In the playlist page, click **New playlist**. The New playlist page opens. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Click **New playlist**. The New playlist page opens. 1. In the **Name** text box, enter a descriptive name. 1. In the **Interval** text box, enter a time interval. Grafana displays a particular dashboard for the interval of time specified here before moving on to the next dashboard. 1. In Dashboards, add existing dashboards to the playlist using **Add by title** and **Add by tag** drop-down options. The dashboards you add are listed in a sequential order. @@ -82,8 +85,8 @@ You can create a playlist to present dashboards in a sequence, with a set order You can save a playlist and add it to your **Playlists** page, where you can start it. Be sure that all the dashboards you want to appear in your playlist are added when creating or editing the playlist before saving it. -1. To access the Playlist feature, hover your cursor over Grafana's side menu. -1. Click **Playlists**. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. 1. Click on the playlist. 1. Edit the playlist. 1. Ensure that your playlist has a **Name**, **Interval**, and at least one **Dashboard** added to it. @@ -95,36 +98,47 @@ You can edit a playlist by updating its name, interval time, and by adding, remo ### Edit a playlist -1. In the playlist page, click **Edit playlist**. The Edit playlist page opens. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Find the playlist you want to update and click **Edit playlist**. 1. Update the name and time interval, then add or remove dashboards from the playlist using instructions in [Create a playlist](#create-a-playlist). 1. Click **Save** to save your changes. ### Delete a playlist -1. Click **Playlists**. -1. Next to the Playlist you want to delete, click **Remove[x]**. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Find the playlist you want to remove. +1. Click **Delete playlist**. ### Rearrange dashboard order -1. Next to the dashboard you want to move, click the up or down arrow. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Find the playlist you want to update and click **Edit playlist**. +1. Click and drag the dashboards into your desired order. 1. Click **Save** to save your changes. ### Remove a dashboard -1. Click **Remove[x]** to remove a dashboard from the playlist. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Find the playlist you want to update and click **Edit playlist**. +1. Click **\[x\]** on the name of the dashboard you want to remove from the playlist. 1. Click **Save** to save your changes. ## Share a playlist in a view mode You can share a playlist by copying the link address on the view mode you prefer, and pasting the URL to your destination. -1. From the Dashboards submenu, click **Playlists**. -1. Next to the playlist you want to share, click **Start playlist**. -1. In the dropdown, right click the view mode you prefer. -1. Click **Copy Link Address** to copy the URL to your clipboard. +1. Click **Dashboards** in the left-side menu. +1. Click **Playlists** to see a list of existing playlists. +1. Click the share icon of the playlist you want to share. +1. Select the view mode you prefer. +1. Click **Copy** next to the Link URL to copy it to your clipboard. - Example: The URL for the first playlist on the Grafana Play site in Kiosk mode will look like this: + For example, the URL for the first playlist on the Grafana Play site in Kiosk mode will look like this: - [https://play.grafana.org/playlists/play/1?kiosk](https://play.grafana.org/playlists/play/1?kiosk). + [https://play.grafana.org/playlists/play/1?kiosk](https://play.grafana.org/playlists/play/1?kiosk). -1. Paste the URL to your destination. +1. Paste the URL to your destination. diff --git a/docs/sources/dashboards/manage-dashboards/index.md b/docs/sources/dashboards/manage-dashboards/index.md index 2a18a59b3cd..fb16052b0ef 100644 --- a/docs/sources/dashboards/manage-dashboards/index.md +++ b/docs/sources/dashboards/manage-dashboards/index.md @@ -48,14 +48,16 @@ Folders help you organize and group dashboards, which is useful when you have ma **To create a dashboard folder:** -1. Sign in to Grafana and on the side menu, click **Dashboards > New folder**. +1. Sign in to Grafana. +1. Click **Dashboards** in the left-side menu. +1. On the Dashboards page, click **New** and select **New folder** in the dropdown. 1. Enter a unique name and click **Create**. When you save a dashboard, you can either select a folder for the dashboard to be saved in or create a new folder. ## Manage dashboards -On the **Manage dashboards and folders** page, you can: +On the Dashboards page, you can: - create a folder - create a dashboard @@ -65,17 +67,17 @@ On the **Manage dashboards and folders** page, you can: ### Dashboard folder page -You can complete the following tasks on the **Dashboard Folder** page: +You can complete the following tasks on a dashboard folder page: - Move or delete dashboards in a folder -- Rename a folder (available under the **Settings** tab) +- Rename a folder (available on the Settings tab) - Assign permissions to folders (which are inherited by the dashboards in the folder) -To navigate to the dashboard folder page, click the cog appears when you hover over a folder in the dashboard search result list or the **Manage dashboards and folders** page. +To navigate to the dashboard folder page, hover over the name of the folder and click **Go to folder** in the dashboard search result list or on the Dashboards page. ### Dashboard permissions -You can assign permissions to a folder. Any permissions you assign are inherited by the dashboards in the folder. An Access Control List (ACL) is used where **Organization Role**, **Team** and a **User** can be assigned permissions. +You can assign permissions to a folder. Any permissions you assign are inherited by the dashboards in the folder. An Access Control List (ACL) is used where **Organization Role**, **Team**, and a **User** can be assigned permissions. For more information about dashboard permissions, refer to [Dashboard permissions]({{< relref "../../administration/roles-and-permissions/#dashboard-permissions" >}}). @@ -87,10 +89,11 @@ You can use the Grafana UI or the [HTTP API]({{< relref "../../developers/http_a The dashboard export action creates a Grafana JSON file that contains everything you need, including layout, variables, styles, data sources, queries, and so on, so that you can later import the dashboard. +1. Click **Dashboards** in the left-side menu. 1. Open the dashboard you want to export. -2. Click the **Share** icon. -3. Click **Export**. -4. Click **Save to file**. +1. Click the **Share** icon. +1. Click **Export**. +1. Click **Save to file**. Grafana downloads a JSON file to your local machine. @@ -102,7 +105,8 @@ A template variable of the type `Constant` will automatically be hidden in the d ### Import a dashboard -1. Click **Dashboards > Import** in the side menu. +1. Click **Dashboards** in the left-side menu. +1. Click **New** and select **Import** in the dropdown menu. 1. Perform one of the following steps: - Upload a dashboard JSON file @@ -118,7 +122,7 @@ The import process enables you to change the name of the dashboard, pick the dat Find dashboards for common server applications at [Grafana.com/dashboards](https://grafana.com/dashboards). -{{< figure src="/static/img/docs/v50/gcom_dashboard_list.png" max-width="700px" >}} +{{< figure src="/media/docs/grafana/dashboards/screenshot-gcom-dashboards.png" >}} ## Troubleshoot dashboards diff --git a/docs/sources/dashboards/share-dashboards-panels/index.md b/docs/sources/dashboards/share-dashboards-panels/index.md index 868a1fe6d9a..3c677ad6226 100644 --- a/docs/sources/dashboards/share-dashboards-panels/index.md +++ b/docs/sources/dashboards/share-dashboards-panels/index.md @@ -52,10 +52,11 @@ You can share a dashboard as a direct link or as a snapshot. You can also export > **Note:** If you change a dashboard, ensure that you save the changes before sharing. -1. Navigate to the home page of your Grafana instance. -1. Click on the share icon in the top navigation. +1. Click **Dashboards** in the left-side menu. +1. Click the dashboard you want to share. +1. Click the share icon at the top of the screen. - The share dialog opens and shows the **Link** tab. + The share dialog opens and shows the Link tab. ### Share a direct link @@ -73,7 +74,8 @@ A dashboard snapshot shares an interactive dashboard publicly. Grafana strips se You can publish snapshots to your local instance or to [snapshots.raintank.io](http://snapshots.raintank.io). The latter is a free service provided by Grafana Labs that enables you to publish dashboard snapshots to an external Grafana instance. Anyone with the link can view it. You can set an expiration time if you want the snapshot removed after a certain time period. -1. Click **Local Snapshot** or **Publish to snapshots.raintank.io**. +1. Click the **Snapshot** tab. +1. Click **Publish to snapshots.raintank.io** or **Local Snapshot**. Grafana generates a link of the snapshot. @@ -91,7 +93,9 @@ You can generate and save PDF files of any dashboard. > **Note:** Available in [Grafana Enterprise]({{< relref "../../introduction/grafana-enterprise/" >}}). -1. In the upper-right corner of the dashboard that you want to export as PDF, click the **Share dashboard** icon. +1. Click **Dashboards** in the left-side menu. +1. Click the dashboard you want to share. +1. Click the share icon at the top of the screen. 1. On the PDF tab, select a layout option for the exported dashboard: **Portrait** or **Landscape**. 1. Click **Save as PDF** to render the dashboard as a PDF file. @@ -101,8 +105,8 @@ You can generate and save PDF files of any dashboard. You can share a panel as a direct link, as a snapshot, or as an embedded link. You can also create library panels using the **Share** option on any panel. -1. Click a panel title to open the panel menu. -1. Click **Share**. +1. Hover over any part of the panel to display the actions menu on the top right corner. +1. Click the menu and select **Share**. The share dialog opens and shows the **Link** tab. @@ -139,8 +143,8 @@ A panel snapshot shares an interactive panel publicly. Grafana strips sensitive You can publish snapshots to your local instance or to [snapshots.raintank.io](http://snapshots.raintank.io). The latter is a free service provided by [Grafana Labs](https://grafana.com), that enables you to publish dashboard snapshots to an external Grafana instance. You can optionally set an expiration time if you want the snapshot to be removed after a certain time period. -1. In the **Share Panel** dialog, click **Snapshot** to open the tab. -1. Click **Local Snapshot** or **Publish to snapshots.raintank.io**. +1. In the **Share Panel** dialog, click **Snapshot** to go to the tab. +1. Click **Publish to snapshots.raintank.io** or **Local Snapshot**. Grafana generates the link of the snapshot.