Add comparison chart integration to item-detail component (#420)

* Add comparison chart integration to item-detail component * Add date range to charts and refactor chart options Integrated start and end date parameters into the charts to allow for date range filtering. Refactored chart option handling by introducing the `ItemChartOption` class, improving code organization and readability. * Monitoring comparison chart * tests fixes
ludeknovy · Sep 28, 2024 · 57f73cb · 57f73cb
1 parent f2536cc
commit 57f73cb
Show file tree

Hide file tree

Showing 17 changed files with 304 additions and 118 deletions.
diff --git a/src/app/_services/chart-service-utils.ts b/src/app/_services/chart-service-utils.ts
@@ -1,8 +1,9 @@
 import { errorLineSettings, networkLineSettings, threadLineSettings, throughputLineSettings } from "../graphs/item-detail";
 import { bytesToMbps } from "../item-detail/calculations";
 import { Metrics } from "../item-detail/metrics";
+import { MonitoringData } from "../items.service.model";
 
-export const getChartLines = (plot): ChartLines => {
+export const getChartLines = (plot, monitoringPlot: MonitoringData[]): ChartLines => {
   const {
     threads, overallTimeResponse,
     overallThroughput, overAllFailRate, overAllNetworkV2,
@@ -20,6 +21,7 @@ export const getChartLines = (plot): ChartLines => {
     labels: new Map(),
     statusCodes: new Map(),
     scatter: new Map(),
+    monitoring: new Map(),
   };
 
   if (overAllNetworkV2) {
@@ -48,6 +50,10 @@ export const getChartLines = (plot): ChartLines => {
     chartLines.scatter.set(Metrics.ResponseTimeRaw, scatterPlotData)
   }
 
+  if (monitoringPlot && monitoringPlot.length > 0) {
+    chartLines.monitoring.set(Metrics.Monitoring, monitoringPlot)
+  }
+
   if (networkV2) {
     const networkMbps = networkV2.map((_) => {
       _.data = _.data.map(__ => [__[0], bytesToMbps(__[1])]);
@@ -83,7 +89,6 @@ export const getChartLines = (plot): ChartLines => {
   chartLines.labels.set(Metrics.Throughput, throughput.map((label) => ({ ...label, suffix: " reqs/s" })));
 
   return { chartLines };
-
 };
 
 
@@ -95,10 +100,14 @@ export interface ChartLine {
   labels: Map<string, LabelChartLine[]>;
   overall: Map<string, { name: string, data: [] }>;
   scatter: Map<string,[] >
-}
+  threadsPerThreadGroup: Map<string,[] >
+  statusCodes:Map<string, { name: string, data: [] }>;
+  monitoring: Map<string,MonitoringData[]>
 
+}
 export interface LabelChartLine {
   name: string
   data: [],
   suffix: string
 }
+
diff --git a/src/app/_services/comparison-chart.service.ts b/src/app/_services/comparison-chart.service.ts
@@ -1,19 +1,20 @@
 import { Injectable } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
-import { ChartLines, getChartLines } from "./chart-service-utils";
+import { ChartLine, getChartLines } from "./chart-service-utils";
+import { MonitoringData } from "../items.service.model";
 
 @Injectable({
-  providedIn: "root"
+  providedIn: 'root'
 })
 export class ComparisonChartService {
 
 
-  private plot$ = new BehaviorSubject<ChartLines>({ chartLines: null });
-  private histogramPlot$ = new BehaviorSubject<{ responseTimePerLabelDistribution: []}>(null);
+  private plot$ = new BehaviorSubject<ComparisonChartLines>({ chartLines: null, startDate: null, endDate: null });
+  private histogramPlot$ = new BehaviorSubject<{ responseTimePerLabelDistribution: [] }>(null);
 
   private interval$ = new BehaviorSubject<string>(null);
   selectedPlot$ = this.plot$.asObservable();
-  histogram$ = this.histogramPlot$.asObservable()
+  histogram$ = this.histogramPlot$.asObservable();
 
 
   setInterval(interval) {
@@ -25,21 +26,31 @@ export class ComparisonChartService {
   }
 
   resetPlot() {
-    this.plot$.next(null)
+    this.plot$.next(null);
 
   }
 
-  setComparisonPlot(defaultPlot, extraPlots) {
+  setComparisonPlot(defaultPlot: ChartLine, extraPlots, startDate, endDate, monitoring: MonitoringData[]) {
     this.interval$.subscribe(interval => {
-      let comparisonPlot = null
+      let comparisonPlot: ChartLine = null;
       if (!interval || interval === "Auto") {
-        comparisonPlot = defaultPlot
+        comparisonPlot = defaultPlot;
       } else {
-        const extraPlotIntervalData = extraPlots?.find(extraPlot => extraPlot.interval === interval)?.data
-        comparisonPlot = extraPlotIntervalData || defaultPlot
+        const extraPlotIntervalData = extraPlots?.find(extraPlot => extraPlot.interval === interval)?.data;
+        comparisonPlot = extraPlotIntervalData || defaultPlot;
       }
-      this.plot$.next(comparisonPlot ? getChartLines(comparisonPlot): null)
-    })
+      this.plot$.next({
+        chartLines: comparisonPlot ? getChartLines(comparisonPlot, monitoring).chartLines : null,
+        startDate: startDate ? new Date(startDate) : null,
+        endDate: endDate ? new Date(endDate) : null,
+      });
+    });
 
   }
 }
+
+export interface ComparisonChartLines {
+  chartLines?: ChartLine;
+  startDate: Date;
+  endDate: Date;
+}
diff --git a/src/app/_services/item-chart.service.ts b/src/app/_services/item-chart.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from "@angular/core";
 import { BehaviorSubject } from "rxjs";
 import { ChartLines, getChartLines } from "./chart-service-utils";
+import { MonitoringData } from "../items.service.model";
 
 @Injectable({
   providedIn: "root"
@@ -13,8 +14,8 @@ export class ItemChartService {
   selectedPlot$ = this.plot.asObservable();
   plotRange$ = this.plotRange.asObservable();
 
-  setCurrentPlot(plot) {
-    this.plot.next(getChartLines(plot));
+  setCurrentPlot(plot, monitoringPlot: MonitoringData[]) {
+    this.plot.next(getChartLines(plot, monitoringPlot));
   }
 
   setPlotRange(plotRange: PlotRange) {

diff --git a/src/app/graphs/item-detail.ts b/src/app/graphs/item-detail.ts
@@ -279,10 +279,11 @@ export const networkLineSettings: any = {
   name: Metrics.Network
 };
 
-export const scatterChart = {
+export const scatterChart = () => ({
   chart: {
     type: "scatter",
-    zoomType: "xy"
+    zoomType: "xy",
+    marginTop: 50,
   },
   title: {
     text: ""
@@ -296,6 +297,8 @@ export const scatterChart = {
   },
   xAxis: {
     showLastLabel: true,
+    min: null,
+    max: null,
     type: "datetime",
     legend: {
       enabled: false,
@@ -338,4 +341,4 @@ export const scatterChart = {
       }
     }
   },
-};
+});
diff --git a/src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts b/src/app/item-detail/analyze-charts/analyze-charts.component.spec.ts
@@ -33,7 +33,14 @@ describe("AnalyzeChartsComponent", () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AnalyzeChartsComponent);
     component = fixture.componentInstance;
-    component.chartLines = { labels: new Map([["test", [{ name: "test", data: [], suffix: " ms" }]]]), overall: new Map(), scatter: new Map() };
+    component.chartLines = {
+      labels: new Map([["test", [{ name: "test", data: [], suffix: " ms" }]]]),
+      overall: new Map(),
+      scatter: new Map(),
+      threadsPerThreadGroup: new Map(),
+      monitoring: new Map(),
+      statusCodes: new Map(),
+    };
     component.params = { projectName: "test-project", scenarioName: "test-scenario", id: "test-item" };
     fixture.detectChanges();
   });

diff --git a/src/app/item-detail/chart-interval/chart-interval.component.ts b/src/app/item-detail/chart-interval/chart-interval.component.ts
@@ -29,7 +29,7 @@ export class ChartIntervalComponent implements OnInit {
     } else {
       newPlotData = this.intervals.extraIntervals.find(interval => interval.interval === inputInterval)?.data
     }
-    this.itemChartService.setCurrentPlot(newPlotData)
+    this.itemChartService.setCurrentPlot(newPlotData, null)
   }
 
 }
diff --git a/src/app/item-detail/item-chart-option.ts b/src/app/item-detail/item-chart-option.ts
@@ -0,0 +1,23 @@
+export class ItemChartOption {
+  public overallChart = null
+  public threadsPerThreadGroup = null
+  public scatterChartOptions = null
+  public statusChartOptions = null
+
+  setChartsOptions(options: { overallChart: any, threadsPerThreadGroup: any, scatterChartOptions: any, statusChartOptions: any }) {
+    if (!options) {
+      return
+    }
+    this.overallChart = options.overallChart
+    this.threadsPerThreadGroup = options.threadsPerThreadGroup
+    this.scatterChartOptions = options.scatterChartOptions
+    this.statusChartOptions = options.statusChartOptions
+  }
+
+  resetChartOptions() {
+    this.overallChart = null
+    this.threadsPerThreadGroup = null
+    this.scatterChartOptions = null
+    this.statusChartOptions = null
+  }
+}
diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
@@ -401,6 +401,16 @@ <h6 class="card-header bg-transparent">Overall Chart
                                           [(update)]="updateOverallChartFlag"
                                           style="width: 100%; height: 350px; display: block;">
                         </highcharts-chart>
+
+                        <app-separation-line  *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.overallChart"></app-separation-line>
+
+                        <div *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.overallChart">
+
+                          <highcharts-chart [Highcharts]="Highcharts" [options]="comparisonItemChartOptions.overallChart" [callbackFunction]="comparisonChartCallback" [(update)]="updateComparisonChartFlag"
+                                            class="highchart-chart"
+                                            style="width: 100%; height: 100%; display: block;"></highcharts-chart>
+                        </div>
+
                       </div>
                     </div>
                   </div>
@@ -419,6 +429,20 @@ <h6 class="card-header bg-transparent">
                                           [(update)]="updateScatterChartFlag"
                                           style="width: 100%; height: 350px; display: block;">
                         </highcharts-chart>
+
+
+
+
+                        <app-separation-line  *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.scatterChartOptions"></app-separation-line>
+
+
+                        <div *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.scatterChartOptions">
+
+                          <highcharts-chart [Highcharts]="Highcharts" [options]="comparisonItemChartOptions.scatterChartOptions" [callbackFunction]="comparisonScatterChartCallback" [(update)]="updateComparisonScatterChartFlag"
+                                            class="highchart-chart"
+                                            style="width: 100%; height: 100%; display: block;"></highcharts-chart>
+
+                        </div>
                       </div>
                     </div>
 
@@ -437,6 +461,16 @@ <h6 class="card-header bg-transparent">Status Codes Chart</h6>
                                           [(update)]="updateChartFlag"
                                           style="width: 100%; height: 350px; display: block;">
                         </highcharts-chart>
+
+                        <app-separation-line  *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.statusChartOptions"></app-separation-line>
+
+
+                        <div *ngIf="comparisonItemChartOptions && comparisonItemChartOptions.statusChartOptions">
+
+                          <highcharts-chart [Highcharts]="Highcharts" [options]="comparisonItemChartOptions.statusChartOptions" [callbackFunction]="comparisonChartCallback" [(update)]="updateComparisonChartFlag"
+                                            class="highchart-chart"
+                                            style="width: 100%; height: 100%; display: block;"></highcharts-chart>
+                        </div>
                       </div>
                     </div>
                   </div>