diff --git a/README.md b/README.md index d9c8953..165be80 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,85 @@ # Statusmap panel for Grafana - - ![Statusmap sample panel](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel.png) - ## Features * Group values into rows and buckets by query's legend * User defined color mapping * Multiple values in bucket display in tooltip * Interval shaping to better visual representation -* Represent null values as empty bucket or as zero +* Represent null values as empty bucket or as zero value -Supported / Tested Data Sources : --------------------------------- +### Supported environment -* Prometheus -* TestData +* Prometheus datasource +* Tested with Grafana 5.1.3 -Tested Grafana versions : -------------------------- -* 5.1.3 +## Motivation + +This plugin emerges from our needs to visually represent history of changes for a set of objects +with discrete statuses. +_Objects_ can be hosts, Kubernetes pods or coffee makers and _discrete statuses_ are a set +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: + +![Query setup](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/queries-example.png) + +Next define color mapping for status values in __Discrete__ color mode. + +![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/color-mapping.png) + + +__Spectrum__ and __Opacity__ color modes works as in a [Heatmap](https://grafana.com/plugins/heatmap) plugin. + + +### More options + +![Bucket options](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/options-bucket.png) + +__Multiple values__ check determine multiple values display mode. If check is unset then multiple values +for one bucket treated as error. If check is on then color for bucket determined +by value with least index in color mapping. + +![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/multiple-values-error.png) + +__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. +__Rounding__ is for round edges. + +![Min width, spacing, rounding](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/min-width-spacing-rounding.png) + ## Development +The easy way to test and develop plugin is to run Grafana instance in docker with following command in the directory containing the plugin. +This will expose the local plugin on your machine to the Grafana container. + ``` -docker run --rm -it -v $PWD:/var/lib/grafana/plugins/status-heatmap-panel \ +docker run --rm -it -v $PWD:/var/lib/grafana/plugins/flant-statusmap-panel \ -p 3000:3000 --name grafana.docker \ --env=GF_USERS_DEFAULT_THEME=light \ grafana/grafana:5.1.3 ``` +Now run `grunt` to compile dist directory and start changes watcher: + ``` grunt watch ``` -### Acknowledgements +## Acknowledgements -This panel plugin is based on "Heatmap" panel by Grafana with ideas from Carpet plot, Discrete panel, Status Panel, Status Dot, Status By Group. +Idea of a plugin comes from Dmitry Stolyarov @distol, initial version written by Sergey Gnuskov @gsmetal and final changes made by Ivan Mikheykin @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. #### Changelog diff --git a/dist/README.md b/dist/README.md index d9c8953..165be80 100644 --- a/dist/README.md +++ b/dist/README.md @@ -1,45 +1,85 @@ # Statusmap panel for Grafana - - ![Statusmap sample panel](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/flant-statusmap-panel.png) - ## Features * Group values into rows and buckets by query's legend * User defined color mapping * Multiple values in bucket display in tooltip * Interval shaping to better visual representation -* Represent null values as empty bucket or as zero +* Represent null values as empty bucket or as zero value -Supported / Tested Data Sources : --------------------------------- +### Supported environment -* Prometheus -* TestData +* Prometheus datasource +* Tested with Grafana 5.1.3 -Tested Grafana versions : -------------------------- -* 5.1.3 +## Motivation + +This plugin emerges from our needs to visually represent history of changes for a set of objects +with discrete statuses. +_Objects_ can be hosts, Kubernetes pods or coffee makers and _discrete statuses_ are a set +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: + +![Query setup](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/queries-example.png) + +Next define color mapping for status values in __Discrete__ color mode. + +![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/color-mapping.png) + + +__Spectrum__ and __Opacity__ color modes works as in a [Heatmap](https://grafana.com/plugins/heatmap) plugin. + + +### More options + +![Bucket options](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/options-bucket.png) + +__Multiple values__ check determine multiple values display mode. If check is unset then multiple values +for one bucket treated as error. If check is on then color for bucket determined +by value with least index in color mapping. + +![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/multiple-values-error.png) + +__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. +__Rounding__ is for round edges. + +![Min width, spacing, rounding](https://raw.githubusercontent.com/flant/grafana-statusmap/master/src/img/min-width-spacing-rounding.png) + ## Development +The easy way to test and develop plugin is to run Grafana instance in docker with following command in the directory containing the plugin. +This will expose the local plugin on your machine to the Grafana container. + ``` -docker run --rm -it -v $PWD:/var/lib/grafana/plugins/status-heatmap-panel \ +docker run --rm -it -v $PWD:/var/lib/grafana/plugins/flant-statusmap-panel \ -p 3000:3000 --name grafana.docker \ --env=GF_USERS_DEFAULT_THEME=light \ grafana/grafana:5.1.3 ``` +Now run `grunt` to compile dist directory and start changes watcher: + ``` grunt watch ``` -### Acknowledgements +## Acknowledgements -This panel plugin is based on "Heatmap" panel by Grafana with ideas from Carpet plot, Discrete panel, Status Panel, Status Dot, Status By Group. +Idea of a plugin comes from Dmitry Stolyarov @distol, initial version written by Sergey Gnuskov @gsmetal and final changes made by Ivan Mikheykin @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. #### Changelog diff --git a/dist/img/min-width-spacing-rounding.png b/dist/img/min-width-spacing-rounding.png new file mode 100644 index 0000000..5cb824c Binary files /dev/null and b/dist/img/min-width-spacing-rounding.png differ diff --git a/dist/img/multiple-values-error.png b/dist/img/multiple-values-error.png new file mode 100644 index 0000000..113773b Binary files /dev/null and b/dist/img/multiple-values-error.png differ diff --git a/dist/img/null-as-empty.png b/dist/img/null-as-empty.png new file mode 100644 index 0000000..1dd3454 Binary files /dev/null and b/dist/img/null-as-empty.png differ diff --git a/dist/img/options-bucket.png b/dist/img/options-bucket.png new file mode 100644 index 0000000..177b582 Binary files /dev/null and b/dist/img/options-bucket.png differ diff --git a/src/img/min-width-spacing-rounding.png b/src/img/min-width-spacing-rounding.png new file mode 100644 index 0000000..5cb824c Binary files /dev/null and b/src/img/min-width-spacing-rounding.png differ diff --git a/src/img/multiple-values-error.png b/src/img/multiple-values-error.png new file mode 100644 index 0000000..113773b Binary files /dev/null and b/src/img/multiple-values-error.png differ diff --git a/src/img/null-as-empty.png b/src/img/null-as-empty.png new file mode 100644 index 0000000..1dd3454 Binary files /dev/null and b/src/img/null-as-empty.png differ diff --git a/src/img/options-bucket.png b/src/img/options-bucket.png new file mode 100644 index 0000000..177b582 Binary files /dev/null and b/src/img/options-bucket.png differ