php-collection: Add support for named graph lists as favorites

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.

Signed-off-by: Florian Forster <octo@huhu.verplant.org>

diff --git a/contrib/php-collection/browser.js b/contrib/php-collection/browser.js
index 6f4d8ec..a343cba 100644 (file)
--- 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
index 1f788fc..1abf40d 100644 (file)
--- 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>