perf analysis focus (#154)

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+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';
@@ -8,11 +8,12 @@ import { ItemsApiService } from 'src/app/items-api.service';
   templateUrl: './analyze-charts.component.html',
   styleUrls: ['./analyze-charts.component.css', '../item-detail.component.scss']
 })
-export class AnalyzeChartsComponent implements OnInit {
+export class AnalyzeChartsComponent implements OnInit, OnChanges {
 
   @Input() params: { projectName: string, scenarioName: string, id: string };
   @Input() chartLines: ChartLines;
   @Input() isAnonymous: boolean;
+  @Input() showPerformanceAnalysisLines;
   Highcharts: typeof Highcharts = Highcharts;
   customChartsOptions = {
     ...customChartSettings(), series: []
@@ -45,6 +46,14 @@ export class AnalyzeChartsComponent implements OnInit {
     });
   }
 
+  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 }]) {
     this.updateChart(event);
     this.saveChartSettings(event);

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" (overallChartChange)="toggleThroughputBand($event)">
+          <app-performance-analysis [itemData]="itemData" [labelsChartLines]="chartLines.labels" (overallChartChange)="toggleThroughputBand($event)" (analyzeChartChange)="focusOnLabel($event)">
           </app-performance-analysis>
         </div>
 
@@ -248,8 +248,8 @@ <h2 class="card-title">{{itemData.overview.errorRate}} <span
 
     <div class="row middle-control">
       <div class="col">
-        <ul ngbNav #nav="ngbNav" class="nav-tabs justify-content-center" [destroyOnHide]="false">
-          <li ngbNavItem>
+        <ul ngbNav #nav="ngbNav" class="nav-tabs justify-content-center" [destroyOnHide]="false" [(activeId)]="activeId" >
+          <li ngbNavItem [ngbNavItem]="1">
             <a ngbNavLink class="nav-link bg-transparent">Overview charts</a>
             <ng-template ngbNavContent>
               <div class="row charts chart-fix">
@@ -273,12 +273,12 @@ <h6 class="card-header bg-transparent">Overall Chart</h6>
               </div>
             </ng-template>
           </li>
-          <li ngbNavItem>
+          <li ngbNavItem [ngbNavItem]="2">
             <a ngbNavLink class="nav-link bg-transparent">Analyze charts</a>
             <ng-template ngbNavContent>
               <div class="row chart-fix charts">
                 <div class="col">
-                  <app-analyze-charts [chartLines]="chartLines" [params]="itemParams" [isAnonymous]="isAnonymous"></app-analyze-charts>
+                  <app-analyze-charts [chartLines]="chartLines" [params]="itemParams" [isAnonymous]="isAnonymous" [showPerformanceAnalysisLines]="performanceAnalysisLines"></app-analyze-charts>
                 </div>
               </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"></app-request-stats-compare>
+        <app-request-stats-compare [itemData]="itemData" [isAnonymous]="isAnonymous" [params]="itemParams" [externalSearchTerm]="externalSearchTerm"></app-request-stats-compare>
       </div>
     </div>
   </div>

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

@@ -23,6 +23,7 @@ import { ToastrService } from 'ngx-toastr';
 import { bytesToMbps, roundNumberTwoDecimals } from './calculations';
 import { logScaleButton } from '../graphs/log-scale-button';
 import { ItemStatusValue } from './item-detail.model';
+import {Metrics} from './metrics';
 
 @Component({
   selector: 'app-item-detail',
@@ -60,6 +61,9 @@ export class ItemDetailComponent implements OnInit {
     labels: new Map(),
   };
   labelCharts = new Map();
+  activeId = 1;
+  performanceAnalysisLines = null;
+  externalSearchTerm = null;
 
   constructor(
     private route: ActivatedRoute,
@@ -121,13 +125,13 @@ export class ItemDetailComponent implements OnInit {
         return [_[0], bytesToMbps(_[1])];
       });
       const networkLine = { ...networkLineSettings, data: networkMbps };
-      this.chartLines.overall.set('Network', networkLine);
+      this.chartLines.overall.set(Metrics.Network, networkLine);
     }
 
-    this.chartLines.overall.set('Response Time [avg]', overallTimeResponse);
-    this.chartLines.overall.set('Threads', threadLine);
-    this.chartLines.overall.set('Error rate', errorLine);
-    this.chartLines.overall.set('Throughput', throughputLine);
+    this.chartLines.overall.set(Metrics.ResponseTimeAvg, overallTimeResponse);
+    this.chartLines.overall.set(Metrics.Threads, threadLine);
+    this.chartLines.overall.set(Metrics.ErrorRate, errorLine);
+    this.chartLines.overall.set(Metrics.Throughput, throughputLine);
 
     if (networkV2) {
       const networkMbps = networkV2.map((_) => {
@@ -138,37 +142,37 @@ export class ItemDetailComponent implements OnInit {
         ...commonGraphSettings('mbps'),
         series: [...networkMbps, ...threadLine], ...logScaleButton
       };
-      this.chartLines.labels.set('Network', networkMbps);
-      this.labelCharts.set('Network', networkChartOptions);
+      this.chartLines.labels.set(Metrics.Network, networkMbps);
+      this.labelCharts.set(Metrics.Network, networkChartOptions);
     }
 
     if (minResponseTime) {
-      this.chartLines.labels.set('Response Time [min]', minResponseTime);
-      this.labelCharts.set('Response Time [min]', { ...commonGraphSettings('ms'), series: [...minResponseTime, ...threadLine]});
+      this.chartLines.labels.set(Metrics.ResponseTimeMin, minResponseTime);
+      this.labelCharts.set(Metrics.ResponseTimeMin, { ...commonGraphSettings('ms'), series: [...minResponseTime, ...threadLine]});
     }
     if (maxResponseTime) {
-      this.chartLines.labels.set('Response Time [max]', maxResponseTime);
-      this.labelCharts.set('Response Time [max]', { ...commonGraphSettings('ms'), series: [...maxResponseTime, ...threadLine]});
+      this.chartLines.labels.set(Metrics.ResponseTimeMax, maxResponseTime);
+      this.labelCharts.set(Metrics.ResponseTimeMax, { ...commonGraphSettings('ms'), series: [...maxResponseTime, ...threadLine]});
     }
     if (percentile90) {
-      this.chartLines.labels.set('Response Time [P90]', percentile90);
-      this.labelCharts.set('Response Time [P90]', { ...commonGraphSettings('ms'), series: [...percentile90, ...threadLine]});
+      this.chartLines.labels.set(Metrics.ResponseTimeP90, percentile90);
+      this.labelCharts.set(Metrics.ResponseTimeP90, { ...commonGraphSettings('ms'), series: [...percentile90, ...threadLine]});
     }
     if (percentile95) {
-      this.chartLines.labels.set('Response Time [P95]', percentile95);
-      this.labelCharts.set('Response Time [P95]', { ...commonGraphSettings('ms'), series: [...percentile95, ...threadLine]});
+      this.chartLines.labels.set(Metrics.ResponseTimeP95, percentile95);
+      this.labelCharts.set(Metrics.ResponseTimeP95, { ...commonGraphSettings('ms'), series: [...percentile95, ...threadLine]});
     }
     if (percentile99) {
-      this.chartLines.labels.set('Response Time [P99]', percentile99);
-      this.labelCharts.set('Response Time [P99]', { ...commonGraphSettings('ms'), series: [...percentile99, ...threadLine]});
+      this.chartLines.labels.set(Metrics.ResponseTimeP99, percentile99);
+      this.labelCharts.set(Metrics.ResponseTimeP99, { ...commonGraphSettings('ms'), series: [...percentile99, ...threadLine]});
     }
 
-    this.chartLines.labels.set('Response Time [avg]', responseTime);
-    this.labelCharts.set('Response Time [avg]', { ...commonGraphSettings('ms'), series: [...responseTime, ...threadLine]});
+    this.chartLines.labels.set(Metrics.ResponseTimeAvg, responseTime);
+    this.labelCharts.set(Metrics.ResponseTimeAvg, { ...commonGraphSettings('ms'), series: [...responseTime, ...threadLine]});
 
 
-    this.chartLines.labels.set('Throughput', throughput);
-    this.labelCharts.set('Throughput', { ...commonGraphSettings('hits/s'), series: [...throughput, ...threadLine]});
+    this.chartLines.labels.set(Metrics.Throughput, throughput);
+    this.labelCharts.set(Metrics.Throughput, { ...commonGraphSettings('hits/s'), series: [...throughput, ...threadLine]});
 
 
   }
@@ -253,4 +257,9 @@ export class ItemDetailComponent implements OnInit {
     return bytesToMbps(bytes);
   }
 
+  focusOnLabel($event: { label: string, metrics: Metrics[]}) {
+    this.activeId = 2;
+    this.performanceAnalysisLines = $event;
+    this.externalSearchTerm = $event.label;
+  }
 }

src/app/item-detail/metrics.ts

@@ -0,0 +1,12 @@
+export enum Metrics {
+  Network = 'Network',
+  ErrorRate = 'Error Rate',
+  Threads = 'Threads',
+  Throughput = 'Throughput',
+  ResponseTimeAvg = 'Response Time [avg]',
+  ResponseTimeMin = 'Response Time [min]',
+  ResponseTimeMax = 'Response Time [max]',
+  ResponseTimeP90 = 'Response Time [P90]',
+  ResponseTimeP95 = 'Response Time [P95]',
+  ResponseTimeP99 = 'Response Time [P99]',
+}

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

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

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}}</td>
+                  <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-3">{{_.onePerc}}</td>
                   <td class="border-0 col-3">{{_.p99}}</td>
                   <td class="border-0 col-2">{{_.avgResponseTime}}</td>
