label trend chart scenario settings (#246)

ludeknovy · Mar 8, 2022 · fc6df76 · fc6df76
1 parent d211e1b
commit fc6df76
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 26 deletions.
diff --git a/src/app/graphs/label-trend.ts b/src/app/graphs/label-trend.ts
@@ -1,4 +1,6 @@
-export const labelTrendChartOptions = (data) => {
+import { LabelTrend } from "../items.service.model";
+
+export const labelTrendChartOptions = (data: LabelTrend) => {
   return {
     chart: {
       type: "column",
@@ -18,7 +20,7 @@ export const labelTrendChartOptions = (data) => {
     xAxis: [{
       lineWidth: 0,
       crosshair: true,
-      categories: data.timePoints,
+      categories: data.chartSeries.timePoints,
       tickInterval: 5,
       gridLineWidth: 0,
     }],
@@ -88,30 +90,33 @@ export const labelTrendChartOptions = (data) => {
     series: [
     {
       name: "Response Time [P99]",
+      visible: data.chartSettings.p99,
       yAxis: 0,
       color: "#008DA6",
       lineWidth: 0,
-      data: data["n9"],
+      data: data.chartSeries.p99,
       tooltip: {
         valueSuffix: " ms"
       },
       marker: { enabled: false },
     },
     {
       name: "Response Time [P95]",
+      visible: data.chartSettings.p95,
       yAxis: 0,
       color: "#36B37E",
       lineWidth: 0,
-      data: data["n5"],
+      data: data.chartSeries.p95,
       tooltip: {
         valueSuffix: " ms"
       },
       marker: { enabled: false },
     },
     {
       name: "Response Time [P90]",
+      visible: data.chartSettings.p90,
       yAxis: 0,
-      data: data["n0"],
+      data: data.chartSeries.p90,
       color: "#FFC400",
       lineWidth: 0,
       tooltip: {
@@ -122,8 +127,8 @@ export const labelTrendChartOptions = (data) => {
     {
       name: "Response Time [avg]",
       yAxis: 0,
-      visible: false,
-      data: data.avgResponseTime,
+      visible: data.chartSettings.avgResponseTime,
+      data: data.chartSeries.avgResponseTime,
       lineWidth: 0,
       tooltip: {
         valueSuffix: " ms"
@@ -133,8 +138,8 @@ export const labelTrendChartOptions = (data) => {
     {
       name: "Connection [avg]",
       yAxis: 0,
-      visible: false,
-      data: data.connect,
+      visible: data.chartSettings.avgConnectionTime,
+      data: data.chartSeries.avgConnectionTime,
       lineWidth: 0,
       tooltip: {
         valueSuffix: " ms"
@@ -144,8 +149,8 @@ export const labelTrendChartOptions = (data) => {
     {
       name: "Latency [avg]",
       yAxis: 0,
-      visible: false,
-      data: data.latency,
+      visible: data.chartSettings.avgLatency,
+      data: data.chartSeries.avgLatency,
       lineWidth: 0,
       tooltip: {
         valueSuffix: " ms"
@@ -154,8 +159,8 @@ export const labelTrendChartOptions = (data) => {
     },
     {
       name: "Throughput",
-      data: data.throughput,
-      visible: false,
+      visible: data.chartSettings.throughput,
+      data: data.chartSeries.throughput,
       color: "#CB59E8",
       tooltip: {
         valueSuffix: " hits/s"
@@ -165,7 +170,8 @@ export const labelTrendChartOptions = (data) => {
     },
     {
       name: "Error Rate",
-      data: data.errorRate,
+      visible: data.chartSettings.errorRate,
+      data: data.chartSeries.errorRate,
       tooltip: {
         valueSuffix: " %"
       },
@@ -176,7 +182,8 @@ export const labelTrendChartOptions = (data) => {
     {
       name: "Virtual Users",
       type: "spline",
-      data: data.threads,
+      data: data.chartSeries.virtualUsers,
+      visible: data.chartSettings.virtualUsers,
       tooltip: {
         valueSuffix: " VU"
       },

diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.ts b/src/app/item-detail/analyze-charts/analyze-charts.component.ts
@@ -9,6 +9,7 @@ import { AnalyzeChartService } from "../../analyze-chart.service";
   templateUrl: "./analyze-charts.component.html",
   styleUrls: ["./analyze-charts.component.css", "../item-detail.component.scss"]
 })
+
 export class AnalyzeChartsComponent implements OnInit {
 
   @Input() params: { projectName: string, scenarioName: string, id: string };

diff --git a/src/app/item-detail/label-trend/label-trend.component.ts b/src/app/item-detail/label-trend/label-trend.component.ts
@@ -66,7 +66,7 @@ export class LabelTrendComponent {
         virtualUsers
       }
     ).subscribe((_) => {
-      this.labelChartOption = _.timePoints.length >= 2 ? labelTrendChartOptions(_) : emptyChart();
+      this.labelChartOption = _.chartSeries.timePoints.length >= 2 ? labelTrendChartOptions(_) : emptyChart();
       this.updateFlag = true;
     });
   }

diff --git a/src/app/items.service.model.ts b/src/app/items.service.model.ts
@@ -222,14 +222,31 @@ export interface ProjectsOverallStats {
 }
 
 export interface LabelTrend {
-  timePoints: string[];
-  errorRate: number[];
-  id: string;
-  n0: number[];
-  n5: number[];
-  n9: number[];
-  throughput: number[];
-  threads: number[];
+    chartSeries: {
+      timePoints: string[];
+      errorRate: number[];
+      id: string;
+      p90: number[];
+      p95: number[];
+      p99: number[];
+      throughput: number[];
+      virtualUsers: number[];
+      avgLatency: number[],
+      avgConnectionTime: number[],
+      avgResponseTime: number[],
+    },
+    chartSettings: {
+      virtualUsers: boolean,
+      throughput: boolean,
+      avgLatency: boolean,
+      avgConnectionTime: boolean,
+      avgResponseTime: boolean,
+      p90: boolean,
+      p95: boolean,
+      p99: boolean,
+      errorRate: boolean,
+    }
+
 }
 
 export interface LabelMaxVu {

diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.html b/src/app/scenario/scenario-settings/scenario-settings.component.html
@@ -166,6 +166,70 @@ <h6>Generate share token automatically</h6>
         </table>
 
 
+          <div class="modal-footer">
+            <button type="submit" class="btn btn-primary">Submit</button>
+          </div>
+        </form>
+
+      </ng-template>
+    </li>
+
+    <li ngbNavItem>
+      <a ngbNavLink>Label Trend Chart Settings</a>
+      <ng-template ngbNavContent>
+        <form [formGroup]="labelTrendChartSettingsForm" (ngSubmit)="onSubmit()">
+          <div class="form-group form-settings">
+            <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">
+              <input type="checkbox" class="custom-control-input" id="virtualUsers"
+                     formControlName="virtualUsers">
+              <label class="custom-control-label" for="virtualUsers">Virtual Users</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="errorRate"
+                     formControlName="errorRate">
+              <label class="custom-control-label" for="errorRate">Error Rate</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="p90"
+                     formControlName="p90">
+              <label class="custom-control-label" for="p90">90% Percentile</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="p95"
+                     formControlName="p95">
+              <label class="custom-control-label" for="p95">95% Percentile</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="p99"
+                     formControlName="p99">
+              <label class="custom-control-label" for="p99">99% Percentile</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="throughput"
+                     formControlName="throughput">
+              <label class="custom-control-label" for="throughput">Throughput</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="avgLatency"
+                     formControlName="avgLatency">
+              <label class="custom-control-label" for="avgLatency">Average Latency</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="avgConnectionTime"
+                     formControlName="avgConnectionTime">
+              <label class="custom-control-label" for="avgConnectionTime">Average Connection Time</label>
+            </div>
+            <div class="custom-control custom-switch">
+              <input type="checkbox" class="custom-control-input" id="avgResponseTime"
+                     formControlName="avgResponseTime">
+              <label class="custom-control-label" for="avgResponseTime">Average Response Time</label>
+            </div>
+
+          </div>
+
+
           <div class="modal-footer">
             <button type="submit" class="btn btn-primary">Submit</button>
           </div>

diff --git a/src/app/scenario/scenario-settings/scenario-settings.component.ts b/src/app/scenario/scenario-settings/scenario-settings.component.ts
@@ -19,6 +19,7 @@ export class SettingsScenarioComponent implements OnInit {
 
 
   scenarioSettingsForm: FormGroup;
+  labelTrendChartSettingsForm: FormGroup;
   formControls = {
     scenarioName: null,
     analysisEnabled: null,
@@ -33,8 +34,20 @@ export class SettingsScenarioComponent implements OnInit {
     term: null,
     operator: null,
   };
+  labelTrendChartControls = {
+    virtualUsers: null,
+    throughput: null,
+    p90: null,
+    p95: null,
+    p99: null,
+    avgResponseTime: null,
+    avgConnectionTime: null,
+    avgLatency: null,
+    errorRate: null,
+  }
   labelFilterControls = {}
 
+
   params;
 
   keepTestRunPeriods = [
@@ -129,6 +142,16 @@ export class SettingsScenarioComponent implements OnInit {
     this.formControls.generateShareToken = new FormControl(settings.generateShareToken, [
       Validators.required
     ])
+
+    this.labelTrendChartControls.virtualUsers = new FormControl(settings.labelTrendChartSettings?.virtualUsers, []); 
+    this.labelTrendChartControls.throughput = new FormControl(settings.labelTrendChartSettings?.throughput, []); 
+    this.labelTrendChartControls.avgConnectionTime = new FormControl(settings.labelTrendChartSettings?.avgConnectionTime, []); 
+    this.labelTrendChartControls.avgLatency = new FormControl(settings.labelTrendChartSettings?.avgLatency, []); 
+    this.labelTrendChartControls.avgResponseTime = new FormControl(settings.labelTrendChartSettings?.avgResponseTime, []); 
+    this.labelTrendChartControls.p90 = new FormControl(settings.labelTrendChartSettings?.p90, []); 
+    this.labelTrendChartControls.p95 = new FormControl(settings.labelTrendChartSettings?.p95, []); 
+    this.labelTrendChartControls.p99 = new FormControl(settings.labelTrendChartSettings?.p99, []); 
+    this.labelTrendChartControls.errorRate = new FormControl(settings.labelTrendChartSettings?.errorRate, []); 
 
   }
 
@@ -145,20 +168,33 @@ export class SettingsScenarioComponent implements OnInit {
       keepTestRunsPeriod: this.formControls.keepTestRunsPeriod,
       generateShareToken: this.formControls.generateShareToken,
     });
+
+    this.labelTrendChartSettingsForm = new FormGroup({
+      virtualUsers: this.labelTrendChartControls.virtualUsers,
+      throughput: this.labelTrendChartControls.throughput,
+      avgConnectionTime: this.labelTrendChartControls.avgConnectionTime,
+      avgLatency: this.labelTrendChartControls.avgLatency,
+      avgResponseTime: this.labelTrendChartControls.avgResponseTime,
+      p90: this.labelTrendChartControls.p90,
+      p95: this.labelTrendChartControls.p95,
+      p99: this.labelTrendChartControls.p99,
+      errorRate: this.labelTrendChartControls.errorRate,
+    })
   }
 
   open(content) {
     this.modalService.open(content, { ariaLabelledBy: "modal-basic-title", size: "lg" });
   }
 
   onSubmit() {
-    if (this.scenarioSettingsForm.valid && this.labelFilters.valid) {
+    if (this.scenarioSettingsForm.valid && this.labelFilters.valid && this.labelTrendChartSettingsForm.valid) {
 
       const {
         scenarioName, analysisEnabled,
         thresholdEnabled, thresholdErrorRate,
         thresholdPercentile, thresholdThroughput, deleteSamples, zeroErrorToleranceEnabled, keepTestRunsPeriod, generateShareToken
       } = this.scenarioSettingsForm.value;
+      console.log(this.labelTrendChartSettingsForm.value)
       const { projectName, scenarioName: currentScenarioName } = this.params;
       const body = {
         scenarioName,
@@ -173,7 +209,8 @@ export class SettingsScenarioComponent implements OnInit {
           throughput: parseFloat(thresholdThroughput),
           percentile: parseFloat(thresholdPercentile)
         },
-        labelFilterSettings: this.labelFilters.value.map(filter => ({ labelTerm: filter[0], operator: filter[1] }))
+        labelFilterSettings: this.labelFilters.value.map(filter => ({ labelTerm: filter[0], operator: filter[1] })),
+        labelTrendChartSettings: this.labelTrendChartSettingsForm.value
       };
 
       this.scenarioApiService.updateScenario(projectName, currentScenarioName, body)