From 5147d601e369b09188f21882668128b1042e7c3e Mon Sep 17 00:00:00 2001
From: Ludek <13610612+ludeknovy@users.noreply.github.com>
Date: Sat, 13 Mar 2021 00:13:10 +0100
Subject: [PATCH] minimum response times detail (#114)

---
 src/app/item-detail/item-detail.component.html | 18 ++++++++++++------
 src/app/item-detail/item-detail.component.scss |  1 -
 src/app/item-detail/item-detail.component.ts   | 14 +++++++++++++-
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
index 46be9c22..9826593e 100644
--- a/src/app/item-detail/item-detail.component.html
+++ b/src/app/item-detail/item-detail.component.html
@@ -107,16 +107,22 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
               <div>
                 <div><i
                     [ngClass]="(perfAnalysis.onePerc.failed===true) ? 'fas fa-exclamation-triangle text-warning' : 'far fa-check-circle text-success'"></i>
-                  Slowest responses</div>
+                  Slowest 1% of responses</div>
                 <div *ngIf="perfAnalysis.onePerc.failed===false" class="perf-analaysis-desc text-secondary">
-                  <small>1% of slowest responses do not have a significant deviation from the average response
+                  <small>The 1% of the slowest responses do not have a significant deviation from the average response
                     time.</small>
                 </div>
                 <div *ngIf="perfAnalysis.onePerc.failed===true" class="perf-analaysis-desc text-secondary">
                   <small>The 1% of response times shows up to {{ perfAnalysis.onePerc.value }}x slower response times
                     than the
-                    average. This might mean a performance issue for some clients and indicates that SUT might have been
-                    overloaded.</small>
+                    average. This might mean a performance issue for some clients and indicates that SUT was most likely
+                    overloaded. </small> <button class="btn btn-sm btn-link-custom jtl-no-glow text-primary" (click)="toggleFoldBottom($event.target)">Show more</button>
+                    <div class="response-time-variability" [@panelState]="foldedBottom">
+                      <div><small>Labels with the highest difference from the average:</small></div>
+                      <div *ngFor="let _ of perfAnalysis.onePerc.failingLabels">
+                        <li><small><strong>{{_.label}}</strong> 1% of the responses were <strong>{{_.onePerc}}x</strong> slower then the average. The 1% of the response time were <strong>{{_.p99}}ms</strong> and slower, while the average was <strong>{{_.avgResponseTime}}ms</strong>.</small></li>
+                      </div>
+                    </div>
                 </div>
               </div>
 
@@ -129,9 +135,9 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
                     {{perfAnalysis.variability.value}}x). The SUT might have been overloaded. </small> <button class="btn btn-sm btn-link-custom jtl-no-glow text-primary" (click)="toggleFoldRT($event.target)">Show more</button>
 
                     <div class="response-time-variability" [@panelState]="folded">
-                      <div><small>Labels with highest variability:</small></div>
+                      <div><small>Labels with the highest variability:</small></div>
                       <div *ngFor="let _ of perfAnalysis.variability.failingLabels">
-                        <li><small><strong>{{_.label}}</strong> shows <strong>{{_.variability}}x</strong> variability, while the minimum reponse time measured was <strong>{{_.minResponseTime}}ms</strong> and the average <strong>{{_.avgResponseTime}}ms</strong>.</small></li>
+                        <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>
 
diff --git a/src/app/item-detail/item-detail.component.scss b/src/app/item-detail/item-detail.component.scss
index 63b82804..cc4fa01d 100644
--- a/src/app/item-detail/item-detail.component.scss
+++ b/src/app/item-detail/item-detail.component.scss
@@ -277,7 +277,6 @@ thead .hd {
 .btn-link-custom {
   font-size: 0.775rem;
   padding: 0;
-  padding-bottom: 1px;
   border-radius: 0.2rem;
 }
 
diff --git a/src/app/item-detail/item-detail.component.ts b/src/app/item-detail/item-detail.component.ts
index 7b33d41e..669278aa 100644
--- a/src/app/item-detail/item-detail.component.ts
+++ b/src/app/item-detail/item-detail.component.ts
@@ -77,6 +77,7 @@ export class ItemDetailComponent implements OnInit {
   };
   toggleThroughputBandFlag = false;
   folded = 'closed';
+  foldedBottom = 'closed';
 
 
   constructor(
@@ -281,6 +282,7 @@ export class ItemDetailComponent implements OnInit {
         onePerc,
         minResponseTime: _.minResponseTime,
         avgResponseTime: _.avgResponseTime,
+        p99: _.n9,
         label: _.label
       });
     });
@@ -299,7 +301,8 @@ export class ItemDetailComponent implements OnInit {
       onePerc: {
         value: onePercSorted[0].onePerc,
         avgResponseTime: onePercSorted[0].onePerc.avgResponseTime,
-        failed: onePercSorted[0].onePerc > 2.5
+        failed: onePercSorted[0].onePerc > 2.5,
+        failingLabels: onePercSorted.filter(_ => _.onePerc > 2.5)
       },
       throughputVariability: this.calculateThroughputVariability()
     };
@@ -382,6 +385,15 @@ export class ItemDetailComponent implements OnInit {
     }
     this.folded = 'open';
     element.textContent = 'Show less';
+  }
 
+  toggleFoldBottom(element) {
+    if (this.foldedBottom === 'open') {
+      this.foldedBottom = 'closed';
+      element.textContent = 'Show more';
+      return;
+    }
+    this.foldedBottom = 'open';
+    element.textContent = 'Show less';
   }
 }