From 337a4c5cb5494adc77a3eae4bf0e20e5d8e2a04c Mon Sep 17 00:00:00 2001 From: achatterjee-grafana <70489351+achatterjee-grafana@users.noreply.github.com> Date: Fri, 4 Jun 2021 17:46:40 -0400 Subject: [PATCH] Docs update share panel (#35291) * Added new topic. * Folded create lib panel into Share panel topic. * Updated image links, also some structural changes. * Removed lib panel reference. * resized two images. * updated one image name. * Fixed incorrect image name. --- docs/sources/panels/panel-library.md | 10 +++++----- docs/sources/sharing/share-panel.md | 21 ++++++++++++++++----- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/docs/sources/panels/panel-library.md b/docs/sources/panels/panel-library.md index 4cb3c9b7102..361be8c5f52 100644 --- a/docs/sources/panels/panel-library.md +++ b/docs/sources/panels/panel-library.md @@ -6,7 +6,7 @@ weight = 400 # Library panels Library panels allow users to create reusable panels where any changes made to one instance of the library panel is reflected on every dashboard -affecting all other instances. where the panel is used. These panels can be saved in folders alongside Dashboards and streamline reuse of panels +affecting all other instances where the panel is used. These panels can be saved in folders alongside Dashboards and streamline reuse of panels across multiple dashboards. ## Create a library panel @@ -21,9 +21,9 @@ To create a library panel: 1. Create a Grafana panel as you normally would, following instructions in [Add a panel]({{< relref "./add-a-panel.md" >}}). You an also use an existing panel. 1. Click the title of the panel and then click **Edit**. The panel opens in edit mode. 1. In the panel display options (side pane), 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= "900px" caption="Screenshot of the edit panel" >}} + {{< 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 new library panel** to open the create dialog. - {{< figure src="/static/img/docs/library-panels/create-lib-panel-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the create library panel dialog" >}} + {{< figure src="/static/img/docs/library-panels/create-lib-panel-8-0.png" class="docs-image--no-shadow" max-width= "500px" caption="Screenshot of the create library panel dialog" >}} 1. In **Library panel name**, enter the name. 1. In **Save in folder**, select the folder to save the library panel. By default, the General folder is selected. 1. Click **Create library panel** to save your changes. @@ -31,7 +31,7 @@ To create a library panel: Optionally, you can click title of the panel and then click **More > Create Library panel**. Next, follow the instructions Step 5 in the procedure above. - {{< figure src="/static/img/docs/library-panels/create-lib-panel-from-edit-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}} + {{< 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" >}} Also, library panels can also be created using the “Share” option for any panel. @@ -65,7 +65,7 @@ To unlink a library panel from a dashboard: 1. Hover over **Dashboard** on the left menu, and then click **Library panels**. 1. Select a library panel that is being used in different dashboards. You will see a list of all the dashboards where the library panel is used. - {{< figure src="/static/img/docs/library-panels/used-in-list-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}} + {{< figure src="/static/img/docs/library-panels/unlink-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}} 1. Select the panel you want to unlink and update. 1. Click the title of the panel and then click **Edit**. The panel opens in edit mode. 1. Click the **Unlink** option on the top right corner of the UI. diff --git a/docs/sources/sharing/share-panel.md b/docs/sources/sharing/share-panel.md index 981296a97bb..fcab255abfd 100644 --- a/docs/sources/sharing/share-panel.md +++ b/docs/sources/sharing/share-panel.md @@ -1,20 +1,20 @@ +++ title = "Share a panel" -keywords = ["grafana", "dashboard", "documentation", "sharing"] +keywords = ["grafana", "dashboard", "documentation", "sharing", "library panel"] aliases = ["/docs/grafana/latest/dashboards/share-dashboard/","/docs/grafana/latest/reference/share_panel/"] weight = 6 +++ # Share a panel -You can share a panel as a direct link, as a snapshot or as an embedded link. +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 for any panel. To share a panel: 1. Click a panel title to open the panel menu. 1. Click **Share**. The share dialog opens and shows the Link tab. -![Panel share direct link](/static/img/docs/sharing/share-panel-direct-link-7-3.png) +![Panel share direct link](/static/img/docs/sharing/share-panel-direct-link-8-0.png) ## Use direct link The Link tab has the current time range, template variables and theme selected by default. You can optionally enable a shortened URL to share. @@ -46,7 +46,7 @@ A panel snapshot shares an interactive panel publicly. Grafana strips sensitive You can publish snapshots to your local instance or to [snapshot.raintank.io](http://snapshot.raintank.io). The latter is a free service provided by [Raintank](http://raintank.io), that allows 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. -![Panel share snapshot](/static/img/docs/sharing/share-panel-snapshot-7-3.png) +![Panel share snapshot](/static/img/docs/sharing/share-panel-snapshot-8-0.png) To publish a snapshot: @@ -60,7 +60,7 @@ If you created a snapshot by mistake, click **delete snapshot** to remove the sn You can embed a panel using an iframe on another web site. Unless anonymous access permission is enabled, the viewer must be signed into Grafana to view the graph. -![Panel share embed](/static/img/docs/sharing/share-panel-embedded-link-7-3.png) +![Panel share embed](/static/img/docs/sharing/share-panel-embedded-link-8-0.png) Here is an example of the HTML code: @@ -71,3 +71,14 @@ Here is an example of the HTML code: The result is an interactive Grafana graph embedded in an iframe: + +## Library panel + +To create a library panel from the Share Panel dialog: + +1. Click **Library panel**. + {{< figure src="/static/img/docs/library-panels/create-lib-panel-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the create library panel dialog" >}} +1. In **Library panel name**, enter the name. +1. In **Save in folder**, select the folder to save the library panel. By default, the General folder is selected. +1. Click **Create library panel** to save your changes. +1. Save the dashboard.