summaryrefslogtreecommitdiff
path: root/html/rrdui.js
diff options
context:
space:
mode:
Diffstat (limited to 'html/rrdui.js')
-rw-r--r--html/rrdui.js215
1 files changed, 101 insertions, 114 deletions
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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 07:35:22 +0000