network data overview (#100)

ludeknovy · Mar 4, 2021 · 40b1cbe · 40b1cbe
1 parent dea129c
commit 40b1cbe
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/app/item-detail/item-detail.component.html b/src/app/item-detail/item-detail.component.html
@@ -130,9 +130,9 @@ <h2 *ngIf="itemData.overview.percentil < 1000" class="card-title text-percentil"
                       </h2>
                     </div>
                     <div class="card-footer bg-transparent card-footer-overview">90% Response time</div>
-
                   </div>
                 </div>
+
                 <div class="col-sm">
                   <div class="card">
                     <div class="card-body overview-body">
@@ -152,10 +152,10 @@ <h2 *ngIf="itemData.overview.avgLatency < 1000 && itemData.overview.avgLatency
                         placement="bottom"
                         ngbTooltip="JMeter measures the latency from just before sending the request to just after the first response has been received. Thus the time includes all the processing needed to assemble the request as well as assembling the first part of the response, which in general will be longer than one byte."><i
                           class="far fa-question-circle icon"></i></i></div>
-
                   </div>
                 </div>
-                <div class="col-sm">
+
+                <div class="col-sm" *ngIf="!itemData.overview.bytesPerSecond || itemData.overview.bytesPerSecond === 0">
                   <div class="card">
                     <div class="card-body overview-body">
                       <!-- locust does not provide this metrics-->
@@ -174,9 +174,19 @@ <h2 *ngIf="itemData.overview.avgConnect < 1000 && itemData.overview.avgConnect >
                         placement="bottom"
                         ngbTooltip="JMeter measures the time it took to establish the connection, including SSL handshake. Note that connect time is not automatically subtracted from latency. In case of connection error, the metric will be equal to the time it took to face the error, for example in case of Timeout, it should be equal to connection timeout."><i
                           class="far fa-question-circle icon"></i></i></div>
+                  </div>
+                </div>
 
+                <div class="col-sm" *ngIf="itemData.overview.bytesPerSecond && itemData.overview.bytesPerSecond !== 0">
+                  <div class="card">
+                    <div class="card-body overview-body">
+                      <h2 class="card-title text-latency">{{bytesToMbps(itemData.overview.bytesPerSecond)}} <span class="unit-desc">Mbps</span>
+                      </h2>
+                    </div>
+                    <div class="card-footer bg-transparent card-footer-overview">Network data</div>
                   </div>
                 </div>
+
                 <div class="col-sm">
                   <div class="card">
                     <div class="card-body overview-body">

diff --git a/src/app/item-detail/item-detail.component.ts b/src/app/item-detail/item-detail.component.ts
@@ -242,4 +242,8 @@ export class ItemDetailComponent implements OnInit {
   private roundNumberTwoDecimals = number => {
     return Math.round(number * 100) / 100;
   }
+
+  bytesToMbps(bytes) {
+    return this.roundNumberTwoDecimals(bytes / Math.pow(1024, 2));
+}
 }