docs(): fixing image urls in docs

This commit is contained in:
Torkel Ödegaard
2016-11-04 20:29:17 +01:00
parent 3cc4a194a9
commit 2b81b204aa
31 changed files with 141 additions and 153 deletions

View File

@ -13,7 +13,7 @@ weight = 2
Annotations provide a way to mark points on the graph with rich events. When you hover over an annotation
you can get title, tags, and text information for the event.
![](img/docs/v1/annotated_graph1.png)
![](/img/docs/v1/annotated_graph1.png)
To add an annotation query click dashboard settings icon in top menu and select `Annotations` from the
dropdown. This will open the `Annotations` edit view. Click the `Add` tab to add a new annotation query.
@ -28,7 +28,7 @@ Graphite supports two ways to query annotations.
- Graphite events query, use the `Graphite event tags` text input, specify an tag or wildcard (leave empty should also work)
## Elasticsearch annotations
![](img/docs/v2/annotations_es.png)
![](/img/docs/v2/annotations_es.png)
Grafana can query any Elasticsearch index for annotation events. The index name can be the name of an alias or an index wildcard pattern.
You can leave the search query blank or specify a lucene query.
@ -39,14 +39,14 @@ as the name for the fields that should be used for the annotation title, tags an
> **Note** The annotation timestamp field in elasticsearch need to be in UTC format.
## InfluxDB Annotations
![](img/docs/v2/annotations_influxdb.png)
![](/img/docs/v2/annotations_influxdb.png)
For InfluxDB you need to enter a query like in the above screenshot. You need to have the ```where $timeFilter``` part.
If you only select one column you will not need to enter anything in the column mapping fields.
## Prometheus Annotations
![](img/docs/v3/annotations_prom.png)
![](/img/docs/v3/annotations_prom.png)
Prometheus supports two ways to query annotations.

View File

@ -13,7 +13,7 @@ weight = 4
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/v2/dashboard_list_panels.png">
<img class="no-shadow" src="/img/docs/v2/dashboard_list_panels.png">
> On each dashboard load, the dashlist panel will re-query the dashboard list, always providing the most up to date results.
@ -21,7 +21,7 @@ The dashboard list panel allows you to display dynamic links to other dashboards
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.
<img class="no-shadow" src="img/docs/v2/dashboard_list_config_starred.png">
<img class="no-shadow" src="/img/docs/v2/dashboard_list_config_starred.png">
## Mode: Search Dashboards
@ -42,11 +42,11 @@ 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">
<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">
<img class="no-shadow" src="/img/docs/v2/dashboard_list_config_tags.png">
> When multiple tags and strings appear, the dashboard list will display those matching ALL conditions.

View File

