label focus (#156)

src/app/analyze-chart.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AnalyzeChartService } from './analyze-chart.service';
+
+describe('AnalyzeChartService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AnalyzeChartService = TestBed.get(AnalyzeChartService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/analyze-chart.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, Subject} from 'rxjs';
+import {Metrics} from './item-detail/metrics';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyzeChartService {
+
+  public subject = new Subject<any>();
+  private dataSource = new BehaviorSubject<AnalyzeChartData>(null);
+  currentData = this.dataSource.asObservable();
+
+  constructor() { }
+
+  changeMessage(data: AnalyzeChartData) {
+    this.dataSource.next(data);
+  }
+}
+
+interface AnalyzeChartData {
+  metrics?: Metrics[];
+  label: string;
+}

src/app/control-panel/control-panel.component.css

@@ -1,29 +1,10 @@
 #top-panel {
-  margin-left: 195px;
-  margin-right: 195px;
+  margin-left: 10px;
+  margin-right: 10px;
   margin-top: 20px;
   border-radius: 0.2rem;
 }
 
-@media (max-width: 1550px) {
-  #top-panel {
-    margin-left: 95px;
-    margin-right: 85px;
-  }
-}
-@media (max-width: 1350px) {
-  #top-panel {
-    margin-left: 45px;
-    margin-right: 35px;
-  }
-}
-@media (max-width: 1150px) {
-  #top-panel {
-    margin-left: 12px;
-    margin-right: 30px;
-  }
-}
-
 .navbar-toggler {
   border: none;
 }

src/app/control-panel/control-panel.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-control-panel',
   templateUrl: './control-panel.component.html',
-  styleUrls: ['./control-panel.component.css']
+  styleUrls: ['./control-panel.component.css', '../shared-styles.css']
 })
 export class ControlPanelComponent {
 

src/app/item-detail/analyze-charts/analyze-charts.component.html

@@ -9,7 +9,7 @@ <h6 class="card-header bg-transparent">
     </span>
   </h6>
   <div class="card-body">
-    <div class="chart">
+    <div class="chart" id="analyzeChartAnchor">
       <highcharts-chart [Highcharts]="Highcharts" [options]="customChartsOptions" [(update)]="updateLabelChartFlag" [oneToOne]="true"
 
         style="width: 100%; height: 350px; display: block;"></highcharts-chart>

src/app/item-detail/analyze-charts/analyze-charts.component.ts

@@ -2,13 +2,14 @@ import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core'
 import { customChartSettings } from 'src/app/graphs/item-detail';
 import * as Highcharts from 'highcharts';
 import { ItemsApiService } from 'src/app/items-api.service';
+import {AnalyzeChartService} from '../../analyze-chart.service';
 
 @Component({
   selector: 'app-analyze-charts',
   templateUrl: './analyze-charts.component.html',
   styleUrls: ['./analyze-charts.component.css', '../item-detail.component.scss']
 })
-export class AnalyzeChartsComponent implements OnInit, OnChanges {
+export class AnalyzeChartsComponent implements OnInit {
 
   @Input() params: { projectName: string, scenarioName: string, id: string };
   @Input() chartLines: ChartLines;
@@ -30,7 +31,8 @@ export class AnalyzeChartsComponent implements OnInit, OnChanges {
   preloadedSeries;
 
   constructor(
-    private itemApiService: ItemsApiService
+    private itemApiService: ItemsApiService,
+    private analyzeChartService: AnalyzeChartService
   ) {
   }
 
@@ -44,14 +46,27 @@ export class AnalyzeChartsComponent implements OnInit, OnChanges {
       this.updateChart(_);
       this.preloadedSeries = _;
     });
-  }
+    this.analyzeChartService.currentData.subscribe(data => {
+      let chartLines;
+      if (data) {
+        const { label, metrics } = data;
+        if (metrics && metrics.length > 0) {
+          chartLines = metrics.map(_ => ({ name: label, metric: _ }));
+        } else  {
+          // add all available lines
+          const labelLines = [];
+          this.chartLines.labels.forEach((value, key) => {
+            const labelFound = value.find((_) => _.name === data.label);
+            if (labelFound) {
+              labelLines.push({ name: data.label, metric: key });
+            }
+          });
+          chartLines = labelLines;
+        }
+        this.updateChart(chartLines);
+      }
+    });
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.showPerformanceAnalysisLines && changes.showPerformanceAnalysisLines.currentValue) {
-      const { label, metrics } = changes.showPerformanceAnalysisLines.currentValue;
-      const chartLines = metrics.map(_ => ({ name: label, metric: _ }));
-      this.updateChart(chartLines);
-    }
   }
 
   chartUpdated(event: [{ name: string, metric: string }]) {

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

@@ -64,7 +64,7 @@
 
       <div class="row" *ngIf="itemData.analysisEnabled">
         <div class="col">
-          <app-performance-analysis [itemData]="itemData" [labelsChartLines]="chartLines.labels" (overallChartChange)="toggleThroughputBand($event)" (analyzeChartChange)="focusOnLabel($event)">
+          <app-performance-analysis [itemData]="itemData" [labelsChartLines]="chartLines.labels" (overallChartChange)="toggleThroughputBand($event)">
           </app-performance-analysis>
         </div>
 
@@ -349,7 +349,7 @@ <h6 class="card-header bg-transparent">SUT Statistics <span class="compare">
     </div>
     <div class="row" *ngIf="itemData">
       <div class="col">
-        <app-request-stats-compare [itemData]="itemData" [isAnonymous]="isAnonymous" [params]="itemParams" [externalSearchTerm]="externalSearchTerm"></app-request-stats-compare>
+        <app-request-stats-compare [itemData]="itemData" [isAnonymous]="isAnonymous" [params]="itemParams"></app-request-stats-compare>
       </div>
     </div>
   </div>

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

@@ -24,6 +24,7 @@ import { bytesToMbps, roundNumberTwoDecimals } from './calculations';
 import { logScaleButton } from '../graphs/log-scale-button';
 import { ItemStatusValue } from './item-detail.model';
 import {Metrics} from './metrics';
+import {AnalyzeChartService} from '../analyze-chart.service';
 
 @Component({
   selector: 'app-item-detail',
@@ -70,7 +71,8 @@ export class ItemDetailComponent implements OnInit {
     private itemsService: ItemsApiService,
     private spinner: NgxSpinnerService,
     private sharedMainBarService: SharedMainBarService,
-    private toastr: ToastrService
+    private toastr: ToastrService,
+    private analyzeChartService: AnalyzeChartService
   ) {
     this.Math = Math;
   }
@@ -107,6 +109,11 @@ export class ItemDetailComponent implements OnInit {
         this.generateCharts();
         this.spinner.hide();
       });
+    this.analyzeChartService.currentData.subscribe(data => {
+      if (data) {
+        this.activeId = 2;
+      }
+    });
   }
 
   private getChartLines() {

src/app/item-detail/performance-analysis/performance-analysis.component.css

@@ -4,5 +4,5 @@
 
 .perf-analysis-table {
   margin-top: 10px;
-  line-height: 0.3rem;
+  line-height: 0.4rem;
 }

src/app/item-detail/performance-analysis/performance-analysis.component.html

@@ -35,7 +35,7 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
               </thead>
               <tbody>
                 <tr class="d-flex" *ngFor="let _ of mf.data">
-                  <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showOnePercResponseTimeInChart(_.label)"><i class="fas fa-search-plus fa-lg"></i></a></td>
+                  <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showOnePercResponseTimeInChart(_.label, 'analyzeChartAnchor')"><i class="fas fa-search-location fa-lg"></i></a></td>
                   <td class="border-0 col-3">{{_.onePerc}}</td>
                   <td class="border-0 col-3">{{_.p99}}</td>
                   <td class="border-0 col-2">{{_.avgResponseTime}}</td>
@@ -74,7 +74,7 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
             </thead>
             <tbody>
               <tr class="d-flex" *ngFor="let _ of mf.data">
-                <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showSteadyResponseTimeInChart(_.label)"><i class="fas fa-search-plus fa-lg"></i></a></td>
+                <td class="border-0 col-4">{{_.label}} <a class="jtl-a-primary" *ngIf="_.hasChartLines" (click)="showSteadyResponseTimeInChart(_.label, 'analyzeChartAnchor')"><i class="fas fa-search-location fa-lg"></i></a></td>
                 <td class="border-0 col-3">{{_.variability}}</td>
                 <td class="border-0 col-3">{{_.minResponseTime}}</td>
                 <td class="border-0 col-2">{{_.avgResponseTime}}</td>

src/app/item-detail/performance-analysis/performance-analysis.component.ts

@@ -1,6 +1,8 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {Metrics} from '../metrics';
+import {AnalyzeChartService} from '../../analyze-chart.service';
+import {DOCUMENT} from '@angular/common';
 
 @Component({
   selector: 'app-performance-analysis',
@@ -19,7 +21,6 @@ export class PerformanceAnalysisComponent implements OnInit {
   @Input() itemData;
   @Input() labelsChartLines;
   @Output() overallChartChange = new EventEmitter<{}>();
-  @Output() analyzeChartChange = new EventEmitter<{}>();
 
 
   perfAnalysis = {
@@ -44,7 +45,7 @@ export class PerformanceAnalysisComponent implements OnInit {
   foldedBottom = 'closed';
   Math: any;
 
-  constructor() {
+  constructor(private analyzeChartService: AnalyzeChartService) {
     this.Math = Math;
 
   }
@@ -157,18 +158,25 @@ export class PerformanceAnalysisComponent implements OnInit {
 
   }
 
-  showSteadyResponseTimeInChart(label: string) {
+  showSteadyResponseTimeInChart(label: string, anchorElement: string) {
     this.showLabelInChart([Metrics.ResponseTimeAvg, Metrics.ResponseTimeMin], label);
-
+    const el = document.getElementById(anchorElement);
+    setTimeout(() => {
+      el.scrollIntoView({behavior: 'smooth'});
+    });
   }
 
-  showOnePercResponseTimeInChart(label: string) {
+  showOnePercResponseTimeInChart(label: string, anchorElement: string) {
     this.showLabelInChart([Metrics.ResponseTimeAvg, Metrics.ResponseTimeP99], label);
+    const el = document.getElementById(anchorElement);
+    setTimeout(() => {
+      el.scrollIntoView({behavior: 'smooth'});
+    });
   }
 
 
   private showLabelInChart(metrics: Metrics[], label: string) {
-    this.analyzeChartChange.emit({ label, metrics });
+    this.analyzeChartService.changeMessage({ metrics, label });
   }
 
   private hasLabelChart(metrics: Metrics[], label: string) {

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

@@ -1 +1,3 @@
-
+.label-focus {
+  margin-left: 5px;
+}

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

@@ -36,6 +36,9 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
       </div>
       <input class="form-control" id="label-filter" type="search" placeholder="label"
         (keyup)='search($event.target.value)' [value]="externalSearchTerm">
+      <button type="button" class="btn bg-transparent jtl-no-glow" style="margin-left: -40px; z-index: 100;" (click)="clearSearch()">
+        <i class="fa fa-times"></i></button>
+
     </div>
     <div class="labels-detail table-responsive">
       <table class="table" [mfData]="labelsData" #mf="mfDataTable">
@@ -72,7 +75,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
               <mfDefaultSorter by="bytes">mbps</mfDefaultSorter>
             </th>
             <th scope="col" class="hd jtl-head-color">
-              <mfDefaultSorter by="errorRate">error rate</mfDefaultSorter>
+              <mfDefaultSorter by="errorRate">errors</mfDefaultSorter>
             </th>
             <th scope="col" class="hd jtl-head-color">
             </th>
@@ -82,7 +85,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
         </thead>
         <tbody>
           <tr *ngFor="let _ of mf.data">
-            <td>{{_.label}}</td>
+            <td>{{_.label}} </td>
             <td>{{_.samples}}</td>
             <td><span [className]="comparedData ? _.avgResponseTime > 0 ? 'value-positive' : 'value-negative' : ''">{{_.avgResponseTime}}</span></td>
             <td><span [className]="comparedData ? _.minResponseTime > 0 ? 'value-positive' : 'value-negative' : ''">{{_.minResponseTime}}</span></td>
@@ -107,6 +110,8 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
               <app-label-trend *ngIf="!isAnonymous"
                 [trendInput]="{ environment: itemData.environment, labelName: _.label }" [params]="params">
               </app-label-trend>
+
+              <a class="jtl-a-primary label-focus" (click)="focusLabel(_.label)"><i class="fas fa-search-location fa-sm"></i></a>
             </td>
           </tr>
         </tbody>