Min duration failure warning (#380)

src/app/dashboard/dashboard.component.html

@@ -104,13 +104,10 @@ <h6 class="card-header bg-transparent">Recent Test Runs</h6>
                         <span *ngIf="_.status === '10'" title="Status not set"><i class="far fa-circle text-secondary status-icon"></i></span>
                         <i *ngIf="_.thresholdPassed === false"
                            class="fas fa-exclamation-circle text-alizarin issue"></i>
-                        <i *ngIf="_.zeroErrorToleranceEnabled && showZeroErrorToleranceWarning(_.overview.errorCount, _.overview.errorRate) === true" placement="bottom"
-                           ngbTooltip="Errors occurred during the test run"><i class="fas fa-bug text-alizarin issue"></i></i>
-                        <i *ngIf="_.zeroErrorToleranceEnabled && !showZeroErrorToleranceWarning(_.overview.errorCount, _.overview.errorRate)" placement="bottom"
-                           ngbTooltip="No errors were detected"><i class="fas fa-check-square text-success issue"></i></i>
-                        <i *ngIf="_.zeroErrorToleranceEnabled && showZeroErrorToleranceWarning(_.overview.errorCount, _.overview.errorRate) === 'unknown'" placement="bottom"
-                           ngbTooltip="Not all required data are available"><i class="far fa-question-circle issue"></i></i>
-
+                        <i *ngIf="isValidationEnabled(_.zeroErrorToleranceEnabled, _.minTestDuration) && displayItemValidationError(_.zeroErrorToleranceEnabled, _.overview.errorCount, _.overview.errorRate, _.overview.duration, _.minTestDuration) === true" placement="bottom"
+                           ngbTooltip="Failure(s) detected"><i class="fas fa-bug text-alizarin issue"></i></i>
+                        <i *ngIf="isValidationEnabled(_.zeroErrorToleranceEnabled, _.minTestDuration) && !displayItemValidationError(_.zeroErrorToleranceEnabled, _.overview.errorCount, _.overview.errorRate, _.overview.duration, _.minTestDuration)" placement="bottom"
+                           ngbTooltip="No failures were detected"><i class="fas fa-check-square text-success issue"></i></i>
                       </td>
                     </tr>
                   </tbody>

src/app/dashboard/dashboard.component.ts

@@ -3,7 +3,7 @@ import { ProjectApiService } from "../project-api.service";
 import { ItemsListing, ProjectsOverallStats } from "../items.service.model";
 import { Router } from "@angular/router";
 import { SharedMainBarService } from "../shared-main-bar.service";
-import { showZeroErrorWarning } from "../utils/showZeroErrorTolerance";
+import { getValidationResults } from "../utils/showZeroErrorTolerance";
 
 @Component({
   selector: "app-dashboard",
@@ -19,17 +19,21 @@ export class DashboardComponent implements OnInit {
     private projectService: ProjectApiService,
     private router: Router,
     private sharedMainBarService: SharedMainBarService
-    ) {
-      this.Math = Math;
-    }
+  ) {
+    this.Math = Math;
+  }
+
   ngOnInit(): void {
     this.fetchLatestItems();
     this.fetchOverallStats();
     this.sharedMainBarService.setProjectName(null);
   }
 
   fetchLatestItems() {
-    this.projectService.fetchLatestItems().subscribe(_ => this.latestItems = _);
+    this.projectService.fetchLatestItems()
+      .subscribe(_ => {
+        this.latestItems = _;
+      });
   }
 
   fetchOverallStats() {
@@ -40,8 +44,14 @@ export class DashboardComponent implements OnInit {
     this.router.navigate([`./project/${projectName}/scenario/${scenarioName}/item/${itemId}`]);
   }
 
-  showZeroErrorToleranceWarning(errorCount, errorRate) {
-    return showZeroErrorWarning(errorRate, errorCount);
+  displayItemValidationError(zeroErrorEnabled, errorCount, errorRate, duration, minTestDuration) {
+    const { zeroErrorToleranceValidation, minTestDurationValidation } = getValidationResults(zeroErrorEnabled, errorRate, errorCount, duration, minTestDuration);
+    return zeroErrorToleranceValidation || minTestDurationValidation
+  }
+
+
 
+  isValidationEnabled(zeroErrorEnabled, minTestDuration): boolean {
+    return zeroErrorEnabled || minTestDuration > 0;
   }
 }

src/app/item-detail/item-detail.component.html

@@ -65,9 +65,19 @@
         </div>
       </div>
 
-      <div class="row" *ngIf="showZeroErrorToleranceWarning() === true">
+      <div class="row" *ngIf="validations.minTestDurationValidation || validations.zeroErrorValidation">
         <div class="col">
-          <app-zero-error-tolerance-warning></app-zero-error-tolerance-warning>
+          <div class="card card-shadow error-tolerance-issue">
+            <div class="card-body">
+              <h6 class="overview-body perf-analysis">Test failure</h6>
+              <div *ngIf="validations.zeroErrorValidation === true">
+                <app-zero-error-tolerance-warning></app-zero-error-tolerance-warning>
+              </div>
+              <div *ngIf="validations.minTestDurationValidation === true" class="mt-2">
+                <app-min-test-duration-warning></app-min-test-duration-warning>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
 

src/app/item-detail/item-detail.component.ts

@@ -15,7 +15,7 @@ import { bytesToMbps } from "./calculations";
 import { ItemStatusValue } from "./item-detail.model";
 import { Metrics } from "./metrics";
 import { AnalyzeChartService } from "../analyze-chart.service";
-import { showZeroErrorWarning } from "../utils/showZeroErrorTolerance";
+import { getValidationResults } from "../utils/showZeroErrorTolerance";
 import { ItemChartService } from "../_services/item-chart.service";
 
 exporting(Highcharts);
@@ -59,6 +59,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     userSettings: null,
     errorSummary: null,
     status: null,
+    minTestDuration: null,
   };
   overallChartOptions;
   scatterChartOptions;
@@ -76,10 +77,13 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
   chartLines;
   activeId = 1;
   performanceAnalysisLines = null;
-  externalSearchTerm = null;
   totalRequests = null;
-  plotRangeMin = null
-  plotRangeMax = null
+  plotRangeMin = null;
+  plotRangeMax = null;
+  validations = {
+    zeroErrorValidation: null,
+    minTestDurationValidation: null,
+  };
 
 
   constructor(
@@ -129,6 +133,11 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
         this.selectedPlotSubscription();
         this.plotRangeSubscription();
         this.calculateTotalRequests();
+        const validations = this.showValidationWarning(this.itemData);
+        this.validations = {
+          zeroErrorValidation: validations.zeroErrorToleranceValidation,
+          minTestDurationValidation: validations.minTestDurationValidation
+        };
         this.spinner.hide();
       });
     this.analyzeChartService.currentData.subscribe(data => {
@@ -140,6 +149,7 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     this.overallChartOptions = {
       ...overallChartSettings("ms")
     };
+
   }
 
   ngOnDestroy() {
@@ -189,14 +199,14 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
    */
   private plotRangeSubscription() {
     this.itemChartService.plotRange$.subscribe((value) => {
-        this.updateMinMaxOfCharts(value?.start?.getTime(), value?.end?.getTime())
+      this.updateMinMaxOfCharts(value?.start?.getTime(), value?.end?.getTime());
     });
   }
 
   private updateMinMaxOfCharts(min, max) {
     if (min && max) {
-      this.plotRangeMin = min
-      this.plotRangeMax = max
+      this.plotRangeMin = min;
+      this.plotRangeMax = max;
       for (const chartOptions of [this.overallChartOptions, this.scatterChartOptions, this.statusChartOptions]) {
         chartOptions.xAxis.min = min;
         chartOptions.xAxis.max = max;
@@ -279,21 +289,22 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     return bytesToMbps(bytes);
   }
 
-  showZeroErrorToleranceWarning(): boolean | string {
-    if (this.itemData.zeroErrorToleranceEnabled) {
-      return showZeroErrorWarning(this.itemData.overview.errorRate,
-        this.itemData.overview.errorCount);
+  showValidationWarning(itemData: ItemDetail): { zeroErrorToleranceValidation: boolean, minTestDurationValidation: boolean } {
+    if (itemData.zeroErrorToleranceEnabled || itemData.minTestDuration > 0) {
+      return getValidationResults(
+        itemData.zeroErrorToleranceEnabled,
+        itemData.overview.errorRate,
+        itemData.overview.errorCount,
+        itemData.overview.duration,
+        itemData.minTestDuration
+      );
     }
-    return false;
-  }
-
-  focusOnLabel($event: { label: string, metrics: Metrics[] }) {
-    this.activeId = 2;
-    this.performanceAnalysisLines = $event;
-    this.externalSearchTerm = $event.label;
+    return {
+      zeroErrorToleranceValidation: false,
+      minTestDurationValidation: false,
+    };
   }
 
-
   chartCallback: Highcharts.ChartCallbackFunction = function (chart): void {
     setTimeout(() => {
       chart.reflow();
@@ -314,13 +325,13 @@ export class ItemDetailComponent implements OnInit, OnDestroy {
     } else {
       const originalSeries = Array.from(this.chartLines?.overall?.values());
       this.overallChartOptions = overallChartSettings("");
-      this.overallChartOptions.series = originalSeries
+      this.overallChartOptions.series = originalSeries;
     }
 
     // we need always to set the correct zoom range
-    this.overallChartOptions.xAxis.min = this.plotRangeMin
-    this.overallChartOptions.xAxis.max = this.plotRangeMax
+    this.overallChartOptions.xAxis.min = this.plotRangeMin;
+    this.overallChartOptions.xAxis.max = this.plotRangeMax;
 
-     this.updateOverallChartFlag = true;
+    this.updateOverallChartFlag = true;
   }
 }

src/app/item-detail/item-detail.module.ts

@@ -9,7 +9,6 @@ import { AuthGuard } from "../auth.guard";
 import { RouterModule, Routes } from "@angular/router";
 import { SharedItemModule } from "../shared/shared-item/shared-item.module";
 import { SharedModule } from "../shared/shared.module";
-import { ZeroErrorToleranceWarningComponent } from "./zero-error-tolerance-warning/zero-error-tolerance-warning.component";
 import { HighchartsChartModule } from "highcharts-angular";
 import { LabelChartComponent } from "./label-chart/label-chart.component";
 import { AnalyzeChartsComponent } from "./analyze-charts/analyze-charts.component";
@@ -31,6 +30,7 @@ import { ForbiddenComponent } from "../forbidden/forbidden.component";
 import { ThresholdFailureComponent } from "./request-stats/threshold-failure/threshold-failure.component";
 import { ZoomChartsComponent } from "./zoom-charts/zoom-charts.component";
 import { ErrorSummaryComponent } from "./error-summary/error-summary.component";
+import { ValidationsModule } from "./validations/validations.module";
 
 
 const routes: Routes = [{
@@ -41,11 +41,11 @@ const routes: Routes = [{
 
 @NgModule({
   declarations: [ItemDetailComponent, RequestStatsCompareComponent, ThresholdsAlertComponent,
-    PerformanceAnalysisComponent, ZeroErrorToleranceWarningComponent, LabelChartComponent, AnalyzeChartsComponent,
+    PerformanceAnalysisComponent, LabelChartComponent, AnalyzeChartsComponent,
     LabelHealthComponent, LabelTrendComponent, StatsCompareComponent, AddMetricComponent, ShareComponent, DeleteShareLinkComponent,
     CreateNewShareLinkComponent, MonitoringStatsComponent, ReloadCustomChartComponent, ChartIntervalComponent, ForbiddenComponent, ThresholdFailureComponent, ZoomChartsComponent, ErrorSummaryComponent],
   imports: [
-    CommonModule, NgbModule, RouterModule.forRoot(routes), DataTableModule, SharedItemModule, SharedModule, HighchartsChartModule,
+    CommonModule, NgbModule, RouterModule.forRoot(routes), DataTableModule, SharedItemModule, SharedModule, HighchartsChartModule, ValidationsModule,
     ReactiveFormsModule, FormsModule, RoleModule,
   ],
   exports: [],

src/app/item-detail/validations/min-test-duration-warning/min-test-duration-warning.component.html

@@ -0,0 +1,8 @@
+
+<div>
+  <div><i class="fas fa-exclamation-triangle text-danger"></i>
+    The test duration was too short</div>
+  <div class="perf-analaysis-desc text-secondary">
+    <small>The scenario is set with minimum test duration.</small>
+  </div>
+</div>

src/app/item-detail/validations/min-test-duration-warning/min-test-duration-warning.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { MinTestDurationWarningComponent } from "./min-test-duration-warning.component";
+
+describe("MinTestDurationWarningComponent", () => {
+  let component: MinTestDurationWarningComponent;
+  let fixture: ComponentFixture<MinTestDurationWarningComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MinTestDurationWarningComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MinTestDurationWarningComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/item-detail/validations/min-test-duration-warning/min-test-duration-warning.component.ts

@@ -0,0 +1,10 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-min-test-duration-warning",
+  templateUrl: "./min-test-duration-warning.component.html",
+  styleUrls: ["./min-test-duration-warning.component.css"]
+})
+export class MinTestDurationWarningComponent {
+
+}

src/app/item-detail/validations/validations.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MinTestDurationWarningComponent } from "./min-test-duration-warning/min-test-duration-warning.component";
+import { ZeroErrorToleranceWarningComponent } from "./zero-error-tolerance-warning/zero-error-tolerance-warning.component";
+
+
+@NgModule({
+  declarations: [MinTestDurationWarningComponent, ZeroErrorToleranceWarningComponent],
+  exports: [
+    ZeroErrorToleranceWarningComponent,
+    MinTestDurationWarningComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class ValidationsModule {
+}

src/app/item-detail/validations/zero-error-tolerance-warning/zero-error-tolerance-warning.component.html

@@ -0,0 +1,8 @@
+<div>
+  <div><i
+    class="fas fa-exclamation-triangle text-danger"></i>
+    Error(s) detected</div>
+  <div class="perf-analaysis-desc text-secondary">
+    <small>The scenario has zero error tolerance check enabled.</small>
+  </div>
+</div>

src/app/item-detail/zero-error-tolerance-warning/zero-error-tolerance-warning.component.ts → src/app/item-detail/validations/zero-error-tolerance-warning/zero-error-tolerance-warning.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from "@angular/core";
 @Component({
   selector: "app-zero-error-tolerance-warning",
   templateUrl: "./zero-error-tolerance-warning.component.html",
-  styleUrls: ["./zero-error-tolerance-warning.component.css", "../item-detail.component.scss"]
+  styleUrls: ["./zero-error-tolerance-warning.component.css", "../../item-detail.component.scss"]
 })
 export class ZeroErrorToleranceWarningComponent {
 

src/app/items.service.model.ts

@@ -7,6 +7,7 @@ export interface ItemsListing {
   environment: string;
   status: string;
   zeroErrorToleranceEnabled: boolean;
+  minTestDuration: number,
   thresholdPassed?: boolean;
   overview: ItemOverview;
 
@@ -63,6 +64,7 @@ export interface ItemDetail {
   };
   errorSummary: ErrorSummary
   status: string
+  minTestDuration: number
 }
 
 interface TopMetricsSettings {

src/app/scenario.service.model.ts

@@ -1,6 +1,7 @@
 export interface Scenario {
   analysisEnabled: boolean;
   zeroErrorToleranceEnabled: boolean;
+  minTestDuration: boolean;
   name: string;
   keepTestRunsPeriod: number;
   thresholds: {

src/app/scenario/scenario-settings/scenario-settings.component.html

@@ -74,6 +74,28 @@ <h6>Zero error tolerance</h6>
 
               <hr class="mt-4">
 
+              <div class="form-sub">
+                <h6>Minimum test duration</h6>
+                <div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
+                  <small> Set the minimum test duration required to consider a test as invalid. Setting this value to zero will deactivate this feature.</small></div>
+                <div class="form-group">
+                  <div class="form-group">
+                    <label for="minTestDuration">Threshold [min]</label>
+                    <input type="input" id="minTestDuration" class="form-control" formControlName="minTestDuration">
+                    <div class="form-control-feedback"
+                         *ngIf="formControls.minTestDuration.errors">
+                      {{JSON.stringify(formControls.minTestDuration.error)}}
+                      <p class="form-validation-error" *ngIf="formControls.minTestDuration.errors.required">Minimum test duration is required, provide zero if you want to turn it off.</p>
+                      <p class="form-validation-error" *ngIf="formControls.minTestDuration.errors.max">The number cannot be greater than 1000</p>
+                      <p class="form-validation-error" *ngIf="formControls.minTestDuration.errors.min">The number cannot be lower than 0</p>
+
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <hr class="mt-4">
+
 
               <div class="form-sub">
                 <h6>Delete sample data after processing</h6>