remove histrogram, make bar chart wider, eliminate unused css, fix column formatting, turn off statistics thread, raise bigquery timeout, fix python error when no rows in query
diff --git a/planetstack/core/static/hpc_historical.css b/planetstack/core/static/hpc_historical.css
index 412e986..7be52db 100644
--- a/planetstack/core/static/hpc_historical.css
+++ b/planetstack/core/static/hpc_historical.css
@@ -23,790 +23,28 @@
clear: both;
}
-.col-xs-1,
-.col-sm-1,
-.col-md-1,
-.col-lg-1,
-.col-xs-2,
-.col-sm-2,
-.col-md-2,
-.col-lg-2,
-.col-xs-3,
-.col-sm-3,
-.col-md-3,
-.col-lg-3,
-.col-xs-4,
-.col-sm-4,
-.col-md-4,
-.col-lg-4,
-.col-xs-5,
-.col-sm-5,
-.col-md-5,
-.col-lg-5,
-.col-xs-6,
-.col-sm-6,
-.col-md-6,
-.col-lg-6,
-.col-xs-7,
-.col-sm-7,
-.col-md-7,
-.col-lg-7,
-.col-xs-8,
-.col-sm-8,
-.col-md-8,
-.col-lg-8,
-.col-xs-9,
-.col-sm-9,
-.col-md-9,
-.col-lg-9,
-.col-xs-10,
-.col-sm-10,
-.col-md-10,
-.col-lg-10,
-.col-xs-11,
-.col-sm-11,
-.col-md-11,
-.col-lg-11,
-.col-xs-12,
-.col-sm-12,
-.col-md-12,
-.col-lg-12 {
+.graph_container {
+ width: 800px;
+}
+
+.col-md-halfgraph,
+.col-md-fullgraph {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
-.col-xs-1,
-.col-xs-2,
-.col-xs-3,
-.col-xs-4,
-.col-xs-5,
-.col-xs-6,
-.col-xs-7,
-.col-xs-8,
-.col-xs-9,
-.col-xs-10,
-.col-xs-11 {
+.col-md-halfgraph,
+.col-md-fullgraph {
float: left;
}
-
-.col-xs-12 {
+.col-md-halfgraph {
+ width: 350px;
+}
+.col-md-fullgraph {
+ width: 700px;
+}
+.col-md-12 {
width: 100%;
}
-
-.col-xs-11 {
- width: 91.66666666666666%;
-}
-
-.col-xs-10 {
- width: 83.33333333333334%;
-}
-
-.col-xs-9 {
- width: 75%;
-}
-
-.col-xs-8 {
- width: 66.66666666666666%;
-}
-
-.col-xs-7 {
- width: 58.333333333333336%;
-}
-
-.col-xs-6 {
- width: 50%;
-}
-
-.col-xs-5 {
- width: 41.66666666666667%;
-}
-
-.col-xs-4 {
- width: 33.33333333333333%;
-}
-
-.col-xs-3 {
- width: 25%;
-}
-
-.col-xs-2 {
- width: 16.666666666666664%;
-}
-
-.col-xs-1 {
- width: 8.333333333333332%;
-}
-
-.col-xs-pull-12 {
- right: 100%;
-}
-
-.col-xs-pull-11 {
- right: 91.66666666666666%;
-}
-
-.col-xs-pull-10 {
- right: 83.33333333333334%;
-}
-
-.col-xs-pull-9 {
- right: 75%;
-}
-
-.col-xs-pull-8 {
- right: 66.66666666666666%;
-}
-
-.col-xs-pull-7 {
- right: 58.333333333333336%;
-}
-
-.col-xs-pull-6 {
- right: 50%;
-}
-
-.col-xs-pull-5 {
- right: 41.66666666666667%;
-}
-
-.col-xs-pull-4 {
- right: 33.33333333333333%;
-}
-
-.col-xs-pull-3 {
- right: 25%;
-}
-
-.col-xs-pull-2 {
- right: 16.666666666666664%;
-}
-
-.col-xs-pull-1 {
- right: 8.333333333333332%;
-}
-
-.col-xs-pull-0 {
- right: 0;
-}
-
-.col-xs-push-12 {
- left: 100%;
-}
-
-.col-xs-push-11 {
- left: 91.66666666666666%;
-}
-
-.col-xs-push-10 {
- left: 83.33333333333334%;
-}
-
-.col-xs-push-9 {
- left: 75%;
-}
-
-.col-xs-push-8 {
- left: 66.66666666666666%;
-}
-
-.col-xs-push-7 {
- left: 58.333333333333336%;
-}
-
-.col-xs-push-6 {
- left: 50%;
-}
-
-.col-xs-push-5 {
- left: 41.66666666666667%;
-}
-
-.col-xs-push-4 {
- left: 33.33333333333333%;
-}
-
-.col-xs-push-3 {
- left: 25%;
-}
-
-.col-xs-push-2 {
- left: 16.666666666666664%;
-}
-
-.col-xs-push-1 {
- left: 8.333333333333332%;
-}
-
-.col-xs-push-0 {
- left: 0;
-}
-
-.col-xs-offset-12 {
- margin-left: 100%;
-}
-
-.col-xs-offset-11 {
- margin-left: 91.66666666666666%;
-}
-
-.col-xs-offset-10 {
- margin-left: 83.33333333333334%;
-}
-
-.col-xs-offset-9 {
- margin-left: 75%;
-}
-
-.col-xs-offset-8 {
- margin-left: 66.66666666666666%;
-}
-
-.col-xs-offset-7 {
- margin-left: 58.333333333333336%;
-}
-
-.col-xs-offset-6 {
- margin-left: 50%;
-}
-
-.col-xs-offset-5 {
- margin-left: 41.66666666666667%;
-}
-
-.col-xs-offset-4 {
- margin-left: 33.33333333333333%;
-}
-
-.col-xs-offset-3 {
- margin-left: 25%;
-}
-
-.col-xs-offset-2 {
- margin-left: 16.666666666666664%;
-}
-
-.col-xs-offset-1 {
- margin-left: 8.333333333333332%;
-}
-
-.col-xs-offset-0 {
- margin-left: 0;
-}
-
-@media (min-width: 768px) {
- .container {
- width: 750px;
- }
- .col-sm-1,
- .col-sm-2,
- .col-sm-3,
- .col-sm-4,
- .col-sm-5,
- .col-sm-6,
- .col-sm-7,
- .col-sm-8,
- .col-sm-9,
- .col-sm-10,
- .col-sm-11 {
- float: left;
- }
- .col-sm-12 {
- width: 100%;
- }
- .col-sm-11 {
- width: 91.66666666666666%;
- }
- .col-sm-10 {
- width: 83.33333333333334%;
- }
- .col-sm-9 {
- width: 75%;
- }
- .col-sm-8 {
- width: 66.66666666666666%;
- }
- .col-sm-7 {
- width: 58.333333333333336%;
- }
- .col-sm-6 {
- width: 50%;
- }
- .col-sm-5 {
- width: 41.66666666666667%;
- }
- .col-sm-4 {
- width: 33.33333333333333%;
- }
- .col-sm-3 {
- width: 25%;
- }
- .col-sm-2 {
- width: 16.666666666666664%;
- }
- .col-sm-1 {
- width: 8.333333333333332%;
- }
- .col-sm-pull-12 {
- right: 100%;
- }
- .col-sm-pull-11 {
- right: 91.66666666666666%;
- }
- .col-sm-pull-10 {
- right: 83.33333333333334%;
- }
- .col-sm-pull-9 {
- right: 75%;
- }
- .col-sm-pull-8 {
- right: 66.66666666666666%;
- }
- .col-sm-pull-7 {
- right: 58.333333333333336%;
- }
- .col-sm-pull-6 {
- right: 50%;
- }
- .col-sm-pull-5 {
- right: 41.66666666666667%;
- }
- .col-sm-pull-4 {
- right: 33.33333333333333%;
- }
- .col-sm-pull-3 {
- right: 25%;
- }
- .col-sm-pull-2 {
- right: 16.666666666666664%;
- }
- .col-sm-pull-1 {
- right: 8.333333333333332%;
- }
- .col-sm-pull-0 {
- right: 0;
- }
- .col-sm-push-12 {
- left: 100%;
- }
- .col-sm-push-11 {
- left: 91.66666666666666%;
- }
- .col-sm-push-10 {
- left: 83.33333333333334%;
- }
- .col-sm-push-9 {
- left: 75%;
- }
- .col-sm-push-8 {
- left: 66.66666666666666%;
- }
- .col-sm-push-7 {
- left: 58.333333333333336%;
- }
- .col-sm-push-6 {
- left: 50%;
- }
- .col-sm-push-5 {
- left: 41.66666666666667%;
- }
- .col-sm-push-4 {
- left: 33.33333333333333%;
- }
- .col-sm-push-3 {
- left: 25%;
- }
- .col-sm-push-2 {
- left: 16.666666666666664%;
- }
- .col-sm-push-1 {
- left: 8.333333333333332%;
- }
- .col-sm-push-0 {
- left: 0;
- }
- .col-sm-offset-12 {
- margin-left: 100%;
- }
- .col-sm-offset-11 {
- margin-left: 91.66666666666666%;
- }
- .col-sm-offset-10 {
- margin-left: 83.33333333333334%;
- }
- .col-sm-offset-9 {
- margin-left: 75%;
- }
- .col-sm-offset-8 {
- margin-left: 66.66666666666666%;
- }
- .col-sm-offset-7 {
- margin-left: 58.333333333333336%;
- }
- .col-sm-offset-6 {
- margin-left: 50%;
- }
- .col-sm-offset-5 {
- margin-left: 41.66666666666667%;
- }
- .col-sm-offset-4 {
- margin-left: 33.33333333333333%;
- }
- .col-sm-offset-3 {
- margin-left: 25%;
- }
- .col-sm-offset-2 {
- margin-left: 16.666666666666664%;
- }
- .col-sm-offset-1 {
- margin-left: 8.333333333333332%;
- }
- .col-sm-offset-0 {
- margin-left: 0;
- }
-}
-
-@media (min-width: 992px) {
- .container {
- width: 970px;
- }
- .col-md-1,
- .col-md-2,
- .col-md-3,
- .col-md-4,
- .col-md-5,
- .col-md-6,
- .col-md-7,
- .col-md-8,
- .col-md-9,
- .col-md-10,
- .col-md-11 {
- float: left;
- }
- .col-md-12 {
- width: 100%;
- }
- .col-md-11 {
- width: 91.66666666666666%;
- }
- .col-md-10 {
- width: 83.33333333333334%;
- }
- .col-md-9 {
- width: 75%;
- }
- .col-md-8 {
- width: 66.66666666666666%;
- }
- .col-md-7 {
- width: 58.333333333333336%;
- }
- .col-md-6 {
- width: 50%;
- }
- .col-md-5 {
- width: 41.66666666666667%;
- }
- .col-md-4 {
- width: 33.33333333333333%;
- }
- .col-md-3 {
- width: 25%;
- }
- .col-md-2 {
- width: 16.666666666666664%;
- }
- .col-md-1 {
- width: 8.333333333333332%;
- }
- .col-md-pull-12 {
- right: 100%;
- }
- .col-md-pull-11 {
- right: 91.66666666666666%;
- }
- .col-md-pull-10 {
- right: 83.33333333333334%;
- }
- .col-md-pull-9 {
- right: 75%;
- }
- .col-md-pull-8 {
- right: 66.66666666666666%;
- }
- .col-md-pull-7 {
- right: 58.333333333333336%;
- }
- .col-md-pull-6 {
- right: 50%;
- }
- .col-md-pull-5 {
- right: 41.66666666666667%;
- }
- .col-md-pull-4 {
- right: 33.33333333333333%;
- }
- .col-md-pull-3 {
- right: 25%;
- }
- .col-md-pull-2 {
- right: 16.666666666666664%;
- }
- .col-md-pull-1 {
- right: 8.333333333333332%;
- }
- .col-md-pull-0 {
- right: 0;
- }
- .col-md-push-12 {
- left: 100%;
- }
- .col-md-push-11 {
- left: 91.66666666666666%;
- }
- .col-md-push-10 {
- left: 83.33333333333334%;
- }
- .col-md-push-9 {
- left: 75%;
- }
- .col-md-push-8 {
- left: 66.66666666666666%;
- }
- .col-md-push-7 {
- left: 58.333333333333336%;
- }
- .col-md-push-6 {
- left: 50%;
- }
- .col-md-push-5 {
- left: 41.66666666666667%;
- }
- .col-md-push-4 {
- left: 33.33333333333333%;
- }
- .col-md-push-3 {
- left: 25%;
- }
- .col-md-push-2 {
- left: 16.666666666666664%;
- }
- .col-md-push-1 {
- left: 8.333333333333332%;
- }
- .col-md-push-0 {
- left: 0;
- }
- .col-md-offset-12 {
- margin-left: 100%;
- }
- .col-md-offset-11 {
- margin-left: 91.66666666666666%;
- }
- .col-md-offset-10 {
- margin-left: 83.33333333333334%;
- }
- .col-md-offset-9 {
- margin-left: 75%;
- }
- .col-md-offset-8 {
- margin-left: 66.66666666666666%;
- }
- .col-md-offset-7 {
- margin-left: 58.333333333333336%;
- }
- .col-md-offset-6 {
- margin-left: 50%;
- }
- .col-md-offset-5 {
- margin-left: 41.66666666666667%;
- }
- .col-md-offset-4 {
- margin-left: 33.33333333333333%;
- }
- .col-md-offset-3 {
- margin-left: 25%;
- }
- .col-md-offset-2 {
- margin-left: 16.666666666666664%;
- }
- .col-md-offset-1 {
- margin-left: 8.333333333333332%;
- }
- .col-md-offset-0 {
- margin-left: 0;
- }
-}
-
-@media (min-width: 1200px) {
- .container {
- width: 1170px;
- }
- .col-lg-1,
- .col-lg-2,
- .col-lg-3,
- .col-lg-4,
- .col-lg-5,
- .col-lg-6,
- .col-lg-7,
- .col-lg-8,
- .col-lg-9,
- .col-lg-10,
- .col-lg-11 {
- float: left;
- }
- .col-lg-12 {
- width: 100%;
- }
- .col-lg-11 {
- width: 91.66666666666666%;
- }
- .col-lg-10 {
- width: 83.33333333333334%;
- }
- .col-lg-9 {
- width: 75%;
- }
- .col-lg-8 {
- width: 66.66666666666666%;
- }
- .col-lg-7 {
- width: 58.333333333333336%;
- }
- .col-lg-6 {
- width: 50%;
- }
- .col-lg-5 {
- width: 41.66666666666667%;
- }
- .col-lg-4 {
- width: 33.33333333333333%;
- }
- .col-lg-3 {
- width: 25%;
- }
- .col-lg-2 {
- width: 16.666666666666664%;
- }
- .col-lg-1 {
- width: 8.333333333333332%;
- }
- .col-lg-pull-12 {
- right: 100%;
- }
- .col-lg-pull-11 {
- right: 91.66666666666666%;
- }
- .col-lg-pull-10 {
- right: 83.33333333333334%;
- }
- .col-lg-pull-9 {
- right: 75%;
- }
- .col-lg-pull-8 {
- right: 66.66666666666666%;
- }
- .col-lg-pull-7 {
- right: 58.333333333333336%;
- }
- .col-lg-pull-6 {
- right: 50%;
- }
- .col-lg-pull-5 {
- right: 41.66666666666667%;
- }
- .col-lg-pull-4 {
- right: 33.33333333333333%;
- }
- .col-lg-pull-3 {
- right: 25%;
- }
- .col-lg-pull-2 {
- right: 16.666666666666664%;
- }
- .col-lg-pull-1 {
- right: 8.333333333333332%;
- }
- .col-lg-pull-0 {
- right: 0;
- }
- .col-lg-push-12 {
- left: 100%;
- }
- .col-lg-push-11 {
- left: 91.66666666666666%;
- }
- .col-lg-push-10 {
- left: 83.33333333333334%;
- }
- .col-lg-push-9 {
- left: 75%;
- }
- .col-lg-push-8 {
- left: 66.66666666666666%;
- }
- .col-lg-push-7 {
- left: 58.333333333333336%;
- }
- .col-lg-push-6 {
- left: 50%;
- }
- .col-lg-push-5 {
- left: 41.66666666666667%;
- }
- .col-lg-push-4 {
- left: 33.33333333333333%;
- }
- .col-lg-push-3 {
- left: 25%;
- }
- .col-lg-push-2 {
- left: 16.666666666666664%;
- }
- .col-lg-push-1 {
- left: 8.333333333333332%;
- }
- .col-lg-push-0 {
- left: 0;
- }
- .col-lg-offset-12 {
- margin-left: 100%;
- }
- .col-lg-offset-11 {
- margin-left: 91.66666666666666%;
- }
- .col-lg-offset-10 {
- margin-left: 83.33333333333334%;
- }
- .col-lg-offset-9 {
- margin-left: 75%;
- }
- .col-lg-offset-8 {
- margin-left: 66.66666666666666%;
- }
- .col-lg-offset-7 {
- margin-left: 58.333333333333336%;
- }
- .col-lg-offset-6 {
- margin-left: 50%;
- }
- .col-lg-offset-5 {
- margin-left: 41.66666666666667%;
- }
- .col-lg-offset-4 {
- margin-left: 33.33333333333333%;
- }
- .col-lg-offset-3 {
- margin-left: 25%;
- }
- .col-lg-offset-2 {
- margin-left: 16.666666666666664%;
- }
- .col-lg-offset-1 {
- margin-left: 8.333333333333332%;
- }
- .col-lg-offset-0 {
- margin-left: 0;
- }
-}
diff --git a/planetstack/hpc_wizard/bigquery_analytics.py b/planetstack/hpc_wizard/bigquery_analytics.py
index 2e65707..994e837 100644
--- a/planetstack/hpc_wizard/bigquery_analytics.py
+++ b/planetstack/hpc_wizard/bigquery_analytics.py
@@ -91,7 +91,7 @@
service = build('bigquery', 'v2', http=http)
body = {"query": query,
- "timeoutMs": 30000}
+ "timeoutMs": 60000}
response = service.jobs().query(projectId=PROJECT_NUMBER, body=body).execute()
return response
diff --git a/planetstack/hpc_wizard/hpc_wizard.py b/planetstack/hpc_wizard/hpc_wizard.py
index bb85847..5c5a3f9 100644
--- a/planetstack/hpc_wizard/hpc_wizard.py
+++ b/planetstack/hpc_wizard/hpc_wizard.py
@@ -316,7 +316,7 @@
if (glo_hpc_wizard is None):
glo_hpc_wizard = HpcWizard()
- glo_hpc_wizard.initialize_statistics()
+# glo_hpc_wizard.initialize_statistics()
return glo_hpc_wizard
diff --git a/planetstack/templates/admin/dashboard/hpc_historical.html b/planetstack/templates/admin/dashboard/hpc_historical.html
index 9eb00ba..24d17f2 100644
--- a/planetstack/templates/admin/dashboard/hpc_historical.html
+++ b/planetstack/templates/admin/dashboard/hpc_historical.html
@@ -1,302 +1,301 @@
<script type="text/javascript" src="//www.google.com/jsapi"></script>
- <link rel="stylesheet" href="/static/hpc_historical.css">
+ <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.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"
- };
-
- // ask django for a data source URL to use for the graphs
-
- function updateDataSourceUrl() {
- var sliceName = $("#historical_slicename :selected").text();
- var queryString = "/analytics/bigquery/?sum=@bytes_sent&avg=@cpu&groupBy=Time,city,@hostname,@site&slice=" + sliceName;
-
- $.ajax({
- url: queryString,
- dataType: 'json',
- type: 'GET',
- success: function (newData) {
- sendAndDraw(newData["dataSourceUrl"])
- }
- });
- }
-
- TIME_COL = 0;
- BANDWIDTH_COL = 2;
- CPU_COL = 1;
- CITY_COL = 3;
- NODE_COL = 4;
- SITE_COL = 5;
-
- google.setOnLoadCallback(function () {
- $('#historical_slicename').change(function()
- {
- updateDataSourceUrl();
- });
-
- updateDataSourceUrl();
- });
-
- 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();
- }
-
- 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
- },
- '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']
- }
- },
- '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',
- 'view': {
- 'columns': [1, 2]
- }
- });
- histogram.setDataTable(dt);
- histogram.draw();
-
- }
-
- function handleResponse(response) {
- var timeSlider = new google.visualization.ControlWrapper({
- 'controlType': 'DateRangeFilter',
- 'containerId': 'control1',
- 'options': {
- 'filterColumnLabel': 'Time',
- ui: {
- ticks: 10,
- step: "minute"
- }
- }
- });
-
- // 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 proxy = new google.visualization.ChartWrapper({
- 'chartType': 'Table',
- 'containerId': 'chart7',
- 'options': {
- 'width': 800,
- 'height': 300,
- pageSize: 5,
- page: 'enable',
- 'legend': 'none',
- 'title': 'Nodes'
- },
- 'view': {
- 'columns': [0, 1, 2, 3, 4, 5]
- }
- });
-
- function avg_bandwidth(arr) {
- var ret = 0;
- for (var i = 0; i < arr.length; i++) {
- ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
- }
- if (arr.length==0) {
- return 0;
- }
- return ret/arr.length;
- }
-
- function sum_bytes_sent_as_bw(arr) {
- var ret = 0;
- for (var i = 0; i < arr.length; i++) {
- ret+=arr[i]*8.0/1024.0/1024.0/1024.0;
- }
- return ret/60.0;
- }
-
- function sum_bytes_sent_as_GB(arr) {
- var ret = 0;
- for (var i = 0; i < arr.length; i++) {
- ret+=arr[i]/1024.0/1024.0/1024.0;
- }
- return ret;
- }
-
- function fixDate2(unixDate) {
- // not completely sure why we have to do this, as the data was in
- // javascript Date() objects to start with. If we don't do it,
- // then the horizontal axis will be blank.
- return new Date(unixDate);
- }
-
- var format0dp = new google.visualization.NumberFormat({fractionDigits:0});
- var format2dp = new google.visualization.NumberFormat({fractionDigits:2});
-
- // Create a group for charts that will have a horizontal axis that is
- // time.
-
- google.visualization.events.addListener(proxy, 'ready', function () {
- var dt = proxy.getDataTable();
- var groupedData1 = google.visualization.data.group(dt, [{
- column: TIME_COL,
- type: 'datetime',
- modifier: fixDate2,
- }], [{
- column: CPU_COL,
- type: 'number',
- label: "avg cpu",
- aggregation: google.visualization.data.avg
- }, {
- column: BANDWIDTH_COL,
- type: 'number',
- label: "Gbps",
- aggregation: sum_bytes_sent_as_bw
- }]);
-
- format0dp.format(groupedData1,1);
- format2dp.format(groupedData1,2);
-
- showSiteTimeAgg(groupedData1);
- });
-
- // Create a group for charts that will have a horizontal axis that is
- // city or site.
-
- google.visualization.events.addListener(proxy, 'ready', function () {
- var dt = proxy.getDataTable();
- var groupedData0 = google.visualization.data.group(dt, [CITY_COL, SITE_COL], [{
- column: CPU_COL,
- type: 'number',
- label: 'avg cpu',
- aggregation: google.visualization.data.avg
- }, {
- column: BANDWIDTH_COL,
- type: 'number',
- label: "GB sent",
- aggregation: sum_bytes_sent_as_GB
- }]);
-
- format0dp.format(groupedData0,2);
- format2dp.format(groupedData0,3);
-
- 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);
- });
- }
+ 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">
- <span><b>Slice Name:</b></span>
- <span><select id="historical_slicename">
- {% for slice in userSliceInfo %}
- <option value="{{ slice.slicename }}">{{ slice.slicename }}</option>
- {% endfor %}
- </select></span>
- </div>
<div class="row">
<div class="col-md-8">
<div class="col-md-4" id="control2"></div>