From: Bruno Prémont Date: Tue, 10 Feb 2009 20:35:44 +0000 (+0100) Subject: contrib/php-collection: Add a PHP frontend for graph generation. X-Git-Tag: collectd-4.6.0~19^2^2~1 X-Git-Url: https://git.tokkee.org/?a=commitdiff_plain;h=a019b6c8144745db63c599680bd693ac02f11666;p=collectd.git contrib/php-collection: Add a PHP frontend for graph generation. Hi, Attached is a patch with a set of PHP files for a complete graphing environment for collectd-generated RRDs. Before generating a graph with rrdtool it can tell collectd to flush the RRDs that are about to be used. The interface is built with dynamic HTML. It provides following options: - host selection -> plugin selection --> plugin instance selection ---> type selection ----> type instance selection (or meta graph) - linear / logarithmic Y-scale - verbose / minimal legend - [Add Graph] [Remove all Graphs] [Refresh Graphs] For each displayed graph: - Move above previous graph - Refresh graph - Remove graph - Move below following graph I tested on following browsers: - Firefox-3.0 - Safari-3.2 (Win32) - Konqueror (KDE-4.1.3) - Webkit (webkit-gtk-0_p40220) - Internet Explorer (6, 7, 8rc - CSS layout issues with <8) Dependencies: - PHP-5 (might run with PHP-4) > GD suport for error images > Ability to execute rrdtool binary > Unix socket for FLUSH support - RRDTool (rrdtool graph, rrdtool info) TODO: complete/improve graph definitions in definitions.php though there is code to generate basic graph for any RRD of unknown type, so definitions are rather a matter of color, DS combination and stacking. Bruno File listing with short description: - config.php (configuration) - functions.php (common functions) - definitions.php (graph definitions for most? types from types.db - based on collection.cgi) - definitions.local.php (place for site-local graph definitions, e.g. for unixsock, tail, snmp generated RRDs) - index.php (main page) - graph.php (page returning the graph's PNG image) - browser.js (whole bunch of Javascript logic to show/hide/update graphs) Not included are a few images: - collectd-logo.png (16x16, e.g. use collectd.org's favicon) - favicon.png (e.g. use the one in share/collection*) - refresh.png - move-up.png - move-down.png - delete.png (16x16 take matching ones from your system's action-icons) --- diff --git a/contrib/php-collection/browser.js b/contrib/php-collection/browser.js new file mode 100644 index 00000000..9fcdbabe --- /dev/null +++ b/contrib/php-collection/browser.js @@ -0,0 +1,458 @@ +/* + * Copyright (C) 2009 Bruno Prémont + * + * This program is free software; you can redistribute it and/or modify it under + * the terms of the GNU General Public License as published by the Free Software + * Foundation; only version 2 of the License is applicable. + * + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS + * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more + * details. + * + * You should have received a copy of the GNU General Public License along with + * this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +// Toggle visibility of a div +function toggleDiv(divID) { + var div = document.getElementById(divID); + var label = document.getElementById(divID+'_sw'); + var label_txt = null; + if (div) { + if (div.style.display == 'none') { + div.style.display = 'block'; + label_txt = 'Hide'; + } else { + div.style.display = 'none'; + label_txt = 'Show'; + } + } + if (label_txt && label) { + var childCnt = label.childNodes.length; + while (childCnt > 0) + label.removeChild(label.childNodes[--childCnt]); + label.appendChild(document.createTextNode(label_txt)); + } +} + +// DHTML helper code to asynchronous loading of content +function loadXMLDoc(url, query) { + if (window.XMLHttpRequest) { + req = new XMLHttpRequest(); + req.onreadystatechange = processReqChange; + req.open('POST', url, true); + req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); + req.send(query); + } else if (window.ActiveXObject) { + req = new ActiveXObject("Microsoft.XMLHTTP"); + if (req) { + req.onreadystatechange = processReqChange; + req.open('POST', url, true); + req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); + req.send(query); + } + } +} + +// DHTML new-content dispatcher +function processReqChange() { + if (req.readyState == 4) { + if (req.status == 200) { + response = req.responseXML.documentElement; + method = response.getElementsByTagName('method')[0].firstChild.data; + result = response.getElementsByTagName('result')[0]; + eval(method + '(result)'); + } + } +} + +// Update contents of a + + R + + + Plugin: + + R + + + Plugin instance: + + R + + + Type: + + R + + + Type instance: + + R + + + Graph settings: + +
+
+ + + + + + + + + +
+
Please use above graph selection tool to add graphs to this area.
+
+ +