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.
1128 lines
33 KiB
1128 lines
33 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-28 21:34:45 GMT</span>
|
|
</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Duration: </span>
|
|
<span>17s </span>
|
|
</span>
|
|
<span class="simulation-tooltip simulation-information-item description" title="Description" data-content="Load testing quarkus API">
|
|
<span class="simulation-information-label">Description: </span>
|
|
<span>Load testing quarkus 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">504</td>
|
|
<td class="value error-col-3 total ko">50.4 %</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="error-col-1 total ko">status.find.in([200, 209], 304), found 405<span class="value" style="display:none">1</span></td>
|
|
<td class="value error-col-2 total ko">252</td>
|
|
<td class="value error-col-3 total ko">25.2 %</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="error-col-1 total ko">status.find.is(201), but actually found 200<span class="value" style="display:none">2</span></td>
|
|
<td class="value error-col-2 total ko">244</td>
|
|
<td class="value error-col-3 total ko">24.4 %</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: [
|
|
[1677620085000,52],[1677620086000,103],[1677620087000,153],[1677620088000,202],[1677620089000,252],[1677620090000,303],[1677620091000,327],[1677620092000,347],[1677620093000,337],[1677620094000,327],[1677620095000,274],[1677620096000,220],[1677620097000,172],[1677620098000,128],[1677620099000,72],[1677620100000,33],[1677620101000,13],[1677620102000,4]
|
|
],
|
|
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: ['4', '11', '18', '26', '33', '40', '48', '55', '62', '70', '77', '84', '92', '99', '106', '114', '121', '128', '136', '143', '150', '158', '165', '172', '180', '187', '194', '202', '209', '216', '224', '231', '238', '246', '253', '260', '268', '275', '282', '290', '297', '304', '312', '319', '326', '334', '341', '348', '356', '363', '370', '377', '385', '392', '399', '407', '414', '421', '429', '436', '443', '451', '458', '465', '473', '480', '487', '495', '502', '509', '517', '524', '531', '539', '546', '553', '561', '568', '575', '583', '590', '597', '605', '612', '619', '627', '634', '641', '649', '656', '663', '671', '678', '685', '693', '700', '707', '715', '722', '729'],
|
|
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: [
|
|
67.5,1.94,0.69,0.72,0.32,0.18,0.18,0.13,0.0,0.0,0.02,0.0,0.0,0.05,0.0,0.05,0.0,0.1,0.05,0.02,0.05,0.08,0.02,0.1,0.08,0.0,0.05,0.08,0.02,0.0,0.0,0.05,0.02,0.0,0.0,0.0,0.0,0.05,0.0,0.0,0.0,0.02,0.0,0.0,0.02,0.0,0.0,0.02,0.02,0.0,0.0,0.0,0.0,0.05,0.0,0.0,0.05,0.0,0.0,0.0,0.02,0.02,0.0,0.0,0.0,0.0,0.05,0.02,0.0,0.0,0.0,0.0,0.02,0.02,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.05,0.02,0.0,0.02,0.0,0.0,0.02,0.02,0.0,0.0,0.0,0.05,0.0,0.0,0.0,0.0,0.0,0.0,0.05
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
25.85,0.18,0.0,0.05,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.02,0.0,0.0,0.05,0.0,0.18,0.1,0.05,0.08,0.02,0.02,0.0,0.0,0.0,0.0,0.0,0.0,0.02,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,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([[1677620085,[276,391,486,615,635,648,675,711,731,733]],[1677620086,[3,6,8,21,56,105,154,195,233,234]],[1677620087,[2,4,5,15,19,24,29,45,52,56]],[1677620088,[1,4,6,28,31,42,136,172,201,236]],[1677620089,[1,2,3,4,5,5,6,7,10,14]],[1677620090,[1,2,3,4,5,5,7,10,14,15]],[1677620091,[0,1,2,3,3,3,4,7,9,16]],[1677620092,[0,1,2,3,3,4,4,5,7,9]],[1677620093,[0,1,2,2,2,3,3,4,5,29]],[1677620094,[0,1,2,3,3,3,4,5,7,8]],[1677620095,[0,2,2,3,3,3,4,4,4,22]],[1677620096,[0,1,2,3,3,3,3,4,4,5]],[1677620097,[0,1,1,2,2,2,2,2,3,3]],[1677620098,[0,1,1,2,2,2,2,3,4,4]],[1677620099,[0,1,1,2,2,2,2,2,7,12]],[1677620100,[0,1,1,1,1,1,1,1,2,2]],[1677620101,[0,1,1,1,1,1,1,1,1,1]],[1677620102,[1,1,1,1,1,1,1,1,1,1]]]);
|
|
|
|
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([[1677620085,[27,27,0]],[1677620086,[50,50,0]],[1677620087,[126,126,0]],[1677620088,[216,177,39]],[1677620089,[265,225,40]],[1677620090,[332,264,68]],[1677620091,[357,276,81]],[1677620092,[376,280,96]],[1677620093,[395,282,113]],[1677620094,[371,276,95]],[1677620095,[355,246,109]],[1677620096,[297,195,102]],[1677620097,[232,148,84]],[1677620098,[168,93,75]],[1677620099,[97,48,49]],[1677620100,[49,24,25]],[1677620101,[24,10,14]],[1677620102,[11,1,10]]]);
|
|
|
|
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([[1677620085,[0,0,0]],[1677620086,[76,76,0]],[1677620087,[127,127,0]],[1677620088,[216,177,39]],[1677620089,[265,225,40]],[1677620090,[331,263,68]],[1677620091,[358,277,81]],[1677620092,[376,280,96]],[1677620093,[393,280,113]],[1677620094,[373,278,95]],[1677620095,[355,246,109]],[1677620096,[297,195,102]],[1677620097,[232,148,84]],[1677620098,[168,93,75]],[1677620099,[97,48,49]],[1677620100,[49,24,25]],[1677620101,[24,10,14]],[1677620102,[11,1,10]]]);
|
|
|
|
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: 2748.0, color: '#68b65c'},{name: 'KO', y: 1000.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>
|