Skip to content

Commit

Permalink
dashboard revamp (#55)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ludeknovy
ludeknovy authored Mar 18, 2020
1 parent 6b7cfbd commit 1bae07c
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 98 deletions.
23 changes: 14 additions & 9 deletions src/app/dashboard/dashboard.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,19 +72,24 @@ tbody tr:hover {
min-width: 100%;
}

.stats {
margin-bottom: 20px;
.unit-desc {
font-size: 20px;
}

.statistic .card-header {
background-color: #316d94;
color: white;
.card-footer-stats {
border-top: none;
padding-top: 0px;
color: #6c757d;
font-size: 13px;
}

.statistic .card-body {
.stats-body {
color: #316d94;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
}

.unit-desc {
font-size: 20px;
}
.stats {
margin-bottom: 20px;
}
182 changes: 99 additions & 83 deletions src/app/dashboard/dashboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,116 @@
<div class="dashboard content-container">

<div class="container-fluid">
<div class="row statistic" *ngIf="overallStats">
<div class="col">
<div class="card stats">
<h6 class="card-header">Total test runs</h6>
<div class="card-body">
<h2 class="card-title">{{overallStats.totalRunCount}}</h2>

</div>
</div>
</div>
<div class="stats">
<div class="row" *ngIf="overallStats">
<div class="col">
<div class="card">
<div class="card-body">
<div class="row">

<div class="col">
<div class="card stats">
<h6 class="card-header">Average test duration</h6>
<div class="card-body">
<h2 *ngIf="overallStats.avgDuration >= 60" class="card-title">{{
Math.round((overallStats.avgDuration / 60) * 100) / 100}} <span class="unit-desc">h</span>
</h2>
<h2 *ngIf="overallStats.avgDuration < 60" class="card-title">{{
overallStats.avgDuration}} <span class="unit-desc">m</span></h2>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body stats-body">
<h2 class="card-title">{{overallStats.totalRunCount}}</h2>
</div>
<div class="card-footer bg-transparent card-footer-stats">Total test runs</div>
</div>
</div>

<div class="col">
<div class="card stats">
<h6 class="card-header">Average number of VU</h6>
<div class="card-body">
<h2 class="card-title">{{overallStats.avgVu}}</h2>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body stats-body">
<h2 *ngIf="overallStats.avgDuration >= 60" class="card-title">{{
Math.round((overallStats.avgDuration / 60) * 100) / 100}} <span class="unit-desc">h</span>
</h2>
<h2 *ngIf="overallStats.avgDuration < 60" class="card-title">{{
overallStats.avgDuration}} <span class="unit-desc">m</span></h2>
</div>
<div class="card-footer bg-transparent card-footer-stats">Average test duration</div>

</div>
</div>

<div class="col">
<div class="card">
<div class="card-body stats-body">
<h2 class="card-title">{{overallStats.avgVu}}</h2>
</div>
<div class="card-footer bg-transparent card-footer-stats">Average number of VU</div>

</div>
</div>

<div class="col">
<div class="card stats">
<h6 class="card-header">Total duration</h6>
<div class="card-body">
<h2 *ngIf="overallStats.totalDuration >= 60" class="card-title">
{{Math.round((overallStats.totalDuration / 60) * 100) / 100}} <span class="unit-desc">h</span>
</h2>
<h2 *ngIf="overallStats.totalDuration < 60" class="card-title">{{
overallStats.totalDuration}} <span class="unit-desc">m</span></h2>
<div class="col">
<div class="card">
<div class="card-body stats-body">
<h2 *ngIf="overallStats.totalDuration >= 60" class="card-title">
{{Math.round((overallStats.totalDuration / 60) * 100) / 100}} <span class="unit-desc">h</span>
</h2>
<h2 *ngIf="overallStats.totalDuration < 60" class="card-title">{{
overallStats.totalDuration}} <span class="unit-desc">m</span></h2>
</div>
<div class="card-footer bg-transparent card-footer-stats">Total duration</div>

</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="row">
<div class="col">
<div class="card recent-runs">
<h6 class="card-header">Recent Test Runs</h6>
<div class="card-body ">
<div class="table-responsive">
<table class="table items">
<thead>
<tr>
<th scope="col" class="head">scenario</th>
<th scope="col" class="head">project name</th>
<th scope="col" class="head">environment</th>
<th scope="col" class="head">start time</th>
<th scope="col" class="head">status</th>
</tr>
</thead>
<tbody>
<tr *ngIf="!latestItems || latestItems.length === 0">
<td colspan="4" class="text-muted no-data">No Data...</td>
</tr>
<tr *ngFor="let _ of latestItems" (click)="open(_.projectName, _.name, _.id)">
<td class="ellipsis">
{{_.name}}
</td>
<td>
{{_.projectName}}
</td>
<td>
{{_.environment}}
</td>
<td class="ellipsis">
{{_.startTime | date:'d. L. yyyy H:mm'}}
</td>
<td>
<span *ngIf="_.status === '0'" title="Passed"><i class="fas fa-check-circle text-success status-icon"></i></span>
<span *ngIf="_.status === '1'" title="Error/Terminated"><i class="fas fa-minus-circle text-secondary status-icon"></i></span>
<span *ngIf="_.status === '2'" title="Terminated"><i class="fas fa-minus-circle text-secondary status-icon"></i></span>
<span *ngIf="_.status === '3'" title="Failed"><i class="fas fa-minus-circle text-danger status-icon"></i></span>
<span *ngIf="_.status === '10'" title="Status not set"><i class="far fa-circle text-secondary status-icon"></i></span>
</td>
</tr>
</tbody>
</table>

<div class="recent-runs">
<div class="row">
<div class="col">
<div class="card recent-runs">
<h6 class="card-header">Recent Test Runs</h6>
<div class="card-body ">
<div class="table-responsive">
<table class="table items">
<thead>
<tr>
<th scope="col" class="head">scenario</th>
<th scope="col" class="head">project name</th>
<th scope="col" class="head">environment</th>
<th scope="col" class="head">start time</th>
<th scope="col" class="head">status</th>
</tr>
</thead>
<tbody>
<tr *ngIf="!latestItems || latestItems.length === 0">
<td colspan="4" class="text-muted no-data">No Data...</td>
</tr>
<tr *ngFor="let _ of latestItems" (click)="open(_.projectName, _.name, _.id)">
<td class="ellipsis">
{{_.name}}
</td>
<td>
{{_.projectName}}
</td>
<td>
{{_.environment}}
</td>
<td class="ellipsis">
{{_.startTime | date:'d. L. yyyy H:mm'}}
</td>
<td>
<span *ngIf="_.status === '0'" title="Passed"><i class="fas fa-check-circle text-success status-icon"></i></span>
<span *ngIf="_.status === '1'" title="Error/Terminated"><i class="fas fa-minus-circle text-secondary status-icon"></i></span>
<span *ngIf="_.status === '2'" title="Terminated"><i class="fas fa-minus-circle text-secondary status-icon"></i></span>
<span *ngIf="_.status === '3'" title="Failed"><i class="fas fa-minus-circle text-danger status-icon"></i></span>
<span *ngIf="_.status === '10'" title="Status not set"><i class="far fa-circle text-secondary status-icon"></i></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion src/app/item-detail/item-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ <h2 class="card-title text-belize">{{itemData.overview.throughput}} <span
class="unit-desc">hits/s</span>
</h2>
</div>
<div class="card-footer bg-transparent card-footer-overview">Throughput <i class="ttp"
<div class="card-footer bg-transparent card-footer-overview">Throughput <i
placement="bottom" ngbTooltip="Throughput is calculated as requests/unit of time. The time is calculated from the start of the first sample to the end of the last sample. This includes any intervals between samples, as it is supposed to represent the load on the server.
The formula is: Throughput = (number of requests) / (total time)."><i
class="far fa-question-circle icon"></i></i></div>
Expand Down
6 changes: 1 addition & 5 deletions src/app/item-detail/item-detail.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,10 +206,6 @@ thead .hd {
color: white;
}

.ttp {
float: right;
}

.overview-info .card-title {
font-size: 2.1rem;
}
Expand All @@ -229,7 +225,7 @@ thead .hd {
border-top: none;
padding-top: 0px;
color: #6c757d;
font-size: 14px;
font-size: 13px;
}

.performance-overview-card {
Expand Down

0 comments on commit 1bae07c

Please sign in to comment.