public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated screenshots, links and some wording (#67864)

Browse Source
This commit is contained in:
lwandz13
2023-05-09 13:07:03 -07:00
committed by GitHub
parent 5422609fb1
commit c9e5c229ec
1 changed files with 18 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/sources/datasources/prometheus/query-editor/index.md
+18 -23
View File
@@ -24,13 +24,11 @@ You can switch the Prometheus query editor between two modes:
- [Code mode](#code-mode), which provides a feature-rich editor for writing queries - [Code mode](#code-mode), which provides a feature-rich editor for writing queries
- [Builder mode](#builder-mode), which provides a visual query designer - [Builder mode](#builder-mode), which provides a visual query designer
{{< figure src="/static/img/docs/prometheus/header-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Editor toolbar" >}} {{< figure src="/static/img/docs/prometheus/editing-mode.png" max-width="500px" class="docs-image--no-shadow" caption="Query editor mode" >}}
To switch between the editor modes, select the corresponding **Builder** and **Code** tabs. To switch between the editor modes, select the corresponding **Builder** and **Code** tabs.
To run a query, select **Run queries** located at the top of the editor. To run a query, select **Run query** in the upper right of the editor.
> **Note:** To run Prometheus queries in [Explore]({{< relref "../../../explore" >}}), select **Run query**.
Each mode is synchronized with the other modes, so you can switch between them without losing your work, although there are some limitations. Each mode is synchronized with the other modes, so you can switch between them without losing your work, although there are some limitations.
@@ -46,7 +44,7 @@ For options and functions common to all query editors, refer to [Query and trans
You can configure Prometheus-specific options in the query editor by setting several options regardless of its mode. You can configure Prometheus-specific options in the query editor by setting several options regardless of its mode.
{{< figure src="/static/img/docs/prometheus/options-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Options" >}} {{< figure src="/static/img/docs/prometheus/options.png" max-width="500px" class="docs-image--no-shadow" caption="Options" >}}
### Legend ### Legend
@@ -55,7 +53,7 @@ The **Legend** setting defines the time series's name. You can use a predefined
| Option | Description | | Option | Description |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Auto** | Shows the value of a single label for each series with only one label, or displays all labels if a series has multiple labels. | | **Auto** | Shows the value of a single label for each series with only one label, or displays all labels if a series has multiple labels. |
| **Verbose** | Displays all labels. | | **Verbose** | Displays all label names. |
| **Custom** | Uses templating to select which labels will be included.<br/>For example, `{{hostname}}` is replaced by the label value for the label `hostname`.<br/>Clear the input and click outside of it to select another mode. | | **Custom** | Uses templating to select which labels will be included.<br/>For example, `{{hostname}}` is replaced by the label value for the label `hostname`.<br/>Clear the input and click outside of it to select another mode. |
### Min step ### Min step
@@ -68,11 +66,11 @@ This setting supports the `$__interval` and `$__rate_interval` macros.
You can switch between **Table**, **Time series**, and **Heatmap** options by configuring the query's **Format**. You can switch between **Table**, **Time series**, and **Heatmap** options by configuring the query's **Format**.
| Option | Description | | Option | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Table** | This works only in a [Table panel]{{< relref "../../../panels-visualizations/visualizations/table" >}}. | | **Table** | This works only in a [Table panel]({{< relref "../../../panels-visualizations/visualizations/table" >}}). |
| **Time series** | Uses the default time series format. | | **Time series** | Uses the default time series format. |
| **Heatmap** | Displays metrics of the Histogram type on a [Heatmap panel]{{< relref "../../../panels-visualizations/visualizations/heatmap" >}} by converting cumulative histograms to regular ones and sorting the series by the bucket bound. | | **Heatmap** | Displays metrics of the Histogram type on a [Heatmap panel]({{< relref "../../../panels-visualizations/visualizations/heatmap" >}}) by converting cumulative histograms to regular ones and sorting the series by the bucket bound. |
### Type ### Type
@@ -92,21 +90,18 @@ The **Type** setting selects the query type.
## Code mode ## Code mode
{{< figure src="/static/img/docs/prometheus/code-mode-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Code mode" >}} {{< figure src="/static/img/docs/prometheus/code-mode.png" max-width="500px" class="docs-image--no-shadow" caption="Code mode" >}}
In **Code mode**, you can write complex queries using a text editor with autocompletion features and syntax highlighting. In **Code mode**, you can write complex queries using a text editor with autocompletion features and syntax highlighting.
It also contains a [Metrics browser]({{< relref "#metrics-browser" >}}) to further help you write queries. It also contains a [Metrics browser]({{< relref "#metrics-browser" >}}) to further help you write queries.
For more information about Prometheus's query language, refer to the [Prometheus documentation](http://prometheus.io/docs/querying/basics/). For more information about Prometheus's query language (PromQL), see [Querying Prometheus](http://prometheus.io/docs/querying/basics/).
### Use autocompletion ### Use autocompletion
{{< figure src="/static/img/docs/prometheus/autocomplete-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Autocomplete" >}}
Code mode's autocompletion feature works automatically while typing. Code mode's autocompletion feature works automatically while typing.
To manually trigger autocompletion, use the keyboard shortcut <key>Ctrl</key>/<key>Cmd</key> + <key>Space</key>.
The query editor can autocomplete static functions, aggregations, and keywords, and also dynamic items like metrics and labels. The query editor can autocomplete static functions, aggregations, keywords, and also dynamic items like metrics and labels.
The autocompletion dropdown includes documentation for the suggested items where available. The autocompletion dropdown includes documentation for the suggested items where available.
To run a query in [Explore]({{< relref "../../../explore/" >}}), use the keyboard shortcut <key>Shift</key> + <key>Enter</key>. To run a query in [Explore]({{< relref "../../../explore/" >}}), use the keyboard shortcut <key>Shift</key> + <key>Enter</key>.
@@ -117,7 +112,7 @@ The metrics browser locates metrics and selects relevant labels to help you buil
When you open the browser, it displays all available metrics and labels. When you open the browser, it displays all available metrics and labels.
If supported by your Prometheus instance, each metric also displays its HELP and TYPE as a tooltip. If supported by your Prometheus instance, each metric also displays its HELP and TYPE as a tooltip.
{{< figure src="/static/img/docs/prometheus/metric-browser-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Metrics browser" >}} {{< figure src="/static/img/docs/prometheus/metric-browser.png" max-width="500px" class="docs-image--no-shadow" caption="Metrics browser" >}}
When you select a metric, the browser narrows down the available labels to show only the ones applicable to the metric. When you select a metric, the browser narrows down the available labels to show only the ones applicable to the metric.
You can then select one or more labels for which the available label values are shown in lists in the bottom section. You can then select one or more labels for which the available label values are shown in lists in the bottom section.
@@ -154,7 +149,7 @@ In addition to the **Run query** button and mode switcher, Builder mode includes
### Metric and labels ### Metric and labels
{{< figure src="/static/img/docs/prometheus/metric-select-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Metric and labels" >}} {{< figure src="/static/img/docs/prometheus/metrics-and-labels.png" max-width="500px" class="docs-image--no-shadow" caption="Metric and label filters" >}}
Select a specific metric name from the dropdown list. Select a specific metric name from the dropdown list.
The data source requests the list of available metrics from the Prometheus server based on the selected time rage. The data source requests the list of available metrics from the Prometheus server based on the selected time rage.
@@ -166,7 +161,7 @@ Use the `+` button to add a label, and the `x` button to remove a label.
### Operations ### Operations
{{< figure src="/static/img/docs/prometheus/operations-9-1.png" max-width="500px" class="docs-image--no-shadow" caption="Operations" >}} {{< figure src="/static/img/docs/prometheus/operations.png" max-width="500px" class="docs-image--no-shadow" caption="Operations" >}}
Select the `+ Operations` button to add operations to your query. Select the `+ Operations` button to add operations to your query.
The query editor groups operations into related sections, and you can type while the operations dropdown is open to search and filter the list. The query editor groups operations into related sections, and you can type while the operations dropdown is open to search and filter the list.
@@ -189,16 +184,16 @@ To re-order operations manually, drag the operation box by its name and drop it
#### Hints #### Hints
{{< figure src="/static/img/docs/prometheus/hint-8-5.png" max-width="500px" class="docs-image--no-shadow" caption="Hint" >}} {{< figure src="/static/img/docs/prometheus/hint-example.png" max-width="500px" class="docs-image--no-shadow" caption="Hint" >}}
The query editor can detect which operations are most appropriate for some selected metrics. The query editor can detect which operations are most appropriate for some selected metrics.
If it does, it displays a hint next to the `+ Operations` button. If it does, it displays a hint next to the `+ Operations` button.
To add the operations to your query, click the hint. To add the operation to your query, click the `hint`.
## Use Explain mode to understand queries ## Use Explain mode to understand queries
{{< figure src="/static/img/docs/prometheus/explain-8-5.png" max-width="500px" class="docs-image--no-shadow" caption="Explain mode" >}} {{< figure src="/static/img/docs/prometheus/explain-results.png" max-width="500px" class="docs-image--no-shadow" caption="Explain results" >}}
Explain mode helps you understand a query by displaying a step-by-step explanation of all query components and operations. Explain mode helps you understand a query by displaying a step-by-step explanation of all query components and operations.