@ -17,7 +17,7 @@ Dashboards are exported in Grafana JSON format, and contain everything you need
The export feature is accessed from the share menu.
<img src="img/docs/v31/export_menu.png">
<img src="/img/docs/v31/export_menu.png">
### Making a dashboard portable
@ -31,12 +31,12 @@ the dashboard, and will also be added as an required input when the dashboard is
To import a dashboard open dashboard search and then hit the import button.
<img src="img/docs/v31/import_step1.png">
<img src="/img/docs/v31/import_step1.png">
From here you can upload a dashboard json file, paste a [Grafana.net](https://grafana.net) dashboard
url or paste dashboard json text directly into the text area.
<img src="img/docs/v31/import_step2.png">
<img src="/img/docs/v31/import_step2.png">
In step 2 of the import process Grafana will let you change the name of the dashboard, pick what
data source you want the dashboard to use and specify any metric prefixes (if the dashboard use any).
@ -45,7 +45,7 @@ data source you want the dashboard to use and specify any metric prefixes (if th
Find dashboads for common server applications at [Grafana.net/dashboards](https://grafana.net/dashboards).
<img src="img/docs/v31/gnet_dashboards_list.png">
<img src="/img/docs/v31/gnet_dashboards_list.png">
## Import & Sharing with Grafana 2.x or 3.0

View File

@ -12,13 +12,13 @@ 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/v1/graph_overview.png" class="no-shadow">
Clicking the title for a panel exposes a menu. The `edit` option opens additional configuration
options for the panel.
## General
![](img/docs/v2/graph_general.png)
![](/img/docs/v2/graph_general.png)
The general tab allows customization of a panel's appearance and menu options.
@ -56,7 +56,7 @@ options.
## Axes & Grid
![](img/docs/v2/graph_axes_grid_options.png)
![](/img/docs/v2/graph_axes_grid_options.png)
The Axes & Grid tab controls the display of axes, grids and legend.
@ -99,7 +99,7 @@ It is just the sum of all data points received by Grafana.
## Display styles
![](img/docs/v2/graph_display_styles.png)
![](/img/docs/v2/graph_display_styles.png)
Display styles controls properties of the graph.
@ -144,4 +144,4 @@ a thicker line width to make it standout.
## Time range
![](img/docs/v2/graph_time_range.png)
![](/img/docs/v2/graph_time_range.png)

View File

@ -15,7 +15,7 @@ No mouse? No problem. Grafana has extensive keyboard shortcuts to allow you to n
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%;">
<img class="no-shadow" src="/img/docs/v2/Grafana-Keyboard-Shortcuts.gif" style="width:80%;">
|Shortcut|Action|

View File

@ -12,7 +12,7 @@ weight = 5
Dashboards can be searched by the dashboard name, filtered by one (or many) tags or filtered by starred status. The dashboard search is accessed through the dashboard picker, available in the dashboard top nav area.
<img class="no-shadow" src="img/docs/v2/dashboard_search.png">
<img class="no-shadow" src="/img/docs/v2/dashboard_search.png">
1. `Dashboard Picker`: The Dashboard Picker is your primary navigation tool to move between dashboards. It is present on all dashboards, and open the Dashboard Search. The dashboard picker also doubles as the title of the current dashboard.
2. `Search Bar`: The search bar allows you to enter any string and search both database and file based dashboards in real-time.
@ -23,7 +23,7 @@ When using only a keyboard, you can use your keyboard arrow keys to navigate the
## Find by dashboard name
<img class="no-shadow" src="img/docs/v2/dashboard_search_text.gif">
<img class="no-shadow" src="/img/docs/v2/dashboard_search_text.gif">
To search and load dashboards click the open folder icon in the header or use the shortcut `CTRL`+`F`. Begin typing any part of the desired dashboard names. Search will return results for for any partial string match in real-time, as you type.
@ -38,11 +38,11 @@ Tags are a great way to organize your dashboards, especially as the number of da
To filter the dashboard list by tag, click on any tag appearing in the right column. The list may be further filtered by clicking on additional tags:
<img class="no-shadow" src="img/docs/v2/dashboard_search_tag_filtering.gif">
<img class="no-shadow" src="/img/docs/v2/dashboard_search_tag_filtering.gif">
Alternately, to see a list of all available tags, click the tags link in the search bar. All tags will be shown, and when a tag is selected, the dashboard search will be instantly filtered:
<img class="no-shadow" src="img/docs/v2/dashboard_search_tags_all_filtering.gif">
<img class="no-shadow" src="/img/docs/v2/dashboard_search_tags_all_filtering.gif">
When using only a keyboard: `tab` to focus on the *tags* link, `▼` down arrow key to find a tag and select with the `Enter` key.
@ -53,6 +53,6 @@ When using only a keyboard: `tab` to focus on the *tags* link, `▼` down arrow
Starring is a great way to organize and find commonly used dashboards. To show only starred dashboards in the list, click the *starred* link in the search bar:
<img class="no-shadow" src="img/docs/v2/dashboard_search_starred_filtering.gif">
<img class="no-shadow" src="/img/docs/v2/dashboard_search_starred_filtering.gif">
When using only a keyboard: `tab` to focus on the *stars* link, `▼` down arrow key to find a tag and select with the `Enter` key.

View File

@ -22,7 +22,7 @@ A dashboard snapshot is an instant way to share an interactive dashboard publicl
(metric, template and annotation) and panel links, leaving only the visible metric data and series names embedded into your dashboard. Dashboard
snapshots can be accessed by anyone who has the link and can reach the URL.
![](img/docs/v2/dashboard_snapshot_dialog.png)
![](/img/docs/v2/dashboard_snapshot_dialog.png)
### Publish snapshots
You can publish snapshots to you local instance or to [snapshot.raintank.io](http://snapshot.raintank.io). The later is a free service

View File

@ -11,7 +11,7 @@ weight = 2
# Singlestat Panel
![](img/docs/v1/singlestat_panel2.png)
![](/img/docs/v1/singlestat_panel2.png)
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.
@ -19,7 +19,7 @@ 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/v1/Singlestat-BaseSettings.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.
@ -32,19 +32,19 @@ The singlestat panel has a normal query editor to allow you define your exact me
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">
<img class="no-shadow" src="/img/docs/v1/Singlestat-Coloring.png">
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
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">).
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">
<img class="no-shadow" src="/img/docs/v1/Singlestat-Sparklines.png">
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.
@ -57,13 +57,13 @@ Sparklines are a great way of seeing the historical data related to the summary
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.
<img class="no-shadow" src="img/docs/v1/Singlestat-ValueMapping.png">
<img class="no-shadow" src="/img/docs/v1/Singlestat-ValueMapping.png">
## Troubleshooting
### Multiple Series Error
<img class="no-shadow" src="img/docs/v2/Singlestat-MultiSeriesError.png">
<img class="no-shadow" src="/img/docs/v2/Singlestat-MultiSeriesError.png">
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.

View File

@ -11,7 +11,7 @@ weight = 2
# Table Panel
<img src="assets/img/features/table-panel.png">
<img src="/assets/img/features/table-panel.png">
The new table panel is very flexible, supporting both multiple modes for time series as well as for
table, annotation and raw JSON data. It also provides date formatting and value formatting and coloring options.
@ -22,7 +22,7 @@ To view table panels in action and test different configurations with sample dat
The table panel has many ways to manipulate your data for optimal presentation.
<img class="no-shadow" src="img/docs/v2/table-config2.png">
<img class="no-shadow" src="/img/docs/v2/table-config2.png">
1. `Data`: Control how your query is transformed into a table.
2. `Table Display`: Table display options.
@ -30,7 +30,7 @@ The table panel has many ways to manipulate your data for optimal presentation.
## Data to Table
<img class="no-shadow" src="img/docs/v2/table-data-options.png">
<img class="no-shadow" src="/img/docs/v2/table-data-options.png">
The data section contains the **To Table Transform (1)**. This is the primary option for how your data/metric
query should be transformed into a table format. The **Columns (2)** option allows you to select what columns
@ -38,38 +38,38 @@ you want in the table. Only applicable for some transforms.
### Time series to rows
<img src="img/docs/v2/table_ts_to_rows2.png">
<img src="/img/docs/v2/table_ts_to_rows2.png">
In the most simple mode you can turn time series to rows. This means you get a `Time`, `Metric` and a `Value` column. Where `Metric` is the name of the time series.
### Time series to columns
![](img/docs/v2/table_ts_to_columns2.png)
![](/img/docs/v2/table_ts_to_columns2.png)
This transform allows you to take multiple time series and group them by time. Which will result in the primary column being `Time` and a column for each time series.
### Time series aggregations
![](img/docs/v2/table_ts_to_aggregations2.png)
![](/img/docs/v2/table_ts_to_aggregations2.png)
This table transformation will lay out your table into rows by metric, allowing columns of `Avg`, `Min`, `Max`, `Total`, `Current` and `Count`. More than one column can be added.
### Annotations
![](img/docs/v2/table_annotations.png)
![](/img/docs/v2/table_annotations.png)
If you have annotations enabled in the dashboard you can have the table show them. If you configure this
mode then any queries you have in the metrics tab will be ignored.
### JSON Data
![](img/docs/v2/table_json_data.png)
![](/img/docs/v2/table_json_data.png)
If you have an Elasticsearch **Raw Document** query or an Elasticsearch query without a `date histogram` use this
transform mode and pick the columns using the **Columns** section.
![](img/docs/v2/elastic_raw_doc.png)
![](/img/docs/v2/elastic_raw_doc.png)
## Table Display
<img class="no-shadow" src="img/docs/v2/table-display.png">
<img class="no-shadow" src="/img/docs/v2/table-display.png">
1. `Pagination (Page Size)`: The table display fields allow you to control The `Pagination` (page size) is the threshold at which the table rows will be broken into pages. For example, if your table had 95 records with a pagination value of 10, your table would be split across 9 pages.
2. `Scroll`: The `scroll bar` checkbox toggles the ability to scroll within the panel, when unchecked, the panel height will grow to display all rows.
@ -80,7 +80,7 @@ transform mode and pick the columns using the **Columns** section.
The column styles allow you control how dates and numbers are formatted.
<img class="no-shadow" src="img/docs/v2/Column-Options.png">
<img class="no-shadow" src="/img/docs/v2/Column-Options.png">
1. `Name or regex`: The Name or Regex field controls what columns the rule should be applied to. The regex or name filter will be matched against the column name not against column values.
2. `Type`: The three supported types of types are `Number`, `String` and `Date`.

View File

@ -10,7 +10,7 @@ weight = 1
# Templating
<img class="no-shadow" src="img/docs/v2/templating_var_list.png">
<img class="no-shadow" src="/img/docs/v2/templating_var_list.png">
Dashboard Templating allows you to make your Dashboards more interactive and dynamic.
@ -49,7 +49,7 @@ For example, if you were using Templating to list all 20 of your applications, y
> Note: Multi-Select Tagging functionality is currently experimental but is part of Grafana 2.1. To enable this feature click the enable icon when editing Template options for a particular variable.
<img class="no-shadow" src="img/docs/v2/template-tags-config.png">
<img class="no-shadow" src="/img/docs/v2/template-tags-config.png">
Grafana gets the list of tags and the list of values in each tag by performing two queries on your metric namespace.
@ -61,13 +61,13 @@ Note: a proof of concept shim that translates the metric query into a SQL call i
Once configured, Multi-Select Tagging provides a convenient way to group and your template variables, and slice your data in the exact way you want. The Tags can be seen on the right side of the template pull-down.
![](img/docs/v2/multi-select.gif)
![](/img/docs/v2/multi-select.gif)
### Interval
Use the `Interval` type to create Template variables around time ranges (eg. `1m`,`1h`, `1d`). There is also a special `auto` option that will change depending on the current time range, you can specify how many times the current time range should be divided to calculate the current `auto` range.
![](img/docs/v2/templated_variable_parameter.png)
![](/img/docs/v2/templated_variable_parameter.png)
### Custom

View File

@ -13,7 +13,7 @@ weight = 7
Grafana provides numerous ways to manage the time ranges of the data being visualized, both at the Dashboard-level and the Panel-level.
<img class="no-shadow" src="img/docs/whatsnew_2_5/timepicker.png">
<img class="no-shadow" src="/img/docs/whatsnew_2_5/timepicker.png">
In the top right, you have the master Dashboard time picker (it's in between the 'Zoom out' and the 'Refresh' links).
@ -43,7 +43,7 @@ Previous Month | `now-1M/M` | `now-1M/M`
There are two settings available from the Dashboard Settings area, allowing customization of the auto-refresh intervals and the definition of `now`.
<img class="no-shadow" src="img/docs/v2/TimePicker-TimeOptions.png">
<img class="no-shadow" src="/img/docs/v2/TimePicker-TimeOptions.png">
### Auto-Refresh Options
@ -59,11 +59,11 @@ Users often ask, [when will then be now](https://www.youtube.com/watch?v=VeZ9HhH
You can override the relative time range for individual panels, causing them to be different than what is selected in the Dashboard time picker in the upper right. This allows you to show metrics from different time periods or days at the same time.
<img class="no-shadow" src="img/docs/v2/panel_time_override.jpg">
<img class="no-shadow" src="/img/docs/v2/panel_time_override.jpg">
You control these overrides in panel editor mode and the tab `Time Range`.
<img class="no-shadow" src="img/docs/v2/time_range_tab.jpg">
<img class="no-shadow" src="/img/docs/v2/time_range_tab.jpg">
When you zoom or change the Dashboard time to a custom absolute time range, all panel overrides will be disabled. The panel relative time override is only active when the dashboard time is also relative. The panel timeshift override is always active, even when the dashboard time is absolute.