Skip to content

Commit

Permalink
Merge branch 'master' into snyk-upgrade-b13e56b8807b4bdb100a861003569bfd
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeknovy
ludeknovy authored Aug 30, 2024
2 parents 1638684 + e4134a8 commit d16dca0
Show file tree
Hide file tree
Showing 12 changed files with 160 additions and 88 deletions.
4 changes: 2 additions & 2 deletions nginx.conf
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ events {
}

http {
client_max_body_size 2048M;
client_max_body_size 5120M;

server {
listen 80;
server_name localhost;

client_max_body_size 2048M;
client_max_body_size 5120M;
root /usr/share/nginx/html;
index index.html index.htm;
include /etc/nginx/mime.types;
Expand Down
20 changes: 10 additions & 10 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"deepmerge": "^4.3.1",
"file-saver": "^2.0.5",
"highcharts": "^10.3.3",
"highcharts-angular": "^3.0.0",
"highcharts-angular": "^3.1.2",
"html2canvas": "^1.4.1",
"moment": "^2.29.4",
"ngx-spinner": "^15.0.1",
Expand Down
4 changes: 2 additions & 2 deletions src/app/graphs/scenarios.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const scenarioHistory = (inputData) => {
};
}
const dt = inputData.map(_ => {
return { percentil: _.percentil, date: _.startDate };
return { percentile90: _.percentile90, date: _.startDate };
});
return {
type: "bar",
Expand All @@ -20,7 +20,7 @@ export const scenarioHistory = (inputData) => {
labels: dt.map(_ => _.date),
datasets: [
{
data: dt.map(_ => _.percentil),
data: dt.map(_ => _.percentile90),
backgroundColor: "rgb(17,122,139, 0.8)",
fill: true,
borderWidth: 1,
Expand Down
42 changes: 37 additions & 5 deletions src/app/item-detail/item-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,20 +125,52 @@ <h2 class="card-title">{{itemData.overview.throughput > 1000 ?
</div>
</div>

<div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile">
<div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile || itemData.topMetricsSettings.percentile90">
<div class="card">
<div class="card-body overview-body">
<h2 *ngIf="itemData.overview.percentil >= 1000" class="card-title">{{
Math.round((itemData.overview.percentil / 1000) * 100) / 100}} <span class="unit-desc">s</span>
<h2 *ngIf="(itemData.overview.percentil || itemData.overview.percentile90) >= 1000" class="card-title">{{
Math.round(((itemData.overview.percentil || itemData.overview.percentile90) / 1000) * 100) / 100}} <span class="unit-desc">s</span>
</h2>
<h2 *ngIf="itemData.overview.percentil < 1000" class="card-title">{{
itemData.overview.percentil}} <span class="unit-desc">ms</span>
<h2 *ngIf="(itemData.overview.percentil || itemData.overview.percentile90) < 1000" class="card-title">{{
itemData.overview.percentil || itemData.overview.percentile90}} <span class="unit-desc">ms</span>
</h2>
</div>
<div class="card-footer bg-transparent card-footer-overview">90% Response time</div>
</div>
</div>


<div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile95">
<div class="card">
<div class="card-body overview-body">
<h2 *ngIf="itemData.overview.percentile95 >= 1000" class="card-title">{{
Math.round((itemData.overview.percentile95 / 1000) * 100) / 100}} <span class="unit-desc">s</span>
</h2>
<h2 *ngIf="itemData.overview.percentile95 < 1000" class="card-title">{{
itemData.overview.percentile95}} <span class="unit-desc">ms</span>
</h2>
<h2 *ngIf="!itemData.overview.percentile95" class="card-title">N/A <span class="unit-desc">ms</span></h2>

</div>
<div class="card-footer bg-transparent card-footer-overview">95% Response time</div>
</div>
</div>

<div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile99">
<div class="card">
<div class="card-body overview-body">
<h2 *ngIf="itemData.overview.percentile99 >= 1000" class="card-title">{{
Math.round((itemData.overview.percentile99 / 1000) * 100) / 100}} <span class="unit-desc">s</span>
</h2>
<h2 *ngIf="itemData.overview.percentile99 < 1000" class="card-title">{{
itemData.overview.percentile99}} <span class="unit-desc">ms</span>
</h2>
<h2 *ngIf="!itemData.overview.percentile99" class="card-title">N/A <span class="unit-desc">ms</span></h2>
</div>
<div class="card-footer bg-transparent card-footer-overview">99% Response time</div>
</div>
</div>

<div class="col-sm" *ngIf="itemData.topMetricsSettings.avgResponseTime">
<div class="card">
<div class="card-body overview-body">
Expand Down
5 changes: 4 additions & 1 deletion src/app/item-detail/request-stats/request-stats-compare.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,10 @@ describe("RequestStatsCompareComponent", () => {
endDate: "",
startDate: "",
errorCount: 0,
percentil: 10,
percentil: null,
percentile90: 10,
percentile95: 10,
percentile99: 10,
errorRate: 0,
throughput: 100
},
Expand Down
23 changes: 8 additions & 15 deletions src/app/items.service.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,10 @@ interface TopMetricsSettings {
avgResponseTime: boolean;
avgConnectionTime: boolean;
avgLatency: boolean;
percentile: boolean;
percentile: boolean; // legacy setting
percentile90: boolean;
percentile95: boolean;
percentile99: boolean
}

interface ItemOverview {
Expand All @@ -86,20 +89,10 @@ interface ItemOverview {
endDate: string;
errorRate: number;
maxVu: number;
percentil: number;
startDate: string;
throughput: number;
errorCount?: number;
}

interface ItemOverview {
avgLatency: number;
avgResponseTime: number;
duration: number;
endDate: string;
errorRate: number;
maxVu: number;
percentil: number;
percentil?: number; // legacy, it needs to be kept for backwards compatibility
percentile90: number;
percentile95: number;
percentile99: number;
startDate: string;
throughput: number;
errorCount?: number;
Expand Down
5 changes: 3 additions & 2 deletions src/app/project/graph/scenarios-graph.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from "@angular/core";
import { Chart } from "chart.js";
import { scenarioHistory } from "src/app/graphs/scenarios";
import { normalizeOverviewData } from "../../utils/normalizeOverviewData";

@Component({
selector: "app-scenarios-graph",
Expand Down Expand Up @@ -46,7 +47,7 @@ export class ScenariosGraphComponent implements AfterViewInit, OnDestroy {
data.datasets[0].data[i] = 0;
}
},
// after the update ..
// after the update
afterUpdate: function(chart) {
if (length === -1) { return; }
},
Expand All @@ -68,7 +69,7 @@ export class ScenariosGraphComponent implements AfterViewInit, OnDestroy {
}
}
});
this.chart = new Chart(this.chartCanvas.nativeElement, scenarioHistory(this.graphData));
this.chart = new Chart(this.chartCanvas.nativeElement, scenarioHistory(this.graphData.map(normalizeOverviewData)));
}

ngOnDestroy(): void {
Expand Down
45 changes: 29 additions & 16 deletions src/app/scenario/scenario-trends/scenario-trends.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import { bytesToMbps } from "src/app/item-detail/calculations";
import { LabelTrendsData, ScenarioTrendsData, ScenarioTrendsUserSettings } from "src/app/items.service.model";
import { ScenarioService } from "src/app/scenario.service";
import { Metrics } from "../../item-detail/metrics";
import { normalizeOverviewData } from "../../utils/normalizeOverviewData";

@Component({
selector: "app-scenario-trends",
templateUrl: "./scenario-trends.component.html",
styleUrls: ["./scenario-trends.component.scss"]
selector: 'app-scenario-trends',
templateUrl: './scenario-trends.component.html',
styleUrls: ['./scenario-trends.component.scss']
})
export class ScenarioTrendsComponent implements OnInit {
@Input() params;
Expand Down Expand Up @@ -43,7 +44,7 @@ export class ScenarioTrendsComponent implements OnInit {
constructor(private scenarioService: ScenarioService, private router: Router,
) {
this.chartDataMapping = new Map([
["percentil", { name: Metrics.ResponseTimeP90, onLoad: true, color: "rgb(17,122,139, 0.8)", tooltip: { valueSuffix: " ms" } }],
["percentile90", { name: Metrics.ResponseTimeP90, onLoad: true, color: "rgb(17,122,139, 0.8)", tooltip: { valueSuffix: " ms" } }],
["avgResponseTime", { name: Metrics.ResponseTimeAvg, onLoad: false, tooltip: { valueSuffix: " ms" } }],
["avgLatency", { name: Metrics.LatencyAvg, onLoad: false, tooltip: { valueSuffix: " ms" } }],
["avgConnect", { name: Metrics.ConnectAvg, onLoad: false, tooltip: { valueSuffix: " ms" } }],
Expand All @@ -53,7 +54,7 @@ export class ScenarioTrendsComponent implements OnInit {
["network", { name: Metrics.Network, yAxis: 4, onLoad: false, transform: this.networkTransform, tooltip: { valueSuffix: " mbps" } }],
]);
}

ngOnInit() {
this.scenarioService.trends$.subscribe((_: {
aggregatedTrends: ScenarioTrendsData[],
Expand All @@ -65,19 +66,22 @@ export class ScenarioTrendsComponent implements OnInit {
return;
}
this.userSettings = _.userSettings;
this.generateAggregateChartLines(_.aggregatedTrends);
this.generateAggregatedChartLines(_.aggregatedTrends);
this.generateLabelChartLines(_.labelTrends);
this.generateDegradationCurve(_.responseTimeDegradationCurve);
});
}

generateAggregateChartLines(data: ScenarioTrendsData[]) {
generateAggregatedChartLines(data: ScenarioTrendsData[]) {
if (!Array.isArray(data)) {
return;
}
const dates = data.map(_ => moment(_.overview.startDate).format("DD. MM. YYYY HH:mm:ss"));
const series = [];
const seriesData = data.reduce((acc, current) => {
const seriesData = data.map((scenarioTrends) => {
scenarioTrends.overview = normalizeOverviewData(scenarioTrends.overview);
return scenarioTrends;
}).reduce((acc, current) => {
for (const key of Object.keys(current.overview)) {

if (!["startDate", "endDate", "duration"].includes(key)) {
Expand All @@ -91,7 +95,7 @@ export class ScenarioTrendsComponent implements OnInit {
return acc;
}, {});

this.setItemIds(data)
this.setItemIds(data);

for (const key of Object.keys(seriesData)) {
const chartSeriesSettings = this.chartDataMapping.get(key);
Expand Down Expand Up @@ -126,9 +130,18 @@ export class ScenarioTrendsComponent implements OnInit {

for (const key of Object.keys(data)) {
// Adding item id to correctly identify it when clicking a point.
seriesP90.push({ name: key, data: data[key].percentile90.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) });
seriesErrorRate.push({ name: key, data: data[key].errorRate.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) });
seriesThroughput.push({ name: key, data: data[key].throughput.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] })) });
seriesP90.push({
name: key,
data: data[key].percentile90.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] }))
});
seriesErrorRate.push({
name: key,
data: data[key].errorRate.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] }))
});
seriesThroughput.push({
name: key,
data: data[key].throughput.map(dataValue => ({ y: dataValue[1], name: dataValue[0], itemId: dataValue[2] }))
});
}
this.updateLabelChart(this.labelScenarioTrendChartP90Option, seriesP90);
this.updateLabelChart(this.labelScenarioTrendChartThroughputOption, seriesThroughput);
Expand All @@ -150,7 +163,7 @@ export class ScenarioTrendsComponent implements OnInit {
// Label series have item id amended to open correct detail, it's needed for a case when a labels do not match, eg:
// label2 start at point 0, but label2 starts at point 1, it leads to off by N issues.
// It's not needed for aggregated trend chart, as that is column chart and only one point can be clicked.
const boundItemId = event.point.series.data[event.point.index]?.options?.itemId
const boundItemId = event.point.series.data[event.point.index]?.options?.itemId;

const itemId = boundItemId || Array.from(this.itemIds)[event.point.index];
const { projectName, scenarioName } = this.params;
Expand All @@ -174,9 +187,9 @@ export class ScenarioTrendsComponent implements OnInit {

private setItemIds = (data: ScenarioTrendsData[]) => {
if (this.itemIds.size > 0) {
this.itemIds.clear()
this.itemIds.clear();
}
data.forEach(line => this.itemIds.add(line.id))
}
data.forEach(line => this.itemIds.add(line.id));
};

}
19 changes: 16 additions & 3 deletions src/app/shared/shared-project/project-settings/project-settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,23 @@ <h6>Test Report Top Statistics Bar</h6>
<label class="form-check-label" for="errorCount">Error Count</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="percentile"
formControlName="percentile" (change)="onCheckboxChange()">
<label class="form-check-label" for="percentile">90% Percentile</label>
<input type="checkbox" class="form-check-input" id="percentile90"
formControlName="percentile90" (change)="onCheckboxChange()">
<label class="form-check-label" for="percentile90">90% Percentile</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="percentile95"
formControlName="percentile95" (change)="onCheckboxChange()">
<label class="form-check-label" for="percentile95">95% Percentile</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="percentile99"
formControlName="percentile99" (change)="onCheckboxChange()">
<label class="form-check-label" for="percentile99">99% Percentile</label>
</div>



<div class="form-check">
<input type="checkbox" class="form-check-input" id="throughput"
formControlName="throughput" (change)="onCheckboxChange()">
Expand Down
Loading

0 comments on commit d16dca0

Please sign in to comment.