Compare to a report from different scenario

src/app/item-detail/stats-compare/stats-compare.component.css

@@ -33,3 +33,7 @@ thead {
 .compare-menu-item {
   margin-left: 10px;
 }
+
+.scenario-select-form {
+  padding-bottom: 2rem;
+}

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

@@ -9,20 +9,34 @@
       <span class="compare-menu-item"> Compare To Baseline</span>
     </button>
     <button *ngIf="comparingData" class="btn btn-sm" (click)="resetStatsData()" ngbDropdownItem><i class="fas fa-undo-alt"></i><span class="compare-menu-item"> Remove Comparison</span></button>
-    <a *ngIf="comparingData" class="btn btn-sm" ngbDropdownItem target="_blank" href="/project/{{params.projectName}}/scenario/{{params.scenarioName}}/item/{{comparedMetadata.id}}"><i class="fas fa-external-link-alt"></i><span class="compare-menu-item"> Open Comparing Report</span></a>
+    <a *ngIf="comparingData" class="btn btn-sm" ngbDropdownItem target="_blank" href="/project/{{params.projectName}}/scenario/{{selectedScenario}}/item/{{comparedMetadata.id}}"><i class="fas fa-external-link-alt"></i><span class="compare-menu-item"> Open Comparing Report</span></a>
   </div>
 </div>
 
 
 <ng-template #content let-modal>
   <div class="modal-header">
-    <h5 class="modal-title" id="modal-basic-title">Choose test run to compare</h5>
+    <h5 class="modal-title" id="modal-basic-title">Select Test Report To Compare</h5>
+
     <button type="button" style="outline: none;" class="btn-close" aria-label="Close"
             (click)="modal.dismiss('Cross click')">
 
     </button>
   </div>
   <div class="modal-body">
+    <form class="row g-3 scenario-select-form">
+      <div class="col-md-4">
+        <label for="scenarioSelect" class="form-label">Scenario</label>
+                  <select  id="scenarioSelect" class='form-select rounded-left' [(ngModel)]="selectedScenario" [ngModelOptions]="{standalone: true}" (change)="loadScenario($event)">
+                    <option *ngFor="let scenario of scenarios" value='{{scenario.name}}'>{{scenario.name}}</option>
+                  </select>
+
+      </div>
+    </form>
+
+
+
+
     <div class="col" *ngIf="items$ | async; let items">
       <div class="responsive-table">
         <table class="table items" [mfData]="items.data" #mf="mfDataTable">

src/app/item-detail/stats-compare/stats-compare.component.ts

@@ -2,12 +2,13 @@ import { Component, OnInit, Output, EventEmitter, Input } from "@angular/core";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { ItemsService } from "src/app/items.service";
 import { ActivatedRoute, Params } from "@angular/router";
-import { Observable } from "rxjs";
-import { ItemDetail, Items } from "src/app/items.service.model";
+import { Observable, Subscription } from "rxjs";
+import { IScenarios, ItemDetail, Items } from "src/app/items.service.model";
 import { ItemsApiService } from "src/app/items-api.service";
 import { ComparisonChartService } from "../../_services/comparison-chart.service";
 import { ToastrService } from "ngx-toastr";
 import { ComparisonStatsService } from "../../_services/comparison-stats.service";
+import { ScenarioApiService } from "../../scenario-api.service";
 
 const LIMIT = 15;
 const OFFSET = 15;
@@ -28,6 +29,8 @@ export class StatsCompareComponent implements OnInit {
   comparingData: ItemDetail;
   comparedMetadata: { id: string; maxVu: number };
   comparisonWarning = [];
+  scenarios: IScenarios[];
+  selectedScenario: string;
 
 
   @Input() itemData: ItemDetail;
@@ -40,25 +43,30 @@ export class StatsCompareComponent implements OnInit {
     private itemsApiService: ItemsApiService,
     private route: ActivatedRoute,
     private comparisonChartService: ComparisonChartService,
-    private comparisonStatsService: ComparisonStatsService
+    private comparisonStatsService: ComparisonStatsService,
+    private scenarioApiService: ScenarioApiService,
   ) {
   }
 
   ngOnInit() {
     this.items$ = this.itemsService.items$;
     this.route.params.subscribe(_ => {
       this.params = _;
+      this.selectedScenario = _.scenarioName;
+    });
+    this.scenarioApiService.fetchScenarios(this.params.projectName).subscribe(_ => {
+      this.scenarios = _;
     });
   }
 
   open(content) {
     this.modalService.open(content, { size: "xl" });
-    this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset: 0 });
+    this.itemsService.fetchItems(this.params.projectName, this.selectedScenario, { limit: LIMIT, offset: 0 });
   }
 
   loadMore() {
     const offset = (this.page - 1) * OFFSET;
-    this.itemsService.fetchItems(this.params.projectName, this.params.scenarioName, { limit: LIMIT, offset });
+    this.itemsService.fetchItems(this.params.projectName, this.selectedScenario, { limit: LIMIT, offset });
   }
 
   onSelectionChange(id) {
@@ -67,7 +75,7 @@ export class StatsCompareComponent implements OnInit {
 
   loadItemToCompare() {
     if (this.selectedTestItem) {
-      this.itemsApiService.fetchItemDetail(this.params.projectName, this.params.scenarioName, this.selectedTestItem)
+      this.itemsApiService.fetchItemDetail(this.params.projectName, this.selectedScenario, this.selectedTestItem)
         .subscribe(_ => {
           this.itemToCompare({
             statistics: _.statistics,
@@ -135,4 +143,11 @@ export class StatsCompareComponent implements OnInit {
     this.comparisonChartService.resetPlot();
     this.comparisonStatsService.setRequestStats(null);
   }
+
+  loadScenario(event) {
+    console.log(event.target.value)
+    const scenario = event.target.value
+    this.selectedScenario = scenario
+    this.itemsService.fetchItems(this.params.projectName, scenario, { limit: LIMIT, offset: 0 });
+  }
 }