374 lines
19 KiB
HTML
374 lines
19 KiB
HTML
{% extends 'base_AdminLTE.html' %}
|
|
|
|
{% block title %}Docklet | Create Batch Job{% endblock %}
|
|
|
|
{% block css_src %}
|
|
<!--<style>
|
|
.divcontent { overflow-y:scroll; height:200px;}
|
|
</style>-->
|
|
<link href="//cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet">
|
|
<link href="//cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables_themeroller.css" rel="stylesheet">
|
|
<link href="/static/dist/css/modalconfig.css" rel="stylesheet">
|
|
|
|
{% endblock %}
|
|
|
|
{% block panel_title %}Batch Job Info{% endblock %}
|
|
|
|
{% block panel_list %}
|
|
<ol class="breadcrumb">
|
|
<li>
|
|
<a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
|
|
</li>
|
|
</ol>
|
|
{% endblock %}
|
|
|
|
<div>
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="box box-info">
|
|
<div class="box-header with-border">
|
|
<h3 class="box-title">Batch Job Create</h3>
|
|
|
|
<div class="box-tools pull-right">
|
|
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="box-body">
|
|
<form id="form" class="form-horizontal" action="/batch_job/{{masterips[0].split("@")[0]}}/add/" method="POST">
|
|
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
|
<div class="form-group"><label class="col-sm-2 control-label">Job Name</label>
|
|
<div class="col-sm-10"><input type="text" class="form-control" name="jobName" id="job_name" required></div>
|
|
</div>
|
|
<br/>
|
|
<div class="form-group"><label class="col-sm-2 control-label">Location</label>
|
|
<div class="col-sm-10"><select id="masterselector" class="form-control">
|
|
{% for master in masterips %}
|
|
<option value="{{master.split("@")[0]}}">{{master.split("@")[1]}}</option>
|
|
{% endfor %}
|
|
</select></div>
|
|
</div>
|
|
<div class="hr-line-dashed"></div>
|
|
<br/>
|
|
<div class="form-group"><label class="col-sm-2 control-label">Priority</label>
|
|
<div class="col-sm-10"><select id="priority_selector" class="form-control" name="jobPriority">
|
|
{% for priority in range(10) %}
|
|
<option value="{{priority}}">{{priority}}</option>
|
|
{% endfor %}
|
|
</select></div>
|
|
</div>
|
|
<br/>
|
|
|
|
<div class="hr-line-dashed"></div>
|
|
<div class="panel-group" id="accordion">
|
|
<!-- Tasks -->
|
|
</div>
|
|
<br/>
|
|
<div class="hr-line-dashed"></div>
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<div class="col-sm-4 col-sm-offset-2">
|
|
<button class="btn btn-primary" type="button" id="add_task" class="btn btn-box-tool" title="add a task">Add Task <i class="fa fa-plus"></i></button>
|
|
<button class="btn btn-primary" type="submit">Create Job</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script_src %}
|
|
|
|
<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
|
|
|
|
<!-- Steps -->
|
|
<script src="//cdn.bootcss.com/jquery-steps/1.1.0/jquery.steps.min.js"></script>
|
|
|
|
<!-- Jquery Validate -->
|
|
<script src="//cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.min.js"></script>
|
|
|
|
|
|
<script src="//cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
|
|
<script src="//cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
|
|
<script src="//cdn.bootcss.com/datatables-tabletools/2.1.5/js/TableTools.min.js"></script>
|
|
<script src="//cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var task_number = 0;
|
|
var mapping_number = 0;
|
|
var images_text = "{{ images }}";
|
|
images_text = images_text.replace(/'/g,"\"");
|
|
console.log(images_text);
|
|
var images_info = JSON.parse(images_text);
|
|
console.log(images_info);
|
|
$().ready(function() {
|
|
$("#form").validate();
|
|
});
|
|
|
|
function removeTask(obj) {
|
|
$("#task_pannel_" + obj.id).remove();
|
|
}
|
|
|
|
function unfoldTask(obj){
|
|
$("#collapse" + obj.id).collapse('hide');
|
|
}
|
|
|
|
function chmountPath(obj,task_num,mapping_num) {
|
|
cellid = 'mapping_mountpath_' + task_num + '_' + mapping_num;
|
|
$('#'+cellid).val("/root/oss/"+obj.value);
|
|
}
|
|
|
|
function removeMapping(obj) {
|
|
$("#mapping_" + obj.id).remove();
|
|
}
|
|
|
|
function addMapping(obj,task_num) {
|
|
mapping_number += 1;
|
|
var table = $("#storage_mapping_" + obj.id)[0];
|
|
var new_mapping = table.insertRow();
|
|
new_mapping.id = "mapping_" + task_num + "_" + mapping_number;
|
|
var provider = new_mapping.insertCell();
|
|
var bucket_name = new_mapping.insertCell();
|
|
var accessKey = new_mapping.insertCell();
|
|
var secretKey = new_mapping.insertCell();
|
|
var endpoint = new_mapping.insertCell();
|
|
var mountpath = new_mapping.insertCell();
|
|
var remove = new_mapping.insertCell();
|
|
bucket_name.innerHTML = '<input type="text" class="form-control" name="mappingBucketName_' + task_num + '_' + mapping_number + '" id="mapping_bucketname_'
|
|
+ task_num + '_' + mapping_number + '" onKeyUp="chmountPath(this,'+task_num+','+mapping_number+');" required/>';
|
|
accessKey.innerHTML = '<input type="text" class="form-control" name="mappingAccessKey_' + task_num + '_' + mapping_number + '" id="mapping_accessKey_'
|
|
+ task_num + '_' + mapping_number + '" required/>';
|
|
secretKey.innerHTML = '<input type="text" class="form-control" name="mappingSecretKey_' + task_num + '_' + mapping_number + '" id="mapping_secretKey_'
|
|
+ task_num + '_' + mapping_number + '" required/>';
|
|
endpoint.innerHTML = 'http://<input type="text" class="form-control" name="mappingEndpoint_' + task_num + '_' + mapping_number + '" id="mapping_endpoint_'
|
|
+ task_num + '_' + mapping_number + '" required/>';
|
|
mountpath.innerHTML = '<input type="text" class="form-control" name="mappingMountpath_' + task_num + '_' + mapping_number + '" id="mapping_mountpath_'
|
|
+ task_num + '_' + mapping_number + '" readonly="true" required/>';
|
|
provider.innerHTML = '<select class="form-control" name="mappingProvider_' + task_num + '_' + mapping_number + '" id="mapping_provider_'
|
|
+ task_num + '_' + mapping_number + '">'
|
|
+'<option>Aliyun</option></select>';
|
|
remove.innerHTML = '<div class="box-tool pull-left"><button type="button" id="' + task_num + '_' + mapping_number +'" onclick="removeMapping(this)" class="btn btn-xs btn-danger">'
|
|
+'Remove</button></div>';
|
|
}
|
|
|
|
$("select#masterselector").change(function() {
|
|
var masterip=$(this).children('option:selected').val();
|
|
$("#form").attr("action","/batch_job/"+ masterip +"/add/");
|
|
var mastername=$(this).children('option:selected').html();
|
|
console.log(masterip);
|
|
var host = window.location.host;
|
|
var images = images_info;
|
|
for(var tnum = 1; tnum<=task_number; ++tnum)
|
|
{
|
|
var imagehtml =
|
|
"<thead>"
|
|
+"<tr>"
|
|
+"<th>ImageName</th>"
|
|
+"<th>Type</th>"
|
|
+"<th>Owner</th>"
|
|
+"<th>Size</th>"
|
|
+"<th>Description</th>"
|
|
+"<th>Choose</th>"
|
|
+"</tr>"
|
|
+"</thead>"
|
|
+"<tbody>"
|
|
+"<tr>"
|
|
+"<td>base</td>"
|
|
+"<td>public</td>"
|
|
+"<td>docklet</td>"
|
|
+"<td>--</td>"
|
|
+"<td>A base image for you</td>"
|
|
+'<td><div class="i-checks"><label><input type="radio" name="image_' + tnum + '" value="base_base_base" checked="checked"></label></div></td>'
|
|
+"</tr>";
|
|
for(var index in images[masterip].private) {
|
|
var image = images[masterip].private[index];
|
|
imagehtml +=
|
|
"<tr>"
|
|
+"<td>"+image.name+"</td>"
|
|
+"<td>private</td>"
|
|
+"<td>{{user}}</td>"
|
|
+"<td>"+image.size_format+"</td>"
|
|
+'<td><a href="/image/' + masterip + '/description/' + image.name + '_' + '{{user}}' + '_private/" target="_blank">' + image.description + '</a></td>'
|
|
+'<td><div class="i-checks"><label><input type="radio" name="image_' + tnum + '" value="'+image.name+'_{{user}}_private"><label></div></td>'
|
|
+"</tr>";
|
|
}
|
|
for(var p_user in images[masterip].public) {
|
|
for(var index in images[masterip].public[p_user]) {
|
|
image=images[masterip].public[p_user][index];
|
|
imagehtml +=
|
|
"<tr>"
|
|
+"<td>"+image.name+"</td>"
|
|
+"<td>public</td>"
|
|
+"<td>" + p_user + "</td>"
|
|
+"<td>"+image.size_format+"</td>"
|
|
+'<td><a href="/image/' + masterip + '/description/' + image.name + "_" + p_user + '_public/" target="_blank">' + image.description + '</a></td>'
|
|
+'<td><div class="i-checks"><label><input type="radio" name="image_' + tnum + '" value="'+image.name+'_{{p_user}}_public"><label></div></td>'
|
|
+"</tr>";
|
|
}
|
|
}
|
|
imagehtml += "</tbody>";
|
|
$("#imagetable"+tnum).html(imagehtml);
|
|
}
|
|
});
|
|
|
|
function addTask() {
|
|
task_number += 1;
|
|
var masterip=$("select#masterselector").children('option:selected').val();
|
|
//mapping_number = 0;
|
|
var task_html = '';
|
|
var images = images_info
|
|
task_html +=
|
|
'<div class="panel panel-default" id="task_pannel_' + task_number + '">'
|
|
+'<div class="panel-heading">'
|
|
+'<h4 class="panel-title">'
|
|
+'<a data-toggle="collapse" data-panel="#accordion" href="#collapse' + task_number + '">'
|
|
+'Task #' + task_number
|
|
+'</a><div class="box-tools pull-right"><button type="button" id="' + task_number + '" onclick="removeTask(this)" class="btn btn-box-tool"><i class="fa fa-times"></i></button></div>'
|
|
+'</h4></div>'
|
|
+'<div id="collapse' + task_number + '" class="panel-collapse collapse in">'
|
|
+'<div class="panel-body">'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Running Path</label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" name="srcAddr_' + task_number + '" id="srcAddr_' + task_number + '" value="/root" required/>'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Command</label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" name="command_' + task_number + '" id="command_' + task_number + '" required/>'
|
|
+'</div></div>'
|
|
|
|
task_html +=
|
|
'<div class="form-group"><label class="col-sm-2 control-label">Image Choose</label>'
|
|
+'<div class="col-sm-10">'
|
|
+'<table id="imagetable' + task_number +'" class="table table-striped table-bordered table-hover table-image" >'
|
|
+"<thead>"
|
|
+"<tr>"
|
|
+"<th>ImageName</th>"
|
|
+"<th>Type</th>"
|
|
+"<th>Owner</th>"
|
|
+"<th>Size</th>"
|
|
+"<th>Description</th>"
|
|
+"<th>Choose</th>"
|
|
+"</tr>"
|
|
+"</thead>"
|
|
+"<tbody>"
|
|
+"<tr>"
|
|
+"<td>base</td>"
|
|
+"<td>public</td>"
|
|
+"<td>docklet</td>"
|
|
+"<td>--</td>"
|
|
+"<td>A base image for you</td>"
|
|
+'<td><div class="i-checks"><label><input type="radio" name="image_' + task_number + '" value="base_base_base" checked="checked"></label></div></td>'
|
|
+"</tr>";
|
|
for(var index in images[masterip].private) {
|
|
var image = images[masterip].private[index];
|
|
task_html +=
|
|
"<tr>"
|
|
+"<td>"+image.name+"</td>"
|
|
+"<td>private</td>"
|
|
+"<td>{{user}}</td>"
|
|
+"<td>"+image.size_format+"</td>"
|
|
+'<td><a href="/image/' + masterip + '/description/' + image.name + '_' + '{{user}}' + '_private/" target="_blank">' + image.description + '</a></td>'
|
|
+'<td><div class="i-checks"><label><input type="radio" name="image_' + task_number + '" value="'+image.name+'_{{user}}_private"><label></div></td>'
|
|
+"</tr>";
|
|
}
|
|
for(var p_user in images[masterip].public) {
|
|
for(var index in images[masterip].public[p_user]) {
|
|
image=images[masterip].public[p_user][index];
|
|
task_html +=
|
|
"<tr>"
|
|
+"<td>"+image.name+"</td>"
|
|
+"<td>public</td>"
|
|
+"<td>" + p_user + "</td>"
|
|
+"<td>"+image.size_format+"</td>"
|
|
+'<td><a href="/image/' + masterip + '/description/' + image.name + "_" + p_user + '_public/" target="_blank">' + image.description + '</a></td>'
|
|
+'<td><div class="i-checks"><label><input type="radio" name="image_' + task_number + '" value="'+image.name+'_{{p_user}}_public"><label></div></td>'
|
|
+"</tr>";
|
|
}
|
|
}
|
|
task_html +=
|
|
'</tbody></table>'
|
|
+'</div>'
|
|
+'</div>'
|
|
task_html +=
|
|
'<div class="panel panel-default" id="task_subpannel_' + task_number + '">'
|
|
+'<div class="panel-heading">'
|
|
+'<h4 class="panel-title">'
|
|
+'<a data-toggle="collapse" data-panel="#acc" href="#subcollapse' + task_number + '">'
|
|
+'Show detailed options'
|
|
+'</a>'
|
|
+'</h4></div>'
|
|
+'<div id="subcollapse' + task_number + '" class="panel-collapse collapse">'
|
|
+'<div class="panel-body">'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">CPU</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="cpuSetting_' + task_number + '" id="cpuSetting_' + task_number + '" value = 1 min="1" max="8" required/>'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Memory</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="memorySetting_' + task_number + '" id="memorySetting_' + task_number + '" value = 1024 min="100" max="8196" required/>'
|
|
+'</div>MB</div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">GPU</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="gpuSetting_' + task_number + '" id="gpuSetting_' + task_number + '" value= 0 min="0" max="2" required/>'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Disk</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="diskSetting_' + task_number + '" id="diskSetting_' + task_number + '" value= 1024 min="128" max="10000" required/>'
|
|
+'</div>MB</div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">VNode Number</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="vnodeCount_' + task_number + '" id="vnodeCount_' + task_number + '" value= 1 min="1" max="14" required/>'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Max Retry Times</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="retryCount_' + task_number + '" id="retryCount_' + task_number + '" value= 1 min="0" max="5" required/>'
|
|
+'</div></div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Dependency <i class="fa fa-question-circle" title="The tasks ids that this task depends on, seperate them with commas, eg: 1, 2"></i></label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" name="dependency_' + task_number + '" id="dependency_' + task_number + '" />'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Expire Time</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="expTime_' + task_number + '" id="expTime_' + task_number + '" value= 3600 min="10" max="86400" required/>'
|
|
+'</div>Seconds</div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Stderr Redirect Path</label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" placeholder="/path/to/file or /path/" name="stdErrRedPth_' + task_number + '" id="stdErrRedPth_' + task_number + '" value="/root/nfs/batch_{jobid}/" required/>'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Stdout Redirect Path</label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" placeholder="/path/to/file or /path/" name="stdOutRedPth_' + task_number + '" id="stdOutRedPth_' + task_number + '" value="/root/nfs/batch_{jobid}/" required/>'
|
|
+'</div></div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Run on: </label>'
|
|
+'<div class="col-sm-3"><input type="radio" name="runon_' + task_number + '" value="all" checked="checked"/>All vnodes  '
|
|
+' <input type="radio" name="runon_' + task_number + '" value="master" />One vnode(master)</div>'
|
|
+'<label class="col-sm-2 control-label">Start at the Same Time</label>'
|
|
+'<div class="col-sm-3"><input type="checkbox" name="atSameTime_' + task_number + '" checked="checked"/>'
|
|
+'</div></div>'
|
|
|
|
task_html +=
|
|
'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Object Storage Mapping<br/>'
|
|
+'<button type="button" id="' + task_number + '" class="btn btn-primary btn-xs" title="add an external storage mapping" onclick="addMapping(this,'+task_number+')">'
|
|
+'Add<i class="fa fa-plus"></i></button></label>'
|
|
+'<div class="col-sm-10"><table class="table table-bordered" id="storage_mapping_' + task_number + '">'
|
|
+'<thead>'
|
|
+'<tr><th>Provider</th><th>Bucket Name</th><th>AccessKey ID</th><th>AccessKey Secret</th><th>Endpoint</th><th>Mount Path</th><th>Remove</th></tr>'
|
|
+'</thead>'
|
|
+'<tbody>'
|
|
+'</tbody>'
|
|
+'</table></div>'
|
|
+'</div>'
|
|
+'</div></div></div>'
|
|
+'<div class="box-tools pull-right"><button type="button" id="' + task_number + '" onclick="unfoldTask(this)" class="btn btn-primary">Confirm</button></div>'
|
|
+'</div></div>'
|
|
$(task_html).appendTo("#accordion");
|
|
}
|
|
addTask();
|
|
$("#add_task").click(addTask);
|
|
</script>
|
|
{% endblock %}
|