<!DOCTYPE html> 
<html>
<head> 
    <title>Locust</title> 
    <link rel="stylesheet" type="text/css" href="/static/style.css" media="screen">
</head> 
<body class="{{state}}">
    <div class="top">
        <div class="top_content">
            <img src="/static/img/logo.png" class="logo" onclick="$('.about').fadeIn();" />
            <div class="boxes">
                <div class="top_box box_status">
                    <div class="label">STATUS</div>
                    <div class="value" id="status_text">
                        {{state}}
                    </div>
                    <div class="user_count">
                        <span id="userCount">{{user_count}}</span> users
                    </div>
                    <a href="#" class="new_test" id="new_test">New test</a>
                    <a href="#" class="edit_test">Edit</a>
                    {% if ramp %}
                        <a href="#" class="new_test ramp_test">Ramp</a>
                    {% endif %}
                </div>
                {% if is_distributed %}
                    <div class="top_box box_slaves" id="box_rps">
                        <div class="label">SLAVES</div>
                        <div class="value" id="slaveCount">{{slave_count}}</div>
                    </div>
                {% endif %}
                <div class="top_box box_rps box_running" id="box_rps">
                    <div class="label">RPS</div>
                    <div class="value" id="total_rps">0</div>
                </div>
                <div class="top_box box_fail box_running" id="box_fail">
                    <div class="label">FAILURES</div>
                    <div class="value"><span id="fail_ratio"></span>%</div>
                </div>
                <div class="top_box box_stop box_running" id="box_stop">
                    <a href="/stop"><img src="/static/img/stop.png" style="border:0;"></a>
                </div>
                <div class="top_box box_stop box_running" id="box_reset">
                    <a href="/stats/reset">Reset Stats</a>
                </div>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>
    <div class="main">
        
        <div class="start" id="start">
            <div style="position:relative;">
                <a href="#" class="close_link">Close</a>
            </div>
            <div class="padder">
                <h2>Start new Locust swarm</h2>
                <form action="/swarm" method="POST" id="swarm_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">
                </form>
                <div style="clear:right;"></div>
            </div>
            <br>
            <div class="ramp_text">
            {% if ramp %}

                ...or let locust <a href="#" class="ramp_test">ramp</a> find the highest stable locust count for you
            {% endif %}
            </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="new_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="new_hatch_rate" class="val" /><br>
                    <input type="image" src="/static/img/start_button.png" value="Start swarming" class="start_button">
                </form>
                <div style="clear:right;"></div>
            </div>
        </div>

        {% if ramp %}
            <div class="start ramp" id="ramp">
                <div style="position:relative;">
                    <a href="#" class="close_link">Close</a>
                </div>
                <div class="padder">
                    <h2>Ramping</h2>
                    <form action="/ramp" method="POST" id="ramp_form">
                        <div style="float:left;">
                        <label for="init_count" title="This is the number of initial number of locusts that will be spawned. Pick a number you know can be handled.">Initial number of clients</label>
                        <input type="text" name="init_count" id="init_count" class="val" /><br>
                        <label for="hatch_rate" title="This is the rate locusts/second at which all slaves together will spawn additional locusts">Hatch rate <span style="color:#8a8a8a;">(users spawned/second)</span></label>
                        <input type="text" name="hatch_rate" id="hatch_rate" class="val" /><br>
                        <label for="hatch_stride" title="This is the amount of locusts that will be spawned in between each sleep (calibration)">Hatch stride</label>
                        <input type="text" name="hatch_stride" id="hatch_stride" class="val" /><br>
                        <label for="precision" title="Hatchstride will lower when a threshold has been reached and when hachstride <= precision; the sweet spot has been found">Precision (min value of hatch stride)</label>
                        <input type="text" name="precision" id="precision" class="val" /><br>
                        <label for="wait_time" title="The amount of time to sleep to gather enough statistics before checking for thresholds">Calibration time (seconds)</label>
                        <input type="text" name="wait_time" id="wait_time" class="val" value="20" /><br>
                        </div>
                        <div style="float:right;">
                        <label for="max_count" title="This is a threshold, if exceeded we start ramping down">Max number of clients</label>
                        <input type="text" name="max_count" id="max_count" class="val" /><br>
                        <label for="percentile" title="Threshold - The percentage of all responses that has to be have response times lower than a set limit.">Percentile (%)</label>
                        <input type="text" name="percentile" id="percentile" class="val" value="95" /><br>
                        <label for="response_time" title="Threshold - The highest response time that a percentage of all responses must not exceed.">Max percentile response time (ms)</label>
                        <input type="text" name="response_time" id="response_time" class="val" value="2000" /><br>
                        <label for="fail_rate" title="This threshold is the highest ratio in percent of all requests that are allowed to fail.">Accepted fail ratio (%)</label>
                        <input type="text" name="fail_rate" id="fail_rate" class="val" value="5" /><br>
                        <br><br>
                        <input type="image" src="/static/img/start_button.png" value="Start swarming" class="start_button">
                        </div>

                    </form>
                    <div style="clear:right;"></div>
                </div>
            </div>
        {% endif %}
        
        <div class="status" id="status">
            <ul class="tabs">
                <li><a href="#">Statistics</a></li>
                <li><a href="#">Failures</a></li>
                <li><a href="#">Exceptions</a></li>
            </ul>
            <div style="clear:left;"></div>
            <div class="panes">
                <div style="display:none;">
                    <table id="stats" class="stats">
                        <thead>
                            <tr>
                                <th class="stats_label" href="#" data-sortkey="method">Method</th>
                                <th class="stats_label" href="#" data-sortkey="name">Name</th>
                                <th class="stats_label" href="#" data-sortkey="num_reqs"># requests</th>
                                <th class="stats_label" href="#" data-sortkey="num_failures"># fails</th>
                                <th class="stats_label" href="#" data-sortkey="median_response_time">Median</th>
                                <th class="stats_label" href="#" data-sortkey="avg_response_time">Average</th>
                                <th class="stats_label" href="#" data-sortkey="min_response_time">Min</th>
                                <th class="stats_label" href="#" data-sortkey="max_response_time">Max</th>
                                <th class="stats_label" href="#" data-sortkey="avg_content_length">Content Size</th>
                                <th class="stats_label" href="#" data-sortkey="current_rps"># reqs/sec</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <div style="margin-top:20px;">
                        <a href="/stats/requests/csv">Download request statistics CSV</a><br />
                        <a href="/stats/distribution/csv">Download response time distribution CSV</a>
                    </div>
                </div>
                <div style="display:none;">
                    <table id="errors" class="stats">
                        <thead>
                            <th class="error_count stats_label" data-sortkey="1"># fails</th>
                            <th class="error_type stats_label" data-sortkey="0">Type</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div style="display:none;">
                    <table id="exceptions" class="stats">
                        <thead>
                            <th class="exception_occurences stats_label" data-sortkey="1"># occurences</th>
                            <th class="exception_traceback stats_label" data-sortkey="0">Traceback</th>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="about" style="display:none;">
            <div style="position:relative;">
                <a href="#" class="close_link">Close</a>
            </div>
            <div class="padder">
                <h1>About</h1>
                <p>
                    The original idea for Locust was Carl Byström's who made a first proof of concept in June 2010. 
                    Jonatan Heyman picked up Locust in January 2011, implemented the current concept of Locust classes
                    and made it work distributed across multiple machines.
                </p>                
                <p>
                    Jonatan, Carl and Joakim Hamrén has continued the development of Locust at their job, 
                    ESN Social Software, who have adopted Locust as an inhouse Open Source project.
                </p>
                
                <h1>Authors and Copyright</h1>
                <a href="http://cgbystrom.com/">Carl Byström</a> (<a href="http://twitter.com/cgbystrom/">@cgbystrom</a>)<br>
                <a href="http://heyman.info/">Jonatan Heyman</a> (<a href="http://twitter.com/jonatanheyman/">@jonatanheyman</a>)<br>
                Joakim Hamrén (<a href="http://twitter.com/Jahaaja/">@jahaaja</a>)<br>
                <a href="http://esn.me/">ESN Social Software</a> (<a href="http://twitter.com/esnme/">@esnme</a>)<br>
                Hugo Heyman (<a href="http://twitter.com/hugoheyman/">@hugoheyman</a>)
                
                
                <h1>License</h1>
                Open source licensed under the MIT license.
                
                <h1>Version</h1>
                {{version}}<br>
                <a href="http://locust.io/">http://locust.io</a>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/static/jquery-1.4.min.js"></script> 
    <script type="text/javascript" src="/static/jquery.jqote2.min.js"></script>
    <script type="text/javascript" src="/static/jquery.tools.min.js"></script> 
    <script type="text/x-jqote-template" id="stats-template">
        <![CDATA[
        <tr class="<%=(alternate ? "dark" : "")%>">
            <td><%= (this.method ? this.method : "") %></td>
            <td><%= this.name %></td>
            <td class="numeric"><%= this.num_reqs %></td>
            <td class="numeric"><%= this.num_failures %></td>
            <td class="numeric"><%= Math.round(this.median_response_time) %></td>
            <td class="numeric"><%= Math.round(this.avg_response_time) %></td>
            <td class="numeric"><%= this.min_response_time %></td>
            <td class="numeric"><%= this.max_response_time %></td>
            <td class="numeric"><%= Math.round(this.avg_content_length) %></td>
            <td class="numeric"><%= Math.round(this.current_rps*100)/100 %></td>
        </tr>
        <% alternate = !alternate; %>
        ]]>
    </script>
    <script type="text/x-jqote-template" id="errors-template">
        <![CDATA[
        <tr class="<%=(alternate ? "dark" : "")%>">
            <td><%= this[1] %></td>
            <td><%= function(e) { return e.replace("<", "&lt;"); }(this[0]) %></td>
        </tr>
        <% alternate = !alternate; %>
        ]]>
    </script>
    <script type="text/x-jqote-template" id="exceptions-template">
        <![CDATA[
        <tr class="<%=(alternate ? "dark" : "")%>">
            <td class="occurences"><%= this.count %></td>
            <td class="traceback" title="Occured on: <%= this.nodes %>"><%= function(e) { return e.replace("<", "&lt;"); }(this.traceback) %>
<%= function(e) { return e.replace("<", "&lt;"); }(this.msg) %></td>
        </tr>
        <% alternate = !alternate; %>
        ]]>
    </script>
    <script type="text/javascript" src="/static/locust.js"></script>
</body>
</html>
