Commit 1487b471 authored by Leigh B Stoller's avatar Leigh B Stoller
Browse files

At Mike's request, split out network traffic graphs into TX/RX/SUM.

parent 97c402fa
......@@ -97,10 +97,20 @@ window.ShowIdleGraphs = (function ()
var datum = {
"key" : node_id,
"area" : 0,
"arrays" : {"MAX" : []}
"arrays" : {"MAX" : {"tx" : [],
"rx" : [],
"sum" : []},
"AVG" : {"tx" : [],
"rx" : [],
"sum" : []},
}
};
// Default to MAX in initial graph.
datum["values"] = datum.arrays["MAX"];
if (Array.isArray(obj.main)) {
obj.main = {"MAX" : obj.main};
}
// Default to MAX,sum in initial graph.
datum["values"] = datum.arrays["MAX"]["sum"];
for (var mac in obj.interfaces) {
//console.info(mac, obj.interfaces[mac]);
......@@ -127,16 +137,8 @@ window.ShowIdleGraphs = (function ()
thismac = "expt";
}
/*
* Backwards compat. Flush soon.
*/
if (Array.isArray(obj.interfaces[mac])) {
obj.interfaces[mac] =
{"MAX" : obj.interfaces[mac]}
}
for (var type in obj.interfaces[mac]) {
var array = datum.arrays[type];
var maxavg = datum.arrays[type];
var values = obj.interfaces[mac][type];
//console.info(mac,type,values);
......@@ -145,43 +147,76 @@ window.ShowIdleGraphs = (function ()
//console.info("no info");
continue;
}
if (array === undefined) {
array = datum.arrays[type] = [];
if (maxavg === undefined) {
console.info("unknown type", type);
continue;
}
for (var j = 1; j < values.length; j++) {
var netdata = values[j];
var x = netdata[0] * 1000;
var y = netdata[1] + netdata[2];
var x = netdata[0] * 1000;
var rx = netdata[1];
var tx = netdata[2];
var sum = rx + tx;
/*
* If we already have a data point for
* If we already have data points for
* this index, add the new data to the
* totals.
*/
var item = array[j - 1];
if (item === undefined) {
// New data point.
item = {
var rxitem = maxavg["rx"][j - 1];
var txitem = maxavg["tx"][j - 1];
var sumitem = maxavg["sum"][j - 1];
if (rxitem === undefined) {
// New data points
rxitem = {
"x" : x,
"y" : 0,
// Samples, for AVG.
"samples" : []
};
maxavg["rx"][j - 1] = rxitem;
txitem = {
"x" : x,
"y" : 0,
// Samples, for AVG.
"samples" : []
};
maxavg["tx"][j - 1] = txitem;
sumitem = {
"x" : x,
"y" : 0,
// Samples, for AVG.
"samples" : []
};
array[j - 1] = item;
maxavg["sum"][j - 1] = sumitem;
}
if (type == "MAX") {
item.y += y;
txitem.y += tx;
rxitem.y += rx;
sumitem.y += sum;
}
else {
item.samples.push(y);
var sum = 0;
for (var k = 0; k <
item.samples.length; k++) {
sum += item.samples[k];
txitem.samples.push(tx);
rxitem.samples.push(rx);
sumitem.samples.push(sum);
var txsum = 0;
var rxsum = 0;
var ssum = 0;
var ilen = txitem.samples.length;
for (var k = 0; k < ilen; k++) {
txsum += txitem.samples[k];
rxsum += rxitem.samples[k];
ssum += sumitem.samples[k];
}
item.y = sum / item.samples.length;
txitem.y = txsum / ilen;
rxitem.y = rxsum / ilen;
sumitem.y = ssum / ilen;
}
}
}
......@@ -202,40 +237,89 @@ window.ShowIdleGraphs = (function ()
return result;
}
function CreateOneGraph(id, datums, args) {
function CreateOneGraph(id, which, datums, args) {
$(id).removeClass("hidden");
$(id + " .collapse").addClass("in");
window.nv.addGraph(function() {
var chart = window.nv.models.lineWithFocusChart();
CreateIdleChart(id + ' svg', chart, datums, args);
/*
* Look to see if we have multiple strearms (max/avg).
* If so we want to unhide the radio buttons to switch
* between them, and setup a handler to inject the alt
* data in the NVD3 chart.
*/
if (Object.keys(datums[0].arrays).length > 1) {
$(id + ' .toggles').removeClass("hidden");
$(id + ' .toggles input[type=radio][value=max]')
// Always start with max.
$(id + ' .maxavg-toggles input[type=radio][value=max]')
.prop('checked', true);
// And sum of packets for the control network.
if (which == "ctrl" || which == "expt") {
$(id + ' .txrx-toggles input[type=radio][value=sum]')
.prop('checked', true);
$(id + ' .toggles input[type=radio]').change(function() {
var which = this.value;
}
_.each(datums, function(datum) {
if (which == "max") {
datum.values = datum.arrays["MAX"];
}
else {
datum.values = datum.arrays["AVG"];
}
// Two different radios for the control traffic graph.
if (which == "ctrl" || which == "expt") {
$(id + ' .maxavg-toggles input[type=radio], ' +
id + ' .txrx-toggles input[type=radio] ')
.change(function() {
var maxavg =
$(id + ' .maxavg-toggles ' +
'input[type=radio]:checked').val();
var txrx =
$(id + ' .txrx-toggles ' +
'input[type=radio]:checked').val();
//console.info(maxavg, txrx);
_.each(datums, function(datum) {
var values;
if (maxavg == "max") {
values = datum.arrays["MAX"];
if (txrx != null) {
values = values[txrx];
}
}
else {
values = datum.arrays["AVG"];
if (txrx != null) {
values = values[txrx];
}
}
datum.values = values;
});
//console.info(datums);
d3.select(id + ' svg')
.datum(datums)
.call(chart);
});
}
else {
// Load avg and expt traffic get just max/avg.
$(id + ' .maxavg-toggles input[type=radio]')
.change(function() {
var maxavg =
$(id + ' .maxavg-toggles ' +
'input[type=radio]:checked').val();
//console.info(maxavg);
_.each(datums, function(datum) {
var values;
if (maxavg == "max") {
values = datum.arrays["MAX"];
}
else {
values = datum.arrays["AVG"];
}
if (which == "expt") {
values = values["sum"];
}
datum.values = values;
});
//console.info(datums);
d3.select(id + ' svg')
.datum(datums)
.call(chart);
});
//console.info(datums);
d3.select(id + ' svg')
.datum(datums)
.call(chart);
});
}
});
}
......@@ -296,6 +380,7 @@ window.ShowIdleGraphs = (function ()
var idledata = JSON.parse(data);
rawData[name] = idledata;
});
console.info("raw", rawData);
var load = ProcessData("load", "avg");
var ctrl = ProcessData("ctrl", "avg");
var expt = ProcessData("expt", "avg");
......@@ -313,10 +398,10 @@ window.ShowIdleGraphs = (function ()
}
if (load.length) {
CreateOneGraph(loadID, load,
CreateOneGraph(loadID, "load", load,
{"ytype" : "float",
"ylabel" : "Unix Load Average"});
$(loadID + ' .toggles').popover({
$(loadID + ' .maxavg-toggles').popover({
trigger: 'hover',
placement: 'auto',
delay : {"hide": 500, "show": 500},
......@@ -332,31 +417,44 @@ window.ShowIdleGraphs = (function ()
});
}
if (ctrl.length) {
CreateOneGraph(ctrlID, ctrl,
CreateOneGraph(ctrlID, "ctrl", ctrl,
{"ytype" : "int",
"ylabel" : "Packets Per Second"});
$(ctrlID + ' .toggles').popover({
$(ctrlID + ' .maxavg-toggles').popover({
trigger: 'hover',
placement: 'auto',
delay : {"hide": 500, "show": 500},
html: true,
content: "MAX is the maximum number of packets sent " +
content: "MAX is the maximum number of packets " +
"within the interval, while AVG is the average "+
"number of packets sent in the interval. The " +
"number of packets in the interval. The " +
"reported interval in the graph is five minutes "+
"for the most recent 24 hours, and then every "+
"hour after that. During the first 24 hours MAX "+
"and AVG will be the same since the interval is "+
"so short."
});
$(ctrlID + ' .txrx-toggles').popover({
trigger: 'hover',
placement: 'auto',
delay : {"hide": 500, "show": 500},
html: true,
content: "TX is the number of packets sent " +
"within the interval, RX is the number of packets "+
"received, and SUM is the sum of packets sent " +
"and received in the interval. The " +
"reported interval in the graph is five minutes "+
"for the most recent 24 hours, and then every "+
"hour after that."
});
}
if (expt.length) {
CreateOneGraph(exptID, expt,
CreateOneGraph(exptID, "expt", expt,
{"ytype" : "int",
"ylabel" : "Packets Per Second"});
$(exptID + ' .toggles').popover({
$(exptID + ' .maxavg-toggles').popover({
trigger: 'hover',
placement: 'auto',
delay : {"hide": 500, "show": 500},
......@@ -370,6 +468,19 @@ window.ShowIdleGraphs = (function ()
"and AVG will be the same since the interval is "+
"so short."
});
$(exptID + ' .txrx-toggles').popover({
trigger: 'hover',
placement: 'auto',
delay : {"hide": 500, "show": 500},
html: true,
content: "TX is the number of packets sent " +
"within the interval, RX is the number of packets "+
"received, and SUM is the sum of packets sent " +
"and received in the interval. The " +
"reported interval in the graph is five minutes "+
"for the most recent 24 hours, and then every "+
"hour after that."
});
}
};
if (showWait) {
......@@ -497,7 +608,6 @@ window.ShowIdleGraphs = (function ()
d3.selectAll(loadID + " svg > *").remove();
d3.selectAll(ctrlID + " svg > *").remove();
d3.selectAll(exptID + " svg > *").remove();
$('.toggles').addClass("hidden");
LoadIdleData();
});
}
......
......@@ -164,12 +164,22 @@ pre {
col-xs-12 col-xs-offset-0'>
<div class='panel panel-default hidden' id="loadavg-panel-div">
<div class="panel-heading">
<h5>
<a data-toggle="collapse" id="loadavg-toggle"
href="#loadavg-collapse"><span>Load Average Graph</span>
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
</h5>
<a data-toggle="collapse" id="loadavg-toggle"
href="#loadavg-collapse">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
<div class="maxavg-toggles pull-right"
style="margin-right: 10px;">
<label class="radio-inline">
<input type="radio" name="loadav-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="loadav-radio"
value="avg"> Avg
</label>
</div>
<h5><span>Load Average Graph</span></h5>
</div>
<div id="loadavg-collapse"
class="panel-collapse collapse">
......@@ -177,22 +187,6 @@ pre {
<!-- The col setting gives us a "relative" position div -->
<div class='col-xs-12 col-xs-offset-0'
style="padding:0px;">
<!--
So now we can use an "absolute" position to put
the radio button in the upper left of the graph
where it will not overwrite anything.
-->
<div class="hidden toggles"
style='position:absolute;left:5px;top:0px'>
<label class="radio-inline">
<input type="radio" name="loadav-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="loadav-radio"
value="avg"> Avg
</label>
</div>
<div id="loadavg-chart"
class='fixedsize-panel with-3d-shadow with-transitions'>
<svg></svg>
......@@ -208,13 +202,39 @@ pre {
col-xs-12 col-xs-offset-0'>
<div class='panel panel-default hidden' id="ctrl-traffic-panel-div">
<div class="panel-heading">
<h5>
<a data-toggle="collapse" class="traffic-toggle"
id="ctrl-traffic-toggle"
href="#ctrl-traffic-collapse"><span>Control Traffic Graph</span>
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
</h5>
<a data-toggle="collapse" class="traffic-toggle"
id="ctrl-traffic-toggle"
href="#ctrl-traffic-collapse">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
<div class="maxavg-toggles pull-right"
style="margin-right: 10px;">
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
value="avg"> Avg
</label>
</div>
<div class="txrx-toggles pull-right"
style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" name="ctrl-radio-txrx"
value="rx"> RX
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio-txrx"
value="tx"> TX
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio-txrx"
checked="checked"
value="sum"> Sum
</label>
</div>
<h5><span>Control Traffic Graph</span></h5>
</div>
<div id="ctrl-traffic-collapse"
class="panel-collapse collapse traffic-collapse">
......@@ -222,21 +242,6 @@ pre {
<!-- The col setting gives us a "relative" position div -->
<div class='col-xs-12 col-xs-offset-0'
style="padding:0px;">
<!-- So now we can use an "absolute" position to put
the radio button in the upper left of the graph
where it will not overwrite anything.
-->
<div class="hidden toggles"
style='position:absolute;left:5px;top:0px'>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
value="avg"> Avg
</label>
</div>
<div id="ctrl-traffic-chart"
class='fixedsize-panel with-3d-shadow with-transitions'>
<svg></svg>
......@@ -252,12 +257,36 @@ pre {
col-xs-12 col-xs-offset-0'>
<div class='panel panel-default hidden' id="expt-traffic-panel-div">
<div class="panel-heading">
<h5>
<a data-toggle="collapse" id="expt-traffic-toggle"
href="#expt-traffic-collapse"><span>Experiment Traffic Graph</span>
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
</h5>
<a data-toggle="collapse" id="expt-traffic-toggle"
href="#expt-traffic-collapse">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</a>
<div class="maxavg-toggles pull-right"
style="margin-right: 10px;">
<label class="radio-inline">
<input type="radio" name="expt-radio"
checked="checked" value="max"> Max</label>
<label class="radio-inline">
<input type="radio" name="expt-radio"
value="avg"> Avg</label>
</div>
<div class="txrx-toggles pull-right"
style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" name="expt-radio-txrx"
value="rx"> RX
</label>
<label class="radio-inline">
<input type="radio" name="expt-radio-txrx"
value="tx"> TX
</label>
<label class="radio-inline">
<input type="radio" name="expt-radio-txrx"
checked="checked"
value="sum"> Sum
</label>
</div>
<h5><span>Experiment Traffic Graph</span></h5>
</div>
<div id="expt-traffic-collapse"
class="panel-collapse collapse">
......@@ -265,19 +294,6 @@ pre {
<!-- The col setting gives us a "relative" position div -->
<div class='col-xs-12 col-xs-offset-0'
style="padding:0px;">
<!-- So now we can use an "absolute" position to put
the radio button in the upper left of the graph
where it will not overwrite anything.
-->
<div class="hidden toggles"
style='position:absolute;left:5px;top:0px'>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
checked="checked" value="max"> Max</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
value="avg"> Avg</label>
</div>
<div id="expt-traffic-chart"
class='fixedsize-panel with-3d-shadow with-transitions'>
<svg></svg>
......
......@@ -465,27 +465,22 @@ pre {
<div class='panel panel-default hidden'
id="loadavg-panel-div">
<div class="panel-heading">
<div class="maxavg-toggles pull-right">
<label class="radio-inline">
<input type="radio" name="loadav-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="loadav-radio"
value="avg"> Avg
</label>
</div>
<h5>Load Average Graph</h5>
</div>
<div class='panel-body panel-body-nopad'>
<!-- The col setting gives us a "relative" position div -->
<div class='col-xs-12 col-xs-offset-0'
style="padding:0px;">
<!-- So now we can use an "absolute" position to put
the radio button in the upper left of the graph
where it will not overwrite anything.
-->
<div class="hidden toggles"
style='position:absolute;left:5px;top:0px'>
<label class="radio-inline">
<input type="radio" name="loadav-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="loadav-radio"
value="avg"> Avg
</label>
</div>
<div id="loadavg-chart"
class='fixedsize-panel with-3d-shadow with-transitions'>
<svg></svg>
......@@ -498,27 +493,38 @@ pre {
<div class='panel panel-default hidden'
id="ctrl-traffic-panel-div">
<div class="panel-heading">
<div class="maxavg-toggles pull-right">
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
checked="checked" value="max"> Max
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"
value="avg"> Avg
</label>
</div>
<div class="txrx-toggles pull-right"
style="margin-right: 15px;">
<label class="radio-inline">
<input type="radio" name="ctrl-radio-txrx"
value="rx"> RX
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio-txrx"
value="tx"> TX
</label>
<label class="radio-inline">
<input type="radio" name="ctrl-radio-txrx"
checked="checked"
value="sum"> Sum
</label>
</div>
<h5>Control Traffic Graph</h5>
</div>
<div class='panel-body panel-body-nopad'>
<!-- The col setting gives us a "relative" position div -->
<div class='col-xs-12 col-xs-offset-0'
style="padding:0px;">
<!-- So now we can use an "absolute" position to put
the radio button in the upper left of the graph
where it will not overwrite anything.
-->
<div class="hidden toggles"
style='position:absolute;left:5px;top:0px'>
<label class="radio-inline">
<input type="radio" name="ctrl-radio"