249 lines
14 KiB
HTML
249 lines
14 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
|
|
<button type="button" id="add_task" class="btn btn-box-tool" title="add a task"><i class="fa fa-plus"></i>
|
|
</button>
|
|
</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">
|
|
|
|
<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"></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="submit">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script_src %}
|
|
<!-- Custom and plugin javascript -->
|
|
<script src="/static/js/inspinia.js"></script>
|
|
|
|
<script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
|
|
|
|
<!-- Steps -->
|
|
<script src="http://cdn.bootcss.com/jquery-steps/1.1.0/jquery.steps.min.js"></script>
|
|
|
|
<!-- Jquery Validate -->
|
|
<script src="http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.min.js"></script>
|
|
|
|
|
|
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.js"></script>
|
|
<script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.js"></script>
|
|
<script src="http://cdn.bootcss.com/datatables-tabletools/2.1.5/js/TableTools.min.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
var task_number = 0;
|
|
var mapping_number = 0;
|
|
|
|
function removeTask(obj) {
|
|
$("#task_pannel_" + obj.id).remove();
|
|
}
|
|
|
|
function removeMapping(obj) {
|
|
$("#mapping_" + obj.id).remove();
|
|
}
|
|
|
|
function addMapping(obj) {
|
|
mapping_number += 1;
|
|
var table = $("#storage_mapping_" + obj.id)[0];
|
|
var new_mapping = table.insertRow();
|
|
new_mapping.id = "mapping_" + task_number + "_" + mapping_number;
|
|
var local_dir = new_mapping.insertCell();
|
|
var remote_dir = new_mapping.insertCell();
|
|
var source = new_mapping.insertCell();
|
|
var remove = new_mapping.insertCell();
|
|
local_dir.innerHTML = '<input type="text" class="form-control" name="mappingLocalDir_' + task_number + '_' + mapping_number + '" id="mapping_local_dir_'
|
|
+ task_number + '_' + mapping_number + '" />';
|
|
remote_dir.innerHTML = '<input type="text" class="form-control" name="mappingRemoteDir_' + task_number + '_' + mapping_number + '" id="mapping_remote_dir_'
|
|
+ task_number + '_' + mapping_number + '" />';
|
|
source.innerHTML = '<select class="form-control" name="mappingSource_' + task_number + '_' + mapping_number + '" id="mapping_source_'
|
|
+ task_number + '_' + mapping_number + '">'
|
|
+'<option>Aliyun</option><option>AWS</option></select>';
|
|
remove.innerHTML = '<div class="box-tool pull-left"><button type="button" id="' + task_number + '_' + mapping_number +'" onclick="removeMapping(this)" class="btn btn-xs btn-danger">'
|
|
+'Remove</button></div>';
|
|
}
|
|
|
|
$("#add_task").click(function() {
|
|
task_number += 1;
|
|
mapping_number = 0;
|
|
var task_html = '';
|
|
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">'
|
|
+'<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 />'
|
|
+'</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 />'
|
|
+'</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 />'
|
|
+'</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 />'
|
|
+'</div>MB</div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Instance Count</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="instCount_' + task_number + '" id="instCount_' + task_number + '" value= 1 />'
|
|
+'</div>'
|
|
+'<label class="col-sm-2 control-label">Max Retry Count</label>'
|
|
+'<div class="col-sm-3"><input type="number" class="form-control" name="retryCount_' + task_number + '" id="retryCount_' + task_number + '" value= 1 />'
|
|
+'</div></div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Source Code Address</label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" name="srcAddr_' + task_number + '" id="srcAddr_' + 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= 60 />'
|
|
+'</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}/" />'
|
|
+'</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}/" />'
|
|
+'</div></div>'
|
|
+'<div class="form-group">'
|
|
+'<label class="col-sm-2 control-label">Dependency <i class="fa fa-question-circle" title="The tasks that this task depends on, seperate them with commas, eg: task_1, task_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">Command</label>'
|
|
+'<div class="col-sm-3"><input type="text" class="form-control" name="command_' + task_number + '" id="command_' + task_number + '" />'
|
|
+'</div></div>'
|
|
+'<div class="form-group"><label class="col-sm-2 control-label">Image Choose</label>'
|
|
+'<div class="col-sm-10">'
|
|
+'<table id="imagetable" class="table table-striped table-bordered table-hover table-image" >'
|
|
+'<thead>'
|
|
+'<tr>'
|
|
+'<th>ImageName</th>'
|
|
+'<th>Type</th>'
|
|
+'<th>Owner</th>'
|
|
+'<th>Description</th>'
|
|
+'<th>Choose</th>'
|
|
+'</tr>'
|
|
+'</thead>'
|
|
+'<tbody>'
|
|
+'<tr>'
|
|
+'<td>base</td>'
|
|
+'<td>public</td>'
|
|
+'<td>docklet</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 image in images['private'] %}'
|
|
+'<tr>'
|
|
+'<td>{{image['name']}}</td>'
|
|
+'<td>private</td>'
|
|
+'<td>{{user}}</td>'
|
|
+'<td><a href="/image/{{masterips[0].split("@")[1]}}/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>'
|
|
+'{% endfor %}'
|
|
+'{% for p_user,p_images in images['public'].items() %}'
|
|
+'{% for image in p_images %}'
|
|
+'<tr>'
|
|
+'<td>{{image['name']}}</td>'
|
|
+'<td>public</td>'
|
|
+'<td>{{p_user}}</td>'
|
|
+'<td><a href="/image/{{masterips[0].split("@")[1]}}/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>'
|
|
+'{% endfor %}'
|
|
+'{% endfor %}'
|
|
+'</tbody>'
|
|
+'</table>'
|
|
+'</div>'
|
|
+'</div>'
|
|
+'<div class="form-group">'
|
|
+'<span>'
|
|
+'<label class="col-sm-2 contril-label">Exteranl Storage Mapping</label>'
|
|
+'<table class="table table-bordered" id="storage_mapping_' + task_number + '" style="display:inline;">'
|
|
+'<thead>'
|
|
+'<tr><td><button type="button" id="' + task_number + '" class="btn btn-primary btn-xs" title="add an external storage mapping" onclick="addMapping(this)">'
|
|
+'<i class="fa fa-plus"></i></button></td></tr>'
|
|
+'<tr><th style="width:217px">Local Dir</th><th style="width:217px">Remote Dir</th><th style="width:217px">source</th><th style="width:217px">Operation</th></tr>'
|
|
+'</thead>'
|
|
+'<tbody>'
|
|
+'</tbody>'
|
|
+'</table>'
|
|
+'</span></div>'
|
|
+'</div></div></div>'
|
|
$(task_html).appendTo("#accordion");
|
|
});
|
|
</script>
|
|
{% endblock %}
|