bring demo changes from node33 and node36 into master
diff --git a/planetstack/templates/admin/dashboard/hpc_historical.html b/planetstack/templates/admin/dashboard/hpc_historical.html
new file mode 100644
index 0000000..7446ae5
--- /dev/null
+++ b/planetstack/templates/admin/dashboard/hpc_historical.html
@@ -0,0 +1,329 @@
+
+ <script type="text/javascript" src="//www.google.com/jsapi"></script>
+ <link rel="stylesheet" href="/static/hpc_historical.css">
+ <script type="text/javascript">
+ google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
+ </script>
+
+ <script type="text/javascript">
+var queryString = encodeURIComponent("SELECT MINUTE(time) as Time, city, s8 as Node, REGEXP_REPLACE(s8,r'node[0-9]+\.(.*)\.vicci\.org',r'\\1') as Site, AVG(i0) as Cpu, AVG(i1) as Requests FROM [vicci.demoevents] WHERE i0 is not null AND s8 contains 'vicci.org' and not city IN ('princeton','Unknown') and city is not null GROUP BY Time,city,Site,Node ORDER BY Time;");
+ var serverPart = "http://cloud-scrutiny.appspot.com/command?action=send_query&force=ColumnChart&q="
+ var dataSourceUrl = serverPart + queryString;
+ var query;
+
+ var options = {
+ width: 600,
+ height: 400,
+ showRowNumber: false,
+ pages:true,
+ numRows:9,
+ backgroundColor: "black"
+ };
+
+google.setOnLoadCallback(function() { sendAndDraw(dataSourceUrl); });
+
+function showNodeAgg(dt) {
+ var tab = new google.visualization.ChartWrapper({
+ 'chartType': 'Table',
+ 'containerId': 'chart3',
+ 'options': {
+ 'width': 300,
+ 'height': 300,
+ 'title': 'Network-wide usage',
+ 'page': 'enable',
+ 'pageSize': 10
+ },
+ 'view': {'columns': [0, 1, 2]}
+ });
+
+ tab.setDataTable(dt);
+ tab.draw();
+}
+
+function showSiteTimeAgg(dt) {
+ var lineChart = new google.visualization.ChartWrapper({
+ 'chartType': 'LineChart',
+ 'containerId': 'chart4',
+ 'options': {
+ 'width': 300,
+ 'height': 300,
+ 'title': 'Network-wide usage',
+ 'pages': true,
+ 'numRows': 9
+ },
+ 'view': {'columns': [0, 1, 2]}
+ });
+ lineChart.setDataTable(dt);
+ lineChart.draw();
+ /*
+ var scatterChart = new google.visualization.ChartWrapper({
+ 'chartType': 'ScatterChart',
+ 'containerId': 'chart5',
+ 'options': {
+ 'width': 300,
+ 'height': 300,
+ },
+ // from the 'data' DataTable.
+ 'view': {'columns': [1, 2]}
+ });
+ scatterChart.setDataTable(dt);
+ scatterChart.draw();*/
+}
+function showSiteAgg(dt) {
+ var barChart = new google.visualization.ChartWrapper({
+ 'chartType': 'ColumnChart',
+ 'containerId': 'chart1',
+ 'options': {
+ 'width': 300,
+ 'height': 300,
+ 'title': 'Site-wise usage',
+ 'pages': true,
+ 'numRows': 9
+ },
+ // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+ // from the 'data' DataTable.
+ 'view': {'columns': [1, 2, 3]}
+ });
+ barChart.setDataTable(dt);
+ barChart.draw();
+ var geoChart = new google.visualization.ChartWrapper({
+ 'chartType': 'GeoChart',
+ 'containerId': 'chart2',
+ 'options': {
+ 'width': 300,
+ 'height': 300,
+ 'displayMode': 'markers',
+ 'region':'021',
+ 'title': 'Usage map',
+ colorAxis: {colors: ['green', 'purple', 'red']}
+ },
+ // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+ // from the 'data' DataTable.
+ 'view': {'columns': [0, 2,3]}
+ });
+ geoChart.setDataTable(dt);
+ geoChart.draw();
+
+ var histogram = new google.visualization.ChartWrapper({
+ 'chartType': 'Histogram',
+ 'containerId': 'chart6',
+ 'options': {
+ 'width': 300,
+ 'height': 300,
+ },
+ 'title': 'Sites by load',
+ // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+ // from the 'data' DataTable.
+ 'view': {'columns': [1, 2]}
+ });
+ histogram.setDataTable(dt);
+ histogram.draw();
+
+}
+
+function handleResponse(response) {
+var supportedClasses = {
+ 'Table':google.visualization.Table,
+ 'LineChart':google.visualization.LineChart,
+ 'ScatterChart':google.visualization.ScatterChart,
+ 'ColumnChart':google.visualization.ColumnChart,
+ 'GeoChart':google.visualization.GeoChart,
+ 'PieChart':google.visualization.PieChart,
+ 'Histogram':google.visualization.Histogram
+ };
+
+ /*var slider2 = new google.visualization.ControlWrapper({
+ 'controlType': 'NumberRangeFilter',
+ 'containerId': 'control3',
+ 'options': {
+ 'filterColumnLabel': 'Cpu',
+ minValue: 0,
+ maxValue: 100,
+ ui: { ticks: 10}
+ }
+ });*/
+
+ var timeSlider = new google.visualization.ControlWrapper({
+ 'controlType': 'NumberRangeFilter',
+ 'containerId': 'control1',
+ 'options': {
+ 'filterColumnLabel': 'Time',
+ ui: { ticks: 10}
+ }
+ });
+
+ // Define a bar chart
+ var barChart = new google.visualization.ChartWrapper({
+ 'chartType': 'BarChart',
+ 'containerId': 'chart1',
+ 'options': {
+ 'width': 400,
+ 'height': 300,
+ 'hAxis': {'minValue': 0, 'maxValue': 60},
+ 'chartArea': {top: 0, right: 0, bottom: 0}
+ }
+ });
+
+ var categoryPicker = new google.visualization.ControlWrapper({
+ 'controlType': 'CategoryFilter',
+ 'allowMultiple': true,
+ 'containerId': 'control2',
+ 'options': {
+ 'filterColumnLabel': 'Site',
+ 'ui': {
+ 'labelStacking': 'vertical',
+ 'allowTyping': false
+ }
+ }
+ });
+ //var container = document.getElementById('datatable');
+ //var table = new google.visualization.LineChart(container);
+ //var table = new google.visualization.ColumnChart(container);
+
+ var proxy = new google.visualization.ChartWrapper({
+ 'chartType': 'Table',
+ 'containerId': 'chart7',
+ 'options': {
+ 'width': 800,
+ 'height': 300,
+ pageSize:5,
+ page:'enable',
+ 'legend': 'none',
+ 'title': 'Nodes'
+ },
+ // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
+ // from the 'data' DataTable.
+ 'view': {'columns': [0,1,2,3,4,5]}
+ });
+
+ function core_sum(arr) {
+ var ret = 0;
+ for (var i = 0; i < arr.length; i++) {
+ ret+=arr[i]/1000;
+ }
+ return ret;
+ }
+
+ function scaled_sum(arr) {
+ var ret = 0;
+ for (var i = 0; i < arr.length; i++) {
+ ret+=arr[i]/1000;
+ }
+ return ret;
+ }
+
+ function count_uniq(arr) {
+ var counts = {};
+ var ret = 0;
+ console.log('Starting ret '+ret);
+ for (var i = 0; i < arr.length; i++) {
+ if (!counts[arr[i]]) ret+=1;
+ counts[arr[i]] = 1;
+ }
+ return ret;
+ }
+ google.visualization.events.addListener(proxy, 'ready', function () {
+ // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
+ var dt = proxy.getDataTable();
+ var groupedData1 = google.visualization.data.group(dt, [0], [{
+ column: 4,
+ type: 'number',
+ label: dt.getColumnLabel(4),
+ aggregation: google.visualization.data.sum
+ },{
+ column: 5,
+ type: 'number',
+ label: dt.getColumnLabel(5),
+ aggregation: google.visualization.data.sum
+ }]);
+
+ showSiteTimeAgg(groupedData1);
+ });
+
+ /*google.visualization.events.addListener(proxy, 'ready', function () {
+ // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
+ var dt = proxy.getDataTable();
+ var groupedData0 = google.visualization.data.group(dt, [2], [{
+ column: 4,
+ type: 'number',
+ label: dt.getColumnLabel(4),
+ aggregation: google.visualization.data.sum
+ },{
+ column: 5,
+ type: 'number',
+ label: dt.getColumnLabel(5),
+ aggregation: google.visualization.data.sum
+ }]);
+ // after grouping, the data will be sorted by column 0, then 1, then 2
+ // if you want a different order, you have to re-sort
+ showNodeAgg(groupedData0);
+ });*/
+
+ google.visualization.events.addListener(proxy, 'ready', function () {
+ // 0 - time 1 - city 2 - node 3 - site 4 - cpu 5 - bytes
+ var dt = proxy.getDataTable();
+ var groupedData0 = google.visualization.data.group(dt, [1,3], [{
+ column: 4,
+ type: 'number',
+ label: 'Cores',
+ aggregation: core_sum
+ },{
+ column: 5,
+ type: 'number',
+ label: dt.getColumnLabel(5),
+ aggregation: scaled_sum
+ }]);
+ // after grouping, the data will be sorted by column 0, then 1, then 2
+ // if you want a different order, you have to re-sort
+ showSiteAgg(groupedData0);
+ });
+
+ data = response.getDataTable();
+ new google.visualization.Dashboard(document.getElementById('dashboard')).
+ // Establish bindings, declaring the both the slider and the category
+ // picker will drive both charts.
+ bind([categoryPicker,timeSlider], [proxy]).
+ // Draw the entire dashboard.
+ draw(data);
+
+}
+function sendAndDraw(queryString) {
+ query = new google.visualization.Query(queryString)
+ query && query.abort();
+ query.send(function(response) {handleResponse(response);});
+}
+
+
+ </script>
+ <div id="dashboard" class="container">
+ <div class="row">
+ <div class="col-md-8">
+ <div class="col-md-4" id="control2"></div>
+ <div class="col-md-4" id="control1"></div>
+ <!--<div class="col-md-4" id="control3"></div>-->
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-8">
+ <div class="col-md-4" id="chart1">
+ </div>
+ <div class="col-md-4" id="chart2">
+ </div>
+ <!--
+ <div class="col-md-4" id="chart3">
+ </div>-->
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-8">
+ <div class="col-md-4" id="chart4">
+ </div>
+ <!--
+ <div class="col-md-4" id="chart5">
+ </div>-->
+ <div class="col-md-4" id="chart6">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="chart7" style="display:none"></div>