Added new GUI (PHP, AJAX).

git-svn-id: file:///home/svn/mapi/trunk@1335 8d5bb341-7cf1-0310-8cf6-ba355fef3186

applications/packetloss/cgi_headers_packetloss.h

@@ -7,6 +7,7 @@
 #define CGI_FILENAME BASENAME".cgi"
 #define CGI_PACKETCOUNT_FILENAME "packetcount.cgi"
 #define TOP_FILENAME BASENAME"_top.html"		// right frame
+#define TOP_FILENAME_CSV BASENAME"_top.csv"
 
 static char cgi_head[] = "\
 #!/usr/bin/rrdcgi\n\

applications/packetloss/gui/css/packetloss.css

+html {
+	margin: 0px;
+	padding: 0px;
+	color: black;
+	background-color: #E0E0E0;
+}
+
+body {
+	margin: 20px;
+	color: black;
+	background-color: #E0E0E0;
+	font-size: 0.8em;
+	font-family: Verdana, lucida, helvetica, arial, sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+	margin: 0em 0em 0.15em 0em;
+	font-family: Verdana, lucida, helvetica, arial, sans-serif;
+}
+
+h1 {
+	text-align: left;
+	font-size: 150%;
+}
+
+h2 {
+	text-align: left;
+	font-size: 120%;
+}
+
+h3 {
+	text-align: left;
+	font-weight: 500;
+	font-size: 110%;
+}
+
+h4 {
+	text-align: left;
+	font-weight: 300;
+	font-size: 110%;
+}
+
+h5 {
+	text-align: left;
+	font-weight: 300;
+	font-size: 100%;
+}
+
+table {
+	margin: 0.5em auto 0.5em auto;
+	width: 70%;
+	/* border-style: none; */
+	border-collapse: collapse;
+	/* border-spacing: 0em; */
+}
+
+.table {
+	margin: 0.5em auto 0.5em auto;
+	width: 70%;
+}
+
+.table table {
+	margin: 0em auto 0em auto;
+	width: 100%;
+}
+
+table caption {
+	margin: 0em auto;
+	line-height: 150%;
+	font-weight: bold;
+}
+
+table summary {
+	font-style: italic;
+}
+
+th {
+	text-align: center;
+	font-family: arial, Verdana, lucida, helvetica, sans-serif;
+	font-weight: bold;
+	/*font-size: 10pt;*/
+}
+
+td {
+	border: 1px solid black;
+	font-family: arial, helvetica, sans-serif;
+	text-align: center;
+}
+
+tr:hover, .tr:hover {
+	background-color: #FFFFFF;
+}
+
+table.vertical th {
+	text-align: left;
+}
+
+table th.horizontal {
+	text-align: center;
+}
+
+form {
+	margin: 0em;
+}
+
+form input.text,
+form input.password,
+form input.checkbox,
+form textarea {
+	background-color: white;
+}
+
+form input.focused,
+form textarea.focused {
+	background-color: yellow;
+}
+
+fieldset {
+	border-width: 1px;
+	border-color: black;
+	border-style: solid;
+	margin: 1em 0em;
+	padding: 0.5em;
+}
+
+legend {
+	font-weight: bold;
+}
+
+label {
+	white-space: nowrap;
+}
+
+.note {
+	font-style: italic;
+	font-size: 85%;
+}
+
+.line {
+	display: block;
+}
+
+.floatleft {
+	float: left;
+
+	margin: 0em;
+	padding: 0.1em 0.5em 0.1em 0em; /* MSIE multiplies float margin 2x, have to use padding */
+}
+
+.centered {
+	text-align: center;
+}
+
+.floatright {
+	float: right;
+
+	margin: 0em;
+	padding: 0.1em 0em 0.1em 0.5em; /* MSIE multiplies float margin 2x, have to use padding */
+}

applications/packetloss/gui/data/packetloss_top.php

+<?php
+
+# Includes {{{
+
+$DIR = "../";
+require_once "${DIR}lib/expire.php";
+require_once "${DIR}lib/config.php";
+
+# }}}
+
+readfile("$config->packetloss_top");
+//$content = "";
+//$fp = fopen($config->packetloss_top, "r");
+//while (!feof($fp)) $content .= fgets($fp, 4096);
+//echo $content;
+//fclose($fp);
+
+// vim: set foldmethod=marker foldmarker=\ {{{,\ }}} foldclose= foldcolumn=0 :
+
+?>

