perf analysis response times (#113)

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

@@ -126,7 +126,16 @@ <h6 class="overview-body perf-analysis">Performance Analysis</h6>
                   Steady response time performance</div>
                 <div *ngIf="perfAnalysis.variability.failed===true" class="perf-analaysis-desc text-secondary">
                   <small>Increased variability between the fastest and the average response time was detected (up to
-                    {{perfAnalysis.variability.value}}x). The SUT might have been overloaded.</small>
+                    {{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 *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>
+                      </div>
+                    </div>
+
+
                 </div>
                 <div *ngIf="perfAnalysis.variability.failed===false" class="perf-analaysis-desc text-secondary">
                   <small>The SUT was providing balanced response times across all labels.</small>

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

@@ -284,3 +284,8 @@ thead .hd {
 .perf-analysis {
   padding-bottom: 10px;
 }
+
+.response-time-variability {
+  margin-left: 10px;
+}
+

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

@@ -20,11 +20,19 @@ import { SharedMainBarService } from '../shared-main-bar.service';
 import { ToastrService } from 'ngx-toastr';
 import { ItemStatusValue } from './item-detail.model';
 import { logScaleButton } from '../graphs/log-scale-button';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
 @Component({
   selector: 'app-item-detail',
   templateUrl: './item-detail.component.html',
   styleUrls: ['./item-detail.component.scss', '../shared-styles.css'],
+  animations : [
+    trigger('panelState', [
+      state('closed', style({ height: 0, overflow: 'hidden' })),
+      state('open', style({ height: '*' })),
+      transition('closed <=> open', animate('300ms ease-in-out')),
+    ]),
+  ],
   providers: [DecimalPipe]
 })
 export class ItemDetailComponent implements OnInit {
@@ -68,6 +76,7 @@ export class ItemDetailComponent implements OnInit {
     }
   };
   toggleThroughputBandFlag = false;
+  folded = 'closed';
 
 
   constructor(
@@ -284,7 +293,8 @@ export class ItemDetailComponent implements OnInit {
         value: variabilitySorted[0].variability,
         avgResponseTime: variabilitySorted[0].avgResponseTime,
         minResponseTime: variabilitySorted[0].minResponseTime,
-        failed: variabilitySorted[0].variability > 2.5
+        failed: variabilitySorted[0].variability > 2.5,
+        failingLabels: variabilitySorted.filter(_ => _.variability > 2.5)
       },
       onePerc: {
         value: onePercSorted[0].onePerc,
@@ -362,6 +372,16 @@ export class ItemDetailComponent implements OnInit {
       this.toggleThroughputBandFlag = false;
     }
     this.updateChartFlag = true;
+  }
+
+  toggleFoldRT(element) {
+    if (this.folded === 'open') {
+      this.folded = 'closed';
+      element.textContent = 'Show more';
+      return;
+    }
+    this.folded = 'open';
+    element.textContent = 'Show less';
 
   }
 }