Added: hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js
URL: http://svn.apache.org/viewvc/hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js?rev=953041&view=auto
==============================================================================
--- hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js
(added)
+++ hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/loggraph.ui.js
Wed Jun 9 15:26:22 2010
@@ -0,0 +1,377 @@
+/**
+ * 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
Added: hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html
URL: http://svn.apache.org/viewvc/hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html?rev=953041&view=auto
==============================================================================
--- hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html
(added)
+++ hadoop/zookeeper/trunk/src/contrib/loggraph/web/org/apache/zookeeper/graph/resources/main.html
Wed Jun 9 15:26:22 2010
@@ -0,0 +1,60 @@
+<!--
+ 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>
|