admin/grafana-statusmap
1
0
Fork 0
mirror of https://github.com/timberjoegithub/grafana-statusmap.git synced 2026-07-21 23:42:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

README update: prometheus queries explanation, plugin installation

Browse Source 
- Logo update!
- User links
This commit is contained in:
Ivan Mikheykin
2018-09-18 17:28:36 +03:00
parent 4829af352c
commit 0ea6916490
6 changed files with 140 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+38 -3
View File
@@ -15,6 +15,15 @@
* Prometheus datasource
* Tested with Grafana 5.1.3
## Installation
Plugin can be installed with git:
```
git clone git@github.com:flant/grafana-statusmap.git /var/lib/grafana/plugins/flant-statusmap-panel
```
Or you can download ZIP archive of this repo and unpack it into /var/lib/grafana/plugins directory.
## Motivation
@@ -25,7 +34,33 @@ of predefined values: something like `ok` = 0, `off` = 1, `fail` = 2.
## Configuration
Recommended setup is to create query for each possible status value with similar legend:
### Prometheus
Discrete statuses requires some setup in prometheus to get all available statuses over time.
If metric has values 0 and 1 and status is stored in label then it's ok. But if there are 5 statuses
and metric has possible values (0,1,2,3,4) then it should be transformed into previous form with this rule:
```
- record: coffee_maker_status:discrete
expr: |
count_values("status", coffee_maker_status)
```
This rule will transform metric `coffee_maker_status` with value `3` into this new metric:
```
coffee_maker_status:discrete{status="3"} 1
```
Now prometheus has 0 and 1 for each status. And these metrics can be aggregated
to get all available statuses over time.
### Panel
Each possible status value corresponds to a separate query. Each query should have similar legend for grouping.
![Query setup](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/queries-example.png)
@@ -51,7 +86,7 @@ __Null values__ can be treated as empty buckets or displayed as color of 0 value
![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/null-as-empty.png)
__Min width__ and __spacing__ are determine minimal bucket width and vertical and horizontal spacing between buckets.
__Min width__ and __spacing__ are determine minimal bucket width and spacing between buckets.
__Rounding__ is for round edges.
![Min width, spacing, rounding](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/min-width-spacing-rounding.png)
@@ -77,7 +112,7 @@ grunt watch
## Acknowledgements
Idea of a plugin comes from Dmitry Stolyarov @distol, initial version written by Sergey Gnuskov @gsmetal and final changes made by Ivan Mikheykin @diafour.
Idea of a plugin comes from Dmitry Stolyarov [@distol](https://github.com/distol), initial version written by Sergey Gnuskov [@gsmetal](https://github.com/gsmetal) and final changes made by Ivan Mikheykin [@diafour](https://github.com/diafour).
This plugin is based on a "Heatmap" panel by Grafana and inspired by ideas from Carpet plot, Discrete panel, Status Panel, Status Dot, Status By Group.
dist/README.md
Vendored
+10 -1
View File
@@ -15,6 +15,15 @@
* Prometheus datasource
* Tested with Grafana 5.1.3
## Installation
Plugin can be installed with git:
```
git clone git@github.com:flant/grafana-statusmap.git /var/lib/grafana/plugins/flant-statusmap-panel
```
Or you can download ZIP archive of this repo and unpack it into /var/lib/grafana/plugins directory.
## Motivation
@@ -51,7 +60,7 @@ __Null values__ can be treated as empty buckets or displayed as color of 0 value
![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/null-as-empty.png)
__Min width__ and __spacing__ are determine minimal bucket width and vertical and horizontal spacing between buckets.
__Min width__ and __spacing__ are determine minimal bucket width and spacing between buckets.
__Rounding__ is for round edges.
![Min width, spacing, rounding](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/min-width-spacing-rounding.png)
dist/img/logo.svg
Vendored
+46 -3
View File
@@ -1,3 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" viewBox="0 0 100 100" width="100px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rect height="100" width="100" y="-5.44e-15" x="0"/><g fill="#008000"><rect height="22.5" width="10.4" y="1.4" x="38.4"/><rect height="22.5" width="10.4" y="26.3" x="38.4"/><rect height="22.4" width="10.4" y="76.1" x="38.4"/><rect height="22.3" width="10.4" y="51.2" x="38.4"/><rect height="22.5" width="10.4" y="1.4" x="50.9"/><rect height="22.5" width="10.4" y="76" x="50.9"/></g><rect height="22.3" width="10.4" y="51.2" x="50.9" fill="#ff0"/><rect height="22.5" width="10.4" y="1.4" x="63.3" fill="#f00"/><g fill="#008000"><rect height="22.5" width="10.4" y="26.3" x="63.3"/><rect height="22.5" width="10.4" y="26.3" x="50.8"/><rect height="22.5" width="10.4" y="76" x="63.3"/><rect height="22.3" width="10.4" y="51.2" x="63.3"/></g><rect height="22.5" width="10.4" y="1.4" x="75.7" fill="#f00"/><g fill="#008000"><rect height="22.5" width="10.4" y="26.3" x="75.7"/><rect height="22.5" width="10.4" y="76" x="75.7"/><rect height="22.4" width="10.4" y="51.2" x="75.7"/><rect height="22.5" width="10.4" y="26.3" x="88.2"/><rect height="22.5" width="10.4" y="76" x="88.2"/><rect height="22.3" width="10.4" y="51.2" x="88.2"/><rect height="22.5" width="10.4" y="1.4" x="88.2"/></g><g fill-rule="evenodd" fill="#999"><path d="m32.3 35.8h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m26.9 37.6h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m23.3 37.6h1.8v3.56h-1.8z"/><path d="m18 41.1h3.56v-5.33h-1.8v1.77h-1.77z"/><path d="m24.4 60h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m13.7 61.8h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m33.5 61.8h1.8v3.56h-1.8z"/><path d="m19.1 65.4h3.56v-5.33h-1.8v1.77h-1.77z"/><path d="m29.8 60h1.77v5.33h-1.77z"/><path d="m3.09 63.6h1.77v1.78h1.8v-5.33h-1.8v1.77h-1.77z"/><path d="m8.25 60h1.77v3.55h-1.77z"/><path d="m10 65.4h1.8v-1.78h-1.8v1.78z"/><path d="m32.3 86h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m26.2 87.8h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m22.3 87.8h1.8v3.56h-1.8z"/><path d="m12.6 86h1.77v5.33h-1.77z"/><path d="m16.7 89.6h1.77v1.78h1.8v-5.33h-1.8v1.77h-1.77z"/><path d="m7.65 86h1.77v3.55h-1.77z"/><path d="m9.42 91.4h1.8v-1.78h-1.8v1.78z"/><path d="m2.2 9.8h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m26.9 11.6h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m22.6 11.6h1.8v3.56h-1.8z"/><path d="m12.8 15.1h3.56v-5.33h-1.8v1.77h-1.77z"/><path d="m18.3 9.8h1.77v5.33h-1.77z"/><path d="m7.26 13.3h1.77v1.78h1.8v-5.33h-1.8v1.77h-1.77z"/><path d="m32.3 9.8h1.77v3.55h-1.77z"/><path d="m34.1 15.1h1.8v-1.78h-1.8v1.78z"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="Layer_1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49.9995" y1="0" x2="49.9995" y2="100.0005">
<stop offset="0" style="stop-color:#4748FF"/>
<stop offset="1" style="stop-color:#4F1A98"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M0,8.504C0,3.827,3.827,0,8.504,0h82.992C96.173,0,100,3.827,100,8.504v82.992
c0,4.677-3.827,8.504-8.504,8.504H8.504C3.827,100,0,96.173,0,91.496V8.504z"/>
</g>
<g>
<rect x="37.675" y="7.334" fill="#00A94C" width="9.139" height="19.773"/>
<rect x="37.675" y="29.216" fill="#00A94C" width="9.139" height="19.773"/>
<rect x="37.675" y="72.98" fill="#00A94C" width="9.139" height="19.686"/>
<rect x="37.675" y="51.099" fill="#00A94C" width="9.139" height="19.598"/>
<rect x="48.66" y="7.334" fill="#00A94C" width="9.139" height="19.773"/>
<rect x="48.66" y="72.894" fill="#00A94C" width="9.139" height="19.772"/>
</g>
<rect x="48.66" y="51.099" fill="#FFFF00" width="9.139" height="19.598"/>
<rect x="59.557" y="7.334" fill="#FF6A13" width="9.14" height="19.773"/>
<g>
<rect x="59.557" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="48.572" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="59.557" y="72.894" fill="#00A94C" width="9.14" height="19.772"/>
<rect x="59.557" y="51.099" fill="#00A94C" width="9.14" height="19.598"/>
</g>
<rect x="70.454" y="7.334" fill="#FF6A13" width="9.14" height="19.773"/>
<g>
<rect x="70.454" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="70.454" y="72.894" fill="#00A94C" width="9.14" height="19.772"/>
<rect x="70.454" y="51.099" fill="#00A94C" width="9.14" height="19.685"/>
<rect x="81.439" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="81.439" y="72.894" fill="#00A94C" width="9.14" height="19.772"/>
<rect x="81.439" y="51.099" fill="#00A94C" width="9.14" height="19.598"/>
<rect x="81.439" y="7.334" fill="#00A94C" width="9.14" height="19.773"/>
</g>
<rect x="9.421" y="15.335" fill="#FFFFFF" width="23.069" height="3.771"/>
<rect x="15.133" y="37.217" fill="#FFFFFF" width="17.356" height="3.771"/>
<rect x="20.956" y="57.956" fill="#FFFFFF" width="11.534" height="3.772"/>
<rect x="9.421" y="79.839" fill="#FFFFFF" width="23.069" height="3.771"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

dist/img/queries-example.png
Vendored
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 54 KiB

src/img/logo.svg
+46 -3
View File
@@ -1,3 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" viewBox="0 0 100 100" width="100px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rect height="100" width="100" y="-5.44e-15" x="0"/><g fill="#008000"><rect height="22.5" width="10.4" y="1.4" x="38.4"/><rect height="22.5" width="10.4" y="26.3" x="38.4"/><rect height="22.4" width="10.4" y="76.1" x="38.4"/><rect height="22.3" width="10.4" y="51.2" x="38.4"/><rect height="22.5" width="10.4" y="1.4" x="50.9"/><rect height="22.5" width="10.4" y="76" x="50.9"/></g><rect height="22.3" width="10.4" y="51.2" x="50.9" fill="#ff0"/><rect height="22.5" width="10.4" y="1.4" x="63.3" fill="#f00"/><g fill="#008000"><rect height="22.5" width="10.4" y="26.3" x="63.3"/><rect height="22.5" width="10.4" y="26.3" x="50.8"/><rect height="22.5" width="10.4" y="76" x="63.3"/><rect height="22.3" width="10.4" y="51.2" x="63.3"/></g><rect height="22.5" width="10.4" y="1.4" x="75.7" fill="#f00"/><g fill="#008000"><rect height="22.5" width="10.4" y="26.3" x="75.7"/><rect height="22.5" width="10.4" y="76" x="75.7"/><rect height="22.4" width="10.4" y="51.2" x="75.7"/><rect height="22.5" width="10.4" y="26.3" x="88.2"/><rect height="22.5" width="10.4" y="76" x="88.2"/><rect height="22.3" width="10.4" y="51.2" x="88.2"/><rect height="22.5" width="10.4" y="1.4" x="88.2"/></g><g fill-rule="evenodd" fill="#999"><path d="m32.3 35.8h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m26.9 37.6h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m23.3 37.6h1.8v3.56h-1.8z"/><path d="m18 41.1h3.56v-5.33h-1.8v1.77h-1.77z"/><path d="m24.4 60h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m13.7 61.8h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m33.5 61.8h1.8v3.56h-1.8z"/><path d="m19.1 65.4h3.56v-5.33h-1.8v1.77h-1.77z"/><path d="m29.8 60h1.77v5.33h-1.77z"/><path d="m3.09 63.6h1.77v1.78h1.8v-5.33h-1.8v1.77h-1.77z"/><path d="m8.25 60h1.77v3.55h-1.77z"/><path d="m10 65.4h1.8v-1.78h-1.8v1.78z"/><path d="m32.3 86h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m26.2 87.8h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m22.3 87.8h1.8v3.56h-1.8z"/><path d="m12.6 86h1.77v5.33h-1.77z"/><path d="m16.7 89.6h1.77v1.78h1.8v-5.33h-1.8v1.77h-1.77z"/><path d="m7.65 86h1.77v3.55h-1.77z"/><path d="m9.42 91.4h1.8v-1.78h-1.8v1.78z"/><path d="m2.2 9.8h3.56v3.55h-1.8v-1.78h-1.77z"/><path d="m26.9 11.6h1.77v-1.77h1.8v5.33h-1.8v-1.78h-1.77z"/><path d="m22.6 11.6h1.8v3.56h-1.8z"/><path d="m12.8 15.1h3.56v-5.33h-1.8v1.77h-1.77z"/><path d="m18.3 9.8h1.77v5.33h-1.77z"/><path d="m7.26 13.3h1.77v1.78h1.8v-5.33h-1.8v1.77h-1.77z"/><path d="m32.3 9.8h1.77v3.55h-1.77z"/><path d="m34.1 15.1h1.8v-1.78h-1.8v1.78z"/></g></svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
id="Layer_1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49.9995" y1="0" x2="49.9995" y2="100.0005">
<stop offset="0" style="stop-color:#4748FF"/>
<stop offset="1" style="stop-color:#4F1A98"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M0,8.504C0,3.827,3.827,0,8.504,0h82.992C96.173,0,100,3.827,100,8.504v82.992
c0,4.677-3.827,8.504-8.504,8.504H8.504C3.827,100,0,96.173,0,91.496V8.504z"/>
</g>
<g>
<rect x="37.675" y="7.334" fill="#00A94C" width="9.139" height="19.773"/>
<rect x="37.675" y="29.216" fill="#00A94C" width="9.139" height="19.773"/>
<rect x="37.675" y="72.98" fill="#00A94C" width="9.139" height="19.686"/>
<rect x="37.675" y="51.099" fill="#00A94C" width="9.139" height="19.598"/>
<rect x="48.66" y="7.334" fill="#00A94C" width="9.139" height="19.773"/>
<rect x="48.66" y="72.894" fill="#00A94C" width="9.139" height="19.772"/>
</g>
<rect x="48.66" y="51.099" fill="#FFFF00" width="9.139" height="19.598"/>
<rect x="59.557" y="7.334" fill="#FF6A13" width="9.14" height="19.773"/>
<g>
<rect x="59.557" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="48.572" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="59.557" y="72.894" fill="#00A94C" width="9.14" height="19.772"/>
<rect x="59.557" y="51.099" fill="#00A94C" width="9.14" height="19.598"/>
</g>
<rect x="70.454" y="7.334" fill="#FF6A13" width="9.14" height="19.773"/>
<g>
<rect x="70.454" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="70.454" y="72.894" fill="#00A94C" width="9.14" height="19.772"/>
<rect x="70.454" y="51.099" fill="#00A94C" width="9.14" height="19.685"/>
<rect x="81.439" y="29.216" fill="#00A94C" width="9.14" height="19.773"/>
<rect x="81.439" y="72.894" fill="#00A94C" width="9.14" height="19.772"/>
<rect x="81.439" y="51.099" fill="#00A94C" width="9.14" height="19.598"/>
<rect x="81.439" y="7.334" fill="#00A94C" width="9.14" height="19.773"/>
</g>
<rect x="9.421" y="15.335" fill="#FFFFFF" width="23.069" height="3.771"/>
<rect x="15.133" y="37.217" fill="#FFFFFF" width="17.356" height="3.771"/>
<rect x="20.956" y="57.956" fill="#FFFFFF" width="11.534" height="3.772"/>
<rect x="9.421" y="79.839" fill="#FFFFFF" width="23.069" height="3.771"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB

src/img/queries-example.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 64 KiB