From 0ccae372fa6845fa329d8a28542256c2e87b6c7c Mon Sep 17 00:00:00 2001 From: Ludek <13610612+ludeknovy@users.noreply.github.com> Date: Tue, 2 Mar 2021 21:00:32 +0100 Subject: [PATCH] scenario thresholds (#98) --- src/app/app.module.ts | 2 + .../item-detail/item-detail.component.html | 43 ++++++++- .../item-detail/item-detail.component.scss | 8 ++ src/app/items.service.model.ts | 8 ++ src/app/notification/notification-messages.ts | 6 +- src/app/scenario-api.service.ts | 7 ++ src/app/scenario/scenario.component.html | 4 + src/app/scenario/scenario.component.scss | 4 + .../threshold/threshold.component.css | 0 .../threshold/threshold.component.html | 39 ++++++++ .../threshold/threshold.component.spec.ts | 30 ++++++ .../scenario/threshold/threshold.component.ts | 94 +++++++++++++++++++ 12 files changed, 241 insertions(+), 4 deletions(-) create mode 100644 src/app/scenario/threshold/threshold.component.css create mode 100644 src/app/scenario/threshold/threshold.component.html create mode 100644 src/app/scenario/threshold/threshold.component.spec.ts create mode 100644 src/app/scenario/threshold/threshold.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7f98ea7b..2733dd4a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -59,6 +59,7 @@ import { ItemControlsComponent } from './scenario/item-controls/item-controls.co import { ShareComponent } from './item-detail/share/share.component'; import { CreateNewShareLinkComponent } from './item-detail/share/create-new-share-link/create-new-share-link.component'; import { DeleteShareLinkComponent } from './item-detail/share/delete-share-link/delete-share-link.component'; +import { ThresholdComponent } from './scenario/threshold/threshold.component'; const appRoutes: Routes = [ { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, @@ -138,6 +139,7 @@ const appRoutes: Routes = [ ShareComponent, CreateNewShareLinkComponent, DeleteShareLinkComponent, + ThresholdComponent, ], imports: [ RouterModule.forRoot( diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html index 8bac28cb..c5c368b7 100644 --- a/src/app/item-detail/item-detail.component.html +++ b/src/app/item-detail/item-detail.component.html @@ -9,7 +9,8 @@
- +
+ +
+
+ +
+
+ +

90 percentile decrease toleration: {{itemData.thresholds.thresholds.percentile}} % +

+

+ Througput decrease toleration: {{itemData.thresholds.thresholds.throughput}}% +

+

+ Error rate increase toleration: {{itemData.thresholds.thresholds.errorRate}}% +

+ +
+
+
Performance regression issue detected!
+
    +
  • 90 percentile response time is about {{ + Math.round(itemData.thresholds.result.percentile.diffValue - 100) }}% slower than the average. +
    • +
  • Error rate is about {{ + Math.round(100 - itemData.thresholds.result.errorRate.diffValue) }}% higher than the average.
    • +
  • Throughput is about {{ + Math.round(100 - itemData.thresholds.result.throughput.diffValue ) }}% lower than the average.
    • +
+
+
+
+
+
@@ -158,7 +195,6 @@

{{itemData.overview.errorRate}} -
@@ -364,7 +400,8 @@
Request Statistics [labelInput]="{ labelName: _.label, params: itemParams }"> - + diff --git a/src/app/item-detail/item-detail.component.scss b/src/app/item-detail/item-detail.component.scss index 77a90287..05259ab8 100644 --- a/src/app/item-detail/item-detail.component.scss +++ b/src/app/item-detail/item-detail.component.scss @@ -252,3 +252,11 @@ thead .hd { .charts .card-header { border-bottom: 0px; } + +.perf-issue { + border-left: 2px solid #e74c3c; +} + +.perf-issue .card-body h6 { + font-size: 1rem !important; +} diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts index f58c67ac..5b6b7eca 100644 --- a/src/app/items.service.model.ts +++ b/src/app/items.service.model.ts @@ -57,6 +57,14 @@ export interface ItemDetail { }; statistics: any; attachements: []; + thresholds?: { + passed: boolean, + diff: { + errorRateDiff: number, + percentileRateDiff: number, + throughputRateDiff: number + } + }; } interface MonitoringData { diff --git a/src/app/notification/notification-messages.ts b/src/app/notification/notification-messages.ts index 73a4f632..e51e66d1 100644 --- a/src/app/notification/notification-messages.ts +++ b/src/app/notification/notification-messages.ts @@ -7,7 +7,7 @@ import { Injectable } from '@angular/core'; export class NotificationMessage { newTestItemNotificationMessage(response) { - return this.statusCodeMessage(response, 'File updoaded and processing just started'); + return this.statusCodeMessage(response, 'File uploaded and processing just started'); } newProjectNotificationMessage(response) { @@ -78,6 +78,10 @@ export class NotificationMessage { return this.statusCodeMessage(response, 'Link was deleted'); } + scenarioThresholdUpdate(response) { + return this.statusCodeMessage(response, 'Thresholds were updated'); + } + private statusCodeMessage(response, succesMessgae) { let message = { success: false, message: `Something went wrong` }; if (response.status >= 200 && response.status < 300) { diff --git a/src/app/scenario-api.service.ts b/src/app/scenario-api.service.ts index 120e1ae5..4855abb5 100644 --- a/src/app/scenario-api.service.ts +++ b/src/app/scenario-api.service.ts @@ -44,7 +44,14 @@ export class ScenarioApiService { createNewScenarioNotification(projectName, scenarioName, body): Observable<{}> { return this.http.post(`projects/${projectName}/scenarios/${scenarioName}/notifications`, body, { observe: 'response' }); + } + + fetchThresholds(projectName, scenarioName) { + return this.http.get(`projects/${projectName}/scenarios/${scenarioName}/thresholds`); + } + updateThresholds(projectName, scenarioName, body) { + return this.http.put(`projects/${projectName}/scenarios/${scenarioName}/thresholds`, body, { observe: 'response'}); } setData(data) { diff --git a/src/app/scenario/scenario.component.html b/src/app/scenario/scenario.component.html index 925595f0..c5e52302 100644 --- a/src/app/scenario/scenario.component.html +++ b/src/app/scenario/scenario.component.html @@ -14,6 +14,7 @@
+
@@ -132,6 +133,9 @@
Test Runs class="fas fa-minus-circle text-danger status-icon"> + + + diff --git a/src/app/scenario/scenario.component.scss b/src/app/scenario/scenario.component.scss index b1669f50..bc23edc4 100644 --- a/src/app/scenario/scenario.component.scss +++ b/src/app/scenario/scenario.component.scss @@ -151,3 +151,7 @@ tbody tr:hover { font-size: 19px; } +.performance-issue { + margin-left: 10px; + font-size: 19px; +} diff --git a/src/app/scenario/threshold/threshold.component.css b/src/app/scenario/threshold/threshold.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/scenario/threshold/threshold.component.html b/src/app/scenario/threshold/threshold.component.html new file mode 100644 index 00000000..247ad44d --- /dev/null +++ b/src/app/scenario/threshold/threshold.component.html @@ -0,0 +1,39 @@ + +
+ + +
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ + + + diff --git a/src/app/scenario/threshold/threshold.component.spec.ts b/src/app/scenario/threshold/threshold.component.spec.ts new file mode 100644 index 00000000..1e8fddc2 --- /dev/null +++ b/src/app/scenario/threshold/threshold.component.spec.ts @@ -0,0 +1,30 @@ +import { HttpClientModule } from '@angular/common/http'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; + +import { ThresholdComponent } from './threshold.component'; + +describe('ThresholdComponent', () => { + let component: ThresholdComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ThresholdComponent], + imports: [ReactiveFormsModule, HttpClientModule], + + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ThresholdComponent); + component = fixture.componentInstance; + component.params = {}; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/scenario/threshold/threshold.component.ts b/src/app/scenario/threshold/threshold.component.ts new file mode 100644 index 00000000..d61cb608 --- /dev/null +++ b/src/app/scenario/threshold/threshold.component.ts @@ -0,0 +1,94 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { of } from 'rxjs'; +import { catchError } from 'rxjs/internal/operators/catchError'; +import { NotificationMessage } from 'src/app/notification/notification-messages'; +import { ScenarioApiService } from 'src/app/scenario-api.service'; + +@Component({ + selector: 'app-threshold', + templateUrl: './threshold.component.html', + styleUrls: ['./threshold.component.css'] +}) +export class ThresholdComponent implements OnInit { + + thresholdForm: FormGroup; + percentile; + errorRate; + throughput; + enabled; + + @Input() params; + + constructor( + private modalService: NgbModal, + private scenarioApiService: ScenarioApiService, + private notification: NotificationMessage + ) {} + + ngOnInit(): void { + this.scenarioApiService.fetchThresholds(this.params.projectName, this.params.scenarioName).subscribe(_ => { + this.createFormControls(_); + this.createForm(); + }); + } + + createFormControls(thresholds) { + this.percentile = new FormControl(thresholds.percentile, [ + Validators.min(0), + Validators.max(100), + Validators.required, + ]); + this.throughput = new FormControl(thresholds.throughput, [ + Validators.min(0), + Validators.max(100), + Validators.required, + ]); + this.errorRate = new FormControl(thresholds.errorRate, [ + Validators.min(0), + Validators.max(100), + Validators.required + ]); + this.enabled = new FormControl(thresholds.enabled, [ + Validators.required, + ]); + } + + createForm() { + this.thresholdForm = new FormGroup({ + percentile: this.percentile, + throughput: this.throughput, + errorRate: this.errorRate, + enabled: this.enabled + }); + } + + open(content) { + this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', size: 'lg' }); + } + + onSubmit() { + if (this.thresholdForm.valid) { + const { projectName, scenarioName } = this.params; + const body = { + errorRate: parseFloat(this.thresholdForm.value.errorRate), + throughput: parseFloat(this.thresholdForm.value.throughput), + percentile: parseFloat(this.thresholdForm.value.percentile), + enabled: this.thresholdForm.value.enabled + }; + + this.scenarioApiService.updateThresholds(projectName, scenarioName, body) + .pipe(catchError(r => of(r))) + .subscribe(_ => { + const message = this.notification.scenarioThresholdUpdate(_); + this.scenarioApiService.setData(message); + }); + this.modalService.dismissAll(); + } + } + + +} + +