From 0f24f599cb69c964c865cca874840672fbdd026a Mon Sep 17 00:00:00 2001 From: Ludek Novy <13610612+ludeknovy@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:42:12 +0200 Subject: [PATCH 1/2] Refactor monitoring stats layout and initialization (#415) Replaced modal-based layout with a card-based layout in monitoring-stats.component.html to improve UI consistency. Added OnInit interface to MonitoringStatsComponent for better chart initialization. Removed redundant component placements and adjusted CSS styles for better spacing. --- .../item-detail/item-detail.component.html | 17 ++++++++-- .../monitoring-stats.component.css | 5 +++ .../monitoring-stats.component.html | 31 +++++++++---------- .../monitoring-stats.component.ts | 11 ++++--- 4 files changed, 40 insertions(+), 24 deletions(-) diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html index 739f1edb..abb9f1ef 100644 --- a/src/app/item-detail/item-detail.component.html +++ b/src/app/item-detail/item-detail.component.html @@ -337,8 +337,6 @@
Summary
Max CPU usage
{{itemData.monitoring.cpu.max}}% - -
@@ -419,6 +417,8 @@
Status Codes Chart
+ +
@@ -515,6 +515,19 @@
Target System Statistics + Monitoring + +
+
+ + +
+
+ + + +
diff --git a/src/app/item-detail/monitoring-stats/monitoring-stats.component.css b/src/app/item-detail/monitoring-stats/monitoring-stats.component.css index 5e76fd30..db9e4665 100644 --- a/src/app/item-detail/monitoring-stats/monitoring-stats.component.css +++ b/src/app/item-detail/monitoring-stats/monitoring-stats.component.css @@ -11,3 +11,8 @@ .monitoring-data:hover { color: #105196 } + + +.card { + margin-top: 20px; +} diff --git a/src/app/item-detail/monitoring-stats/monitoring-stats.component.html b/src/app/item-detail/monitoring-stats/monitoring-stats.component.html index 17f6812b..df506f4b 100644 --- a/src/app/item-detail/monitoring-stats/monitoring-stats.component.html +++ b/src/app/item-detail/monitoring-stats/monitoring-stats.component.html @@ -1,19 +1,16 @@ - -
- - -
-
-
- +
+
+
+
Monitoring
+
+
+ +
+
- - - - - - +
diff --git a/src/app/item-detail/monitoring-stats/monitoring-stats.component.ts b/src/app/item-detail/monitoring-stats/monitoring-stats.component.ts index 857f85b1..000de2e4 100644 --- a/src/app/item-detail/monitoring-stats/monitoring-stats.component.ts +++ b/src/app/item-detail/monitoring-stats/monitoring-stats.component.ts @@ -8,9 +8,9 @@ import { from } from "rxjs"; @Component({ selector: "app-monitoring-stats", templateUrl: "./monitoring-stats.component.html", - styleUrls: ["./monitoring-stats.component.css"] + styleUrls: ["./monitoring-stats.component.css", "../item-detail.component.scss", "../../shared-styles.css"] }) -export class MonitoringStatsComponent { +export class MonitoringStatsComponent implements OnInit { Highcharts: typeof Highcharts = Highcharts; monitoringChartOptions; chartConstructor = "chart"; @@ -28,11 +28,12 @@ export class MonitoringStatsComponent { @Input() data: [{ name: string, timestamp: Date, avgCpu: number, avgMem: number }]; + ngOnInit() { + this.prepareChart() + } - open(content) { - this.modalService.open(content, { size: "xl" }).result - .then((_) => { this.monitoringChartOptions = null; }, () => { this.monitoringChartOptions = null; }); + prepareChart() { const workers = Array.from(new Set(this.data.map(data => data.name))); const series = workers.map((worker) => this.data .filter(data => data.name === worker) From f180c8b07c6d17ede1ed99f9df14fe5332db2c44 Mon Sep 17 00:00:00 2001 From: Ludek Novy <13610612+ludeknovy@users.noreply.github.com> Date: Sat, 14 Sep 2024 11:08:21 +0200 Subject: [PATCH 2/2] Comparison reworked (#416) * Refactor stats comparison and related components [WIP] Renamed and refactored `RequestStatsCompareComponent` to `RequestStatsComponent` for better clarity and separation of concerns. Added dropdown for quick comparison options and integrated data comparison logic in `stats-compare` component. Updated imports and adjusted the HTML structure accordingly. * Add ComparisonStatsService with basic structure and tests Implemented the ComparisonStatsService with a BehaviorSubject to store item statistics. Included an initial unit test to verify the service creation. * Add ComparisonStatsService with basic structure and tests Implemented the ComparisonStatsService with a BehaviorSubject to store item statistics. Included an initial unit test to verify the service creation. * Remove unused variable and fix resetStatsData logic Eliminated the `comparedData` variable as it was not in use, and corrected the `resetStatsData` method to reset the `comparingData` variable instead. * Enhance stats comparison menu and refactor item fetching Improved the UI for the stats comparison dropdown menu by adding icons and adjusting styling for clarity. Refactored the item fetching logic to use the `ItemsApiService` and simplified parameter subscription handling in components. Additionally, fixed various issues related to comparison data state management. * linter fixes --- .../comparison-stats.service.spec.ts | 16 ++ src/app/_services/comparison-stats.service.ts | 19 ++ .../item-detail/item-detail.component.html | 128 +++++++----- src/app/item-detail/item-detail.module.ts | 4 +- ...ponent.css => request-stats.component.css} | 0 ...nent.html => request-stats.component.html} | 17 +- ...pec.ts => request-stats.component.spec.ts} | 37 +--- ...omponent.ts => request-stats.component.ts} | 191 +++++++----------- .../stats-compare/stats-compare.component.css | 8 + .../stats-compare.component.html | 155 +++++++------- .../stats-compare/stats-compare.component.ts | 93 +++++++-- src/app/items.service.model.ts | 3 + 12 files changed, 372 insertions(+), 299 deletions(-) create mode 100644 src/app/_services/comparison-stats.service.spec.ts create mode 100644 src/app/_services/comparison-stats.service.ts rename src/app/item-detail/request-stats/{request-stats-compare.component.css => request-stats.component.css} (100%) rename src/app/item-detail/request-stats/{request-stats-compare.component.html => request-stats.component.html} (94%) rename src/app/item-detail/request-stats/{request-stats-compare.component.spec.ts => request-stats.component.spec.ts} (82%) rename src/app/item-detail/request-stats/{request-stats-compare.component.ts => request-stats.component.ts} (77%) diff --git a/src/app/_services/comparison-stats.service.spec.ts b/src/app/_services/comparison-stats.service.spec.ts new file mode 100644 index 00000000..67b80999 --- /dev/null +++ b/src/app/_services/comparison-stats.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from "@angular/core/testing"; + +import { ComparisonStatsService } from "./comparison-stats.service"; + +describe("ComparisonStatsService", () => { + let service: ComparisonStatsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ComparisonStatsService); + }); + + it("should be created", () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/_services/comparison-stats.service.ts b/src/app/_services/comparison-stats.service.ts new file mode 100644 index 00000000..fb6c7bdd --- /dev/null +++ b/src/app/_services/comparison-stats.service.ts @@ -0,0 +1,19 @@ +import { Injectable } from "@angular/core"; +import { BehaviorSubject } from "rxjs"; +import { ItemStatistics } from "../items.service.model"; + +@Injectable({ + providedIn: 'root' +}) +export class ComparisonStatsService { + + private requestStats = new BehaviorSubject([]); + + requestStats$ = this.requestStats.asObservable(); + + + setRequestStats(data: ItemStatistics[]) { + this.requestStats.next(data); + } + +} diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html index abb9f1ef..dc726020 100644 --- a/src/app/item-detail/item-detail.component.html +++ b/src/app/item-detail/item-detail.component.html @@ -9,6 +9,8 @@ + +
@@ -96,13 +98,13 @@
Test failure
Overview requests: {{totalRequests | number}}
+ class="total-samples"> requests: {{ totalRequests | number }}
-

{{itemData.overview.maxVu}}

+

{{ itemData.overview.maxVu }}

Virtual Users
@@ -112,9 +114,11 @@

{{itemData.overview.maxVu}}

-

{{itemData.overview.throughput > 1000 ? - Math.round(itemData.overview.throughput) : itemData.overview.throughput}} reqs/s +

{{ + itemData.overview.throughput > 1000 ? + Math.round(itemData.overview.throughput) : itemData.overview.throughput + }} reqs/s

Throughput {{itemData.overview.throughput > 1000 ?
-
+
-

{{ - Math.round(((itemData.overview.percentil || itemData.overview.percentile90) / 1000) * 100) / 100}} s +

{{ + Math.round(((itemData.overview.percentil || itemData.overview.percentile90) / 1000) * 100) / 100 + }} s

-

{{ - itemData.overview.percentil || itemData.overview.percentile90}} ms +

{{ + itemData.overview.percentil || itemData.overview.percentile90 + }} ms

90% Response time
@@ -144,12 +153,15 @@

{{ - Math.round((itemData.overview.percentile95 / 1000) * 100) / 100}} s + Math.round((itemData.overview.percentile95 / 1000) * 100) / 100 + }} s

{{ - itemData.overview.percentile95}} ms + itemData.overview.percentile95 + }} ms

-

N/A ms

+

N/A ms

95% Response time
@@ -160,12 +172,15 @@

N/A

{{ - Math.round((itemData.overview.percentile99 / 1000) * 100) / 100}} s + Math.round((itemData.overview.percentile99 / 1000) * 100) / 100 + }} s

{{ - itemData.overview.percentile99}} ms + itemData.overview.percentile99 + }} ms

-

N/A ms

+

N/A ms

99% Response time

@@ -175,11 +190,13 @@

N/A

{{ - Math.round((itemData.overview.avgResponseTime / 1000) * 100) / 100}} s

{{ - itemData.overview.avgResponseTime}} ms + itemData.overview.avgResponseTime + }} ms

Avg. Response time
@@ -190,11 +207,13 @@

{{

{{ - Math.round((itemData.overview.avgLatency / 1000) * 100) / 100}} s + Math.round((itemData.overview.avgLatency / 1000) * 100) / 100 + }} s

{{ - itemData.overview.avgLatency}} ms + itemData.overview.avgLatency + }} ms

