metrics.scala.html

@(token: String)

@main("Performance Test Tool for Server Sent Events") {

    <h1>Performance Test Tool for Server Sent Events</h1>
    
    <div>
        <input id="urlField" value="http://birdwatch.matthiasnehlsen.com/tweetFeedCF" width="300" /><br />
        <button class="startButtons" id="addOneButton">+1</button>
        <button class="startButtons" id="addTenButton">+10</button>
        <button class="startButtons" id="addFiftyButton">+50</button>
        <button class="stopButtons" id="removeAllButton">Stop</button><br />
        <button class="startButtons" id="rampButton">Ramp</button>
        <span class="ramp">add</span> <input id="rampCount" value="50"/><span class="ramp"> clients every </span> 
        <input id="rampInterval" value="3"/><span class="ramp"> seconds.</span>
        <button class="stopButtons" id="stopRampButton">Stop Ramp</button>


    </div>

    <div id="metricsText">
        Clients active: <span class="metricVal" id="clientsActive">0</span> total: <span class="metricVal" id="clientsTotal">0</span><br />
        KB/s: <span class="metricVal" id="KBReceived"></span><br />
        MB total: <span class="metricVal" id="MBtotal"></span><br />
        Msg total: <span class="metricVal" id="MsgTotal">0</span><br />
        Msg/s: <span class="metricVal" id="MsgS">0</span><br />
    </div>

    <div id="heartbeat"></div>
    
    <div id="msgChart" class="barchart">
        <h2>Messages per Second:</h2>
        <div id="msgChartSvg"></div>
    </div>
    
    <div id="clientsChart" class="barchart">
        <h2>Active Clients:</h2>

        <div id="clientsChartSvg"></div>
    </div>
    
    <div id="mbSecChart" class="barchart">
        <h2>MB per Second:</h2>

        <div id="mbSecChartSvg"></div>
    </div>

    <div id="description">

        <br />
        
        <h1>sse-perf</h1>

        <p>This is a reactive web application for load testing Server Sent Event streams. It makes use of <a href="http://www.playframework.com">Play Framework 2.1</a> and <a href="http://d3js.org">D3.js</a> for visualizing performance metrics of a number of concurrent connections.</p>
        
        <p>Check out my <a href="http://matthiasnehlsen.com/blog/2013/05/11/load-testing-server-sent-event-streams/">Blog article</a> about this project or the <a href="https://github.com/matthiasn/sse-perf">GitHub project</a> for more information on how this is implemented.</p>

        <p>You need a modern browser to view this page, otherwise the content will not be dynamic.</p>

        <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

        <a href="https://twitter.com/_MNehlsen" class="twitter-follow-button" data-show-count="false">Follow &#64;_MNehlsen</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

        <p><br/>&#64; Matthias Nehlsen 2013</p>

    </div>

    <div id="token">@{token}</div>
    
    @helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url)

    <a href="https://github.com/matthiasn"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
}