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>


Reply via email to