@@ -74,18 +74,13 @@ <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}}</td>
+                <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-3">{{_.variability}}</td>
                 <td class="border-0 col-3">{{_.minResponseTime}}</td>
                 <td class="border-0 col-2">{{_.avgResponseTime}}</td>
-
               </tr>
-
             </tbody>
           </table>
-          <!-- <div *ngFor="let _ of perfAnalysis.variability.failingLabels">
-            <li><small><strong>{{_.label}}</strong> shows <strong>{{_.variability}}x</strong> variability. The minimum reponse time measured was <strong>{{_.minResponseTime}}ms</strong> and the average <strong>{{_.avgResponseTime}}ms</strong>.</small></li>
-          </div> -->
         </div>
 
 

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

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Metrics} from '../metrics';
 
 @Component({
   selector: 'app-performance-analysis',
@@ -16,7 +17,9 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
 export class PerformanceAnalysisComponent implements OnInit {
 
   @Input() itemData;
+  @Input() labelsChartLines;
   @Output() overallChartChange = new EventEmitter<{}>();
+  @Output() analyzeChartChange = new EventEmitter<{}>();
 
 
   perfAnalysis = {
@@ -67,7 +70,8 @@ export class PerformanceAnalysisComponent implements OnInit {
         minResponseTime: _.minResponseTime,
         avgResponseTime: _.avgResponseTime,
         p99: _.n9,
-        label: _.label
+        label: _.label,
+        hasChartLines: this.hasLabelChart([Metrics.ResponseTimeMin, Metrics.ResponseTimeAvg, Metrics.ResponseTimeP99], _.label)
       });
     });
 
@@ -153,5 +157,24 @@ export class PerformanceAnalysisComponent implements OnInit {
 
   }
 
+  showSteadyResponseTimeInChart(label: string) {
+    this.showLabelInChart([Metrics.ResponseTimeAvg, Metrics.ResponseTimeMin], label);
 
+  }
+
+  showOnePercResponseTimeInChart(label: string) {
+    this.showLabelInChart([Metrics.ResponseTimeAvg, Metrics.ResponseTimeP99], label);
+  }
+
+
+  private showLabelInChart(metrics: Metrics[], label: string) {
+    this.analyzeChartChange.emit({ label, metrics });
+  }
+
+  private hasLabelChart(metrics: Metrics[], label: string) {
+    return metrics.every(_ => {
+      const chartMetric = this.labelsChartLines.get(_);
+      return chartMetric.find(__ => __.name === label);
+    });
+  }
 }

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

