update

ajax.php

@@ -96,6 +96,10 @@ switch ($action) {
 		$res = job_status($job);
 		break;
 
+	case 'summary_get':
+		$res = summary_get();
+		break;
+
 	case 'task_logs':
 		$task = new CRObject();
 		$task->set('job', cr_get_GET('job'));

init.inc.php

@@ -70,6 +70,9 @@ function init_accessMap()
 		'job.list' => array('root', 'admin', 'developer', 'normal'),
 		'job.submit' => array('root', 'admin', 'developer', 'normal'),
 
+		/* system */
+		'system.summary' => array('root', 'admin', 'developer', 'normal'),
+
 		/* agent */
 		'agent.list' => array('root', 'admin', 'normal'),
 		'agent.add' => array('root', 'admin'),

job.logic.php

@@ -138,7 +138,33 @@ function job_status(CRObject $job)
 		return $res;
 	}
 
-	$res['tasks'] = array_reverse($msg['status']);
+	$res['tasks'] = $msg['status'];
+	$res['errno'] = Code::SUCCESS;
+	return $res;
+}
+
+function summary_get()
+{
+	if (!AccessController::hasAccess(Session::get('role', 'visitor'), 'system.summary')) {
+		$res['errno'] = Code::NO_PRIVILEGE;
+		return $res;
+	}
+
+	$spider = new Spider();
+	$spider->doGet(YAO_SCHEDULER_ADDR . '?action=summary');
+	$msg = json_decode($spider->getBody(), true);
+
+	if ($msg['code'] !== 0) {
+		$res['errno'] = $msg['code'];
+		$res['msg'] = $msg['error'];
+		return $res;
+	}
+
+	$res['jobs']['finished'] = $msg['jobs_finished'];
+	$res['jobs']['running'] = $msg['jobs_running'];
+	$res['jobs']['pending'] = $msg['jobs_pending'];
+	$res['gpu']['free'] = $msg['gpu_free'];
+	$res['gpu']['using'] = $msg['gpu_using'];
 	$res['errno'] = Code::SUCCESS;
 	return $res;
 }

static/job.js

@@ -258,9 +258,9 @@ function load_job_status(name) {
 		url: window.config.BASE_URL + '/service?action=job_status&name=' + name,
 		responseHandler: jobStatusResponseHandler,
 		sidePagination: 'server',
-		cache: false,
+		cache: true,
 		striped: true,
-		pagination: false,
+		pagination: true,
 		pageSize: 10,
 		pageList: [10, 25, 50, 100, 200],
 		search: false,
@@ -285,13 +285,13 @@ function load_job_status(name) {
 			title: 'Image',
 			align: 'center',
 			valign: 'middle',
-			visible: false,
+			visible: false
 		}, {
 			field: 'image_digest',
 			title: 'Image Version',
 			align: 'center',
 			valign: 'middle',
-			visible: false,
+			visible: false
 		}, {
 			field: 'hostname',
 			title: 'Hostname',

static/summary.js

@@ -0,0 +1,88 @@
+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 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');
+		}
+
+
+		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": {
+				legend: {
+					display: false
+				},
+				maintainAspectRatio:false
+
+			}
+		});
+
+
+		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: {
+				legend: {
+					display: false
+				}
+			}
+		});
+
+		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: {
+				legend: {
+					display: false
+				}
+			}
+		});
+	});
+	ajax.fail(function (jqXHR, textStatus) {
+		$("#modal-msg-content").html("Request failed : " + jqXHR.statusText);
+		$("#modal-msg").modal('show');
+	});
+}

static/ucenter.js

@@ -7,6 +7,10 @@ $(function () {
 		case "logs_all":
 			load_logs('all');
 			break;
+		case "summary":
+			register_events_summary();
+			summary_render();
+			break;
 		case "jobs":
 			register_events_job();
 			load_jobs('self');

ucenter.php

@@ -27,6 +27,9 @@ if (isset($_GET['logs'])) {
 } elseif (isset($_GET['logs_all'])) {
 	$page_type = 'logs_all';
 
+} elseif (isset($_GET['summary'])) {
+	$page_type = 'summary';
+
 } elseif (isset($_GET['jobs'])) {
 	$page_type = 'jobs';
 
@@ -132,6 +135,34 @@ foreach ($entries as $entry) {
 						</div>
 					</div>
 
+				<?php } elseif ($page_type === 'summary') { ?>
+					<div id="jobs">
+						<div class="panel panel-default">
+							<div class="panel-heading">Summary</div>
+							<div class="panel-body">
+								<div class="row">
+									<div class="col-md-4" style="height: 200px">CPU
+										<canvas id="summary-chart-cpu"></canvas>
+									</div>
+									<div class="col-md-4">
+										Jobs
+										<canvas id="summary-chart-jobs"></canvas>
+									</div>
+									<div class="col-md-4">Mem
+										<canvas id="summary-chart-mem"></canvas>
+									</div>
+								</div>
+								<div class="row">
+									<div class="col-md-4">GPU CPU</div>
+									<div class="col-md-4">GPUs
+										<canvas id="summary-chart-gpu"></canvas>
+									</div>
+									<div class="col-md-4">GPU Mem</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
 				<?php } elseif ($page_type === 'jobs' || $page_type === 'jobs_all') { ?>
 					<div id="jobs">
 						<div class="panel panel-default">
@@ -247,10 +278,12 @@ foreach ($entries as $entry) {
 <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.12.1/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.12.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.10.1/tableExport.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 
 <script src="static/job.js"></script>
 <script src="static/agent.js"></script>
 <script src="static/workspace.js"></script>
+<script src="static/summary.js"></script>
 <script src="static/ucenter.js"></script>
 </body>
 </html>