From 2dfe3f52d0fd1c18c5ee2a128afa04d51653b675 Mon Sep 17 00:00:00 2001
From: Newnius <newnius.cn@gmail.com>
Date: Mon, 20 May 2019 16:53:28 +0800
Subject: [PATCH] update, add cluster management

---
 install.php       |  20 -------
 modals.php        |  56 +++++++++++++++++++-
 static/cluster.js | 131 ++++++++++++++++++++++++++++++++++++++++++++++
 static/ucenter.js |   4 ++
 ucenter.php       |  22 ++++++++
 5 files changed, 211 insertions(+), 22 deletions(-)
 create mode 100755 static/cluster.js

diff --git a/install.php b/install.php
index 4ae6f98..89fb9c4 100755
--- a/install.php
+++ b/install.php
@@ -16,7 +16,6 @@ MysqlPDO::configure($config);
 
 create_table_user();
 create_table_workspace();
-create_table_cluster();
 create_table_agent();
 create_table_model();
 create_table_log();
@@ -71,25 +70,6 @@ function create_table_workspace()
 	execute_sqls($sqls);
 }
 
-function create_table_cluster()
-{
-	$sqls = array(
-//        'DROP `yao_cluster`' => 'DROP TABLE IF EXISTS `yao_cluster`',
-		'CREATE `yao_cluster`' =>
-			'CREATE TABLE `yao_cluster`(
-				`name` VARCHAR(64) NOT NULL,
-				 PRIMARY KEY(`name`),
-                `created_at` BIGINT NOT NULL,
-				`created_by` int NOT NULL,
-				`reserved_nodes` json NOT NULL,
-				`quota_per_day` int NOT NULL,
-				`quota_used` int NOT NULL,
-				`version` int NOT NULL DEFAULT 0 /* for upgrade purpose */
-			)ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci',
-	);
-	execute_sqls($sqls);
-}
-
 function create_table_agent()
 {
 	$sqls = array(
diff --git a/modals.php b/modals.php
index a0a8086..8516859 100755
--- a/modals.php
+++ b/modals.php
@@ -160,14 +160,14 @@
 								</div>
 							</div>
 							<div class="col-md-2">
-								<label>GPU Number (Available: 4)</label>
+								<label>GPU Number</label>
 								<div class="form-group">
 									<input type="number" class="form-control task-gpu-num" step="1" min="1" value="1"
 									       placeholder="number of GPU cards required" required/>
 								</div>
 							</div>
 							<div class="col-md-2">
-								<label>GPU Memory(Left:N GB)</label>
+								<label>GPU Memory<abbr title="per card">?</abbr></label>
 								<div class="form-group">
 									<input type="number" class="form-control task-gpu-mem" step="1024" min="1024"
 									       value="4096" placeholder="MB" required/>
@@ -184,6 +184,58 @@
 	</div>
 </div>
 
+<!-- virtual cluster modal -->
+<div class="modal fade" id="modal-cluster" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
+     aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content panel-info">
+			<div class="modal-header panel-heading">
+				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
+				</button>
+				<h4 id="modal-cluster-title" class="modal-title">Create Virtual Cluster</h4>
+			</div>
+			<div class="modal-body">
+				<form class="form" action="javascript:void(0)">
+					<label>Name</label>
+					<div class="form-group form-group-lg">
+						<label for="form-cluster-name" class="sr-only">Name</label>
+						<input type="text" id="form-cluster-name" class="form-control" maxlength="16"
+						       placeholder="virtual cluster name" required/>
+					</div>
+					<label>GPU Number</label>
+					<div class="form-group form-group-lg">
+						<label for="form-cluster-quota-gpu-number" class="sr-only">GPU number</label>
+						<input type="number" id="form-cluster-quota-gpu-number" class="form-control" min="0" step="1"
+						       placeholder=""/>
+					</div>
+					<label>GPU Memory (Total)</label>
+					<div class="form-group form-group-lg">
+						<label for="form-cluster-quota-gpu-memory" class="sr-only">GPU Memory</label>
+						<input type="number" id="form-cluster-quota-gpu-memory" class="form-control" min="0" step="1024"
+						       placeholder="(MB)"/>
+					</div>
+					<label>CPU</label>
+					<div class="form-group form-group-lg">
+						<label for="form-cluster-quota-cpu" class="sr-only">CPU</label>
+						<input type="number" id="form-cluster-quota-cpu" class="form-control" placeholder="" min="0"
+						       step="1"/>
+					</div>
+					<label>Memory (Total)</label>
+					<div class="form-group form-group-lg">
+						<label for="form-cluster-quota-mem" class="sr-only">CPU</label>
+						<input type="number" id="form-cluster-quota-mem" class="form-control" placeholder="(MB)" min="0"
+						       step="1024"/>
+					</div>
+					<div>
+						<input type="hidden" id="form-cluster-submit-type"/>
+						<button id="form-cluster-submit" type="submit" class="btn btn-primary btn-lg">Submit</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>
+
 <!-- agent modal -->
 <div class="modal fade" id="modal-agent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 	<div class="modal-dialog">
diff --git a/static/cluster.js b/static/cluster.js
new file mode 100755
index 0000000..9ad6fa2
--- /dev/null
+++ b/static/cluster.js
@@ -0,0 +1,131 @@
+function register_events_cluster() {
+	$('#btn-cluster-add').click(function (e) {
+		$('#form-cluster-submit-type').val('add');
+		$('#modal-cluster').modal('show');
+	});
+
+	$("#form-cluster-submit").click(function (e) {
+		var name = $('#form-cluster-name').val();
+		var quota_gpu = $('#form-cluster-quota-gpu-number').val();
+		var quota_gpu_mem = $('#form-cluster-quota-gpu-memory').val();
+		var quota_cpu = $('#form-cluster-quota-cpu').val();
+		var quota_mem = $('#form-cluster-quota-mem').val();
+
+		/* TODO validate form */
+
+		$('#modal-cluster').modal('hide');
+		if ($('#form-cluster-submit-type').val() !== 'add')
+			return;
+
+		var ajax = $.ajax({
+			url: "service?action=cluster_add",
+			type: 'POST',
+			data: {
+				name: name,
+				quota_gpu: quota_gpu,
+				quota_gpu_mem: quota_gpu_mem,
+				quota_cpu: quota_cpu,
+				quota_mem: quota_mem
+			}
+		});
+		ajax.done(function (res) {
+			if (res["errno"] !== 0) {
+				$("#modal-msg-content").html(res["msg"]);
+				$("#modal-msg").modal('show');
+			}
+			$('#table-cluster').bootstrapTable("refresh");
+		});
+		ajax.fail(function (jqXHR, textStatus) {
+			$("#modal-msg-content").html("Request failed : " + jqXHR.statusText);
+			$("#modal-msg").modal('show');
+			$('#table-cluster').bootstrapTable("refresh");
+		});
+	});
+
+}
+
+function load_clusters() {
+	$("#table-cluster").bootstrapTable({
+		url: 'service?action=cluster_list',
+		responseHandler: clusterResponseHandler,
+		sidePagination: 'server',
+		cache: true,
+		striped: true,
+		pagination: true,
+		pageSize: 10,
+		pageList: [10, 25, 50, 100, 200],
+		search: false,
+		showColumns: true,
+		showRefresh: true,
+		showToggle: false,
+		showPaginationSwitch: true,
+		minimumCountColumns: 2,
+		clickToSelect: false,
+		sortName: 'nobody',
+		sortOrder: 'desc',
+		smartDisplay: true,
+		mobileResponsive: true,
+		showExport: true,
+		columns: [{
+			field: 'name',
+			title: 'Name',
+			align: 'center',
+			valign: 'middle'
+		}, {
+			field: 'operate',
+			title: 'Operate',
+			align: 'center',
+			events: clusterOperateEvents,
+			formatter: clusterOperateFormatter
+		}]
+	});
+}
+
+function clusterResponseHandler(res) {
+	if (res['errno'] === 0) {
+		var tmp = {};
+		tmp["total"] = res["count"];
+		tmp["rows"] = res["clusters"];
+		return tmp;
+	}
+	$("#modal-msg-content").html(res["msg"]);
+	$("#modal-msg").modal('show');
+	return [];
+}
+
+function clusterOperateFormatter(value, row, index) {
+	var div = '<div class="btn-group" role="group" aria-label="...">';
+	div += '<button class="btn btn-default view"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;</button>';
+	div += '<button class="btn btn-default remove"><i class="glyphicon glyphicon-remove"></i>&nbsp;</button>';
+	div += '</div>';
+	return div;
+}
+
+window.clusterOperateEvents = {
+	'click .view': function (e, value, row, index) {
+		$('#form-agent-name').val(row.name);
+		$('#modal-cluster').modal('show');
+	},
+	'click .remove': function (e, value, row, index) {
+		if (!confirm('Are you sure to remove this virtual cluster?')) {
+			return;
+		}
+		var ajax = $.ajax({
+			url: "service?action=cluster_remove",
+			type: 'POST',
+			data: {name: row.name}
+		});
+		ajax.done(function (res) {
+			if (res["errno"] !== 0) {
+				$("#modal-msg-content").html(res["msg"]);
+				$("#modal-msg").modal('show');
+			}
+			$('#table-cluster').bootstrapTable("refresh");
+		});
+		ajax.fail(function (jqXHR, textStatus) {
+			$("#modal-msg-content").html("Request failed : " + jqXHR.statusText);
+			$("#modal-msg").modal('show');
+			$('#table-cluster').bootstrapTable("refresh");
+		});
+	}
+};
\ No newline at end of file
diff --git a/static/ucenter.js b/static/ucenter.js
index 352f539..59f04aa 100755
--- a/static/ucenter.js
+++ b/static/ucenter.js
@@ -19,6 +19,10 @@ $(function () {
 			register_events_job();
 			load_job_status(getParameterByName('name'));
 			break;
+		case "clusters":
+			register_events_cluster();
+			load_clusters();
+			break;
 		case "agents":
 			register_events_agent();
 			load_agents('');
diff --git a/ucenter.php b/ucenter.php
index 99fbc53..aa7c265 100755
--- a/ucenter.php
+++ b/ucenter.php
@@ -45,6 +45,9 @@ if (isset($_GET['logs'])) {
 } elseif (isset($_GET['agents'])) {
 	$page_type = 'agents';
 
+} elseif (isset($_GET['clusters'])) {
+	$page_type = 'clusters';
+
 } elseif (isset($_GET['workspaces'])) {
 	$page_type = 'workspaces';
 
@@ -204,6 +207,24 @@ foreach ($entries as $entry) {
 						</div>
 					</div>
 
+				<?php } elseif ($page_type === 'clusters') { ?>
+					<div id="clusters">
+						<div class="panel panel-default">
+							<div class="panel-heading">Virtual Clusters</div>
+							<div class="panel-body">
+								<div class="table-responsive">
+									<div id="toolbar">
+										<button id="btn-cluster-add" class="btn btn-primary">
+											<i class="glyphicon glyphicon-plus"></i> Create
+										</button>
+									</div>
+									<table id="table-cluster" data-toolbar="#toolbar" class="table table-striped">
+									</table>
+								</div>
+							</div>
+						</div>
+					</div>
+
 				<?php } elseif ($page_type === 'agents') { ?>
 					<div id="agents">
 						<div class="panel panel-default">
@@ -260,6 +281,7 @@ foreach ($entries as $entry) {
 
 <script src="static/workspace.js"></script>
 <script src="static/job.js"></script>
+<script src="static/cluster.js"></script>
 <script src="static/agent.js"></script>
 <script src="static/resource.js"></script>
 <script src="static/summary.js"></script>