From cc2b968ee702972b28f8bf5c7c6db0d40c73610b Mon Sep 17 00:00:00 2001
From: rizalfr <rizal.rahman@gmail.com>
Date: Mon, 21 May 2018 07:57:24 +0700
Subject: [PATCH 1/5] enabling json uploading

---
 locust/templates/index.html | 70 +++++++++++++++++++++++++++++++++++++
 locust/web.py               |  3 +-
 2 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/locust/templates/index.html b/locust/templates/index.html
index 2a7fbf74d1..2948e58372 100644
--- a/locust/templates/index.html
+++ b/locust/templates/index.html
@@ -239,6 +239,42 @@ <h2>Ramping</h2>
                     </ul>
                 </div>
             </div>
+            <div class=" container ">
+                <ul class="nav nav-tabs">
+                    <li class="active">
+                        <a data-toggle="tab" href="#home">Home</a>
+                    </li>
+                    <li>
+                        <a data-toggle="tab" href="#menu1">Menu 1</a>
+                    </li>
+                    <li>
+                        <a data-toggle="tab" href="#menu2">Menu 2</a>
+                    </li>
+                    <li>
+                        <a data-toggle="tab" href="#menu3">Menu 3</a>
+                    </li>
+                </ul>
+                
+                <div class="tab-content">
+                    <div id="home" class="tab-pane fade in active">
+                        <h3>HOME</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+                            aliqua.</p>
+                    </div>
+                    <div id="menu1" class="tab-pane fade">
+                        <h3>Menu 1</h3>
+                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    </div>
+                    <div id="menu2" class="tab-pane fade">
+                        <h3>Menu 2</h3>
+                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
+                    </div>
+                    <div id="menu3" class="tab-pane fade">
+                        <h3>Menu 3</h3>
+                        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+                    </div>
+                </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 +308,40 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
                     </div>
                 </div>
             </div>
+            <div class="custom_padder container body_section">
+                <label>Upload JSON</label>
+                <button type="button" data-toggle="modal" data-target="#upload_json" >Upload JSON</button>
+            </div>
+        </div>
+
+        <div id="upload_json" 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" id="upload_file_form" enctype="multipart/form-data" action="/upload_file">
+                        <label>Path :</label>
+                        <select name="upload_directory" id="directories" class="select2">
+                            {% for value in test_file_directories %}
+                                <option value="{{value}}">{{value}}</option>
+                            {% endfor %}
+                        </select>
+                        <br/>
+                        <br/>
+                        <label>File to upload :</label>
+                        <br/>
+                        <input type="file" accept=".json" name="json_file" id="json_file" />
+                        <br/>
+                        <input type="submit" value="Upload" id="upload_btn_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
index 0ef78ee0a3..b23016aa6f 100644
--- a/locust/web.py
+++ b/locust/web.py
@@ -325,7 +325,8 @@ 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 = request.files['json_file']
+    print dir(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()

From 76f75d25d9a8f72e35fff6f74c087701e68d77b4 Mon Sep 17 00:00:00 2001
From: rizalfr <rizal.rahman@tokopedia.com>
Date: Mon, 21 May 2018 16:50:13 +0700
Subject: [PATCH 2/5] fix modal ui in upload json

---
 locust/static/locust.js     |  8 ++++----
 locust/static/style.css     | 28 +++++++++++++++++-----------
 locust/templates/index.html |  8 ++++----
 locust/web.py               | 19 ++++++++++---------
 4 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/locust/static/locust.js b/locust/static/locust.js
index 28e3b976e0..d606433a8c 100644
--- a/locust/static/locust.js
+++ b/locust/static/locust.js
@@ -170,15 +170,15 @@ $(".edit_config_link").click(function(event) {
     
 });
 
+$("#directories .select2").select2({
+    placeholder: "Select a state"
+});
+
 $('#upload_btn_submit').click(function(event){
     event.preventDefault();
     $('#upload_file_form').submit();
 });
 
-$("#directories .select2").select2({
-    placeholder: "Select a state"
-});
-
 $('#upload_file_form').submit(function(event) {
     event.preventDefault();
     var form = $('#upload_file_form')[0];
diff --git a/locust/static/style.css b/locust/static/style.css
index 20480eed75..a5745b0f85 100644
--- a/locust/static/style.css
+++ b/locust/static/style.css
@@ -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,14 +619,17 @@ 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 {
diff --git a/locust/templates/index.html b/locust/templates/index.html
index 2948e58372..86f4d83c81 100644
--- a/locust/templates/index.html
+++ b/locust/templates/index.html
@@ -143,7 +143,7 @@ <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" id="uploaded_file" />
                         <br/>
                         <input type="submit" value="Upload" id="upload_btn_submit" />
                     </form>
@@ -310,11 +310,11 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
             </div>
             <div class="custom_padder container body_section">
                 <label>Upload JSON</label>
-                <button type="button" data-toggle="modal" data-target="#upload_json" >Upload JSON</button>
+                <button type="button" data-toggle="modal" data-target="#upload_json_modal" >Upload JSON</button>
             </div>
         </div>
 
-        <div id="upload_json" class="modal fade" role="dialog">
+        <div id="upload_json_modal" class="modal fade" role="dialog">
             <div class="modal-dialog">
           
               <!-- Modal content-->
@@ -335,7 +335,7 @@ <h4 class="modal-title">Upload JSON</h4>
                         <br/>
                         <label>File to upload :</label>
                         <br/>
-                        <input type="file" accept=".json" name="json_file" id="json_file" />
+                        <input type="file" accept=".json" name="uploaded_file" id="uploaded_file" />
                         <br/>
                         <input type="submit" value="Upload" id="upload_btn_submit" />
                     </form>
diff --git a/locust/web.py b/locust/web.py
index b23016aa6f..05776152de 100644
--- a/locust/web.py
+++ b/locust/web.py
@@ -325,17 +325,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['json_file']
-    print dir(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':""})
 

From 5c5291e0072ff1719040eadca23ea9b3ef568823 Mon Sep 17 00:00:00 2001
From: rizalfr <rizal.rahman@tokopedia.com>
Date: Tue, 22 May 2018 11:16:01 +0700
Subject: [PATCH 3/5] enabling upload on json also

---
 locust/static/locust.js     | 17 +++++++++---
 locust/static/style.css     | 22 +++++++--------
 locust/templates/index.html | 55 +++++++------------------------------
 locust/web.py               |  4 ++-
 4 files changed, 37 insertions(+), 61 deletions(-)

diff --git a/locust/static/locust.js b/locust/static/locust.js
index d606433a8c..c05db9cabb 100644
--- a/locust/static/locust.js
+++ b/locust/static/locust.js
@@ -174,14 +174,23 @@ $("#directories .select2").select2({
     placeholder: "Select a state"
 });
 
-$('#upload_btn_submit').click(function(event){
+var whichform = $('.upload_file_form')[0];
+
+$('#upload_py_submit').click(function(event){
+    event.preventDefault();
+    whichform = $('.upload_file_form')[0];
+    $('.upload_file_form').submit();
+});
+
+$('#upload_json_submit').click(function(event){
     event.preventDefault();
-    $('#upload_file_form').submit();
+    whichform = $('.upload_file_form')[1];
+    $('.upload_file_form').submit();
 });
 
-$('#upload_file_form').submit(function(event) {
+$('.upload_file_form').submit(function(event) {
     event.preventDefault();
-    var form = $('#upload_file_form')[0];
+    var form = whichform;
     var form_data = new FormData(form);
     $.ajax({
         type: 'POST',
diff --git a/locust/static/style.css b/locust/static/style.css
index a5745b0f85..a7a14b4434 100644
--- 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, #upload_json_modal, #new-test-confirmation {
+#add-new-file-modal, #upload-json-modal, #new-test-confirmation {
     width: 398px;
     position: absolute;
     left: 50%;
@@ -581,7 +581,7 @@ ul.tabs li a.current:after {
     box-shadow: 0 0 120px rgba(0,0,0,0.3);
 }
 
-#add-new-file-modal, #upload_json_modal {
+#add-new-file-modal, #upload-json-modal {
     padding-left : 1%; 
     padding-right: 1%;
     height: 275px;
@@ -591,25 +591,25 @@ ul.tabs li a.current:after {
     width: 450px;
 }
 
-#add-new-file-modal .modal-dialog, #new-test-confirmation .modal-dialog, #upload_json_modal .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, #upload_json_modal .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, #upload_json_modal .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, #upload_json_modal .modal-header .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, #upload_json_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;
@@ -625,14 +625,14 @@ ul.tabs li a.current:after {
 #new-test-confirmation .modal-header .close {
     margin-right: -10px;
 }
-#add-new-file-modal .modal-content, #new-test-confirmation .modal-content, #upload_json_modal .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, #upload_json_modal .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, #new-test-confirmation {
     color: white;
 }
 .about {
diff --git a/locust/templates/index.html b/locust/templates/index.html
index 86f4d83c81..7c629161fe 100644
--- 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" 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="uploaded_file" id="uploaded_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>
@@ -239,42 +239,7 @@ <h2>Ramping</h2>
                     </ul>
                 </div>
             </div>
-            <div class=" container ">
-                <ul class="nav nav-tabs">
-                    <li class="active">
-                        <a data-toggle="tab" href="#home">Home</a>
-                    </li>
-                    <li>
-                        <a data-toggle="tab" href="#menu1">Menu 1</a>
-                    </li>
-                    <li>
-                        <a data-toggle="tab" href="#menu2">Menu 2</a>
-                    </li>
-                    <li>
-                        <a data-toggle="tab" href="#menu3">Menu 3</a>
-                    </li>
-                </ul>
-                
-                <div class="tab-content">
-                    <div id="home" class="tab-pane fade in active">
-                        <h3>HOME</h3>
-                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-                            aliqua.</p>
-                    </div>
-                    <div id="menu1" class="tab-pane fade">
-                        <h3>Menu 1</h3>
-                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-                    </div>
-                    <div id="menu2" class="tab-pane fade">
-                        <h3>Menu 2</h3>
-                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
-                    </div>
-                    <div id="menu3" class="tab-pane fade">
-                        <h3>Menu 3</h3>
-                        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
-                    </div>
-                </div>
-            </div>
+
             <div class="custom_padder container body_section">
                 <label>Import CSV</label>
                 <form method="POST" enctype="multipart/form-data" id="import_csv_form">
@@ -310,11 +275,11 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
             </div>
             <div class="custom_padder container body_section">
                 <label>Upload JSON</label>
-                <button type="button" data-toggle="modal" data-target="#upload_json_modal" >Upload JSON</button>
+                <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 id="upload-json-modal" class="modal fade" role="dialog">
             <div class="modal-dialog">
           
               <!-- Modal content-->
@@ -324,10 +289,10 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
                   <h4 class="modal-title">Upload JSON</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" enctype="multipart/form-data" action="/upload_file">
                         <label>Path :</label>
                         <select name="upload_directory" id="directories" class="select2">
-                            {% for value in test_file_directories %}
+                            {% for value in all_test_file_directories %}
                                 <option value="{{value}}">{{value}}</option>
                             {% endfor %}
                         </select>
@@ -335,9 +300,9 @@ <h4 class="modal-title">Upload JSON</h4>
                         <br/>
                         <label>File to upload :</label>
                         <br/>
-                        <input type="file" accept=".json" name="uploaded_file" id="uploaded_file" />
+                        <input type="file" accept=".json" name="uploaded_file" class="uploaded_file" />
                         <br/>
-                        <input type="submit" value="Upload" id="upload_btn_submit" />
+                        <input type="submit" value="Upload" id="upload_json_submit" />
                     </form>
                 </div>
               </div>
diff --git a/locust/web.py b/locust/web.py
index 05776152de..314030043b 100644
--- 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
@@ -328,7 +330,7 @@ def upload_file():
     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()
+    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":

From 0049c7bf53f1daba63083d5da75dca4df81ed87b Mon Sep 17 00:00:00 2001
From: rizalfr <rizal.rahman@tokopedia.com>
Date: Wed, 6 Jun 2018 17:21:17 +0700
Subject: [PATCH 4/5] modify ui a bit and avoid duplicated message

---
 locust/static/locust.js     | 33 +++++++++++++++++++++++++--------
 locust/static/style.css     |  2 +-
 locust/templates/index.html |  9 +++++----
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/locust/static/locust.js b/locust/static/locust.js
index c05db9cabb..ec73de78e4 100644
--- a/locust/static/locust.js
+++ b/locust/static/locust.js
@@ -174,24 +174,41 @@ $("#directories .select2").select2({
     placeholder: "Select a state"
 });
 
-var whichform = $('.upload_file_form')[0];
 
 $('#upload_py_submit').click(function(event){
     event.preventDefault();
-    whichform = $('.upload_file_form')[0];
-    $('.upload_file_form').submit();
+    $('.upload_file_form_test_file').submit();
 });
 
 $('#upload_json_submit').click(function(event){
     event.preventDefault();
-    whichform = $('.upload_file_form')[1];
-    $('.upload_file_form').submit();
+    $('.upload_file_form_json').submit();
 });
 
-$('.upload_file_form').submit(function(event) {
+$('.upload_file_form_test_file').submit(function(event) {
     event.preventDefault();
-    var form = whichform;
-    var form_data = new FormData(form);
+    var form_data = new FormData($('.upload_file_form_test_file')[0]);
+    $.ajax({
+        type: 'POST',
+        url: "/upload_file",
+        enctype: "multipart/form-data",
+        contentType: false,
+        data: form_data,
+        cache: false,
+        processData: false,
+        success: function (response) {
+            if (response.success) {
+                location.reload(true);
+            } else {
+                alert(response.message);
+            }
+        }
+    })
+});
+
+$('.upload_file_form_json').submit(function(event) {
+    event.preventDefault();
+    var form_data = new FormData($('.upload_file_form_json')[0]);
     $.ajax({
         type: 'POST',
         url: "/upload_file",
diff --git a/locust/static/style.css b/locust/static/style.css
index a7a14b4434..92994f4096 100644
--- a/locust/static/style.css
+++ b/locust/static/style.css
@@ -632,7 +632,7 @@ ul.tabs li a.current:after {
 #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
index 7c629161fe..96194d03d0 100644
--- 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" class="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 %}
@@ -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 %}
@@ -274,7 +274,8 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
                 </div>
             </div>
             <div class="custom_padder container body_section">
-                <label>Upload JSON</label>
+                <div class="title_header">Team Configuration</div>
+                <br/>
                 <button type="button" data-toggle="modal" data-target="#upload-json-modal" >Upload JSON</button>
             </div>
         </div>
@@ -289,7 +290,7 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
                   <h4 class="modal-title">Upload JSON</h4>
                 </div>
                 <div class="modal-body">
-                    <form method="POST" class="upload_file_form" enctype="multipart/form-data" action="/upload_file">
+                    <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 %}

From 23ae9448e92072f33e2a63addb34f7d28d2be317 Mon Sep 17 00:00:00 2001
From: rizalfr <rizal.rahman@tokopedia.com>
Date: Wed, 6 Jun 2018 18:44:36 +0700
Subject: [PATCH 5/5] unify the function

---
 locust/static/locust.js | 29 +++++------------------------
 1 file changed, 5 insertions(+), 24 deletions(-)

diff --git a/locust/static/locust.js b/locust/static/locust.js
index ec73de78e4..c9ec284c67 100644
--- a/locust/static/locust.js
+++ b/locust/static/locust.js
@@ -174,20 +174,23 @@ $("#directories .select2").select2({
     placeholder: "Select a state"
 });
 
+let whichform = $('.upload_file_form_test_file')[0];
 
 $('#upload_py_submit').click(function(event){
     event.preventDefault();
+    whichform = $('.upload_file_form_test_file')[0];
     $('.upload_file_form_test_file').submit();
 });
 
 $('#upload_json_submit').click(function(event){
     event.preventDefault();
+    whichform = $('.upload_file_form_json')[0];
     $('.upload_file_form_json').submit();
 });
 
-$('.upload_file_form_test_file').submit(function(event) {
+$('.upload_file_form_test_file, .upload_file_form_json').submit(function(event) {
     event.preventDefault();
-    var form_data = new FormData($('.upload_file_form_test_file')[0]);
+    var form_data = new FormData(whichform);
     $.ajax({
         type: 'POST',
         url: "/upload_file",
@@ -206,28 +209,6 @@ $('.upload_file_form_test_file').submit(function(event) {
     })
 });
 
-$('.upload_file_form_json').submit(function(event) {
-    event.preventDefault();
-    var form_data = new FormData($('.upload_file_form_json')[0]);
-    $.ajax({
-        type: 'POST',
-        url: "/upload_file",
-        enctype: "multipart/form-data",
-        contentType: false,
-        data: form_data,
-        cache: false,
-        processData: false,
-        success: function (response) {
-            if (response.success) {
-                location.reload(true);
-            } else {
-                alert(response.message);
-            }
-        }
-    })
-});
-
-
 $('#submit_json_btn').click(function(){
     event.preventDefault();
     $('#hidden_config_json').val(JSON.stringify(json_editor.get(), null , 4));