Skip to content

N
nexpie-grafana-theme
Commit 367acc37 by Patrick O'Carroll Committed by Torkel Ödegaard
Options

Docs new updates (#9324) 

* replaced images, updating text(not finished)

* text uppdates for dashlist and singlestat(+img). updated the keyboard shortcuts

* deleted old shortcuts instruction

* another img update
parent e695ce4a
Showing with 43 additions and 85 deletions
docs/sources/features/panels/dashlist.md
......@@ -12,42 +12,23 @@ weight = 4
# Dashboard List Panel
The dashboard list panel allows you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, a search query and/or dashboard tags.
<img class="no-shadow" src="/img/docs/v45/dashboard-list-panels.png">
<img class="no-shadow" src="/img/docs/v2/dashboard_list_panels.png">
The dashboard list panel allows you to display dynamic links to other dashboards. The list can be configured to use starred dashboards, recently viewed dashboards, a search query and/or dashboard tags.
> On each dashboard load, the dashlist panel will re-query the dashboard list, always providing the most up to date results.
## Mode: Starred Dashboards
## Dashboard List Options
The `starred` dashboard selection displays starred dashboards, up to the number specified in the `Limit Number to` field, in alphabetical order. On dashboard load, the dashlist panel will re-query the favorites to appear in dashboard list panel, always providing the most up to date results.
{{< docs-imagebox img="/img/docs/v45/dashboard-list-options.png" max-width="600px" class="docs-image--no-shadow">}}
<img class="no-shadow" src="/img/docs/v2/dashboard_list_config_starred.png">
## Mode: Search Dashboards
The panel may be configured to search by either string query or tag(s). On dashboard load, the dashlist panel will re-query the dashboard list, always providing the most up to date results.
To configure dashboard list in this manner, select `search` from the Mode select box. When selected, the Search Options section will appear.
Name | Description
------------ | -------------
Mode | Set search or starred mode
Query | If in search mode specify the search query
Tags | if in search mode specify dashboard tags to search for
Limit number to | Specify the maximum number of dashboards
### Search by string
To search by a string, enter a search query in the `Search Options: Query` field. Queries are case-insensitive, and partial values are accepted.
<img class="no-shadow" src="/img/docs/v2/dashboard_list_config_string.png">
### Search by tag
To search by one or more tags, enter your selection in the `Search Options: Tags:` field. Note that existing tags will not appear as you type, and *are* case sensitive. To see a list of existing tags, you can always return to the dashboard, open the Dashboard Picker at the top and click `tags` link in the search bar.
<img class="no-shadow" src="/img/docs/v2/dashboard_list_config_tags.png">
1. `Starred`: The starred dashboard selection displays starred dashboards in alphabetical order.
2. `Recently Viewed`: The recently viewed dashboard selection displays recently viewed dashboards in alphabetical order.
3. `Search`: The search dashboard selection displays dashboards by search query or tag(s).
4. `Show Headings`: When show headings is ticked the choosen list selection(Starred, Recently Viewed, Search) is shown as a heading.
5. `Max Items`: Max items set the maximum of items in a list.
6. `Query`: Here is where you enter your query you want to search by. Queries are case-insensitive, and partial values are accepted.
7. `Tags`: Here is where you enter your tag(s) you want to search by. Note that existing tags will not appear as you type, and *are* case sensitive. To see a list of existing tags, you can always return to the dashboard, open the Dashboard Picker at the top and click `tags` link in the search bar.
> When multiple tags and strings appear, the dashboard list will display those matching ALL conditions.
......
docs/sources/features/panels/graph.md
......@@ -13,10 +13,12 @@ weight = 1
The main panel in Grafana is simply named Graph. It provides a very rich set of graphing options.
<img src="/img/docs/v1/graph_overview.png" class="no-shadow">
<img src="/img/docs/v45/graph_overview.png" class="no-shadow">
Clicking the title for a panel exposes a menu. The `edit` option opens additional configuration
1. Clicking the title for a panel exposes a menu. The `edit` option opens additional configuration
options for the panel.
2. Click to open color & axis selection.
3. Click to only show this series. Shift/Ctrl + click to hide series.
## General
......@@ -156,4 +158,4 @@ There is an option under Series overrides to draw lines as dashes. Set Dashes to
## Time Range
![](/img/docs/v2/graph_time_range.png)
<img src="/img/docs/v45/graph-time-range.png" class="no-shadow">
docs/sources/features/panels/singlestat.md
......@@ -12,7 +12,7 @@ weight = 2
# Singlestat Panel
![](/img/docs/v1/singlestat_panel2.png)
{{< docs-imagebox img="/img/docs/v45/singlestat-panel.png" class="docs-image--no-shadow">}}
The Singlestat Panel allows you to show the one main summary stat of a SINGLE series. It reduces the series into a single number (by looking at the max, min, average, or sum of values in the series). Singlestat also provides thresholds to color the stat or the Panel background. It can also translate the single number into a text value, and show a sparkline summary of the series.
......@@ -20,11 +20,9 @@ The Singlestat Panel allows you to show the one main summary stat of a SINGLE se
The singlestat panel has a normal query editor to allow you define your exact metric queries like many other Panels. Through the Options tab, you can access the Singlestat-specific functionality.
<img class="no-shadow" src="/img/docs/v1/Singlestat-BaseSettings.png">
<img class="no-shadow" src="/img/docs/v45/singlestat-value-options.png">
1. `Big Value`: Big Value refers to how we display the main stat for the Singlestat Panel. This is always a single value that is displayed in the Panel in between two strings, `Prefix` and `Suffix`. The single number is calculated by choosing a function (min,max,average,current,total) of your metric query. This functions reduces your query into a single numeric value.
2. `Font Size`: You can use this section to select the font size of the different texts in the Singlestat Panel, i.e. prefix, value and postfix.
3. `Values`: The Value fields let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. You can also set the font size of the Value field and font-size (as a %) of the metric query that the Panel is configured with. This reduces the entire query into a single summary value that is displayed.
1. `Stats`: The Stats field let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. This reduces the entire query into a single summary value that is displayed.
* `min` - The smallest value in the series
* `max` - The largest value in the series
* `avg` - The average of all the non-null values in the series
......@@ -34,47 +32,58 @@ The singlestat panel has a normal query editor to allow you define your exact me
* `delta` - The total incremental increase (of a counter) in the series. An attempt is made to account for counter resets, but this will only be accurate for single instance metrics. Used to show total counter increase in time series.
* `diff` - The difference betwen 'current' (last value) and 'first'.
* `range` - The difference between 'min' and 'max'. Useful the show the range of change for a gauge.
4. `Prefix/Postfix`: The Prefix/Postfix fields let you define a custom label and font-size (as a %) to appear *before/after* the value. The `$__name` variable can be used here to use the series name or alias from the metric query.
5. `Units`: Units are appended to the the Singlestat within the panel, and will respect the color and threshold settings for the value.
6. `Decimals`: The Decimal field allows you to override the automatic decimal precision, and set it explicitly.
2. `Prefix/Postfix`: The Prefix/Postfix fields let you define a custom label to appear *before/after* the value. The `$__name` variable can be used here to use the series name or alias from the metric query.
3. `Units`: Units are appended to the the Singlestat within the panel, and will respect the color and threshold settings for the value.
4. `Decimals`: The Decimal field allows you to override the automatic decimal precision, and set it explicitly.
5. `Font Size`: You can use this section to select the font size of the different texts in the Singlestat Panel, i.e. prefix, value and postfix.
### Coloring
The coloring options of the Singlestat Panel config allow you to dynamically change the colors based on the Singlestat value.
<img class="no-shadow" src="/img/docs/v1/Singlestat-Coloring.png">
{{< docs-imagebox img="/img/docs/v45/singlestat-color-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
1. `Background`: This checkbox applies the configured thresholds and colors to the entirety of the Singlestat Panel background.
2. `Value`: This checkbox applies the configured thresholds and colors to the summary stat.
3. `Thresholds`: Change the background and value colors dynamically within the panel, depending on the Singlestat value. The threshold field accepts **2 comma-separated** values which represent 3 ranges that correspond to the three colors directly to the right. For example: if the thresholds are 70, 90 then the first color represents < 70, the second color represents between 70 and 90 and the third color represents > 90.
4. `Colors`: Select a color and opacity
2. `Thresholds`: Change the background and value colors dynamically within the panel, depending on the Singlestat value. The threshold field accepts **2 comma-separated** values which represent 3 ranges that correspond to the three colors directly to the right. For example: if the thresholds are 70, 90 then the first color represents < 70, the second color represents between 70 and 90 and the third color represents > 90.
3. `Colors`: Select a color and opacity
4. `Value`: This checkbox applies the configured thresholds and colors to the summary stat.
5. `Invert order`: This link toggles the threshold color order.</br>For example: Green, Orange, Red (<img class="no-shadow" src="/img/docs(v1/gyr.png">) will become Red, Orange, Green (<img class="no-shadow" src="/img/docs/v1/ryg.png">).
### Spark Lines
Sparklines are a great way of seeing the historical data related to the summary stat, providing valuable context at a glance. Sparklines act differently than traditional Graph Panels and do not include x or y axis, coordinates, a legend, or ability to interact with the graph.
<img class="no-shadow" src="/img/docs/v1/Singlestat-Sparklines.png">
{{< docs-imagebox img="/img/docs/v45/singlestat-spark-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
1. `Show`: The show checkbox will toggle whether the spark line is shown in the Panel. When unselected, only the Singlestat value will appear.
2. `Background`: Check if you want the sparklines to take up the full panel width, or uncheck if they should be below the main Singlestat value.
2. `Full Height`: Check if you want the sparklines to take up the full panel height, or uncheck if they should be below the main Singlestat value.
3. `Line Color`: This color selection applies to the color of the sparkline itself.
4. `Fill Color`: This color selection applies to the area below the sparkline.
> ***Pro-tip:*** Reduce the opacity on fill colors for nice looking panels.
### Gauge
Gauges gives a clear picture of how high a value is in it's context. It's a great way to see if a value is close to the thresholds. The gauge uses the colors set in the color options.
{{< docs-imagebox img="/img/docs/v45/singlestat-gauge-options.png" max-width="500px" class="docs-image--right docs-image--no-shadow">}}
1. `Show`: The show checkbox will toggle wether the gauge is shown in the panel. When unselected, only the Singlestat value will appear.
2. `Min/Max`: This sets the start and end point for the gauge.
3. `Threshold Labels`: Check if you want to show the threshold labels. Thresholds are set in the color options.
4. `Threshold Markers`: Check if you want to have a second meter showing the thresholds.
### Value to text mapping
Value to text mapping allows you to translate the value of the summary stat into explicit text. The text will respect all styling, thresholds and customization defined for the value. This can be useful to translate the number of the main Singlestat value into a context-specific human-readable word or message.
{{< docs-imagebox img="/img/docs/v45/singlestat-value-mapping.png" class="docs-image--right docs-image--no-shadow">}}
<img class="no-shadow" src="/img/docs/v1/Singlestat-ValueMapping.png">
Value to text mapping allows you to translate the value of the summary stat into explicit text. The text will respect all styling, thresholds and customization defined for the value. This can be useful to translate the number of the main Singlestat value into a context-specific human-readable word or message.
## Troubleshooting
### Multiple Series Error
<img class="no-shadow" src="/img/docs/v2/Singlestat-MultiSeriesError.png">
{{< docs-imagebox img="/img/docs/v45/singelstat-multiple-series-error.png" class="docs-image--right docs-image--no-shadow">}}
Grafana 2.5 introduced stricter checking for multiple-series on singlestat panels. In previous versions, the panel logic did not verify that only a single series was used, and instead, displayed the first series encountered. Depending on your data source, this could have lead to inconsistent data being shown and/or a general confusion about which metric was being displayed.
......
docs/sources/reference/keyboard_shortcuts.md deleted 100644 → 0
+++
title = "Keyboard shortcuts"
keywords = ["grafana", "dashboard", "documentation", "shortcuts"]
type = "docs"
[menu.docs]
parent = "dashboard_features"
weight = 8
+++
# Keyboard Shortcuts
No mouse? No problem. Grafana has extensive keyboard shortcuts to allow you to navigate throughout the interface. This comes in especially handy when dealing with dealing with single-purpose machines powering on-wall displays that may not have a mouse available.
## Dashboard Keyboard Shortcuts
Press `Shift`+`?` to open the keyboard shortcut dialog from anywhere within the dashboard views.
<img class="no-shadow" src="/img/docs/v2/Grafana-Keyboard-Shortcuts.gif" style="width:80%;">
|Shortcut|Action|
|---|---|
|`Esc`|Exit fullscreen edit/view mode, close search or any editor view|
|`F`|Open dashboard search view (also contains import/playlist controls)|
|`R`|Refresh (Fetches new data and rerenders panels)|
|`CTRL`+`S`|Save dashboard|
|`CTRL`+`H`|Hide row controls|
|`CTRL`+`Z`|Zoom out|
|`CTRL`+`O`|Enable/Disable shared graph crosshair|
**Note**: Grafana keyboard shortcuts are the same across operating system.
Have a suggestion for a new keyboard shortcut? Let us know.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment