Merge branch 'master' into snyk-upgrade-e19ddd06753a27eec69d5a13d91fd0a2

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/monitoring-stats/monitoring-stats.component.css

@@ -11,3 +11,8 @@
 .monitoring-data:hover {
   color: #105196
 }
+
+
+.card {
+  margin-top: 20px;
+}

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

@@ -1,19 +1,16 @@
-<ng-template #content let-modal>
-  <div class="modal-header" ngbAutofocus>
-    <h5 class="modal-title" id="modal-basic-title">Monitoring stats</h5>
-    <button type="button" style="outline: none;" class="btn-close" aria-label="" (click)="modal.dismiss('Cross click')">
-
-    </button>
-  </div>
-  <div class="modal-body">
-    <div *ngIf="monitoringChartOptions">
-      <highcharts-chart [Highcharts]="Highcharts" [options]="monitoringChartOptions" [callbackFunction]="chartCallback" [(update)]="updateFlag"
-        [constructorType]="chartConstructor" style="width: auto; height: 400px; display: block;"></highcharts-chart>
+<div class="row charts">
+  <div class="col tab-charts" *ngIf="data.length > 0">
+    <div class="card overview-chart-card card-shadow">
+      <h6 class="card-header bg-transparent">Monitoring</h6>
+      <div class="card-body">
+        <div class="chart">
+          <highcharts-chart [Highcharts]="Highcharts" [options]="monitoringChartOptions"
+                            [callbackFunction]="chartCallback"
+                            [(update)]="updateFlag"
+                            [constructorType]="chartConstructor"
+                            style="width: auto; height: 400px; display: block;"></highcharts-chart>
+        </div>
+      </div>
     </div>
   </div>
-</ng-template>
-
-
-
-
-<a class="monitoring-data" (click)="open(content)"><i class="fas fa-heartbeat"></i></a>
+</div>

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

@@ -8,9 +8,9 @@ import { from } from "rxjs";
 @Component({
   selector: "app-monitoring-stats",
   templateUrl: "./monitoring-stats.component.html",
-  styleUrls: ["./monitoring-stats.component.css"]
+  styleUrls: ["./monitoring-stats.component.css", "../item-detail.component.scss", "../../shared-styles.css"]
 })
-export class MonitoringStatsComponent {
+export class MonitoringStatsComponent implements OnInit {
   Highcharts: typeof Highcharts = Highcharts;
   monitoringChartOptions;
   chartConstructor = "chart";
@@ -28,11 +28,12 @@ export class MonitoringStatsComponent {
 
   @Input() data: [{ name: string, timestamp: Date, avgCpu: number, avgMem: number }];
 
+  ngOnInit() {
+    this.prepareChart()
+  }
 
-  open(content) {
-    this.modalService.open(content, { size: "xl" }).result
-      .then((_) => { this.monitoringChartOptions = null; }, () => { this.monitoringChartOptions = null; });
 
+  prepareChart() {
     const workers = Array.from(new Set(this.data.map(data => data.name)));
     const series = workers.map((worker) => this.data
       .filter(data => data.name === worker)

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");