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 739f1edb..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,9 +360,7 @@
Summary
Max CPU usage
-
{{itemData.monitoring.cpu.max}}% - - +
{{ itemData.monitoring.cpu.max }}%
@@ -364,11 +386,13 @@
Summary
Overall Chart
- - -
+ + +
+

@@ -419,6 +443,7 @@
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
- +
- -
  • @@ -515,6 +539,19 @@
    Target System Statistics + Monitoring + +
    +
    + + +
    +
    + +     +
    • +
    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/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) 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 {