scenario response time degradation curve (#321)

ludeknovy · Apr 19, 2023 · fdc5568 · fdc5568
1 parent a685d33
commit fdc5568
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 14 deletions.
diff --git a/src/app/graphs/scenario-trends.ts b/src/app/graphs/scenario-trends.ts
@@ -178,3 +178,70 @@ export const labelTrends: any = (text, title = "") => {
     ],
   };
 };
+
+export const responseTimeDegradationCurveOption = () => {
+  return {
+    chart: {
+      type: "line",
+      zoomType: "x",
+      marginTop: 50,
+      className: "chart-sync",
+    },
+    exporting: {
+      buttons: {
+        contextButton: {
+          enabled: false
+        },
+      },
+    },
+    title: {
+      text: "",
+    },
+    colors: ["#5DADE2", "#2ECC71", "#F4D03F", "#D98880",
+      "#707B7C", "#7DCEA0", "#21618C", "#873600", "#AF7AC5", "#B7950B"],
+    tooltip: {
+      split: true,
+      crosshairs: [true],
+      valueSuffix: ` ms`,
+      valueDecimals: 2,
+    },
+    plotOptions: {
+      series: {
+        connectNulls: true,
+      },
+      line: {
+        lineWidth: 1.5,
+        states: {
+          hover: {
+            lineWidth: 1.5
+          }
+        },
+        marker: {
+          enabled: false
+        },
+      }
+    },
+    xAxis: {
+      lineWidth: 0,
+      type: "category",
+      uniqueNames: true,
+      crosshair: {
+        snap: true
+      },
+      labels: {
+        enabled: true
+      },
+      title: {
+        text: "Virtual Users"
+      }
+    },
+    yAxis: [{
+      gridLineColor: "#f2f2f2",
+      lineWidth: 0,
+      title: {
+        text: "ms"
+      },
+    },
+    ],
+  };
+}
diff --git a/.../scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.css b/.../scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.css
@@ -0,0 +1,3 @@
+.scenario-trends-settings {
+  border-radius: 0.2rem 0rem 0rem 0.2rem
+}
diff --git a/...scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.html b/...scenario/scenario-trends/scenario-trends-settings/scenario-trends-settings.component.html
@@ -71,6 +71,6 @@ <h6>Label Trend Metric</h6>
 
 </ng-template>
 
-<button *userRole="'operator'" class="jtl-no-glow add-item jtl-btn-light btn btn-sm" (click)="open(content)"
-        ngbDropdownItem>Settings
+<button *userRole="'operator'" class="jtl-no-glow add-item jtl-btn-light btn btn-sm scenario-trends-settings" (click)="open(content)"
+        > <i class="fas fa-cog"></i> Settings
 </button>
diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.html b/src/app/scenario/scenario-trends/scenario-trends.component.html
@@ -1,11 +1,13 @@
 <div class="card scenario-custom-chart card-shadow" *ngIf="userSettings && userSettings.aggregatedTrends">
   <h6 class="card-header bg-transparent">
-    Scenario Trends
-    <span class="last-runs">last 15 test runs</span>
+    {{ degradationCurveDisplayed ? "Response Time Degradation Curve" : "Scenario Trends"}}
+    <span class="last-runs">{{ degradationCurveDisplayed ? "": "last 15 test runs"}}</span>
     <span class="float-right">
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
            aria-label="">
-            <app-scenario-trends-settings *ngIf="userSettings" [params]="params" [userSettings]="userSettings"></app-scenario-trends-settings>
+            <app-scenario-trends-settings *ngIf="userSettings && !degradationCurveDisplayed" [params]="params" [userSettings]="userSettings"></app-scenario-trends-settings>
+                  <button class="jtl-no-glow add-item jtl-btn-light btn btn-sm" (click)="toggleDegradationCurve()"
+                          ><i class="fas fa-chart-line"></i> {{degradationCurveDisplayed ? "Trends": "Degradation Curve"}}</button>
       </div>
     </span>
   </h6>
