Skip to content

Commit

Permalink
filter label settings (#242)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeknovy
ludeknovy authored Mar 8, 2022
1 parent 18675ca commit d211e1b
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 94 deletions.
1 change: 1 addition & 0 deletions src/app/scenario.service.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,5 @@ export interface Scenario {
throughput: number;
erroRate: number;
};
labelFilterSettings: [{ operator: string, labelTerm: string }]
}
8 changes: 8 additions & 0 deletions src/app/scenario/scenario-settings/scenario-settings.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,11 @@
.desc {
padding-bottom: 10px;
}

.form-settings {
padding-top: 30px;
}

table {
margin-top: 30px;
}
243 changes: 158 additions & 85 deletions src/app/scenario/scenario-settings/scenario-settings.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,105 +6,178 @@ <h5 class="modal-title" id="modal-basic-title">Edit scenario</h5>
<span aria-hidden="true">&times;</span>
</button>
</div>
<form [formGroup]="scenarioSettingsForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group">
<label for="exampleInputEmail1">Scenario name</label>
<input type="text" class="form-control" formControlName="scenarioName">
</div>
<div class="modal-body">

<div class="form-sub">
<h6>Thresholds</h6>
<div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
<small> 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.</small></div>

<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="thresholdEnabled"
formControlName="thresholdEnabled">
<label class="custom-control-label" for="thresholdEnabled">Enabled</label>
<ul ngbNav #nav="ngbNav" class="nav-tabs">
<li ngbNavItem>
<a ngbNavLink>General</a>
<ng-template ngbNavContent>
<form [formGroup]="scenarioSettingsForm" class="form-settings" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="exampleInputEmail1">Scenario name</label>
<input type="text" class="form-control" formControlName="scenarioName">
</div>
</div>

<div class="form-group">
<label for="exampleInputEmail1">90% percentil</label>
<input type="input" class="form-control" formControlName="thresholdPercentile">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Throughput</label>
<input type="text" class="form-control" formControlName="thresholdThroughput">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Error rate</label>
<input type="text" class="form-control" formControlName="thresholdErrorRate">
</div>
</div>

<div class="form-sub">
<div class="form-group">
<h6>Test runs retention</h6>
<div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
<small> How long to keep test runs. All related data will be deleted as well.</small></div>
<label for="keep-tests-period" class="form-label">Keep tests</label>
<select class="custom-select" id="keep-tests-period" formControlName="keepTestRunsPeriod">
<option *ngFor="let keepTestRunPeriod of keepTestRunPeriods" [ngValue]="keepTestRunPeriod.period">{{ keepTestRunPeriod.description }}</option>
</select>
</div>
</div>

<div class="form-sub">
<h6>Performance analysis</h6>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="analysisSwitch" formControlName="analysisEnabled">
<label class="custom-control-label" for="analysisSwitch">Enabled</label>

<div class="form-sub">
<div class="form-group">
<h6>Test runs retention</h6>
<div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
<small> How long to keep test runs. All related data will be deleted as well.</small></div>
<label for="keep-tests-period" class="form-label">Keep tests</label>
<select class="custom-select" id="keep-tests-period" formControlName="keepTestRunsPeriod">
<option *ngFor="let keepTestRunPeriod of keepTestRunPeriods" [ngValue]="keepTestRunPeriod.period">{{ keepTestRunPeriod.description }}</option>
</select>
</div>
</div>

<div class="form-sub">
<h6>Performance analysis</h6>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="analysisSwitch" formControlName="analysisEnabled">
<label class="custom-control-label" for="analysisSwitch">Enabled</label>
</div>
</div>
</div>

<div class="form-sub">
<h6>Zero error tolerance</h6>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="zeroErrorSwitch"
formControlName="zeroErrorToleranceEnabled">
<label class="custom-control-label" for="zeroErrorSwitch">Enabled</label>
</div>
</div>
</div>

<div class="form-sub">
<h6>Delete sample data after processing</h6>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="deleteSamples" formControlName="deleteSamples">
<label class="custom-control-label" for="deleteSamples">Enabled</label>
</div>
</div>
</div>

<div class="form-sub">
<h6>Generate share token automatically</h6>
<div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
<small> When enabled the API will return share token upon new test report upload.</small></div>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="shareToken" formControlName="generateShareToken">
<label class="custom-control-label" for="shareToken">Enabled</label>
</div>
</div>
</div>
</div>
</div>

