planetstack/templates/admin/dashboard/hpc_historical.html - xos - Gitiles


     <script type="text/javascript" src="//www.google.com/jsapi"></script>
 	<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"
 			};

 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>

	<script type="text/javascript" src="//www.google.com/jsapi"></script>
	<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"
	};

	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>