Avg. latency {{

{{ - Math.round((itemData.overview.avgConnect / 1000) * 100) / 100}} s + Math.round((itemData.overview.avgConnect / 1000) * 100) / 100 + }} s

{{ - itemData.overview.avgConnect}} ms + itemData.overview.avgConnect + }} ms

Avg. connection {{
-

{{convertBytesToMbps(itemData.overview.bytesPerSecond + - itemData.overview.bytesSentPerSecond) | number: '1.0-2'}} Mbps +

{{ + convertBytesToMbps(itemData.overview.bytesPerSecond + + itemData.overview.bytesSentPerSecond) | number: '1.0-2' + }} Mbps

Network data
@@ -236,7 +259,7 @@

{{convertBytesToMbps(itemData.overview.bytesPerSecond +
-

{{itemData.overview.errorRate}} {{ itemData.overview.errorRate }} %

Error rate
@@ -246,7 +269,7 @@

{{itemData.overview.errorRate}}
-

{{itemData.overview.errorCount | number}}

+

{{ itemData.overview.errorCount | number }}

Error count
@@ -256,7 +279,7 @@

{{itemData.overview.errorCount | number}}

{{convertBytesToMbps(itemData.overview.bytesSentPerSecond) | number: '1.0-2'}} + class="card-title">{{ convertBytesToMbps(itemData.overview.bytesSentPerSecond) | number: '1.0-2' }} Mbps

Network sent
@@ -267,7 +290,8 @@

{{itemData.overview.errorCount | number}}

-

{{convertBytesToMbps(itemData.overview.bytesPerSecond) | number: '1.0-2'}} +

{{ convertBytesToMbps(itemData.overview.bytesPerSecond) | number: '1.0-2' }} Mbps

Network received
@@ -293,26 +317,26 @@
Summary
Start time
- {{itemData.overview.startDate | date:'d. L. yyyy, H:mm:ss'}} + {{ itemData.overview.startDate | date:'d. L. yyyy, H:mm:ss' }}
End Time
- {{itemData.overview.endDate | date:'d. L. yyyy, H:mm:ss'}} + {{ itemData.overview.endDate | date:'d. L. yyyy, H:mm:ss' }}
Duration
-
{{itemData.overview.duration}} min
+
{{ itemData.overview.duration }} min
Environment
-
{{itemData.environment}}
+
{{ itemData.environment }}
Status
-
{{getTextStatus(itemData.status)}}
+
{{ getTextStatus(itemData.status) }}
@@ -320,11 +344,11 @@
Summary
Hostname
-
{{itemData.hostname}}
+
{{ itemData.hostname }}
Note
-
{{itemData.note}}
+
{{ itemData.note }}
@@ -336,7 +360,7 @@
Summary
Max CPU usage
-
{{itemData.monitoring.cpu.max}}% +
{{ itemData.monitoring.cpu.max }}%
@@ -362,11 +386,13 @@
Summary
Overall Chart
- - -
+ + +
+

@@ -418,7 +444,6 @@
Status Codes Chart
-
@@ -459,16 +484,16 @@
Target System Statistics - {{_.sutHostname || "other"}} + {{ _.sutHostname || "other" }} - {{_.avgResponseTime | number: '1.0-2'}} - {{_.percentile | number: '1.0-2'}} - {{_.throughput | number: '1.0-2' || "n/a"}} - {{convertBytesToMbps(_.bytesPerSecond) | number: '1.0-2' || "n/a" }} - {{_.errorRate | number: '1.0-2'}} % + {{ _.avgResponseTime | number: '1.0-2' }} + {{ _.percentile | number: '1.0-2' }} + {{ _.throughput | number: '1.0-2' || "n/a" }} + {{ convertBytesToMbps(_.bytesPerSecond) | number: '1.0-2' || "n/a" }} + {{ _.errorRate | number: '1.0-2' }} % @@ -480,14 +505,13 @@
Target System Statistics
- +
- -
  • diff --git a/src/app/item-detail/item-detail.module.ts b/src/app/item-detail/item-detail.module.ts index 2a17beba..1bef06e9 100644 --- a/src/app/item-detail/item-detail.module.ts +++ b/src/app/item-detail/item-detail.module.ts @@ -2,7 +2,7 @@ import { NgModule } from "@angular/core"; import { CommonModule } from "@angular/common"; import { ItemDetailComponent } from "./item-detail.component"; import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; -import { RequestStatsCompareComponent } from "./request-stats/request-stats-compare.component"; +import { RequestStatsComponent } from "./request-stats/request-stats.component"; import { ThresholdsAlertComponent } from "./thresholds-alert/thresholds-alert.component"; import { PerformanceAnalysisComponent } from "./performance-analysis/performance-analysis.component"; import { AuthGuard } from "../auth.guard"; @@ -40,7 +40,7 @@ const routes: Routes = [{ @NgModule({ - declarations: [ItemDetailComponent, RequestStatsCompareComponent, ThresholdsAlertComponent, + declarations: [ItemDetailComponent, RequestStatsComponent, ThresholdsAlertComponent, PerformanceAnalysisComponent, LabelChartComponent, AnalyzeChartsComponent, LabelHealthComponent, LabelTrendComponent, StatsCompareComponent, AddMetricComponent, ShareComponent, DeleteShareLinkComponent, CreateNewShareLinkComponent, MonitoringStatsComponent, ReloadCustomChartComponent, ChartIntervalComponent, ForbiddenComponent, ThresholdFailureComponent, ZoomChartsComponent, ErrorSummaryComponent], diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.css b/src/app/item-detail/request-stats/request-stats.component.css similarity index 100% rename from src/app/item-detail/request-stats/request-stats-compare.component.css rename to src/app/item-detail/request-stats/request-stats.component.css diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.html b/src/app/item-detail/request-stats/request-stats.component.html similarity index 94% rename from src/app/item-detail/request-stats/request-stats-compare.component.html rename to src/app/item-detail/request-stats/request-stats.component.html index e28a9df7..03dd1020 100644 --- a/src/app/item-detail/request-stats/request-stats-compare.component.html +++ b/src/app/item-detail/request-stats/request-stats.component.html @@ -1,19 +1,12 @@
    Request Statistics - - Comparing to test: {{comparedMetadata.id}} - with - {{comparedMetadata.maxVu}} VU - - + +
    @@ -22,12 +15,6 @@
    Request Statistics
    - - diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.spec.ts b/src/app/item-detail/request-stats/request-stats.component.spec.ts similarity index 82% rename from src/app/item-detail/request-stats/request-stats-compare.component.spec.ts rename to src/app/item-detail/request-stats/request-stats.component.spec.ts index 00cad592..6325232a 100644 --- a/src/app/item-detail/request-stats/request-stats-compare.component.spec.ts +++ b/src/app/item-detail/request-stats/request-stats.component.spec.ts @@ -10,16 +10,16 @@ import { LabelTrendComponent } from "../label-trend/label-trend.component"; import { StatsCompareComponent } from "../stats-compare/stats-compare.component"; import { LabelHealthComponent } from "./label-health/label-health.component"; -import { RequestStatsCompareComponent } from "./request-stats-compare.component"; +import { RequestStatsComponent } from "./request-stats.component"; describe("RequestStatsCompareComponent", () => { - let component: RequestStatsCompareComponent; - let fixture: ComponentFixture; + let component: RequestStatsComponent; + let fixture: ComponentFixture; beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ declarations: [ - RequestStatsCompareComponent, + RequestStatsComponent, StatsCompareComponent, LabelTrendComponent, LabelHealthComponent, @@ -38,7 +38,7 @@ describe("RequestStatsCompareComponent", () => { })); beforeEach(() => { - fixture = TestBed.createComponent(RequestStatsCompareComponent); + fixture = TestBed.createComponent(RequestStatsComponent); component = fixture.componentInstance; component.itemData = { environment: "", @@ -159,33 +159,6 @@ describe("RequestStatsCompareComponent", () => { it("should create", () => { expect(component).toBeTruthy(); }); - it("should call resetStatsData when itemToCompare triggered", () => { - const spy = spyOn(component, "resetStatsData").and.callThrough(); - component.itemToCompare({ - maxVu: 100, - id: "123-123", - statistics: [{ - avgResponseTime: 109, - bytes: 7587, - errorRate: 0, - label: "02 - Click_Log_In-22", - maxResponseTime: 380, - minResponseTime: 81, - n0: 330, - n5: 344, - n9: 372, - samples: 200, - throughput: 0.17, - }], - plot: { - responseTime: [{ data: [], name: "label" }], - throughput: [{ data: [], name: "label" }] - }, - extraPlotData: {}, - histogramPlotData: {} - }); - expect(spy).toHaveBeenCalled(); - }); describe("label search", () => { it("should search fulltext", () => { component.search("02"); diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.ts b/src/app/item-detail/request-stats/request-stats.component.ts similarity index 77% rename from src/app/item-detail/request-stats/request-stats-compare.component.ts rename to src/app/item-detail/request-stats/request-stats.component.ts index d0ed76d8..e4d8b5c3 100644 --- a/src/app/item-detail/request-stats/request-stats-compare.component.ts +++ b/src/app/item-detail/request-stats/request-stats.component.ts @@ -2,48 +2,43 @@ import { Component, Input, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetec import { ItemParams } from "src/app/scenario/item-controls/item-controls.model"; import { bytesToMbps, roundNumberTwoDecimals } from "../calculations"; import { AnalyzeChartService } from "../../analyze-chart.service"; -import { ItemsApiService } from "src/app/items-api.service"; -import { ToastrService } from "ngx-toastr"; + import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import html2canvas from "html2canvas"; import { ExcelService } from "src/app/_services/excel.service"; -import { ItemDetail } from "../../items.service.model"; -import { ComparisonChartService } from "../../_services/comparison-chart.service"; +import { ItemDetail, ItemStatistics } from "../../items.service.model"; +import { ComparisonStatsService } from "../../_services/comparison-stats.service"; @Component({ - selector: "app-request-stats-compare", - templateUrl: "./request-stats-compare.component.html", - styleUrls: ["./request-stats-compare.component.css", "../item-detail.component.scss"] + selector: 'app-request-stats', + templateUrl: './request-stats.component.html', + styleUrls: ['./request-stats.component.css', '../item-detail.component.scss'] }) -export class RequestStatsCompareComponent implements OnInit, OnDestroy { +export class RequestStatsComponent implements OnInit, OnDestroy { @Input() itemData: ItemDetail; @Input() isAnonymous: boolean; @Input() params: ItemParams; @Input() chartLines; - @ViewChild("screen") screen: ElementRef; - @ViewChild("canvas") canvas: ElementRef; - @ViewChild("downloadLink") downloadLink: ElementRef; + @ViewChild('screen') screen: ElementRef; + @ViewChild('canvas') canvas: ElementRef; + @ViewChild('downloadLink') downloadLink: ElementRef; comparingData; comparedData; comparedDataMs; labelsData; - comparisonWarning = []; - comparedMetadata; defaultUnit = true; externalSearchTerm = ""; collapsableSettings = {}; constructor( - private itemsService: ItemsApiService, - private toastr: ToastrService, private analyzeChartService: AnalyzeChartService, private modalService: NgbModal, private excelService: ExcelService, - private comparisonChartService: ComparisonChartService + private comparisonStatsService: ComparisonStatsService, ) { } @@ -52,13 +47,13 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { this.itemData.statistics.map(labelData => { const failureCount = labelData.responseMessageFailures.reduce( (previousValue, currentValue) => { - previousValue.count += currentValue.count - return previousValue - },{ count: 0 }) + previousValue.count += currentValue.count; + return previousValue; + }, { count: 0 }); - Object.assign(labelData, { failures: failureCount.count }) - return labelData - }) + Object.assign(labelData, { failures: failureCount.count }); + return labelData; + }); if (this.itemData?.thresholds?.passed === false) { this.labelsData = this.itemData.statistics.map(labelData => { @@ -77,6 +72,22 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { } else { this.labelsData = this.itemData.statistics; } + + + this.comparisonStatsService.requestStats$.subscribe(data => { + if (data == null || data?.length == 0) { + this.comparedData = null + this.labelsData = this.itemData.statistics + this.comparedDataMs = null + } else { + const diffValues = this.getValuesDiff(this.labelsData, data) + this.comparedData = diffValues + this.labelsData = diffValues + this.comparedDataMs = diffValues + this.comparingData = data + } + }); + this.analyzeChartService.currentData.subscribe(data => { if (data && data.label) { this.search(data.label); @@ -87,13 +98,7 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { ngOnDestroy() { this.analyzeChartService.changeMessage(null); - } - - resetStatsData() { - this.comparedData = null; - this.labelsData = this.itemData.statistics; - this.defaultUnit = true; - this.comparisonChartService.resetPlot(); + this.comparisonStatsService.setRequestStats(null) } search(query: string) { @@ -149,89 +154,6 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { this.externalSearchTerm = ""; } - itemToCompare(data) { - this.resetStatsData(); - this.comparisonChartService.setComparisonPlot(data.plot, data.extraPlotData); - this.comparisonChartService.setHistogramPlot(data.histogramPlotData); - this.comparingData = data; - this.comparedMetadata = { id: data.id, maxVu: data.maxVu }; - if (data.maxVu !== this.itemData.overview.maxVu) { - this.comparisonWarning.push(`VU do differ ${this.itemData.overview.maxVu} vs. ${data.maxVu}`); - } - - this.comparedDataMs = this.labelsData.map((_) => { - const labelToBeCompared = data.statistics.find((__) => __.label === _.label); - if (labelToBeCompared) { - return { - ..._, - samples: (_.samples - labelToBeCompared.samples), - avgResponseTime: (_.avgResponseTime - labelToBeCompared.avgResponseTime), - minResponseTime: (_.minResponseTime - labelToBeCompared.minResponseTime), - maxResponseTime: (_.maxResponseTime - labelToBeCompared.maxResponseTime), - medianResponseTime: (_.medianResponseTime - labelToBeCompared.medianResponseTime), - bytes: ((_.bytes - labelToBeCompared.bytes) / 1024).toFixed(2), - bytesPerSecond: (_.bytesPerSecond - labelToBeCompared.bytesPerSecond), - bytesSentPerSecond: (_.bytesSentPerSecond - labelToBeCompared.bytesSentPerSecond), - n0: (_.n0 - labelToBeCompared.n0), - n5: (_.n5 - labelToBeCompared.n5), - n9: (_.n9 - labelToBeCompared.n9), - errorRate: (_.errorRate - labelToBeCompared.errorRate), - throughput: (_.throughput - labelToBeCompared.throughput) - }; - } else { - this.comparisonWarning.push(`${_.label} label not found`); - return { - ..._, - avgResponseTime: null, - minResponseTime: null, - maxResponseTime: null, - medianResponseTime: null, - n0: null, - n5: null, - n9: null, - errorRate: null, - throughput: null, - bytes: null, - }; - } - }); - if (data.environment !== this.itemData.environment) { - this.comparisonWarning.push("Environments do differ"); - } - this.comparedData = this.comparedDataMs; - this.labelsData = this.comparedData; - - if (this.comparisonWarning.length) { - this.showComparisonWarnings(); - } - } - - quickBaseComparison(id) { - this.itemsService.fetchItemDetail( - this.params.projectName, - this.params.scenarioName, - id).subscribe(_ => this.itemToCompare({ - statistics: _.statistics, - maxVu: _.overview.maxVu, - environment: _.environment, - plot: _.plot, - histogramPlotData: _.histogramPlotData, - extraPlotData: _.extraPlotData, - id - })); - } - - showComparisonWarnings() { - this.toastr.warning(this.comparisonWarning.join("
    "), "Comparison Warning!", - { - closeButton: true, - enableHtml: true, - timeOut: 15000, - positionClass: "toast-bottom-right" - }); - this.comparisonWarning = []; - } - convertBytesToMbps(bytes) { return bytesToMbps(bytes); } @@ -239,14 +161,15 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { switchComparisonDataUnit() { if (this.defaultUnit) { this.comparedData = this.labelsData.map((_) => { - const labelToBeCompared = this.comparingData.statistics.find((__) => __.label === _.label); + const labelToBeCompared = this.comparingData.find((__) => __.label === _.label); + console.log(labelToBeCompared) if (labelToBeCompared) { return { ..._, avgResponseTime: this.calculatePercDifference(_.avgResponseTime, labelToBeCompared.avgResponseTime), minResponseTime: this.calculatePercDifference(_.minResponseTime, labelToBeCompared.minResponseTime), maxResponseTime: this.calculatePercDifference(_.maxResponseTime, labelToBeCompared.maxResponseTime), - medianResponseTime: this.calculatePercDifference(_.medianResponseTime, labelToBeCompared.medianResponseTime), + medianResponseTime: this.calculatePercDifference(_.medianResponseTime, labelToBeCompared.medianResponseTime), bytes: this.calculatePercDifference(_.bytes, labelToBeCompared.bytes) / 1024, n0: this.calculatePercDifference(_.n0, labelToBeCompared.n0), n5: this.calculatePercDifference(_.n5, labelToBeCompared.n5), @@ -259,7 +182,6 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { standardDeviation: this.calculatePercDifference(_.standardDeviation, labelToBeCompared.standardDeviation), }; } else { - this.comparisonWarning.push(`${_.label} label not found`); return { ..._, avgResponseTime: null, @@ -396,4 +318,43 @@ export class RequestStatsCompareComponent implements OnInit, OnDestroy { identify(index, item) { return item.label; } + + getValuesDiff(labelsData: ItemStatistics[], data: ItemStatistics[]) { + return labelsData.map((_) => { + const labelToBeCompared = data.find((itemStats) => itemStats.label === _.label); + if (labelToBeCompared) { + return { + ..._, + samples: (_.samples - labelToBeCompared.samples), + avgResponseTime: (_.avgResponseTime - labelToBeCompared.avgResponseTime), + minResponseTime: (_.minResponseTime - labelToBeCompared.minResponseTime), + maxResponseTime: (_.maxResponseTime - labelToBeCompared.maxResponseTime), + medianResponseTime: (_.medianResponseTime - labelToBeCompared.medianResponseTime), + bytes: ((_.bytes - labelToBeCompared.bytes) / 1024).toFixed(2), + bytesPerSecond: (_.bytesPerSecond - labelToBeCompared.bytesPerSecond), + bytesSentPerSecond: (_.bytesSentPerSecond - labelToBeCompared.bytesSentPerSecond), + n0: (_.n0 - labelToBeCompared.n0), + n5: (_.n5 - labelToBeCompared.n5), + n9: (_.n9 - labelToBeCompared.n9), + errorRate: (_.errorRate - labelToBeCompared.errorRate), + throughput: (_.throughput - labelToBeCompared.throughput) + }; + } else { + // this.comparisonWarning.push(`${_.label} label not found`); + return { + ..._, + avgResponseTime: null, + minResponseTime: null, + maxResponseTime: null, + medianResponseTime: null, + n0: null, + n5: null, + n9: null, + errorRate: null, + throughput: null, + bytes: null, + }; + } + }); + } } diff --git a/src/app/item-detail/stats-compare/stats-compare.component.css b/src/app/item-detail/stats-compare/stats-compare.component.css index 134cedce..158bc310 100644 --- a/src/app/item-detail/stats-compare/stats-compare.component.css +++ b/src/app/item-detail/stats-compare/stats-compare.component.css @@ -25,3 +25,11 @@ thead { .compare-btn { margin-right: 1rem; } + +.compare { + margin-left: 10px; +} + +.compare-menu-item { + margin-left: 10px; +} diff --git a/src/app/item-detail/stats-compare/stats-compare.component.html b/src/app/item-detail/stats-compare/stats-compare.component.html index 42718267..d5303f5d 100644 --- a/src/app/item-detail/stats-compare/stats-compare.component.html +++ b/src/app/item-detail/stats-compare/stats-compare.component.html @@ -1,7 +1,24 @@ +
    + +
    + + + + Open Comparing Report +
    +
    + +
    -
    @@ -10,83 +27,86 @@
    - - + + - - - - - - - - + + + + + + + + - - - - - + + + + + - - - - - - - - - - - + + + + + + + + + + +
    - name -
    + name + - VU - - duration - - environment - - note - - start time - - status - - - -
    + VU + + duration + + environment + + note + + start time + + status + + + +
    -
    No data found.
    -
    +
    No data found.
    +
    {{_.name || 'test run'}} - {{_.overview.maxVu}} - - {{_.overview.duration}} - - {{_.environment}} - - {{_.note}} - - {{_.startTime | date:'d. L. yyyy H:mm'}} - - - - - - - - - - -
    {{ _.name || 'test run' }} + {{ _.overview.maxVu }} + + {{ _.overview.duration }} + + {{ _.environment }} + + {{ _.note }} + + {{ _.startTime | date:'d. L. yyyy H:mm' }} + + + + + + + + + + +
    + aria-label="Default pagination" (pageChange)="loadMore($event)" size="sm">
    @@ -100,4 +120,3 @@     - diff --git a/src/app/item-detail/stats-compare/stats-compare.component.ts b/src/app/item-detail/stats-compare/stats-compare.component.ts index da324f93..8e7b541c 100644 --- a/src/app/item-detail/stats-compare/stats-compare.component.ts +++ b/src/app/item-detail/stats-compare/stats-compare.component.ts @@ -1,47 +1,59 @@ -import { Component, OnInit, Output, EventEmitter } from "@angular/core"; +import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { ItemsService } from "src/app/items.service"; -import { ActivatedRoute } from "@angular/router"; +import { ActivatedRoute, Params } from "@angular/router"; import { Observable } from "rxjs"; -import { Items } from "src/app/items.service.model"; +import { ItemDetail, Items } from "src/app/items.service.model"; import { ItemsApiService } from "src/app/items-api.service"; +import { ComparisonChartService } from "../../_services/comparison-chart.service"; +import { ToastrService } from "ngx-toastr"; +import { ComparisonStatsService } from "../../_services/comparison-stats.service"; const LIMIT = 15; const OFFSET = 15; @Component({ - selector: "app-stats-compare", - templateUrl: "./stats-compare.component.html", - styleUrls: ["./stats-compare.component.css"] + selector: 'app-stats-compare', + templateUrl: './stats-compare.component.html', + styleUrls: ['./stats-compare.component.css'] }) export class StatsCompareComponent implements OnInit { items$: Observable; page = 1; pageSize = LIMIT; - params; - selectedTestItem; + params: Params; + selectedTestItem: string; + comparingData: ItemDetail; + comparedMetadata: { id: string; maxVu: number }; + comparisonWarning = []; - @Output() itemDetailToCompare = new EventEmitter>(); + + @Input() itemData: ItemDetail; constructor( + private toastr: ToastrService, private modalService: NgbModal, private itemsService: ItemsService, + private itemApiService: ItemsApiService, private itemsApiService: ItemsApiService, private route: ActivatedRoute, - ) { } + private comparisonChartService: ComparisonChartService, + private comparisonStatsService: ComparisonStatsService + ) { + } ngOnInit() { this.items$ = this.itemsService.items$; + this.route.params.subscribe(_ => { + this.params = _; + }); } open(content) { this.modalService.open(content, { size: "xl" }); - this.route.params.subscribe(_ => { - this.params = _; - this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 }); - }); + this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 }); } loadMore() { @@ -57,7 +69,7 @@ export class StatsCompareComponent implements OnInit { if (this.selectedTestItem) { this.itemsApiService.fetchItemDetail(this.params.projectName, this.params.scenarioName, this.selectedTestItem) .subscribe(_ => { - this.itemDetailToCompare.emit({ + this.itemToCompare({ statistics: _.statistics, maxVu: _.overview.maxVu, id: this.selectedTestItem, @@ -72,4 +84,55 @@ export class StatsCompareComponent implements OnInit { } } + quickBaseComparison(id) { + this.itemApiService.fetchItemDetail( + this.params.projectName, + this.params.scenarioName, + id).subscribe(_ => this.itemToCompare({ + statistics: _.statistics, + maxVu: _.overview.maxVu, + environment: _.environment, + plot: _.plot, + histogramPlotData: _.histogramPlotData, + extraPlotData: _.extraPlotData, + id + })); + } + + itemToCompare(data) { + this.resetStatsData(); + this.comparisonChartService.setComparisonPlot(data.plot, data.extraPlotData); + this.comparisonChartService.setHistogramPlot(data.histogramPlotData); + this.comparingData = data; + this.comparedMetadata = { id: data.id, maxVu: data.maxVu }; + if (data.maxVu !== this.itemData.overview.maxVu) { + this.comparisonWarning.push(`VU do differ ${this.itemData.overview.maxVu} vs. ${data.maxVu}`); + } + + if (data.environment !== this.itemData.environment) { + this.comparisonWarning.push("Environments do differ"); + } + this.comparisonStatsService.setRequestStats(data.statistics); + + if (this.comparisonWarning.length) { + this.showComparisonWarnings(); + } + } + + showComparisonWarnings() { + this.toastr.warning(this.comparisonWarning.join("
    "), "Comparison Warning!", + { + closeButton: true, + enableHtml: true, + timeOut: 15000, + positionClass: "toast-bottom-right" + }); + this.comparisonWarning = []; + } + + resetStatsData() { + this.comparingData = null; + this.comparisonChartService.resetPlot(); + this.comparisonStatsService.setRequestStats(null); + } } diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts index ba0e90ef..31bb4161 100644 --- a/src/app/items.service.model.ts +++ b/src/app/items.service.model.ts @@ -146,6 +146,9 @@ export interface ItemStatistics { satisfaction?: number toleration?: number }; + medianResponseTime?: number + bytesPerSecond?: number + bytesSentPerSecond?: number } interface ResponseMessageFailure {