From 865636993fcc4a15151692a9840808331cfa18b3 Mon Sep 17 00:00:00 2001 From: Isabel <76437239+imatwawana@users.noreply.github.com> Date: Mon, 5 Jun 2023 14:45:36 -0400 Subject: [PATCH] docs: add datasource selector content (#69280) * updated create dashboard topic including adding screenshot of DS selector * finished editing build dashboards - create dashboards * finished data source selection edits' : * updated tutorials * reverted tutorial to old nav to match reality and added that prom DS is preselected * wording edits * Apply suggestions from code review Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com> * add that configure DS is only for admins --------- Co-authored-by: Christopher Moyer <35463610+chri2547@users.noreply.github.com> --- .../create-dashboard/index.md | 18 +++++++++++++++--- .../getting-started/build-first-dashboard.md | 9 +++++---- .../panel-editor-overview/index.md | 4 ++-- .../query-transform-data/_index.md | 3 +++ .../tutorials/grafana-fundamentals/index.md | 17 ++++++++--------- .../index.md | 19 ++++++++++--------- 6 files changed, 43 insertions(+), 27 deletions(-) diff --git a/docs/sources/dashboards/build-dashboards/create-dashboard/index.md b/docs/sources/dashboards/build-dashboards/create-dashboard/index.md index 38f7752c0e3..316b3953291 100644 --- a/docs/sources/dashboards/build-dashboards/create-dashboard/index.md +++ b/docs/sources/dashboards/build-dashboards/create-dashboard/index.md @@ -29,11 +29,21 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee ![Empty dashboard state](/media/docs/grafana/dashboards/empty-dashboard-9.5.png) -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. +1. In the modal that opens, do one of the following: + + - Select one of your existing data sources. + - Select one of the Grafana's [built-in special data sources]({{< relref "../../../datasources/#special-data-sources" >}}). + - Click **Configure a new data source** to set up a new one (Admins only). + + {{< figure class="float-right" src="/media/docs/grafana/dashboards/screenshot-data-source-selector-10.0.png" max-width="800px" alt="Select data source modal" >}} + + The **Edit panel** view opens with your data source selected. + You can change the panel data source later using the dropdown in the **Query** tab of the panel editor if needed. For more information about data sources, refer to [Data sources]({{< relref "../../../datasources/" >}}) for specific guidelines. +1. Write or construct a query in the query language of your data source. + 1. Click the Refresh dashboard icon to query the data source. ![Refresh dashboard icon](/media/docs/grafana/dashboards/screenshot-refresh-dashboard-9.5.png) @@ -64,7 +74,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee 1. Click **Save**. 1. To add more panels to the dashboard, click **Add** in the dashboard header and select **Visualization** in the dropdown. - ![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-9.5.png) + ![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-10.0.png) + + When you add additional panels to the dashboard, you're taken straight to the **Edit panel** view. ## Configure repeating rows diff --git a/docs/sources/getting-started/build-first-dashboard.md b/docs/sources/getting-started/build-first-dashboard.md index 909fc2c7e53..981543e9fcc 100644 --- a/docs/sources/getting-started/build-first-dashboard.md +++ b/docs/sources/getting-started/build-first-dashboard.md @@ -43,7 +43,7 @@ We strongly recommend that you change the default administrator password. If you've already set up a data source that you know how to query, refer to [Create a dashboard]({{< relref "../dashboards/build-dashboards/create-dashboard" >}}) instead. -To create your first dashboard using the built-in `Grafana` data source: +To create your first dashboard using the built-in `-- Grafana --` data source: 1. Click **Dashboards** in the left-side menu. 1. On the Dashboards page, click **New** and select **New Dashboard** from the dropdown menu. @@ -51,10 +51,11 @@ To create your first dashboard using the built-in `Grafana` data source: ![Empty dashboard state](/media/docs/grafana/dashboards/empty-dashboard-9.5.png) -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. +1. In the modal that opens, click `-- Grafana --`: - This generates the Random Walk dashboard. + {{< figure class="float-right" src="/media/docs/grafana/dashboards/screenshot-data-source-selector-10.0.png" max-width="800px" alt="Select data source modal" >}} + + This configures your [query]({{< relref "../panels-visualizations/query-transform-data#add-a-query" >}}) and generates the Random Walk dashboard. 1. Click the Refresh dashboard icon to query the data source. diff --git a/docs/sources/panels-visualizations/panel-editor-overview/index.md b/docs/sources/panels-visualizations/panel-editor-overview/index.md index 928b22ad30d..da68b025596 100644 --- a/docs/sources/panels-visualizations/panel-editor-overview/index.md +++ b/docs/sources/panels-visualizations/panel-editor-overview/index.md @@ -30,7 +30,7 @@ In the panel editor, you can update all the elements of a visualization includin To add a panel in a new dashboard click **+ Add visualization** in the middle of the dashboard. To add a panel to an existing dashboard, click **Add** in the dashboard header and select **Visualization** in the dropdown: -![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-9.5.png) +![Add dropdown](/media/docs/grafana/dashboards/screenshot-add-dropdown-10.0.png) ## Panel editor @@ -51,7 +51,7 @@ This section describes the areas of the Grafana panel editor. 1. Data section: The data section contains tabs where you enter queries, transform your data, and create alert rules (if applicable). - - **Query tab:** Select your data source and enter queries here. For more information, refer to [Add a query]({{< relref "../query-transform-data/#add-a-query" >}}). + - **Query tab:** Select your data source and enter queries here. For more information, refer to [Add a query]({{< relref "../query-transform-data/#add-a-query" >}}). When you create a new dashboard, you'll be prompted to select a data source before you get to the panel editor. You set or update the data source in existing dashboards using the dropdown in the **Query** tab. - **Transform tab:** Apply data transformations. For more information, refer to [Transform data]({{< relref "../query-transform-data/transform-data/" >}}). - **Alert tab:** Write alert rules. For more information, refer to [Overview of Grafana 8 alerting]({{< relref "../../alerting/" >}}). diff --git a/docs/sources/panels-visualizations/query-transform-data/_index.md b/docs/sources/panels-visualizations/query-transform-data/_index.md index 70c1386500d..9fc71e326b1 100644 --- a/docs/sources/panels-visualizations/query-transform-data/_index.md +++ b/docs/sources/panels-visualizations/query-transform-data/_index.md @@ -101,6 +101,9 @@ When you create a panel, Grafana automatically selects the default data source. 1. Edit the panel to which you're adding a query. 1. Click the **Query** tab. 1. Click the **Data source** drop-down menu and select a data source. + + If you're creating a new dashboard, you'll be prompted to select a data source when you add the first panel. + 1. Click **Query options** to configure the maximum number of data points you need. For more information about query options, refer to [Query options]({{< relref "#query-options" >}}). 1. Write the query using the query editor. diff --git a/docs/sources/tutorials/grafana-fundamentals/index.md b/docs/sources/tutorials/grafana-fundamentals/index.md index bfa6902e772..903af2c7134 100644 --- a/docs/sources/tutorials/grafana-fundamentals/index.md +++ b/docs/sources/tutorials/grafana-fundamentals/index.md @@ -117,7 +117,7 @@ The sample application exposes metrics which are stored in [Prometheus](https:// To be able to visualize the metrics from Prometheus, you first need to add it as a data source in Grafana. -1. In the sidebar, hover your cursor over the **Configuration** (gear) icon, and then click **Data sources**. +1. In the sidebar, hover over the **Configuration** (gear) icon, and then click **Data sources**. 1. Click **Add data source**. 1. In the list of data sources, click **Prometheus**. 1. In the URL box, enter **http\://prometheus:9090**. @@ -131,7 +131,7 @@ Grafana Explore is a workflow for troubleshooting and data exploration. In this > Ad-hoc queries are queries that are made interactively, with the purpose of exploring data. An ad-hoc query is commonly followed by another, more specific query. -1. In the sidebar, click the **Explore** (compass) icon. +1. In the sidebar, click the **Explore** (compass) icon. The Prometheus data source that you added will already be selected. 1. In the **Query editor**, where it says _Enter a PromQL query…_, enter `tns_request_duration_seconds_count` and then press Shift + Enter. A graph appears. 1. In the top right corner, click the dropdown arrow on the **Run Query** button, and then select **5s**. Grafana runs your query and updates the graph every 5 seconds. @@ -166,7 +166,7 @@ Depending on your use case, you might want to group on other labels. Try groupin Grafana supports log data sources, like [Loki](/oss/loki/). Just like for metrics, you first need to add your data source to Grafana. -1. In the sidebar, hover your cursor over the **Configuration** (gear) icon, and then click **Data Sources**. +1. In the sidebar, hover over the **Configuration** (gear) icon, and then click **Data Sources**. 1. Click **Add data source**. 1. In the list of data sources, click **Loki**. 1. In the URL box, enter [http://loki:3100](http://loki:3100). @@ -215,9 +215,8 @@ 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. 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 sidebar, hover over the **Create** (plus sign) icon and then click **Dashboard**. +1. Click **Add new panel**. The Prometheus data source that you added will already be selected. 1. In the **Query** tab below the graph, enter the query from earlier and then press Shift + Enter: ``` @@ -300,7 +299,7 @@ Your request bin is now waiting for the first request. Next, let's configure a Contact Point in Grafana's Alerting UI to send notifications to our Request Bin. -1. Return to Grafana. In Grafana's sidebar, hover your cursor over the **Alerting** (bell) icon and then click **Contact points**. +1. Return to Grafana. In Grafana's sidebar, hover over the **Alerting** (bell) icon and then click **Contact points**. 1. Click **+ New contact point**. 1. In **Name**, write **RequestBin**. 1. In **Contact point type**, choose **Webhook**. @@ -315,7 +314,7 @@ We have now created a dummy webhook endpoint and created a new Alerting Contact Now that Grafana knows how to notify us, it's time to set up an alert rule: -1. In Grafana's sidebar, hover the cursor over the **Alerting** (bell) icon and then click **Alert rules**. +1. In Grafana's sidebar, hover over the **Alerting** (bell) icon and then click **Alert rules**. 1. Click **+ New alert rule**. 1. For **Section 1**, name the rule `fundamentals-test`, and set **Rule type** to **Grafana Managed Alert**. For **Folder** type `fundamentals` and in the box that appears, press **Create: fundamentals**. 1. For **Section 2**, find the **query A** box. Choose your Prometheus datasource and enter the same query that we used in our earlier panel: `sum(rate(tns_request_duration_seconds_count[5m])) by(route)`. Press **Run queries**. You should see some data in the graph. @@ -323,7 +322,7 @@ Now that Grafana knows how to notify us, it's time to set up an alert rule: 1. In **Section 3**, enter `30s` for the **Evaluate every** field. For the purposes of this tutorial, the evaluation interval is intentionally short. This makes it easier to test. In the **for** field, enter `0m`. This setting makes Grafana wait until an alert has fired for a given time before Grafana sends the notification. 1. In **Section 4**, you can add some sample text to your summary message. [Read more about message templating here](/docs/grafana/latest/alerting/unified-alerting/message-templating/). 1. Click **Save and exit** at the top of the page. -1. In Grafana's sidebar, hover the cursor over the **Alerting** (bell) icon and then click **Notification policies**. +1. In Grafana's sidebar, hover over the **Alerting** (bell) icon and then click **Notification policies**. 1. Under **Default policy**, select **...** › **Edit** and change the **Default contact point** to **RequestBin**. As a system grows, admins can use the **Notification policies** setting to organize and match alert rules to specific contact points. diff --git a/docs/sources/tutorials/stream-metrics-from-telegraf-to-grafana/index.md b/docs/sources/tutorials/stream-metrics-from-telegraf-to-grafana/index.md index 822006b2fcf..5699d3d26f4 100644 --- a/docs/sources/tutorials/stream-metrics-from-telegraf-to-grafana/index.md +++ b/docs/sources/tutorials/stream-metrics-from-telegraf-to-grafana/index.md @@ -29,9 +29,9 @@ In this tutorial, you'll: ## Run Grafana and create admin token -1. Run Grafana following [installation instructions](/docs/grafana/latest/installation/) for your operating system -1. Log in and go to Configuration -> API Keys -1. Press "Add API key" button and create a new API token with **Admin** role +1. Run Grafana following [installation instructions](/docs/grafana/latest/installation/) for your operating system. +1. Log in and go to Configuration -> API Keys. +1. Press "Add API key" button and create a new API token with **Admin** role. ## Configure and run Telegraf @@ -65,12 +65,13 @@ The only thing left here is to create a dashboard with streaming data. ## Create dashboard with streaming data -1. Create new dashboard -1. Press Add empty panel -1. Select `-- Grafana --` datasource -1. Select `Live Measurements` query type -1. Find and select `stream/custom_stream_id/cpu` measurement for Channel field -1. Save dashboard changes +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 modal that opens, select the `-- Grafana --` data source. +1. Select `Live Measurements` query type. +1. Find and select `stream/custom_stream_id/cpu` measurement for Channel field. +1. Save dashboard changes. After making these steps Grafana UI should subscribe to the channel `stream/custom_stream_id/cpu` and you should see CPU data updates coming from Telegraf in near real-time.