Added blocks to start and edit

docs/extending-locust.rst

@@ -121,6 +121,10 @@ A working example of extending the web UI, complete with HTML and Javascript exa
 in the `examples directory <https://github.com/locustio/locust/tree/master/examples>`_ of the Locust 
 source code.
 
+Another working example of how to change the web UI to customize the start of your load tests can be found in the
+`custom_test_start directory <https://github.com/locustio/locust/tree/master/examples/custom_test_start>`_ of the
+Locust source code.
+
 
 
 Run a background greenlet

examples/custom_test_start/README.md

@@ -0,0 +1,11 @@
+# Custom Start UI
+
+This Example shows how to use flasks Blueprints and templates to add custom items to the start of a loadtest.
+
+## Files:
+- `extend_test_start.py:` This file contains a sample locustfile with the necessary routes to get the data from the forms
+and share them to the requests. 
+- `templates/extend_test_start.html: ` This file contains the extended html blocks that utilises flasks templates to
+integrate new html code to locusts UI
+- `static/extended_test_start.js:` This file has ajax code that posts the new forms to the backend to send the new authentication
+data to the request objects

examples/custom_test_start/extend_test_start.py

@@ -0,0 +1,68 @@
+# -*- coding: utf-8 -*-
+
+"""
+This is an example of a locustfile to use locust's builtin
+web extensions to add custom start and edit fields on a loadtest.
+"""
+
+import os
+from requests.auth import HTTPDigestAuth
+from locust import HttpUser, TaskSet, task, web, between, events
+from flask import Blueprint, render_template, jsonify, request
+
+AUTH = None
+
+
+class MyTaskSet(TaskSet):
+    @task(2)
+    def index(self):
+        self.client.get("/", auth=globals()['AUTH'])
+
+    @task(1)
+    def stats(self):
+        self.client.get("/stats/requests", auth=globals()['AUTH'])
+
+
+class WebsiteUser(HttpUser):
+    host = "http://127.0.0.1:8089"
+    wait_time = between(2, 5)
+    tasks = [MyTaskSet]
+
+
+#Set up the flask blueprint to extend the locust UI
+path = os.path.dirname(os.path.abspath(__file__))
+extend = Blueprint(
+    "extend",
+    "custom_test_start",
+    static_folder=f"{path}/static/",
+    static_url_path="/extend/static/",
+    template_folder=f"{path}/templates/",
+)
+
+
+@events.init.add_listener
+def locust_init(environment, **kwargs):
+    if environment.web_ui:
+        @extend.route("/custom-start")
+        def custom_load_start():
+            """
+            Add a route to see your new changes to the Locust UI
+            Navigate to this route to start and monitor a new test
+            """
+            environment.web_ui.update_template_args()
+            return render_template("extend_test_start.html", **environment.web_ui.template_args)
+
+        @extend.route("/customize-load-test", methods=["POST"])
+        def customize_load_test():
+            """
+            Add a route to send your new form changes to so you can update the the load test
+            """
+            globals()['AUTH'] = HTTPDigestAuth(request.form['username'], request.form['password'])
+
+            return jsonify({"post": "Success setting authentication"})
+
+        #register our new routes and extended UI with the Locust UI
+        environment.web_ui.app.register_blueprint(extend)
+
+
+

examples/custom_test_start/static/extend_test_start.js

@@ -0,0 +1,24 @@
+//Block of code to post the items of the form to the backend
+$('#customize_start_form').submit(function(event) {
+    event.preventDefault();
+    $.post("./customize-load-test", $(this).serialize(),
+        function(response) {
+            if (response.success) {
+               console.log(response)
+            }
+        }
+    );
+    return false;
+});
+
+//Block of code to post the items of the form to the backend
+$('#customize_edit_form').submit(function(event) {
+    event.preventDefault();
+    $.post("./customize-load-test", $(this).serialize(),
+        function(response) {
+            if (response.success) {
+               console.log(response)
+            }
+        }
+    );
+});

examples/custom_test_start/templates/extend_test_start.html

@@ -0,0 +1,29 @@
+{% extends "index.html" %}
+
+{% block extended_start %}
+<h2>Customize your load test</h2>
+<form id="customize_start_form">
+    <label for="username">Username</label>
+    <input type="text" name="username" id="username" class="val" value=""/><br>
+    <label for="password">Password</label>
+    <input type="password" name="password" id="password" class="val" value=""/><br>
+    <button type="submit">Customize Load Test</button>
+</form>
+<div style="clear:right;"></div>
+{% endblock extended_start %}
+
+{% block extended_edit %}
+<h2>Customize your load test</h2>
+<form id="customize_edit_form">
+    <label for="username">Username</label>
+    <input type="text" name="username" id="username" class="val" value=""/><br>
+    <label for="password">Password</label>
+    <input type="password" name="password" id="password" class="val" value=""/><br>
+    <button type="submit">Customize Load Test</button>
+</form>
+<div style="clear:right;"></div>
+{% endblock extended_edit %}
+
+{% block extended_script %}
+<script type="text/javascript" src="./extend/static/extend_test_start.js"></script>
+{% endblock extended_script %}

locust/templates/index.html

@@ -56,6 +56,7 @@
                 <a href="#" class="close_link">Close</a>
             </div>
             <div class="padder">
+                {% block extended_start %}{% endblock extended_start %}
                 <h2>Start new load test</h2>
                 <form action="./swarm" method="POST" id="swarm_form">
                     {% if is_shape %}
@@ -89,6 +90,7 @@ <h2>Start new load test</h2>
                 <a href="#" class="close_link">Close</a>
             </div>
             <div class="padder">
+                {% block extended_edit %}{% endblock extended_edit %}
                 <h2>Edit running load test</h2>
                 <form action="./swarm" method="POST" id="edit_form">
                     {% if is_shape %}