mirror of
https://github.com/newnius/YAO-portal.git
synced 2025-06-06 07:11:54 +00:00
update, add cluster management
This commit is contained in:
parent
3da19d214f
commit
2dfe3f52d0
20
install.php
20
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(
|
||||
|
||||
56
modals.php
56
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">×</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">
|
||||
|
||||
131
static/cluster.js
Executable file
131
static/cluster.js
Executable file
@ -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> </button>';
|
||||
div += '<button class="btn btn-default remove"><i class="glyphicon glyphicon-remove"></i> </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");
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -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('');
|
||||
|
||||
22
ucenter.php
22
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user