@@ -35,7 +35,7 @@ <h6 class="card-header bg-transparent">Request Statistics <span class="compare">
         <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
       </div>
       <input class="form-control" id="label-filter" type="search" placeholder="label"
-        (keyup)='search($event.target.value)'>
+        (keyup)='search($event.target.value)' [value]="externalSearchTerm">
     </div>
     <div class="labels-detail table-responsive">
       <table class="table" [mfData]="labelsData" #mf="mfDataTable">

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

@@ -1,16 +1,17 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { ToastrService } from 'ngx-toastr';
-import { ItemsApiService } from 'src/app/items-api.service';
-import { ItemParams } from 'src/app/scenario/item-controls/item-controls.model';
-import { bytesToMbps, roundNumberTwoDecimals } from '../calculations';
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
+import {ToastrService} from 'ngx-toastr';
+import {ItemsApiService} from 'src/app/items-api.service';
+import {ItemParams} from 'src/app/scenario/item-controls/item-controls.model';
+import {bytesToMbps, roundNumberTwoDecimals} from '../calculations';
 
 @Component({
   selector: 'app-request-stats-compare',
   templateUrl: './request-stats-compare.component.html',
   styleUrls: ['./request-stats-compare.component.css', '../item-detail.component.scss']
 })
-export class RequestStatsCompareComponent implements OnInit {
+export class RequestStatsCompareComponent implements OnInit, OnChanges {
 
+  @Input() externalSearchTerm: string;
   @Input() itemData;
   @Input() isAnonymous: boolean;
   @Input() params: ItemParams;
@@ -35,6 +36,12 @@ export class RequestStatsCompareComponent implements OnInit {
     this.labelsData = this.itemData.statistics;
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.externalSearchTerm) {
+      this.search(changes.externalSearchTerm.currentValue);
+    }
+  }
+
   resetStatsData() {
     this.comparedData = null;
     this.labelsData = this.itemData.statistics;
@@ -55,7 +62,7 @@ export class RequestStatsCompareComponent implements OnInit {
   itemToCompare(data) {
     this.resetStatsData();
     this.comparingData = data;
-    this.comparedMetadata = { id: data.id, maxVu: data.maxVu };
+    this.comparedMetadata = {id: data.id, maxVu: data.maxVu};
     if (data.maxVu !== this.itemData.overview.maxVu) {
       this.comparisonWarning.push(`VU do differ ${this.itemData.overview.maxVu} vs. ${data.maxVu}`);
     }
@@ -108,11 +115,11 @@ export class RequestStatsCompareComponent implements OnInit {
       this.params.projectName,
       this.params.scenarioName,
       id).subscribe(_ => this.itemToCompare({
-        statistics: _.statistics,
-        maxVu: _.overview.maxVu,
-        environment: _.environment,
-        id
-      }));
+      statistics: _.statistics,
+      maxVu: _.overview.maxVu,
+      environment: _.environment,
+      id
+    }));
   }
 
   showComparisonWarnings() {

src/styles.scss

@@ -139,6 +139,14 @@ a:hover {
   color: white;
 }
 
+.jtl-a-primary{
+  color: #4b7cf3 !important;
+}
+.jtl-a-primary:hover{
+  color: #5f88ee !important;
+
+}
+
 .modal-footer {
   border-top: none;
 }