Merge branch 'master' into snyk-upgrade-8b240f0f993f32bbebfe1f7c445a1f36

ludeknovy · Aug 30, 2024 · ba0f3c1 · ba0f3c1
2 parents 700e8ce + 4206dfb
commit ba0f3c1
Show file tree

Hide file tree

Showing 24 changed files with 241 additions and 150 deletions.
diff --git a/nginx.conf b/nginx.conf
@@ -5,13 +5,13 @@ events {
 }
 
 http {
-    client_max_body_size 2048M;
+    client_max_body_size 5120M;
 
     server {
         listen 80;
         server_name  localhost;
 
-        client_max_body_size 2048M;
+        client_max_body_size 5120M;
         root   /usr/share/nginx/html;
         index  index.html index.htm;
         include /etc/nginx/mime.types;

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/administration/api-token/api-keys.component.html b/src/app/administration/api-token/api-keys.component.html
@@ -21,11 +21,8 @@ <h6 class="card-header bg-transparent">API Keys <span class="inline-controller">
                   </thead>
                   <tbody>
                   <tr *ngIf="apiKeys.length === 0">
-                    <td></td>
-                    <td></td>
-                    <td class="text-muted">No api tokens...</td>
-                    <td></td>
-                    <td></td>
+                    <td colspan="5" class="text-muted text-center">Nothing here yet! Add your first api token.</td>
+
                   </tr>
                   <tr *ngFor="let _ of apiKeys">
                     <td>

diff --git a/src/app/administration/projects/administration.component.html b/src/app/administration/projects/administration.component.html
@@ -22,11 +22,7 @@ <h6 class="card-header bg-transparent">Projects <span class="inline-controller">
                   </thead>
                   <tbody>
                   <tr *ngIf="projects.length === 0">
-                    <td></td>
-                    <td></td>
-                    <td class="text-muted">No data...</td>
-                    <td></td>
-                    <td></td>
+                    <td colspan="5" class="text-muted text-center">Nothing here yet! Add your first project.</td>
                   </tr>
                   <tr *ngFor="let _ of projects">
                     <td class="project-name">

diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
@@ -81,7 +81,7 @@ <h6 class="card-header bg-transparent">Recent Test Runs</h6>
                   </thead>
                   <tbody>
                     <tr *ngIf="!latestItems || latestItems.length === 0">
-                      <td colspan="4" class="text-muted no-data">No Data...</td>
+                      <td colspan="5" class="text-muted no-data">Nothing here yet! Upload some test reports. <span><a href="https://jtlreporter.site/docs/guides/manual-data-upload">Show me how!</a></span></td>
                     </tr>
                     <tr *ngFor="let _ of latestItems" (click)="open(_.projectName, _.name, _.id)">
                       <td class="ellipsis">

diff --git a/src/app/graphs/scenarios.ts b/src/app/graphs/scenarios.ts
@@ -11,7 +11,7 @@ export const scenarioHistory = (inputData) => {
     };
   }
   const dt = inputData.map(_ => {
-    return { percentil: _.percentil, date: _.startDate };
+    return { percentile90: _.percentile90, date: _.startDate };
   });
   return {
     type: "bar",
@@ -20,7 +20,7 @@ export const scenarioHistory = (inputData) => {
       labels: dt.map(_ => _.date),
       datasets: [
         {
-          data: dt.map(_ => _.percentil),
+          data: dt.map(_ => _.percentile90),
           backgroundColor: "rgb(17,122,139, 0.8)",
           fill: true,
           borderWidth: 1,

diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
@@ -125,20 +125,52 @@ <h2 class="card-title">{{itemData.overview.throughput > 1000 ?
                   </div>
                 </div>
 
-                <div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile">
+                <div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile || itemData.topMetricsSettings.percentile90">
                   <div class="card">
                     <div class="card-body overview-body">
-                      <h2 *ngIf="itemData.overview.percentil >= 1000" class="card-title">{{
-                        Math.round((itemData.overview.percentil / 1000) * 100) / 100}} <span class="unit-desc">s</span>
+                      <h2 *ngIf="(itemData.overview.percentil || itemData.overview.percentile90) >= 1000" class="card-title">{{
+                        Math.round(((itemData.overview.percentil || itemData.overview.percentile90) / 1000) * 100) / 100}} <span class="unit-desc">s</span>
                       </h2>
-                      <h2 *ngIf="itemData.overview.percentil < 1000" class="card-title">{{
-                        itemData.overview.percentil}} <span class="unit-desc">ms</span>
+                      <h2 *ngIf="(itemData.overview.percentil || itemData.overview.percentile90) < 1000" class="card-title">{{
+                        itemData.overview.percentil || itemData.overview.percentile90}} <span class="unit-desc">ms</span>
                       </h2>
                     </div>
                     <div class="card-footer bg-transparent card-footer-overview">90% Response time</div>
                   </div>
                 </div>
 
+
+                <div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile95">
+                  <div class="card">
+                    <div class="card-body overview-body">
+                      <h2 *ngIf="itemData.overview.percentile95 >= 1000" class="card-title">{{
+                          Math.round((itemData.overview.percentile95 / 1000) * 100) / 100}} <span class="unit-desc">s</span>
+                      </h2>
+                      <h2 *ngIf="itemData.overview.percentile95 < 1000" class="card-title">{{
+                          itemData.overview.percentile95}} <span class="unit-desc">ms</span>
+                      </h2>
+                      <h2 *ngIf="!itemData.overview.percentile95" class="card-title">N/A <span class="unit-desc">ms</span></h2>
+
+                    </div>
+                    <div class="card-footer bg-transparent card-footer-overview">95% Response time</div>
+                  </div>
+                </div>
+
+                <div class="col-sm" *ngIf="itemData.topMetricsSettings.percentile99">
+                  <div class="card">
+                    <div class="card-body overview-body">
+                      <h2 *ngIf="itemData.overview.percentile99 >= 1000" class="card-title">{{
+                          Math.round((itemData.overview.percentile99 / 1000) * 100) / 100}} <span class="unit-desc">s</span>
+                      </h2>
+                      <h2 *ngIf="itemData.overview.percentile99 < 1000" class="card-title">{{
+                          itemData.overview.percentile99}} <span class="unit-desc">ms</span>
+                      </h2>
+                      <h2 *ngIf="!itemData.overview.percentile99" class="card-title">N/A <span class="unit-desc">ms</span></h2>
+                    </div>
+                    <div class="card-footer bg-transparent card-footer-overview">99% Response time</div>
+                  </div>
+                </div>
+
                 <div class="col-sm" *ngIf="itemData.topMetricsSettings.avgResponseTime">
                   <div class="card">
                     <div class="card-body overview-body">

diff --git a/src/app/item-detail/request-stats/request-stats-compare.component.spec.ts b/src/app/item-detail/request-stats/request-stats-compare.component.spec.ts
@@ -62,7 +62,10 @@ describe("RequestStatsCompareComponent", () => {
         endDate: "",
         startDate: "",
         errorCount: 0,
-        percentil: 10,
+        percentil: null,
+        percentile90: 10,
+        percentile95: 10,
+        percentile99: 10,
         errorRate: 0,
         throughput: 100
       },

diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts
@@ -75,7 +75,10 @@ interface TopMetricsSettings {
   avgResponseTime: boolean;
   avgConnectionTime: boolean;
   avgLatency: boolean;
-  percentile: boolean;
+  percentile: boolean; // legacy setting
+  percentile90: boolean;
+  percentile95: boolean;
+  percentile99: boolean
 }
 
 interface ItemOverview {
@@ -86,20 +89,10 @@ interface ItemOverview {
   endDate: string;
   errorRate: number;
   maxVu: number;
-  percentil: number;
-  startDate: string;
-  throughput: number;
-  errorCount?: number;
-}
-
-interface ItemOverview {
-  avgLatency: number;
-  avgResponseTime: number;
-  duration: number;
-  endDate: string;
-  errorRate: number;
-  maxVu: number;
-  percentil: number;
+  percentil?: number; // legacy, it needs to be kept for backwards compatibility
+  percentile90: number;
+  percentile95: number;
+  percentile99: number;
   startDate: string;
   throughput: number;
   errorCount?: number;

diff --git a/src/app/notification/notification-messages.ts b/src/app/notification/notification-messages.ts
@@ -14,7 +14,7 @@ export class NotificationMessage {
     return this.statusCodeMessage(response, "New project has been saved");
   }
 
-  newScenarionNotificationMessage(response) {
+  newScenarioNotificationMessage(response) {
     return this.statusCodeMessage(response, "New scenario has been created");
   }
 
@@ -100,7 +100,7 @@ export class NotificationMessage {
   }
 
   private statusCodeMessage(response, successMessage) {
-    let message = { success: false, message:  (typeof response === "string" && response?.includes("Unexpected error")) ? response : "Unexpected error occurred" };
+    let message = { success: false, message:  (typeof response === "string" && !response?.includes("Unexpected error")) ? response : "Unexpected error occurred" };
     if (response.status >= 200 && response.status < 300) {
       message = { success: true, message: successMessage };
     } else if (response.status === 400) {

diff --git a/src/app/project/graph/scenarios-graph.component.ts b/src/app/project/graph/scenarios-graph.component.ts
@@ -11,6 +11,7 @@ import {
 } from "@angular/core";
 import { Chart } from "chart.js";
 import { scenarioHistory } from "src/app/graphs/scenarios";
+import { normalizeOverviewData } from "../../utils/normalizeOverviewData";
 
 @Component({
   selector: "app-scenarios-graph",
@@ -46,7 +47,7 @@ export class ScenariosGraphComponent implements AfterViewInit, OnDestroy {
           data.datasets[0].data[i] = 0;
         }
       },
-      // after the update ..
+      // after the update
       afterUpdate: function(chart) {
         if (length === -1) { return; }
       },
@@ -68,7 +69,7 @@ export class ScenariosGraphComponent implements AfterViewInit, OnDestroy {
         }
       }
     });
-    this.chart = new Chart(this.chartCanvas.nativeElement, scenarioHistory(this.graphData));
+    this.chart = new Chart(this.chartCanvas.nativeElement, scenarioHistory(this.graphData.map(normalizeOverviewData)));
   }
 
   ngOnDestroy(): void {

diff --git a/src/app/project/new-scenario/add-new.scenario.component.ts b/src/app/project/new-scenario/add-new.scenario.component.ts
@@ -55,7 +55,7 @@ export class AddNewScenarioComponent implements OnInit {
       this.scenarioApiService.createNewScenario(this.projectName, { scenarioName })
         .pipe(catchError(r => of(r)))
         .subscribe(_ => {
-          const message = this.notification.newProjectNotificationMessage(_);
+          const message = this.notification.newScenarioNotificationMessage(_);
           this.projectService.fetchScenarios(this.projectName);
           return this.scenarioApiService.setData(message);
         });

diff --git a/src/app/project/project.component.html b/src/app/project/project.component.html
@@ -77,7 +77,10 @@ <h6 class="card-header bg-transparent">Scenarios</h6>
                   </tr>
                 </thead>
                 <tbody>
-                  <tr *ngFor="let _ of mf.data" (click)="open(_.name)">
+                <tr *ngIf="filteredScenarios.length === 0">
+                  <td colspan="5" class="text-muted text-center">Nothing here yet! Add your first scenario.</td>
+                </tr>
+                <tr *ngFor="let _ of mf.data" (click)="open(_.name)">
                     <td>{{_.name}}</td>
                     <td>{{_.data[0].startDate | date:'d. L. yyyy H:mm'}}</td>
                   </tr>

diff --git a/...l-notification/add-new-external-notification/add-new-external-notification.component.html b/...l-notification/add-new-external-notification/add-new-external-notification.component.html
@@ -16,15 +16,25 @@ <h5 class="modal-title" id="modal-basic-title">Webhook</h5>
       </div>
       <p class="text-secondary"></p>
 
-      <label for="channel" class="form-label">Channel</label>
-      <select class="form-select mb-3" id="channel" (change)="changeNotification($event)"  formControlName="notificationType">
-        <option *ngFor="let notification of notifications" [value]="notification">
-          {{ notification }}
+      <label for="channel" class="form-label">Channel <span class="text-danger">*</span></label>
+      <select class="form-select mb-3" id="channel" (change)="changeNotification($event)"  formControlName="channel">
+        <option *ngFor="let channel of notificationChannels" [value]="channel">
+          {{ channel }}
         </option>
       </select>
 
+      <label for="channel" class="form-label">Type <span class="text-danger">*</span></label>
+      <select class="form-select mb-3" id="notificationType" formControlName="notificationType">
+        <option *ngFor="let type of notificationTypes" [value]="type">
+          {{ type }}
+        </option>
+      </select>
+      <div class="form-control-feedback" *ngIf="notificationType.errors && (notificationType.dirty || notificationType.touched)">
+        <p class="form-validation-error" *ngIf="notificationType.errors.required">Type required</p>
+      </div>
+
       <div class="form-group mb-3">
-        <label for="webhookUrl" class="form-label">Webhook Url</label>
+        <label for="webhookUrl" class="form-label">Webhook Url <span class="text-danger">*</span></label>
         <input type="input" id="webhookUrl" class="form-control" formControlName="url" aria-label="Default"
                aria-describedby="inputGroup-sizing-default">
         <div class="form-control-feedback" *ngIf="url.errors && (url.dirty || url.touched)">
@@ -33,7 +43,7 @@ <h5 class="modal-title" id="modal-basic-title">Webhook</h5>
         </div>
       </div>
       <div class="form-group mb-3">
-        <label for="name" class="form-label">Name</label>
+        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
         <input type="input" id="name" class="form-control" formControlName="name" aria-label="Default"
                aria-describedby="inputGroup-sizing-default">
         <div class="form-control-feedback" *ngIf="name.errors && (name.dirty || name.touched)">