@@ -14,22 +16,28 @@ <h6 class="card-header bg-transparent">
 
   <div class="card-body">
     <div class="chart">
-      <highcharts-chart [Highcharts]="Highcharts" [options]="aggregatedScenarioTrendChartOption" [(update)]="updateAggregatedScenarioTrendsChartFlag" [oneToOne]="true"
+      <highcharts-chart *ngIf="!degradationCurveDisplayed" [Highcharts]="Highcharts" [options]="aggregatedScenarioTrendChartOption" [(update)]="updateAggregatedScenarioTrendsChartFlag" [oneToOne]="true"
                         (click)="onPointSelect($event)"
                         style="width: 100%; height: 450px; display: block;"></highcharts-chart>
 
+      <highcharts-chart *ngIf="degradationCurveDisplayed" [Highcharts]="Highcharts" [options]="responseTimeDegradationChartOption" [(update)]="updateDegradationCurveChartFlag"
+                        style="width: 100%; height: 450px; display: block;"></highcharts-chart>
+
     </div>
   </div>
 </div>
 
 <div class="card scenario-custom-chart card-shadow" *ngIf="userSettings && !userSettings.aggregatedTrends">
+
   <h6 class="card-header bg-transparent">
-    Scenario Trends
-    <span class="last-runs">last 15 test runs</span>
+    {{ degradationCurveDisplayed ? "Response Time Degradation Curve" : "Scenario Trends"}}
+    <span class="last-runs">{{ degradationCurveDisplayed ? "": "last 15 test runs"}}</span>
     <span class="float-right">
       <div display="dynamic" [placement]="['bottom-right', 'bottom-left']" class="btn-group" ngbDropdown role="group"
            aria-label="">
             <app-scenario-trends-settings *ngIf="userSettings" [params]="params" [userSettings]="userSettings"></app-scenario-trends-settings>
+         <button class="jtl-no-glow add-item jtl-btn-light btn btn-sm" (click)="toggleDegradationCurve()"
+         ><i class="fas fa-chart-line"></i> {{degradationCurveDisplayed ? "Trends": "Degradation Curve"}}</button>
       </div>
     </span>
     <span ngbTooltip="Number of labels displayed is limited" class="float-right data-truncated-warning text-warning" *ngIf="labelDataTruncated">
@@ -38,9 +46,10 @@ <h6 class="card-header bg-transparent">
   </h6>
 
 
-
   <div class="card-body">
-    <div class="row">
+    <highcharts-chart *ngIf="degradationCurveDisplayed" [Highcharts]="Highcharts" [options]="responseTimeDegradationChartOption" [(update)]="updateDegradationCurveChartFlag"
+                      style="width: 100%; height: 450px; display: block;"></highcharts-chart>
+    <div class="row" *ngIf="!degradationCurveDisplayed">
       <div class="col" *ngIf="userSettings.labelMetrics.percentile90">
         <highcharts-chart [Highcharts]="Highcharts" [options]="labelScenarioTrendChartP90Option" [callbackFunction]="chartCallback" [(update)]="updateLabelScenarioTrendsChartFlag"
                           (click)="onPointSelect($event)"

diff --git a/src/app/scenario/scenario-trends/scenario-trends.component.ts b/src/app/scenario/scenario-trends/scenario-trends.component.ts
@@ -1,8 +1,8 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import * as Highcharts from "highcharts";
 import * as moment from "moment";
-import { customScenarioTrends, labelTrends } from "src/app/graphs/scenario-trends";
+import { customScenarioTrends, labelTrends, responseTimeDegradationCurveOption } from "src/app/graphs/scenario-trends";
 import { bytesToMbps } from "src/app/item-detail/calculations";
 import { LabelTrendsData, ScenarioTrendsData, ScenarioTrendsUserSettings } from "src/app/items.service.model";
 import { ScenarioService } from "src/app/scenario.service";
