diff --git a/docs/sources/dashboards/build-dashboards/create-dashboard/index.md b/docs/sources/dashboards/build-dashboards/create-dashboard/index.md index 3b7bf1c5371..ebefd198ad4 100644 --- a/docs/sources/dashboards/build-dashboards/create-dashboard/index.md +++ b/docs/sources/dashboards/build-dashboards/create-dashboard/index.md @@ -23,19 +23,20 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee **To create a dashboard**: -1. Sign in to Grafana, hover your cursor over **Dashboard**, and click **+ New Dashboard**. -1. Click **Add a new panel**. -1. In the first line of the **Query** tab, click the drop-down list and select a data source. +1. Click **Dashboards** in the left-side menu. +1. Click **New** and select **New Dashboard**. +1. On the empty dashboard, click **+ Add visualization**. +1. In the first line of the **Query** tab, click the dropdown list and select a data source. 1. Write or construct a query in the query language of your data source. For more information about data sources, refer to [Data sources]({{< relref "../../../datasources/" >}}) for specific guidelines. -1. In the Visualization list, select a visualization type. +1. In the visualization list, select a visualization type. + + ![Visualization selector](/media/docs/grafana/dashboards/screenshot-select-visualization-9-5.png) Grafana displays a preview of your query results with the visualization applied. - ![](/static/img/docs/panel-editor/select-visualization-8-0.png) - For more information about individual visualizations, refer to [Visualizations options]({{< relref "../../../panels-visualizations/visualizations/" >}}). 1. Refer to the following documentation for ways you can adjust panel settings. @@ -48,9 +49,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee - [Configure thresholds]({{< relref "../../../panels-visualizations/configure-thresholds/" >}}) - [Configure standard options]({{< relref "../../../panels-visualizations/configure-standard-options/" >}}) -1. Add a note to describe the visualization (or describe your changes) and then click **Save** in the upper-right corner of the page. - - Notes can be helpful if you need to revert the dashboard to a previous version. +1. When you've finished editing your panel, click **Save** in the top right corner. +1. Enter a name for your dashboard and select a folder, if applicable. +1. Click **Save**. ## Configure repeating rows @@ -64,13 +65,15 @@ To see an example of repeating rows, refer to [Dashboard with repeating rows](ht **To configure repeating rows:** -1. On the dashboard home page, click **Add panel**. +1. Click **Dashboards** in the left-side 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 dropdown. -1. On the **Add a panel** dialog box, click **Add a new row**. + If the dashboard is empty, you can click the **+ Add row** button in the middle of the dashboard. 1. Hover over the row title and click the cog icon. - -1. On the **Row Options** dialog box, add a title and select the variable for which you want to add repeating rows. +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**. > **Note:** To provide context to dashboard users, add the variable to the row title. @@ -78,14 +81,14 @@ To see an example of repeating rows, refer to [Dashboard with repeating rows](ht You can place a panel on a dashboard in any location. -1. Open the dashboard. - +1. Click **Dashboards** in the left-side menu. +1. Navigate to the dashboard you want to work on. 1. Click the panel title and drag the panel to the new location. ## Resize a panel You can size a dashboard panel to suits your needs. -1. Open the dashboard. - +1. Click **Dashboards** in the left-side menu. +1. Navigate to the dashboard you want to work on. 1. To adjust the size of the panel, click and drag the lower-right corner of the panel. 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 2443daa2b5b..ab1c8e1f06f 100644 --- a/docs/sources/dashboards/build-dashboards/manage-library-panels/index.md +++ b/docs/sources/dashboards/build-dashboards/manage-library-panels/index.md @@ -40,12 +40,9 @@ Once created, you can modify the library panel using any dashboard on which it a Add a Grafana library panel to a dashboard when you want to provide visualizations to other dashboard users. -1. Hover over the **Dashboards** option on the left menu, then select **New dashboard** from the drop-down options. - - The **Add** panel dialog opens. - {{< figure src="/static/img/docs/library-panels/add-library-panel-8-0.png" class="docs-image--no-shadow" max-width= "900px" caption="Screenshot of the edit panel" >}} - -1. Click the **Add a panel from the panel library** option. +1. Click **Dashboards** in the left-side menu. +1. Click **New** and select **New Dashboard**. +1. On the empty dashboard, click **+ Import library panel**. You will see a list of your library panels. @@ -56,17 +53,20 @@ Add a Grafana library panel to a dashboard when you want to provide visualizatio Unlink a library panel when you want to make a change to the panel and not affect other instances of the library panel. -1. Hover over **Dashboard** on the left menu, and then click **Library panels**. +1. Click **Dashboards** in the left-side menu. +1. Click **Library panels**. 1. Select a library panel that is being used in different dashboards. 1. Select the panel you want to unlink. -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 page. +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. ## View a list of library panels You can view a list of available library panels and search for a library panel. -1. Hover over the **Dashboard** option on the left menu, then click **Library panels**. +1. Click **Dashboards** in the left-side menu. +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" >}} @@ -79,8 +79,6 @@ You can view a list of available library panels and search for a library panel. Delete a library panel when you no longer need it. -1. Hover over **Dashboard** on the left menu, and select **Library panels**. - -1. Select the panel you want to delete. - +1. Click **Dashboards** in the left-side menu. +1. Click **Library panels**. 1. Click the delete icon next to the library panel name. diff --git a/docs/sources/getting-started/build-first-dashboard.md b/docs/sources/getting-started/build-first-dashboard.md index 4882e1a571c..4f054d85e3f 100644 --- a/docs/sources/getting-started/build-first-dashboard.md +++ b/docs/sources/getting-started/build-first-dashboard.md @@ -40,15 +40,15 @@ To sign in to Grafana for the first time: To create your first dashboard: 1. Click **Dashboards** in the left-side menu. -1. On the Dashboards, click **New** and select **New Dashboard** from dropdown menu. -1. On the dashboard, click **Add a new panel**. +1. On the Dashboards page, click **New** and select **New Dashboard** from the dropdown menu. +1. On the dashboard, click **+ Add visualization**. 1. In the New dashboard/Edit panel view, go to the **Query** tab. 1. Configure your [query]({{< relref "../panels-visualizations/query-transform-data/#add-a-query" >}}) by selecting `-- Grafana --` from the data source selector. This generates the Random Walk dashboard. 1. Click **Save** in the top right corner of your screen to save the dashboard. -1. Add a descriptive name, and then click **Save**. +1. Add a descriptive name for the dashboard, and then click **Save**. Congratulations, you have created your first dashboard and it is displaying results. diff --git a/docs/sources/tutorials/grafana-fundamentals/index.md b/docs/sources/tutorials/grafana-fundamentals/index.md index 8de83359849..bfa6902e772 100644 --- a/docs/sources/tutorials/grafana-fundamentals/index.md +++ b/docs/sources/tutorials/grafana-fundamentals/index.md @@ -215,16 +215,17 @@ Dashboards consist of _panels_, each representing a part of the story you want y Every panel consists of a _query_ and a _visualization_. The query defines _what_ data you want to display, whereas the visualization defines _how_ the data is displayed. -1. In the sidebar, hover your cursor over the **Create** (plus sign) icon and then click **Dashboard**. -1. Click **Add a new panel**. -1. In the **Query editor** below the graph, enter the query from earlier and then press Shift + Enter: +1. Click **Dashboard** in the left-side menu. +1. On the Dashboards page, click **New** and select **New Dashboard** in the dropdown. +1. Click **+ Add visualization**. +1. In the **Query** tab below the graph, enter the query from earlier and then press Shift + Enter: ``` sum(rate(tns_request_duration_seconds_count[5m])) by(route) ``` 1. In the **Legend** field, enter **{{route}}** to rename the time series in the legend. The graph legend updates when you click outside the field. -1. In the Panel editor on the right, under **Settings**, change the panel title to "Traffic". +1. In the panel editor on the right, under **Panel options**, change the panel title to "Traffic". 1. Click **Apply** in the top-right corner to save the panel and go back to the dashboard view. 1. Click the **Save dashboard** (disk) icon at the top of the dashboard to save your dashboard. 1. Enter a name in the **Dashboard name** field and then click **Save**.