applications/packetloss/gui/etc/packetloss.conf

+# This is a configuration file for packetloss GUI.
+
+# packetloss home
+packetloss_home = "/path/to/packetloss"
+
+# rrdtool binary
+rrdtool = "rrdtool"
+# log file
+rrdtool_error_log = "/tmp/packetloss_rrdtool_error.log"
+
+# rrds
+packetloss_rrd = "/path/to/packetloss/packetloss.rrd"
+packetcount_rrd = "/path/to/packetloss/packetloss_packets.rrd"
+
+# packetloss top file
+packetloss_top = "/path/to/packetloss/packetloss_top.csv"
+
+# enable or disable tops
+enable_packetloss_top
+#enable_appmon_top
+
+# keep as is
+output = "-"

applications/packetloss/gui/graph/packetcount.php

+<?php
+
+# Includes {{{
+
+$DIR="../";
+require_once "${DIR}lib/expire.php";
+require_once "${DIR}lib/graph.php";
+
+# }}}
+
+$allowed_args = ",predefined,start,end,width,height,upperLimit,lowerLimit,onlyGraph,title,";
+
+foreach(array_keys($_GET) as $key) {
+	if(strpos($allowed_args,",$key,") !== false) {
+		$$key = $_GET[$key];
+	}
+}
+
+//$predefinedarr = array(
+//	"default" => "default",
+//	"3hours"  => "3hours",
+//	"day"     => "day",
+//	"week"    => "week",
+//	"month"   => "month",
+//	"year"    => "year"
+//);
+//$predefined = $predefinedarr[$predefined]; // filter values
+
+if($predefined != "") $graph = new Graph("packetcount", $predefined, "", "", $width, $height);
+else $graph = new Graph("packetcount", "", $start, $end, $width, $height, $title);
+
+//$graph->dry_run();
+$graph->flush();
+
+// vim: set foldmethod=marker foldmarker=\ {{{,\ }}} foldclose= foldcolumn=0 :
+
+?>

applications/packetloss/gui/graph/packetloss.php

+<?php
+
+# Includes {{{
+
+$DIR="../";
+require_once "${DIR}lib/expire.php";
+require_once "${DIR}lib/graph.php";
+
+# }}}
+
+$allowed_args = ",predefined,start,end,width,height,upperLimit,lowerLimit,onlyGraph,title,";
+
+foreach(array_keys($_GET) as $key) {
+	if(strpos($allowed_args,",$key,") !== false) {
+		$$key = $_GET[$key];
+	}
+}
+
+//$predefinedarr = array(
+//	"default" => "default",
+//	"3hours"  => "3hours",
+//	"day"     => "day",
+//	"week"    => "week",
+//	"month"   => "month",
+//	"year"    => "year"
+//);
+//$predefined = $predefinedarr[$predefined]; // filter values
+
+if($predefined != "") $graph = new Graph("packetloss", $predefined, "", "", $width, $height);
+else $graph = new Graph("packetloss", "", $start, $end, $width, $height, $title);
+
+//$graph->dry_run();
+$graph->flush();
+
+// vim: set foldmethod=marker foldmarker=\ {{{,\ }}} foldclose= foldcolumn=0 :
+
+?>

applications/packetloss/gui/js/ajax.js