<div class="form-sub">
<h6>Zero error tolerance</h6>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="zeroErrorSwitch"
formControlName="zeroErrorToleranceEnabled">
<label class="custom-control-label" for="zeroErrorSwitch">Enabled</label>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Thresholds</a>
<ng-template ngbNavContent>
<form [formGroup]="scenarioSettingsForm" (ngSubmit)="onSubmit()">

<div class="form-sub">
<h6>Delete sample data after processing</h6>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="deleteSamples" formControlName="deleteSamples">
<label class="custom-control-label" for="deleteSamples">Enabled</label>
<div class="form-sub">
<div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
<small> 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.</small></div>

<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="thresholdEnabled"
formControlName="thresholdEnabled">
<label class="custom-control-label" for="thresholdEnabled">Enabled</label>
</div>
</div>

<div class="form-group">
<label for="exampleInputEmail1">90% percentil</label>
<input type="input" class="form-control" formControlName="thresholdPercentile">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Throughput</label>
<input type="text" class="form-control" formControlName="thresholdThroughput">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Error rate</label>
<input type="text" class="form-control" formControlName="thresholdErrorRate">
</div>
</div>
</div>
</div>

<div class="form-sub">
<h6>Generate share token automatically</h6>
<div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
<small> When enabled the API will return share token upon new test report upload.</small></div>
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="shareToken" formControlName="generateShareToken">
<label class="custom-control-label" for="shareToken">Enabled</label>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>

</div>
</form>
</ng-template>
</li>
<li ngbNavItem>
<a ngbNavLink>Label Filter Settings</a>
<ng-template ngbNavContent>
<form [formGroup]="labelFilters" (ngSubmit)="onSubmit()">
<table class="table jtl-table">
<thead>
<tr>
<th class="jtl-head">Label</th>
<th class="jtl-head">Operator</th>
<th class="jtl-head"></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let subarray of labelFilters.controls;let i=index">
<td *ngFor="let control of subarray.controls;let j=index">
<input *ngIf="j === 0" class="form-control" type="text" [formControl]="subarray.controls[j]">
<select *ngIf="j === 1" class="custom-select" [formControl]="subarray.controls[j]" aria-label="Default select example" [value]="subarray.controls[j].value">
<option *ngFor="let operator of labelFilterOperators" value="{{operator}}">
{{ operator }}
</option>
</select>
</td>
<td>
<button class="btn btn-default" type="button" (click)="deleteFieldValue(i)">Delete</button>
</td>
</tr>

<tr>
<td>
<input class="form-control" placeholder="Label term" type="text" id="term" name="term" #term />
</td>
<td>
<select class="custom-select" aria-label="Default select example" #operator>
<option *ngFor="let operator of labelFilterOperators" value="{{operator}}">
{{ operator }}
</option>
</select>
</td>
<td>
<button class="btn btn-default" type="button" (click)="addFieldValue(operator.value)">Add</button>
</td>
</tr>
</tbody>
</table>


<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

</ng-template>
</li>
</ul>
<div [ngbNavOutlet]="nav"></div>

</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>


</ng-template>
Expand Down
39 changes: 32 additions & 7 deletions src/app/scenario/scenario-settings/scenario-settings.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -17,6 +17,7 @@ export class SettingsScenarioComponent implements OnInit {

@Output() scenarioNameChangeEvent = new EventEmitter<string>();


scenarioSettingsForm: FormGroup;
formControls = {
scenarioName: null,
Expand All @@ -29,7 +30,10 @@ export class SettingsScenarioComponent implements OnInit {
deleteSamples: null,
keepTestRunsPeriod: null,
generateShareToken: null,
term: null,
operator: null,
};
labelFilterControls = {}

params;

Expand Down Expand Up @@ -60,22 +64,32 @@ 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 = _);
this.scenarioApiService.getScenario(this.params.projectName, this.params.scenarioName).subscribe(_ => {
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) {
Expand Down Expand Up @@ -115,6 +129,7 @@ export class SettingsScenarioComponent implements OnInit {
this.formControls.generateShareToken = new FormControl(settings.generateShareToken, [
Validators.required
])

}

createForm() {
Expand All @@ -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,
Expand All @@ -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)
Expand All @@ -175,6 +190,16 @@ export class SettingsScenarioComponent implements OnInit {
}
}

addFieldValue(operator) {
const element = <HTMLInputElement>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;
}
Expand Down
Loading

0 comments on commit d211e1b

Please sign in to comment.