pass dataSourceUrl to renderchart, fix date axis, more flexible option passing, Siobhan's changes to IDs
diff --git a/planetstack/core/static/page_analytics.js b/planetstack/core/static/page_analytics.js
index 017b403..75221b7 100644
--- a/planetstack/core/static/page_analytics.js
+++ b/planetstack/core/static/page_analytics.js
@@ -23,23 +23,28 @@
function setPageStatInt(labelName, valueName, legend, units, value) {
- $('.'+labelName).text(legend).show();
- $('.'+valueName).text(Math.round(value)+units).show();
+ $(labelName).text(legend).show();
+ $(valueName).text(Math.round(value)+units).show();
}
function setPageStatFloat(labelName, valueName, legend, units, value, dp) {
- $('.'+labelName).text(legend).show();
- $('.'+valueName).text(Number(value).toFixed(dp)+units).show();
+ $(labelName).text(legend).show();
+ $(valueName).text(Number(value).toFixed(dp)+units).show();
}
// ----------------------------------------------------------------------------
// node count and average cpu utilization
function updatePageAnalyticsData(summaryData) {
- window.pageAnalyticsData = summaryData;
+ window.pageAnalyticsUrl = summaryData["dataSourceUrl"];
lastRow = summaryData.rows.length-1;
- setPageStatInt("nodesLabel", "nodesValue", "Node Count", "", summaryData.rows[lastRow]["count_hostname"]);
- setPageStatInt("cpuLabel", "cpuValue", "Avg Load", "%", summaryData.rows[lastRow]["avg_cpu"]);
+
+ setPageStatInt(".nodesLabel", ".nodesValue", "Node Count", "", summaryData.rows[lastRow]["count_hostname"]);
+ setPageStatInt(".cpuLabel", ".cpuValue", "Avg Load", "%", summaryData.rows[lastRow]["avg_cpu"]);
+
+ //New miniDashboard
+ setPageStatInt("#miniDashNodeCountLabel", "#miniDashNodeCount", "Node Count", "", summaryData.rows[lastRow]["count_hostname"]);
+ setPageStatInt("#miniDashAvgLoadLabel", "#miniDashAvgLoad", "Avg Load", "%", summaryData.rows[lastRow]["avg_cpu"]);
}
function updatePageAnalytics() {
@@ -61,9 +66,10 @@
// bandwidth
function updatePageBandwidthData(summaryData) {
- window.pageBandData = summaryData;
+ window.pageBandwidthUrl = summaryData["dataSourceUrl"];
lastRow = summaryData.rows.length-1;
- setPageStatFloat("bandwidthLabel", "bandwidthValue", "Bandwidth", "Gbps", summaryData.rows[lastRow]["sum_computed_bytes_sent_div_elapsed"]*8.0/1024/1024/1024,2);
+ setPageStatFloat(".bandwidthLabel", ".bandwidthValue", "Bandwidth", " Gbps", summaryData.rows[lastRow]["sum_computed_bytes_sent_div_elapsed"]*8.0/1024/1024/1024,2);
+ setPageStatFloat("#miniDashBandwidthLabel", "#miniDashBandwidth", "Bandwidth", " Gbps", summaryData.rows[lastRow]["sum_computed_bytes_sent_div_elapsed"]*8.0/1024/1024/1024,2);
}
function updatePageBandwidth() {
diff --git a/planetstack/core/static/planetstack_graphs.js b/planetstack/core/static/planetstack_graphs.js
index 8177d8d..fb33022 100644
--- a/planetstack/core/static/planetstack_graphs.js
+++ b/planetstack/core/static/planetstack_graphs.js
@@ -1,21 +1,20 @@
google.load('visualization', '1', {'packages' : ['controls','table','corechart','geochart']});
-function renderChart(origQuery, yColumn, xColumn, title, aggFunc) {
- $('#graph').empty();
- $('#chartsModal').modal('show');
- $('.modal-body').scrollTop(0)
+function renderChart(newStyle, dialog, container, dataSourceUrl, yColumn, xColumn, aggFunc, options) {
+ if ( newStyle ) {
+ $(dialog).dialog("open");
+ }
+ else {
+ $(container).empty();
+ $(dialog).modal('show');
+ $('.modal-body').scrollTop(0);
+ }
- var queryString = encodeURIComponent(origQuery);
- var serverPart = "http://cloud-scrutiny.appspot.com/command?table=demoevents&action=send_query&force=ColumnChart&q=";
- var dataSourceUrl = serverPart + queryString;
+ console.log(dataSourceUrl);
- //var dataSourceUrl = "http://node36.princeton.vicci.org:8000/analytics/bigquery/?avg=%25cpu&count=%25hostname&format=raw";
-
- var query = new google.visualization.Query(dataSourceUrl)
+ var query = new google.visualization.Query(dataSourceUrl);
query && query.abort();
- console.log("query.send")
- query.send(function(response) {handleResponse_psg(response, yColumn, xColumn, title, aggFunc);});
- console.log("query.sent")
+ query.send(function(response) {handleResponse_psg(container, response, yColumn, xColumn, aggFunc, options);});
}
// NOTE: appended _psg to showLine() and handleResponse() to prevent conflict
@@ -29,39 +28,45 @@
return ret;
}
-function showLine_psg(dt, title) {
- console.log("showline")
- var lineChart = new google.visualization.ChartWrapper({
- 'chartType': 'LineChart',
- 'containerId': 'graph',
- 'options': {
+function showLine_psg(container, dt, options) {
+ console.log("showline_psg");
+
+ var base_options = {
'width': 520,
'height': 300,
- 'title': title,
'pages': true,
'numRows': 9,
'backgroundColor': 'transparent',
- 'titleTextStyle': {"color": "white"},
+ 'titleTextStyle': {"color": "black"},
'legend': 'none',
-// 'legend': {"textStyle": {"color": "white"}},
- 'hAxis': {"baselineColor": "white",
- "textStyle": {"color": "white"}},
- 'vAxis': {"baselineColor": "white",
- "textStyle": {"color": "white"}},
- },
- 'view': {'columns': [0, 1]}
+ 'hAxis': {"baselineColor": "darkBlue",
+ "textStyle": {"color": "black"}},
+ 'vAxis': {"baselineColor": "darkBlue",
+ "textStyle": {"color": "black"}},
+ }
+
+ options = $.extend(true, {}, base_options, options);
+
+ var lineChart = new google.visualization.ChartWrapper({
+ 'chartType': 'LineChart',
+ 'containerId': container.substring(1),
+ 'view': {'columns': [0, 1]},
+ 'options': options
});
lineChart.setDataTable(dt);
lineChart.draw();
+
}
function fixDate(unixDate) {
return new Date(unixDate*1000);
}
-function handleResponse_psg(response, yColumn, xColumn, title, aggFunc) {
- console.log("handleResponse")
+function fixDate2(unixDate) {
+ return new Date(unixDate);
+}
+function handleResponse_psg(container, response, yColumn, xColumn, aggFunc, options) {
var supportedClasses = {
'Table':google.visualization.Table,
'LineChart':google.visualization.LineChart,
@@ -90,7 +95,7 @@
var groupedData1 = google.visualization.data.group(dt, [{
column: yColumn,
type: 'datetime',
- modifier: fixDate,
+ modifier: fixDate2,
}],
[{
column: xColumn,
@@ -98,32 +103,25 @@
label: dt.getColumnLabel(xColumn),
aggregation: aggFunc}]);
- showLine_psg(groupedData1, title);
-
- console.log(xColumn);
+ console.log(groupedData1.getColumnRange(0))
+ console.log(groupedData1.getColumnRange(1))
+ showLine_psg(container, groupedData1, options);
});
- console.log(response.getReasons());
- console.log(response.getDataTable());
- console.log(response.getDetailedMessage());
- console.log(response.getMessage());
-
proxy.setDataTable(response.getDataTable());
proxy.draw();
}
$('.nodesLabel, .nodesValue').click(function() {
- var jsonData = window.pageAnalyticsData;
- renderChart(jsonData.query, 0, 2, "Node Count", google.visualization.data.sum);
- //renderChartJson(jsonData, "MinuteTime", "count_hostname", "Node Count");
+ renderChart(false,"#chartsModal", "#graph", window.pageAnalyticsUrl, 0, "Number of Nodes", 2, "Node Count", google.visualization.data.sum);
});
$('.cpuLabel, .cpuValue').click(function() {
var jsonData = window.pageAnalyticsData;
- renderChart(jsonData.query, 0, 1, "Average CPU", google.visualization.data.sum);
+ renderChart(false,"#chartsModal", "#graph", window.pageAnalyticsUrl, 0, "Average CPU", 1, "Average CPU", google.visualization.data.sum);
});
$('.bandwidthLabel, .bandwidthValue').click(function() {
var jsonData = window.pageBandData;
- renderChart(jsonData.query, 0, 1, "Total Bandwidth", agg_bandwidth);
+ renderChart(false,"#chartsModal", "#graph", window.pageBandUrl, 0, "Total Bandwidth (Gbps)", 1, "Total Bandwidth", agg_bandwidth);
});