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.
1125 lines
33 KiB
1125 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">
|
|
ComputerDatabaseSimulation
|
|
</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 10:28:56 GMT</span>
|
|
</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Duration: </span>
|
|
<span>17s </span>
|
|
</span>
|
|
<span class="simulation-information-item">
|
|
<span class="simulation-information-label">Description: </span>
|
|
<span>—</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">2</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: 'Admins',
|
|
data: [
|
|
[1675679336000,1],[1675679337000,1],[1675679338000,1],[1675679339000,1],[1675679340000,2],[1675679341000,2],[1675679342000,2],[1675679343000,2],[1675679344000,2],[1675679345000,2],[1675679346000,2],[1675679347000,2],[1675679348000,2],[1675679349000,1],[1675679350000,1],[1675679351000,1],[1675679352000,1],[1675679353000,1]
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }},
|
|
{
|
|
color: '#68b65c',
|
|
name: 'Users',
|
|
data: [
|
|
[1675679336000,2],[1675679337000,3],[1675679338000,4],[1675679339000,5],[1675679340000,6],[1675679341000,7],[1675679342000,8],[1675679343000,9],[1675679344000,10],[1675679345000,10],[1675679346000,8],[1675679347000,8],[1675679348000,6],[1675679349000,5],[1675679350000,4],[1675679351000,3],[1675679352000,3],[1675679353000,2]
|
|
],
|
|
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: ['134', '140', '146', '152', '158', '164', '170', '176', '182', '188', '194', '200', '206', '212', '218', '224', '230', '236', '242', '248', '254', '260', '266', '272', '278', '284', '290', '296', '302', '308', '314', '320', '326', '332', '338', '344', '350', '356', '362', '368', '374', '380', '386', '392', '398', '404', '410', '416', '422', '428', '434', '440', '446', '452', '458', '464', '470', '476', '482', '488', '494', '500', '506', '512', '518', '524', '530', '536', '542', '548', '554', '560', '566', '572', '578', '584', '590', '596', '602', '608', '614', '620', '626', '632', '638', '644', '650', '656', '662', '668', '674', '680', '686', '692', '698', '704', '710', '716', '722', '728'],
|
|
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: [
|
|
8.33,9.25,6.48,6.48,6.48,6.48,7.4,6.48,4.62,3.7,2.77,0.92,1.85,0.92,2.77,0.92,0.0,1.85,0.92,1.85,0.0,0.92,0.0,0.0,0.0,0.0,1.85,0.0,0.0,0.0,0.0,0.0,0.92,0.0,0.0,0.0,0.0,0.92,0.0,0.0,0.92,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.92,0.92,0.0,0.92,0.0,0.0,0.0,0.0,0.0,0.0,0.0,2.77,0.92,1.85,0.0,0.0,0.0,0.0,0.0,0.0,0.92,0.0,0.0,0.0,0.0,0.0,0.92,0.0,0.0,0.0,0.0,0.0,1.85
|
|
],
|
|
tooltip: { yDecimals: 0, ySuffix: 'ms' }
|
|
},
|
|
{
|
|
type: 'column',
|
|
color: '#f15b4f',
|
|
name: 'KO',
|
|
data: [
|
|
0.0,0.0,0.0,0.0,0.0,0.92,0.0,0.0,0.0,0.0,0.0,0.0,0.92,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,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([[1675679336,[613,613,613,613,613,613,613,613,613,613]],[1675679337,[178,178,178,416,463,511,558,606,644,654]],[1675679338,[142,212,236,359,434,508,582,656,716,731]],[1675679339,[169,172,179,182,266,351,436,521,589,606]],[1675679340,[158,163,164,166,167,261,355,449,524,543]],[1675679341,[134,146,188,505,601,601,601,601,601,602]],[1675679342,[141,143,153,187,215,243,351,538,687,725]],[1675679343,[133,162,171,177,183,190,314,458,573,602]],[1675679344,[141,145,149,170,173,191,209,450,643,692]],[1675679345,[133,140,144,161,162,171,180,366,515,553]],[1675679346,[154,157,198,271,295,313,329,342,353,356]],[1675679347,[132,142,169,187,192,213,266,318,360,371]],[1675679348,[203,206,228,245,247,257,267,277,285,288]],[1675679349,[133,146,157,256,312,368,424,480,524,536]],[1675679350,[131,176,182,182,190,199,207,216,223,225]],[1675679351,[131,137,140,152,159,166,173,180,185,187]],[1675679352,[162,164,167,170,170,171,171,172,172,173]],[1675679353,[186,186,187,216,222,228,234,240,244,246]]]);
|
|
|
|
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([[1675679336,[2,2,0]],[1675679337,[3,3,0]],[1675679338,[4,4,0]],[1675679339,[5,5,0]],[1675679340,[6,6,0]],[1675679341,[6,6,0]],[1675679342,[9,9,0]],[1675679343,[8,8,0]],[1675679344,[11,11,0]],[1675679345,[11,11,0]],[1675679346,[10,10,0]],[1675679347,[8,7,1]],[1675679348,[6,6,0]],[1675679349,[4,4,0]],[1675679350,[5,5,0]],[1675679351,[5,4,1]],[1675679352,[2,2,0]],[1675679353,[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([[1675679336,[0,0,0]],[1675679337,[4,4,0]],[1675679338,[4,4,0]],[1675679339,[5,5,0]],[1675679340,[4,4,0]],[1675679341,[7,7,0]],[1675679342,[8,8,0]],[1675679343,[10,10,0]],[1675679344,[11,11,0]],[1675679345,[11,11,0]],[1675679346,[8,8,0]],[1675679347,[8,7,1]],[1675679348,[7,7,0]],[1675679349,[6,6,0]],[1675679350,[5,5,0]],[1675679351,[3,3,0]],[1675679352,[4,3,1]],[1675679353,[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: 106.0, color: '#68b65c'},{name: 'KO', y: 2.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>
|