Commit bef50937 authored by Otto Jonassen Wittner's avatar Otto Jonassen Wittner
Browse files

Merge branch 'master' of scm.uninett.no:iou/microdep

parents 9f2be06b c0fb5d4a
Pipeline #50355 passed with stages
in 57 seconds
......@@ -21,11 +21,12 @@ die $usage if !$index;
open LIST, "<$list" || die "Could not open $list : $!\n";
while(<LIST>){
next if /\s*#/; # comment
($name, $uid, $dns, $ip, $port, $crude_port)=split;
($name, $uid, $dns, $ip, $port, $crude_port, $ssh_port, $max_hop)=split;
$ip{$name}=$ip;
$dns{$name}=$dns;
$port{$name}=$port;
$crude_port{$name}=$crude_port if $crude_port;
$max_hop{$name}= $max_hop || $max_hops_default;
}
if ($target && ! $port{$target} ){
$port{$target} = $default_port;
......@@ -112,7 +113,7 @@ foreach $name ( keys %port){
printf $start "index=%s\n", $index ;
my $crude_port= $crude_port{$name} || $port{$name} || $default_port;
printf $start "crude_port=%s\n", $crude_port;
printf $start "max_hops=%s\n", $max_hops;
printf $start "max_hops=%s\n", $max_hop{$name};
# printf $start "%s", $startcfg;
close $start;
}
......
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/uninett-bootstrap-theme/css/bootstrap.min.css">
<!-- Custom styles for this template -->
......@@ -9,13 +9,12 @@
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/datatables.min.css"/>
<script type="text/javascript" language="javascript" src="js/datatables.min.js"></script>
<script type="text/javascript" src="/uninett-bootstrap-theme/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/uninett-bootstrap-theme/js/holder.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<!-- empty meta method in autohandler -->
......@@ -49,10 +48,13 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.2.1/leaflet.contextmenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.2.1/leaflet.contextmenu.min.js"></script>
<script src="./js/leaflet.curve.js"></script>
<script src="./js/L.LatLng.UTM.js"></script>
<script src="./js/L.LatLng.UTM.js"></script>
<!-- <script src="./js/latlon-spherical.js"></script> -->
<script src="./js/stats.js"></script>
<script src="js/sorttable.js"></script>
<script src="./js/stats.js"></script>
<script src="js/sorttable.js"></script>
<script src="graph.js"></script>
<style type="text/css">
#mapid { height: 900px; z-index: 1;}
#midding {width:600px}
......@@ -74,10 +76,11 @@
}
.knapp, select, td, th { font-size:x-large; }
table td { padding:5px; }
.knapp { line-height: 1.3em; }
th {
cursor: pointer;
}
}
caption { font-size: x-large; font-weight: bold; }
</style>
</head>
......@@ -87,7 +90,7 @@
<!--
<button class=knapp id="draw">Connections</button>
-->
<select id=network title='Measurement network'>
<select id=network class=knapp title='Measurement network'>
<option value=dragonlab>Dragonlab</option>
<option value=uninett>Uninett</option>
</select>
......@@ -98,8 +101,10 @@
<option value=routesum>Route summary</option>
<option value=routeerr>Route errors</option>
</select>
<select id=prop_select title='Measurement variable'></select>
<select id=stats_type title='Statistics type'>
<select id=prop_select class=knapp title='Measurement variable'></select>
<select id=stats_type class=knapp title='Statistics type'>
<option value="99.0">99%</option>
<option value="95.0">95%</option>
<option value="50.0">50%</option>
......@@ -109,7 +114,7 @@
<option value=max>Maximum</option> -->
</select>
<select id=period title='Measurement period'>
<select class=knapp id=period title='Measurement period'>
<option value=1>Hour</option>
<option value=24 selected="selected">Day</option>
<option value=168>Week</option>
......@@ -125,15 +130,6 @@
<button class=knapp id=search>Search</button>
-->
<input class=knapp type="search" id="search_input" size=5em placeholder=search title='Type to select by link names'>
<!--
<button class=knapp id=check title='See if links/flows are missing or asymmetric'>Check links</button>
-->
<select id=check title='Popup reports'>
<option value=choose>Report></option>
<option value=missing title='Missing opposite links'>Missing</option>
<option value=asymmetry title='Asymmetry in selected variable'>Asymmetry</option>
<option value=summary title='Table of alle variables'>Summary</option>
</select>
<!---->
<span class=knapp id=refs></span>
<button class=knapp id=live title="Refresh display every minute">Autorefresh</button>
......@@ -145,6 +141,16 @@
<main id=tabs>
<ul>
<li><a href="#mapid">Map</a>
<li>
<select class=knapp id=check title='Reports for current parameter'>
<option value=choose>+</option>
<!-- <option value=curve title='Table of alle variables'>Line curve</option> -->
<option value=heatmap title='Table of alle variables'>Heatmap</option>
<option value=missing title='Missing opposite links'>Missing</option>
<option value=asymmetry title='Asymmetry in selected variable'>Asymmetry</option>
<option value=summary title='Table of alle variables'>Summary</option>
</select>
</li>
<!-- <li><a href="#report">Report</a> -->
</ul>
<div id="mapid"></div>
......@@ -158,13 +164,15 @@
<div id=missing></div>
*) The positons of sites are a guess and not official.
<div id=dialog>testing dialog popup</div>
<!-- <div id=dialog>testing dialog popup</div> -->
<script type="module">
import LatLon from "./js/latlon-spherical.js";
var conffile=[]; //Config file loaded initially
var conffile=[]; //Config file loaded initially
var parms={};
var start, end; // startend time for current period
var point_distance_min = 50; // meters between
var point_distance_stretch = 0.001; // delta degrees
......@@ -384,8 +392,8 @@ function update_url(parameter, value){
"property=" + $("#prop_select").val(),
"date=" + $("#datepicker").val(),
"period=" + $("#period").val() ];
if ( etype === "jitter" && $("stats_type").val() )
pars.push( "stats=" + $("stats_type").val() );
if ( etype === "jitter" && $("#stats_type").val() )
pars.push( "stats=" + $("#stats_type").val() );
if ( parameter )
pars.push( parameter + "=" + value );
url = urlBase+'?'+pars.join('&');
......@@ -624,26 +632,25 @@ function only_links_by_color(color){
function generate_colors(n, rgb){
var colors=[], i, c;
var delta=255/n/2;
var delta=250/n/2;
for (i=0; i<n; i++){
var col='#';
var cols=[];
for (c=0; c < rgb.length; c++){
// colors[i][c] = rgb[c] * i * delta;
var val= 128 + Math.floor( rgb[c] * (i+1) * delta );
var val= 100 + Math.floor( rgb[c] * (n-i-1) * delta );
col += ('00' + val.toString(16).toUpperCase() ).slice(-2);
cols[c]=val;
}
colors[i]=col;
//colors[i]=rgb( cols[0], cols[1], cols[2] );
}
colors=[ "#80d982", "#e2e404", "#d98182"];
// colors=["#FFCCCC","#FFE5CC","#FFFFCC","#E5FFCC","#CCFFCC","#CCE5FF","#E5CCFF"];
// colors.reverse();
return colors;
}
var colors=generate_colors(5, [1,0.3,0.3]); // 5 colors in red with 50% green and blue
var colors=[];
var threshes=[]; // color thresholds for current property
function get_color_ppm( val, max){
var n=colors.length;
......@@ -711,6 +718,8 @@ function update_legend(title, threshes){
var id="legend"+i;
$("#legend" + i).click( function(e){
only_links_by_color(this.attributes.bgcolor.value);
$("#tabs").tabs("option", "active", 0);
//hide_links_by_color(this.attributes.bgcolor.value);
});
$("#legend" + i).css( "background-color", colors[i] );
......@@ -735,6 +744,9 @@ function link_popup(link){
+ '/trace/' + to_adr + '1.json' + '&to=' + link.to;
html += '\n<p><button class=knapp><a title="See the routes graph and stats in this period" target="_blank" href="' + url + '">See routes' + '</a></button>' + "\n";
url = 'microdep-curve.html?index=' + parms.net + '_jitter&from=' + link.from + '&to=' + link.to + '&event_type=jitter&property=h_ddelay&start=' + start + '&end=' + end + '&title="jitter plot"';
html += '\n<p><button class=knapp><a title="Curve over queues in this period" target="_blank" href="' + url + '">See queues</a></button>' + "\n";
// var knapp=" <button class=knapp onclick=document.open('javascript:document.documentElement.innerHTML=\"" + encodeURI(gap_list(link.from, link.to)) + "\"');>Gap list</button>";
var knapp=" <button class=knapp onclick=document.open('javascript:document.write(\"" + encodeURI(gap_list(link.from, link.to)) + "\")');>Gap list</button>";
// if( parms.debug) console.log(knapp);
......@@ -751,7 +763,7 @@ function link_popup(link){
html += '<button class=knapp><a href=' + fix_url( document.location.href, "node", link.from ) + '>' + link.from + '</a></button>';
html += ', <button class=knapp><a href=' + fix_url( document.location.href, "node", link.to ) + '>' + link.to + '</a></button>';
*/
// html+='</body>';
return html;
}
......@@ -825,7 +837,7 @@ function max( max, val){
function get_thresholds( hits, prop){
var thresh=[];
if ( thresholds[prop]){
if ( false && thresholds[prop]){
thresh=thresholds[prop];
} else {
// ends=[];
......@@ -1039,7 +1051,7 @@ function digest_aggregates(aggs, stats_type){
function draw_links(hits, prop){
// remove_links(links);
var threshes=get_thresholds(hits, prop);
threshes=get_thresholds(hits, prop);
hits.sort(sort_hits); // sort by from, to
var new_ends=[];
......@@ -1096,8 +1108,8 @@ function draw_links(hits, prop){
}
function get_topology(){
var start = new Date($("#datepicker").val() + " 00:00:00").getTime()/1000;
var end= new Date($("#datepicker").val() + " 23:59:59").getTime()/1000;
start = new Date($("#datepicker").val() + " 00:00:00").getTime()/1000;
end= new Date($("#datepicker").val() + " 23:59:59").getTime()/1000;
var network=parms.net;
var url="microdep-config.cgi?variant=mp-" + network + "&start=" + start + "&end=" + end;
$.getJSON( url,
......@@ -1175,7 +1187,7 @@ function draw_topology(topo){
}
function taint_topology( topo, prop){
var threshes=get_thresholds(topo, prop);
threshes=get_thresholds(topo, prop);
for (var i=0; i < topo.length; i++){
var link=topo[i];
......@@ -1196,7 +1208,7 @@ function taint_links( hits, prop){
var done=[];
if ( hits.length > 0){
var threshes=get_thresholds(hits, prop);
threshes=get_thresholds(hits, prop);
for (var i=0; i < hits.length; i++){
var link=hits[i];
......@@ -1506,8 +1518,10 @@ function check_ends(){
let html='';
if ( report === 'missing' ){
html= '<h3>Missing opposite end of links</h3>';
html += '<table title="Missing oposite end"><tr><th>From<th>To';
html= '<h3>Missing opposite end of links for ' + title_state() + '</h3>';
html += '<table title="Missing oposite end">';
// html+='<caption>Missing oposite end ' + title_state() + '</caption>';
html += '<tr><th>From<th>To';
missing.sort(sort_missing);
for (i=0; i< missing.length; i++){
var ft=missing[i].split(" ");
......@@ -1523,6 +1537,8 @@ function check_ends(){
// html += '<input type="text" id="' + div_id + '_input" onkeyup="filter_table(\'' + div_id + '\')" placeholder="Search for names..">';
html += '<table id=' + div_id + '_table border=1><thead title="Click to sort on column"><tr><th>From<th>To<th>from-to<th>to-from<th> Diff</thead>';
html+='<caption>Asymmetry in ' + $("#prop_select").val() + ' for ' + title_state() + '</caption>';
diff.sort( function(a,b){
if ( typeof(a.val) === "number" && typeof(b.val) === "number" )
return b.val - a.val;
......@@ -1551,6 +1567,7 @@ function report_summary(div_id){
//let html='<input type="text" id="' + div_id + '_input" onkeyup="filter_table(\'' + div_id + '\')" placeholder="Search for names..">';
let html='';
html+='<table border=1 id=' + div_id + '_table class=sortable>\n';
html+='<caption>Summary ' + title_state() + '</caption>';
var header=true;
var sel_prop= $("#prop_select").val();
......@@ -1586,11 +1603,12 @@ function report_summary(div_id){
function add_tab(title, num_tabs, html){
let divid='tab' + num_tabs;
let input_id = divid + "_input";
let table_id = divid + "_table";
$("main#tabs ul").append(
"<li><a href='#" + divid + "'>#" + num_tabs + " " + title + "</a></li>"
let new_tab=$("main#tabs ul").append(
"<li><a href='#" + divid + "'>#" + num_tabs + " " + title + "</a>"
+ '<span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>'
+"</li>"
);
$("main#tabs").append(
"<div id='" + divid + "'>#" + num_tabs + "</div>"
......@@ -1616,6 +1634,14 @@ function report_summary(div_id){
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
});
// close icon: removing the tab on click
new_tab.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
});
}
// compute decimal hour
......@@ -1742,7 +1768,6 @@ function get_connections(){
var hour=0;
var period=$("#period").val();
var start, end;
var now=new Date();
if ( refresh_active){
......@@ -1822,6 +1847,8 @@ function get_connections(){
//remove_links(links);
console.log("failed to get data from server :" + textStatus + ", " + error);
});
$("#tabs").tabs("option", "active", 0);
};
function pad(d){
......@@ -1831,6 +1858,12 @@ function hhmmss(d){
return( pad( d.getHours() ) + ":" + pad( d.getMinutes()) + ":" + pad( d.getSeconds() ) );
}
function title_state(){
let state = $("#network").val() + ', ' + $("#event_type").val()
+ ' from ' + $("#datepicker").val() + ' for ' + $("#period").val() + ' hours';
return state;
}
// initialization
......@@ -1867,6 +1900,16 @@ $(document).ready ( function(){
// Update properties according to selected measurement network variant
update_props(parms.net);
if ( parms.palette === "auto"){
colors=generate_colors(10, [0.8,0.2,0.2]); // 5 colors in red with 50% green and blue
} else if ( parms.palette === "traffic2" ) {
colors=[ "#80e982", "#80a982", "#e2e404", "#e2a404", "#d98182", "#a98182"]; // GGYYRR
} else {
colors=[ "#80d982", "#e2e404", "#d98182"]; // GYR
// colors=["#FFCCCC","#FFE5CC","#FFFFCC","#E5FFCC","#CCFFCC","#CCE5FF","#E5CCFF"];
}
$.ajaxSetup({
beforeSend:function(){
// show image here
......@@ -1972,6 +2015,7 @@ $(document).ready ( function(){
show_network(parms.net);
get_topology();
update_url();
$("#tabs").tabs("option", "active", 0);
});
// event_type parameter change
......@@ -1995,6 +2039,7 @@ $(document).ready ( function(){
get_connections();
update_url();
$("#tabs").tabs("option", "active", 0);
});
// select parameter change
......@@ -2005,6 +2050,7 @@ $(document).ready ( function(){
taint_links(summary, $("#prop_select").val() );
update_url();
$("#tabs").tabs("option", "active", 0);
});
// select parameter change
......@@ -2013,6 +2059,7 @@ $(document).ready ( function(){
summary=digest_aggregates(aggregates, $("#stats_type").val());
taint_links(summary, $("#prop_select").val() );
update_url();
$("#tabs").tabs("option", "active", 0);
});
......@@ -2027,7 +2074,7 @@ $(document).ready ( function(){
//$("#check").click( function(){check_asymmetry()} );
$("#check").change( function(){
var title = $("#check").val();
let num_tabs = $("main#tabs ul li").length + 1;
let num_tabs = $("main#tabs ul li").length ;
let tab_id = 'tab' + num_tabs;
switch(title ){
case 'missing':
......@@ -2039,8 +2086,17 @@ $(document).ready ( function(){
case 'summary':
add_tab( title, num_tabs, report_summary(tab_id) );
break;
case 'heatmap':
add_tab( title, num_tabs, 'This will be graph soon');
heatmap(tab_id, summary, $("#prop_select").val(), get_color, threshes, title_state() );
break;
case 'curve':
add_tab( title, num_tabs, 'This will be graph soon');
curve(tab_id, last_hits, $("#prop_select").val(), title_state() );
break;
}
$("#check").val('choose');
$("#tabs").tabs("option", "active", num_tabs);
});
......
......@@ -64,7 +64,7 @@ if ( $doc->{error} ){
printf "%-8s %-25s %-25s %s\n", "Time", "From", "To", "Path";
foreach $r( @{ $doc->{hits}{hits} } ){
my $src= $r->{_source};
my $time= `date -d $src->{timestamp} +%T`;
my $time= `date -d \@$src->{timestamp} +%T`;
chomp($time);
printf "%-8s %-25s %-25s %s\n", $time, $src->{from}, $src->{to}, $src->{path};
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment