Have added an edit form to the interface for changing number of locus…

…ts, TODO: issue with status not updating after posting swarm_form
locustio · Sep 1, 2011 · 9c495c2 · 9c495c2
1 parent f95c1da
commit 9c495c2
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 8 deletions.
diff --git a/locust/static/style.css b/locust/static/style.css
@@ -86,37 +86,37 @@ a {
     padding-top: 20px;
 }
 
-.start {
+.start, .edit {
     width: 398px;
     position: absolute;
     left: 50%;
     top: 100px;
     margin-left: -169px;
 }
-.start .padder {
+.start .padder, .edit .padder {
     padding: 30px;
     padding-top: 0px;
 }
-.start h2 {
+.start h2, .edit h2 {
     color: #addf82;
     font-size: 26px;
     font-weight: bold;
 }
-.start label {
+.start label, .edit label {
     display: block;
     margin-bottom: 10px;
     margin-top: 20px;
     font-size: 16px;
 }
-.start input.val {
+.start input.val, .edit input.val {
     border: none;
     background: #fff;
     height: 52px;
     width: 328px;
     font-size: 24px;
     padding-left: 10px;
 }
-.start input.start_button {
+.start input.start_button, .edit input.start_button {
     margin-top: 20px;
     float: right;
 }
@@ -130,27 +130,43 @@ a {
     border: 3px solid #eee;
     background: #111717;
 }
+
+.stopped .edit {display: none;}
+.running .edit, .hatching .edit {
+    display: none;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radisu: 5px;
+    border: 3px solid #eee;
+    background: #111717;
+}
 .running .start, .hatching .start {display: none;}
+
+.ready .edit {display: none;}
 .ready .start {display: block;}
 
 .running .status, .hatching .status {display: block;}
-.stopped .status {display: blocked;}
+.stopped .status {display: block;}
 .ready .status {display: none;}
 
+.stopped .boxes .edit_test, .ready .boxes .edit_test {display: none;}
 .stopped .boxes .user_count, .ready .boxes .user_count {display: none;}
 
 .running a.new_test, .ready a.new_test, .hatching a.new_test {display: none;}
 .running a.new_test {display: none;}
 .stopped a.new_test {display: block;}
 
-.start a.close_link {
+.start a.close_link, .edit a.close_link{
     position: absolute;
     right: 10px;
     top: 10px;
 }
 .stopped .start a.close_link {display: inline;}
 .running .start a.close_link, .ready .start a.close_link, .hatching .start a.close_link  {display: none;}
 
+.stopped .edit a.close_link, .ready .edit a.close_link {display: none;}
+.running .edit a.close_link, .hatching .edit a.close_link {display: inline;}
+
 .status table {
     border-collapse: collapse;
     width: 100%;

diff --git a/locust/templates/index.html b/locust/templates/index.html
@@ -18,6 +18,7 @@
                         <span id="userCount">{{user_count}}</span> users
                     </div>
                     <a href="#" class="new_test">New test</a>
+                    <a href="#" class="edit_test">Edit</a>
                 </div>
                 {% if is_distributed %}
                     <div class="top_box box_slaves" id="box_rps">
@@ -58,6 +59,23 @@ <h2>Start new Locust swarm</h2>
                 <div style="clear:right;"></div>
             </div>
         </div>
+
+        <div class="edit" id="edit">
+            <div style="position:relative;">
+                <a href="#" class="close_link">Close</a>
+            </div>
+            <div class="padder">
+                <h2>Change the locust count</h2>
+                <form action="/swarm" method="POST" id="edit_form">
+                    <label for="locust_count">Number of users to simulate</label>
+                    <input type="text" name="locust_count" id="locust_count" class="val" /><br>
+                    <label for="hatch_rate">Hatch rate <span style="color:#8a8a8a;">(users spawned/second)</span></label>
+                    <input type="text" name="hatch_rate" id="hatch_rate" class="val" /><br>
+                    <input type="image" src="/static/img/start_button.png" value="Start swarming" class="start_button"></td>
+                </form>
+                <div style="clear:right;"></div>
+            </div>
+        </div>
 
         <div class="status" id="status">
             <ul class="tabs">
@@ -169,12 +187,17 @@ <h1>Version</h1>
             $("body").attr("class", "stopped");
             $(".box_stop").hide();
             $("a.new_test").show();
+            $("a.edit_test").hide();
             $(".user_count").hide();
         });
         $(".new_test").click(function(event) {
             event.preventDefault();
             $("#start").show();
         });
+        $(".edit_test").click(function(event) {
+            event.preventDefault();
+            $("#edit").show();
+        });
         $(".close_link").click(function(event) {
             event.preventDefault();
             $(this).parent().parent().hide();
@@ -196,11 +219,23 @@ <h1>Version</h1>
                         $("#status").fadeIn();
                         $(".box_running").fadeIn();
                         $("a.new_test").fadeOut();
+                        $("a.edit_test").fadeIn();
                         $(".user_count").fadeIn();
                     }
                 }
             );
         });
+
+        $('#edit_form').submit(function(event) {
+            event.preventDefault();
+            $.post($(this).attr("action"), $(this).serialize(),
+                function(response) {
+                    if (response.success) {
+                        $("#edit").fadeOut();
+                    }
+                }
+            );
+        });
 
         function updateStats() {
             $.get('/stats/requests', function (data) {