{"id":13574517,"url":"https://github.com/flant/grafana-statusmap","last_synced_at":"2025-10-01T20:31:49.627Z","repository":{"id":33036219,"uuid":"149080596","full_name":"flant/grafana-statusmap","owner":"flant","description":"Grafana panel plugin to visualize status of multiple objects over time","archived":true,"fork":false,"pushed_at":"2024-06-18T17:26:18.000Z","size":2893,"stargazers_count":831,"open_issues_count":59,"forks_count":43,"subscribers_count":22,"default_branch":"master","last_synced_at":"2024-11-15T21:48:33.024Z","etag":null,"topics":["grafana","grafana-panel","grafana-plugin"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flant.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-17T06:43:49.000Z","updated_at":"2024-09-19T09:35:20.000Z","dependencies_parsed_at":"2024-01-14T10:17:30.839Z","dependency_job_id":"7294bd35-1dd0-4299-9e99-5103cefb203b","html_url":"https://github.com/flant/grafana-statusmap","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flant%2Fgrafana-statusmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flant%2Fgrafana-statusmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flant%2Fgrafana-statusmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flant%2Fgrafana-statusmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flant","download_url":"https://codeload.github.com/flant/grafana-statusmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234897368,"owners_count":18903646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grafana","grafana-panel","grafana-plugin"],"created_at":"2024-08-01T15:00:52.287Z","updated_at":"2025-10-01T20:31:44.284Z","avatar_url":"https://github.com/flant.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## :warning: **flant-statusmap plugin is not maintained since 2024**\n\nThis repository has been archived in favor of built-in plugins available in Grafana 9+ versions: [status-history](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/status-history/) and  [state-timeline](https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/state-timeline/). These plugins are used by the community as replacements for flant-statusmap, see [issue #302](https://github.com/flant/grafana-statusmap/issues/302#issuecomment-2133323098) for more info.\nIf you think this plugin suites your needs and would like to continue developing it, feel free to make a fork. We would love to see you take it further!\n\n# Statusmap panel for Grafana\n\n[![Download from GitHub](https://img.shields.io/github/tag-date/flant/grafana-statusmap.svg?logo=github\u0026label=latest)](https://github.com/flant/grafana-statusmap/releases/latest)\n[![GH Discussions](https://img.shields.io/badge/GitHub-discussions-brightgreen)](https://github.com/flant/grafana-statusmap/discussions)\n[![Telegram chat RU](https://img.shields.io/badge/@statusmap_ru-RU-informational.svg?logo=telegram)](https://t.me/statusmap_ru)\n[![Follow Flant on Twitter](https://img.shields.io/twitter/follow/flant_com?label=Follow%20Flant\u0026style=social)](https://twitter.com/flant_com)\n\nPanel to show discrete statuses of multiple targets over time.\n\n![Statusmap sample panel](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/flant-statusmap-panel.png)\n\n![Statusmap sample panel with dark theme](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/flant-statusmap-panel-dark.png)\n\n\u003e Run `docker compose up` and open http://localhost:3000 in browser to see a simple demo.\n\n\n## Features\n\n* Grouping values into rows and buckets using legend from query\n* User defined color mapping\n* Multiple values in bucket are displayed via tooltip\n* Configurable tooltip items\n* Pagination for rows\n* Increasing rows/buckets' interval for better visual representation\n* Representing null values as empty bucket or zero value\n\n### Supported environment\n\n* Tested with:\n  - Prometheus\n  - InfluxDB\n  - Mysql\n  - Grafana 7.x, 8.x\n* Support for earlier Grafana versions:\n  - 0.5.x versions should work in Grafana 6.5.x - 6.7.x with timeseries data format\n  - (0.4.2)[https://github.com/flant/grafana-statusmap/releases/tag/v0.4.2] should work in Grafana 5.4.x - 6.4.x\n\n## Motivation\n\nWe had a desperate need to visualize a set of timeseries statuses over time period, so we can\nsee a history of changes for objects' status. Since we maintain a lot of Kubernetes clusters\n(and related infrastructure), our main cases for that are visualization of servers \u0026 Kubernetes\npods health states as well as HTTP services health checks. We've tried a variety of Grafana\nplugins available (they are listed in *Acknowledgements* below) but none of them could provide\nthe features and visualization really close to what we've been looking for.\n\n_NB: You can find more details about our journey of creating the plugin in\n[this post](https://medium.com/flant-com/statusmap-grafana-plugin-to-visualize-status-over-time-fe6ced391853)._\n\n_Objects_ being visualized with this plugin may be different: not only IT components (e.g. server\nhosts and Kubernetes pods) but just anything you can imagine like coffee makers on the picture\nabove. These objects should have _discrete statuses_ which are sets of predefined values, e.g.\n`ok` = 0, `off` = 1, `fail` = 2, etc.\n\n## Configuration\n\n### Datasource notes\n\nTo create neat graphs your datasource should return good data. Plugin adjust `$__interval` variable depending on\nbucket width in panel options. Your queries should aggregate statuses over `$__interval`.\n\nTo make multiple values mode works as expected you should define multiple queries: one query for each possible status.\n\nPlugin doesn't aggregate data in time for now, it only renders input data as buckets. Because of this\ndata should contain points for each timestamp in time range and equal timestamps for every possible\ntarget (y-axis label). This limitation is addressed by [issue #53](https://github.com/flant/grafana-statusmap/issues/53).\n\n#### Prometheus\n\nTo work with data from Prometheus you will need to setup discrete statuses for your objects.\nRequirements to store these statuses in metrics are as follows:\n* metrics should have two values: `0` and `1`;\n* there should be a label with status' value.\n\nWhen it's done, you can collect all the data via query, e.g.:\n\n```\n(max_over_time(coffee_maker_status{status=\"\u003cSTATUS_VALUE\u003e\"}[$__interval]) == 1) * \u003cSTATUS_VALUE\u003e\n```\n\nIf there was no such status (`\u003cSTATUS_VALUE\u003e`) during query's interval, Prometheus would\nreturn nothing. Otherwise, status' value will be returned.\n\nFor example, if you have 5 types of statuses and a metric (`coffee_maker_status`) with 5\nallowed values (`0`, `1`, `2`, `3`, `4`), you should transform this metric using following rule:\n\n```\n- record: coffee_maker_status:discrete\n  expr: |\n    count_values(\"status\", coffee_maker_status)\n```\n\nThat's how `coffee_maker_status` metric with value `3` will be transformed into new metric:\n\n```\ncoffee_maker_status:discrete{status=\"3\"} 1\n```\n\nNow, when Prometheus has `0` and `1` values for each status, all these metrics can be\naggregated, so you will get all available statuses of your objects over time.\n\n#### InfluxDB\n\nChoose 'Time series' for 'Format as' and use `GROUP BY ($__interval)` in query. `$tag_\u003ctag name\u003e` can be used in 'Alias by' to define y-axis labels.\n\n#### Mysql\n\nExample query with aggregation over `$__interval` is like this (you need one query for each possible status value):\n\n```\nSELECT\n  $__timeGroupAlias(date_insert,$__interval),\n  name AS metric,\n  min(statusi) AS \"statusi\"\nFROM coffee_makers\nWHERE\n  $__timeFilter(date_insert) AND statusi=1\nGROUP BY 1,2\nORDER BY $__timeGroup(date_insert,$__interval)\n```\n\n`metric` column is used as y-axis label.\n\n### Panel\n\nFirst of all, an individual query for each possible status' value should be created.\nEach query should also have similar legend for grouping:\n\n![Query setup](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/queries-example.png)\n\nThen, color mapping for status' values should be defined in __Discrete__ color mode:\n\n![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/color-mapping.png)\n\nUse can use presets to define a trafic light colors or 8 colors from [solarized](https://ethanschoonover.com/solarized/) palette:\n\n![Color mapping empty](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/color-preset-01.png)\n\n![Color mapping trafic lights](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/color-preset-02.png)\n\n\n_Note: __Spectrum__ and __Opacity__ color modes function the same way they do in [Heatmap](https://grafana.com/plugins/heatmap) plugin._\n\n\n### More options\n\n#### Bucket\n\n![Bucket options](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/options-bucket.png)\n\n__Multiple values__ checkbox specifies how they should be displayed:\n* If it's off, multiple values for one bucket are treated as error;\n* If it's on, color for such bucket would be determined by the value having least index in color mapping.\n\n![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/multiple-values-error.png)\n\n__Display nulls__ can be treated as empty buckets or displayed with the color of `0` value.\n\n![Color mapping](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/null-as-empty.png)\n\n__Min width__ and __spacing__ are used to specify minimal bucket width and spacing between buckets.\n__Rounding__ may be used to round edges.\n\n![Min width, spacing, rounding 1](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/min-width-spacing-rounding-01.png)\n\n![Min width, spacing, rounding 2](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/min-width-spacing-rounding-02.png)\n\n__Values index__ set to positive number to display only values from specified timeseries.\n\n#### Display\n\n![Display options](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/options-display.png)\n\n__Show legend__ checkbox toggles legend at the bottom of the panel.\n\n__Rows sort__ can be used to sort labels on Y axis. Metrics — sort y labels as they are defined on Metrics tab. a→z and z→a sort labels descending or ascending in a [natural](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) order.\n\n#### Pagination\n\n![Pagination controls](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/pagination-graph.png)\n\n__Enable pagination__ toggles pagination controls on graph.\n\n__Rows per page__ a number of rows to display on graph.\n\n#### Tooltip\n\n![Tooltip in frozen state](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/tooltip-frozen.png)\n\n__Show tooltip__ toggles tooltip display on mouse over buckets.\n\n__Freeze on click__ toggles tooltip \"freezing\" on click. Frozen tooltip can be used to compare data with floating tooltip or to follow URLs.\n\n__Show items__ toggles display of additional items in tooltip.\n\n__Items__ is a list of definitions to display URLs in tooltip.\n\nEach URL has a template, icon, label and formating options: lowercase and date format for variables.\n\n![Tooltip items editor](https://raw.githubusercontent.com/flant/grafana-statusmap/master/docs/img/tooltip-editor.png)\n\n#### Percentual bucket spans\nIn some cases scenarios, the status panel is used to go from one dashboard to a more specific one, e.g. when performing root/cause analysis. In such cases, the user may want to reduce the scope of the time span, while keeping the desired event centered (to be able to analyse the previous/posterior buckets of time). Those values are introduced through `__bucket_from` and `__bucket_to`. \n\n `__bucket_from`: It's the value of `bucket.from` minus the percentual bucket.\n `__bucket_to`: It's the value of `bucket.to` plus the percentual bucket.\n\n## Learn more\n\n* [Changelog](https://github.com/flant/grafana-statusmap/blob/master/CHANGELOG.md)\n* Use [GitHub Discussions](https://github.com/flant/grafana-statusmap/discussions) to ask for help.\n* [Installation](https://grafana.com/grafana/plugins/flant-statusmap-panel/?tab=installation)\n* Setup [development](https://github.com/flant/grafana-statusmap/blob/master/DEVELOPMENT.md) environment to help us improve the plugin.\n\n## Acknowledgements\n\nThe first public release of this plugin has been fully made by [Flant](https://flant.com/) engineers. The whole idea has come from Dmitry Stolyarov ([@distol](https://github.com/distol)), initial version has been written by Sergey Gnuskov ([@gsmetal](https://github.com/gsmetal)) and final changes has been made by Ivan Mikheykin ([@diafour](https://github.com/diafour)).\n\nThis plugin is based on \"Heatmap\" panel by Grafana and partly inspired by ideas from Carpet plot, Discrete panel, Status Panel, Status Dot, Status By Group.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflant%2Fgrafana-statusmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflant%2Fgrafana-statusmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflant%2Fgrafana-statusmap/lists"}