diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/frame.html | 42 | ||||
| -rw-r--r-- | html/index.html | 7 | ||||
| -rw-r--r-- | html/rrdui.js | 215 | ||||
| -rw-r--r-- | html/style.css | 10 |
4 files changed, 153 insertions, 121 deletions
diff --git a/html/frame.html b/html/frame.html new file mode 100644 index 0000000..a5e9735 --- /dev/null +++ b/html/frame.html @@ -0,0 +1,42 @@ +<html> + <head> + <link href="style.css" type="text/css" rel="stylesheet"/> + </head> + <body class="in-frame" onload="window.parent._frameLoaded = true;"> + + <div id="graphs" align="center"></div> + <div id="zoom"></div> + + <!-- The action buttons --> + <div id="actions"> + <img id="action-prev" class="action" src="action-prev.gif" + alt="Move Backwards" title="Move Backwards"/><br/> + <img id="action-next" class="action" src="action-next.gif" + alt="Move Forwards" title="Move Forwards"/><br/> + <img id="action-zoom" class="action" src="action-zoom.gif" + alt="Zoom Out" title="Zoom Out"/><br/> + <img id="action-goto" class="action" src="action-date.gif" + alt="Select a Time Span" title="Select a Time Span"/><br/> + </div> + + <!-- Date selection drop down --> + <div id="goto"> + <select id="goto-select" size="6"> + <option value="1800:0">Last 30 Minutes</option> + <option value="3600:0">Last Hour</option> + <option value="10800:0">Last 3 Hours</option> + <option value="21600:0">Last 6 Hours</option> + <option value="86400:0">Last Day</option> + <option value="259200:0">Last 3 Days</option> + <option value="604800:0">Last Week</option> + <option value="1209600:0">Last 2 Weeks</option> + <option value="1209600:0">Last 2 Weeks</option> + <option value="2678400:0">Last Month</option> + <option value="5356800:2678400">Month Before Last</option> + <option value="7948800:0">Last 3 Months</option> + <option value="15897600:0">Last 6 Months</option> + <option value="31536000:0">Last Year</option> + </select> + </div> + </body> +</html> diff --git a/html/index.html b/html/index.html index 43c79ed..102ad09 100644 --- a/html/index.html +++ b/html/index.html @@ -2,7 +2,7 @@ <head> <script language="javascript"> // Settings - endpoint = "http://shondo/rrduiback/"; + var ENDPOINT = "/rrduiback/"; </script> <title>Statistics Monitoring</title> <link href="style.css" type="text/css" rel="stylesheet"/> @@ -16,9 +16,10 @@ </td></tr> <tr id="main-row"><td colspan="2" id="main-cell"> - <iframe id="main-frame"></iframe> + <iframe id="main-frame" src="frame.html" + border="0" frameborder="0"></iframe> </td></tr> </table> - <script language="javascript" src="rrdui.js"/> + <script language="javascript" src="rrdui.js"></script> </body> </html> diff --git a/html/rrdui.js b/html/rrdui.js index 12bce92..e61f545 100644 --- a/html/rrdui.js +++ b/html/rrdui.js @@ -10,10 +10,23 @@ var categoryCurrent = null; var categoryArea = document.getElementById("headers"); var xmlData = null; -var graphDoc = null; +var gdoc = null; +var gwindow = null; -loadXml(endpoint, loadedGraphData); -setupFrame(); +function init() +{ + /* Set by frame.html */ + if(!window._frameLoaded) + { + window.setTimeout("init();", 100); + return; + } + + setupFrame(); + loadXml(makeEndpointURI(), loadedGraphData); +} + +init(); function loadedGraphData(doc) { @@ -37,66 +50,14 @@ function loadedGraphData(doc) function setupFrame() { var frame = document.getElementById("main-frame"); - graphDoc = frame.contentDocument; - - /* Get the stylesheet info for frame */ - var i, links = document.getElementsByTagName("link"); - var csslink = null; - for(i = 0; i < links.length; i++) - { - if(links.item(i).getAttribute("rel") == "stylesheet") - csslink = links.item(i); - } - - graphDoc.open(); - graphDoc.write("<html><head>\n"); - /* TODO: We probably need to write a <base> tag for relative URIs */ - if(csslink) - graphDoc.write("<link href=\"" + csslink.getAttribute("href") + - "\" type=\"text/css\" rel=\"stylesheet\"/>\n"); - graphDoc.write("</head><body class=\"in-frame\">\n"); - - /* The graph area */ - graphDoc.write("<div id=\"graphs\" align=\"center\"></div>\n"); - - /* Zoom overlay */ - graphDoc.write("<div id=\"zoom\"></div>\n"); - - /* The action buttons */ - graphDoc.write("<div id=\"actions\">\n"); - graphDoc.write("<img id=\"action-prev\" class=\"action\" src=\"action-prev.gif\"/><br/>"); - graphDoc.write("<img id=\"action-next\" class=\"action\" src=\"action-next.gif\"/><br/>"); - graphDoc.write("<img id=\"action-zoom\" class=\"action\" src=\"action-zoom.gif\"/><br/>"); - graphDoc.write("<img id=\"action-goto\" class=\"action\" src=\"action-date.gif\"/><br/>"); - graphDoc.write("</div>"); - - /* Date selection drop down */ - graphDoc.write("<div id=\"goto\">\n"); - graphDoc.write("<select id=\"goto-select\" size=\"6\">"); - graphDoc.write("<option value=\"1800:0\">Last 30 Minutes</option>"); - graphDoc.write("<option value=\"3600:0\">Last Hour</option>"); - graphDoc.write("<option value=\"10800:0\">Last 3 Hours</option>"); - graphDoc.write("<option value=\"21600:0\">Last 6 Hours</option>"); - graphDoc.write("<option value=\"86400:0\">Last Day</option>"); - graphDoc.write("<option value=\"259200:0\">Last 3 Days</option>"); - graphDoc.write("<option value=\"604800:0\">Last Week</option>"); - graphDoc.write("<option value=\"1209600:0\">Last 2 Weeks</option>"); - graphDoc.write("<option value=\"1209600:0\">Last 2 Weeks</option>"); - graphDoc.write("<option value=\"2678400:0\">Last Month</option>"); - graphDoc.write("<option value=\"5356800:2678400\">Month Before Last</option>"); - graphDoc.write("<option value=\"7948800:0\">Last 3 Months</option>"); - graphDoc.write("<option value=\"15897600:0\">Last 6 Months</option>"); - graphDoc.write("<option value=\"31536000:0\">Last Year</option>"); - graphDoc.write("</select>"); - - /* And wrap it up */ - graphDoc.write("</body></html>"); - graphDoc.close(); + /* COMPAT: IE and Mozilla access the content of frames differently */ + gdoc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document; + gwindow = frame.contentWindow ? frame.contentWindow : frame.contentDocument.window; } function displayCurrentPage() { - var area = graphDoc.getElementById("graphs"); + var area = gdoc.getElementById("graphs"); /* Hide all images not from this category */ var i, images = area.getElementsByTagName("img"); @@ -122,8 +83,7 @@ function displayCurrentPage() for(i = 0; i < children.length; i++) { var child = children.item(i); - if(child.nodeType != Node.ELEMENT_NODE || - child.localName != "graph") + if(child.nodeType != 1 || child.nodeName != "graph") continue; var name = child.getAttribute("name"); @@ -132,13 +92,14 @@ function displayCurrentPage() /* Make sure we don't already have this graph */ var id = "graph-" + categoryCurrent + "-" + name; - var img = graphDoc.getElementById(id); + var img = gdoc.getElementById(id); if(img != null) continue; - img = document.createElement("img"); + img = gdoc.createElement("img"); - if(child.hasAttribute("title")) + var title = child.getAttribute("title"); + if(title && title.length) { img.setAttribute("title", child.getAttribute("title")); img.setAttribute("alt", child.getAttribute("title")); @@ -146,8 +107,8 @@ function displayCurrentPage() else img.setAttribute("alt", "Graph"); - img.setAttribute("class", "graph"); - img.setAttribute("id", id); + img.className = "graph"; + img.id = id; area.appendChild(img); @@ -159,9 +120,9 @@ function displayCurrentPage() reloadGraph(img); img.onmousedown = function(evt) - { return zoomGraphStart(window.event ? window.event : evt); } + { return zoomGraphStart(gwindow.event ? gwindow.event : evt); } img.onmouseover = function(evt) - { return actionsDisplay(window.event ? window.event : evt); } + { return actionsDisplay(gwindow.event ? gwindow.event : evt); } } } @@ -174,7 +135,7 @@ function reloadGraph(img) var GRAPH_WIDTH = 450; var GRAPH_HEIGHT = 120 - var uri = endpoint + "/graph?category=" + img._category + "&name=" + img._name; + var uri = makeEndpointURI() + "/graph?category=" + img._category + "&name=" + img._name; /* Add date options */ uri += "&start=" + img._tbeg + "&end=" + img._tend; @@ -191,18 +152,23 @@ function reloadGraph(img) function zoomGraphStart(evt) { - if(evt.button != 0) + /* COMPAT: In IE the left button is 1, Mozilla is 0 */ + var lbutton = gwindow.event ? 1 : 0; + + if(evt.button != lbutton) return; - if(evt.target.getAttribute("class") != "graph") + /* COMPAT: Target is handled differently in Internet nastiness */ + var img = evt.target || evt.srcElement; + + if(img.className != "graph") return; - var img = evt.target; - var zoom = graphDoc.getElementById("zoom"); + var zoom = gdoc.getElementById("zoom"); zoom._img = img; zoom._zooming = true; - zoom._from = evt.clientX + graphDoc.body.scrollLeft; + zoom._from = evt.clientX + gdoc.body.scrollLeft; zoom._start = zoom._from - img.offsetLeft; zoom._end = zoom._start; @@ -214,24 +180,23 @@ function zoomGraphStart(evt) zoom.style.display = "block"; zoom.onmousemove = zoom._img.onmousemove = function(evt) - { return zoomGraphUpdate(window.event ? window.event : evt); } + { return zoomGraphUpdate(gwindow.event ? gwindow.event : evt); } zoom.onmouseup = zoom._img.onmouseup = function(evt) - { return zoomGraphDone(window.event ? window.event : evt); } - document.onmouseup = graphDoc.onmouseup = function(evt) - { return zoomGraphDone(window.event ? window.event : evt); } + { return zoomGraphDone(gwindow.event ? gwindow.event : evt); } + document.onmouseup = gdoc.onmouseup = function(evt) + { return zoomGraphDone(gwindow.event ? gwindow.event : evt); } - evt.preventDefault(); - evt.stopPropagation(); + cancelEvent(evt); return false; } function zoomGraphUpdate(evt) { - var zoom = graphDoc.getElementById("zoom"); + var zoom = gdoc.getElementById("zoom"); if(!zoom._zooming || !zoom._img) return; - var to = evt.clientX + graphDoc.body.scrollLeft; + var to = evt.clientX + gdoc.body.scrollLeft; var width = to - zoom._from; zoom._end = to - zoom._img.offsetLeft; @@ -253,18 +218,19 @@ function zoomGraphUpdate(evt) zoom.style.top = zoom._img.offsetTop; zoom.style.display = "block"; - evt.preventDefault(); - evt.stopPropagation(); + cancelEvent(evt); return false; } function zoomGraphDone(evt) { - var zoom = graphDoc.getElementById("zoom"); + var zoom = gdoc.getElementById("zoom"); if(!zoom._zooming) return; - if(evt.target == zoom || evt.target == zoom._img) + /* COMPAT: Target is handled differently in Internet nastiness */ + var targ = evt.target || evt.srcElement; + if(targ == zoom || targ == zoom._img) zoomGraphSelect(zoom); zoomGraphCancel(evt); @@ -313,7 +279,7 @@ function zoomGraphSelect(zoom) function zoomGraphCancel(evt) { - var zoom = graphDoc.getElementById("zoom"); + var zoom = gdoc.getElementById("zoom"); if(zoom._zooming) { if(zoom._img) @@ -359,12 +325,13 @@ function zoomGraphMove(img, dir) function actionsDisplay(evt) { - if(evt.target.getAttribute("class") != "graph") - return; + /* COMPAT: Target is handled differently in Internet nastiness */ + var img = evt.target || evt.srcElement; - var img = evt.target; + if(img.className != "graph") + return; - var actions = graphDoc.getElementById("actions"); + var actions = gdoc.getElementById("actions"); actions._img = img; actions._display = true; @@ -373,25 +340,25 @@ function actionsDisplay(evt) actions.style.display = "block"; actions.onmouseout = img.onmouseout = function(evt) - { return actionsHide(window.event ? window.event : evt); } + { return actionsHide(gwindow.event ? gwindow.event : evt); } /* TODO: We only actually have to do this once */ var i, acts = actions.getElementsByTagName("img"); for(i = 0; i < acts.length; i++) { acts.item(i).onclick = function(evt) - { return actionRun(window.event ? window.event : evt); } + { return actionRun(gwindow.event ? gwindow.event : evt); } } } function actionsHide(evt) { - var actions = graphDoc.getElementById("actions"); + var actions = gdoc.getElementById("actions"); if(!actions._display) return; - var x = evt.clientX - graphDoc.body.scrollLeft; - var y = evt.clientY - graphDoc.body.scrollTop; + var x = evt.clientX + gdoc.body.scrollLeft; + var y = evt.clientY + gdoc.body.scrollTop; var img = actions._img; /* See if we're actually still within the image */ @@ -407,15 +374,16 @@ function actionsHide(evt) function actionRun(evt) { - if(evt.target.getAttribute("class") != "action") + /* COMPAT: Target is handled differently in Internet nastiness */ + var act = evt.target || evt.srcElement; + + if(act.className != "action") return; - var actions = graphDoc.getElementById("actions"); + var actions = gdoc.getElementById("actions"); if(!actions._display) return; - var act = evt.target; - switch(act.getAttribute("id")) { case "action-zoom": @@ -436,7 +404,7 @@ function actionRun(evt) function actionGoto(img, act) { /* Display the selection thingy */ - var got = graphDoc.getElementById("goto"); + var got = gdoc.getElementById("goto"); /* TODO: Make 120/170 a constant */ got.style.top = act.offsetTop; @@ -446,20 +414,20 @@ function actionGoto(img, act) img.onmouseclick = actionGotoCancel; - var sel = graphDoc.getElementById("goto-select"); + var sel = gdoc.getElementById("goto-select"); sel.onchange = actionGotoChange; sel._img = img; } function actionGotoCancel() { - var got = graphDoc.getElementById("goto"); + var got = gdoc.getElementById("goto"); got.style.display = "none"; } function actionGotoChange() { - var sel = graphDoc.getElementById("goto-select"); + var sel = gdoc.getElementById("goto-select"); var img = sel._img; sel.onchange = null; sel._img = null; @@ -493,9 +461,10 @@ function findCategoryData(cat) return null; } -function changeCategory(cat) +function changeCategory(evt) { - categoryCurrent = cat; + var header = evt.target || evt.srcElement; + categoryCurrent = header.getAttribute("category"); displayCurrentPage(); } @@ -505,9 +474,6 @@ function displayCategories() /* Get the template and clean it up a bit */ var template = document.getElementById("header-template"); - while(template.hasChildNodes()) - template.removeChild(template.firstChild); - var groups = xmlData.getElementsByTagName("category"); for(i = 0; i < groups.length; i++) @@ -517,13 +483,15 @@ function displayCategories() if(!categoryCurrent) categoryCurrent = name; - var el = template.cloneNode(true); + var el = template.cloneNode(false); el.removeAttribute("id"); el.appendChild(document.createTextNode(name)); - el.setAttribute("group", name); - el.setAttribute("onclick", "changeCategory('" + name + "');"); + el.setAttribute("category", name); + + el.onclick = function(evt) + { return changeCategory(evt || window.event); } - categoryArea.appendChild(el); + categoryArea.insertBefore(el, template); } } @@ -570,7 +538,7 @@ function loadXml(uri, callback) function displayError(message, place) { var el = document.createElement("span"); - el.setAttribute("class", "error"); + el.className = "error"; var text = document.createTextNode(message); el.appendChild(text); @@ -584,3 +552,22 @@ function nowTime() { return Math.floor((new Date()).getTime() / 1000); } + +function makeEndpointURI() +{ + /* TODO: This should use the scheme of the current URI */ + return "http://" + document.location.host + ENDPOINT; +} + +function cancelEvent(evt) +{ + /* COMPAT: Totally different for IE and mozilla */ + if(evt.preventDefault) + evt.preventDefault(); + if(evt.stopPropagation) + evt.stopPropagation(); + if("cancelBubble" in evt) + evt.cancelBubble = true; + if("returnValue" in evt) + evt.returnValue = false; +} diff --git a/html/style.css b/html/style.css index 6b45978..fdacb1b 100644 --- a/html/style.css +++ b/html/style.css @@ -58,7 +58,7 @@ body /* Our sample header (which gets copied for each group) is hidden */ #header-template - { display: none; } + { visibility: hidden; } /* ----------------------------------------------------------------------------- * GRAPHS/FRAME @@ -105,11 +105,14 @@ img.graph display: none; } -img.action +.action { margin: 3px; cursor: pointer; - filter: alpha(opacity=75); + + /* COMPAT: IE doesn't support :hover on anything but links + so transparency has no use whatsover */ + -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; @@ -117,7 +120,6 @@ img.action img.action:hover { - filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; |