YAO-portal/static/summary.js

function register_events_summary() {

}

function summary_render() {
	var ctx_cpu = document.getElementById('summary-chart-cpu').getContext('2d');
	var ctx_mem = document.getElementById('summary-chart-mem').getContext('2d');
	var ctx_jobs = document.getElementById('summary-chart-jobs').getContext('2d');
	var ctx_gpu = document.getElementById('summary-chart-gpu').getContext('2d');
	var ctx_gpu_util = document.getElementById('summary-chart-gpu-util').getContext('2d');
	var ctx_gpu_mem = document.getElementById('summary-chart-gpu-mem').getContext('2d');

	var ajax = $.ajax({
		url: window.config.BASE_URL + "/service?action=summary_get",
		type: 'GET',
		data: {}
	});
	ajax.done(function (res) {
		if (res["errno"] !== 0) {
			$("#modal-msg-content").html(res["msg"]);
			$("#modal-msg").modal('show');
		}

		/* CPU Load */
		ctx_cpu.canvas.height = 200;
		new Chart(ctx_cpu, {
			"type": "line",
			"data": {
				"labels": ["January", "February", "March", "April", "May", "June", "July"],
				"datasets": [{
					"label": "My First Data set",
					"data": [2, 0.5, 1.5, 0.81, 1.56, 1.55, 1.40],
					"fill": true,
					"borderColor": "rgb(75, 192, 192)",
					"lineTension": 0.1
				}]
			},
			"options": {
				title: {
					display: true,
					text: 'GPU Load'
				},
				legend: {
					display: false
				},
				maintainAspectRatio: false
			}
		});


		/* Jobs */
		var data = {
			datasets: [{
				data: Object.values(res['jobs']),
				backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 205, 86)"]
			}],

			// These labels appear in the legend and in the tooltips when hovering different arcs
			labels: Object.keys(res['jobs'])
		};
		var myPieChart = new Chart(ctx_jobs, {
			type: 'pie',
			data: data,
			options: {
				title: {
					display: true,
					text: 'Jobs'
				},
				legend: {
					display: false
				}
			}
		});

		/* Mem Using */
		ctx_mem.canvas.height = 200;
		new Chart(ctx_mem, {
			"type": "line",
			"data": {
				"labels": ["January", "February", "March", "April", "May", "June", "July"],
				"datasets": [{
					"label": "My First Data set",
					"data": [2, 0.5, 1.5, 0.81, 1.56, 1.55, 1.40],
					"fill": true,
					"borderColor": "rgb(75, 192, 192)",
					"lineTension": 0.1
				}]
			},
			"options": {
				title: {
					display: true,
					text: 'MEM Using'
				},
				legend: {
					display: false
				},
				maintainAspectRatio: false
			}
		});

		/* GPU Util */
		ctx_gpu_util.canvas.height = 200;
		new Chart(ctx_gpu_util, {
			"type": "line",
			"data": {
				"labels": ["January", "February", "March", "April", "May", "June", "July"],
				"datasets": [{
					"label": "My First Data set",
					"data": [2, 0.5, 1.5, 0.81, 1.56, 1.55, 1.40],
					"fill": true,
					"borderColor": "rgb(75, 192, 192)",
					"lineTension": 0.1
				}]
			},
			"options": {
				title: {
					display: true,
					text: 'GPU Utilization'
				},
				legend: {
					display: false
				},
				maintainAspectRatio: false
			}
		});

		/* GPUs */
		var data2 = {
			datasets: [{
				data: Object.values(res['gpu']),
				backgroundColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)"]
			}],

			// These labels appear in the legend and in the tooltips when hovering different arcs
			labels: Object.keys(res['gpu'])
		};
		var myPieChart2 = new Chart(ctx_gpu, {
			type: 'pie',
			data: data2,
			options: {
				title: {
					display: true,
					text: 'GPUs'
				},
				legend: {
					display: false
				}
			}
		});


		/* GPU Mem Using */
		ctx_gpu_mem.canvas.height = 200;
		new Chart(ctx_gpu_mem, {
			"type": "line",
			"data": {
				"labels": ["January", "February", "March", "April", "May", "June", "July"],
				"datasets": [{
					"label": "My First Data set",
					"data": [2, 0.5, 1.5, 0.81, 1.56, 1.55, 1.40],
					"fill": true,
					"borderColor": "rgb(75, 192, 192)",
					"lineTension": 0.1
				}]
			},
			"options": {
				title: {
					display: true,
					text: 'GPU MEM Using'
				},
				legend: {
					display: false
				},
				maintainAspectRatio: false
			}
		});
	});
	ajax.fail(function (jqXHR, textStatus) {
		$("#modal-msg-content").html("Request failed : " + jqXHR.statusText);
		$("#modal-msg").modal('show');
	});
}