+/*
+ * File name: ajax.js
+ * Date:      2007/09/20 08:07
+ * Author:    Ales Friedl <ales.friedl@email.cz>
+ *
+ */
+
+// Request {{{
+
+Request = new Function();
+
+Request.prototype.request = function(url, params, rhandler) {
+	this.url = url;
+	// when GET, append parameters to URL
+	if (Ajax.options.method == "get" && params) {
+		var paramstr = "";
+		for (var param in params) {
+			paramstr += (paramstr == "" ? "" : "&") + param + "=" + params[param];
+		}
+		this.url += (this.url.indexOf('?') > -1 ? '&' : '?') + paramstr;
+	}
+		
+	try {
+		this.connection = Ajax.getConnection();
+		Ajax.openConnection(this.connection, this.url);
+		this.connection.onreadystatechange = this.onStateChange_closure(rhandler);
+		this.body = Ajax.getBody();
+		this.connection.send(this.body);
+	}
+	catch (e) {
+		//alert(e);
+		window.status = e;
+	}
+}
+
+Request.prototype.onStateChange_closure = function(rhandler) {
+	var request = this;
+	var rhandler = rhandler;
+	return function() {
+		if(Ajax.states[request.connection.readyState] == "Complete") {
+			if (!request.connection.status || (request.connection.status >= 200 && request.connection.status < 300)) {
+				rhandler(request);
+			}
+			else //alert("Ajax Request Error: " + request.connection.status);
+			window.status="Ajax Request Error: " + request.connection.status;
+		}
+  }
+}
+
+// }}}
+
+// Object Literal Ajax {{{
+
+Ajax = {
+
+	author: "Aleš Friedl",
+	version: "2.0",
+
+	exists: false,
+
+	autorun: true,
+
+	init: function() {
+		if(Ajax.exists) return false;
+		Ajax.exists = true;
+		if(Ajax.autorun) Ajax.start();
+	},
+
+	start: function() {
+	},
+
+	getConnection: function() {
+		try {
+			return new XMLHttpRequest()
+		} catch(e) {}
+		try {
+			return new ActiveXObject("Msxml2.XMLHTTP")
+		} catch(e) {}
+		try {
+			return new ActiveXObject("Microsoft.XMLHTTP")
+		} catch(e) {}
+		return false;
+	},
+
+	openConnection: function(connection, url) {
+		connection.open(Ajax.options.method.toUpperCase(), url, Ajax.options.asynchronous);
+		Ajax.setRequestsHeaders(connection);
+	},
+
+	setRequestsHeaders: function(connection) {
+    for (var header in Ajax.requestsHeaders) {
+			connection.setRequestHeader(header, Ajax.requestHeaders[header]);
+		}
+	},
+
+	getBody: function() {
+		return (Ajax.method == "post" ? Ajax.params : null);
+	},
+
+	states: ["Uninitialized", "Loading", "Loaded", "Interactive", "Complete"],
+
+	options: {
+		method: "get",
+		asynchronous: true
+	},
+
+	headers: {
+		contentType: "application/x-www-form-urlencoded",
+		encoding: "UTF-8"
+	},
+
+	requestHeaders: {
+		"X-Requested-With": "XMLHttpRequest",
+		"Accept": "text/javascript, text/html, application/xml, text/xml, */*",
+		"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
+	}
+}
+
+// }}}
+
+window_onDOMContentLoaded_add(Ajax.init);
+
+// vim:foldmethod=marker:foldmarker=\ {{{,\ }}}:foldclose=:foldcolumn=0

applications/packetloss/gui/js/dom.js

+/* 
+ * Filename: dom.js
+ * Author:   Aleš Friedl <ales.friedl@email.cz>
+ *
+ */
+
+document.createHTMLElement = function(name, attrarr) {	
+//	if (document.createElementNS) {
+//		var elem = document.createElementNS("http://www.w3.org/1999/xhtml", name);
+//		var useNS = elem.setAttributeNS; // Opera
+//	}
+//	else {
+		var elem = document.createElement(name);
+		var useNS = false;
+//	}
+	if (typeof attrarr != "undefined") {
+		for (var i in attrarr) {
+			switch (i) {
+				case "text": elem.appendChild(document.createTextNode(attrarr[i])); break;
+				case "class": elem.className = attrarr[i]; break;
+				case "style":
+					if(useNS) {
+						elem.setAttributeNS("http://www.w3.org/1999/xhtml", i, attrarr[i]);
+					}
+					else {
+						elem.setAttribute(i, attrarr[i]);
+					}
+					//elem.style.setAttribute(i,attrarr[i]); // Redmond
+					elem.style.cssText = attrarr[i]; // Redmond
+					break;
+				case "id":
+				default: 
+					if(useNS) {
+						elem.setAttributeNS("http://www.w3.org/1999/xhtml", i, "");
+					}
+					else {
+						elem.setAttribute(i, "");
+					}
+					elem[i] = attrarr[i]; // Opera
+			}
+		}
+	}
+	return elem;	
+}
+
+// vim: set foldmethod=marker foldmarker=\ {{{,\ }}} foldclose= foldcolumn=0 :

