http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.js ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.js b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.js deleted file mode 100644 index 87bb7d8..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.js +++ /dev/null @@ -1,262 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -LogGraph = function(canvas, status) { - this.canvas = document.getElementById(canvas); - this.status = document.getElementById(status); - this.starttime = 0; - this.endtime = 0; - this.period = 0; - this.numEntries = 0; - this.currentRender = 0; - this.filter = ""; - - this.saveFilters = function () { - localStorage.starttime = this.starttime; - localStorage.endtime = this.endtime; - localStorage.period = this.period; - localStorage.filter = this.filter; - - }; - this.loadFilters = function () { - if (localStorage.starttime) { this.starttime = parseInt(localStorage.starttime); } - if (localStorage.endtime) { this.endtime = parseInt(localStorage.endtime); } - if (localStorage.period) { this.period = parseInt(localStorage.period); } - if (localStorage.filter) { this.filter = localStorage.filter; } - }; - this.loadFilters(); - var self = this; - - var updateStatus = function (starttime, period, filter, numEntries) { - self.starttime = starttime; - self.endtime = starttime + period; - self.period = period; - self.filter = filter; - self.saveFilters(); - - self.status.innerHTML = dateFormat(starttime, "HH:MM:ss,l") + " ⇒ " + dateFormat(self.endtime, "HH:MM:ss,l") + " | " + numEntries + " entries | " + (filter ? filter : "No filter"); - - if (self.currentRender) { - self.currentRender(); - } - }; - - YUI().use("io-base", function(Y) { - var uri = "/info"; - if (self.starttime) { - var uri = "/info?start=" + self.starttime + "&period=" + self.period + "&filter=" + self.filter; - } - - function complete(id, o, args) { - var data = eval("(" + o.responseText + ")"); // Response data. - var period = data.endTime - data.startTime; - updateStatus(data.startTime, period, self.filter, data.numEntries); - }; - - Y.on('io:complete', complete, Y, []); - var request = Y.io(uri); - }); - - this.addLogs = function() { - new LogGraph.fileSelector(function (files) { new LogGraph.fileLoader(files); }); - }; - - this.editFilters = function() { - new LogGraph.filterSelector(this.starttime, this.period, this.filter, updateStatus); - }; - - this.getCleanCanvas = function () { - this.canvas.innerHTML = ""; - return this.canvas; - }; - - this.showLoadingScreen = function () { - this.loadingScreen = document.createElement("div"); - this.loadingScreen.id = "loadingScreen"; - this.loadingScreen.innerHTML = "<img src=\"load-big.gif\" /> <p>Loading...</p>"; - document.body.appendChild(this.loadingScreen); - }; - - this.hideLoadingScreen = function () { - document.body.removeChild(this.loadingScreen); - this.loadingScreen.style.visibility = "hidden"; - }; - - - /*** - * TODO: refactor these to load the data first, before handing to a draw funciton. - * We shouldn't pass the async q into the drawing function - */ - this.showLogs = function() { - var self= this; - YUI().use('async-queue', function(Y) { - var q = new Y.AsyncQueue(self.showLoadingScreen, - // The second callback will pause the Queue and send an XHR for data - function () { - q.pause(); - var loggraph = new LogGraph.LogTable(q, self.getCleanCanvas(), self.starttime, self.endtime, self.filter); - self.currentRender = self.showLogs; - }, - self.hideLoadingScreen); - q.run(); - } - ); - }; - - this.serverGraph = function() { - var self= this; - YUI().use('async-queue', function(Y) { - var q = new Y.AsyncQueue(self.showLoadingScreen, - // The second callback will pause the Queue and send an XHR for data - function () { - q.pause(); - var servergraph = new LogGraph.ServerGraph(q, self.getCleanCanvas(), self.starttime, self.endtime, self.filter); - self.currentRender = self.showLogs; - }, - self.hideLoadingScreen); - q.run(); - } - ); - }; - - this.sessionGraph = function() { - var self= this; - YUI().use('async-queue', function(Y) { - var q = new Y.AsyncQueue(self.showLoadingScreen, - // The second callback will pause the Queue and send an XHR for data - function () { - q.pause(); - var sessiongraph = new LogGraph.SessionGraph(q, self.getCleanCanvas(), self.starttime, self.endtime, self.filter); - self.currentRender = self.sessionGraph; - }, - self.hideLoadingScreen); - q.run(); - } - ); - }; - - this.showStats = function() { - var self= this; - YUI().use('async-queue', function(Y) { - var q = new Y.AsyncQueue(self.showLoadingScreen, - // The second callback will pause the Queue and send an XHR for data - function () { - q.pause(); - var statgraph = new LogGraph.StatsGraph(q, self.getCleanCanvas(), self.starttime, self.endtime, self.filter); - self.currentRender = self.showStats; - }, - self.hideLoadingScreen); - q.run(); - } - ); - }; -}; - -LogGraph.error = function(description) { - var errorPage = document.createElement("div"); - errorPage.className = "errorpage"; - var p = document.createElement("p"); - p.innerHTML = description; - errorPage.appendChild(p); - - var span = document.createElement("span"); - p = document.createElement("p"); - span.className = "actionButton"; - span.innerHTML = "OK"; - span.onclick = function (evt) { - document.body.removeChild(errorPage); - delete errorPage; - } - p.appendChild(span); - errorPage.appendChild(p); - - document.body.appendChild(errorPage); -}; - -LogGraph.ticker =function(allow_dups) { - this.ticks = new Array(); - this.current_tick = 0; - this.allow_dups = allow_dups;; - - this.tick = function(time) { - if (time == this.ticks[this.ticks.length - 1] && this.allow_dups == true) - return this.current_tick; - - this.ticks.push(time); - return this.current_tick++; - }; - - this.current = function() { - return this.current_tick; - }; - - this.reset = function() { - while (this.ticks.length) { - this.ticks.pop(); - } - this.current_tick = 0; - }; -}; - - -LogGraph.timescale = function(starttime, endtime) { - this.starttime = starttime; - this.endtime = endtime; - this.millis = endtime - starttime; - - this.draw = function(paper) { - var scale = paper.set(); - scale.push(paper.path("M0 0 L" + paper.width + " 0")); - - for (var i = 0; i < paper.width; i += 100) { - scale.push(paper.path("M" + i + " 0 L" + i + " 5")); - // var time = dateFormat((this.starttime + (i*ms_per_pixel)), "h:MM:ss,l"); - // paper.text(i + 5, 10, time); - } - - scale.attr({"stroke-width": 2}); - }; -}; - -/* - Fetch data from an uri and process it, the process data func returns true if any of the data is useful -*/ -LogGraph.loadData = function (asyncq, uri, processdata) { - YUI().use("io-base", function(Y) { - function success(id, o, args) { - var data = eval("(" + o.responseText + ")"); // Response data. - if (data.error) { - LogGraph.error(data.error); - } else { - if (!processdata(data)) { - LogGraph.error("No data. Perhaps you should loosen your filter criteria."); - } - } - asyncq.run(); - }; - function failure(id, o, args) { - LogGraph.error("Error contacting server: (" + o.status + ") " + o.statusText); - asyncq.run(); - }; - - Y.on('io:success', success, Y, []); - Y.on('io:failure', failure, Y, []); - - var request = Y.io(uri); - }); -} \ No newline at end of file
http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.log.js ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.log.js b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.log.js deleted file mode 100644 index 551ea4b..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.log.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -LogGraph.LogTable = function (asyncq, canvas, starttime, endtime, filter) { - this.starttime = starttime; - this.endtime = endtime; - this.filter = filter; - - var table = document.createElement("table"); - table.id = "logtable"; - canvas.appendChild(table); - - this.addLogLine = function(time, text) { - var tr = document.createElement("tr"); - table.appendChild(tr); - - var td = document.createElement("td"); - td.innerHTML = dateFormat(time, "h:MM:ss,l"); - tr.appendChild(td); - - td = document.createElement("td"); - td.innerHTML = text; - tr.appendChild(td); - } - - var self = this; - var processdata = function(data) { - var events = data["events"]; - var count = 0; - for (var i in events) { - var e = events[i]; - if (e.type == "text") { - self.addLogLine(e.time, e.text); - count++; - } - } - return count != 0; - }; - - var uri = "/data?start=" + self.starttime + "&end=" + self.endtime + "&filter=" + self.filter; - LogGraph.loadData(asyncq, uri, processdata); -}; http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.server.js ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.server.js b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.server.js deleted file mode 100644 index 0a74b5c..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.server.js +++ /dev/null @@ -1,329 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -LogGraph.ServerGraph = function(asyncq, canvas, starttime, endtime, filter) { - this.starttime = starttime; - this.endtime = endtime; - this.millis = endtime - starttime; - this.nextserverid = 0; - this.serveroffset = 100; - this.filter = filter; - - this.pixels_per_tick = 20; - this.ticker = new LogGraph.ticker(); - - - var paper = Raphael(canvas, 1, 1); - - var self = this; - - this.timescale = new LogGraph.timescale(starttime, endtime); - this.objects = new Array(); - - this.add = function(obj) { - this.objects.push(obj); - } - - this.tick_to_x = function (timestamp) { - var x = timestamp * this.pixels_per_tick; - return x; - }; - - this._drawTime = function(paper, x, time) { - var p = paper.path("M" + x + " 0 L" + x + " " + paper.height); - var t = paper.text(x, 10, dateFormat(time, "h:MM:ss,l")); - - t.hide(); - p.mouseover(function(evt) { - t.show(); - p.attr({stroke: "red"}); - }); - p.mouseout(function(evt) { - t.hide(); - p.attr({stroke: "lightgray"}); - }); - - return p; - }; - - this.draw = function(paper) { - var grid = paper.set(); - for (var i = 0; i < paper.height; i += 20) { - grid.push(paper.path("M0 " + i + " L" + paper.width + " " + i)); - } - var lasttick = this.starttime; - var scale = 500; // 500 ms - - var y = 0; - - for (var t = 0, len = this.ticker.ticks.length; t < len; t++) { - var basex = t * this.pixels_per_tick; - var thistick = this.ticker.ticks[t]; - var nexttick = t + 1 == this.ticker.ticks.length ? this.endtime : this.ticker.ticks[t+1]; - if (nexttick == thistick) { - continue; - } - var time = thistick - lasttick; - var first = scale - (lasttick % scale); - - /* for (var i = 0; (first+scale*i) < time; i++) { - - var toffset = first+scale*i; - var x = basex + LogGraph._pixels_per_tick * toffset/time; - grid.push(this._drawTime(paper, x, lasttick + toffset, grid)); - - }*/ - - - //grid.push(paper.path("M" + i + " 0 L" + i + " " + paper.height)); - lasttick = thistick; - } - grid.attr({stroke: "lightgray"}); - this.timescale.draw(paper); - - for (o in this.objects) { - this.objects[o].draw(paper); - } - }; - - - var processdata = function(data) { - var servermap = {}; - var servers = data.servers; - var count = 0; - for (s in servers) { - var server = new LogGraph.ServerGraph.server(self, "Server " + servers[s]); - servermap[servers[s]] = server; - self.add(server); - count++; - } - - var messages = {}; - var events = data.events; - for (var i in events) { - var e = events[i]; - var t = e.time; - if (e.type == "stateChange") { - servermap[e.server].addState(e.state, self.ticker.tick(e.time)); - } - if (e.type == "postmessage") { - src = servermap[e.src]; - dst = servermap[e.dst]; - var key = "key:s" + e.src + ",d" + e.dst + ",z" + e.zxid; - - var m = new LogGraph.ServerGraph.message(self, src, self.ticker.tick(e.time), dst, e.zxid); - messages[key] = m; - } - if (e.type == "delivermessage") { - var key = "key:s" + e.src + ",d" + e.dst + ",z" + e.zxid; - - var m = messages[key]; - if (m) { - m.dsttime = self.ticker.tick(e.time); - m.name = "Propose"; - self.add(m); - delete messages[key]; - } - } - if (e.type == "exception") { - servermap[e.server].addException(self.ticker.tick(e.time), e.text, e.time); - } - count++; - } - - for (var i in messages) { - var m = messages[i]; - m.markIncomplete(); - self.add(m); - count++; - } - - if (count != 0) { - paper.setSize(self.tick_to_x(self.ticker.current()), 1000); - - var line = paper.path("M0 0 L0 1000"); - line.attr({"stroke": "red", "stroke-dasharray": "- "}); - var base = canvas.offsetLeft;// + ((canvas.offsetWidth - paper.width)/2); - canvas.onmousemove = function (evt) { - var x = evt.screenX - base; - - line.attr({"path": "M" + x + " 0 L"+ x +" 1000"}); - - }; - - self.draw(paper); - return true; - } else { - return false; - } - }; - - var uri = "/data?start=" + self.starttime + "&end=" + self.endtime + "&filter=" + filter; - - LogGraph.loadData(asyncq, uri, processdata); -}; - -LogGraph.ServerGraph.server = function (graph, name) { - this.graph = graph; - this.serverid = graph.nextserverid++; - this.name = name; - this.y = (this.serverid * 300 + graph.serveroffset); - this.states = new Array(); - this.exception = new Array(); - - this.addState = function(state, time) { - this.states.push([state, time]); - } - - this.addException = function(tick, exception, time) { - this.exception.push(new LogGraph.ServerGraph.exception(this.graph, tick, exception, time)); - } - - this.draw = function(paper) { - var st = paper.set(); - st.push(paper.path("M0 " + this.y + " L" + paper.width + " " + this.y)); - st.push(paper.text(20, this.y - 10, this.name)); - st.attr({stroke: "gray"}); - - var numstates = this.states.length; - - for (s = 0; s < numstates; s++) { - var style = {}; - switch (this.states[s][0]) { - case "INIT": style = {stroke: "yellow", "stroke-width":3}; break; - case "FOLLOWING": style = {stroke: "lightgreen", "stroke-width":7}; break; - case "LEADING": style = {stroke: "green", "stroke-width":10}; break; - case "LOOKING": style = {stroke: "orange", "stroke-width":5}; break; - } - var startx = this.graph.tick_to_x(this.states[s][1]); - var endx = s + 1 < numstates ? this.graph.tick_to_x(this.states[(s+1)][1]) : paper.width; - var p = paper.path("M" + startx + " " + this.y + " L" + endx + " " + this.y); - p.attr(style); - } - - for (e in this.exception) { - this.exception[e].draw(paper, this); - } - } -}; - -LogGraph.ServerGraph.message = function(graph, src, srctime, dst, zxid) { - this.graph = graph; - this.src = src; - this.srctime = srctime; - this.dst = dst; - this.dsttime = 0; //dsttime; - this.name = "Unknown"; - this.zxid = zxid; - this.moreinfo = "No extra information"; - this.incomplete = false; - - this.markIncomplete = function() { - this.incomplete = true; - this.dsttime = this.srctime; - } - - this.draw = function(paper) { - var srcx = this.graph.tick_to_x(this.srctime); - var dstx = this.graph.tick_to_x(this.dsttime); - - var arrow = paper.set(); - var p = paper.path("M" + srcx + " " + this.src.y + " L" + dstx + " " + this.dst.y); - arrow.push(p); - - var tx = (srcx + dstx)/2; - var ty = (this.src.y + this.dst.y)/2; - var t = paper.text(tx, ty, this.name); - - var gradiant = (this.dst.y - this.src.y)/(dstx - srcx); - var angle = Math.atan(gradiant) * 57.2958; - t.rotate(angle, true); - - var arrowl = paper.path("M" + dstx + " " + this.dst.y + " L" + (dstx - 10) +" " + this.dst.y); - arrowl.rotate(angle + 20, dstx, this.dst.y); - arrow.push(arrowl); - var arrowr = paper.path("M" + dstx + " " + this.dst.y + " L" + (dstx - 10) +" " + this.dst.y); - arrowr.rotate(angle - 20, dstx, this.dst.y); - arrow.push(arrowr); - - arrow.attr({"stroke-width": 2, stroke: "gray"}); - if (this.incomplete) { - arrow.attr({"stroke-dasharray": "- .", stroke: "pink", "stroke-width": 2}); - } - arrow.mouseover(function(evt) { - t.attr({"font-size": 20}); - arrow.attr({stroke: "red", "stroke-width": 3}); - }); - arrow.mouseout(function(evt) { - t.attr({"font-size": 10}); - - if (this.incomplete) { - arrow.attr({stroke: "pink", "stroke-width": 2}); - } else { - arrow.attr({stroke: "gray", "stroke-width": 2}); - } - }); - - - - arrow.click(function(evt) { - var popup = document.createElement("div"); - popup.className = "popUp"; - popup.innerHTML = "zxid: " + parseInt(this.zxid).toString(16); - - popup.style.top = evt.clientY; - popup.style.left = evt.clientX; - document.body.appendChild(popup); - - popup.onclick = function(evt) { - document.body.removeChild(popup); - }; - }); - } -}; - -LogGraph.ServerGraph.exception = function(graph, tick, exceptiontext, time) { - this.graph = graph; - this.time = time; - this.text = exceptiontext; - this.tick = tick; - - var self = this; - - this.draw = function(paper, server) { - var center = this.graph.tick_to_x(this.tick); - var p = paper.circle(center, server.y, 5); - p.attr({stroke: "orange", fill: "red"}); - - p.mouseover(function(evt) { - p.popup = document.createElement("div"); - p.popup.className = "popUp"; - p.popup.innerHTML = self.text.replace("\n", "<br/>");; - p.popup.style.top = server.y + 50; - p.popup.style.left = center + 25; - document.body.appendChild(p.popup); - - p.animate({r: 10}, 500, "elastic"); - }); - p.mouseout(function(evt) { - document.body.removeChild(p.popup); - p.animate({r: 5}, 100); - }); - } -}; - http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.session.js ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.session.js b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.session.js deleted file mode 100644 index 5a314d8..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.session.js +++ /dev/null @@ -1,202 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -LogGraph.SessionGraph = function (asyncq, canvas, starttime, endtime, filter) { - this.sessions = new Array(); - this.counter = 0; - this.exceptions = new Array(); - - this.pix_per_ticks = 4; - this.pix_per_session = 7; - - var paper = Raphael(canvas, 1, 1); - this.ticker = new LogGraph.ticker(); - var self = this; - - this.starttime = starttime; - this.endtime = endtime; - this.filter = filter; - - this.findOrCreateSession = function(id) { - if (this.sessions[id] == undefined) { - this.sessions[id] = new LogGraph.SessionGraph.session(this, ++this.counter, id); - } - return this.sessions[id]; - } - - this.height = function () { return this.counter * this.pix_per_session + 10; }; - this.width = function () { return (self.ticker.current() * this.pix_per_ticks); }; - - this.draw = function(paper) { - - - var line = paper.path("M0 0 L0 " + this.height()); - line.attr({"stroke": "red", "stroke-dasharray": "- "}); - var base = canvas.offsetLeft; - var width = this.width(); - canvas.onmousemove = function (evt) { - var x = evt.clientX - base; - - line.attr({"path": "M" + x + " 0 L" + x + " " + self.height() }); - }; - - for (var i in this.sessions) { - var s = this.sessions[i]; - s.draw(paper); - } - }; - - var processdata = function(data) { - var count = 0; - for (var i in data.events) { - var e = data.events[i]; - if (e.type == "transaction") { - e.tick = self.ticker.tick(e.time, true); - var session = self.findOrCreateSession(e.client); - session.addEvent(e); - count++; - } - } - paper.setSize(self.width(), self.height()); - - if (count != 0) { - self.draw(paper); - return true; - } else { - return false; - } - }; - - var uri = "/data?start=" + self.starttime + "&end=" + self.endtime + "&filter=" + filter; - - LogGraph.loadData(asyncq, uri, processdata); -}; - -LogGraph.SessionGraph.sessionevent = function () { - this.time = time; - this.type = type; - this.client = client; - this.cxid = cxid; - this.zxid = zxid; - this.op = op; - this.extra = extra; -}; - -LogGraph.SessionGraph.sessionEventPopup = function (obj, e, x, y) { - obj.click(function(evt) { - var popup = document.createElement("div"); - popup.className = "popUp"; - - var closebutton = document.createElement("div"); - closebutton.className = "closebutton"; - closebutton.title = "Close popup"; - closebutton.innerHTML = "×"; - popup.appendChild(closebutton); - closebutton.onclick= function(evt) { popup.style.visibility = "hidden"; document.body.removeChild(popup) }; - var txt = document.createElement("span"); - txt.innerHTML = "session: " + e.client + "<br/>op: " + e.op + "<br/>zxid: " + e.zxid + "<br/>time: " + e.time + "<br/>extra: " + e.extra; - popup.appendChild(txt); - - popup.style.top = y; - popup.style.left = x; - document.body.appendChild(popup); - - YUI().use('dd-drag', function(Y) { - //Selector of the node to make draggable - var dd = new Y.DD.Drag({ - node: popup - }); - }); - }); -}; - -LogGraph.SessionGraph.session = function (graph, index, id) { - this.index = index; - this.id = id; - this.graph = graph; - - this.events = new Array(); - this.starttick = 0; - this.endtick = undefined; - - this.addEvent = function(e) { - this.events.push(e); - - if (e.op == "createSession") { - // document.write("createSession for " + id.toString(16)); - this.starttick = e.tick; - } else if (e.op == "closeSession") { - this.endtick = e.tick; - } - }, - - this._attach_action = function (sess, label) { - sess.mouseover(function(evt) { - label.show(); - sess.attr({stroke: "gray"}); - }); - - sess.mouseout(function(evt) { - label.hide(); - sess.attr({stroke: "black"}); - }); - }, - - this.drawEvent = function (paper, y, e) { - var x = e.tick * this.graph.pix_per_ticks;; - var s = paper.path("M" + x + " " + (y - 3) + " L" + x + " " + (y + 3)); - s.attr({"stroke-width": 2}); - if (e.op == "error") { - s.attr({"stroke": "red"}); - } - s.mouseover(function(evt) { - s.attr({"stroke-width": 5}); - }); - - s.mouseout(function(evt) { - s.attr({"stroke-width": 2}); - }); - - LogGraph.SessionGraph.sessionEventPopup(s, e, x, y); - }, - - this.draw = function(paper) { - var y = this.index*this.graph.pix_per_session;; - var start = this.starttick * this.graph.pix_per_ticks; - var end = this.endtick * this.graph.pix_per_ticks; - - var sess = paper.set(); - - if (this.endtick == undefined) { - end = this.graph.width(); - } - - sess.push(paper.path("M" + start + " " + y + " L" + end + " " + y)); - for (var i in this.events) { - var e = this.events[i]; - this.drawEvent(paper, y, e); - } - - //sess.attr({"stroke-width": 3}); - label = paper.text(start + 100, y, this.id); - label.attr({"font-size": "14px"}); - label.hide(); - this._attach_action(sess, label); - } -}; - http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.stats.js ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.stats.js b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.stats.js deleted file mode 100644 index 0a8ac4f..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.stats.js +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -LogGraph.StatsGraph = function (asyncq, canvas, starttime, endtime, filter) { - var processdata = function(data) { - var r = Raphael(canvas); - var x = data.map(function (x) { return x.time; }); - var y = data.map(function (x) { return x.count; }); - var xlabels = data.map(function (x) { return dateFormat(x.time, "HH:MM:ss,l"); } ); - var h1 = function () { - this.tags = r.set(); - for (var i = 0, ii = this.y.length; i < ii; i++) { - this.tags.push(r.g.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{fill: "#fff"}, {fill: this.symbols[i].attr("fill")}])); - } - }; - var h2 = function () { - this.tags && this.tags.remove(); - }; - r.g.linechart(40, 40, 1000, 500, x, y, {shade: true, axis: "0 0 1 1", symbol: "x", southlabels: xlabels, axisxstep: xlabels.length - 1 , westAxisLabel: "Write requests", southAxisLabel: "Time (min)"}).hoverColumn(h1, h2); - - return true; - //r.g.barchart(0, 0, 1000, 100, y, {shade: true, symbol: "x"}).hoverColumn(h1, h2); - }; - - var uri = "/throughput?scale=minutes"; - LogGraph.loadData(asyncq, uri, processdata); -}; - - http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js deleted file mode 100644 index 819765a..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js +++ /dev/null @@ -1,377 +0,0 @@ -/** - * Licensed to the Apache Software Foundation (ASF) under one - * or more contributor license agreements. See the NOTICE file - * distributed with this work for additional information - * regarding copyright ownership. The ASF licenses this file - * to you under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance - * with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// Opens a window to load files into the engine -LogGraph.fileSelector = function(callback) { - var self = this; - this.callback = callback; - this.selectedFiles = new Array(); - - var divTag = document.createElement("div"); - divTag.id = "fileSelector" + Math.round(Math.random()*100000); - // divTag.className = "popUp"; - divTag.className = "selector fileSelector"; - document.body.appendChild(divTag); - - YUI().use('dd-drag', function(Y) { - //Selector of the node to make draggable - var dd = new Y.DD.Drag({ - node: '#' + divTag.id - }); - }); - - var list = document.createElement("ul"); - divTag.appendChild(list); - var selectedList = document.createElement("selectedlist"); - divTag.appendChild(selectedList); - - var clearanchor = document.createElement("span"); - clearanchor.innerHTML = "Remove All"; - clearanchor.className = "actionbutton"; - clearanchor.style.cssFloat = "right"; - clearanchor.onclick = function () { - self.selectedFiles = new Array(); - self.updateSelectedList(); - }; - divTag.appendChild(clearanchor); - - var doneanchor = document.createElement("span"); - doneanchor.innerHTML = "Process Files"; - doneanchor.className = "actionbutton"; - doneanchor.style.cssFloat = "left"; - doneanchor.onclick = function () { - self.callback(self.selectedFiles); - document.body.removeChild(divTag); - delete divTag; - }; - divTag.appendChild(doneanchor); - - var cancelanchor = document.createElement("span"); - cancelanchor.innerHTML = "Cancel"; - cancelanchor.className = "actionbutton"; - cancelanchor.style.cssFloat = "left"; - cancelanchor.onclick = function () { - document.body.removeChild(divTag); - delete divTag; - }; - divTag.appendChild(cancelanchor); - - this.createFileListItem = function (file) { - var li = document.createElement("li"); - var a = document.createElement("a"); - if (file.type == "D") { - a.innerHTML = file.file + "/"; - a.onclick = function () { self.updateList(file.path); }; - } else { - a.innerHTML = file.file; - a.onclick = function () { self.addSelectedFile(file.path); }; - } - - a.fullpath = file.path;; - li.appendChild(a); - return li; - }; - - this.addSelectedFile = function (file) { - if (this.selectedFiles.indexOf(file) == -1) { - this.selectedFiles.push(file); - this.updateSelectedList(); - } - }; - - this.removeSelectedFile = function (file) { - this.selectedFiles = this.selectedFiles.filter(function(f) { return !(file == f); }); - this.updateSelectedList(); - }; - - this.createSelectedListItem = function (file) { - var li = document.createElement("li"); - var a = document.createElement("a"); - li.className = "selectedFile"; - a.onclick = function () { self.removeSelectedFile(file); }; - a.innerHTML = file; - li.appendChild(a); - return li; - }; - - this.updateSelectedList = function () { - while (selectedList.firstChild) { selectedList.removeChild(selectedList.firstChild); } - - for (var i in this.selectedFiles) { - var f = this.selectedFiles[i]; - selectedList.appendChild(this.createSelectedListItem(f)); - } - }; - - this.updateList = function (base) { - while (list.firstChild) list.removeChild(list.firstChild); - - // Create a YUI instance using io-base module. - YUI().use("io-base", function(Y) { - var uri = "/fs?path=" + base; - - // Define a function to handle the response data. - function complete(id, o, args) { - var id = id; // Transaction ID. - var data = eval("(" + o.responseText + ")"); // Response data. - var parts = base.split("/").slice(0,-1); - var parent = "" - if (parts.length < 2) { - parent = "/"; - } else { - parent = parts.join("/"); - } - if (base != "/") { - var li = self.createFileListItem({"file": "..", type: "D", path: parent}); - list.appendChild(li); - } - for (var i in data) { - var f = data[i]; - if (f.file[0] != '.') { - var li = self.createFileListItem(f); - list.appendChild(li); - } - } - }; - - Y.on('io:complete', complete, Y, []); - var request = Y.io(uri); - }); - }; - - this.updateList("/"); -}; - -// Open a window which loads files into the engine -LogGraph.fileLoader = function(files) { - var div = document.createElement("div"); - div.id = "fileLoader"; - - var imgArray = new Array(); - var pArray = new Array(); - for (var index in files) { - var f = files[index]; - var p = document.createElement("p"); - var i = document.createElement("img"); - i.src = "load.gif"; - i.style.visibility = "hidden"; - imgArray.push(i); - pArray.push(p); - var span = document.createElement("span"); - span.innerHTML = f; - - p.appendChild(span); - p.appendChild(i); - - div.appendChild(p); - } - - var loadFile = function (index) { - // Create a YUI instance using io-base module. - YUI().use("io-base", function(Y) { - var file = files[index]; - var uri = "/loadfile?path=" + file; - imgArray[index].style.visibility = "visible"; - - // Define a function to handle the response data. - function complete(id, o, args) { - var id = id; // Transaction ID. - var data = eval("(" + o.responseText + ")"); // Response data. - if (data.status == "ERR") { - var err = document.createElement("div"); - err.innerHTML = data.error; - pArray[index].appendChild(err); - } else if (data.status == "OK") { - var ok = document.createElement("div"); - ok.innerHTML = "OK"; - pArray[index].appendChild(ok); - } - - imgArray[index].style.visibility = "hidden"; - if (index + 1 < files.length) { - loadFile(index + 1); - } else { - //alert("DONE"); - } - }; - - Y.on('io:complete', complete, Y, []); - var request = Y.io(uri); - }); - }; - - var doneanchor = document.createElement("a"); - doneanchor.className = "actionbutton"; - doneanchor.innerHTML = "Done"; - doneanchor.onclick = function () { - document.body.removeChild(div); - delete div; - }; - - document.body.appendChild(div); - if (files.length > 0) { - loadFile(0); - } else { - div.innerHTML ="No files to load"; - } - div.appendChild(doneanchor); -} - -// select a time period -LogGraph.filterSelector = function(starttime, period, filter, callback) { - var self = this; - this.callback = callback; - - // Container other widgets will be in - var container = document.createElement("div"); - container.id = "filterSelector" + Math.round(Math.random()*100000); - container.className = "selector filterSelector"; - document.body.appendChild(container); - - YUI().use('dd-drag', function(Y) { - //Selector of the node to make draggable - var dd = new Y.DD.Drag({ - node: '#' + container.id - }); - }); - - // Temporary loading screen - var loadingp = document.createElement("p"); - loadingp.innerHTML = "Loading..."; - var loadimg = document.createElement("img"); - loadimg.src = "load.gif"; - loadingp.appendChild(loadimg); - container.appendChild(loadingp); - - var addWithLabel = function (container, labeltxt, object) { - var p = document.createElement("p"); - var label = document.createElement("label"); - label.innerHTML = labeltxt + ":"; - p.appendChild(label); - p.appendChild(object); - container.appendChild(p); - }; - var draw = function(minstart, maxstart, entries) { - container.removeChild(loadingp); - var inittime = minstart > starttime ? minstart : starttime; - - var numEntries = 0; - var startspan = document.createElement("span"); - addWithLabel(container, "Start time", startspan); - var startinput = document.createElement("input"); - startinput.type = "hidden"; - startinput.value = inittime; - container.appendChild(startinput); - var sliderspan = document.createElement("span"); - container.appendChild(sliderspan); - - var countspan = document.createElement("p"); - countspan.innerHTML = entries + " entries";; - container.appendChild(countspan); - - var windowinput = document.createElement("input"); - windowinput.type = "text"; - windowinput.value = period; - addWithLabel(container, "Time window (ms)", windowinput); - - var filterinput = document.createElement("textarea"); - filterinput.id = "filterinput"; - filterinput.value = filter; - addWithLabel(container, "Filter", filterinput); - - /* done link, when clicked time is updated, */ - var doneanchor = document.createElement("a"); - doneanchor.className = "actionbutton"; - doneanchor.innerHTML = "Done"; - doneanchor.onclick = function () { - var start = parseInt(startinput.value); - var period = parseInt(windowinput.value); - var filter = filterinput.value; - document.body.removeChild(container); - delete container; - - update(start, period, filter, function() { - callback(start, period, filter, numEntries); - }); - }; - container.appendChild(doneanchor); - - var update = function(start, period, filter, thenrun) { - startspan.innerHTML = dateFormat(start, "HH:MM:ss,l"); - // get the min and max start time - YUI().use("io-base", function(Y) { - var uri = "/info?start=" + start + "&period=" + period + "&filter=" + filter; - function complete(id, o, args) { - var data = eval("(" + o.responseText + ")"); - countspan.innerHTML = data.numEntries + " entries"; - numEntries = data.numEntries; - if (thenrun) { - thenrun(); - } - }; - - Y.on('io:complete', complete, Y, []); - var request = Y.io(uri); - }); - }; - - var updatewindow = function(evt) { - var start = parseInt(startinput.value); - var period = parseInt(windowinput.value); - var filter = filterinput.value; - update(start, period, filter); - }; - windowinput.onkeyup = updatewindow; - - - YUI().use("slider", function (Y) { - var input, slider; - - function updateInput( e ) { - this.set( "value", e.newVal ); - - update(parseInt(startinput.value), parseInt(windowinput.value), filterinput.value); - } - - xSlider = new Y.Slider({min: minstart, max: maxstart, value: inittime, length: "1000px" }); - - // Link the input value to the Slider - xInput = Y.one( startinput ); - xInput.setData( { slider: xSlider } ); - - // Pass the input as the 'this' object inside updateInput - xSlider.after( "valueChange", updateInput, xInput ); - - // Render the Slider next to the input - xSlider.render(sliderspan); - }); - update(inittime, windowinput.value, filterinput); - }; - - // get the min and max start time - YUI().use("io-base", function(Y) { - var uri = "/info"; - function complete(id, o, args) { - var data = eval("(" + o.responseText + ")"); - draw(data.startTime, data.endTime, data.numEntries); - }; - - Y.on('io:complete', complete, Y, []); - var request = Y.io(uri); - }); -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/zookeeper/blob/eab8c1eb/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html ---------------------------------------------------------------------- diff --git a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html b/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html deleted file mode 100644 index b9affe6..0000000 --- a/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html +++ /dev/null @@ -1,60 +0,0 @@ -<!-- - Licensed to the Apache Software Foundation (ASF) under one or more - contributor license agreements. See the NOTICE file distributed with - this work for additional information regarding copyright ownership. - The ASF licenses this file to You under the Apache License, Version 2.0 - (the "License"); you may not use this file except in compliance with - the License. You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. ---> -<html> -<head> -<script src="raphael.js"></script> -<script src="date.format.js"></script> -<script src="loggraph.js"></script> -<script src="loggraph.ui.js"></script> -<script src="loggraph.log.js"></script> -<script src="loggraph.server.js"></script> -<script src="loggraph.stats.js"></script> -<script src="loggraph.session.js"></script> - -<script src="g.raphael.js"></script> -<script src="g.line.js"></script> -<script src="g.pie.js"></script> -<script src="g.bar.js"></script> - -<script type="text/javascript" src="yui-min.js"></script> - -<link rel="stylesheet" type="text/css" href="loggraph.css"> -<script> -var g; -function init() { - g = new LogGraph("canvas", "status"); -} -</script> -</head> -<body onLoad="init()" class="yui3-skin-sam yui-skin-sam"> - -<div id="actions" class="maininterface"> - <span onclick="javascript:g.editFilters()" class="actionbutton">Edit Filters</span> - <span onclick="g.addLogs()" class="actionbutton">Add logs</span> -</div> -<div id="views" class="maininterface"> - <span onclick="g.showLogs()" class="actionbutton">Log view</span> - <span onclick="g.serverGraph()" class="actionbutton">Servers view</span> - <span onclick="g.sessionGraph()" class="actionbutton">Sessions view</span> - <span onclick="g.showStats()" class="actionbutton">Statistics</span> -</div> - <div id="status"></div> -<div id="outercontainer"> -<div id="canvas"></div> -</div> -</body> -</html>
