From b14c3d63e40db8fb8d8cb555a3abe9427f1be699 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 09:21:33 +0200 Subject: [PATCH 01/43] docs: added missing white space to config docs, #7073 --- docs/sources/installation/configuration.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/sources/installation/configuration.md b/docs/sources/installation/configuration.md index 9cfee7140c4..bc1b0eaa360 100644 --- a/docs/sources/installation/configuration.md +++ b/docs/sources/installation/configuration.md @@ -229,6 +229,10 @@ Used for signing keep me logged in / remember me cookies. Set to `true` to disable the use of Gravatar for user profile images. Default is `false`. +### data_source_proxy_whitelist + +Define a white list of allowed ips/domains to use in data sources. Format: `ip_or_domain:port` separated by spaces +
## [users] From a93fa0acdeb26c08697933caa64bf1d2108f5366 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 10:52:50 +0200 Subject: [PATCH 02/43] docs: Added general upgrading docs / guide, closes #5905 --- docs/sources/installation/migrating_to2.md | 3 - docs/sources/installation/provisioning.md | 34 -------- docs/sources/installation/upgrading.md | 94 ++++++++++++++++++++++ 3 files changed, 94 insertions(+), 37 deletions(-) delete mode 100644 docs/sources/installation/provisioning.md create mode 100644 docs/sources/installation/upgrading.md diff --git a/docs/sources/installation/migrating_to2.md b/docs/sources/installation/migrating_to2.md index e7e2e96b6ad..a5d6f793ba6 100644 --- a/docs/sources/installation/migrating_to2.md +++ b/docs/sources/installation/migrating_to2.md @@ -3,9 +3,6 @@ title = "Migrating from older versions" description = "Upgrading & Migrating Grafana from older versions" keywords = ["grafana", "configuration", "documentation", "migration"] type = "docs" -[menu.docs] -parent = "installation" -weight = 10 +++ # Migrating from older versions diff --git a/docs/sources/installation/provisioning.md b/docs/sources/installation/provisioning.md deleted file mode 100644 index c3969bcf32d..00000000000 --- a/docs/sources/installation/provisioning.md +++ /dev/null @@ -1,34 +0,0 @@ -+++ -title = "Installing via provisioning tools" -description = "Guide to install Grafana via provisioning tools like puppet & chef" -keywords = ["grafana", "provisioning", "documentation", "puppet", "chef", "ansible"] -type = "docs" -aliases = ["docs/provisioning"] -[menu.docs] -parent = "installation" -weight = 8 -+++ - - -# Installing via provisioning tools - -Here are links for how to install Grafana (and some include Graphite or -InfluxDB as well) via a provisioning system. These are not maintained by -any core Grafana team member and might be out of date. - -### Puppet - -* [forge.puppetlabs.com/bfraser/grafana](https://forge.puppetlabs.com/bfraser/grafana) - -### Ansible - -* [github.com/picotrading/ansible-grafana](https://github.com/picotrading/ansible-grafana) - -### Docker -* [github.com/grafana/grafana-docker](https://github.com/grafana/grafana-docker) - -### Chef - -* [github.com/JonathanTron/chef-grafana](https://github.com/JonathanTron/chef-grafana) -* [github.com/Nordstrom/grafana2-cookbook](https://github.com/Nordstrom/grafana2-cookbook) - diff --git a/docs/sources/installation/upgrading.md b/docs/sources/installation/upgrading.md new file mode 100644 index 00000000000..b636d51e6a1 --- /dev/null +++ b/docs/sources/installation/upgrading.md @@ -0,0 +1,94 @@ ++++ +title = "Upgrading" +description = "Upgrading Grafana guide" +keywords = ["grafana", "configuration", "documentation", "upgrade"] +type = "docs" +[menu.docs] +name = "Upgrading" +identifier = "upgrading" +parent = "installation" +weight = 10 ++++ + +# Upgrading Grafana + +We recommend everyone to upgrade Grafana often to stay up to date with the latest fixes and enhancements. +In order make this a reality Grafana upgrades are backward compatible and the upgrade process is simple & quick. + +Upgrading is generally always safe (between many minor and one major version) and dashboards and graphs will look the same. There can be minor breaking changes in some edge cases which are usually outlined in the [Release Notes](https://community.grafana.com/c/releases) and [Changelog]https://github.com/grafana/grafana/blob/master/CHANGELOG.md) + +## Database Backup + +Before upgrading it can be a good idea to backup your Grafana database. This will ensure that you can always rollback to your previous version. During startup, Grafana will automatically migrate the database schema (if there are changes or new tables). Sometimes this can cause issues if you later want to downgrade. + +#### sqlite + +If you use sqlite you only need to make a backup of you `grafana.db` file. This is usually located at `/var/lib/grafana/grafana.db` on unix system. +If you are unsure what database you use and where it is stored check you grafana configuration file. If you +installed grafana to custom location using a binary tar/zip it is usally in `/data`. + +#### mysql + +``` +mysqldump -u root -p[root_password] [grafana] > grafana_backup.sql +``` + +#### postgres +``` +pg_dump grafana > grafana_backup +``` + +### Ubuntu / Debian + +If you installed grafana by downloading a debian package (`.deb`) you can just follow the same installation guide +and execute the same `dpkg -i` command but with the new package. It will upgrade your Grafana install. + +If you used our APT repository: + +``` +sudo apt-get update +sudo apt-get install grafana +``` + +#### Upgrading from binary tar file + +If you downloaded the binary tar package you can just download and extract a new package +and overwrite all your existing files. But this might overwrite your config changes. We +recommend you place your config changes in a file named `/conf/custom.ini` +as this will make upgrades easier without risking losing your config changes. + +### Centos / RHEL + +If you installed grafana by downloading a rpm package you can just follow the same installation guide +and execute the same `yum install` or `rpm -i` command but with the new package. It will upgrade your Grafana install. + +If you used our YUM repository: + +``` +sudo yum update grafana +``` + +### Docker + +This just an example, details depend on how you configured your grafana container. +``` +docker pull grafana +docker stop my-grafana-container +docker rm my-grafana-container +docker run --name=my-grafana-container --restart=always -v /var/lib/grafana:/var/lib/grafana +``` + +### Windows + +If you downloaded the windows binary package you can just download a newer package and extract +to the same location (and overwrite the existing files). This might overwrite your config changes. We +recommend you place your config changes in a file named `/conf/custom.ini` +as this will make upgrades easier without risking losing your config changes. + +## Upgrading form 1.x + +[Migrating from 1.x to 2.x]({{< relref "installation/migrating_to2.md" >}}) + +## Upgrading form 2.x + +We are not aware of any issues upgrading directly from 2.x to 4.x but to on the safe side go via 3.x. From 26f4a8e5a44c2e750bdf12e1c6a736e676525cac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 10:58:26 +0200 Subject: [PATCH 03/43] docs: added links to upgrading article --- docs/sources/installation/debian.md | 3 +++ docs/sources/installation/rpm.md | 3 +++ docs/sources/installation/windows.md | 3 +++ 3 files changed, 9 insertions(+) diff --git a/docs/sources/installation/debian.md b/docs/sources/installation/debian.md index c82b7f1c0e5..2071ff1b79c 100644 --- a/docs/sources/installation/debian.md +++ b/docs/sources/installation/debian.md @@ -17,6 +17,9 @@ Description | Download ------------ | ------------- Stable for Debian-based Linux | [4.2.0 (x86-64 deb)](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana_4.2.0_amd64.deb) +Read [Upgrading Grafana]({{< relref "installation/upgrading.md" >}}) for tips and guidance on updating an existing +installation. + ## Install Stable ``` diff --git a/docs/sources/installation/rpm.md b/docs/sources/installation/rpm.md index c0952328cbe..69d676d6db8 100644 --- a/docs/sources/installation/rpm.md +++ b/docs/sources/installation/rpm.md @@ -17,6 +17,9 @@ Description | Download ------------ | ------------- Stable for CentOS / Fedora / OpenSuse / Redhat Linux | [4.2.0 (x86-64 rpm)](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.2.0-1.x86_64.rpm) +Read [Upgrading Grafana]({{< relref "installation/upgrading.md" >}}) for tips and guidance on updating an existing +installation. + ## Install Stable You can install Grafana using Yum directly. diff --git a/docs/sources/installation/windows.md b/docs/sources/installation/windows.md index 229654ef58e..d1327d80d3e 100644 --- a/docs/sources/installation/windows.md +++ b/docs/sources/installation/windows.md @@ -15,6 +15,9 @@ Description | Download ------------ | ------------- Latest stable package for Windows | [grafana.4.2.0.windows-x64.zip](https://s3-us-west-2.amazonaws.com/grafana-releases/release/grafana-4.2.0.windows-x64.zip) +Read [Upgrading Grafana]({{< relref "installation/upgrading.md" >}}) for tips and guidance on updating an existing +installation. + ## Configure The zip file contains a folder with the current Grafana version. Extract From c6d5259c6d259d250b8b42134da34cb9d10a63a1 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Fri, 28 Apr 2017 11:01:54 +0200 Subject: [PATCH 04/43] changelog: add note for #6564 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 167c6ad829a..30bcc05597a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ * **Graph**: Support auto grid min/max when using log scale [#3090](https://github.com/grafana/grafana/issues/3090), thx [@bigbenhur](https://github.com/bigbenhur) * **Graph**: Support for histograms [#600](https://github.com/grafana/grafana/issues/600) * **Prometheus**: Support table response formats (column per label) [#6140](https://github.com/grafana/grafana/issues/6140), thx [@mtanda](https://github.com/mtanda) +* **Single Stat Panel**: support for non time series data [#6564](https://github.com/grafana/grafana/issues/6564) + ## Minor Enchancements From 0ac9ec8f7e673dc9a2a99834aec6693db6e941c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 11:04:56 +0200 Subject: [PATCH 05/43] docs: added restore instructions to backup section in upgrading doc article, closes #5680 --- docs/sources/installation/upgrading.md | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/sources/installation/upgrading.md b/docs/sources/installation/upgrading.md index b636d51e6a1..846a42b454c 100644 --- a/docs/sources/installation/upgrading.md +++ b/docs/sources/installation/upgrading.md @@ -15,7 +15,7 @@ weight = 10 We recommend everyone to upgrade Grafana often to stay up to date with the latest fixes and enhancements. In order make this a reality Grafana upgrades are backward compatible and the upgrade process is simple & quick. -Upgrading is generally always safe (between many minor and one major version) and dashboards and graphs will look the same. There can be minor breaking changes in some edge cases which are usually outlined in the [Release Notes](https://community.grafana.com/c/releases) and [Changelog]https://github.com/grafana/grafana/blob/master/CHANGELOG.md) +Upgrading is generally always safe (between many minor and one major version) and dashboards and graphs will look the same. There can be minor breaking changes in some edge cases which are usually outlined in the [Release Notes](https://community.grafana.com/c/releases) and [Changelog](https://github.com/grafana/grafana/blob/master/CHANGELOG.md) ## Database Backup @@ -30,12 +30,21 @@ installed grafana to custom location using a binary tar/zip it is usally in ` grafana_backup.sql +backup: +> mysqldump -u root -p[root_password] [grafana] > grafana_backup.sql + +restore: +> mysql -u root -p grafana < grafana_backup.sql ``` #### postgres + ``` -pg_dump grafana > grafana_backup +backup: +> pg_dump grafana > grafana_backup + +restore: +> psql grafana < grafana_backup ``` ### Ubuntu / Debian From c46b73538c6fb8d9946efea897277ec82941aded Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 11:16:05 +0200 Subject: [PATCH 06/43] docs: minor update to troubleshooting guide, closes #8242 --- docs/sources/installation/troubleshooting.md | 50 +++++--------------- 1 file changed, 13 insertions(+), 37 deletions(-) diff --git a/docs/sources/installation/troubleshooting.md b/docs/sources/installation/troubleshooting.md index 6da8c4f64f8..a5a74c007aa 100644 --- a/docs/sources/installation/troubleshooting.md +++ b/docs/sources/installation/troubleshooting.md @@ -11,48 +11,24 @@ weight = 8 # Troubleshooting -This page is dedicated to helping you solve any problem you have getting -Grafana to work. Please review it before opening a new [GitHub -issue](https://github.com/grafana/grafana/issues/new) or asking a -question in the `#grafana` IRC channel on freenode. +## visualization & query issues -## General connection issues +The most common problems are related to the query & response from you data source. Even if it looks +like a bug or visualization issue in Grafana it is 99% of time a problem with the data source query or +the data source response. -When setting up Grafana for the first time you might experience issues -with Grafana being unable to query Graphite, OpenTSDB or InfluxDB. You -might not be able to get metric name completion or the graph might show -an error like this: +So make sure to check the query sent and the raw response, learn how in this guide: [How to troubleshoot metric query issues](https://community.grafana.com/t/how-to-troubleshoot-metric-query-issues/50) -![](/img/docs/v1/graph_timestore_error.png) +## Logging -For some types of errors, the `View details` link will show you error -details. For many types of HTTP connection errors, however, there is very -little information. The best way to troubleshoot these issues is use -the [Chrome developer tools](https://developer.chrome.com/devtools/index). -By pressing `F12` you can bring up the chrome dev tools. +If you encounter an error or problem it is a good idea to check the grafana server log. Usually +located at `/var/log/grafana/grafana.log` on unix systems or in `/data/log` on +other platforms & manual installs. -![](/img/docs/v1/toubleshooting_chrome_dev_tools.png) +You can enable more logging by changing log level in you grafana configuration file. -There are two important tabs in the Chrome developer tools: `Network` -and `Console`. The `Console` tab will show you Javascript errors and -HTTP request errors. In the Network tab you will be able to identify the -request that failed and review request and response parameters. This -information will be of great help in finding the cause of the error. +## FAQ -If you are unable to solve the issue, even after reading the remainder -of this troubleshooting guide, you should open a [GitHub support -issue](https://github.com/grafana/grafana/issues). Before you do that -please search the existing closed or open issues. Also if you need to -create a support issue, screen shots and or text information about the -chrome console error, request and response information from the -`Network` tab in Chrome developer tools are of great help. - -### Inspecting Grafana metric requests - -![](/img/docs/v1/toubleshooting_chrome_dev_tools_network.png) - -After opening the Chrome developer tools for the first time the -`Network` tab is empty. You will need to refresh the page to get -requests to show. For some type of errors, especially CORS-related, -there might not be a response at all. +Checkout the [FAQ](https://community.grafana.com/c/howto/faq) section on our community page for frequently +asked questions. From 4f9f1865759d4a254e8d0534ed4713e0dac9fba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 12:51:21 +0200 Subject: [PATCH 07/43] docs: overhauled annotation docs and moved some of the data source specific annotation docs to the respective data source doc pages, closes #1111 --- .../features/datasources/elasticsearch.md | 18 +++++++- docs/sources/features/datasources/graphite.md | 14 +++++- docs/sources/features/datasources/influxdb.md | 8 +++- .../features/datasources/prometheus.md | 12 +++++ docs/sources/reference/annotations.md | 46 +++++++------------ .../features/annotations/partials/editor.html | 2 +- 6 files changed, 64 insertions(+), 36 deletions(-) diff --git a/docs/sources/features/datasources/elasticsearch.md b/docs/sources/features/datasources/elasticsearch.md index 4f8bfaf968c..29f3a8f6c08 100644 --- a/docs/sources/features/datasources/elasticsearch.md +++ b/docs/sources/features/datasources/elasticsearch.md @@ -89,7 +89,21 @@ The Elasticsearch datasource supports two types of queries you can use to fill t {"find": "fields", "type": "string", "query": } ``` -### Multi format / All format -Use lucene format. +
+## Annotations + +[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +queries via the Dashboard menu / Annotations view. Grafana can query any Elasticsearch index +for annotation events. + +Name | Description +------------ | ------------- +Query | You can leave the search query blank or specify a lucene query +Time | The name of the time field, needs to be date field. +Title | The name of field to use for the event title. +Tags | Optional field name to use for event tags (can be array or csv string). +Text | Optional field name to use event text body. + + diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index 11e15ab503e..2bfbafb215c 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -63,6 +63,10 @@ Some functions like aliasByNode support an optional second argument. To add this ![](/img/docs/animated_gifs/func_editor_optional_params.gif) +### Nested Queries + +You can reference queries by the row “letter” that they’re on (similar to Microsoft Excel). If you add a second query to graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries. + ## Point consolidation All Graphite metrics are consolidated so that Graphite doesn't return more data points than there are pixels in the graph. By default @@ -83,6 +87,12 @@ You can also create nested variables that use other variables in their definitio ![](/img/docs/v2/templated_variable_parameter.png) +## Annotations + +[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +queries via the Dashboard menu / Annotations view. + +Graphite supports two ways to query annotations. A regular metric query, for this you use the `Graphite query` textbox. A Graphite events query, use the `Graphite event tags` textbox, +specify an tag or wildcard (leave empty should also work) + -## Query Reference -You can reference queries by the row “letter” that they’re on (similar to Microsoft Excel). If you add a second query to graph, you can reference the first query simply by typing in #A. This provides an easy and convenient way to build compounded queries. diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index 03dc26bcc26..88da2225b64 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -121,7 +121,9 @@ SHOW TAG VALUES WITH KEY = "hostname" WHERE region =~ /$region/ ![](/img/docs/influxdb/templating_simple_ex1.png) ## Annotations -Annotations allows you to overlay rich event information on top of graphs. + +[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +queries via the Dashboard menu / Annotations view. An example query: @@ -129,4 +131,8 @@ An example query: SELECT title, description from events WHERE $timeFilter order asc ``` +For InfluxDB you need to enter a query like in the above example. 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. The +Tags field can be a comma seperated string. + diff --git a/docs/sources/features/datasources/prometheus.md b/docs/sources/features/datasources/prometheus.md index 947d7426230..3e819d5cffb 100644 --- a/docs/sources/features/datasources/prometheus.md +++ b/docs/sources/features/datasources/prometheus.md @@ -81,3 +81,15 @@ When the `Include All` option or `Multi-Value` option is enabled, Grafana conver Which means you have to use `=~` instead of `=` in your Prometheus queries. For example `ALERTS{instance=~$instance}` instead of `ALERTS{instance=$instance}`. ![](/img/docs/v2/prometheus_templating.png) + +## Annotations + +[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +queries via the Dashboard menu / Annotations view. + +Prometheus supports two ways to query annotations. + +- A regular metric query +- A Prometheus query for pending and firing alerts (for details see [Inspecting alerts during runtime](https://prometheus.io/docs/alerting/rules/#inspecting-alerts-during-runtime)) + +The step option is useful to limit the number of events returned from your query. diff --git a/docs/sources/reference/annotations.md b/docs/sources/reference/annotations.md index 8f2170ba145..63b2f5fc327 100644 --- a/docs/sources/reference/annotations.md +++ b/docs/sources/reference/annotations.md @@ -13,42 +13,28 @@ 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/annotations/toggles.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. +## Queries -> Note: Annotations apply to all graphs in a given dashboard, not on a per-panel basis. +Annotatation events are fetched via annotation queries. To add a new annotation query to a dashboard +open the dashboard settings menu, then select `Annotations`. This will open the dashboard annotations +settings view. To create a new annotation query hit the `New` button. -## Graphite annotations +![](/img/docs/annotations/new_query.png) -Graphite supports two ways to query annotations. +Specify a name for the annotation query. This name is given to the toggle (checkbox) that will allow +you to enable/disable showing annotation events from this query. For example you might have two +annotation queries named `Deploys` and `Outages`. The toggles will allow you to decide what annotations +to show. -- A regular metric query, use the `Graphite target expression` text input for this -- Graphite events query, use the `Graphite event tags` text input, specify an tag or wildcard (leave empty should also work) +### Annotation query details -## Elasticsearch annotations -![](/img/docs/v2/annotations_es.png) +The annotation query options are different for each data source. -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. +- [Graphite annotation queries]({{< relref "features/datasources/graphite.md#annotations" >}}) +- [Elasticsearch annotation queries]({{< relref "features/datasources/elasticsearch.md#annotations" >}}) +- [InfluxDB annotation queries]({{< relref "features/datasources/influxdb.md#annotations" >}}) +- [Prometheus annotation queries]({{< relref "features/datasources/prometheus.md#annotations" >}}) -If your elasticsearch document has a timestamp field other than `@timestamp` you will need to specify that. As well -as the name for the fields that should be used for the annotation title, tags and text. Tags and text are optional. -> **Note** The annotation timestamp field in elasticsearch need to be in UTC format. - -## InfluxDB Annotations -![](/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) - -Prometheus supports two ways to query annotations. - -- A regular metric query -- A Prometheus query for pending and firing alerts (for details see [Inspecting alerts during runtime](https://prometheus.io/docs/alerting/rules/#inspecting-alerts-during-runtime)) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 8b71e23f467..b9032cdcd87 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -28,7 +28,7 @@
- No annotations defined + No annotation queries defined
From 88dd8af4cec643f5cf6345fbc7d948a0b7ba518d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 28 Apr 2017 13:43:00 +0200 Subject: [PATCH 08/43] docs: Updates to screencasts & sharing docs --- .../features/datasources/elasticsearch.md | 2 +- docs/sources/features/datasources/graphite.md | 2 +- docs/sources/features/datasources/influxdb.md | 2 +- .../features/datasources/prometheus.md | 2 +- docs/sources/reference/sharing.md | 6 +- docs/sources/tutorials/screencasts.md | 166 ++++++++++++------ 6 files changed, 119 insertions(+), 61 deletions(-) diff --git a/docs/sources/features/datasources/elasticsearch.md b/docs/sources/features/datasources/elasticsearch.md index 29f3a8f6c08..7740827e6c1 100644 --- a/docs/sources/features/datasources/elasticsearch.md +++ b/docs/sources/features/datasources/elasticsearch.md @@ -92,7 +92,7 @@ The Elasticsearch datasource supports two types of queries you can use to fill t
## Annotations -[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation queries via the Dashboard menu / Annotations view. Grafana can query any Elasticsearch index for annotation events. diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index 2bfbafb215c..58965f8bf6f 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -89,7 +89,7 @@ You can also create nested variables that use other variables in their definitio ## Annotations -[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation queries via the Dashboard menu / Annotations view. Graphite supports two ways to query annotations. A regular metric query, for this you use the `Graphite query` textbox. A Graphite events query, use the `Graphite event tags` textbox, diff --git a/docs/sources/features/datasources/influxdb.md b/docs/sources/features/datasources/influxdb.md index 88da2225b64..46a20aa8f6c 100644 --- a/docs/sources/features/datasources/influxdb.md +++ b/docs/sources/features/datasources/influxdb.md @@ -122,7 +122,7 @@ SHOW TAG VALUES WITH KEY = "hostname" WHERE region =~ /$region/ ## Annotations -[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation queries via the Dashboard menu / Annotations view. An example query: diff --git a/docs/sources/features/datasources/prometheus.md b/docs/sources/features/datasources/prometheus.md index 3e819d5cffb..e6f2749bb4b 100644 --- a/docs/sources/features/datasources/prometheus.md +++ b/docs/sources/features/datasources/prometheus.md @@ -84,7 +84,7 @@ Which means you have to use `=~` instead of `=` in your Prometheus queries. For ## Annotations -[Annotations]({{< relref "reference/Annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation +[Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation queries via the Dashboard menu / Annotations view. Prometheus supports two ways to query annotations. diff --git a/docs/sources/reference/sharing.md b/docs/sources/reference/sharing.md index 5210b2811df..da89319f444 100644 --- a/docs/sources/reference/sharing.md +++ b/docs/sources/reference/sharing.md @@ -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/v4/share_panel_modal.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 @@ -42,8 +42,8 @@ You can embed a panel using an iframe on another web site. This tab will show yo Example: ```html - + ``` Below there should be an interactive Grafana graph embedded in an iframe: - + diff --git a/docs/sources/tutorials/screencasts.md b/docs/sources/tutorials/screencasts.md index f92ead64d49..e92a07c51a7 100644 --- a/docs/sources/tutorials/screencasts.md +++ b/docs/sources/tutorials/screencasts.md @@ -9,58 +9,116 @@ weight = 10 # Screencasts - -{{< screencast src="https://www.youtube.com/embed/sKNZMtoSHN4?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} - -### Episode 7 - Beginners guide to building dashboards - -For newer users of Grafana, this screencast will familiarize you with the general UI and teach you how to build your first Dashboard. - -
- -{{< screencast src="https://www.youtube.com/embed/9ZCMVNxUf6s?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} - -### Episode 6 - Adding data sources, users & organizations - -Now that Grafana has been installed, learn about adding data sources and get a closer look at adding and managing Users and Organizations. - -
- -{{< screencast src="https://www.youtube.com/embed/E-gMFv85FE8?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} - -### Episode 5 - Installation & Configuration on Red Hat / CentOS - -This screencasts shows how to get Grafana 2.0 installed and configured quickly on RPM-based Linux operating systems. - -
-{{< screencast src="https://www.youtube.com/embed/JY22EBOR9hQ?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} - -### Episode 4 - Installation & Configuration on Ubuntu / Debian - -Learn how to easily install the dependencies and packages to get Grafana 2.0 up and running on Ubuntu or Debian in just a few minutes. - -
- -{{< screencast src="https://www.youtube.com/embed/FC13uhFRsVw?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} - -### Episode 3 - Whats New In Grafana 2.0 - -This screencast highlights many of the great new features that were included in the Grafana 2.0 release. - -
- -{{< screencast src="//www.youtube.com/embed/FhNUrueWwOk?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} -### Episode 2 - Templated Graphite Queries - -The screencast focuses on Templating with the Graphite Data Source. Learn how to make dynamic and adaptable Dashboards for your Graphite metrics. - -
- -{{< screencast src="//www.youtube.com/embed/mgcJPREl3CU?list=PLDGkOdUX1Ujo3wHw9-z5Vo12YLqXRjzg2" >}} -### Episode 1 - Building Graphite Queries - -Learn how the Graphite Query Editor works, and how to use different graphing functions. There's also an introduction to graph display settings. - -
- +
+
+ + + + +
+ + #10 Dashboard Discovery & Sharing + +
+
+
+ + + + +
+ + #9 Using Elasticsearch in Grafana + +
+
+
+ + + + +
+ + #8 What's new in Grafana 3.0 + +
+
+
+ + + + +
+ + #7 Beginners guide to building dashboards + +
+
+
+ + + + +
+ + #6 Adding data sources, users & orgs. + +
+
+
+ + + + +
+ + #5 Install & Setup on Redhat / Centos + +
+
+
+ + + + +
+ + #4 Install & Setup on Ubuntu / Debian + +
+
+
+ + + + +
+ + #3 Whats New In Grafana 2.0 + +
+
+
+ + + + +
+ + #2 Templated Graphite Queries + +
+
+
+ + + + +
+ + #1 Building Graphite Queries + +
+
+
From 02455753b5df91035f5eba1b9a6d4fe1ec986cd2 Mon Sep 17 00:00:00 2001 From: rogerswingle Date: Mon, 1 May 2017 13:22:20 -0400 Subject: [PATCH 09/43] Specify region for s3 (#8251) --- pkg/components/imguploader/s3uploader.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/components/imguploader/s3uploader.go b/pkg/components/imguploader/s3uploader.go index 4f8632f965c..2828008e9b7 100644 --- a/pkg/components/imguploader/s3uploader.go +++ b/pkg/components/imguploader/s3uploader.go @@ -78,5 +78,5 @@ func (u *S3Uploader) Upload(imageDiskPath string) (string, error) { return "", err } - return "https://" + u.bucket + ".s3.amazonaws.com/" + key, nil + return "https://" + u.bucket + ".s3-" + u.region + ".amazonaws.com/" + key, nil } From 83c138f5757d09b0df0404f4d5404ba27eedc0c7 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 2 May 2017 09:39:50 +0200 Subject: [PATCH 10/43] docs: fix mistake in api docs --- docs/sources/http_api/admin.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/sources/http_api/admin.md b/docs/sources/http_api/admin.md index 950ea4c8202..9c2c6d14b31 100644 --- a/docs/sources/http_api/admin.md +++ b/docs/sources/http_api/admin.md @@ -280,14 +280,22 @@ Change password for specific user ## Pause all alerts -`DELETE /api/admin/pause-all-alerts` +`POST /api/admin/pause-all-alerts` **Example Request**: - DELETE /api/admin/pause-all-alerts HTTP/1.1 + POST /api/admin/pause-all-alerts HTTP/1.1 Accept: application/json Content-Type: application/json + { + "paused": true + } + +JSON Body schema: + +- **paused** – If true then all alerts are to be paused, false unpauses all alerts. + **Example Response**: HTTP/1.1 200 From 0fd96b951ae2b8fda8bedd1df05cf4477f548bf9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 2 May 2017 09:55:18 +0200 Subject: [PATCH 11/43] wip: heatmap refactor --- .../app/plugins/panel/heatmap/axes_editor.ts | 25 +++++++- .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 8 +-- public/app/plugins/panel/heatmap/module.html | 1 - .../panel/heatmap/partials/axes_editor.html | 58 ++++++------------- 4 files changed, 44 insertions(+), 48 deletions(-) diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts index b8fcba871a7..2bf4ac05622 100644 --- a/public/app/plugins/panel/heatmap/axes_editor.ts +++ b/public/app/plugins/panel/heatmap/axes_editor.ts @@ -8,13 +8,14 @@ export class AxesEditorCtrl { unitFormats: any; logScales: any; dataFormats: any; + yBucketOptions: any[]; + xBucketOptions: any[]; /** @ngInject */ - constructor($scope) { + constructor($scope, uiSegmentSrv) { $scope.editor = this; this.panelCtrl = $scope.ctrl; this.panel = this.panelCtrl.panel; - this.unitFormats = kbn.getUnitFormats(); this.logScales = { @@ -29,6 +30,26 @@ export class AxesEditorCtrl { 'Time series': 'timeseries', 'Time series Pre-bucketed': 'tsbuckets' }; + + this.yBucketOptions = [ + {text: '5', value: '5'}, + {text: '10', value: '10'}, + {text: '20', value: '20'}, + {text: '30', value: '30'}, + {text: '50', value: '50'}, + ]; + + this.xBucketOptions = [ + {text: '15', value: '15'}, + {text: '20', value: '20'}, + {text: '30', value: '30'}, + {text: '50', value: '50'}, + {text: '1m', value: '1m'}, + {text: '5m', value: '5m'}, + {text: '10m', value: '10m'}, + {text: '20m', value: '20m'}, + {text: '1h', value: '1h'}, + ]; } setUnitFormat(subItem) { diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index c0d3a7bd25d..8a7672f7a23 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -28,12 +28,9 @@ let panelDefaults = { fillBackground: false }, dataFormat: 'timeseries', - xBucketSize: null, - xBucketNumber: null, - yBucketSize: null, - yBucketNumber: null, xAxis: { - show: true + show: true, + buckets: 'auto', }, yAxis: { show: true, @@ -43,6 +40,7 @@ let panelDefaults = { splitFactor: null, min: null, max: null, + buckets: 'auto', removeZeroValues: false }, tooltip: { diff --git a/public/app/plugins/panel/heatmap/module.html b/public/app/plugins/panel/heatmap/module.html index a59092b2687..6cb89f2e1f2 100644 --- a/public/app/plugins/panel/heatmap/module.html +++ b/public/app/plugins/panel/heatmap/module.html @@ -7,6 +7,5 @@
-
diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html index 161be2dab19..a8dd1a05473 100644 --- a/public/app/plugins/panel/heatmap/partials/axes_editor.html +++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html @@ -1,12 +1,8 @@
Y Axis
- -
- +
- +
-
- - +
+ +
-
- - +
+ +
- +
-
- - -
-
- - +
+
+ + +
- +
- -
X Axis
- -
- +
-
- - -
From ac6c93b3da2392715c56af10644c5a4bc377fa00 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 2 May 2017 10:20:09 +0200 Subject: [PATCH 12/43] docs: add publish bash script --- docs/publish.sh | 3 +++ 1 file changed, 3 insertions(+) create mode 100755 docs/publish.sh diff --git a/docs/publish.sh b/docs/publish.sh new file mode 100755 index 00000000000..4b72f892179 --- /dev/null +++ b/docs/publish.sh @@ -0,0 +1,3 @@ +#!/bin/bash + +make publish ENV=prod VERSION=root From b4cfb225cf6432cb3d3477b158825d1cb697ce60 Mon Sep 17 00:00:00 2001 From: Daniel Lee Date: Tue, 2 May 2017 12:47:32 +0200 Subject: [PATCH 13/43] tech: updates log15 vendor packages Fixes #8262 --- .../inconshreveable/log15/.travis.yml | 10 ---- .../inconshreveable/log15/README.md | 13 +++-- .../github.com/inconshreveable/log15/doc.go | 4 +- .../inconshreveable/log15/format.go | 54 +++++++++++++------ .../inconshreveable/log15/handler.go | 2 +- .../inconshreveable/log15/syslog.go | 2 +- .../log15/term/terminal_darwin.go | 1 + .../log15/term/terminal_netbsd.go | 7 +++ .../log15/term/terminal_notwindows.go | 2 +- .../log15/term/terminal_solaris.go | 9 ++++ vendor/vendor.json | 12 +++++ 11 files changed, 82 insertions(+), 34 deletions(-) delete mode 100644 vendor/github.com/inconshreveable/log15/.travis.yml create mode 100644 vendor/github.com/inconshreveable/log15/term/terminal_netbsd.go create mode 100644 vendor/github.com/inconshreveable/log15/term/terminal_solaris.go diff --git a/vendor/github.com/inconshreveable/log15/.travis.yml b/vendor/github.com/inconshreveable/log15/.travis.yml deleted file mode 100644 index ff5d75e72b9..00000000000 --- a/vendor/github.com/inconshreveable/log15/.travis.yml +++ /dev/null @@ -1,10 +0,0 @@ -language: go - -go: - - 1.1 - - 1.2 - - 1.3 - - 1.4 - - 1.5 - - 1.6 - - tip diff --git a/vendor/github.com/inconshreveable/log15/README.md b/vendor/github.com/inconshreveable/log15/README.md index 8ccd5a38d05..0951b21cb53 100644 --- a/vendor/github.com/inconshreveable/log15/README.md +++ b/vendor/github.com/inconshreveable/log15/README.md @@ -2,7 +2,7 @@ # log15 [![godoc reference](https://godoc.org/github.com/inconshreveable/log15?status.png)](https://godoc.org/github.com/inconshreveable/log15) [![Build Status](https://travis-ci.org/inconshreveable/log15.svg?branch=master)](https://travis-ci.org/inconshreveable/log15) -Package log15 provides an opinionated, simple toolkit for best-practice logging in Go (golang) that is both human and machine readable. It is modeled after the Go standard library's [`io`](http://golang.org/pkg/io/) and [`net/http`](http://golang.org/pkg/net/http/) packages and is an alternative to the standard library's [`log`](http://golang.org/pkg/log/) package. +Package log15 provides an opinionated, simple toolkit for best-practice logging in Go (golang) that is both human and machine readable. It is modeled after the Go standard library's [`io`](http://golang.org/pkg/io/) and [`net/http`](http://golang.org/pkg/net/http/) packages and is an alternative to the standard library's [`log`](http://golang.org/pkg/log/) package. ## Features - A simple, easy-to-understand API @@ -30,7 +30,7 @@ import log "github.com/inconshreveable/log15" // all loggers can have key/value context srvlog := log.New("module", "app/server") -// all log messages can have key/value context +// all log messages can have key/value context srvlog.Warn("abnormal conn rate", "rate", curRate, "low", lowRate, "high", highRate) // child loggers with inherited context @@ -45,7 +45,14 @@ srvlog.SetHandler(log.MultiHandler( log.StreamHandler(os.Stderr, log.LogfmtFormat()), log.LvlFilterHandler( log.LvlError, - log.Must.FileHandler("errors.json", log.JsonFormat()))) + log.Must.FileHandler("errors.json", log.JsonFormat())))) +``` + +Will result in output that looks like this: + +``` +WARN[06-17|21:58:10] abnormal conn rate module=app/server rate=0.500 low=0.100 high=0.800 +INFO[06-17|21:58:10] connection open module=app/server raddr=10.0.0.1 ``` ## Breaking API Changes diff --git a/vendor/github.com/inconshreveable/log15/doc.go b/vendor/github.com/inconshreveable/log15/doc.go index a5cc87419c4..ab7e090d95f 100644 --- a/vendor/github.com/inconshreveable/log15/doc.go +++ b/vendor/github.com/inconshreveable/log15/doc.go @@ -97,7 +97,7 @@ context, CallerFileHandler, CallerFuncHandler and CallerStackHandler. Here's an example that adds the source file and line number of each logging call to the context. - h := log.CallerFileHandler(log.StdoutHandler()) + h := log.CallerFileHandler(log.StdoutHandler) log.Root().SetHandler(h) ... log.Error("open file", "err", err) @@ -108,7 +108,7 @@ This will output a line that looks like: Here's an example that logs the call stack rather than just the call site. - h := log.CallerStackHandler("%+v", log.StdoutHandler()) + h := log.CallerStackHandler("%+v", log.StdoutHandler) log.Root().SetHandler(h) ... log.Error("open file", "err", err) diff --git a/vendor/github.com/inconshreveable/log15/format.go b/vendor/github.com/inconshreveable/log15/format.go index 3468f3048f3..f31b42fcaa3 100644 --- a/vendor/github.com/inconshreveable/log15/format.go +++ b/vendor/github.com/inconshreveable/log15/format.go @@ -7,6 +7,7 @@ import ( "reflect" "strconv" "strings" + "sync" "time" ) @@ -108,7 +109,9 @@ func logfmt(buf *bytes.Buffer, ctx []interface{}, color int) { if color > 0 { fmt.Fprintf(buf, "\x1b[%dm%s\x1b[0m=%s", color, k, v) } else { - fmt.Fprintf(buf, "%s=%s", k, v) + buf.WriteString(k) + buf.WriteByte('=') + buf.WriteString(v) } } @@ -205,6 +208,12 @@ func formatLogfmtValue(value interface{}) string { return "nil" } + if t, ok := value.(time.Time); ok { + // Performance optimization: No need for escaping since the provided + // timeFormat doesn't have any escape characters, and escaping is + // expensive. + return t.Format(timeFormat) + } value = formatShared(value) switch v := value.(type) { case bool: @@ -222,36 +231,49 @@ func formatLogfmtValue(value interface{}) string { } } +var stringBufPool = sync.Pool{ + New: func() interface{} { return new(bytes.Buffer) }, +} + func escapeString(s string) string { - needQuotes := false - e := bytes.Buffer{} - e.WriteByte('"') + needsQuotes := false + needsEscape := false for _, r := range s { if r <= ' ' || r == '=' || r == '"' { - needQuotes = true + needsQuotes = true } - + if r == '\\' || r == '"' || r == '\n' || r == '\r' || r == '\t' { + needsEscape = true + } + } + if needsEscape == false && needsQuotes == false { + return s + } + e := stringBufPool.Get().(*bytes.Buffer) + e.WriteByte('"') + for _, r := range s { switch r { case '\\', '"': e.WriteByte('\\') e.WriteByte(byte(r)) case '\n': - e.WriteByte('\\') - e.WriteByte('n') + e.WriteString("\\n") case '\r': - e.WriteByte('\\') - e.WriteByte('r') + e.WriteString("\\r") case '\t': - e.WriteByte('\\') - e.WriteByte('t') + e.WriteString("\\t") default: e.WriteRune(r) } } e.WriteByte('"') - start, stop := 0, e.Len() - if !needQuotes { - start, stop = 1, stop-1 + var ret string + if needsQuotes { + ret = e.String() + } else { + ret = string(e.Bytes()[1 : e.Len()-1]) } - return string(e.Bytes()[start:stop]) + e.Reset() + stringBufPool.Put(e) + return ret } diff --git a/vendor/github.com/inconshreveable/log15/handler.go b/vendor/github.com/inconshreveable/log15/handler.go index 43205608cc1..fa4570a69ec 100644 --- a/vendor/github.com/inconshreveable/log15/handler.go +++ b/vendor/github.com/inconshreveable/log15/handler.go @@ -180,7 +180,7 @@ func MatchFilterHandler(key string, value interface{}, h Handler) Handler { // level to the wrapped Handler. For example, to only // log Error/Crit records: // -// log.LvlFilterHandler(log.Error, log.StdoutHandler) +// log.LvlFilterHandler(log.LvlError, log.StdoutHandler) // func LvlFilterHandler(maxLvl Lvl, h Handler) Handler { return FilterHandler(func(r *Record) (pass bool) { diff --git a/vendor/github.com/inconshreveable/log15/syslog.go b/vendor/github.com/inconshreveable/log15/syslog.go index 5f95f99f1ee..813481b5669 100644 --- a/vendor/github.com/inconshreveable/log15/syslog.go +++ b/vendor/github.com/inconshreveable/log15/syslog.go @@ -14,7 +14,7 @@ func SyslogHandler(priority syslog.Priority, tag string, fmtr Format) (Handler, return sharedSyslog(fmtr, wr, err) } -// SyslogHandler opens a connection to a log daemon over the network and writes +// SyslogNetHandler opens a connection to a log daemon over the network and writes // all log records to it. func SyslogNetHandler(net, addr string, priority syslog.Priority, tag string, fmtr Format) (Handler, error) { wr, err := syslog.Dial(net, addr, priority, tag) diff --git a/vendor/github.com/inconshreveable/log15/term/terminal_darwin.go b/vendor/github.com/inconshreveable/log15/term/terminal_darwin.go index b05de4cb8c8..d8f351b1b1a 100644 --- a/vendor/github.com/inconshreveable/log15/term/terminal_darwin.go +++ b/vendor/github.com/inconshreveable/log15/term/terminal_darwin.go @@ -2,6 +2,7 @@ // Copyright 2013 The Go Authors. All rights reserved. // Use of this source code is governed by a BSD-style // license that can be found in the LICENSE file. +// +build !appengine package term diff --git a/vendor/github.com/inconshreveable/log15/term/terminal_netbsd.go b/vendor/github.com/inconshreveable/log15/term/terminal_netbsd.go new file mode 100644 index 00000000000..f9bb9e1c23b --- /dev/null +++ b/vendor/github.com/inconshreveable/log15/term/terminal_netbsd.go @@ -0,0 +1,7 @@ +package term + +import "syscall" + +const ioctlReadTermios = syscall.TIOCGETA + +type Termios syscall.Termios diff --git a/vendor/github.com/inconshreveable/log15/term/terminal_notwindows.go b/vendor/github.com/inconshreveable/log15/term/terminal_notwindows.go index 87df7d5b029..c9af534f62f 100644 --- a/vendor/github.com/inconshreveable/log15/term/terminal_notwindows.go +++ b/vendor/github.com/inconshreveable/log15/term/terminal_notwindows.go @@ -3,7 +3,7 @@ // Use of this source code is governed by a BSD-style // license that can be found in the LICENSE file. -// +build linux,!appengine darwin freebsd openbsd +// +build linux,!appengine darwin freebsd openbsd netbsd package term diff --git a/vendor/github.com/inconshreveable/log15/term/terminal_solaris.go b/vendor/github.com/inconshreveable/log15/term/terminal_solaris.go new file mode 100644 index 00000000000..033c163246e --- /dev/null +++ b/vendor/github.com/inconshreveable/log15/term/terminal_solaris.go @@ -0,0 +1,9 @@ +package term + +import "golang.org/x/sys/unix" + +// IsTty returns true if the given file descriptor is a terminal. +func IsTty(fd uintptr) bool { + _, err := unix.IoctlGetTermios(int(fd), unix.TCGETA) + return err == nil +} diff --git a/vendor/vendor.json b/vendor/vendor.json index 4e884428eb7..9d80bd38f84 100644 --- a/vendor/vendor.json +++ b/vendor/vendor.json @@ -416,6 +416,18 @@ "revision": "3ab3a8b8831546bd18fd182c20687ca853b2bb13", "revisionTime": "2016-12-15T22:53:35Z" }, + { + "checksumSHA1": "mrmfY0cVu7jvgoIuTRaR8yVVh/M=", + "path": "github.com/inconshreveable/log15", + "revision": "39bacc234bf1afd0b68573e95b45871f67ba2cd4", + "revisionTime": "2017-02-16T22:56:31Z" + }, + { + "checksumSHA1": "oVIIInZXKkcRozJfuH2vWJsAS7s=", + "path": "github.com/inconshreveable/log15/term", + "revision": "39bacc234bf1afd0b68573e95b45871f67ba2cd4", + "revisionTime": "2017-02-16T22:56:31Z" + }, { "checksumSHA1": "BM6ZlNJmtKy3GBoWwg2X55gnZ4A=", "path": "github.com/klauspost/crc32", From 665cf55e6e0b1d332377654990e98d2fcee6ceb2 Mon Sep 17 00:00:00 2001 From: Dan Cech Date: Tue, 2 May 2017 08:37:56 -0400 Subject: [PATCH 14/43] make generic oauth provider flexible enough to handle bitbucket's oauth implementation (#8248) --- pkg/social/generic_oauth.go | 44 ++++++++++++++++++++++++++++--------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/pkg/social/generic_oauth.go b/pkg/social/generic_oauth.go index f0e36ac064c..04b0536852a 100644 --- a/pkg/social/generic_oauth.go +++ b/pkg/social/generic_oauth.go @@ -4,6 +4,7 @@ import ( "encoding/json" "errors" "fmt" + "io/ioutil" "net/http" "github.com/grafana/grafana/pkg/models" @@ -76,9 +77,11 @@ func (s *GenericOAuth) IsOrganizationMember(client *http.Client) bool { func (s *GenericOAuth) FetchPrivateEmail(client *http.Client) (string, error) { type Record struct { - Email string `json:"email"` - Primary bool `json:"primary"` - Verified bool `json:"verified"` + Email string `json:"email"` + Primary bool `json:"primary"` + IsPrimary bool `json:"is_primary"` + Verified bool `json:"verified"` + IsConfirmed bool `json:"is_confirmed"` } emailsUrl := fmt.Sprintf(s.apiUrl + "/emails") @@ -91,14 +94,30 @@ func (s *GenericOAuth) FetchPrivateEmail(client *http.Client) (string, error) { var records []Record - if err = json.NewDecoder(r.Body).Decode(&records); err != nil { + body, err := ioutil.ReadAll(r.Body) + if err != nil { return "", err } + err = json.Unmarshal(body, records) + if err != nil { + var data struct { + Values []Record `json:"values"` + } + + err = json.Unmarshal(body, &data) + if err != nil { + return "", err + } + + records = data.Values + } + var email = "" for _, record := range records { - if record.Primary { + if record.Primary || record.IsPrimary { email = record.Email + break } } @@ -161,11 +180,12 @@ func (s *GenericOAuth) FetchOrganizations(client *http.Client) ([]string, error) func (s *GenericOAuth) UserInfo(client *http.Client) (*BasicUserInfo, error) { var data struct { - Name string `json:"name"` - Login string `json:"login"` - Username string `json:"username"` - Email string `json:"email"` - Attributes map[string][]string `json:"attributes"` + Name string `json:"name"` + DisplayName string `json:"display_name"` + Login string `json:"login"` + Username string `json:"username"` + Email string `json:"email"` + Attributes map[string][]string `json:"attributes"` } var err error @@ -197,6 +217,10 @@ func (s *GenericOAuth) UserInfo(client *http.Client) (*BasicUserInfo, error) { } } + if userInfo.Name == "" && data.DisplayName != "" { + userInfo.Name = data.DisplayName + } + if userInfo.Login == "" && data.Username != "" { userInfo.Login = data.Username } From ad3da0f47c43b90cc9d330c2b679de1ad4f6f310 Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Tue, 2 May 2017 15:50:10 +0300 Subject: [PATCH 15/43] add icon guide --- .../app/features/styleguide/styleguide.html | 6 +++ public/app/features/styleguide/styleguide.ts | 13 ++++- public/sass/icons.json | 52 +++++++++++++++++++ public/sass/pages/_styleguide.scss | 5 ++ 4 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 public/sass/icons.json diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 2f42ca7e671..4bb0e8ac5a9 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -43,6 +43,12 @@
+
+
+ +
+
+
forms
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index c297f12ab4c..dc5c5d94072 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -9,8 +9,9 @@ class StyleGuideCtrl { buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger']; buttonSizes = ['btn-small', '', 'btn-large']; buttonVariants = ['-', '-outline-']; + icons: any = []; page: any; - pages = ['colors', 'buttons']; + pages = ['colors', 'buttons', 'icons']; /** @ngInject **/ constructor(private $http, private $routeParams, private $location) { @@ -26,6 +27,10 @@ class StyleGuideCtrl { if (this.page.colors) { this.loadColors(); } + + if (this.page.icons) { + this.loadIcons(); + } } loadColors() { @@ -36,6 +41,12 @@ class StyleGuideCtrl { }); } + loadIcons() { + this.$http.get('public/sass/icons.json').then(res => { + this.icons = res.data; + }); + } + switchTheme() { this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark'; this.$location.search(this.$routeParams); diff --git a/public/sass/icons.json b/public/sass/icons.json new file mode 100644 index 00000000000..593c7bbfb55 --- /dev/null +++ b/public/sass/icons.json @@ -0,0 +1,52 @@ +[ + "raintank_wordmark", + "raintank_r-icn", + "check-alt", + "check", + "collector", + "dashboard", + "panel", + "datasources", + "endpoint-tiny", + "endpoint", + "page", + "filter", + "status", + "monitoring", + "monitoring-tiny", + "jump-to-dashboard", + "warning", + "nodata", + "critical", + "crit", + "online", + "event-error", + "event", + "sadface", + "private-collector", + "alert-disabled", + "refresh", + "save", + "share", + "star", + "search", + "remove", + "video", + "bulk_action", + "grabber", + "users", + "globe", + "snapshot", + "play-grafana-icon", + "grafana-icon", + "email", + "stopwatch", + "skull", + "probe", + "apps", + "scale", + "pending", + "verified", + "worldping", + "grafana_wordmark" +] \ No newline at end of file diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index 55aabb01f01..70a71cda1be 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -21,6 +21,11 @@ } } +.style-guide-icon-list { + font-size: 2em; + text-align: center; +} + // define("areas/styleguide/static/script/app/colors", [], function() { // "use strict"; // var a = function(a) { From f43c749422f546580abe8317fa569cc95b65fe4a Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Tue, 2 May 2017 16:15:28 +0300 Subject: [PATCH 16/43] add plugin authoring tab in style guide --- public/app/features/styleguide/styleguide.html | 5 +++++ public/app/features/styleguide/styleguide.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 4bb0e8ac5a9..e573a0e3b09 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -49,6 +49,11 @@
+
+

From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.

+

More information about plugin development can be found at docs.grafana.org

+
+
forms
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index dc5c5d94072..0397b7254a3 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -11,7 +11,7 @@ class StyleGuideCtrl { buttonVariants = ['-', '-outline-']; icons: any = []; page: any; - pages = ['colors', 'buttons', 'icons']; + pages = ['colors', 'buttons', 'icons', 'plugins']; /** @ngInject **/ constructor(private $http, private $routeParams, private $location) { From 53ccc6f48fe612879a2b414eacc406e655abff3a Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Tue, 2 May 2017 16:45:34 +0300 Subject: [PATCH 17/43] fix theme switching in style guide --- public/app/features/styleguide/styleguide.html | 4 ---- public/app/features/styleguide/styleguide.ts | 10 +++++++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index e573a0e3b09..e2a218bb763 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -9,10 +9,6 @@ Switch theme - - - Reload -
    diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index 0397b7254a3..de9da6aafd7 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -14,7 +14,7 @@ class StyleGuideCtrl { pages = ['colors', 'buttons', 'icons', 'plugins']; /** @ngInject **/ - constructor(private $http, private $routeParams, private $location) { + constructor(private $http, private $routeParams, private $location, private backendSrv) { this.theme = config.bootData.user.lightTheme ? 'light': 'dark'; this.page = {}; @@ -49,8 +49,12 @@ class StyleGuideCtrl { switchTheme() { this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark'; - this.$location.search(this.$routeParams); - setTimeout(() => { + + var cmd = { + theme: this.$routeParams.theme + }; + + this.backendSrv.put('/api/user/preferences', cmd).then(() => { window.location.href = window.location.href; }); } From c1de972eb5fa337b98a8886431f85e74e98a64ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 2 May 2017 16:22:31 +0200 Subject: [PATCH 18/43] docs: wip templating docs --- docs/sources/reference/templating.md | 36 ++++++++++++++++++++++++---- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index 636cc62a0c8..422a655d5f2 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -10,19 +10,36 @@ weight = 1 # Templating - + -Dashboard Templating allows you to make your Dashboards more interactive and dynamic. +Templating allows you to make your dashboards more interactive and dynamic. They’re one of the more powerful and complex features in Grafana. The templating +feature allows you to create variables that are shown as dropdown select boxes at the top of the dashboard. +These dropdowns makes it easy to change the variable value and in turn quickly change the data being displayed. -They’re one of the most powerful and most used features of Grafana, and they’ve recently gotten even more attention in Grafana 2.0 and Grafana 2.1. +## What is a variable? -You can create Dashboard Template variables that can be used practically anywhere in a Dashboard: data queries on individual Panels (within the Query Editor), the names in your legends, or titles in Panels and Rows. +A variable is a placeholder for a value. You can use variables in metric queries and in panel titles. So when you change +the value, using the dropdown at the top of the dashboard, your panel's metric queries will change to reflect the new value. -You can configure Dashboard Templating by clicking the dropdown cog on the top of the Dashboard while viewing it. +### Interpolation +Panel titles and metric queries can refer to variables using two different syntaxes: + +- `$` Example: apps.frontend.$server.requests.count +- `[[varname]]` Example: apps.frontend.[[server]].requests.count + +Why two ways? The first syntax is easier to read and write but does not allow you to use a variable in the middle of word. Use +the second syntax for scenarios like this: `my.server[[serverNumber]].count`. + +Before queries are sent to your data source the query is **interpolated**, meaning the variable is replaced with its current value. During +interpolation the variable value might be **escaped** in order to conform to the syntax of the query langauge of where it is used. For example +a variable used in a regex expression in an InfluxDB or Prometheus query will be regex escaped. Read the data source specific documentation +article for details on value escaping during interpolation. ## Variable types + + There are three different types of Template variables: query, custom, and interval. They can all be used to create dynamic variables that you can use throughout the Dashboard, but they differ in how they get the data for their values. @@ -40,6 +57,15 @@ You can even create nested variables that use other variables in their definitio You can utilize the special ** All ** value to allow the Dashboard user to query for every single Query variable returned. Grafana will automatically translate ** All ** into the appropriate format for your Data Source. +### Annotation query details + +The annotation query options are different for each data source. + +- [Graphite annotation queries]({{< relref "features/datasources/graphite.md#annotations" >}}) +- [Elasticsearch annotation queries]({{< relref "features/datasources/elasticsearch.md#annotations" >}}) +- [InfluxDB annotation queries]({{< relref "features/datasources/influxdb.md#annotations" >}}) +- [Prometheus annotation queries]({{< relref "features/datasources/prometheus.md#annotations" >}}) + #### Multi-select As of Grafana 2.1, it is now possible to select a subset of Query Template variables (previously it was possible to select an individual value or 'All', not multiple values that were less than All). This is accomplished via the Multi-Select option. If enabled, the Dashboard user will be able to enable and disable individual variables. From 6ebb31bed4ada6cae569e02f4f528994ab107698 Mon Sep 17 00:00:00 2001 From: Jon Freedman Date: Tue, 2 May 2017 15:45:48 +0100 Subject: [PATCH 19/43] chore: add comment to clarify that org_id usage As described here: https://community.grafana.com/t/many-to-many-group-dn-org-role-mapping-in-ldap-config/729/2 org_id can be used to allow multiple group_dn's to map to the same org_role provided the org_id differs. --- docs/sources/installation/ldap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sources/installation/ldap.md b/docs/sources/installation/ldap.md index e8e1c8e57bd..769ca3fd1ba 100644 --- a/docs/sources/installation/ldap.md +++ b/docs/sources/installation/ldap.md @@ -73,7 +73,7 @@ email = "email" [[servers.group_mappings]] group_dn = "cn=admins,dc=grafana,dc=org" org_role = "Admin" -# The Grafana organization database id, optional, if left out the default org (id 1) will be used +# The Grafana organization database id, optional, if left out the default org (id 1) will be used. Setting this allows for multiple group_dn's to be assigned to the same org_role provided the org_id differs # org_id = 1 [[servers.group_mappings]] From deab4a378a1ca35b53e4e09ece1dde51981a4894 Mon Sep 17 00:00:00 2001 From: Vladimir Gordiychuk Date: Wed, 3 May 2017 09:22:30 +0300 Subject: [PATCH 20/43] bug: MetricSegment lost information about type (#8278) Fixed #8277 --- public/app/core/services/segment_srv.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/app/core/services/segment_srv.js b/public/app/core/services/segment_srv.js index 096697052ce..f1733fcb3e6 100644 --- a/public/app/core/services/segment_srv.js +++ b/public/app/core/services/segment_srv.js @@ -13,6 +13,7 @@ function (angular, _, coreModule) { if (options === '*' || options.value === '*') { this.value = '*'; this.html = $sce.trustAsHtml(''); + this.type = options.type; this.expandable = true; return; } From b042c5398063e6e6022c4ee993fcfdfbbfe16988 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 3 May 2017 08:56:51 +0200 Subject: [PATCH 21/43] ux: updated heatmap icon --- pkg/api/frontendsettings.go | 6 +- .../panel/heatmap/img/icn-heatmap-panel.svg | 335 ++++++++---------- 2 files changed, 144 insertions(+), 197 deletions(-) diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index f7e974db17a..4d84480a208 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -166,10 +166,12 @@ func getPanelSort(id string) int { sort = 3 case "text": sort = 4 - case "alertlist": + case "heatmap": sort = 5 - case "dashlist": + case "alertlist": sort = 6 + case "dashlist": + sort = 7 } return sort } diff --git a/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg b/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg index 29838f76ca6..932d226b99a 100644 --- a/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg +++ b/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg @@ -1,195 +1,140 @@ - - - -image/svg+xml \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From c57ec23a668dd2371181dfdf16b82c983a52425c Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Wed, 3 May 2017 11:46:08 +0300 Subject: [PATCH 22/43] fix broken layout for styleguide icons tab --- public/app/features/styleguide/styleguide.html | 6 ++++-- public/sass/icons.json | 6 +++--- public/sass/pages/_styleguide.scss | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index e2a218bb763..573d720831e 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -40,8 +40,10 @@
-
- +
+
+ +
diff --git a/public/sass/icons.json b/public/sass/icons.json index 593c7bbfb55..4c87042fe02 100644 --- a/public/sass/icons.json +++ b/public/sass/icons.json @@ -1,4 +1,6 @@ [ + "grafana_wordmark", + "worldping", "raintank_wordmark", "raintank_r-icn", "check-alt", @@ -46,7 +48,5 @@ "apps", "scale", "pending", - "verified", - "worldping", - "grafana_wordmark" + "verified" ] \ No newline at end of file diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index 70a71cda1be..66543847574 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -22,7 +22,7 @@ } .style-guide-icon-list { - font-size: 2em; + font-size: 1.8em; text-align: center; } From 2304a710bf3b68036676172ea280bc57391ce729 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 3 May 2017 14:09:04 +0200 Subject: [PATCH 23/43] docs: templating doc wip --- docs/sources/reference/templating.md | 142 +++++++++++++++++++-------- 1 file changed, 99 insertions(+), 43 deletions(-) diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index 422a655d5f2..5322b8150b3 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -12,9 +12,9 @@ weight = 1 -Templating allows you to make your dashboards more interactive and dynamic. They’re one of the more powerful and complex features in Grafana. The templating -feature allows you to create variables that are shown as dropdown select boxes at the top of the dashboard. -These dropdowns makes it easy to change the variable value and in turn quickly change the data being displayed. +Templating allows you to make your dashboards more interactive and dynamic. Instead of hard-coding things like server, application +or sensor id in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of +the dashboard. These dropdowns makes it easy to change the data being displayed in your dashboard. ## What is a variable? @@ -32,80 +32,136 @@ Why two ways? The first syntax is easier to read and write but does not allow yo the second syntax for scenarios like this: `my.server[[serverNumber]].count`. Before queries are sent to your data source the query is **interpolated**, meaning the variable is replaced with its current value. During -interpolation the variable value might be **escaped** in order to conform to the syntax of the query langauge of where it is used. For example -a variable used in a regex expression in an InfluxDB or Prometheus query will be regex escaped. Read the data source specific documentation -article for details on value escaping during interpolation. +interpolation the variable value might be **escaped** in order to conform to the syntax of the query language and where it is used. +For example a variable used in a regex expression in an InfluxDB or Prometheus query will be regex escaped. Read the data source specific +documentation article for details on value escaping during interpolation. -## Variable types +### Variable options + +A variable is presented as a dropdown select box at the top of the dashboards. It has a current value and a set of **options**. The **options** +is the the set of values you can choose from. + +## Adding a variable -There are three different types of Template variables: query, custom, and interval. +You add variables via Dashboard cogs menu > Templating. This opens up a list of variables and a `New` button to create a new variable. -They can all be used to create dynamic variables that you can use throughout the Dashboard, but they differ in how they get the data for their values. +### Basic variable options + +Option | Description +------- | -------- +*Name* | The name of the variable, this is the name you use when you refer to your variable in your metric queries. Must be unique and contain no white-spaces. +*Label* | The name of the dropdown for this variable. +*Hide* | Options to hide the dropdown select box. +*Type* | Defines the variable type. -### Query +### Variable types - > Note: The Query type is Data Source specific. Please consult the appropriate documentation for your particular Data Source. +Type | Description +------- | -------- +*Query* | This variable type allows you to write a data source query that usually returns a list of metric names, tag values or keys. For example a query that returns a list of server names, sensor ids or data centers. +*Interval* | This variable can represent timespans. Instead of hard-coding a group by time or date histogram interval use a variable of this type. +*Datasource* | This type allows you to quickly change data source for an entire Dashboard. Useful if you have multiple instances of a data source in for example different environments. +*Custom* | Define the variable options manually using a comma seperated list. +*Constant* | Define a hidden constant. Useful for metric path prefixes for dashboards you want to share. During dashboard export constant variables will be made into an import option. +*Ad hoc filters* | Very special kind of variable that only works with some data sources, InfluxDB & Elasticsearch currently. It allows you to add key/value filters that will automatically be added to all metric queries that use the specified data source. -Query is the most common type of Template variable. Use the `Query` template type to generate a dynamic list of variables, simply by allowing Grafana to explore your Data Source metric namespace when the Dashboard loads. +### Query options -For example a query like `prod.servers.*` will fill the variable with all possible values that exists in that wildcard position (in the case of the Graphite Data Source). +This variable type is the most powerful and complex as it can dynamically fetch its options using a data source query. -You can even create nested variables that use other variables in their definition. For example `apps.$app.servers.*` uses the variable $app in its own query definition. +Option | Description +------- | -------- +*Data source* | The data source target for the query. +*Refresh* | Controls when to update the variable option list (values in the dropdown). **On Dashboard Load** will slow down dashboard load as the variable query needs to be completed before dashboard can be initialized. Set this only to **On Time Range Change** if your variable options query contains a time range filter or is dependant on dashboard time range. +*Query* | The data source specific query expression. +*Regex* | Regex to filter or capture specific parts of the names return by your data source query. Optional. +*Sort* | Define sort order for options in dropdown. **Disabled** means that the order of options returned by your data source query will be used. -You can utilize the special ** All ** value to allow the Dashboard user to query for every single Query variable returned. Grafana will automatically translate ** All ** into the appropriate format for your Data Source. +### Query expressions -### Annotation query details +The query expressions are different for each data source. -The annotation query options are different for each data source. +- [Graphite templating queries]({{< relref "features/datasources/graphite.md#templating" >}}) +- [Elasticsearch templating queries]({{< relref "features/datasources/elasticsearch.md#templating" >}}) +- [InfluxDB templating queries]({{< relref "features/datasources/influxdb.md#templating" >}}) +- [Prometheus templating queries]({{< relref "features/datasources/prometheus.md#templating" >}}) +- [OpenTSDB templating queries]({{< relref "features/datasources/prometheus.md#templating" >}}) -- [Graphite annotation queries]({{< relref "features/datasources/graphite.md#annotations" >}}) -- [Elasticsearch annotation queries]({{< relref "features/datasources/elasticsearch.md#annotations" >}}) -- [InfluxDB annotation queries]({{< relref "features/datasources/influxdb.md#annotations" >}}) -- [Prometheus annotation queries]({{< relref "features/datasources/prometheus.md#annotations" >}}) +One thing to note is that query expressions can contain references to other variables and in effect create depend & nested +variables. Grafana will detect this and automatically refresh a variable when one of it's containing variables change. -#### Multi-select -As of Grafana 2.1, it is now possible to select a subset of Query Template variables (previously it was possible to select an individual value or 'All', not multiple values that were less than All). This is accomplished via the Multi-Select option. If enabled, the Dashboard user will be able to enable and disable individual variables. +## Selection Options -The Multi-Select functionality is taken a step further with the introduction of Multi-Select Tagging. This functionality allows you to group individual Template variables together under a Tag or Group name. +Option | Description +------- | -------- +*Mulit-value* | If enabled, the variable will support the selection of multiple options at the same time. +*Include All option* | Add a special `All` option whose value includes all options. +*Custom all value* | By default the `All` value will include all options in combined expression. This can become very long and can have performance problems. Many times it can be better to specify a custom all value, like a wildcard regex. To make it possible to have custom regex, globs or lucene syntax in the **Custom all value** option it is never escaped so you will have to think avbout what is a valid value for your data source. -For example, if you were using Templating to list all 20 of your applications, you could use Multi-Select Tagging to group your applications by function or region or criticality, etc. +### Formating multiple values - > 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. +Interpolating a variable with multiple values selected is tricky as it is not straight forward how to format the multiple values to into a string that +is valid in the given context where the variable is used. Grafana tries to solve this by allowing each data source plugin to +inform the templating interpolation engine what format to use for multiple values. - +**Graphite** for example uses glob expressions. A variable with multiple values would in this case be interpolated as `{host1,host2,host3}` if +the current variable value was *host1*, *host2* and *host3*. -Grafana gets the list of tags and the list of values in each tag by performing two queries on your metric namespace. +**InfluxDB and Prometheus** uses regex expressions, so the same variable +would be interpolated as `(host1|host2|host3)`. Every value would also be regex escaped, if not, a value with a regex control character would +break the regex expression. -The Tags query returns a list of Tags. +**Elasticsearch** uses lucene query syntax, so the same variable would in this case be formated as `("host1" OR "host2" OR "host3")`. In this case every value +needs to be escaped so that the value can contain lucene control words and quotation marks. -The Tag values query returns the values for a given Tag. +#### Formating troubles -Note: a proof of concept shim that translates the metric query into a SQL call is provided. This allows you to maintain your tag:value mapping independently of your Data Source. +Automatic escaping & formating can cause problems and it can be tricky to grasp the logic is behind it. +Especially for InfluxDB and Prometheus where the use of regex syntax requires that the variable is used in regex operator context. +If you do not want Grafana to do this automatic regex escaping and formating your only option is to disable the *Multi-value* or *Include All option* +options. -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. +### Value groups/tags -![](/img/docs/v2/multi-select.gif) +If you have a lot of options in the dropdown for a multi-value variable. You can use this feature to group the values into selectable tags. -### Interval +Option | Description +------- | -------- +*Tags query* | Data source query that should return a list of tags +*Tag values query* | Data source query that should return a list of values for a specified tag key. Use `$tag` in the query to refer the currently selected tag. -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/v4/variable_dropdown_tags.png) -![](/img/docs/v2/templated_variable_parameter.png) +### Interval variables -### Custom +Use the `Interval` type to create a variable that represent a timespan (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` timespan. -Use the `Custom` type to manually create Template variables around explicit values that are hard-coded into the Dashboard, and not dependent on any Data Source. You can specify multiple Custom Template values by separating them with a comma. +This variable type is useful as parameter to group by time (for InfluxDB), Date histogram interval (for Elasticsearch) or as a *summarize* function parameter (for Graphite). -## Repeating Panels and Repeating Rows +## Repeating Panels -Template Variables can be very useful to dynamically change what you're visualizing on a given panel. Sometimes, you might want to create entire new Panels (or Rows) based on what Template Variables have been selected. This is now possible in Grafana 2.1. +Template variables can be very useful to dynamically change your queries across a whole dashboard. If you want +Grafana to dynamically create new panels or rows based on what values you have selected you can use the *Repeat* feature. -Once you've got your Template variables (of any type) configured the way you'd like, check out the Repeating Panels and Repeating Row documentation +If you have a variable with `Multi-value` or `Include all value` options enabled you can choose one panel or one row and have Grafana repeat that row +for every selected value. You find this option under the General tab in panel edit mode. You select the variable to repeat by, and a `min span`. +The `min span` controls how small Grafana will make the panels (if you have many values selected). Grafana will automatically adjust the width of +each repeated panel so that the whole row is filled. Currently you cannot mix other panels on a row with a repeated panel. -## Screencast - Templated Graphite Queries +Only make changes to the first panel (the original template). To have the changes take effect on all panels you need to trigger a dynamic dashboard re-build. +You can do this by either changing the variable value (that is the basis for the repeat) or reload the dashboard. + +## Repeating Rows + +This option requires you to open the row options view. Hover over the row left side to trigger the row menu, in this menu click `Row Options`. This +opens the row options view. Here you find a *Repeat* dropdown where you can select the variable to repeat by. + +### URL state + +Variable values are always synced to the URL using the syntax `var-=value`. - From e6c29391c641fd8ffad2c72da0c3b05083b49c4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 3 May 2017 14:20:59 +0200 Subject: [PATCH 24/43] docs: improved Graphite templating docs --- docs/sources/features/datasources/graphite.md | 26 ++++++++++++++++--- docs/sources/reference/templating.md | 6 ++--- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index 58965f8bf6f..34fb48618f7 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -76,17 +76,35 @@ this consolidation is done using `avg` function. You can how Graphite consolidat > client side by Grafana. And depending on your consolidation function only one or two can be correct at the same time. ## Templating -You can create a template variable in Grafana and have that variable filled with values from any Graphite metric exploration query. -You can then use this variable in your Graphite queries, either as part of a metric path or as arguments to functions. -For example a query like `prod.servers.*` will fill the variable with all possible -values that exists in the wildcard position. +Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. +Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data +being displayed in your dashboard. + +Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different +types of template variables. + +### Query variables + +The query you specify in the query field should be a metric find type of query. For example a query like `prod.servers.*` will fill the +variable with all possible values that exists in the wildcard position. You can also create nested variables that use other variables in their definition. For example `apps.$app.servers.*` uses the variable `$app` in its query definition. +### Variable usage + +You can use a variable in a metric node path or as a parameter to a function. ![](/img/docs/v2/templated_variable_parameter.png) +There are two syntaxes: + +- `$` Example: apps.frontend.$server.requests.count +- `[[varname]]` Example: apps.frontend.[[server]].requests.count + +Why two ways? The first syntax is easier to read and write but does not allow you to use a variable in the middle of word. Use +the second syntax in expressions like `my.server[[serverNumber]].count`. + ## Annotations [Annotations]({{< relref "reference/annotations.md" >}}) allows you to overlay rich event information on top of graphs. You add annotation diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index 5322b8150b3..f16e03c898b 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -12,8 +12,8 @@ weight = 1 -Templating allows you to make your dashboards more interactive and dynamic. Instead of hard-coding things like server, application -or sensor id in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of +Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application +and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data being displayed in your dashboard. ## What is a variable? @@ -29,7 +29,7 @@ Panel titles and metric queries can refer to variables using two different synta - `[[varname]]` Example: apps.frontend.[[server]].requests.count Why two ways? The first syntax is easier to read and write but does not allow you to use a variable in the middle of word. Use -the second syntax for scenarios like this: `my.server[[serverNumber]].count`. +the second syntax in expressions like `my.server[[serverNumber]].count`. Before queries are sent to your data source the query is **interpolated**, meaning the variable is replaced with its current value. During interpolation the variable value might be **escaped** in order to conform to the syntax of the query language and where it is used. From ed8d284715c47069d0533a3d3ede52441be87f34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 3 May 2017 15:50:38 +0200 Subject: [PATCH 25/43] docs: updated prometheus docs --- docs/sources/features/datasources/graphite.md | 10 +-- .../features/datasources/prometheus.md | 82 +++++++++---------- docs/sources/reference/templating.md | 7 ++ .../prometheus/partials/query.editor.html | 20 +++-- 4 files changed, 66 insertions(+), 53 deletions(-) diff --git a/docs/sources/features/datasources/graphite.md b/docs/sources/features/datasources/graphite.md index 34fb48618f7..3e4276ba486 100644 --- a/docs/sources/features/datasources/graphite.md +++ b/docs/sources/features/datasources/graphite.md @@ -18,15 +18,13 @@ change function parameters and much more. The editor can handle all types of gra queries through the use of query references. ## Adding the data source -![](/img/docs/v2/add_Graphite.jpg) 1. Open the side menu by clicking the the Grafana icon in the top header. 2. In the side menu under the `Dashboards` link you should find a link named `Data Sources`. +3. Click the `+ Add data source` button in the top header. +4. Select `Graphite` from the *Type* dropdown. - > NOTE: If this link is missing in the side menu it means that your current user does not have the `Admin` role for the current organization. - -3. Click the `Add new` link in the top header. -4. Select `Graphite` from the dropdown. +> NOTE: If your not seeing the `Data Sources` link in your side menu it means that your current user does not have the `Admin` role for the current organization. Name | Description ------------ | ------------- @@ -84,7 +82,7 @@ being displayed in your dashboard. Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different types of template variables. -### Query variables +### Query variable The query you specify in the query field should be a metric find type of query. For example a query like `prod.servers.*` will fill the variable with all possible values that exists in the wildcard position. diff --git a/docs/sources/features/datasources/prometheus.md b/docs/sources/features/datasources/prometheus.md index e6f2749bb4b..b302fb3b5f1 100644 --- a/docs/sources/features/datasources/prometheus.md +++ b/docs/sources/features/datasources/prometheus.md @@ -17,70 +17,70 @@ Grafana includes support for Prometheus Datasources. While the process of adding ## Adding the data source to Grafana -![](/img/docs/v2/add_Prometheus.png) - 1. Open the side menu by clicking the the Grafana icon in the top header. 2. In the side menu under the `Dashboards` link you should find a link named `Data Sources`. +3. Click the `+ Add data source` button in the top header. +4. Select `Prometheus` from the *Type* dropdown. - > NOTE: If this link is missing in the side menu it means that your current user does not have the `Admin` role for the current organization. +> NOTE: If your not seeing the `Data Sources` link in your side menu it means that your current user does not have the `Admin` role for the current organization. -3. Click the `Add new` link in the top header. -4. Select `Prometheus` from the dropdown. +## Data source options Name | Description ------------ | ------------- -Name | The data source name, important that this is the same as in Grafana v1.x if you plan to import old dashboards. -Default | Default data source means that it will be pre-selected for new panels. -Url | The http protocol, ip and port of you Prometheus server (default port is usually 9090) -Access | Proxy = access via Grafana backend, Direct = access directly from browser. -Basic Auth | Enable basic authentication to the Prometheus datasource. -User | Name of your Prometheus user -Password | Database user's password - - > Proxy access means that the Grafana backend will proxy all requests from the browser, and send them on to the Data Source. This is useful because it can eliminate CORS (Cross Origin Site Resource) issues, as well as eliminate the need to disseminate authentication details to the Data Source to the browser. - - > Direct access is still supported because in some cases it may be useful to access a Data Source directly depending on the use case and topology of Grafana, the user, and the Data Source. +*Name* | The data source name, important that this is the same as in Grafana v1.x if you plan to import old dashboards. +*Default* | Default data source means that it will be pre-selected for new panels. +*Url* | The http protocol, ip and port of you Prometheus server (default port is usually 9090) +*Access* | Proxy = access via Grafana backend, Direct = access directly from browser. +*Basic Auth* | Enable basic authentication to the Prometheus datasource. +*User* | Name of your Prometheus user +*Password* | Database user's password ## Query editor -Open a graph in edit mode by click the title. -![](/img/v2/prometheus_editor.png) +Open a graph in edit mode by click the title > Edit (or by pressing `e` key while hovering over panel). -For details on Prometheus metric queries check out the Prometheus documentation -- [Query Metrics - Prometheus documentation](http://prometheus.io/docs/querying/basics/). - -## Templated queries - -Prometheus Datasource Plugin provides the following functions in `Variables values query` field in Templating Editor to query `metric names` and `labels names` on the Prometheus server. +![](/img/docs/v43/prometheus_query_editor.png) Name | Description ------- | -------- -`label_values(label)` | Returns a list of label values for the `label` in every metric. -`label_values(metric, label)` | Returns a list of label values for the `label` in the specified metric. -`metrics(metric)` | Returns a list of metrics matching the specified `metric` regex. -`query_result(query)` | Returns a list of Prometheus query result for the `query`. +*Query expression* | Prometheus query expression, check out the [Prometheus documentation](http://prometheus.io/docs/querying/basics/). +*Legend format* | Controls the name of the time series, using name or pattern. For example `{{hostname}}` will be replaced with label value for the label `hostname`. +*Min step* | Set a lower limit for the prometheus step option. Step controls how big the jumps are when the Prometheus query engine performs range queries. Sadly there is no official prometheus documentation to link to for this very important option. +*Resolution* | Controls the step option. Small steps create high resolution graphs but can be slow over larger time ranges, lowering the resolution can speed things up. `1/2` will try to set step option to generate 1 data point over other pixel. A value of `1/10` will try to set step option so there is a data point every 10 pixels. -For details of `metric names` & `label names`, and `label values`, please refer to the [Prometheus documentation](http://prometheus.io/docs/concepts/data_model/#metric-names-and-labels). +## Templating -> Note: The part of queries is incompatible with the version before 2.6, if you specify like `foo.*`, please change like `metrics(foo.*)`. +Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. +Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data +being displayed in your dashboard. -You can create a template variable in Grafana and have that variable filled with values from any Prometheus metric exploration query. -You can then use this variable in your Prometheus metric queries. +Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different +types of template variables. -For example you can have a variable that contains all values for label `hostname` if you specify a query like this in the templating edit view. +### Query variable -```sql -label_values(hostname) -``` +Variable of the type *Query* allows you to query Prometheus for a list of metrics, labels or label values. The Prometheus data source plugin +provides the following functions you can use in the `Query` input field. -You can also use raw queries & regular expressions to extract anything you might need. +Name | Description +---- | -------- +*label_values(label)* | Returns a list of label values for the `label` in every metric. +*label_values(metric, label)* | Returns a list of label values for the `label` in the specified metric. +*metrics(metric)* | Returns a list of metrics matching the specified `metric` regex. +*query_result(query)* | Returns a list of Prometheus query result for the `query`. -### Using templated variables in queries +For details of *metric names*, *label names* and *label values* are please refer to the [Prometheus documentation](http://prometheus.io/docs/concepts/data_model/#metric-names-and-labels). -When the `Include All` option or `Multi-Value` option is enabled, Grafana converts the labels from plain text to a regex compatible string. -Which means you have to use `=~` instead of `=` in your Prometheus queries. For example `ALERTS{instance=~$instance}` instead of `ALERTS{instance=$instance}`. +### Using variables in queries -![](/img/docs/v2/prometheus_templating.png) +There are two syntaxes: + +- `$` Example: rate(http_requests_total{job=~"$job"}[5m]) +- `[[varname]]` Example: rate(http_requests_total{job="my[[job]]"}[5m]) + +Why two ways? The first syntax is easier to read and write but does not allow you to use a variable in the middle of word. When the *Multi-value* or *Include all value* +option is enabled, Grafana converts the labels from plain text to a regex compatible string. Which means you have to use `=~` instead of `=`. ## Annotations diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index f16e03c898b..51aff771115 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -10,6 +10,13 @@ weight = 1 # Templating +Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. +Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data +being displayed in your dashboard. + +Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different +types of template variables. + Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application diff --git a/public/app/plugins/datasource/prometheus/partials/query.editor.html b/public/app/plugins/datasource/prometheus/partials/query.editor.html index f919800b813..bd3d06773a6 100644 --- a/public/app/plugins/datasource/prometheus/partials/query.editor.html +++ b/public/app/plugins/datasource/prometheus/partials/query.editor.html @@ -13,9 +13,10 @@ ng-model-onblur ng-change="ctrl.refreshMetricData()">
+
- - Min step +
+
@@ -36,14 +38,20 @@
-
- +
+
+
+
+ +
+
+
- -
+ +
- + Reset
- + Reset From dbcd19bbce42ee2fd71d4198a62950e294ccd14e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 4 May 2017 12:12:55 +0200 Subject: [PATCH 33/43] docs: minor update to OpenTSDB docs --- docs/sources/features/datasources/opentsdb.md | 82 ++++++++++++------- 1 file changed, 51 insertions(+), 31 deletions(-) diff --git a/docs/sources/features/datasources/opentsdb.md b/docs/sources/features/datasources/opentsdb.md index 2b1c7e5c3f5..03795473ff7 100644 --- a/docs/sources/features/datasources/opentsdb.md +++ b/docs/sources/features/datasources/opentsdb.md @@ -12,59 +12,79 @@ weight = 5 # Using OpenTSDB in Grafana -{{< docs-imagebox img="/img/docs/v2/add_OpenTSDB.png" max-width="14rem" >}} +Grafana ships with advanced support for OpenTSDB. -The newest release of Grafana adds additional functionality when using an OpenTSDB Data source. +## Adding the data source -1. Open the side menu by clicking the the Grafana icon in the top header. +1. Open the side menu by clicking the Grafana icon in the top header. 2. In the side menu under the `Dashboards` link you should find a link named `Data Sources`. +3. Click the `+ Add data source` button in the top header. +4. Select *OpenTSDB* from the *Type* dropdown. - > NOTE: If this link is missing in the side menu it means that your current user does not have the `Admin` role for the current organization. - -3. Click the `Add new` link in the top header. -4. Select `OpenTSDB` from the dropdown. +> NOTE: If you're not seeing the `Data Sources` link in your side menu it means that your current user does not have the `Admin` role for the current organization. Name | Description ------------ | ------------- -Name | The data source name, important that this is the same as in Grafana v1.x if you plan to import old dashboards. -Default | Default data source means that it will be pre-selected for new panels. -Url | The http protocol, ip and port of you opentsdb server (default port is usually 4242) -Access | Proxy = access via Grafana backend, Direct = access directly from browser. -Version | Version = opentsdb version, either <=2.1 or 2.2 -Resolution | Metrics from opentsdb may have datapoints with either second or millisecond resolution. +*Name* | The data source name. This is how you refer to the data source in panels & queries. +*Default* | Default data source means that it will be pre-selected for new panels. +*Url* | The http protocol, ip and port of you opentsdb server (default port is usually 4242) +*Access* | Proxy = access via Grafana backend, Direct = access directly from browser. +*Version* | Version = opentsdb version, either <=2.1 or 2.2 +*Resolution* | Metrics from opentsdb may have datapoints with either second or millisecond resolution. + ## Query editor -Open a graph in edit mode by click the title. Query editor will differ if the datasource has version <=2.1 or = 2.2. In the former version, only tags can be used to query opentsdb. But in the latter version, filters as well as tags can be used to query opentsdb. Fill Policy is also introduced in opentsdb 2.2. - > Note: While using Opentsdb 2.2 datasource, make sure you use either Filters or Tags as they are mutually exclusive. If used together, might give you weird results. +Open a graph in edit mode by click the title. Query editor will differ if the datasource has version <=2.1 or = 2.2. +In the former version, only tags can be used to query OpenTSDB. But in the latter version, filters as well as tags +can be used to query opentsdb. Fill Policy is also introduced in OpenTSDB 2.2. -![](/img/docs/v2/opentsdb_query_editor.png) +![](/img/docs/v43/opentsdb_query_editor.png) + +> Note: While using OpenTSDB 2.2 datasource, make sure you use either Filters or Tags as they are mutually exclusive. If used together, might give you weird results. ### Auto complete suggestions -As soon as you start typing metric names, tag names and tag values , you should see highlighted auto complete suggestions for them. - > Note: This is required for the OpenTSDB `suggest` api to work. +As soon as you start typing metric names, tag names and tag values , you should see highlighted auto complete suggestions for them. +The autocomplete only works if the OpenTSDB suggest api is enabled. ## Templating queries -Grafana's OpenTSDB data source now supports template variable values queries. This means you can create template variables that fetch the values from OpenTSDB (for example metric names, tag names, or tag values). The query editor is also enhanced to limiting tags by metric. + +Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. +Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data +being displayed in your dashboard. + +Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different +types of template variables. + +### Query variable + +Grafana's OpenTSDB data source supports template variable queries. This means you can create template variables +that fetch the values from OpenTSDB. For example, metric names, tag names, or tag values. When using OpenTSDB with a template variable of `query` type you can use following syntax for lookup. - metrics(prefix) // returns metric names with specific prefix (can be empty) - tag_names(cpu) // return tag names (i.e. keys) for a specific cpu metric - tag_values(cpu, hostname) // return tag values for metric cpu and tag key hostname - suggest_tagk(prefix) // return tag names (i.e. keys) for all metrics with specific prefix (can be empty) - suggest_tagv(prefix) // return tag values for all metrics with specific prefix (can be empty) +Query | Description +------------ | ------------- +*metrics(prefix)* | Returns metric names with specific prefix (can be empty) +*tag_names(cpu)* | Return tag names (i.e. keys) for a specific cpu metric +*tag_values(cpu, hostname)* | Return tag values for metric cpu and tag key hostname +*suggest_tagk(prefix)* | Return tag names (i.e. keys) for all metrics with specific prefix (can be empty) +*suggest_tagv(prefix)* | Return tag values for all metrics with specific prefix (can be empty) -If you do not see template variables being populated in `Preview of values` section, you need to enable `tsd.core.meta.enable_realtime_ts` in the OpenTSDB server settings. Also, to populate metadata of the existing time series data in OpenTSDB, you need to run `tsdb uid metasync` on the OpenTSDB server. +If you do not see template variables being populated in `Preview of values` section, you need to enable +`tsd.core.meta.enable_realtime_ts` in the OpenTSDB server settings. Also, to populate metadata of +the existing time series data in OpenTSDB, you need to run `tsdb uid metasync` on the OpenTSDB server. ### Nested Templating -One template variable can be used to filter tag values for another template varible. Very importantly, the order of the parameters matter in tag_values function. First parameter is the metric name, second parameter is the tag key for which you need to find tag values, and after that all other dependent template variables. Some examples are mentioned below to make nested template queries work successfully. +One template variable can be used to filter tag values for another template varible. First parameter is the metric name, +second parameter is the tag key for which you need to find tag values, and after that all other dependent template variables. +Some examples are mentioned below to make nested template queries work successfully. - tag_values(cpu, hostname, env=$env) // return tag values for cpu metric, selected env tag value and tag key hostname - tag_values(cpu, hostanme, env=$env, region=$region) // return tag values for cpu metric, selected env tag value, selected region tag value and tag key hostname +Query | Description +------------ | ------------- +*tag_values(cpu, hostname, env=$env)* | Return tag values for cpu metric, selected env tag value and tag key hostname +*tag_values(cpu, hostanme, env=$env, region=$region)* | Return tag values for cpu metric, selected env tag value, selected region tag value and tag key hostname -> Note: This is required for the OpenTSDB `lookup` api to work. - -For details on opentsdb metric queries checkout the official [OpenTSDB documentation](http://opentsdb.net/docs/build/html/index.html) +For details on OpenTSDB metric queries checkout the official [OpenTSDB documentation](http://opentsdb.net/docs/build/html/index.html) From 0390a7c17bbfb28dc61dd2484ca7dc8ea4bff833 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 4 May 2017 12:36:34 +0200 Subject: [PATCH 34/43] docs: fixed docs intro --- docs/sources/reference/templating.md | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index 128af6591d2..79d9e6656e0 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -14,9 +14,6 @@ Instead of hard-coding things like server, application and sensor name in you me Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data being displayed in your dashboard. -Checkout the [Templating]({{< relref "reference/templating.md" >}}) documentation for an introduction to the templating feature and the different -types of template variables. - Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application From 61b51c0cbf09834a22ca0f228ecb0443b1e3d513 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 4 May 2017 16:03:47 +0200 Subject: [PATCH 35/43] heatmap: refactoring --- .../app/plugins/panel/heatmap/axes_editor.ts | 24 +++---------- .../panel/heatmap/partials/axes_editor.html | 36 +++++++++++-------- 2 files changed, 25 insertions(+), 35 deletions(-) diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts index 2bf4ac05622..32ea66cc4d9 100644 --- a/public/app/plugins/panel/heatmap/axes_editor.ts +++ b/public/app/plugins/panel/heatmap/axes_editor.ts @@ -8,8 +8,7 @@ export class AxesEditorCtrl { unitFormats: any; logScales: any; dataFormats: any; - yBucketOptions: any[]; - xBucketOptions: any[]; + yBucketModes: any[]; /** @ngInject */ constructor($scope, uiSegmentSrv) { @@ -31,24 +30,9 @@ export class AxesEditorCtrl { 'Time series Pre-bucketed': 'tsbuckets' }; - this.yBucketOptions = [ - {text: '5', value: '5'}, - {text: '10', value: '10'}, - {text: '20', value: '20'}, - {text: '30', value: '30'}, - {text: '50', value: '50'}, - ]; - - this.xBucketOptions = [ - {text: '15', value: '15'}, - {text: '20', value: '20'}, - {text: '30', value: '30'}, - {text: '50', value: '50'}, - {text: '1m', value: '1m'}, - {text: '5m', value: '5m'}, - {text: '10m', value: '10m'}, - {text: '20m', value: '20m'}, - {text: '1h', value: '1h'}, + this.yBucketModes = [ + {text: 'Count', value: 'count'}, + {text: 'Interval', value: 'interval'}, ]; } diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html index a8dd1a05473..933f3f08df1 100644 --- a/public/app/plugins/panel/heatmap/partials/axes_editor.html +++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html @@ -3,7 +3,7 @@
Y Axis
-
@@ -11,19 +11,17 @@
-
+
-
-
- - -
-
- - -
+
+ + +
+
+ +
@@ -34,10 +32,18 @@
- - + +
+ +
+ + + Number of buckets for Y axis
From b4a8678cae1e3e3170604d915d17bb2dde10eea3 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 4 May 2017 10:34:19 -0400 Subject: [PATCH 36/43] remove duplicate paragraph, couple word tweaks --- docs/sources/reference/templating.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index 79d9e6656e0..7fa71989570 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -10,16 +10,12 @@ weight = 1 # Templating -Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. -Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns makes it easy to change the data -being displayed in your dashboard. - - - Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. + + ## What is a variable? A variable is a placeholder for a value. You can use variables in metric queries and in panel titles. So when you change @@ -42,7 +38,7 @@ documentation article for details on value escaping during interpolation. ### Variable options -A variable is presented as a dropdown select box at the top of the dashboards. It has a current value and a set of **options**. The **options** +A variable is presented as a dropdown select box at the top of the dashboard. It has a current value and a set of **options**. The **options** is the set of values you can choose from. ## Adding a variable @@ -151,7 +147,7 @@ Template variables can be very useful to dynamically change your queries across Grafana to dynamically create new panels or rows based on what values you have selected you can use the *Repeat* feature. If you have a variable with `Multi-value` or `Include all value` options enabled you can choose one panel or one row and have Grafana repeat that row -for every selected value. You find this option under the General tab in panel edit mode. You select the variable to repeat by, and a `min span`. +for every selected value. You find this option under the General tab in panel edit mode. Select the variable to repeat by, and a `min span`. The `min span` controls how small Grafana will make the panels (if you have many values selected). Grafana will automatically adjust the width of each repeated panel so that the whole row is filled. Currently, you cannot mix other panels on a row with a repeated panel. From 5acabc6ccbfab78b7441e2894e0ba7513025ac29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 4 May 2017 19:56:20 +0200 Subject: [PATCH 37/43] heatmap: refactoring --- .../app/plugins/panel/heatmap/axes_editor.ts | 6 -- .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 12 ++- .../panel/heatmap/partials/axes_editor.html | 84 +++++++++++-------- 3 files changed, 58 insertions(+), 44 deletions(-) diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts index 32ea66cc4d9..46926697522 100644 --- a/public/app/plugins/panel/heatmap/axes_editor.ts +++ b/public/app/plugins/panel/heatmap/axes_editor.ts @@ -8,7 +8,6 @@ export class AxesEditorCtrl { unitFormats: any; logScales: any; dataFormats: any; - yBucketModes: any[]; /** @ngInject */ constructor($scope, uiSegmentSrv) { @@ -29,11 +28,6 @@ export class AxesEditorCtrl { 'Time series': 'timeseries', 'Time series Pre-bucketed': 'tsbuckets' }; - - this.yBucketModes = [ - {text: 'Count', value: 'count'}, - {text: 'Interval', value: 'interval'}, - ]; } setUnitFormat(subItem) { diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 8a7672f7a23..5c5f8b33efb 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -30,7 +30,11 @@ let panelDefaults = { dataFormat: 'timeseries', xAxis: { show: true, - buckets: 'auto', + buckets: { + mode: 'count', + count: null, + size: null, + }, }, yAxis: { show: true, @@ -40,7 +44,11 @@ let panelDefaults = { splitFactor: null, min: null, max: null, - buckets: 'auto', + buckets: { + mode: 'count', + count: null, + size: null, + }, removeZeroValues: false }, tooltip: { diff --git a/public/app/plugins/panel/heatmap/partials/axes_editor.html b/public/app/plugins/panel/heatmap/partials/axes_editor.html index 933f3f08df1..5841470f69c 100644 --- a/public/app/plugins/panel/heatmap/partials/axes_editor.html +++ b/public/app/plugins/panel/heatmap/partials/axes_editor.html @@ -4,9 +4,9 @@
+ ng-model="ctrl.panel.yAxis.format" + dropdown-typeahead2="editor.unitFormats" + dropdown-typeahead-on-select="editor.setUnitFormat($subItem)">
@@ -26,54 +26,66 @@
+ bs-tooltip="'Override automatic decimal precision for axis.'" + ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+
+ +
+
Buckets
- -
- -
- - - Number of buckets for Y axis + + + +
+
+ + +
+
+
+
+ + + +
+
+ +
- - + + +
-
X Axis
+
Data format
- - -
-
- -
-
Data format
-
- -
- + +
+ +
-
From 6ee11f1172fcc274de93f9126d37c8cd7b8cc345 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 May 2017 07:05:11 +0200 Subject: [PATCH 38/43] heatmap: minor update --- public/app/plugins/panel/heatmap/axes_editor.ts | 2 +- public/app/plugins/panel/heatmap/heatmap_ctrl.ts | 14 ++++---------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts index 46926697522..3c905d967f8 100644 --- a/public/app/plugins/panel/heatmap/axes_editor.ts +++ b/public/app/plugins/panel/heatmap/axes_editor.ts @@ -26,7 +26,7 @@ export class AxesEditorCtrl { this.dataFormats = { 'Time series': 'timeseries', - 'Time series Pre-bucketed': 'tsbuckets' + 'Time series buckets': 'tsbuckets' }; } diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 5c5f8b33efb..8e4b5bc1e54 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -30,11 +30,6 @@ let panelDefaults = { dataFormat: 'timeseries', xAxis: { show: true, - buckets: { - mode: 'count', - count: null, - size: null, - }, }, yAxis: { show: true, @@ -44,13 +39,12 @@ let panelDefaults = { splitFactor: null, min: null, max: null, - buckets: { - mode: 'count', - count: null, - size: null, - }, removeZeroValues: false }, + xBucketSize: null, + xBucketNumber: null, + yBucketSize: null, + yBucketNumber: null, tooltip: { show: true, seriesStat: false, From e75bc5d39a35c389ab9d196d67848629a3200ce6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 May 2017 08:56:19 +0200 Subject: [PATCH 39/43] docs: added templating docs link to app --- docs/sources/reference/templating.md | 4 ++-- .../features/templating/partials/editor.html | 22 ++++++++++++++++++- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/docs/sources/reference/templating.md b/docs/sources/reference/templating.md index 7fa71989570..0405251f44d 100644 --- a/docs/sources/reference/templating.md +++ b/docs/sources/reference/templating.md @@ -90,8 +90,8 @@ The query expressions are different for each data source. - [Prometheus templating queries]({{< relref "features/datasources/prometheus.md#templating" >}}) - [OpenTSDB templating queries]({{< relref "features/datasources/prometheus.md#templating" >}}) -One thing to note is that query expressions can contain references to other variables and in effect create depend & nested -variables. Grafana will detect this and automatically refresh a variable when one of it's containing variables change. +One thing to note is that query expressions can contain references to other variables and in effect create linked variables. +Grafana will detect this and automatically refresh a variable when one of it's containing variables change. ## Selection Options diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index a0683debc5c..59e304278f7 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -17,6 +17,11 @@
  • New +
    • +
  • + + Help +
    • @@ -30,7 +35,8 @@
    No template variables defined -
    +

    +
    @@ -64,6 +70,20 @@
    +
    +
    +

    What does templating do?

    +

    Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application + and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of + the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. +
    +
    + + Checkout the Templating documentation for more information. +

    +
    +
    +
      New From 2479ad262ea47643fec6c904b9486c9528d5efc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 May 2017 09:16:28 +0200 Subject: [PATCH 40/43] ux: updated look of info box --- public/app/features/templating/partials/editor.html | 2 +- public/app/partials/metrics.html | 1 + public/sass/components/_infobox.scss | 8 +++++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 59e304278f7..d974b7d4e3d 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -72,7 +72,7 @@
    -

    What does templating do?

    +
    What does templating do?

    Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application and sensor name in you metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard. diff --git a/public/app/partials/metrics.html b/public/app/partials/metrics.html index 1cd6718e27b..39c471eabd1 100644 --- a/public/app/partials/metrics.html +++ b/public/app/partials/metrics.html @@ -17,3 +17,4 @@

    +
    diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index e6d42597c75..a6951ee9c51 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -10,9 +10,11 @@ .grafana-info-box { position: relative; - padding: 5px 20px; - background-color: $tight-form-bg; - border: 1px solid $tight-form-border; + background: $card-background; + box-shadow: $card-shadow; + padding: 1rem; + border-radius: 4px; + h5 { margin-top: 5px; } From 5c9810fba46ffb0eb95a41b1af45a1e78f6e2aaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 May 2017 11:30:44 +0200 Subject: [PATCH 41/43] docs: added in app docs & links to annotation docs --- .../features/annotations/partials/editor.html | 21 +++++++++++++++++++ public/sass/components/_infobox.scss | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index b9032cdcd87..1506e1a0dc5 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -18,6 +18,12 @@
  • New Query
    • + +
  • + + Help + +
    • + +
    +
    +
    What are Annotations?
    +

    + Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons + on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event. + In the Queries tab you can add queries that return annotation events. +
    +
    + Checkout the Annotations documentation for more information. +

    +
    +
    +
    No annotation queries defined diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index a6951ee9c51..63b334a273e 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -16,7 +16,7 @@ border-radius: 4px; h5 { - margin-top: 5px; + margin-bottom: $spacer; } ul { padding-left: $spacer; From 4412e41738beaddc8cf2078f7653329f24e9e012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 May 2017 11:43:42 +0200 Subject: [PATCH 42/43] ux: updated heatmap and alertlist icons --- .../alertlist/img/icn-singlestat-panel.svg | 108 ++++++--- .../panel/heatmap/img/icn-heatmap-panel.svg | 214 +++++++----------- 2 files changed, 156 insertions(+), 166 deletions(-) diff --git a/public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg b/public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg index a1e15d4d58d..d6ba04bbf01 100644 --- a/public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg +++ b/public/app/plugins/panel/alertlist/img/icn-singlestat-panel.svg @@ -1,33 +1,75 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg b/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg index 932d226b99a..54e5f5d44f2 100644 --- a/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg +++ b/public/app/plugins/panel/heatmap/img/icn-heatmap-panel.svg @@ -3,138 +3,86 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 43c6f749047275c9c1db192e88e08701930366f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 5 May 2017 12:33:04 +0200 Subject: [PATCH 43/43] heatmap: removed fill background, and highlight card options --- .../app/plugins/panel/heatmap/heatmap_ctrl.ts | 1 - .../plugins/panel/heatmap/heatmap_tooltip.ts | 2 +- .../heatmap/partials/display_editor.html | 26 ++- public/app/plugins/panel/heatmap/rendering.ts | 169 ++++++++---------- 4 files changed, 86 insertions(+), 112 deletions(-) diff --git a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts index 8e4b5bc1e54..5600a5ea2e4 100644 --- a/public/app/plugins/panel/heatmap/heatmap_ctrl.ts +++ b/public/app/plugins/panel/heatmap/heatmap_ctrl.ts @@ -25,7 +25,6 @@ let panelDefaults = { colorScale: 'sqrt', exponent: 0.5, colorScheme: 'interpolateOranges', - fillBackground: false }, dataFormat: 'timeseries', xAxis: { diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts index c78fb35cfba..fe36112b859 100644 --- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts +++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts @@ -87,7 +87,7 @@ export class HeatmapTooltip { let tooltipHtml = `
    ${time}
    `; - if (yData) { + if (yData && yData.bounds) { boundBottom = valueFormatter(yData.bounds.bottom); boundTop = valueFormatter(yData.bounds.top); valuesNumber = yData.values.length; diff --git a/public/app/plugins/panel/heatmap/partials/display_editor.html b/public/app/plugins/panel/heatmap/partials/display_editor.html index 92409b3ad5e..a6d1de1981c 100644 --- a/public/app/plugins/panel/heatmap/partials/display_editor.html +++ b/public/app/plugins/panel/heatmap/partials/display_editor.html @@ -2,51 +2,49 @@
    Colors
    - -
    + +
    - +
    - +
    - +
    - +
    - -
    + +
    - +
    - -
    -
    Cards
    +
    Buckets
    @@ -64,10 +62,6 @@ checked="ctrl.panel.tooltip.show" on-change="ctrl.render()">
    - - diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index a0f6786baf1..b822de2b068 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/public/app/plugins/panel/heatmap/rendering.ts @@ -376,10 +376,6 @@ export default function link(scope, elem, attrs, ctrl) { setOpacityScale(max_value); setCardSize(); - if (panel.color.fillBackground && panel.color.mode === 'spectrum') { - fillBackground(heatmap, colorScale(0)); - } - let cards = heatmap.selectAll(".heatmap-card").data(cardsData); cards.append("title"); cards = cards.enter().append("rect") @@ -407,24 +403,20 @@ export default function link(scope, elem, attrs, ctrl) { } function highlightCard(event) { - if (panel.highlightCards) { - let color = d3.select(event.target).style("fill"); - let highlightColor = d3.color(color).darker(2); - let strokeColor = d3.color(color).brighter(4); - let current_card = d3.select(event.target); - tooltip.originalFillColor = color; - current_card.style("fill", highlightColor) - .style("stroke", strokeColor) - .style("stroke-width", 1); - } + let color = d3.select(event.target).style("fill"); + let highlightColor = d3.color(color).darker(2); + let strokeColor = d3.color(color).brighter(4); + let current_card = d3.select(event.target); + tooltip.originalFillColor = color; + current_card.style("fill", highlightColor) + .style("stroke", strokeColor) + .style("stroke-width", 1); } function resetCardHighLight(event) { - if (panel.highlightCards) { - d3.select(event.target).style("fill", tooltip.originalFillColor) - .style("stroke", tooltip.originalFillColor) - .style("stroke-width", 0); - } + d3.select(event.target).style("fill", tooltip.originalFillColor) + .style("stroke", tooltip.originalFillColor) + .style("stroke-width", 0); } function getColorScale(maxValue) { @@ -442,12 +434,12 @@ export default function link(scope, elem, attrs, ctrl) { function setOpacityScale(max_value) { if (panel.color.colorScale === 'linear') { opacityScale = d3.scaleLinear() - .domain([0, max_value]) - .range([0, 1]); + .domain([0, max_value]) + .range([0, 1]); } else if (panel.color.colorScale === 'sqrt') { opacityScale = d3.scalePow().exponent(panel.color.exponent) - .domain([0, max_value]) - .range([0, 1]); + .domain([0, max_value]) + .range([0, 1]); } } @@ -549,15 +541,6 @@ export default function link(scope, elem, attrs, ctrl) { } } - function fillBackground(heatmap, color) { - heatmap.insert("rect", "g") - .attr("x", yAxisWidth) - .attr("y", margin.top) - .attr("width", chartWidth) - .attr("height", chartHeight) - .attr("fill", color); - } - ///////////////////////////// // Selection and crosshair // ///////////////////////////// @@ -570,12 +553,12 @@ export default function link(scope, elem, attrs, ctrl) { if (ctrl.dashboard.graphTooltip === 2) { tooltip.show(event.pos, data); } - }); + }, scope); appEvents.on('graph-hover-clear', () => { clearCrosshair(); tooltip.destroy(); - }); + }, scope); function onMouseDown(event) { selection.active = true; @@ -584,6 +567,7 @@ export default function link(scope, elem, attrs, ctrl) { mouseUpHandler = function() { onMouseUp(); }; + $(document).one("mouseup", mouseUpHandler); } @@ -660,11 +644,11 @@ export default function link(scope, elem, attrs, ctrl) { if (selectionWidth > MIN_SELECTION_WIDTH) { heatmap.append("rect") - .attr("class", "heatmap-selection") - .attr("x", selectionX) - .attr("width", selectionWidth) - .attr("y", chartTop) - .attr("height", chartHeight); + .attr("class", "heatmap-selection") + .attr("x", selectionX) + .attr("width", selectionWidth) + .attr("y", chartTop) + .attr("height", chartHeight); } } } @@ -687,14 +671,14 @@ export default function link(scope, elem, attrs, ctrl) { posX = Math.min(posX, chartWidth + yAxisWidth); heatmap.append("g") - .attr("class", "heatmap-crosshair") - .attr("transform", "translate(" + posX + ",0)") - .append("line") - .attr("x1", 1) - .attr("y1", chartTop) - .attr("x2", 1) - .attr("y2", chartBottom) - .attr("stroke-width", 1); + .attr("class", "heatmap-crosshair") + .attr("transform", "translate(" + posX + ",0)") + .append("line") + .attr("x1", 1) + .attr("y1", chartTop) + .attr("x2", 1) + .attr("y2", chartBottom) + .attr("stroke-width", 1); } } @@ -725,14 +709,14 @@ export default function link(scope, elem, attrs, ctrl) { var legendRects = legend.selectAll(".heatmap-color-legend-rect").data(valuesRange); legendRects.enter().append("rect") - .attr("x", d => d) - .attr("y", 0) - .attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps - .attr("height", legendHeight) - .attr("stroke-width", 0) - .attr("fill", d => { - return legendColorScale(d); - }); + .attr("x", d => d) + .attr("y", 0) + .attr("width", rangeStep + 1) // Overlap rectangles to prevent gaps + .attr("height", legendHeight) + .attr("stroke-width", 0) + .attr("fill", d => { + return legendColorScale(d); + }); } function drawOpacityLegend() { @@ -745,12 +729,12 @@ export default function link(scope, elem, attrs, ctrl) { let legendOpacityScale; if (panel.color.colorScale === 'linear') { legendOpacityScale = d3.scaleLinear() - .domain([0, legendWidth]) - .range([0, 1]); + .domain([0, legendWidth]) + .range([0, 1]); } else if (panel.color.colorScale === 'sqrt') { legendOpacityScale = d3.scalePow().exponent(panel.color.exponent) - .domain([0, legendWidth]) - .range([0, 1]); + .domain([0, legendWidth]) + .range([0, 1]); } let rangeStep = 1; @@ -758,15 +742,15 @@ export default function link(scope, elem, attrs, ctrl) { var legendRects = legend.selectAll(".heatmap-opacity-legend-rect").data(valuesRange); legendRects.enter().append("rect") - .attr("x", d => d) - .attr("y", 0) - .attr("width", rangeStep) - .attr("height", legendHeight) - .attr("stroke-width", 0) - .attr("fill", panel.color.cardColor) - .style("opacity", d => { - return legendOpacityScale(d); - }); + .attr("x", d => d) + .attr("y", 0) + .attr("width", rangeStep) + .attr("height", legendHeight) + .attr("stroke-width", 0) + .attr("fill", panel.color.cardColor) + .style("opacity", d => { + return legendOpacityScale(d); + }); } function render() { @@ -774,34 +758,26 @@ export default function link(scope, elem, attrs, ctrl) { panel = ctrl.panel; timeRange = ctrl.range; - if (setElementHeight()) { - - if (data) { - // Draw default axes and return if no data - if (_.isEmpty(data.buckets)) { - addHeatmapCanvas(); - addAxes(); - return; - } - - addHeatmap(); - scope.yScale = yScale; - scope.xScale = xScale; - scope.yAxisWidth = yAxisWidth; - scope.xAxisHeight = xAxisHeight; - scope.chartHeight = chartHeight; - scope.chartWidth = chartWidth; - scope.chartTop = chartTop; - - // Register selection listeners - $heatmap.on("mousedown", onMouseDown); - $heatmap.on("mousemove", onMouseMove); - $heatmap.on("mouseleave", onMouseLeave); - } else { - return; - } + if (!setElementHeight() || !data) { + return; } + // Draw default axes and return if no data + if (_.isEmpty(data.buckets)) { + addHeatmapCanvas(); + addAxes(); + return; + } + + addHeatmap(); + scope.yScale = yScale; + scope.xScale = xScale; + scope.yAxisWidth = yAxisWidth; + scope.xAxisHeight = xAxisHeight; + scope.chartHeight = chartHeight; + scope.chartWidth = chartWidth; + scope.chartTop = chartTop; + // Draw only if color editor is opened if (!d3.select("#heatmap-color-legend").empty()) { drawColorLegend(); @@ -810,6 +786,11 @@ export default function link(scope, elem, attrs, ctrl) { drawOpacityLegend(); } } + + // Register selection listeners + $heatmap.on("mousedown", onMouseDown); + $heatmap.on("mousemove", onMouseMove); + $heatmap.on("mouseleave", onMouseLeave); } function grafanaTimeFormat(ticks, min, max) {