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/index.php

+<?php
+
+# Includes {{{
+
+require_once "lib/misc.php";
+
+require_once "lib/config.php";
+require_once "lib/graph.php";
+require_once "lib/packetlossTop.php";
+
+require_once "lib/formElement.php";
+
+# }}}
+
+$packetlossTop = new packetlossTop($config->packetloss_top);
+
+# initialize form elements {{{
+
+$form = array();
+
+$form["subject"] = new FormElement( // checkbox
+	"subject",
+	$packetlossTop->hostarr,
+	array_keys($packetlossTop->hostarr)
+);
+
+$form["time_type"] = new FormElement( // radio
+	"time_type",
+	array(
+		"predefined" => "Predefined",
+		"start_time" => "User defined start time",
+		"end_time"   => "User defined end time"
+	),
+	"predefined"
+);
+
+$form["times"] = new FormElement( // checkbox
+	"times",
+	$predefinedTimes,
+	array(
+		"10_1h"
+	)
+);
+
+$form["time_length_number"]	= new FormElement( // text
+	"time_length_number",
+	"",
+	"60"
+);
+
+$form["time_length_unit"] = new FormElement( // select - option
+	"time_length_unit",
+	array(
+		"Minutes" => "Minutes",
+		"Hours"   => "Hours",
+		"Days"    => "Days",
+		"Weeks"   => "Weeks",
+		"Months"  => "Months",
+		"Years"   => "Years"
+	),
+	"Minutes"
+);
+
+$form["r1_number"]	= new FormElement( // text
+	"r1_number",
+	"",
+	"10"
+);
+
+$form["r1_unit"] = new FormElement( // select - option
+	"r1_unit",
+	array(
+		"Seconds" => "Seconds",
+		"Minutes" => "Minutes",
+		"Hours"   => "Hours",
+		"Days"    => "Days",
+		"Weeks"   => "Weeks",
+		"Months"  => "Months",
+		"Years"   => "Years"
+	),
+	"Seconds"
+);
+
+
+$form["characteristics"] = new FormElement( // checkbox
+	"characteristics",
+	array(
+		"packetloss"  => "Packet Lost Ratio",
+		"packetcount" => "Packet Loss Count"
+	),
+	array(
+		"packetloss",
+		"packetcount"
+	)
+);
+
+$form["graph_size"] = new FormElement( // radio
+	"graph_size",
+	array(
+		"small"  => "Small (300 × 100)",
+		"normal" => "Normal (400 × 200)",
+		"large"  => "Large (500 × 300)"
+	),
+	array(
+		"normal"
+	)
+);
+
+$form["action"] = new FormElement( // button
+	"action",
+	"",
+	""
+);
+
+$form["time"] = new FormElement( // select - option (more selects)
+	"time",
+	"",
+	getdate(@time())
+);
+
+#
+
+@$gmseconds = gmmktime(
+	$form["time"]->selectedvals[hours],
+	$form["time"]->selectedvals[minutes],
+	0,
+	$form["time"]->selectedvals[mon],
+	$form["time"]->selectedvals[mday],
+	$form["time"]->selectedvals[year],
+	0
+);
+
+# }}}
+
+?>
+<?php echo "<"."?xml version=\"1.0\" encoding=\"utf-8\"?".">"; ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs">
+
+	<head>
+	
+	  <meta http-equiv="content-language" content="cs" />
+	  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
+	  <meta http-equiv="content-script-type" content="text/javascript" />
+	  <meta http-equiv="content-style-type" content="text/css" />
+	  <meta http-equiv="default-style" content="Default" />
+	
+	  <meta name="author" content="" />
+	  <meta name="description" content="" />
+	  <meta name="keywords" content="" />
+	  <meta name="robots" content="index, follow" />
+	
+		<link rel="stylesheet" type="text/css" media="all" href="css/packetloss.css" title="Default" />
+	
+		<script type="text/javascript" src="js/misc.js"></script>
+		<script type="text/javascript" src="js/dom.js"></script>
+
+		<script type="text/javascript" src="js/ajax.js"></script>
+		<script type="text/javascript" src="js/packetlossTop.js"></script>
+
+		<script type="text/javascript" src="js/mouse.js"></script>
+
+		<style type="text/css">
+		/* <![CDATA[ */
+
+			body {
+				background-image: url(img/uc.jpg);
+				background-repeat: no-repeat;
+			}
+
+			div.clear {
+				clear: both
+			}
+
+			.steps {
+				clear: left;
+			}
+			.steps .step {
+				margin-top: 2em;
+				padding: 0.5em 0.5em 0.5em 0em;
+				border: 5px solid #E0E0E0;
+			}
+			.steps .step:hover {
+				/*border: 5px solid #F0F0F0;*/
+			}
+			.steps .step .substep {
+				margin-top: 1em;
+			}
+				
+			.steps .step {
+				clear: left;
+			}
+			.steps label {
+				display: block;
+				width: 100%;
+				border-bottom: 1px dashed #A0A0A0;
+			}
+			/*.steps label:hover {
+				border-bottom: 1px solid black;
+			}*/
+			.steps .tr {
+				/*	background-color: #F0F0F0; */
+				float: left;
+				width: 20em;
+				margin-right: 5em;
+			}
+			.steps .medium {
+				width: 50%;
+			}
+			.steps .wide {
+				width: 80%;
+			}
+			.steps .th {
+				/*border: 1px solid red;*/
+				float: left;
+				display: block;
+				width: 18em;
+			}
+			.steps .td {
+				float: left;
+			}
+
+			.graphs {
+				clear: left;
+				margin-top: 2em;
+				border-top: 5px solid #F0F0F0;
+			}
+			.graphs .graph {
+				float: left;
+				margin-top: 2em;
+				margin-left: 1em;
+			}
+
+			.tops {
+				clear: left;
+				margin-top: 2em;
+				border-top: 5px solid #F0F0F0;
+				color: gray;
+			}
+			.thetop {
+				margin-top: 2em;
+			}
+			.thetop th {
+				border-bottom: 1px dashed #A0A0A0;
+			}
+			.thetop td {
+				border-top: none;
+				border-right: none;
+				border-bottom: 1px dashed #A0A0A0;
+				border-left: none;
+				padding: 2px;
+				text-align: right;
+			}
+			.thetop tr.delimiter {
+				border-top: 2px solid #808080;
+			}
+			.thetop th.right {
+				text-align: right;
+			}
+
+		/* ]]> */
+		</style>
+	
+		<script type="text/javascript">
+			//<![CDATA[
+			/*
+			function packetloss_switch() {
+				var type = document.getElementById('packetloss_type').value;
+				var predefined = document.getElementById('packetloss_predefined').value;
+				var element = document.getElementById('packetloss');
+				if (type == 'packetloss')
+					element.src = 'graph/packetloss.php?predefined=' + predefined; 
+				else
+					element.src = 'graph/packetcount.php?predefined=' + predefined;
+			}
+			*/
+			//]]>
+		</script>
+	
+		<title>Packetloss – Distributed Packet Loss Measurement</title>
+	
+	</head>
+	
+	<body>
+
+<?php # Header {{{ ?>
+
+		<div class="floatright" id="logo">
+				<a href="http://www.ist-lobster.org" title="Large-scale Monitoring of Broadband Internet Infrastructures"><img src="img/lobster-logo.jpg" alt="Lobster" /></a>
+		</div>
+
+<?php # }}} ?>
+
+		<h1>Packetloss – Distributed Packet Loss Measurement</h1>
+
+<?php # Steps {{{ ?>
+
+		<div class="steps">
+		<form method="get" action="index.php">
+			<div class="step">
+			<h2>Step 1: Select monitored links:</h2>
+<?php
+	$name = $form["subject"]->name;
+	foreach($form["subject"]->elementvals as $key => $val) {
+		$checked = $form["subject"]->isChecked($key);
+		$hostname = $val["hostname"]["value"];
+echo <<<EOD
+			<div class="tr">
+				<span class="th"><label for="_$name_$key">$hostname</label></span>
+				<span class="td"><input id="_$name_$key" type="checkbox" name="${name}[]"$checked value="$key" disabled="disabled" /></span>
+			</div>\n
+EOD;
+	}
+?>
+			<div class="clear"></div>
+			</div>
+
+			<div class="step">
+			<h2>Step 2: Select time period and granularity:</h2>