From b1b3478100e8e948194ca4ef371fb15d7d67338a Mon Sep 17 00:00:00 2001
From: iteratorlee <1400012951@pku.edu.cn>
Date: Wed, 1 Aug 2018 09:57:33 +0800
Subject: [PATCH] update batch submit page

---
 web/templates/batch/batch_create.html | 169 ++++++++++++++++++++------
 web/web.py                            |   3 +-
 web/webViews/batch.py                 |   5 +-
 3 files changed, 140 insertions(+), 37 deletions(-)

diff --git a/web/templates/batch/batch_create.html b/web/templates/batch/batch_create.html
index 2d9b777..479e4ac 100644
--- a/web/templates/batch/batch_create.html
+++ b/web/templates/batch/batch_create.html
@@ -40,35 +40,35 @@
                          </div>
                        </div>
                         <div class="box-body">
-				<form id="form" class="form-horizontal" action="/batch_job/add/" method="POST">
+                <form id="form" class="form-horizontal" action="/batch_job/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="job_name" id="job_name"></div>
-				    </div>
-				    <div class="hr-line-dashed"></div>
+                    <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="job_name" 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">
+                        {% for priority in range(10) %}
+                        <option value="{{priority}}">{{priority}}</option>
+                        {% endfor %}
+                        </select></div>
+                    </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">
-						{% 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">
+                    <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>
+                    <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>
@@ -91,18 +91,46 @@
     <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 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">
-    function removeTask(obj) {
-        $("#task_pannel_"+obj.id).remove();
-    }
     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="mapping_local_dir_' + task_number + '_' + mapping_number + '" id="mapping_local_dir_' 
+                             + task_number + '_' + mapping_number + '" />';
+        remote_dir.innerHTML = '<input type="text" class="form-control" name="mapping_remote_dir_' + task_number + '_' + mapping_number + '" id="mapping_remote_dir_' 
+                             + task_number + '_' + mapping_number + '" />';
+        source.innerHTML = '<select class="form-control" name="mapping_source_' + 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 + '">'
@@ -116,25 +144,96 @@
              +'<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" id="cpuSetting_' + task_number + '" value = 1  />'
+             +'<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" id="memorySetting_' + task_number + '" value = 1024  />'
+             +'<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" id="gpuSetting_' + task_number + '" value= 0  />'
+             +'<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" id="diskSetting_' + task_number + '" value= 1024  />'
+             +'<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" id="instCount_' + task_number + '" value= 1  />'
+             +'<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" id="retryCount_' + task_number + '" value= 1  />'
+             +'<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">Dependency&nbsp<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");
     });
diff --git a/web/web.py b/web/web.py
index 56568bf..794a5f9 100755
--- a/web/web.py
+++ b/web/web.py
@@ -134,7 +134,8 @@ def create_batch_job():
 @login_required
 def add_batch_job():
     #TODO get form parameters of a job description
-    addBatchJobView.job_name = request.form["job_name"]
+    job_data = {}
+    job_data["job_name"] = request.form["job_name"]
     return addBatchJobView().as_view()
 
 @app.route("/batch_job/state/", methods=['GET'])
diff --git a/web/webViews/batch.py b/web/webViews/batch.py
index 3ad3526..7a61bf5 100644
--- a/web/webViews/batch.py
+++ b/web/webViews/batch.py
@@ -1,6 +1,7 @@
 from flask import session, redirect, request
 from webViews.view import normalView
 from webViews.checkname import checkname
+from webViews.dockletrequest import dockletRequest
 
 class batchJobListView(normalView):
     template_path = "batch/batch_list.html"
@@ -17,8 +18,10 @@ class createBatchJobView(normalView):
     
     @classmethod
     def get(self):
+        masterips = dockletRequest.post_to_all()
+        images = dockletRequest.post("/image/list/",{},masterips[0].split("@")[0]).get("images")
         if True:
-            return self.render(self.template_path)
+            return self.render(self.template_path, masterips=masterips, images=images)
         else:
             return self.error()