Commit fe08dde1 authored by 's avatar
Browse files

Added new GUI (PHP, AJAX).


git-svn-id: file:///home/svn/mapi/trunk@1335 8d5bb341-7cf1-0310-8cf6-ba355fef3186
parent 712da03a
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
#define CGI_FILENAME BASENAME".cgi" #define CGI_FILENAME BASENAME".cgi"
#define CGI_PACKETCOUNT_FILENAME "packetcount.cgi" #define CGI_PACKETCOUNT_FILENAME "packetcount.cgi"
#define TOP_FILENAME BASENAME"_top.html" // right frame #define TOP_FILENAME BASENAME"_top.html" // right frame
#define TOP_FILENAME_CSV BASENAME"_top.csv"
static char cgi_head[] = "\ static char cgi_head[] = "\
#!/usr/bin/rrdcgi\n\ #!/usr/bin/rrdcgi\n\
......
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 */
}
<?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 :
?>
# 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 = "-"
<?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 :
?>
<?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 :
?>
<?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>
<div class="substep">
<h3>Time type:</h3>
<?php
$name = $form["time_type"]->name;