@@ -18,6 +18,8 @@ export class ScenarioTrendsComponent implements OnInit {
   Highcharts: typeof Highcharts = Highcharts;
   updateAggregatedScenarioTrendsChartFlag = false;
   updateLabelScenarioTrendsChartFlag = false;
+  updateDegradationCurveChartFlag = false;
+
   aggregatedScenarioTrendChartOption = {
     ...customScenarioTrends(), series: []
   };
@@ -30,10 +32,15 @@ export class ScenarioTrendsComponent implements OnInit {
   labelScenarioTrendChartErrorRateOption = {
     ...labelTrends("%", "ErrorRate"), series: []
   };
+  responseTimeDegradationChartOption = {
+    ...responseTimeDegradationCurveOption(), series: []
+  };
   userSettings: ScenarioTrendsUserSettings;
   chartDataMapping;
   itemIds = new Set();
   labelDataTruncated = false;
+  responseTimeDegradationCurve;
+  degradationCurveDisplayed = false;
 
   constructor(private scenarioService: ScenarioService, private router: Router,
   ) {
@@ -61,13 +68,15 @@ export class ScenarioTrendsComponent implements OnInit {
       aggregatedTrends: ScenarioTrendsData[],
       labelTrends: LabelTrendsData[],
       userSettings: ScenarioTrendsUserSettings
+      responseTimeDegradationCurve,
     }) => {
       if (!_) {
         return;
       }
       this.userSettings = _.userSettings;
       this.generateAggregateChartLines(_.aggregatedTrends);
       this.generateLabelChartLines(_.labelTrends);
+      this.generateDegradationCurve(_.responseTimeDegradationCurve);
     });
   }
 
@@ -96,7 +105,6 @@ export class ScenarioTrendsComponent implements OnInit {
       if (!chartSeriesSettings) {
         continue;
       }
-      console.log({ chartSeriesSettings });
       series.push({
         name: chartSeriesSettings.name || key,
         data: chartSeriesSettings.transform ? chartSeriesSettings.transform(seriesData[key]) : seriesData[key],
@@ -141,6 +149,16 @@ export class ScenarioTrendsComponent implements OnInit {
     this.updateLabelScenarioTrendsChartFlag = true;
   }
 
+  generateDegradationCurve(degradationCurve) {
+    if (!degradationCurve) {
+      return;
+    }
+    console.log(degradationCurve);
+    this.responseTimeDegradationChartOption.series = JSON.parse(JSON.stringify(degradationCurve));
+    this.updateDegradationCurveChartFlag = true;
+
+  }
+
   onPointSelect(event) {
     if (event && event.point && event.point) {
       const itemId = Array.from(this.itemIds)[event.point.index];
@@ -149,6 +167,11 @@ export class ScenarioTrendsComponent implements OnInit {
     }
   }
 
+  toggleDegradationCurve() {
+    console.log("toggleDegradationCurve");
+    this.degradationCurveDisplayed = !this.degradationCurveDisplayed;
+  }
+
   private updateLabelChart(chartOptions, series) {
     chartOptions.series = JSON.parse(JSON.stringify(series));
     chartOptions.xAxis.categories = this.itemIds;

diff --git a/src/app/scenario/scenario.module.ts b/src/app/scenario/scenario.module.ts
@@ -25,7 +25,6 @@ import { RoleModule } from "../_directives/role.module";
 import { AddNewItemModule } from "./add-new-item/add-new-item.module";
 import { ScenarioTrendsSettingsComponent } from "./scenario-trends/scenario-trends-settings/scenario-trends-settings.component";
 
-
 const routes: Routes = [
   {
     path: "project/:projectName/scenario/:scenarioName/items", component: ScenarioComponent,

diff --git a/src/styles.scss b/src/styles.scss
@@ -134,6 +134,10 @@ a:hover {
   color: #4b7cf3;
 }
 
+.jtl-btn-light:active {
+  color: blue;
+}
+
 .jtl-btn-primary {
   color: white;
   background-color: #4b7cf3;