diff options
| -rw-r--r-- | python/gras/stats/CMakeLists.txt | 1 | ||||
| -rw-r--r-- | python/gras/stats/charts.js | 70 | ||||
| -rw-r--r-- | python/gras/stats/main.css | 18 | ||||
| -rw-r--r-- | python/gras/stats/main.html | 27 | ||||
| -rw-r--r-- | python/gras/stats/main.js | 71 | ||||
| -rw-r--r-- | python/gras/stats/registry.js | 11 |
6 files changed, 126 insertions, 72 deletions
diff --git a/python/gras/stats/CMakeLists.txt b/python/gras/stats/CMakeLists.txt index 4510f5b..a8e4828 100644 --- a/python/gras/stats/CMakeLists.txt +++ b/python/gras/stats/CMakeLists.txt @@ -16,6 +16,7 @@ INSTALL( main.js registry.js utils.js + charts.js main.css DESTINATION ${GR_PYTHON_DIR}/gras/stats COMPONENT ${GRAS_COMP_PYTHON} diff --git a/python/gras/stats/charts.js b/python/gras/stats/charts.js new file mode 100644 index 0000000..0c020d3 --- /dev/null +++ b/python/gras/stats/charts.js @@ -0,0 +1,70 @@ +/*********************************************************************** + * charts and visualization stuff + **********************************************************************/ + +var gras_setup_overall_chart = function(registry) +{ + var chart = new google.visualization.LineChart($('#overall_charts').get(0)); + var options = { + title: 'Throughput per block over time', + vAxis: {title: "rate (MIps)"}, + hAxis: {title: "time (seconds)"} + }; + registry.overall_chart = chart; + registry.overall_chart_options = options; +} + +var gras_setup_individual_charts = function(registry) +{ + var point = registry.history[0]; + var div = $('#block_enables:first'); + var config = $('td:last', div); + var count = 0; + $.each(registry.getBlockIds(), function(index, id) + { + $(config).append('<label>' + id + '</label>'); + $('<input>').attr({ + type: 'checkbox', + name: id, + value: '1', + checked: '1', + onclick: function() + { + + } + }).appendTo(config); + $(config).append(' '); + count++; + if (count == Math.round(registry.getBlockIds().length/2)) + { + var table = $('table:last', div); + $(table).append('<tr><td></td></tr>'); + config = $('td:last', div); + } + }); + +} + + +var gras_update_throughput_chart = function(registry) +{ + if (registry.history.length == 1) return gras_setup_individual_charts(registry); + if (registry.history.length < 2) return; + + var ids = registry.getBlockIds(); + var data_set = [['Throughput'].concat(ids)]; + for (var i = Math.max(registry.history.length-10, 1); i < registry.history.length; i++) + { + var row = new Array(); + row.push(i.toString()); + for (var j = 0; j < ids.length; j++) + { + row.push(gras_extract_throughput_delta(registry.history[i-1], registry.history[i], ids[j])/1e6); + } + data_set.push(row); + } + + var chart_data = google.visualization.arrayToDataTable(data_set); + registry.overall_chart.draw(chart_data, registry.overall_chart_options); + +} diff --git a/python/gras/stats/main.css b/python/gras/stats/main.css index 0fc5db7..60afd5e 100644 --- a/python/gras/stats/main.css +++ b/python/gras/stats/main.css @@ -5,11 +5,21 @@ padding:0px; body{ font-family:Arial, Helvetica, sans-serif; -font-size:10pt; +font-size:9pt; color:black; background-color:white; } +#overall_config +{ +float:left; +} + +#block_enables +{ +float:left; +} + #page{ padding:10px; color:inherit; @@ -102,11 +112,11 @@ margin:10px 0px 0px 0px; } #page table{ -padding:10px; +padding:5px; } #page th{ -padding:7px; +padding:3px; border:1px solid #333333; text-align:center; color:inherit; @@ -117,7 +127,7 @@ background-color:#ECECEC; } #page td{ -padding:5px; +padding:3px; border:1px solid #333333; text-align:center; color:inherit; diff --git a/python/gras/stats/main.html b/python/gras/stats/main.html index e434192..c393763 100644 --- a/python/gras/stats/main.html +++ b/python/gras/stats/main.html @@ -9,6 +9,7 @@ <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="/registry.js"></script> <script type="text/javascript" src="/utils.js"></script> + <script type="text/javascript" src="/charts.js"></script> <script type="text/javascript" src="/main.js"></script> <script type="text/javascript"> google.load('visualization', '1.0', {'packages':['corechart']}); @@ -16,12 +17,28 @@ </script> </head> -<body> - <div id='page'> - <h1>GRAS Status Monitor</h1> - <form id="individual_charts"></form> - <div id="overall_charts" style="width:1000px;height:500px;"></div> +<body id='page'> + <h1>GRAS Status Monitor</h1> + <div id="overall_config"> + <table> + <tr><th colspan="2">Overall chart config</th></tr> + <tr> + <td colspan="2">Update rate: <input type="number" name="update_rate" min="1" max="10" size="4" /></td> + </tr> + <tr> + <td><label>Active?</label><input type="checkbox" name="active" checked="1" /></td> + <td><label>Show?</label><input type="checkbox" name="show" checked="1" /></td> + </tr> + </table> </div> + <div id="block_enables"> + <table> + <tr><th>Block enables</th></tr> + <tr><td></td></tr> + </table> + </div> + <div style="clear:both;"></div> + <div id="overall_charts" style="width:1000px;height:500px;"></div> </body> </html> diff --git a/python/gras/stats/main.js b/python/gras/stats/main.js index 696c061..5b30e77 100644 --- a/python/gras/stats/main.js +++ b/python/gras/stats/main.js @@ -1,63 +1,7 @@ /*********************************************************************** - * visuals - **********************************************************************/ - -var gras_setup_individual_charts = function(point) -{ - var charts = $('#individual_charts').get(0); - $('block', point).each(function() - { - $('<input>').attr({ - type: 'checkbox', - name: $(this).attr('id'), - value: '1', - checked: '1', - onclick: function() - { - - } - }).appendTo(charts); - $(charts).append($(this).attr('id') + ' '); - }); -} - - -var gras_update_throughput_chart = function(data) -{ - if (data.history.length == 1) return gras_setup_individual_charts(data.history[0]); - if (data.history.length < 2) return; - - var ids = data.getBlockIds(); - var data_set = [['Throughput'].concat(ids)]; - for (var i = Math.max(data.history.length-10, 1); i < data.history.length; i++) - { - var row = new Array(); - row.push(i.toString()); - for (var j = 0; j < ids.length; j++) - { - row.push(gras_extract_throughput_delta(data.history[i-1], data.history[i], ids[j])/1e6); - } - data_set.push(row); - } - - - var data = google.visualization.arrayToDataTable(data_set); - - var options = { - title: 'Throughput per block over time', - vAxis: {title: "rate (MIps)"}, - hAxis: {title: "time (seconds)"} - }; - - var chart = new google.visualization.LineChart($('#overall_charts').get(0)); - chart.draw(data, options); - -} - -/*********************************************************************** * Query stats **********************************************************************/ -var gras_query_stats = function(data) +var gras_query_stats = function(registry) { $.ajax({ type: "GET", @@ -68,12 +12,12 @@ var gras_query_stats = function(data) { if ($(xml, "gras_stats") !== undefined) { - data.appendPoint(xml); - gras_update_throughput_chart(data); + registry.appendPoint(xml); + gras_update_throughput_chart(registry); } var onceHandle = window.setTimeout(function() { - gras_query_stats(data); - }, 500); + gras_query_stats(registry); + }, (1.0/registry.overall_rate)); } }); } @@ -83,6 +27,7 @@ var gras_query_stats = function(data) **********************************************************************/ var gras_stats_main = function() { - var data = new GrasStatsRegistry(); - gras_query_stats(data); + var registry = new GrasStatsRegistry(); + gras_setup_overall_chart(registry); + gras_query_stats(registry); } diff --git a/python/gras/stats/registry.js b/python/gras/stats/registry.js index 4b5f2e2..197f874 100644 --- a/python/gras/stats/registry.js +++ b/python/gras/stats/registry.js @@ -1,4 +1,13 @@ /*********************************************************************** + * Per block registry data structure + **********************************************************************/ +var GrasBlockRegistry = function(id) +{ + this.id = id; + this.enabled = true; +} + +/*********************************************************************** * Stats registry data structure **********************************************************************/ var GrasStatsRegistry = function() @@ -6,6 +15,8 @@ var GrasStatsRegistry = function() this.ids = new Array(); this.enables = new Array(); this.history = new Array(); + this.overall_rate = 2.0; + this.overall_active = true; } GrasStatsRegistry.prototype.appendPoint = function(point) |