applications/packetloss/gui/js/misc.js

+/* 
+ * Filename: misc.js
+ * Author:   Aleš Friedl <ales.friedl@email.cz>
+ *
+ */
+
+function window_onload_add(f) {
+	if (!window.addEventListener && !window.attachEvent) return false;
+	if (window.addEventListener) window.addEventListener("load", f, false); // W3C
+	else window.attachEvent("onload", f); // Redmond
+	return true;
+}
+
+function window_onDOMContentLoaded_add(f) {
+	if (document.addEventListener) {
+	    document.addEventListener("DOMContentLoaded", f, false);
+	}
+	window_onload_add(f); // Redmond
+}
+
+// MSIE only?
+function window_onresize_add(f) {
+	if (!window.addEventListener && !window.attachEvent) return false;
+	if (window.addEventListener) window.addEventListener("resize", f, false); // W3C
+	else window.attachEvent("onresize", f); // Redmond
+	return true;
+}
+
+monthNumberToLongName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
+
+// vim: set foldmethod=marker foldmarker=\ {{{,\ }}} foldclose= foldcolumn=0 :

applications/packetloss/gui/js/mouse.js

+/* 
+ * Filename: mouse.js
+ * Date:     2007/01/25 18:43
+ * Author:   Aleš Friedl <ales.friedl@email.cz>
+ *
+ */
+
+// Object Literal mouse {{{
+
+var mouse = {
+
+	author: "Aleš Friedl",
+	version: "0.2",
+
+	exists: false,
+
+	autorun: true,
+
+	MX: 0,
+	MY: 0,
+	seeX: 800,
+	seeY: 600,
+
+	init: function() {
+		if(mouse.exists) return false;
+		mouse.exists = true;
+		if(mouse.autorun) mouse.start();
+	},
+	
+	start: function() {
+		document.onmousemove = mouse.mousemove;
+		//if(document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
+	},
+	
+	stop: function() {
+		document.onmousemove = null
+		//if(document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
+	
+	},
+	
+	mousemove: function(e) {
+		if(mouse.exists) {
+			if(e) {
+				mouse.MX = e.pageX
+				mouse.MY = e.pageY
+			}
+			else {
+				mouse.MX = window.event.clientX + (document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft)
+				mouse.MY = window.event.clientY + (document.documentElement?document.documentElement.scrollTop:document.body.scrollTop)
+			}
+	
+			if(window.innerWidth) {
+				mouse.seeX = window.innerWidth + window.pageXOffset - 22;
+				mouse.seeY = window.innerHeight + window.pageYOffset;
+			}
+			else {
+				mouse.seeX = document.body.offsetWidth + (document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft - 22);
+				mouse.seeY = document.body.offsetHeight + (document.documentElement?document.documentElement.scrollTop:document.body.scrollTop);
+			}
+	
+			//if(mirage) mirage.show();
+			//window.status = "seeX: "+mouse.seeX+" seeY: "+mouse.seeY+" MX: "+mouse.MX+" MY: "+mouse.MY+"";
+		}
+	}
+
+}
+
+// }}}
+
+window_onDOMContentLoaded_add(mouse.init);
+
+// vim: set foldmethod=marker foldmarker=\ {{{,\ }}} foldclose= foldcolumn=0 :

applications/packetloss/gui/js/packetlossTop.js

+/*
+ * File name: packetlossTop.js
+ * Date:      2007/09/20 08:48
+ * Author:    Ales Friedl <ales.friedl@email.cz>
+ *
+ */
+ 
+// Object Literal packetlossTop {{{
+
+var packetlossTop = {
+	
+	author: "Aleš Friedl",
+	version: "0.1",
+	
+	exists: false,
+
+	autorun: true,
+
+	topfilename: "data/packetloss_top.php",
+
+	init: function() {
+		if(packetlossTop.exists) return false;
+		packetlossTop.exists = true;
+		if(packetlossTop.autorun) packetlossTop.start();
+	},
+
+	request: null,
+	process: false,
+	loop: true,