From 2879ee49a27378c263c426fceb51b5dde719aaa2 Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Tue, 4 Mar 2025 14:37:57 +0100
Subject: [PATCH] finish emplement html and add styling
---
.../dashboard-statistics.component.html | 124 ++++++++++--------
.../dashboard-statistics.component.scss | 96 +++++++++++---
.../dashboard-statistics.component.ts | 8 ++
.../mocks/dashboard-statistics.json | 6 +-
4 files changed, 157 insertions(+), 77 deletions(-)
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.html b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
index 5a6fc81..75ab2a0 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.html
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
@@ -2,72 +2,84 @@
@let statistics = dashboardStatistics | async;
@if (!statistics) {
<div class="statistics__loader">
- <div time class="statistics__total-time">
- <ngx-skeleton-loader count="7" />
+ <div class="statistics__loader-time">
+ <ngx-skeleton-loader count="7" />
</div>
- <div eth class="statistics__eth">
- <div class="statistics__eth-content">
- <ngx-skeleton-loader count="7" />
- </div>
+ <div class="statistics__loader-eth">
+ <ngx-skeleton-loader count="7" />
</div>
- <div protocols class="statistics__prot">
- <div class="statistics__prot-content">
- <ngx-skeleton-loader count="7" />
- </div>
+ <div class="statistics__loader-protocol">
+ <ngx-skeleton-loader count="7" />
</div>
- <div ir class="statistics__ir">
- <div class="statistics__ir-content">
- <ngx-skeleton-loader count="7" />
- </div>
+ <div class="statistics__loader-ir">
+ <ngx-skeleton-loader count="7" />
</div>
</div>
}
@else {
- <div class="statistics__content">
- <div time class="statistics__total-time">
+ <div class="statistics__table">
+ <div class="statistics__table__time">
<p>Total time: {{ statistics.total_time | time }} </p>
</div>
- <div eth class="statistics__eth">
- <div class="statistics__eth-content">
- <ng-container *ngIf="getProtocolETH() | async as protocol">
- {{ protocol.name }}
- {{ protocol.total_packets }}
- <ng-container *ngIf="getPacketsPerSecond(protocol.name) | async as packetsPerSecond">
- {{ packetsPerSecond }}
- </ng-container>
- {{protocol.total_bytes}}
- <ng-container *ngIf="getBytesPerSecond(protocol.name) | async as bytesPerSecond">
- {{ bytesPerSecond }}
- </ng-container>
+ <table class="statistics__table__header">
+ <thead class="statistics__table__header-title">
+ <tr>
+ <th></th>
+ <th>Total packets</th>
+ <th>Packets per second</th>
+ <th>Total bytes</th>
+ <th>Bytes per second</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngIf="getProtocolETH() | async as protocol" class="statistics__table__header-eth">
+ <td>{{ protocol.name }}</td>
+ <td>{{ protocol.total_packets }}</td>
+ <td>
+ {{ (getPacketsPerSecond(protocol.name) | async) === 0 ? 0 : (getPacketsPerSecond(protocol.name) | async) }}
+ </td>
+ <td>{{ protocol.total_bytes }}</td>
+ <td>
+ {{ (getBytesPerSecond(protocol.name) | async) === 0 ? 0 : (getBytesPerSecond(protocol.name) | async) }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table class="statistics__table__protocols">
+ <tbody>
+ <ng-container *ngFor="let protocol of getProtocolOthers() | async">
+ <tr>
+ <td>{{ protocol.name }}</td>
+ <td>{{ protocol.total_packets }}</td>
+ <td>
+ {{ (getPacketsPerSecond(protocol.name) | async) === 0 ? 0 : (getPacketsPerSecond(protocol.name) | async) }}
+ </td>
+ <td>{{ protocol.total_bytes }}</td>
+ <td>
+ {{ (getBytesPerSecond(protocol.name) | async) === 0 ? 0 : (getBytesPerSecond(protocol.name) | async) }}
+ </td>
+ </tr>
</ng-container>
- </div>
- </div>
- <div protocols class="statistics__prot">
- <div class="statistics__prot-content">
- <div *ngFor="let protocol of getProtocolOthers() | async">
- {{ protocol.name }}
- {{ protocol.total_packets }}
- <ng-container *ngIf="getPacketsPerSecond(protocol.name) | async as packetsPerSecond">
- {{ packetsPerSecond }}
- </ng-container>
- {{protocol.total_bytes}}
- <ng-container *ngIf="getBytesPerSecond(protocol.name) | async as bytesPerSecond">
- {{ bytesPerSecond }}
- </ng-container>
- </div>
- </div>
- </div>
- <div ir class="statistics__ir">
- <div class="statistics__ir-content">
- <ng-container *ngIf="getIR() | async as information_rate">
- Information Rate
- {{information_rate.min}}
- {{information_rate.max}}
- {{information_rate.current}}
- MB/s
- </ng-container>
- </div>
- </div>
+ </tbody>
+ </table>
+ <table class="statistics__table__ir">
+ <thead class="statistics__table__ir-header">
+ <tr>
+ <th></th>
+ <th>Min</th>
+ <th>Max</th>
+ <th>Current</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngIf="getIR() | async as information_rate" class="statistics__table_ir-content">
+ <td>Information Rate</td>
+ <td>{{ information_rate.min }}</td>
+ <td>{{ information_rate.max }}</td>
+ <td>{{ information_rate.current }}</td>
+ </tr>
+ </tbody>
+ </table>
</div>
}
</div>
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.scss b/src/app/components/dashboard-statistics/dashboard-statistics.component.scss
index a52ca0a..b4f8a6c 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.scss
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.scss
@@ -5,30 +5,90 @@
height: 100%;
width: 100%;
- .statistics {
- &content {
- display: flex;
- gap: map.get(vars.$spacing, 'xs');
+ ngx-skeleton-loader {
+ display: flex;
+ flex-direction: row;
+ gap: map.get(vars.$spacing, 'md');
+
+ ::ng-deep * {
+ height: 50px;
}
+ }
- &__eth {
- display: flex;
- justify-content: space-between;
- &-title {
- color: map.get(vars.$grey, 100);
- font-size: map.get(vars.$text, 'lg');
+ .statistics {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ font-weight: bold;
+
+ &__table {
+ &__time {
+ font-size: map.get(vars.$text, 'md');
}
- &-content {
- width: calc(100% - 200px);
+ &__header {
+ width: 100%;
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 0);
+ padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xl');
+
+ &-title {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 0);
+ padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xl');
+ }
+
+ &-eth td {
+ border-top: 1px solid map.get(vars.$grey, 30);
+ }
+
+ th, td {
+ width: 20%;
+ padding: map.get(vars.$spacing, 'sm');
+ text-align: left;
+ }
+
}
- }
- }
- // Configuration select
- ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) {
- background-color: map.get(vars.$grey, 10);
- border-radius: map.get(vars.$radius, 'xs');
+ &__protocols {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 0);
+ padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xl');
+
+ margin-top: map.get(vars.$text, 'lg');
+ width: 100%;
+
+
+ th, td {
+ width: 20%;
+ padding: map.get(vars.$spacing, 'sm');
+ text-align: left;
+ }
+
+ tr:not(:last-child) td {
+ border-bottom: 1px solid map.get(vars.$grey, 30);
+ }
+ }
+
+ &__ir {
+ border-radius: map.get(vars.$radius, 'xs');
+ background-color: map.get(vars.$grey, 0);
+ padding: map.get(vars.$spacing, 'none') map.get(vars.$spacing, 'xl');
+
+ margin-top: map.get(vars.$spacing, 'lg');
+ width: 100%;
+
+ tbody td {
+ border-top: 1px solid map.get(vars.$grey, 30);
+ }
+
+ th, td {
+ width: 25%;
+ padding: map.get(vars.$spacing, 'sm');
+ text-align: left;
+ }
+ }
+ }
}
}
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
index 34ccbc3..99bf83c 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
@@ -57,6 +57,10 @@ export class DashboardStatisticsComponent {
return 0;
}
+ if (protocol.total_packets == 0) {
+ return 0;
+ }
+
const totalPackets = protocol.total_packets;
const totalSeconds = dashboardStatistics.total_time.getTime() / 1000;
return totalPackets / totalSeconds;
@@ -75,6 +79,10 @@ export class DashboardStatisticsComponent {
return 0;
}
+ if (protocol.total_bytes == 0) {
+ return 0;
+ }
+
const totalBytes = protocol.total_bytes;
const totalSeconds = dashboardStatistics.total_time.getTime() / 1000;
return totalBytes / totalSeconds;
diff --git a/src/app/interceptor/mocks/dashboard-statistics.json b/src/app/interceptor/mocks/dashboard-statistics.json
index f12cab4..b05d511 100644
--- a/src/app/interceptor/mocks/dashboard-statistics.json
+++ b/src/app/interceptor/mocks/dashboard-statistics.json
@@ -25,9 +25,9 @@
}
],
"information-rate": {
- "min": 1.23,
- "max": 123456,
- "current": 123.45
+ "min": 0,
+ "max": 0,
+ "current": 0
}
}
}
--
GitLab