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.
1118 lines
34 KiB
1118 lines
34 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:45:46 GMT</span>
|
|
</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Duration: </span>
|
|
<span>21s </span>
|
|
</span>
|
|
<span class="simulation-tooltip simulation-information-item description" title="Description" data-content="Load testing Iris API">
|
|
<span class="simulation-information-label">Description: </span>
|
|
<span>Load testing Iris 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(201), but actually found 200<span class="value" style="display:none">0</span></td>
|
|
<td class="value error-col-2 total ko">653</td>
|
|
<td class="value error-col-3 total ko">100 %</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: [
|
|
[1675698347000,52],[1675698348000,103],[1675698349000,153],[1675698350000,203],[1675698351000,253],[1675698352000,282],[1675698353000,309],[1675698354000,334],[1675698355000,351],[1675698356000,361],[1675698357000,324],[1675698358000,306],[1675698359000,277],[1675698360000,246],[1675698361000,200],[1675698362000,153],[1675698363000,96],[1675698364000,47],[1675698365000,14],[1675698366000,3],[1675698367000,2],[1675698368000,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: ['22', '65', '108', '152', '195', '238', '281', '325', '368', '411', '455', '498', '541', '585', '628', '671', '714', '758', '801', '844', '888', '931', '974', '1018', '1061', '1104', '1147', '1191', '1234', '1277', '1321', '1364', '1407', '1451', '1494', '1537', '1580', '1624', '1667', '1710', '1754', '1797', '1840', '1884', '1927', '1970', '2013', '2057', '2100', '2143', '2187', '2230', '2273', '2317', '2360', '2403', '2446', '2490', '2533', '2576', '2620', '2663', '2706', '2750', '2793', '2836', '2879', '2923', '2966', '3009', '3053', '3096', '3139', '3183', '3226', '3269', '3312', '3356', '3399', '3442', '3486', '3529', '3572', '3616', '3659', '3702', '3745', '3789', '3832', '3875', '3919', '3962', '4005', '4049', '4092', '4135', '4178', '4222', '4265', '4308'],
|
|
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: [
|
|
57.41,1.37,1.74,0.67,0.36,0.18,0.33,0.3,0.15,0.39,0.24,0.36,0.39,0.36,0.24,0.45,0.3,0.33,0.18,0.45,0.45,0.3,0.55,0.24,0.67,0.3,0.76,0.36,0.36,0.33,0.33,0.42,0.64,0.3,0.3,0.21,0.36,0.27,0.33,0.24,0.27,0.24,0.21,0.15,0.06,0.12,0.12,0.33,0.3,0.3,0.33,0.12,0.21,0.18,0.09,0.06,0.12,0.15,0.06,0.21,0.15,0.15,0.15,0.06,0.09,0.06,0.12,0.03,0.12,0.18,0.03,0.0,0.06,0.06,0.06,0.03,0.09,0.06,0.03,0.09,0.0,0.0,0.06,0.12,0.0,0.06,0.03,0.03,0.0,0.0,0.0,0.03,0.0,0.03,0.0,0.0,0.0,0.0,0.03,0.03
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
12.63,0.3,0.58,0.24,0.15,0.09,0.15,0.03,0.09,0.21,0.09,0.21,0.09,0.09,0.15,0.09,0.18,0.15,0.24,0.15,0.3,0.21,0.12,0.15,0.18,0.18,0.15,0.15,0.15,0.0,0.15,0.15,0.12,0.15,0.09,0.06,0.06,0.06,0.09,0.06,0.09,0.03,0.03,0.03,0.0,0.0,0.09,0.03,0.06,0.03,0.03,0.06,0.12,0.03,0.06,0.0,0.12,0.0,0.06,0.03,0.03,0.03,0.03,0.06,0.0,0.03,0.06,0.03,0.0,0.03,0.0,0.09,0.03,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.03,0.03,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([[1675698347,[8,10,11,15,16,19,32,95,197,225]],[1675698348,[1,3,6,7,7,7,7,8,87,91]],[1675698349,[1,2,3,7,8,9,11,68,157,178]],[1675698350,[1,2,4,9,11,13,107,169,198,212]],[1675698351,[1,3,7,14,28,89,108,239,319,1337]],[1675698352,[1,4,9,171,516,652,802,1010,1300,1616]],[1675698353,[1,3,9,460,621,840,980,1300,1623,2137]],[1675698354,[1,5,10,1112,1268,1402,1755,2024,2548,3017]],[1675698355,[1,3,9,1183,1535,2164,2375,3030,3920,4285]],[1675698356,[1,5,12,2126,2456,2709,2935,3233,3598,4330]],[1675698357,[1,3,7,1453,1630,1907,2245,2648,3233,3427]],[1675698358,[1,3,6,18,1095,1370,1650,2291,2738,2995]],[1675698359,[1,4,8,924,1164,1411,1628,1836,2176,2270]],[1675698360,[1,3,6,1059,1144,1177,1358,1590,1973,2110]],[1675698361,[1,4,10,876,994,1077,1145,1283,1567,1583]],[1675698362,[1,4,7,309,372,427,506,550,615,688]],[1675698363,[0,3,3,90,98,104,136,140,158,166]],[1675698364,[0,2,3,5,79,84,90,91,96,98]],[1675698365,[2,2,3,3,3,4,4,7,64,80]],[1675698366,[2,3,4,4,4,4,4,4,4,4]],[1675698367,[3,3,4,4,4,4,4,4,4,4]],[1675698368,[4,4,4,4,4,4,4,4,4,4]]]);
|
|
|
|
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([[1675698347,[28,28,0]],[1675698348,[77,77,0]],[1675698349,[148,126,22]],[1675698350,[206,175,31]],[1675698351,[239,198,41]],[1675698352,[274,223,51]],[1675698353,[276,227,49]],[1675698354,[277,228,49]],[1675698355,[275,220,55]],[1675698356,[254,214,40]],[1675698357,[195,149,46]],[1675698358,[145,117,28]],[1675698359,[174,126,48]],[1675698360,[187,143,44]],[1675698361,[154,112,42]],[1675698362,[129,90,39]],[1675698363,[109,78,31]],[1675698364,[70,45,25]],[1675698365,[32,22,10]],[1675698366,[9,7,2]],[1675698367,[3,3,0]],[1675698368,[1,1,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([[1675698347,[27,27,0]],[1675698348,[77,77,0]],[1675698349,[149,127,22]],[1675698350,[192,164,28]],[1675698351,[233,194,39]],[1675698352,[242,200,42]],[1675698353,[255,211,44]],[1675698354,[253,204,49]],[1675698355,[256,203,53]],[1675698356,[212,177,35]],[1675698357,[164,127,37]],[1675698358,[188,156,32]],[1675698359,[218,170,48]],[1675698360,[193,145,48]],[1675698361,[179,131,48]],[1675698362,[182,131,51]],[1675698363,[124,84,40]],[1675698364,[73,48,25]],[1675698365,[32,22,10]],[1675698366,[9,7,2]],[1675698367,[3,3,0]],[1675698368,[1,1,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: 2609.0, color: '#68b65c'},{name: 'KO', y: 653.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>
|