scenario upsert form control (#274)

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

@@ -2,16 +2,9 @@
   margin-right: 15px;
 }
 
-.form-sub {
-  padding-top: 20px;
-}
 
 .desc {
-  padding-bottom: 10px;
-}
-
-.form-settings {
-  padding-top: 30px;
+  padding-bottom: 1rem;
 }
 
 .table-help {
@@ -20,4 +13,4 @@
 
 table {
   margin-top: 10px;
-}
+}

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

@@ -13,12 +13,15 @@ <h5 class="modal-title" id="modal-basic-title">Edit scenario</h5>
     <li ngbNavItem>
       <a ngbNavLink>General</a>
       <ng-template ngbNavContent>
-        <form [formGroup]="scenarioSettingsForm" class="form-settings" (ngSubmit)="onSubmit()">
-          <div class="form-group">
+        <form [formGroup]="scenarioSettingsForm" class="form-settings" (ngSubmit)="onSubmit()" class="pl-3">
+          <div class="form-group pt-3">
             <label for="exampleInputEmail1">Scenario name</label>
             <input type="text" class="form-control" formControlName="scenarioName">
           </div>
-
+
+          <hr class="mt-4">
+
+
           <div class="form-sub">
             <div class="form-group">
               <h6>Test runs retention</h6>
@@ -30,7 +33,10 @@ <h6>Test runs retention</h6>
               </select>
             </div>
           </div>
-
+
+          <hr class="mt-4">
+
+
           <div class="form-sub">
             <h6>Performance analysis</h6>
             <div class="form-group">
@@ -40,7 +46,10 @@ <h6>Performance analysis</h6>
               </div>
             </div>
           </div>
-
+
+          <hr class="mt-4">
+
+
           <div class="form-sub">
             <h6>Zero error tolerance</h6>
             <div class="form-group">
@@ -51,7 +60,10 @@ <h6>Zero error tolerance</h6>
               </div>
             </div>
           </div>
-
+
+          <hr class="mt-4">
+
+
           <div class="form-sub">
             <h6>Delete sample data after processing</h6>
             <div class="form-group">
@@ -61,7 +73,10 @@ <h6>Delete sample data after processing</h6>
               </div>
             </div>
           </div>
-
+
+          <hr class="mt-4">
+
+
           <div class="form-sub">
             <h6>Generate share token automatically</h6>
             <div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
@@ -74,6 +89,9 @@ <h6>Generate share token automatically</h6>
             </div>
           </div>
 
+          <hr class="mt-4">
+
+
           <div class="form-sub">
             <h6>Generate extra chart aggregations <i class="fas fa-flask"></i></h6>
             <div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
@@ -95,22 +113,22 @@ <h6>Generate extra chart aggregations <i class="fas fa-flask"></i></h6>
     <li ngbNavItem>
       <a ngbNavLink>Thresholds</a>
       <ng-template ngbNavContent>
-        <form [formGroup]="scenarioSettingsForm" (ngSubmit)="onSubmit()">
+        <form [formGroup]="scenarioSettingsForm" (ngSubmit)="onSubmit()" class="pl-3">
 
-          <div class="form-sub">
+          <div class="form-sub pt-3">
             <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">
@@ -135,13 +153,13 @@ <h6>Generate extra chart aggregations <i class="fas fa-flask"></i></h6>
     <li ngbNavItem>
       <a ngbNavLink>Label Filter Settings</a>
       <ng-template ngbNavContent>
-        <form [formGroup]="labelFilters" (ngSubmit)="onSubmit()">
+        <form [formGroup]="labelFilters" (ngSubmit)="onSubmit()" class="pl-3">
 
-          <div class="desc text-secondary table-help"><i class="fas fa-info-circle"> </i>
+          <div class="text-secondary table-help"><i class="fas fa-info-circle"> </i>
             <small> Enter search term(s) that you want to filter out. For a full match use "match" operator, for a partial match use "includes" operator</small></div>
 
           <table class="table jtl-table">
-            
+
             <thead>
                 <tr>
                     <th class="jtl-head">Label</th>
@@ -194,8 +212,8 @@ <h6>Generate extra chart aggregations <i class="fas fa-flask"></i></h6>
     <li ngbNavItem>
       <a ngbNavLink>Label Trend Chart Settings</a>
       <ng-template ngbNavContent>
-        <form [formGroup]="labelTrendChartSettingsForm" (ngSubmit)="onSubmit()">
-          <div class="form-group form-settings">
+        <form [formGroup]="labelTrendChartSettingsForm" (ngSubmit)="onSubmit()" class="pl-3">
+          <div class="form-group form-settings pt-3">
             <div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
               <small> The selected metrics will get pre-set in label trend chart.</small></div>
             <div class="custom-control custom-switch">
@@ -243,7 +261,7 @@ <h6>Generate extra chart aggregations <i class="fas fa-flask"></i></h6>
                      formControlName="avgResponseTime">
               <label class="custom-control-label" for="avgResponseTime">Average Response Time</label>
             </div>
-           
+
           </div>
 
 

src/app/shared/shared-project/project-settings/project-settings.component.html

