Commit 6f69f4d8 authored by Olav Kvittem's avatar Olav Kvittem

made php-felles-based version and a javscript based templeversion for uninett bootstrap

parent 8ca64b64
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="/uninett-theme/images/UNINETT_logo.svg" alt="Uninett logo" type="image/svg+xml"></a>
</div>
<div class="navbar-department">
<div id="title-bs" class="department"></div>
</div>
<div id="top-menu-bs" class="navbar-collapse collapse">
<!-- her kommer topp-meny-->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div id="body-bs" class="col-lg-12 gutter uninett-padded uninett-color-white">
<!-- her kommer body-thing-->
</div>
</div>
</div>
<hr class="uninett-hr-divider">
<div class="row">
<div class="col-lg-12">
<div class="footer-uninett">
<div class="footer-content-uninett">
<div class="footer-logo"> <img src="/uninett-theme/images/Uninett_pil_rod.svg" alt="Uninett logo" type="image/svg+xml"></div>
<div class="footer-uninett-department">UNINETT AS &copy; 2013-2014,
<a href="mailto:nav-support@uninett.no">nav-support@uninett.no</a></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p>&nbsp;</p>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/uninett-bootstrap-theme/js/bootstrap.min.js"></script>
<script src="/uninett-bootstrap-theme/js/holder.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/uninett-theme/ico/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="/uninett-theme/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/uninett-theme/css/uninett.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/jquery-1.10.1.min.js"></script>
<?php ?>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="uninett-theme/ico/favicon.ico">
<!-- Bootstrap core CSS -->
<link href="/uninett-theme/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/uninett-theme/css/uninett.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
......@@ -3,11 +3,12 @@
<head>
<meta http-equiv="Content-Language" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- done in meny.html
<link rel="stylesheet" type="text/css" media="all" href="/uninett-theme/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="all" href="/uninett-theme/css/uninett.css" />
<!-- done in meny.html
<link rel="stylesheet" type="text/css" media="all" href="/style/mp-style.css" />
-->
<link rel="stylesheet" type="text/css" media="all" href="/style/mp-style.css" />
<style type="text/css">
</style>
......@@ -50,7 +51,7 @@ function make_select( elm, url){
<body>
<div id=meny class="navbar navbar-nav"></div>
<script>
$.get("/meny.html", function(data){
$.get("/meny-bs.html", function(data){
$('#meny').append(data);
}, 'html' );
</script>
......
mp-web-bs.php
\ No newline at end of file
iperf-x.html
\ No newline at end of file
iperf-bs.php
\ No newline at end of file
<div class="gutter uninett-padded uninett-color-lightGreen">
<h3>Throughput analysis by <span id=hostname></span>
<script>$("#hostname").html(location.hostname)</script> </h3>
<p> <span id=tr_button></span>
<script>make_select( '#tr_button', mp_url );</script>
<div id=busy><img src=/images/ajax-loader.gif> Testing - please wait for test to complete.<p></div>
</div>
<div id=traces align=left class=datadiv>
<ul> <!-- class="nav nav-tabs" -->
<li><a href="#graf"><span title='Graph for delay'>Graph</span></a></li>
<li><a href="#tracetablecontainer"><span title='Tables for delays'>Table</span></a></li>
<li><a href="#about"><span title='About the program'>About</span></a></li>
</ul>
<div id=tracetablecontainer></div>
<div id=graf></div>
<div id=about>
<!-- <h2>About</h2> -->
<p>Iperf troughput analysis test from this host towards the target host.
<ul>
<li>Press the 'Iperf' button above to do the test.
<li>Host(to) field has autocompletion for Målepåler.
<li>Graphs have mouseover info, and click legend to remove curve
</ul>
<p>The service uses the <a href="http://en.wikipedia.org/wiki/Iperf">iperf program</a> for the probing, please refer to that for technical details.
<p>It works by starting iperf session from the host you are accessing towards the selected target host and waits for the results. This takes som time to do because of inherent mode of operation.
<li>You may run the iperf program manually on your own host as client og server.
<li>Iperf is available as a comman line
version and also with a more visual Java based interface.
<li> Download from http://iperf.sourceforge.net/ .
</div>
</div>
<!--
<script> $('#about').append('Screen width is: ' + screen.width); </script>
-->
<!DOCTYPE html> <html lang="en">
<head>
<?php include '../head-bs.html'?>
<script type="text/javascript" src="/js/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/Highcharts/js/highcharts.js"></script>
<!-- <script type="text/javascript" src=Highcharts/js/modules/exporting.js></script> -->
<!-- <script type="text/javascript" data-main="main" src="/js/require.js"></script> -->
<link rel="stylesheet" type="text/css" media="all" href="/style/mp-style.css" />
<style type="text/css" title="currentStyle">
@import "/js/jquery-ui-1.10.3/themes/base/jquery-ui.css";
@import "/js/demo_page.css";
@import "/js/jquery.dataTables_themeroller.css";
</style>
<script type="text/javascript" src=iperf-x.js> </script>
</head>
<body>
<?php include '../body-bs.html'?>
<script>
$("#title-bs").html('Iperf througput'); // title
$('#top-menu-bs').load("/top-menu-bs.html");
$('#body-bs').load("iperf-body.html", // main body content
function(responseText, textStatus, XMLHttpRequest){
$("#busy").hide();
// $("#traces").hide();
$("#traces").tabs();
$("#traces").tabs({disabled: [0, 1], active:2});
});
</script>
</body></html>
......@@ -59,28 +59,39 @@ function iperf(host, nobs, interval){
if (interval > nobs) interval=nobs;
if ( ! host) host="";
var html='<table cellpadding="0" cellspacing="0" border="0" class="display" id="tracetable">';
html+='<caption>Bandwidth report at ' + new Date().toLocaleTimeString() + '</caption>';
var title=true;
$("#busy").show();
var url='iperf-x.pl?host=' + host + '&nobs=' + nobs + '&interval=' + interval;
console.log(url);
var bytes=[], thru=[];
x_name=[document.location.host];
var title='Bandwidth report to ' + host + ' at ' + new Date().toLocaleTimeString();
// var UWAP = require("/_/js/require.js");
var request = $.ajax( { url: url, dataType: 'json',
var request = $.ajax( { url: url, dataType: 'json', timeout: (nobs+2)*1000, // in ms need +2 sec for iperf
headers: { "X_TOKEN": "virre-virre-vapp" } } );
request.fail( function( jqXHR, status, error){
alert('Iperf failed from '+ url + ' : ' + status + ', ' + error );
$("#tracetablecontainer").prepend( '<h3>'+title + ': ' + status + '/' + error +'</h3>'); // error mess
$('#traces').tabs( "enable", 1);
$('#traces').tabs({ active:1});
$("#busy").hide();
});
request.done( function( mtr_rows){
// UWAP.data.get( url, {"handler": "iperf"}, function(data) {
if (mtr_rows.length == 1){
$("#tracetablecontainer").html = mtr_rows[0]; // error message
$("#busy").hide();
$('#traces').tabs( "enable", 0);
$('#traces').tabs( "enable", 1);
if (mtr_rows.length == 0){
$("#tracetablecontainer").prepend( '<h3>'+title + ': No response</h3>')
$('#traces').tabs({ active:1});
} else if (mtr_rows.length == 1){
$("#tracetablecontainer").prepend( '<h3>'+title + ': ' + mtr_rows[0] +'</h3>'); // error message
$('#traces').tabs({ active:1});
} else {
var html='<table cellpadding="0" cellspacing="0" border="0" class="display" id="tracetable">';
html+='<caption>'+ title + '</caption>';
html += '<thead><th>[ID]<th>Interval<th>Transfer<th>Bandwidth</thead><tbody>';
var xtime=0.0;
$.each(mtr_rows, function(tr) {
......@@ -104,7 +115,6 @@ function iperf(host, nobs, interval){
$("#tracetablecontainer").prepend(html + '<p> <br><hr>');
$('#tracetable').dataTable( { "bPaginate": false, "bAutoWidth": false, "bFilter": false,
"oLanguage": { "sSearch": "Filter lines:" } });
$("#busy").hide();
// var series= [{name:'test', data: [2,4,8,16,25,36,49,64,81]}];
var series= [{ name: 'Bandwidth', data: thru, type: 'line'},
{name: 'Average', data: [ [0, thru_avg[1]], thru_avg]}
......@@ -112,8 +122,6 @@ function iperf(host, nobs, interval){
];
tegn_graf('graf', 'Bandwidth graph', 'To ' + $('#tr_host').val() + ' at ' + new Date().toLocaleTimeString(), series, '', graf_no++,
$('#tracetablecontainer').width());
$('#traces').tabs( "enable", 0);
$('#traces').tabs( "enable", 1);
$('#traces').tabs({ active:0});
// $('#traces').show();
}
......
var mp_url="https://kind.uninett.no/autoregister/utstyr_mp.json";
var graf_no=0;
var x_name=[]; // the name of hops in tooltip
function debug_log ( msg){
if(typeof(console) === 'undefined') { /* ie < 9 adaption */
if ( debugging){
alert( msg );
}
} else {
console.log( msg );
}
}
//--------------------------------------------------------------------------------
function make_table(mtr_rows){
}
//--------------------------------------------------------------------------------
//
function iperf(host, nobs, interval){
if ( ! nobs ) nobs=10;
if (nobs > 100) {
nobs=100;
alert ('Max number of seconds allowed for test is 100');
}
if (interval > nobs) interval=nobs;
if ( ! host) host="";
var title=true;
$("#busy").show();
var url='iperf-x.pl?host=' + host + '&nobs=' + nobs + '&interval=' + interval;
console.log(url);
var bytes=[], thru=[];
x_name=[document.location.host];
var title='Bandwidth report to ' + host + ' at ' + new Date().toLocaleTimeString();
// var UWAP = require("/_/js/require.js");
var request = $.ajax( { url: url, dataType: 'json', timeout: (nobs+2)*1000, // in ms need +2 sec for iperf
headers: { "X_TOKEN": "virre-virre-vapp" } } );
request.fail( function( jqXHR, status, error){
$("#tracetablecontainer").prepend( '<h3>'+title + ': ' + status + '/' + error +'</h3>'); // error mess
$('#traces').tabs( "enable", 1);
$('#traces').tabs({ active:1});
$("#busy").hide();
});
request.done( function( mtr_rows){
// UWAP.data.get( url, {"handler": "iperf"}, function(data) {
$("#busy").hide();
$('#traces').tabs( "enable", 0);
$('#traces').tabs( "enable", 1);
if (mtr_rows.length == 0){
$("#tracetablecontainer").prepend( '<h3>'+title + ': No response</h3>')
$('#traces').tabs({ active:1});
} else if (mtr_rows.length == 1){
$("#tracetablecontainer").prepend( '<h3>'+title + ': ' + mtr_rows[0] +'</h3>'); // error message
$('#traces').tabs({ active:1});
} else {
var html='<table cellpadding="0" cellspacing="0" border="0" class="display" id="tracetable">';
html+='<caption>'+ title + '</caption>';
html += '<thead><th>[ID]<th>Interval<th>Transfer<th>Bandwidth</thead><tbody>';
var xtime=0.0;
$.each(mtr_rows, function(tr) {
if ( mtr_rows[tr].length === 7 && ! isNaN(mtr_rows[tr][5]) ){ // is a data row
html += '<tr><td>' + mtr_rows[tr][0]
+ '<td>' + mtr_rows[tr][1]+ ' ' + mtr_rows[tr][2]
+ '<td>' + mtr_rows[tr][3]+ ' ' + mtr_rows[tr][4]
+ '<td>' + mtr_rows[tr][5]+ ' ' + mtr_rows[tr][6]
+ "\n";
var inter = mtr_rows[tr][1]; // like 0.5-1.0 sec
xtime= parseFloat(inter.match(/[\d\.]+/g )[1] );
bytes.push( [ xtime, parseInt( mtr_rows[tr][3]) ] );
thru.push( [ xtime, parseInt( mtr_rows[tr][5]) ] );
}
});
thru_avg=thru.pop();
bytes_avg=bytes.pop() / bytes.length;
html+= '</tbody></table><p> ';
console.log(html);
$("#tracetablecontainer").prepend(html + '<p> <br><hr>');
$('#tracetable').dataTable( { "bPaginate": false, "bAutoWidth": false, "bFilter": false,
"oLanguage": { "sSearch": "Filter lines:" } });
// var series= [{name:'test', data: [2,4,8,16,25,36,49,64,81]}];
var series= [{ name: 'Bandwidth', data: thru, type: 'line'},
{name: 'Average', data: [ [0, thru_avg[1]], thru_avg]}
/* { name: 'Data', data: bytes, type: 'line'} */
];
tegn_graf('graf', 'Bandwidth graph', 'To ' + $('#tr_host').val() + ' at ' + new Date().toLocaleTimeString(), series, '', graf_no++,
$('#tracetablecontainer').width());
$('#traces').tabs({ active:0});
// $('#traces').show();
}
});
// request.fail(function( jqXHR, status, error){
// alert( status+error+ ' for url :' + url);
// });
}
//------------------------------------------------------------------------------
//
function make_select( elm, url){
// var html='<button id=iperf onclick="iperf( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_size\').val(), $(\'#tr_interval\').val() )">Trace route</button> to ';
// commented code is to produce a select_menu rather than jquery ui autocomplete
// html+= '<form name="iperf_form" id="iperf_form">';
// html+= '<select name="tr_opt" id="tr_opt">';
// html+= '<option value="">My host</option>';
var html='<form name="iperf_form" id="iperf_form"';
html+= 'action="javascript:iperf( $(\'#tr_host\').val(), $(\'#tr_times\').val(), $(\'#tr_interval\').val() )">';
html+='<input class="btn btn-primary btn-lg" type="submit" value="Test" class=button/> to ';
html+='<input id=tr_host value="" placeholder="my host" title="Automatisk utfylling av målepålenavn"></input>';
html+=' for <input id=tr_times value=10 style="width:3em;text-align:right"> seconds</input>';
// html+=', using <input id=tr_size value=64 style="width:3em;text-align:right"> bytes packets</input>';
html+=', report every <input id=tr_interval value=1 style="width:3em;text-align:right"> seconds.';
html+='</form>';
$(elm).html(html);
var items=[];
var request=$.ajax( {url: url, type: 'GET', dataType: 'json', crossDomain: true } );
request.done( function( mps){
// console.log(mps);
$.each(mps, function(mp) {
items.push( mps[mp].navn);
// html+='<option value="' + mps[mp].navn + '">' + mps[mp].navn + '</option>';
// + mps[mp].nettinstallasjon + ': '
});
// html+='</select>';
// $(elm).html(html+'</select></form>');
$( "#tr_host" ).autocomplete({ source: items });
});
request.fail( function( jqXHR, status, error){
console.log('Listing beacons faild from '+ url + ' : ' + status + ', ' + error);
});
/* var rq=$.JSONget(url, function(data){console.log(data)});
rq.fail( function( jqXHR, error){
console.log(error+ url);
});
*/
}
//------------------------------------------------------------------------------
//
function tegn_graf( div, tittel, subtittel, tider, leg_band, grafno, width ){
var divid=div+(grafno);
if ( $('#' + divid).length <= null ){
$('#'+div).prepend('<div id=' + divid + '></div><p> <hr>');
// debug_log('div created: ' + divid );
}
// $.highcharts({
// $('#graf').highcharts({
// $('#graf'+grafno).highcharts({
var grafen = new Highcharts.Chart({
chart: {
renderTo : divid,
zoomType: 'xy',
width: width
},
title: {
text: tittel
},
subtitle: {
text: subtittel
},
xAxis: {
title : {text: 'Seconds'},
minorTickInterval : 1
// plotBands: leg_band
},
yAxis: [
{ labels: {format: '{value}Mbit/s'}, // min:0,
title: { text: 'Bandwidth'}, minorTickInterval : 'auto',
plotLines: [{ value: 0, width: 2, color: '#808080' }]
},
/* { labels: {format: '{value}MByte'}, min:0,
title: { text: 'Data'}, minorTickInterval : 'auto',
opposite: true
} */
],
tooltip: { formatter: tooltip_pc,
shared: false},
legend: { // title:{ text: 'Parameters',itemStyle: {fontSize: '18px'} },
layout: 'vertical',
align: 'middle',
verticalAlign: 'middle',
x: 70, y:-100,
borderWidth: 0,
itemStyle: {
// color: '#000000',
// fontWeight: 'bold',
paddingBottom: '2px',
fontSize: '14px'
}
},
plotOptions: { series: {marker: { enabled: true, states: { hover: { enabled: true}}}}},
series: tider
});
$('#'+divid).show();
} // of tegn_graf
//--------------------------------------------------------------------------------
function tooltip_ms(){
var s= '<b>' + x_name[this.x] + '</b>';
$.each( this.points, function(i, point){
var unit ='ms';
if ( point.series.name == 'Loss') {unit='%'};
s += ' <br>' + point.series.name + ': ' + point.y + unit;
});
return s;
}
function tooltip_pc(){
var unit ='Mbit/s';
if ( this.series.name == "Loss") {unit='%'};
return '<b>' + x_name[0] + '</b>' + ' <br>' + this.series.name + ': ' + this.y + unit;
}
//--------------------------------------------------------------------------------
$(document).ready( function(){
$("#busy").hide();
// $("#traces").hide();
$("#traces").tabs({disabled: [0, 1], active:2});
});
<?php
$mal_kontaktadresse="nav-drift@uninett.no";
$mal_overskrift="Målepåle";
$mal_tegnsett="UTF-8";
include "../php-felles/uninetttopp.php3";
?>
<link rel="shortcut icon" href="uninett-theme/ico/favicon.ico">
<script type="text/javascript" src="/js/jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/Highcharts/js/highcharts.js"></script>
<!-- <script type="text/javascript" src=Highcharts/js/modules/exporting.js></script> -->
<!-- <script type="text/javascript" data-main="main" src="/js/require.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" media="all" href="/style/mp-style.css" /> -->
<style type="text/css" title="currentStyle">
@import "/js/jquery-ui-1.10.3/themes/base/jquery-ui.css";
@import "/js/demo_page.css";
@import "/js/jquery.dataTables_themeroller.css";
/* #tracetable, #tracetablecontainer, #tracetable_filter, #about, #traces, #graf, #graf1, h1, h2, h3, .ui-tabs, .highcharts-container { float: left } */
.ui-tabs { float: left }
/* #traces { width: 800px} */
#tracetable td { text-align: right}
</style>
<script>
$('#top-menu').load("/top-menu-bs.html");
</script>
<script type="text/javascript">
var mp_url="https://kind.uninett.no/autoregister/utstyr_mp.json";
var graf_no=0;
var x_name=[]; // the name of hops in tooltip
function debug_log ( msg){
if(typeof(console) === 'undefined') { /* ie < 9 adaption */
if ( debugging){
alert( msg );
}
} else {
console.log( msg );
}
}
//--------------------------------------------------------------------------------
function make_table(mtr_rows){
}
//--------------------------------------------------------------------------------
//
function iperf(host, nobs, interval){
if ( ! nobs ) nobs=10;
if (nobs > 100) {
nobs=100;
alert ('Max number of seconds allowed for test is 100');
}
if (interval > nobs) interval=nobs;
if ( ! host) host="";
var title=true;
$("#busy").show();
var url='iperf-x.pl?host=' + host + '&nobs=' + nobs + '&interval=' + interval;
console.log(url);
var bytes=[], thru=[];
x_name=[document.location.host];
var title='Bandwidth report to ' + host + ' at ' + new Date().toLocaleTimeString();
// var UWAP = require("/_/js/require.js");
var request = $.ajax( { url: url, dataType: 'json', timeout: (nobs+2)*1000, // in ms need +2 sec for iperf
headers: { "X_TOKEN": "virre-virre-vapp" } } );
request.fail( function( jqXHR, status, error){
$("#tracetablecontainer").prepend( '<h3>'+title + ': ' + status + '/' + error +'</h3>'); // error mess
$('#traces').tabs( "enable", 1);
$('#traces').tabs({ active:1});
$("#busy").hide();
});
request.done( function( mtr_rows){
// UWAP.data.get( url, {"handler": "iperf"}, function(data) {
$("#busy").hide();
$('#traces').tabs( "enable", 0);
$('#traces').tabs( "enable", 1);
if (mtr_rows.length == 0){