Rizal upload json file for team configuration (#68)

* enabling json uploading * fix modal ui in upload json * enabling upload on json also * modify ui a bit and avoid duplicated message * unify the function
erlanggakrisnamukti · Aug 21, 2018 · dc4768a · dc4768a
1 parent 9224ec8
commit dc4768a
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 33 deletions.
diff --git a/locust/static/locust.js b/locust/static/locust.js
@@ -170,19 +170,27 @@ $(".edit_config_link").click(function(event) {
 
 });
 
-$('#upload_btn_submit').click(function(event){
+$("#directories .select2").select2({
+    placeholder: "Select a state"
+});
+
+let whichform = $('.upload_file_form_test_file')[0];
+
+$('#upload_py_submit').click(function(event){
     event.preventDefault();
-    $('#upload_file_form').submit();
+    whichform = $('.upload_file_form_test_file')[0];
+    $('.upload_file_form_test_file').submit();
 });
 
-$("#directories .select2").select2({
-    placeholder: "Select a state"
+$('#upload_json_submit').click(function(event){
+    event.preventDefault();
+    whichform = $('.upload_file_form_json')[0];
+    $('.upload_file_form_json').submit();
 });
 
-$('#upload_file_form').submit(function(event) {
+$('.upload_file_form_test_file, .upload_file_form_json').submit(function(event) {
     event.preventDefault();
-    var form = $('#upload_file_form')[0];
-    var form_data = new FormData(form);
+    var form_data = new FormData(whichform);
     $.ajax({
         type: 'POST',
         url: "/upload_file",
@@ -201,7 +209,6 @@ $('#upload_file_form').submit(function(event) {
     })
 });
 
-
 $('#submit_json_btn').click(function(){
     event.preventDefault();
     $('#hidden_config_json').val(JSON.stringify(json_editor.get(), null , 4));

diff --git a/locust/static/style.css b/locust/static/style.css
@@ -308,7 +308,7 @@ label[for="json_option"]+div{
 
 .start button,
 .edit button, .edit_config button[type=submit], .multiple_column button, 
-#new-test-confirmation .btn-newtest, #upload_btn_submit {
+#new-test-confirmation .btn-newtest, #upload_json_submit, #upload_py_submit {
     margin: 20px 0px 20px 0px;
     float: right;
     font-size: 14px;
@@ -566,7 +566,7 @@ ul.tabs li a.current:after {
 }
 
 
-#add-new-file-modal, #new-test-confirmation {
+#add-new-file-modal, #upload-json-modal, #new-test-confirmation {
     width: 398px;
     position: absolute;
     left: 50%;
@@ -580,33 +580,36 @@ ul.tabs li a.current:after {
     background: #132b21;
     box-shadow: 0 0 120px rgba(0,0,0,0.3);
 }
-#add-new-file-modal{
+
+#add-new-file-modal, #upload-json-modal {
     padding-left : 1%; 
     padding-right: 1%;
     height: 275px;
 }
 #new-test-confirmation {
     height: 160px;
+    width: 450px;
 }
-#add-new-file-modal .modal-dialog, #new-test-confirmation .modal-dialog{
+
+#add-new-file-modal .modal-dialog, #new-test-confirmation .modal-dialog, #upload-json-modal .modal-dialog{
     display: flex;
     flex-direction: column;
     vertical-align: middle;
     margin-top: 0px;
     margin-bottom: -50px;
 }
-#add-new-file-modal .modal-header, #new-test-confirmation .modal-header {
+#add-new-file-modal .modal-header, #new-test-confirmation .modal-header, #upload-json-modal .modal-header {
     border-bottom-color: transparent;
 }   
-#add-new-file-modal .close, #new-test-confirmation .close {
+#add-new-file-modal .close, #new-test-confirmation .close, #upload-json-modal .close {
     color: #addf82;
 }
-#new-test-confirmation .modal-header .close, #add-new-file-modal .close{
+#new-test-confirmation .modal-header .close, #add-new-file-modal .close, #upload-json-modal .modal-header .close{
     margin-right: -25px;
     padding: 3px;
 }
 
-#new-test-confirmation .modal-body, #add-new-file-modal .modal-body {
+#new-test-confirmation .modal-body, #add-new-file-modal .modal-body, #upload-json-modal .modal-body {
     padding-top: 25px;
     padding-bottom: 0px;
     color: white;
@@ -616,17 +619,20 @@ ul.tabs li a.current:after {
     padding: 0;
 }
 #new-test-confirmation .btn-newtest {
-    padding: 8px 30px;
-    margin: 3px 3px;
+    padding: 10px 30px;
+    margin: 4px 4px;
+}
+#new-test-confirmation .modal-header .close {
+    margin-right: -10px;
 }
-#add-new-file-modal .modal-content, #new-test-confirmation .modal-content {
+#add-new-file-modal .modal-content, #new-test-confirmation .modal-content, #upload-json-modal .modal-content {
     background-color: #132b21;
     border-color: transparent;
 }
-#add-new-file-modal .modal-title, #new-test-confirmation .modal-title {
+#add-new-file-modal .modal-title, #new-test-confirmation .modal-title, #upload-json-modal .modal-title {
     color:#addf82;
 }
-#upload_file_form, #new-test-confirmation {
+.upload_file_form_test_file, .upload_file_form_json, #new-test-confirmation {
     color: white;
 }
 .about {

diff --git a/locust/templates/index.html b/locust/templates/index.html
@@ -132,7 +132,7 @@ <h4 class="modal-title">Are you sure?</h4>
                   <h4 class="modal-title">Upload Test File</h4>
                 </div>
                 <div class="modal-body">
-                    <form method="POST" id="upload_file_form" enctype="multipart/form-data" action="/upload_file">
+                    <form method="POST" class="upload_file_form_test_file" enctype="multipart/form-data" action="/upload_file">
                         <label>Path :</label>
                         <select name="upload_directory" id="directories" class="select2">
                             {% for value in test_file_directories %}
@@ -143,9 +143,9 @@ <h4 class="modal-title">Upload Test File</h4>
                         <br/>
                         <label>File to upload :</label>
                         <br/>
-                        <input type="file" accept=".py" name="python_file" id="python_file" />
+                        <input type="file" accept=".py" name="uploaded_file" class="uploaded_file" />
                         <br/>
-                        <input type="submit" value="Upload" id="upload_btn_submit" />
+                        <input type="submit" value="Upload" id="upload_py_submit" />
                     </form>
                 </div>
               </div>
@@ -230,7 +230,7 @@ <h2>Ramping</h2>
         <div class="edit_config" id="edit_config" style="display:none;">
             <div class="head_section">
                 <div class="container">
-                    <div class="title_header">Configuration</div>
+                    <div class="title_header">Main Configuration</div>
                     <ul id="link_navigation">
                         <li><a href="#" class="config_new_test">New Test</a></li>
                         {% if ramp %}
@@ -239,6 +239,7 @@ <h2>Ramping</h2>
                     </ul>
                 </div>
             </div>
+
             <div class="custom_padder container body_section">
                 <label>Import CSV</label>
                 <form method="POST" enctype="multipart/form-data" id="import_csv_form">
@@ -272,6 +273,41 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
                     </div>
                 </div>
             </div>
+            <div class="custom_padder container body_section">
+                <div class="title_header">Team Configuration</div>
+                <br/>
+                <button type="button" data-toggle="modal" data-target="#upload-json-modal" >Upload JSON</button>
+            </div>
+        </div>
+
+        <div id="upload-json-modal" class="modal fade" role="dialog">
+            <div class="modal-dialog">
+
+              <!-- Modal content-->
+              <div class="modal-content">
+                <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">&times;</button>
+                  <h4 class="modal-title">Upload JSON</h4>
+                </div>
+                <div class="modal-body">
+                    <form method="POST" class="upload_file_form_json" enctype="multipart/form-data" action="/upload_file">
+                        <label>Path :</label>
+                        <select name="upload_directory" id="directories" class="select2">
+                            {% for value in all_test_file_directories %}
+                                <option value="{{value}}">{{value}}</option>
+                            {% endfor %}
+                        </select>
+                        <br/>
+                        <br/>
+                        <label>File to upload :</label>
+                        <br/>
+                        <input type="file" accept=".json" name="uploaded_file" class="uploaded_file" />
+                        <br/>
+                        <input type="submit" value="Upload" id="upload_json_submit" />
+                    </form>
+                </div>
+              </div>
+            </div>
         </div>
 
         <div class="multiple_column" id="multiple_column" style="display:none;">

diff --git a/locust/web.py b/locust/web.py
@@ -65,6 +65,7 @@ def index():
     modules = tests_loader.populate_directories(fileio.os_path(),'tests/modules/')
     modules.update(pages)
     directories = modules
+    all_directories = tests_loader.populate_directories(fileio.os_path(),'tests/')
 
     return render_template("index.html",
         state=runners.locust_runner.state,
@@ -73,6 +74,7 @@ def index():
         user_count=runners.locust_runner.user_count,
         available_locustfiles = sorted(runners.locust_runner.available_locustfiles.keys()),
         test_file_directories = sorted(directories),
+        all_test_file_directories = sorted(all_directories),
         version=version,
         ramp = _ramp,
         host=host
@@ -325,16 +327,18 @@ def convert_csv_to_json():
 @app.route("/upload_file", methods=["POST"])
 def upload_file():
     upload_directory = request.form.get('upload_directory')
-    python_file = request.files['python_file']
-    python_file_path = upload_directory + python_file.filename
-    python_file_extension = os.path.splitext(python_file.filename)[1]
-    python_file_content = python_file.read()
-    if not python_file and python_file_extension != ".py":
-        return expected_response({'success':False, 'message':"Can't upload this file. Please try again with python file with .py extension"})
-    upload_status,upload_message = fileio.write(python_file_path, python_file_content)
+    uploaded_file = request.files['uploaded_file']
+    uploaded_file_path = upload_directory + uploaded_file.filename
+    uploaded_file_extension = os.path.splitext(uploaded_file.filename)[1]
+    uploaded_file_content = uploaded_file.read()    
+    if not uploaded_file :
+        return expected_response({'success':False, 'message':'Please choose .json or .py file to upload'})
+    if uploaded_file_extension != ".py" and uploaded_file_extension != ".json":
+        return expected_response({'success':False, 'message':"Can't upload this file. Currently only supports .json or .py file"})
+    upload_status,upload_message = fileio.write(uploaded_file_path, uploaded_file_content)
     if upload_status is False :
         return expected_response({'success':False, 'message':upload_message})
-    events.master_new_file_uploaded.fire(new_file={"full_path": python_file_path, "name": python_file.filename, "content":python_file_content})
+    events.master_new_file_uploaded.fire(new_file={"full_path": uploaded_file_path, "name": uploaded_file.filename, "content":uploaded_file_content})
     runners.locust_runner.reload_tests()
     return expected_response({'success':True, 'message':""})