just some simple javascript widgets for customizable zabbix dashboards
The widgets provide a very simple way to easily integrate zabbix information on your own dashboard. It just uses javascript (jquery, d3, jqzabbix) and the zabbix api to create self-updating animated tables and graphs. Have a look at the demo.
- copy the files to your document root
- provide the zabbix api url and credentials in samples.html (https:///zabbix/api_jsonrpc.php)
- for zabbix < 2.4: provide the zabbix patch for cross site requests (https://support.zabbix.com/browse/ZBXNEXT-1377)
- for saving bandwidth don't forget to enable gzip compression for api calls (usually about 95%)
- for saving bandwidth a patch for the trends.get() api call is available (https://support.zabbix.com/browse/ZBXNEXT-1193)
- clone repository / download zip
- open
samples.htmlin the web browser of your choice.
the samples.html is pre-configured to access a demo Zabbix instance located on zabbix.org and shows a sample for each widget.
due to lack of ZBXNEXT-1193 the timeSeries widget makes no use of item trends.
itemGauge shows the last value of a Zabbix item and is refreshed according to the item's update interval. The widget is currently only a wrapper around Tomer Doron's google style gauges using d3.js.
timeSeries is a widget to diplay timeseries data from zabbix in a simple to use graph. Intuitive scrolling and panning is provided in realtime doing api calls in the background. When zooming out for several days a trends.get api call is used to receive data in lower detail.
triggerTable displays all alerting zabbix triggers in an animated table. Animations draw the user's attention to the dashboard when changes occur.
A simple function for flickerfree image reloads in dashboards. Provide the image's container id (not the id of the image itself) and the refresh interval in seconds. After each timeout the image url will be modified by appending '&refresh=' and then reloaded in the background. As soon as the image is loaded it will be replaced resulting in flickerfree image updates. This works with one image per element only.
timeSeries is a class with a high potential for more features. This has to be done very carefully: performance is a critical issue here, transition animations quickly drive the browser to its limits.