Comparison reworked (#416)

* Refactor stats comparison and related components [WIP]

Renamed and refactored `RequestStatsCompareComponent` to `RequestStatsComponent` for better clarity and separation of concerns. Added dropdown for quick comparison options and integrated data comparison logic in `stats-compare` component. Updated imports and adjusted the HTML structure accordingly.

* Add ComparisonStatsService with basic structure and tests

Implemented the ComparisonStatsService with a BehaviorSubject to store item statistics. Included an initial unit test to verify the service creation.

* Add ComparisonStatsService with basic structure and tests

Implemented the ComparisonStatsService with a BehaviorSubject to store item statistics. Included an initial unit test to verify the service creation.

* Remove unused variable and fix resetStatsData logic

Eliminated the `comparedData` variable as it was not in use, and corrected the `resetStatsData` method to reset the `comparingData` variable instead.

* Enhance stats comparison menu and refactor item fetching

Improved the UI for the stats comparison dropdown menu by adding icons and adjusting styling for clarity. Refactored the item fetching logic to use the `ItemsApiService` and simplified parameter subscription handling in components. Additionally, fixed various issues related to comparison data state management.

* linter fixes

src/app/_services/comparison-stats.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from "@angular/core/testing";
+
+import { ComparisonStatsService } from "./comparison-stats.service";
+
+describe("ComparisonStatsService", () => {
+  let service: ComparisonStatsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ComparisonStatsService);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/_services/comparison-stats.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { ItemStatistics } from "../items.service.model";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ComparisonStatsService {
+
+  private requestStats = new BehaviorSubject<ItemStatistics[]>([]);
+
+  requestStats$ = this.requestStats.asObservable();
+
+
+  setRequestStats(data: ItemStatistics[]) {
+    this.requestStats.next(data);
+  }
+
+}

src/app/item-detail/item-detail.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { ItemDetailComponent } from "./item-detail.component";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { RequestStatsCompareComponent } from "./request-stats/request-stats-compare.component";
+import { RequestStatsComponent } from "./request-stats/request-stats.component";
 import { ThresholdsAlertComponent } from "./thresholds-alert/thresholds-alert.component";
 import { PerformanceAnalysisComponent } from "./performance-analysis/performance-analysis.component";
 import { AuthGuard } from "../auth.guard";
@@ -40,7 +40,7 @@ const routes: Routes = [{
 
 
 @NgModule({
-  declarations: [ItemDetailComponent, RequestStatsCompareComponent, ThresholdsAlertComponent,
+  declarations: [ItemDetailComponent, RequestStatsComponent, ThresholdsAlertComponent,
     PerformanceAnalysisComponent, LabelChartComponent, AnalyzeChartsComponent,
     LabelHealthComponent, LabelTrendComponent, StatsCompareComponent, AddMetricComponent, ShareComponent, DeleteShareLinkComponent,
     CreateNewShareLinkComponent, MonitoringStatsComponent, ReloadCustomChartComponent, ChartIntervalComponent, ForbiddenComponent, ThresholdFailureComponent, ZoomChartsComponent, ErrorSummaryComponent],

src/app/item-detail/request-stats/request-stats-compare.component.html → src/app/item-detail/request-stats/request-stats.component.html

@@ -1,19 +1,12 @@
 <div class="card table-stats request-stats card-shadow">
 
   <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
-
-      <span class="comparison-desc" *ngIf="comparedData">Comparing to test: <a
-        href="/project/{{params.projectName}}/scenario/{{params.scenarioName}}/item/{{comparedMetadata.id}}">{{comparedMetadata.id}}
-        with
-        {{comparedMetadata.maxVu}} VU</a></span>
-      <button class="remove-comparison btn btn-sm jtl-btn-light" *ngIf="comparedData" (click)="resetStatsData()"><span
-        class="compare-desc-btn">Remove</span>
-      </button>
       <button class="remove-comparison btn btn-sm jtl-btn-light jtl-no-glow" *ngIf="comparedData"
               (click)="switchComparisonDataUnit()"><span class="compare-desc-btn">
           <i class="fa" [ngClass]="{'fa-percent': defaultUnit, 'fa-stopwatch': !defaultUnit}"></i></span>
       </button>
-      <app-stats-compare *ngIf="!isAnonymous" (itemDetailToCompare)="itemToCompare($event)"></app-stats-compare>
+
+
 
 
       <div *ngIf="!isAnonymous" class="btn-group mr-3">
@@ -22,12 +15,6 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
           <button class="btn btn-sm jtl-no-glow jtl-control-menu hamburger-menu" ngbDropdownToggle><i
             class="fas fa-bars"></i></button>
           <div class="dropdown-menu jtl-dropdown-control-menu" ngbDropdownMenu>
-            <button class="btn btn-sm"
-                    *ngIf="(itemData.baseId && itemData.baseId !== params.id)"
-                    (click)="quickBaseComparison(itemData.baseId)"
-                    ngbDropdownItem>
-                Compare to base run</button>
-
             <button class="btn btn-sm" (click)="downloadAsPng()" ngbDropdownItem>Download as PNG</button>
             <button class="btn btn-sm" (click)="downloadAsXLXS()" ngbDropdownItem>Download as XLXS</button>
 

src/app/item-detail/request-stats/request-stats-compare.component.spec.ts → src/app/item-detail/request-stats/request-stats.component.spec.ts

@@ -10,16 +10,16 @@ import { LabelTrendComponent } from "../label-trend/label-trend.component";
 import { StatsCompareComponent } from "../stats-compare/stats-compare.component";
 import { LabelHealthComponent } from "./label-health/label-health.component";
 
-import { RequestStatsCompareComponent } from "./request-stats-compare.component";
+import { RequestStatsComponent } from "./request-stats.component";
 
 describe("RequestStatsCompareComponent", () => {
-  let component: RequestStatsCompareComponent;
-  let fixture: ComponentFixture<RequestStatsCompareComponent>;
+  let component: RequestStatsComponent;
+  let fixture: ComponentFixture<RequestStatsComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
-        RequestStatsCompareComponent,
+        RequestStatsComponent,
         StatsCompareComponent,
         LabelTrendComponent,
         LabelHealthComponent,
@@ -38,7 +38,7 @@ describe("RequestStatsCompareComponent", () => {
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(RequestStatsCompareComponent);
+    fixture = TestBed.createComponent(RequestStatsComponent);
     component = fixture.componentInstance;
     component.itemData = {
       environment: "",
@@ -159,33 +159,6 @@ describe("RequestStatsCompareComponent", () => {
   it("should create", () => {
     expect(component).toBeTruthy();
   });
-  it("should call resetStatsData when itemToCompare triggered", () => {
-    const spy = spyOn(component, "resetStatsData").and.callThrough();
-    component.itemToCompare({
-      maxVu: 100,
-      id: "123-123",
-      statistics: [{
-        avgResponseTime: 109,
-        bytes: 7587,
-        errorRate: 0,
-        label: "02 - Click_Log_In-22",
-        maxResponseTime: 380,
-        minResponseTime: 81,
-        n0: 330,
-        n5: 344,
-        n9: 372,
-        samples: 200,
-        throughput: 0.17,
-      }],
-      plot: {
-        responseTime: [{ data: [], name: "label" }],
-        throughput: [{ data: [], name: "label" }]
-      },
-      extraPlotData: {},
-      histogramPlotData: {}
-    });
-    expect(spy).toHaveBeenCalled();
-  });
   describe("label search", () => {
     it("should search fulltext", () => {
       component.search("02");