yandex-tank/Tank/Plugins/online.html

255 lines
6.9 KiB
HTML
Raw Normal View History

2012-10-02 08:59:47 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
2012-11-27 09:58:46 +00:00
<title>Yandex.Tank Online Test</title>
2012-10-02 08:59:47 +00:00
<link rel="stylesheet" href="http://loadosophia.org/img/design/styles.css" />
<link rel="stylesheet" href="http://loadosophia.org/img/hlas/hlas.css" />
<script src='http://loadosophia.org/img/amcharts/javascript/amcharts.js' type='text/javascript'></script>
<script src='http://loadosophia.org/img/hlas/chart_tpl.js' type='text/javascript'></script>
2012-11-29 13:38:02 +00:00
<script src="http://code.jquery.com/jquery-1.8.3.min.js" type='text/javascript'></script>
2012-10-02 08:59:47 +00:00
<script type="text/javascript">
2012-11-29 13:38:02 +00:00
$(document).ready(rresize);
$(window).resize(function() {
clearTimeout(window.timeoutId);
window.timeoutId = setTimeout(rresize, 100);
});
function rresize() {
$(".amchartGraph").hide();
$(".amchartGraph").css("width", "100%");
$(".amchartGraph").find("div").css("width", "100%");
$("svg").css("width", "100%");
$(".amchartGraph").show();
}
2012-10-02 08:59:47 +00:00
function req(url) {
var request;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
request = new XMLHttpRequest();
} else {
// code for IE6, IE5
request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', url, false);
request.send();
var data = eval('(' + request.responseText + ')');
return data
}
var redir_to;
function get_redirect() {
try {
redir_to = req('/redirect.json');
return false;
} catch (e) {
if (redir_to[0]) {
2012-11-27 09:58:46 +00:00
window.location = redir_to[0];
2012-10-02 08:59:47 +00:00
} else {
2012-11-27 09:58:46 +00:00
window.document.title = "Test Complete";
2012-10-02 08:59:47 +00:00
}
return true;
}
}
2012-11-27 09:58:46 +00:00
function refresh_numbers() {
data = req('/numbers.json');
2013-04-17 13:08:59 +00:00
$('#instances').text(data['instances']);
$('#planned').text(data['planned']);
$('#actual').text(data['actual']);
$('#avg').text(data['avg']);
$('#net').text(data['net']);
2012-11-27 10:53:42 +00:00
if (data['net']) {
2013-04-17 13:08:59 +00:00
$('#netCell').css('background-color', "#FF9999");
2012-11-27 10:53:42 +00:00
} else {
2013-04-17 13:08:59 +00:00
$('#netCell').css('background-color', "white");
2012-11-27 10:53:42 +00:00
}
if (data['planned'] && data['planned'] != data['actual']) {
2013-04-17 13:08:59 +00:00
$('#actCell').css('background-color', "#FFFF99");
2012-11-27 10:53:42 +00:00
} else {
2013-04-17 13:08:59 +00:00
$('#actCell').css('background-color', "white");
2012-11-27 10:53:42 +00:00
}
2012-11-27 09:58:46 +00:00
}
2012-10-02 08:59:47 +00:00
</script>
2012-11-27 09:58:46 +00:00
<style type="text/css">
body {
padding: 0px;
margin: 0px;
2012-11-29 13:38:02 +00:00
overflow-x: hidden;
2012-11-27 09:58:46 +00:00
}
2012-10-02 08:59:47 +00:00
2012-11-27 09:58:46 +00:00
div.amchartGraph {
margin: 0px;
}
2012-10-02 08:59:47 +00:00
2012-11-27 09:58:46 +00:00
table.bigNumbers {
width: 100%;
}
table.bigNumbers th {
background-color: white;
text-align: center;
font-size: 0.8em;
color: gray;
vertical-align: bottom;
font-weight: normal;
2012-11-27 10:53:42 +00:00
width: 20%;
2012-11-27 09:58:46 +00:00
}
2012-10-02 08:59:47 +00:00
2012-11-27 09:58:46 +00:00
table.bigNumbers th div {
color: black;
font-weight: bold;
font-size: 3em;
}
</style>
</head>
2012-10-02 08:59:47 +00:00
2012-11-27 09:58:46 +00:00
<body>
<table class="bigNumbers">
<tr>
<th>
<div style="color: gray;" id="instances">
N/A
</div>threads/instances</th>
<th>
<div style="color: #990099;" id="planned">
N/A
</div>planned requests</th>
2012-11-27 10:53:42 +00:00
<th id="actCell">
2012-11-27 09:58:46 +00:00
<div style="color: #3333FF;" id="actual">
N/A
</div>actual responses</th>
<th>
<div style="color: #009900;" id="avg">
N/A
</div>avg response time</th>
2012-11-27 10:53:42 +00:00
<th id="netCell">
2012-11-27 09:58:46 +00:00
<div style="color: black;" id="net">
N/A
</div>NET errors</th>
2012-10-02 08:59:47 +00:00
</tr>
2012-11-27 09:58:46 +00:00
<tr>
<td colspan="5"><div id="chartdivQ" class="amchartGraph" style="width:100%; height:400px;"></div></td>
</tr>
<tr>
<td colspan="5">
<table width="100%" cellpadding="0">
<tr>
<td style="width:50%"><div id="chartdivHTTP" class="amchartGraph" style="width:100%; height:250px;"></div></td>
<td style="width:50%"><div id="chartdivAvg" class="amchartGraph" style="width:100%; height:250px;"></div></td>
</tr>
</table></td>
2012-11-27 10:53:42 +00:00
</tr>
2012-10-02 08:59:47 +00:00
</table>
2012-11-27 09:58:46 +00:00
<script type="text/javascript">
var HelperQ = new AmChartsPWEHelper("Q");
HelperQ.setImagesPath("http://loadosophia.org/img/amcharts/javascript/images/");
HelperQ.setUnit1(" ms");
HelperQ.setUnit2(" RPS");
HelperQ.setZoomed(false);
HelperQ.setRowTitles("RPS;100%;99%;98%;95%;90%;80%;75%;50%;25%");
HelperQ.setRowFills("0;1");
HelperQ.setRowAxes("2;1");
HelperQ.setRowColors("#990099;@FF");
HelperQ.setDisableByDefault("100%;99%");
HelperQ.setFirstRowToLast(true);
HelperQ.setDataURL("./Q.json");
var chartQ = HelperQ.createChart();
2012-11-29 13:38:02 +00:00
chartQ.addLabel("0", "1em", "Response Time Quantiles", "center", "black", "", 0, "true");
2012-11-27 09:58:46 +00:00
</script>
<script type="text/javascript">
var HelperHTTP = new AmChartsPWEHelper("HTTP");
HelperHTTP.setImagesPath("http://loadosophia.org/img/amcharts/javascript/images/");
HelperHTTP.setUnit1("");
HelperHTTP.setUnit2("");
HelperHTTP.setZoomed(false);
2013-03-06 12:10:29 +00:00
HelperHTTP.setRowTitles("NET Errors;2xx;3xx;4xx;5xx;Non-HTTP");
2012-11-27 09:58:46 +00:00
HelperHTTP.setRowFills("0;1");
HelperHTTP.setRowAxes("2;1");
2012-11-27 10:53:42 +00:00
HelperHTTP.setStacked("regular");
HelperHTTP.setRowColors("black;green;blue;orange;red;darkred");
HelperHTTP.setDisableByDefault("2xx");
2012-11-27 09:58:46 +00:00
HelperHTTP.setFirstRowToLast(true);
HelperHTTP.setDataURL("./HTTP.json");
var chartHTTP = HelperHTTP.createChart();
2012-11-29 13:38:02 +00:00
chartHTTP.addLabel("0", "1em", "Response Codes", "center", "black", "", 0, "true");
2012-11-27 09:58:46 +00:00
</script>
<script type="text/javascript">
var HelperAvg = new AmChartsPWEHelper("Avg");
HelperAvg.setImagesPath("http://loadosophia.org/img/amcharts/javascript/images/");
HelperAvg.setUnit1(" ms");
2012-11-27 10:53:42 +00:00
HelperAvg.setUnit2("");
2012-11-27 09:58:46 +00:00
HelperAvg.setZoomed(false);
2012-11-27 10:53:42 +00:00
HelperAvg.setRowTitles("connect;send;latency;receive");
HelperAvg.setRowFills("1");
HelperAvg.setRowAxes("1");
HelperAvg.setStacked("regular")
HelperAvg.setRowColors("#6666FF;#66FF66;#FF6666;#FFFF66");
HelperAvg.setDisableByDefault("2xx;");
2012-11-27 09:58:46 +00:00
HelperAvg.setFirstRowToLast(true);
HelperAvg.setDataURL("./Avg.json");
var chartAvg = HelperAvg.createChart();
2012-11-29 13:38:02 +00:00
chartAvg.addLabel("0", "1em", "Average Response Times", "center", "black", "", 0, "true");
2012-11-27 09:58:46 +00:00
function refresh_all(i) {
try {
HelperQ.validateData();
} catch (e) {
// drop
}
try {
HelperHTTP.validateData();
} catch (e) {
// drop
}
try {
HelperAvg.validateData();
} catch (e) {
// drop
}
try {
refresh_numbers();
} catch (e) {
// drop
}
if (!get_redirect()) {
window.setTimeout("refresh_all(1000);", i);
}
}
refresh_all(100);
</script><!-- footer -->
<div style="float: none; clear: both; text-align: center; padding-top: 1em;">
<small><a href="https://github.com/yandex-load/yandex-tank">Yandex.Tank</a> Tool</small>
<big><b title='Mathematical sign, means "For All"'>&forall;</b></big><small> Powered by <a href="http://yandex.ru/"><span style="color:red">Y</span>andex</a>, <a href='http://loadosophia.org/?utm_source=ytank&utm_medium=web&utm_campaign=footer'>Loadosophia.org</a></small>
</div>
2012-10-02 08:59:47 +00:00
</body>
</html>