@@ -6,11 +6,12 @@ <h5 class="modal-title" id="modal-basic-title">Project Settings</h5>
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
-  <form [formGroup]="projectSettingsForm" (ngSubmit)="onSubmit()">
+  <form [formGroup]="projectSettingsForm" (ngSubmit)="onSubmit()" class="pl-3">
     <div class="modal-body">
 
       <div class="form-group">
-        <label for="projectName">Project Name</label>
+
+        <label for="projectName" class="mb-1">Project Name</label>
         <input type="text" class="form-control" id="projectName" formControlName="projectName">
 
       </div>
@@ -22,10 +23,13 @@ <h5 class="modal-title" id="modal-basic-title">Project Settings</h5>
       </div>
 
 
-      <div class="form-sub">
+      <hr class="mt-4">
+
+
+      <div class="form-sub pt-2">
         <h6>Test Report Top Statistics Bar</h6>
-        <div class="desc text-secondary"><i class="fas fa-info-circle"> </i>
-          <small> Please choose up to 5 test report top statistic you would like to be displayed.</small></div>
+        <div class="text-secondary mb-2"><i class="fas fa-info-circle"> </i>
+          <small> Please choose up to 5 test report top statistics you would like to be displayed.</small></div>
 
         <div class="form-control-feedback" *ngIf="metricsEditable && (projectSettingsForm.dirty || projectSettingsForm.touched)">
           <p class="alert alert-danger" *ngIf="metricsEditable">Please make sure max 5 metrics is selected.</p>
@@ -89,6 +93,21 @@ <h6>Test Report Top Statistics Bar</h6>
           </div>
         </div>
       </div>
+
+      <hr class="mt-4">
+      <div class="form-sub">
+        <h6>Upsert Scenario</h6>
+        <div class="text-secondary mb-2"><i class="fas fa-info-circle"> </i>
+          <small> When pushing test report into scenario that does not exists, the application will create it on the fly.</small></div>
+        <div class="form-group">
+          <div class="custom-control custom-switch">
+            <input type="checkbox" class="custom-control-input" id="scenarioUpsert"
+                   formControlName="scenarioUpsert">
+            <label class="custom-control-label" for="scenarioUpsert">Scenario Upsert</label>
+          </div>
+        </div>
+      </div>
+
     </div>
 
 

src/app/shared/shared-project/project-settings/project-settings.component.ts

@@ -29,6 +29,7 @@ export class ProjectSettingsComponent implements OnInit {
     errorCount: null,
     networkSent: null,
     networkReceived: null,
+    scenarioUpsert: null,
   };
   @Input() projectName: string;
 
@@ -49,6 +50,7 @@ export class ProjectSettingsComponent implements OnInit {
   }
 
   createFormControls(settings) {
+    console.log(settings)
     this.formControls.virtualUsers = new FormControl(settings.topMetricsSettings.virtualUsers, []);
     this.formControls.percentile = new FormControl(settings.topMetricsSettings.percentile, []);
     this.formControls.throughput = new FormControl(settings.topMetricsSettings.throughput, []);
@@ -60,12 +62,12 @@ export class ProjectSettingsComponent implements OnInit {
     this.formControls.avgLatency = new FormControl(settings.topMetricsSettings.avgLatency, []);
     this.formControls.avgConnectionTime = new FormControl(settings.topMetricsSettings.avgConnectionTime, []);
     this.formControls.avgResponseTime = new FormControl(settings.topMetricsSettings.avgResponseTime, []);
+    this.formControls.scenarioUpsert = new FormControl(settings.upsertScenario, [])
     this.formControls.projectName = new FormControl(settings.projectName, [
       Validators.required,
       Validators.maxLength(100),
       Validators.minLength(3),
     ]);
-
   }
 
   createForm() {
@@ -81,7 +83,9 @@ export class ProjectSettingsComponent implements OnInit {
       avgLatency: this.formControls.avgLatency,
       avgConnectionTime: this.formControls.avgConnectionTime,
       avgResponseTime: this.formControls.avgResponseTime,
+
       projectName: this.formControls.projectName,
+      scenarioUpsert: this.formControls.scenarioUpsert,
     });
   }
 
@@ -92,6 +96,7 @@ export class ProjectSettingsComponent implements OnInit {
   onSubmit() {
     const payload = {
       projectName: this.formControls.projectName.value,
+      upsertScenario: this.formControls.scenarioUpsert.value,
       topMetricsSettings: {
         virtualUsers: this.formControls.virtualUsers.value,
         errorRate: this.formControls.errorRate.value,
@@ -119,7 +124,10 @@ export class ProjectSettingsComponent implements OnInit {
   }
 
   isEditable() {
-    const enabledMetrics = Object.values(this.formControls).map(control => control.value).filter(value => value === true);
+    const enabledMetrics = Object.values([this.formControls.virtualUsers, this.formControls.errorRate, this.formControls.percentile,
+    this.formControls.throughput, this.formControls.network, this.formControls.avgLatency, this.formControls.avgResponseTime,
+    this.formControls.avgConnectionTime, this.formControls.errorRate, this.formControls.networkSent, this.formControls.networkReceived])
+      .map(control => control.value).filter(value => value === true);
     this.metricsEditable = enabledMetrics.length > 5;
   }