Commit 63601db8 authored by Olav Kvittem's avatar Olav Kvittem
Browse files

report tabs with heatmap

parent cdf06f14
<!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;
}
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,16 +130,7 @@
<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,14 @@
<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 point_distance_min = 50; // meters between
var point_distance_stretch = 0.001; // delta degrees
......@@ -324,8 +331,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('&');
......@@ -562,26 +569,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;
......@@ -649,6 +655,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] );
......@@ -763,7 +771,7 @@ function max( max, val){
function get_thresholds( hits, prop){
var thresh=[];
if ( thresholds[prop]){
if ( false && thresholds[prop]){
thresh=thresholds[prop];
} else {
// ends=[];
......@@ -977,7 +985,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=[];
......@@ -1113,7 +1121,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];
......@@ -1134,7 +1142,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];
......@@ -1444,8 +1452,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(" ");
......@@ -1461,6 +1471,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;
......@@ -1489,6 +1501,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();
......@@ -1527,8 +1540,10 @@ function report_summary(div_id){
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>"
......@@ -1554,6 +1569,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
......@@ -1760,6 +1783,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){
......@@ -1769,6 +1794,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
......@@ -1808,6 +1839,16 @@ $(document).ready ( function(){
prop_names = prop_names_list[ $("#event_type").val() ];
make_prop_select("prop_select", prop_names );
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
......@@ -1912,6 +1953,7 @@ $(document).ready ( function(){
show_network(parms.net);
get_topology();
update_url();
$("#tabs").tabs("option", "active", 0);
});
// event_type parameter change
......@@ -1922,6 +1964,7 @@ $(document).ready ( function(){
make_prop_select("prop_select", prop_names );
get_connections();
update_url();
$("#tabs").tabs("option", "active", 0);
});
// select parameter change
......@@ -1932,6 +1975,7 @@ $(document).ready ( function(){
taint_links(summary, $("#prop_select").val() );
update_url();
$("#tabs").tabs("option", "active", 0);
});
// select parameter change
......@@ -1940,6 +1984,7 @@ $(document).ready ( function(){
summary=digest_aggregates(aggregates, $("#stats_type").val());
taint_links(summary, $("#prop_select").val() );
update_url();
$("#tabs").tabs("option", "active", 0);
});
......@@ -1954,7 +1999,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':
......@@ -1966,8 +2011,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);
});
......
Supports Markdown
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