[collectd] [PATCH 6/6] php-collection: Add support for named graph lists as favorites
Bruno Prémont
bonbons at linux-vserver.org
Sun Mar 1 22:20:10 CET 2009
php-collection: Add support for named graph lists as favorites
php-collection allowed saving and loading a list of graphs from a
cookie.
This patch changes loading/saving to provide support for naming
of favorite graph lists.
When saving a name has to be provided (up to 30 alphanumerical
characters includeing underscore and hyphen.
For loading a named list can be selected from a dropdown list (this list
is refreshed when it gets focus) of available favorites.
diff --git a/contrib/php-collection/browser.js b/contrib/php-collection/browser.js
--- a/contrib/php-collection/browser.js
+++ b/contrib/php-collection/browser.js
@@ -496,17 +496,93 @@ function GraphMoveDown(graph) {
}
}
-function GraphListFromCookie() {
+function GraphListFromCookie(lname) {
if (document.cookie.length > 0) {
- cookies = document.cookie.split('; ');
+ var cname= 'graphLst'+lname+'=';
+ var cookies = document.cookie.split('; ');
for (i = 0; i < cookies.length; i++)
- if (cookies[i].substring(0, 9) == 'graphLst=')
- return cookies[i].substring(9).split('/');
+ if (cookies[i].substring(0, cname.length) == cname)
+ return cookies[i].substring(cname.length).split('/');
}
return new Array();
}
+function GraphListNameSort(a, b) {
+ if (a[0] > b[0])
+ return 1
+ else if (a[0] < b[0])
+ return -1;
+ else
+ return 0;
+}
+
+function GraphListRefresh() {
+ var select = document.getElementById('GraphList');
+ var childCnt = select.childNodes.length;
+ var oldValue = select.selectedIndex > 0 ? select.options[select.selectedIndex].value : '/';
+ while (childCnt > 0)
+ select.removeChild(select.childNodes[--childCnt]);
+
+ // Determine available names
+ var options = new Array();
+ if (document.cookie.length > 0) {
+ var cookies = document.cookie.split('; ');
+ for (i = 0; i < cookies.length; i++)
+ if (cookies[i].substring(0, 8) == 'graphLst') {
+ var p = cookies[i].indexOf('=');
+ if (p < 0)
+ continue;
+ options.push(new Array(cookies[i].substring(8, p), cookies[i].substring(p+1).split('/').length));
+ }
+ }
+ options.sort(GraphListNameSort);
+
+ var optCnt = options ? options.length : 0;
+ if (optCnt == 0) {
+ select.setAttribute('disabled', 'disabled');
+ return -1;
+ } else {
+ select.removeAttribute('disabled');
+ for (i = 0; i < optCnt; i++) {
+ newOption = document.createElement("option");
+ newOption.value = options[i][0];
+ if (newOption.value == oldValue)
+ newOption.setAttribute('selected', 'selected');
+ if (options[i][1] == 1)
+ newOption.appendChild(document.createTextNode(newOption.value+' (1 graph)'));
+ else
+ newOption.appendChild(document.createTextNode(newOption.value+' ('+options[i][1]+' graphs)'));
+ select.appendChild(newOption);
+ }
+ return select.selectedIndex;
+ }
+}
+
+function GraphListCheckName(doalert) {
+ var lname = document.getElementById('GraphListName');
+ if (lname) {
+ if (lname.value.match(/^[a-zA-Z0-9_-]+$/)) {
+ lname.style.backgroundColor = '';
+ return lname.value;
+ } else {
+ lname.style.backgroundColor = '#ffdddd';
+ if (doalert && lname.value.length == 0)
+ alert('Graph list name is empty.\n\n'+
+ 'Please fill in a name and try again.');
+ else if (doalert)
+ alert('Graph list name contains non-permitted character.\n\n'+
+ 'Only anlphanumerical characters (a-z, A-Z, 0-9), hyphen (-) and underscore (_) are permitted.\n'+
+ 'Please correct and try again.');
+ lname.focus();
+ }
+ }
+ return '';
+}
+
function GraphSave() {
+ var lstName = GraphListCheckName(true);
+ if (lstName.length == 0)
+ return;
if (graphList.length > 0) {
// Save graph list to cookie
var str = '';
@@ -517,20 +593,37 @@ function GraphSave() {
str += graphList[i].substring(g+1);
}
- document.cookie = 'graphLst='+str;
- if (GraphListFromCookie().length == 0)
- alert("Failed to save graph list to cookie.");
+ document.cookie = 'graphLst'+lstName+'='+str;
+ if (GraphListFromCookie(lstName).length == 0)
+ alert("Failed to save graph list '"+lstName+"' to cookie.");
else
alert("Successfully saved current graph list.");
} else {
- document.cookie = 'graphLst=; expires='+new Date().toGMTString();
+ document.cookie = 'graphLst'+lstName+'=; expires='+new Date().toGMTString();
alert("Cleared saved graph list.");
}
+ GraphListRefresh();
+}
+
+function GraphDrop() {
+ var cname = document.getElementById('GraphList');
+ if (cname && cname.selectedIndex >= 0) {
+ cname = cname.options[cname.selectedIndex].value;
+ document.cookie = 'graphLst'+cname+'=; expires='+new Date().toGMTString();
+ GraphListRefresh();
+ } else
+ return;
}
function GraphLoad() {
+ var cname = document.getElementById('GraphList');
+ if (cname && cname.selectedIndex >= 0)
+ cname = cname.options[cname.selectedIndex].value;
+ else
+ return;
// Load graph list from cookie
- var grLst = GraphListFromCookie();
+ var grLst = GraphListFromCookie(cname);
+ var oldLength = graphList.length;
for (i = 0; i < grLst.length; i++) {
var host = '';
var plugin = '';
@@ -571,8 +664,8 @@ function GraphLoad() {
GraphDoAppend(host, plugin, pinst, type, tinst, timespan, tinyLegend, logarithmic);
}
if (grLst.length == 0)
- alert("No list found for loading.");
- else if (grLst.length != graphList.length)
+ alert("No list '"+cname+"' found for loading.");
+ else if (grLst.length + oldLength != graphList.length)
alert("Could not load all graphs, probably damaged cookie.");
}
diff --git a/contrib/php-collection/index.php b/contrib/php-collection/index.php
--- a/contrib/php-collection/index.php
+++ b/contrib/php-collection/index.php
@@ -90,7 +90,7 @@ var graph_url = '<?php echo addslashes($url_base.'graph.php'); ?>';
<script type="text/javascript" src="<?php echo htmlspecialchars($url_base.'browser.js'); ?>"></script>
</head>
- <body onload="ListRefreshHost()"><div class="body">
+ <body onload="ListRefreshHost(); GraphListRefresh(); "><div class="body">
<h1><img src="collectd-logo.png" align="bottom" alt="" /> Collectd browser for system statistics graphs</h1>
<div class="selector"><a href="javascript:toggleDiv('selector')"><span id="selector_sw">Hide</span> graph selection tool</a><div id="selector" class="selectorbox">
<table>
@@ -137,9 +137,18 @@ var graph_url = '<?php echo addslashes($url_base.'graph.php'); ?>';
<tr>
<td class="sc" colspan="3"><input id="btnAdd" name="btnAdd" type="button" disabled="disabled" onclick="GraphAppend()" value="Add graph" />
<input id="btnClear" name="btnClear" type="button" disabled="disabled" onclick="GraphDropAll()" value="Remove all graphs" />
- <input id="btnRefresh" name="btnRefresh" type="button" disabled="disabled" onclick="GraphRefresh(null)" value="Refresh all graphs" />
- <input id="btnSave" name="btnSave" type="button" onclick="GraphSave()" value="Save" title="Save graph list to cookie" />
- <input id="btnLoad" name="btnLoad" type="button" onclick="GraphLoad()" value="Load" title="Load graph list from cookie" /></td>
+ <input id="btnRefresh" name="btnRefresh" type="button" disabled="disabled" onclick="GraphRefresh(null)" value="Refresh all graphs" /></td>
+ </tr>
+ <tr>
+ <td class="s1" rowspan="2">Graph list favorites:</td>
+ <td class="s3"><input type="text" style="width: 100%" maxlength="30" id="GraphListName" name="GraphListName" value="default" onchange="GraphListCheckName(false)" /></td>
+ <td class="s3"><a href="javascript:GraphSave()"><img src="save.png" width="16" height="16" alt="S" title="Save graph list to cookie" /></a></td>
+ </tr>
+ <tr>
+ <td class="s2"><select id="GraphList" name="GraphList" onfocus="GraphListRefresh()">
+ <option value="default">default</option>
+ </select></td>
+ <td class="s3"><a href="javascript:GraphLoad()"><img src="load.png" width="16" height="16" alt="L" title="Load graph list from cookie" /></a><a href="javascript:GraphDrop()"><img src="delete.png" width="16" height="16" alt="D" title="Delete graph list from cookie" /></a></td>
</tr>
</table>
</div></div>
More information about the collectd
mailing list