From d211e1b8564042947b3f0f8002e9cf5e4b78cf34 Mon Sep 17 00:00:00 2001 From: Ludek Novy <13610612+ludeknovy@users.noreply.github.com> Date: Tue, 8 Mar 2022 10:10:37 +0100 Subject: [PATCH] filter label settings (#242) --- src/app/scenario.service.model.ts | 1 + .../scenario-settings.component.css | 8 + .../scenario-settings.component.html | 243 ++++++++++++------ .../scenario-settings.component.ts | 39 ++- src/app/scenario/scenario.module.ts | 4 +- 5 files changed, 201 insertions(+), 94 deletions(-) diff --git a/src/app/scenario.service.model.ts b/src/app/scenario.service.model.ts index 5cdccd01..da4983ca 100644 --- a/src/app/scenario.service.model.ts +++ b/src/app/scenario.service.model.ts @@ -9,4 +9,5 @@ export interface Scenario { throughput: number; erroRate: number; }; + labelFilterSettings: [{ operator: string, labelTerm: string }] } diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.css b/src/app/scenario/scenario-settings/scenario-settings.component.css index 8a5233dd..04a7c313 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.css +++ b/src/app/scenario/scenario-settings/scenario-settings.component.css @@ -9,3 +9,11 @@ .desc { padding-bottom: 10px; } + +.form-settings { + padding-top: 30px; +} + +table { + margin-top: 30px; +} \ No newline at end of file diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.html b/src/app/scenario/scenario-settings/scenario-settings.component.html index 3684985e..d6837181 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.html +++ b/src/app/scenario/scenario-settings/scenario-settings.component.html @@ -6,105 +6,178 @@ -
-
-
- - -
+
-
-
Thresholds
-
- Scenario thresholds will raise an alert in a report detail in case the given metrics diverge from the - previous - reports average by more than specified threshold percentage.
-
-
- - +
    +
  • + General + + +
    + +
    -
- -
- - -
-
- - -
-
- - -
-
- -
-
-
Test runs retention
-
- How long to keep test runs. All related data will be deleted as well.
- - -
-
- -
-
Performance analysis
-
-
- - + +
+
+
Test runs retention
+
+ How long to keep test runs. All related data will be deleted as well.
+ + +
+
+ +
+
Performance analysis
+
+
+ + +
+
+
+ +
+
Zero error tolerance
+
+
+ + +
+
+
+ +
+
Delete sample data after processing
+
+
+ + +
+
+
+ +
+
Generate share token automatically
+
+ When enabled the API will return share token upon new test report upload.
+
+
+ + +
+
-
-
-
-
Zero error tolerance
-
-
- - +
+
-
-
+ + + +
  • + Thresholds + +
    -
    -
    Delete sample data after processing
    -
    -
    - - +
    +
    + Scenario thresholds will raise an alert in a report detail in case the given metrics diverge from the + previous + reports average by more than specified threshold percentage.
    + +
    +
    + + +
    +
    + +
    + + +
    +
    + + +
    +
    + + +
    -
    -
    -
    -
    Generate share token automatically
    -
    - When enabled the API will return share token upon new test report upload.
    -
    -
    - - +
    +
    -
    -
    -
    + + +
    • +
  • + Label Filter Settings + +
    + + + + + + + + + + + + + + + + + + + + +
    LabelOperator
    + + + + +
    + + + + + +
    + +
    + +
    +
    + +     +
    • + +
    +
    -
    - -
    - diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.ts b/src/app/scenario/scenario-settings/scenario-settings.component.ts index 29b9a5da..3bd3adef 100644 --- a/src/app/scenario/scenario-settings/scenario-settings.component.ts +++ b/src/app/scenario/scenario-settings/scenario-settings.component.ts @@ -1,6 +1,6 @@ -import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectorRef } from "@angular/core"; +import { Component, OnInit, EventEmitter, Output } from "@angular/core"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; -import { FormGroup, FormControl, Validators } from "@angular/forms"; +import { FormGroup, FormControl, Validators, FormArray } from "@angular/forms"; import { catchError } from "rxjs/operators"; import { of } from "rxjs"; import { ActivatedRoute } from "@angular/router"; @@ -17,6 +17,7 @@ export class SettingsScenarioComponent implements OnInit { @Output() scenarioNameChangeEvent = new EventEmitter(); + scenarioSettingsForm: FormGroup; formControls = { scenarioName: null, @@ -29,7 +30,10 @@ export class SettingsScenarioComponent implements OnInit { deleteSamples: null, keepTestRunsPeriod: null, generateShareToken: null, + term: null, + operator: null, }; + labelFilterControls = {} params; @@ -60,13 +64,20 @@ export class SettingsScenarioComponent implements OnInit { } ]; + labelFiltersData = [{ term: "my label", operator: "includes" }, { term: "test", operator: "match" }] + + + labelFilterOperators = ["includes", "match"] + labelFilters: FormArray + + + constructor( private route: ActivatedRoute, private modalService: NgbModal, private scenarioApiService: ScenarioApiService, private notification: NotificationMessage, - ) { - } + ) { } ngOnInit(): void { this.route.params.subscribe(_ => this.params = _); @@ -74,8 +85,11 @@ export class SettingsScenarioComponent implements OnInit { if (_.name) { this.createFormControls(_); this.createForm(); + this.labelFilters = new FormArray( + _.labelFilterSettings.map(filter=>new FormArray([new FormControl(filter.labelTerm,Validators.required), new FormControl(filter.operator, Validators.required)]))) } }); + } createFormControls(settings) { @@ -115,6 +129,7 @@ export class SettingsScenarioComponent implements OnInit { this.formControls.generateShareToken = new FormControl(settings.generateShareToken, [ Validators.required ]) + } createForm() { @@ -137,14 +152,13 @@ export class SettingsScenarioComponent implements OnInit { } onSubmit() { - if (this.scenarioSettingsForm.valid) { + if (this.scenarioSettingsForm.valid && this.labelFilters.valid) { const { scenarioName, analysisEnabled, thresholdEnabled, thresholdErrorRate, thresholdPercentile, thresholdThroughput, deleteSamples, zeroErrorToleranceEnabled, keepTestRunsPeriod, generateShareToken } = this.scenarioSettingsForm.value; - console.log(this.scenarioSettingsForm.value) const { projectName, scenarioName: currentScenarioName } = this.params; const body = { scenarioName, @@ -158,7 +172,8 @@ export class SettingsScenarioComponent implements OnInit { errorRate: parseFloat(thresholdErrorRate), throughput: parseFloat(thresholdThroughput), percentile: parseFloat(thresholdPercentile) - } + }, + labelFilterSettings: this.labelFilters.value.map(filter => ({ labelTerm: filter[0], operator: filter[1] })) }; this.scenarioApiService.updateScenario(projectName, currentScenarioName, body) @@ -175,6 +190,16 @@ export class SettingsScenarioComponent implements OnInit { } } + addFieldValue(operator) { + const element = document.getElementById("term") + this.labelFilters.push(new FormArray([new FormControl(element.value,Validators.required), new FormControl(operator, Validators.required)])) + element.value = "" + } + + deleteFieldValue(index) { + this.labelFilters.removeAt(index) + } + private scenarioNameChanged(name): boolean { return name === this.params.scenarioName; } diff --git a/src/app/scenario/scenario.module.ts b/src/app/scenario/scenario.module.ts index aae408f2..67209700 100644 --- a/src/app/scenario/scenario.module.ts +++ b/src/app/scenario/scenario.module.ts @@ -13,7 +13,7 @@ import { SharedModule } from "../shared/shared.module"; import { HighchartsChartModule } from "highcharts-angular"; import { ItemControlsComponent } from "./item-controls/item-controls.component"; import { SharedItemModule } from "../shared/shared-item/shared-item.module"; -import { ReactiveFormsModule } from "@angular/forms"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { DataTableModule } from "@pascalhonegger/ng-datatable"; import { AddNewExternalNotificationComponent @@ -40,7 +40,7 @@ const routes: Routes = [ ], imports: [ CommonModule, RouterModule.forRoot(routes), NgxSpinnerModule, NgbModule, SharedModule, HighchartsChartModule, - SharedItemModule, ReactiveFormsModule, DataTableModule, RoleModule, AddNewItemModule, + SharedItemModule, ReactiveFormsModule, DataTableModule, RoleModule, AddNewItemModule, FormsModule, ], exports: [ScenarioComponent, ScenarioTrendsComponent, SettingsScenarioComponent, DeleteScenarioComponent, ExternalNotificationComponent,