Skip to content

Commit

Permalink
padding left fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeknovy
ludeknovy committed Mar 7, 2024
1 parent 3e7e158 commit 0d472e9
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 88 deletions.
17 changes: 10 additions & 7 deletions src/app/item-detail/item-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,13 +69,16 @@
<div class="col">
<div class="card card-shadow error-tolerance-issue">
<div class="card-body">
<h6 class="overview-body perf-analysis">Test failure</h6>
<div *ngIf="validations.zeroErrorValidation === true">
<app-zero-error-tolerance-warning></app-zero-error-tolerance-warning>
</div>
<div *ngIf="validations.minTestDurationValidation === true" class="mt-2">
<app-min-test-duration-warning></app-min-test-duration-warning>
<h6 class="overview-body perf-validations">Test failure</h6>
<div class="perf-validation-content">
<div *ngIf="validations.zeroErrorValidation === true" class="mt-2">
<app-zero-error-tolerance-warning></app-zero-error-tolerance-warning>
</div>
<div *ngIf="validations.minTestDurationValidation === true" class="mt-2">
<app-min-test-duration-warning></app-min-test-duration-warning>
</div>
</div>

</div>
</div>
</div>
Expand Down Expand Up @@ -252,7 +255,7 @@ <h2 class="card-title">{{convertBytesToMbps(itemData.overview.bytesPerSecond) |
<div class="col">
<div class="overview-additional card card-shadow">
<h6 class="card-header bg-white border-0">Summary</h6>
<div class="card-body">
<div class="card-body card-content-padding">
<div class="row ml-2">
<div class="col">
<div class="row">
Expand Down
13 changes: 13 additions & 0 deletions src/app/item-detail/item-detail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@ thead .hd {

.performance-overview-card {
padding-bottom: 0px;
padding-left: 2.2rem;
}

.charts .card-header {
Expand Down Expand Up @@ -313,3 +314,15 @@ thead .hd {
.thread-groups-check {
font-weight: 400;
}

.card-content-padding {
padding-left: 3.2rem;
}

.perf-analysis-content {
padding-left: 1rem;
}

.perf-validation-content {
padding-left: 1.3rem;
}
172 changes: 91 additions & 81 deletions src/app/item-detail/performance-analysis/performance-analysis.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,108 +3,118 @@
[ngClass]="(perfAnalysis.onePerc.failed || perfAnalysis.variability.failed || perfAnalysis.throughputVariability.failed) ? 'performance-analysis-warning' : 'performance-analysis-success'">
<div class="card-body">
<h6 class="overview-body perf-analysis">Performance Analysis</h6>
<div>
<div><i
<div class="perf-analysis-content">
<div>
<div><i
[ngClass]="(perfAnalysis.onePerc.failed===true) ? 'fas fa-exclamation-triangle text-warning' : 'far fa-check-circle text-success'"></i>
Slowest 1% of responses</div>
<div *ngIf="perfAnalysis.onePerc.failed===false" class="perf-analaysis-desc text-secondary">
<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>Increased variability between the 1% of response times and the average was detected (up to {{ perfAnalysis.onePerc.value }}x slower response times ).
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>
Slowest 1% of responses</div>
<div *ngIf="perfAnalysis.onePerc.failed===false" class="perf-analaysis-desc text-secondary">
<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>Increased variability between the 1% of response times and the average was detected (up to {{ perfAnalysis.onePerc.value }}x slower response times ).
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">
<table class="table perf-analysis-table" [mfData]="perfAnalysis.onePerc.failingLabels" #mf="mfDataTable">
<thead>
<tr class="d-flex">
<th scope="col" class="hd col-4 jtl-head-color border-1">
<mfDefaultSorter by="label">label</mfDefaultSorter>
</th>
<th scope="col" class="hd col-3 jtl-head-color border-1">
<mfDefaultSorter by="onePerc">variability [multiple]</mfDefaultSorter>
</th>
<th scope="col" class="hd col-3 jtl-head-color border-1">
<mfDefaultSorter by="p99">slowest 1% [ms]</mfDefaultSorter>
</th>
<th scope="col" class="hd col-2 jtl-head-color border-1">
<mfDefaultSorter by="avgResponseTime">avg [ms]</mfDefaultSorter>
</th>
</tr>
</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, '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>
</tr>
</tbody>
</table>
<table class="table perf-analysis-table" [mfData]="perfAnalysis.onePerc.failingLabels" #mf="mfDataTable">
<thead>
<tr class="d-flex">
<th scope="col" class="hd col-4 jtl-head-color border-1">
<mfDefaultSorter by="label">label</mfDefaultSorter>
</th>
<th scope="col" class="hd col-3 jtl-head-color border-1">
<mfDefaultSorter by="onePerc">variability [multiple]</mfDefaultSorter>
</th>
<th scope="col" class="hd col-3 jtl-head-color border-1">
<mfDefaultSorter by="p99">slowest 1% [ms]</mfDefaultSorter>
</th>
<th scope="col" class="hd col-2 jtl-head-color border-1">
<mfDefaultSorter by="avgResponseTime">avg [ms]</mfDefaultSorter>
</th>
</tr>
</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, '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>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

<div class="perf-analysis-check">
<div><i
<div class="perf-analysis-check">
<div><i
[ngClass]="(perfAnalysis.variability.failed===true) ? 'fas fa-exclamation-triangle text-warning' : 'far fa-check-circle text-success'"></i>
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> <button class="btn btn-sm btn-link-custom jtl-no-glow text-primary" (click)="toggleFoldRT($event.target)">Show more</button>
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> <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">
<table class="table perf-analysis-table" [mfData]="perfAnalysis.variability.failingLabels" #mf="mfDataTable">
<thead>
<tr class="d-flex">
<th scope="col" class="col-4 hd jtl-head-color border-1">
<mfDefaultSorter by="label">label</mfDefaultSorter>
</th>
<th scope="col" class="col-3 hd jtl-head-color border-1">
<mfDefaultSorter by="variability">variability [multiple]</mfDefaultSorter>
</th>
<th scope="col" class="col-3 hd jtl-head-color border-1">
<mfDefaultSorter by="minResponseTime">min [ms]</mfDefaultSorter>
</th>
<th scope="col" class="col-2 hd jtl-head-color border-1">
<mfDefaultSorter by="avgResponseTime">avg [ms]</mfDefaultSorter>
</th>
</tr>
<tr class="d-flex">
<th scope="col" class="col-4 hd jtl-head-color border-1">
<mfDefaultSorter by="label">label</mfDefaultSorter>
</th>
<th scope="col" class="col-3 hd jtl-head-color border-1">
<mfDefaultSorter by="variability">variability [multiple]</mfDefaultSorter>
</th>
<th scope="col" class="col-3 hd jtl-head-color border-1">
<mfDefaultSorter by="minResponseTime">min [ms]</mfDefaultSorter>
</th>
<th scope="col" class="col-2 hd jtl-head-color border-1">
<mfDefaultSorter by="avgResponseTime">avg [ms]</mfDefaultSorter>
</th>
</tr>
</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, '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>
</tr>
<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, '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>
</tr>
</tbody>
</table>
</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>
</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>
</div>
</div>

<div class="perf-analysis-check">
<div><i
<div class="perf-analysis-check">
<div><i
[ngClass]="(perfAnalysis.throughputVariability.failed===true) ? 'fas fa-exclamation-triangle text-warning' : 'far fa-check-circle text-success'"></i>
Steady throughput performance</div>
<div *ngIf="perfAnalysis.throughputVariability.failed===true"
class="perf-analaysis-desc text-secondary">
<small>Significant drops in throughput performance were detected (up to
{{perfAnalysis.throughputVariability.value}}%). The SUT might have been overloaded. <button
class="btn btn-sm btn-link-custom jtl-no-glow text-primary"
(click)="toggleThroughputBand($event.target)">Display in chart</button></small>
</div>
<div *ngIf="perfAnalysis.throughputVariability.failed===false"
class="perf-analaysis-desc text-secondary">
<small>SUT was providing balanced throughput.</small>
Steady throughput performance</div>
<div *ngIf="perfAnalysis.throughputVariability.failed===true"
class="perf-analaysis-desc text-secondary">
<small>Significant drops in throughput performance were detected (up to
{{perfAnalysis.throughputVariability.value}}%). The SUT might have been overloaded. <button
class="btn btn-sm btn-link-custom jtl-no-glow text-primary"
(click)="toggleThroughputBand($event.target)">Display in chart</button></small>
</div>
<div *ngIf="perfAnalysis.throughputVariability.failed===false"
class="perf-analaysis-desc text-secondary">
<small>SUT was providing balanced throughput.</small>
</div>
</div>



</div>





</div>
</div>

0 comments on commit 0d472e9

Please sign in to comment.