You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1123 lines
35 KiB
1123 lines
35 KiB
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="shortcut icon" type="image/x-icon" href="style/favicon.ico"/>
|
|
<link href="style/style.css" rel="stylesheet" type="text/css" />
|
|
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/gatling.js"></script>
|
|
<script src="js/menu.js"></script>
|
|
<script src="js/ellipsis.js"></script>
|
|
<script src="js/all_sessions.js"></script>
|
|
<script src="js/stats.js"></script>
|
|
<script src="js/highstock.js"></script>
|
|
<script src="js/highcharts-more.js"></script>
|
|
<script src="js/theme.js"></script>
|
|
<script src="js/unpack.js"></script>
|
|
<title>Gatling Stats - Global Information</title>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<div class="frise"></div>
|
|
<div class="head">
|
|
<div class="gatling-open-source">
|
|
<a class="gatling-logo" href="https://gatling.io" target="blank_" title="Gatling Home Page"><img alt="Gatling" src="style/logo.svg"/></a>
|
|
<a class="gatling-documentation" href="https://gatling.io/docs/" target="_blank">Documentation</a>
|
|
</div>
|
|
<a class="enterprise" href="https://gatling.io/enterprise/next-step/" target="_blank">Try <img alt="Gatling Enterprise" src="style/logo-enterprise.svg"/></a></div>
|
|
<div class="container details">
|
|
<div class="nav">
|
|
<ul></ul>
|
|
</div>
|
|
<div class="cadre">
|
|
<div class="content">
|
|
<div class="content-header">
|
|
<div class="onglet">
|
|
UserSimulation
|
|
</div>
|
|
<div class="sous-menu" id="sousMenu">
|
|
<div class="sous-menu-spacer">
|
|
<div class="item ouvert"><a href="index.html">Global</a></div>
|
|
<div class="item "><a id="details_link" href="#">Details</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="content-in">
|
|
<div class="container-article">
|
|
<div class="article">
|
|
|
|
|
|
<div class="schema-container">
|
|
|
|
<div id="ranges" class="schema ranges">
|
|
</div>
|
|
|
|
<div class="schema polar">
|
|
<div id="container_number_of_requests"></div>
|
|
</div>
|
|
<div class="simulation-card">
|
|
<div class="simulation-version-information">
|
|
<span class="simulation-information-title">Gatling Version</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Version: </span>
|
|
<span>3.9.0</span>
|
|
</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Released: </span>
|
|
<span>2022-12-14</span>
|
|
</span>
|
|
</div>
|
|
<div id="simulation-information" class="simulation-version-information">
|
|
<span class="simulation-information-title">Run Information</span>
|
|
<div class="simulation-information-container">
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Date: </span>
|
|
<span>2023-02-06 15:47:12 GMT</span>
|
|
</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Duration: </span>
|
|
<span>31s </span>
|
|
</span>
|
|
<span class="simulation-tooltip simulation-information-item description" title="Description" data-content="Load testing Gin Gonic API">
|
|
<span class="simulation-information-label">Description: </span>
|
|
<span>Load testing Gin Gonic API</span>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="statistics_table_container">
|
|
<div id="stats" class="statistics extensible-geant collapsed">
|
|
<div class="title">
|
|
<div id="statistics_title" class="title_base"><span class="title_base_stats">Stats</span><span class="expand-table">Fixed height</span><span id="toggle-stats" class="toggle-table"></span><span class="collapse-table">Full size</span></div>
|
|
<div class="right">
|
|
<button id="statistics_full_screen" class="statistics-button" onclick="openStatisticsTableModal()">Full Screen</button>
|
|
<button class="statistics-button expand-all-button">Expand all groups</button>
|
|
<button class="statistics-button collapse-all-button">Collapse all groups</button>
|
|
</div>
|
|
</div>
|
|
<div class="scrollable">
|
|
<table id="container_statistics_head" class="statistics-in extensible-geant">
|
|
<thead>
|
|
<tr>
|
|
<th rowspan="2" id="col-1" class="header sortable sorted-up"><span>Requests</span></th>
|
|
<th colspan="5" class="header"><span class="executions">Executions</span></th>
|
|
<th colspan="8" class="header"><span class="response-time">Response Time (ms)</span></th>
|
|
</tr>
|
|
<tr>
|
|
<th id="col-2" class="header sortable"><span>Total</span></th>
|
|
<th id="col-3" class="header sortable"><span>OK</span></th>
|
|
<th id="col-4" class="header sortable"><span>KO</span></th>
|
|
<th id="col-5" class="header sortable"><span>% KO</span></th>
|
|
<th id="col-6" class="header sortable"><span><abbr title="Count of events per second">Cnt/s</abbr></span></th>
|
|
<th id="col-7" class="header sortable"><span>Min</span></th>
|
|
<th id="col-8" class="header sortable"><span>50th pct</span></th>
|
|
<th id="col-9" class="header sortable"><span>75th pct</span></th>
|
|
<th id="col-10" class="header sortable"><span>95th pct</span></th>
|
|
<th id="col-11" class="header sortable"><span>99th pct</span></th>
|
|
<th id="col-12" class="header sortable"><span>Max</span></th>
|
|
<th id="col-13" class="header sortable"><span>Mean</span></th>
|
|
<th id="col-14" class="header sortable"><span><abbr title="Standard Deviation">Std Dev</abbr></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<table id="container_statistics_body" class="statistics-in extensible-geant">
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<dialog id="statistics_table_modal" class="statistics-table-modal">
|
|
<div class="statistics-table-modal-header"><button class="button-modal" onclick="closeStatisticsTableModal()">x</button></div>
|
|
<div class="statistics-table-modal-container">
|
|
<div id="statistics_table_modal_content" class="statistics-table-modal-content"></div>
|
|
</div>
|
|
</dialog>
|
|
<script>
|
|
function openStatisticsTableModal () {
|
|
const statsTable = document.getElementById("stats");
|
|
const statsTableModal = document.getElementById("statistics_table_modal");
|
|
const fullScreenButton = document.getElementById("statistics_full_screen");
|
|
|
|
fullScreenButton.disabled = true;
|
|
|
|
if (typeof statsTableModal.showModal === "function") {
|
|
const statsTableModalContent = document.getElementById("statistics_table_modal_content");
|
|
|
|
statsTableModalContent.innerHTML = "";
|
|
statsTableModalContent.appendChild(statsTable);
|
|
statsTableModal.showModal();
|
|
|
|
statsTableModal.addEventListener("close", function () {
|
|
const container = document.getElementById("statistics_table_container");
|
|
|
|
container.appendChild(statsTable);
|
|
fullScreenButton.disabled = false;
|
|
});
|
|
} else {
|
|
const incompatibleBrowserVersionMessage = document.createElement("div");
|
|
|
|
incompatibleBrowserVersionMessage.innerText = "Sorry, the <dialog> API is not supported by this browser.";
|
|
statsTable.insertBefore(incompatibleBrowserVersionMessage, statsTable.children[0]);
|
|
}
|
|
}
|
|
|
|
function closeStatisticsTableModal () {
|
|
const statsTableModal = document.getElementById("statistics_table_modal");
|
|
|
|
statsTableModal.close();
|
|
}
|
|
</script>
|
|
<div class="statistics extensible-geant collapsed">
|
|
<div class="title">
|
|
Errors
|
|
</div>
|
|
<table id="container_errors" class="statistics-in extensible-geant">
|
|
<thead>
|
|
<tr>
|
|
<th id="error-col-1" class="header sortable"><span>Error</span></th>
|
|
<th id="error-col-2" class="header sortable"><span>Count</span></th>
|
|
<th id="error-col-3" class="header sortable"><span>Percentage</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td class="error-col-1 total ko">status.find.is(200), but actually found 201<span class="value" style="display:none">0</span></td>
|
|
<td class="value error-col-2 total ko">445</td>
|
|
<td class="value error-col-3 total ko">65.828 %</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="error-col-1 total ko">status.find.is(201), but actually found 200<span class="value" style="display:none">1</span></td>
|
|
<td class="value error-col-2 total ko">231</td>
|
|
<td class="value error-col-3 total ko">34.172 %</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="active_users" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="responsetimeDistributionContainer" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="responsetimepercentilesovertimeokPercentilesContainer" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="requests" class="geant"></div>
|
|
</div>
|
|
|
|
<div class="schema geant">
|
|
<div id="responses" class="geant"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var pageStats = stats.stats;
|
|
$(document).ready(function() {
|
|
$('.simulation-tooltip').popover({trigger:'hover', placement:'left'});
|
|
setDetailsLinkUrl();
|
|
setGlobalMenu();
|
|
setActiveMenu();
|
|
fillStats(pageStats);
|
|
|
|
Highcharts.setOptions({
|
|
global: { useUTC: false }
|
|
});
|
|
|
|
var rangesChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'ranges',
|
|
marginRight: 100
|
|
},
|
|
credits: { enabled: false },
|
|
legend: { enabled: false },
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
xAxis: {
|
|
categories: [
|
|
pageStats.group1.htmlName,
|
|
pageStats.group2.htmlName,
|
|
pageStats.group3.htmlName,
|
|
pageStats.group4.htmlName
|
|
]
|
|
},
|
|
yAxis: {
|
|
title: { text: 'Number of Requests' },
|
|
reversedStacks: false
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
var s;
|
|
if (this.point.name) { // the pie chart
|
|
s = ''+ this.point.name +': '+ this.y +'% requests';
|
|
} else {
|
|
s = ''+ this.y + ' requests';
|
|
}
|
|
return s;
|
|
}
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
stacking: 'normal',
|
|
shadow: true
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'column',
|
|
data: [{
|
|
color: '#68b65c',
|
|
y: pageStats.group1.count
|
|
},
|
|
{
|
|
color: '#FFDD00',
|
|
y: pageStats.group2.count
|
|
},
|
|
{
|
|
color: '#FFA900',
|
|
y: pageStats.group3.count
|
|
},
|
|
{
|
|
color: '#f15b4f',
|
|
y: pageStats.group4.count
|
|
}]
|
|
},
|
|
{
|
|
type: 'pie',
|
|
name: 'Percentages',
|
|
data: [
|
|
{
|
|
name: pageStats.group1.name,
|
|
y: pageStats.group1.percentage,
|
|
color: '#68b65c'
|
|
},
|
|
{
|
|
name: pageStats.group2.name,
|
|
y: pageStats.group2.percentage,
|
|
color: '#FFDD00'
|
|
},
|
|
{
|
|
name: pageStats.group3.name,
|
|
y: pageStats.group3.percentage,
|
|
color: '#FFA900'
|
|
},
|
|
{
|
|
name: pageStats.group4.name,
|
|
y: pageStats.group4.percentage,
|
|
color: '#f15b4f'
|
|
}
|
|
],
|
|
center: [345, 0],
|
|
size: 90,
|
|
showInLegend: false,
|
|
dataLabels: { enabled: false }
|
|
}
|
|
]
|
|
});
|
|
|
|
rangesChart.setTitle({
|
|
text: '<span class="chart_title">Response Time Ranges</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
function numberOfRequestsDataForGroup(group) {
|
|
var data = {names: [], oks: [], kos: []};
|
|
|
|
$.each(group.contents, function(contentName, content) {
|
|
if (content.type == 'GROUP') {
|
|
var result = numberOfRequestsDataForGroup(content);
|
|
data.names = data.names.concat(result.names);
|
|
data.oks = data.oks.concat(result.oks);
|
|
data.kos = data.kos.concat(result.kos);
|
|
}
|
|
else if (content.type == 'REQUEST') {
|
|
data.names.push(content.path);
|
|
data.oks.push(parseInt(content.stats.numberOfRequests.ok));
|
|
data.kos.push(parseInt(content.stats.numberOfRequests.ko));
|
|
}
|
|
});
|
|
|
|
return data;
|
|
}
|
|
|
|
var numberOfRequestsData = numberOfRequestsDataForGroup(stats);
|
|
var tickInterval = Math.ceil(numberOfRequestsData.names.length / 1000);
|
|
|
|
new Highcharts.Chart({
|
|
chart: {
|
|
renderTo:'container_number_of_requests',
|
|
polar:true,
|
|
type:'column',
|
|
height:330
|
|
},
|
|
credits:{
|
|
enabled:false
|
|
},
|
|
title:{
|
|
text:'<span class="chart_title">Number of requests</span>',
|
|
useHTML: true,
|
|
widthAdjust:-20
|
|
},
|
|
xAxis:{
|
|
tickmarkPlacement:'on',
|
|
tickInterval: tickInterval,
|
|
categories:numberOfRequestsData.names,
|
|
labels:{ enabled:false }
|
|
},
|
|
yAxis:{
|
|
min:0,
|
|
reversedStacks: false
|
|
},
|
|
plotOptions:{
|
|
series:{
|
|
stacking:'normal',
|
|
groupPadding:0,
|
|
pointPlacement:'on',
|
|
shadow: true
|
|
}
|
|
},
|
|
legend: {
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
series:[
|
|
{
|
|
name:'OK',
|
|
data:numberOfRequestsData.oks,
|
|
color:"#68b65c"
|
|
},
|
|
{
|
|
name:'KO',
|
|
data:numberOfRequestsData.kos,
|
|
color:"#f15b4f"
|
|
}
|
|
]
|
|
});
|
|
|
|
$('#container_exceptions').sortable('#container_exceptions');
|
|
|
|
|
|
function generateHtmlRow(request, level, index, parent, group) {
|
|
if (request.name == 'All Requests')
|
|
var url = 'index.html';
|
|
else
|
|
var url = request.pathFormatted + '.html';
|
|
|
|
if (group)
|
|
var expandButtonStyle = '';
|
|
else
|
|
var expandButtonStyle = ' hidden';
|
|
|
|
if (request.stats.numberOfRequests.total != 0)
|
|
var koPercent = (request.stats.numberOfRequests.ko * 100 / request.stats.numberOfRequests.total).toFixed(0) + '%';
|
|
else
|
|
var koPercent = '-'
|
|
|
|
return '<tr id="' + request.pathFormatted + '" data-parent=' + parent + '> \
|
|
<td class="total col-1"> \
|
|
<div class="expandable-container"> \
|
|
<span id="' + request.pathFormatted + '" style="margin-left: ' + (level * 10) + 'px;" class="expand-button' + expandButtonStyle + '"> </span> \
|
|
<a href="' + url +'" class="withTooltip">' + ellipsedLabel({ name: request.name, parentClass: "table-cell-tooltip" }) + '</a><span class="value" style="display:none;">' + index + '</span> \
|
|
</div> \
|
|
</td> \
|
|
<td class="value total col-2">' + request.stats.numberOfRequests.total + '</td> \
|
|
<td class="value ok col-3">' + request.stats.numberOfRequests.ok + '</td> \
|
|
<td class="value ko col-4">' + request.stats.numberOfRequests.ko + '</td> \
|
|
<td class="value ko col-5">' + koPercent + '</td> \
|
|
<td class="value total col-6">' + request.stats.meanNumberOfRequestsPerSecond.total + '</td> \
|
|
<td class="value total col-7">' + request.stats.minResponseTime.total + '</td> \
|
|
<td class="value total col-8">' + request.stats.percentiles1.total + '</td> \
|
|
<td class="value total col-9">' + request.stats.percentiles2.total + '</td> \
|
|
<td class="value total col-10">' + request.stats.percentiles3.total + '</td> \
|
|
<td class="value total col-11">' + request.stats.percentiles4.total + '</td> \
|
|
<td class="value total col-12">' + request.stats.maxResponseTime.total + '</td> \
|
|
<td class="value total col-13">' + request.stats.meanResponseTime.total + '</td> \
|
|
<td class="value total col-14">' + request.stats.standardDeviation.total + '</td> \
|
|
</tr>';
|
|
}
|
|
|
|
function generateHtmlRowsForGroup(group, level, index, parent) {
|
|
var buffer = '';
|
|
|
|
if (!parent)
|
|
parent = 'ROOT';
|
|
else {
|
|
buffer += generateHtmlRow(group, level - 1, index, parent, true);
|
|
index++;
|
|
parent = group.pathFormatted;
|
|
}
|
|
|
|
$.each(group.contents, function(contentName, content) {
|
|
if (content.type == 'GROUP') {
|
|
var result = generateHtmlRowsForGroup(content, level + 1, index, parent);
|
|
buffer += result.html;
|
|
index = result.index;
|
|
}
|
|
else if (content.type == 'REQUEST') {
|
|
buffer += generateHtmlRow(content, level, index, parent);
|
|
index++;
|
|
}
|
|
});
|
|
|
|
return { html: buffer, index: index };
|
|
}
|
|
|
|
$('#container_statistics_head tbody').append(generateHtmlRow(stats, 0, 0));
|
|
|
|
var lines = generateHtmlRowsForGroup(stats, 0, 0);
|
|
$('#container_statistics_body tbody').append(lines.html);
|
|
|
|
$('#container_statistics_head').sortable('#container_statistics_body');
|
|
$('.statistics').expandable();
|
|
|
|
if (lines.index < 30) {
|
|
$('#statistics_title span').attr('style', 'display: none;');
|
|
} else {
|
|
$('#statistics_title').addClass('title_collapsed');
|
|
$('#statistics_title').click(function() {
|
|
$('#toggle-stats').toggleClass("off");
|
|
$(this).toggleClass('title_collapsed').toggleClass('title_expanded');
|
|
$('#container_statistics_body').parent().toggleClass('scrollable').toggleClass('');
|
|
});
|
|
}
|
|
$('.table-cell-tooltip').popover({trigger:'hover'});
|
|
|
|
$('#container_errors').sortable('#container_errors');
|
|
|
|
allUsersData.yAxis = 0;
|
|
|
|
var allUsersChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'active_users',
|
|
zoomType: 'x'
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
align: 'right',
|
|
verticalAlign: 'top',
|
|
layout: 'vertical',
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
rangeSelector: {
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis: {
|
|
title: { text: 'Number of Active Users' },
|
|
opposite: false,
|
|
min: 0
|
|
},
|
|
series: [
|
|
{
|
|
color: '#5E7BE2',
|
|
name: 'Users',
|
|
data: [
|
|
[1675698432000,52],[1675698433000,102],[1675698434000,153],[1675698435000,203],[1675698436000,252],[1675698437000,290],[1675698438000,319],[1675698439000,366],[1675698440000,395],[1675698441000,422],[1675698442000,415],[1675698443000,410],[1675698444000,393],[1675698445000,370],[1675698446000,370],[1675698447000,368],[1675698448000,368],[1675698449000,360],[1675698450000,339],[1675698451000,338],[1675698452000,338],[1675698453000,333],[1675698454000,316],[1675698455000,299],[1675698456000,281],[1675698457000,262],[1675698458000,198],[1675698459000,132],[1675698460000,63],[1675698461000,28],[1675698462000,7],[1675698463000,1]
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }},
|
|
|
|
allUsersData
|
|
]
|
|
});
|
|
|
|
|
|
allUsersChart.setTitle({
|
|
text: '<span class="chart_title">Active Users along the Simulation</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
allUsersData.yAxis = 1;
|
|
|
|
var responsetimeDistributionChart = new Highcharts.Chart({
|
|
chart: {
|
|
renderTo: 'responsetimeDistributionContainer',
|
|
type: 'column',
|
|
marginBottom: 60
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: 5,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
xAxis: {
|
|
categories: ['50', '149', '248', '347', '445', '544', '643', '741', '840', '939', '1038', '1136', '1235', '1334', '1432', '1531', '1630', '1729', '1827', '1926', '2025', '2123', '2222', '2321', '2420', '2518', '2617', '2716', '2815', '2913', '3012', '3111', '3209', '3308', '3407', '3506', '3604', '3703', '3802', '3900', '3999', '4098', '4197', '4295', '4394', '4493', '4591', '4690', '4789', '4888', '4986', '5085', '5184', '5283', '5381', '5480', '5579', '5677', '5776', '5875', '5974', '6072', '6171', '6270', '6368', '6467', '6566', '6665', '6763', '6862', '6961', '7059', '7158', '7257', '7356', '7454', '7553', '7652', '7751', '7849', '7948', '8047', '8145', '8244', '8343', '8442', '8540', '8639', '8738', '8836', '8935', '9034', '9133', '9231', '9330', '9429', '9527', '9626', '9725', '9824'],
|
|
tickInterval: 20
|
|
},
|
|
yAxis: {
|
|
min: 0,
|
|
title: { text: 'Percentage of Requests' },
|
|
reversedStacks: false
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
return '<b>'+ this.x +' ms</b><br/>'+
|
|
this.series.name +': '+ this.y +' %<br/>'+
|
|
'Total: '+ this.point.stackTotal + ' %';
|
|
}
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
groupPadding: 0,
|
|
stacking: 'normal',
|
|
shadow: true
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
type: 'column',
|
|
color: '#68b65c',
|
|
name: 'OK',
|
|
data: [
|
|
28.34,4.54,3.66,3.18,1.06,1.03,1.51,1.18,1.21,0.93,1.0,1.24,1.21,0.78,0.54,0.66,0.96,0.63,0.57,0.6,0.51,0.75,0.36,0.63,0.24,0.42,0.33,0.6,0.39,0.27,0.24,1.0,0.78,0.57,0.69,0.78,0.51,0.45,0.63,0.75,0.57,0.48,0.81,0.84,0.63,1.24,0.78,0.54,0.39,0.54,0.45,0.42,0.18,0.33,0.15,0.15,0.09,0.06,0.18,0.15,0.06,0.15,0.06,0.27,0.24,0.24,0.12,0.21,0.27,0.18,0.15,0.45,0.3,0.18,0.3,0.15,0.27,0.15,0.03,0.03,0.03,0.03,0.03,0.12,0.09,0.03,0.06,0.06,0.0,0.03,0.03,0.03,0.0,0.0,0.0,0.03,0.03,0.0,0.0,0.06
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
5.63,0.93,0.75,0.45,0.36,0.36,0.45,0.24,0.03,0.21,0.15,0.3,0.3,0.15,0.21,0.24,0.39,0.15,0.33,0.18,0.36,0.12,0.12,0.09,0.27,0.21,0.18,0.12,0.15,0.21,0.36,0.27,0.18,0.15,0.24,0.09,0.21,0.18,0.12,0.12,0.21,0.18,0.09,0.3,0.3,0.45,0.24,0.15,0.15,0.15,0.12,0.15,0.09,0.06,0.03,0.18,0.03,0.15,0.06,0.09,0.03,0.0,0.09,0.03,0.06,0.03,0.09,0.06,0.06,0.06,0.09,0.18,0.09,0.09,0.06,0.03,0.03,0.03,0.0,0.03,0.03,0.03,0.09,0.03,0.03,0.03,0.03,0.06,0.0,0.03,0.0,0.0,0.03,0.03,0.0,0.03,0.0,0.0,0.0,0.0
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
}
|
|
]
|
|
});
|
|
|
|
responsetimeDistributionChart.setTitle({
|
|
text: '<span class="chart_title">Response Time Distribution</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var responsetimepercentilesovertimeokPercentiles = unpack([[1675698432,[8,9,11,19,26,64,106,125,144,149]],[1675698433,[2,5,7,9,9,10,10,35,107,116]],[1675698434,[1,3,5,8,8,9,10,18,119,123]],[1675698435,[2,3,6,10,11,12,19,111,171,183]],[1675698436,[1,5,12,37,77,117,257,756,1029,1333]],[1675698437,[2,57,291,540,721,987,1150,2068,2484,3145]],[1675698438,[36,960,1478,1912,2042,2162,2516,4395,5370,5692]],[1675698439,[7,266,2313,3981,4124,4279,4609,4925,5467,5531]],[1675698440,[2,18,79,3129,3182,3351,3643,3930,4204,4436]],[1675698441,[2,101,2910,3538,3667,3902,6737,7537,8295,8458]],[1675698442,[193,4515,6755,7093,7153,7243,7347,7589,7684,9873]],[1675698443,[144,352,435,5919,5958,6040,6198,6296,6688,6792]],[1675698444,[2,32,175,272,4723,4995,5308,5415,8111,9529]],[1675698445,[193,4343,4500,4715,4801,4939,6273,8274,9261,9848]],[1675698446,[3628,4261,4647,6491,7163,7761,8264,8451,8634,8687]],[1675698447,[1467,1913,2359,2793,2879,2966,3053,3140,3209,3227]],[1675698448,[1089,1284,1368,1560,1572,1584,1743,2049,2294,2356]],[1675698449,[4,642,841,1684,2672,3258,5133,7119,7688,7893]],[1675698450,[306,2721,3804,4295,4385,4548,4636,5228,7080,7311]],[1675698451,[1180,3588,4903,5284,5802,5872,6200,6351,6539,6728]],[1675698452,[1674,1732,2645,3538,3584,3630,3818,4149,4413,4480]],[1675698453,[669,1236,1449,2964,3390,3841,4025,4363,4419,4430]],[1675698454,[1075,1956,2476,2825,3007,3115,3354,3790,4035,4061]],[1675698455,[312,1554,2000,2521,2680,2743,2798,3006,3329,3367]],[1675698456,[36,303,730,1158,1212,1279,1607,1707,2356,2373]],[1675698457,[10,678,984,1145,1198,1246,1410,1586,1926,1959]],[1675698458,[154,282,590,755,774,801,840,864,1017,1141]],[1675698459,[1,4,10,128,146,153,230,279,305,322]],[1675698460,[2,3,7,34,88,153,232,261,300,306]],[1675698461,[2,3,3,4,5,52,79,86,92,95]],[1675698462,[2,3,3,4,4,4,4,4,4,5]],[1675698463,[3,3,3,3,3,3,3,3,3,3]]]);
|
|
|
|
var responsetimepercentilesovertimeokPercentilesChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'responsetimepercentilesovertimeokPercentilesContainer',
|
|
zoomType: 'x',
|
|
marginBottom: 60
|
|
},
|
|
colors: ['#c4fd90', '#7ff77f', '#6ff2ad', '#61ede6', '#58c7e0', '#4ea1d4', '#487ad9', '#3f52cc', '#7335dc', '#c73905', '#FFA900'],
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: -65,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false,
|
|
baseSeries: 9
|
|
},
|
|
rangeSelector: {
|
|
rangeSelector: { align: "left" },
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#92918C',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis:[
|
|
{
|
|
min: 0,
|
|
title: { text: 'Response Time (ms)' },
|
|
opposite: false
|
|
}, {
|
|
min: 0,
|
|
title: {
|
|
text: 'Active Users',
|
|
style: { color: '#FFA900' }
|
|
},
|
|
opposite: true
|
|
}
|
|
],
|
|
plotOptions: {
|
|
arearange: { lineWidth: 1 },
|
|
series: {
|
|
dataGrouping: { enabled: false }
|
|
}
|
|
},
|
|
series: [
|
|
|
|
|
|
{
|
|
pointInterval: 1000,
|
|
name: 'min',
|
|
data: responsetimepercentilesovertimeokPercentiles[0],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 10
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '25%',
|
|
data: responsetimepercentilesovertimeokPercentiles[1],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 9
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '50%',
|
|
data: responsetimepercentilesovertimeokPercentiles[2],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 8
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '75%',
|
|
data: responsetimepercentilesovertimeokPercentiles[3],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 7
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '80%',
|
|
data: responsetimepercentilesovertimeokPercentiles[4],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 6
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '85%',
|
|
data: responsetimepercentilesovertimeokPercentiles[5],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 5
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '90%',
|
|
data: responsetimepercentilesovertimeokPercentiles[6],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 4
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '95%',
|
|
data: responsetimepercentilesovertimeokPercentiles[7],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 3
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: '99%',
|
|
data: responsetimepercentilesovertimeokPercentiles[8],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 2
|
|
},
|
|
{
|
|
pointInterval: 1000,
|
|
name: 'max',
|
|
data: responsetimepercentilesovertimeokPercentiles[9],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' },
|
|
type : 'area',
|
|
yAxis: 0,
|
|
zIndex: 1
|
|
},
|
|
allUsersData
|
|
]
|
|
});
|
|
|
|
responsetimepercentilesovertimeokPercentilesChart.setTitle({
|
|
text: '<span class="chart_title chart_title_">Response Time Percentiles over Time (OK)</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var requests = unpack([[1675698432,[27,27,0]],[1675698433,[76,76,0]],[1675698434,[136,125,11]],[1675698435,[208,173,35]],[1675698436,[246,207,39]],[1675698437,[265,215,50]],[1675698438,[239,188,51]],[1675698439,[136,116,20]],[1675698440,[145,112,33]],[1675698441,[242,204,38]],[1675698442,[133,104,29]],[1675698443,[26,22,4]],[1675698444,[109,91,18]],[1675698445,[167,133,34]],[1675698446,[45,28,17]],[1675698447,[4,3,1]],[1675698448,[9,9,0]],[1675698449,[54,47,7]],[1675698450,[182,128,54]],[1675698451,[121,83,38]],[1675698452,[10,9,1]],[1675698453,[31,22,9]],[1675698454,[57,49,8]],[1675698455,[96,61,35]],[1675698456,[51,41,10]],[1675698457,[131,107,24]],[1675698458,[90,72,18]],[1675698459,[90,63,27]],[1675698460,[108,61,47]],[1675698461,[46,30,16]],[1675698462,[16,14,2]],[1675698463,[3,3,0]]]);
|
|
|
|
var requestsChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'requests',
|
|
zoomType: 'x',
|
|
marginBottom: 60
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: -65,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
rangeSelector: {
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
dataGrouping: { enabled: false }
|
|
},
|
|
area: {
|
|
stacking: 'normal'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis:[
|
|
{
|
|
min: 0,
|
|
title: { text: 'Number of requests' },
|
|
opposite: false,
|
|
reversedStacks: false
|
|
}, {
|
|
min: 0,
|
|
title: {
|
|
text: 'Active Users',
|
|
style: { color: '#FFA900' }
|
|
},
|
|
opposite: true
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
color: '#5E7BE2',
|
|
name: 'All',
|
|
data: requests[0],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
,type: 'area'},
|
|
allUsersData
|
|
]
|
|
});
|
|
|
|
requestsChart.setTitle({
|
|
text: '<span class="chart_title">Number of requests per second</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
var responses = unpack([[1675698432,[27,27,0]],[1675698433,[76,76,0]],[1675698434,[134,123,11]],[1675698435,[197,165,32]],[1675698436,[228,193,35]],[1675698437,[234,192,42]],[1675698438,[85,75,10]],[1675698439,[94,74,20]],[1675698440,[213,175,38]],[1675698441,[146,116,30]],[1675698442,[21,17,4]],[1675698443,[100,86,14]],[1675698444,[213,169,44]],[1675698445,[62,51,11]],[1675698446,[2,2,0]],[1675698447,[11,7,4]],[1675698448,[24,22,2]],[1675698449,[207,166,41]],[1675698450,[156,121,35]],[1675698451,[8,6,2]],[1675698452,[36,29,7]],[1675698453,[32,22,10]],[1675698454,[145,100,45]],[1675698455,[52,42,10]],[1675698456,[140,101,39]],[1675698457,[163,110,53]],[1675698458,[139,111,28]],[1675698459,[180,137,43]],[1675698460,[109,61,48]],[1675698461,[46,30,16]],[1675698462,[16,14,2]],[1675698463,[3,3,0]]]);
|
|
|
|
var requestsChart = new Highcharts.StockChart({
|
|
chart: {
|
|
renderTo: 'responses',
|
|
zoomType: 'x',
|
|
marginBottom: 60
|
|
},
|
|
credits: { enabled: false },
|
|
legend: {
|
|
enabled: true,
|
|
floating: true,
|
|
y: -65,
|
|
borderWidth: 0,
|
|
itemStyle: { fontWeight: "normal" },
|
|
symbolRadius: 0
|
|
},
|
|
title: { text: 'A title to let highcharts reserve the place for the title set later' },
|
|
navigator: {
|
|
maskInside: false
|
|
},
|
|
rangeSelector: {
|
|
buttonSpacing: 0,
|
|
buttonTheme: {
|
|
fill: '#CFC9C6',
|
|
padding: 1,
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
style: {
|
|
color: '#000000',
|
|
fontWeight: 'bold',
|
|
},
|
|
states: {
|
|
stroke: '#000000',
|
|
'stroke-width': 0.25,
|
|
hover: {
|
|
fill: '#92918C',
|
|
style: { color: 'black' }
|
|
},
|
|
select: {
|
|
fill: '#FFA900',
|
|
style: { color: 'white' }
|
|
}
|
|
}
|
|
},
|
|
buttons : [
|
|
{
|
|
type : 'minute',
|
|
count : 1,
|
|
text : '1m'
|
|
}, {
|
|
type : 'minute',
|
|
count : 10,
|
|
text : '10m'
|
|
}, {
|
|
type : 'hour',
|
|
count : 1,
|
|
text : '1h'
|
|
}, {
|
|
type : 'all',
|
|
count : 1,
|
|
text : 'All'
|
|
}
|
|
],
|
|
selected : 3,
|
|
inputEnabled : false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
dataGrouping: { enabled: false }
|
|
},
|
|
area: {
|
|
stacking: 'normal'
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
ordinal: false,
|
|
maxZoom: 10000 // three days
|
|
},
|
|
yAxis:[
|
|
{
|
|
min: 0,
|
|
title: { text: 'Number of responses' },
|
|
opposite: false,
|
|
reversedStacks: false
|
|
}, {
|
|
min: 0,
|
|
title: {
|
|
text: 'Active Users',
|
|
style: { color: '#FFA900' }
|
|
},
|
|
opposite: true
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
color: '#5E7BE2',
|
|
name: 'All',
|
|
data: responses[0],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
},
|
|
{
|
|
color: '#68b65c',
|
|
name: 'OK',
|
|
data: responses[1],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
,type: 'area'},
|
|
{
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: responses[2],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
|
|
,type: 'area'},
|
|
allUsersData,
|
|
{
|
|
|
|
type: 'pie',
|
|
name: 'Distribution',
|
|
data: [
|
|
{name: 'OK', y: 2623.0, color: '#68b65c'},{name: 'KO', y: 676.0, color: '#f15b4f'}
|
|
],
|
|
center: [775, -40],
|
|
size: 70,
|
|
showInLegend: false,
|
|
dataLabels: { enabled: false },
|
|
dataGrouping: { enabled: false }
|
|
|
|
}
|
|
|
|
]
|
|
});
|
|
|
|
requestsChart.setTitle({
|
|
text: '<span class="chart_title">Number of responses per second</span>',
|
|
useHTML: true
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|