From d6d7a9abf950c1fe88ea2d69998f9d71e7d24d2f Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Mon, 24 Mar 2025 10:59:20 +0100
Subject: [PATCH] mod: hiding statistics is now working consistently
---
.../dashboard-settings.component.ts | 3 +-
.../dashboard-statistics.component.html | 101 +++++++++---------
.../dashboard-statistics.component.ts | 34 +++++-
3 files changed, 84 insertions(+), 54 deletions(-)
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts
index d264926..65a044a 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.ts
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.ts
@@ -2,7 +2,6 @@ import {
ChangeDetectionStrategy,
Component,
inject,
- input,
OnInit,
} from '@angular/core';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
@@ -12,7 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
import { ButtonComponent } from '../button/button.component';
import { SettingsService } from '../../service/settings.service';
import { MatSlideToggle } from '@angular/material/slide-toggle';
-import { Settings, SettingsDto } from '../../models/settings';
+import { Settings } from '../../models/settings';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.html b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
index f40e325..bf8dc88 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.html
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
@@ -11,7 +11,7 @@
<div class="statistics__table__time">
<p>Total time: {{ statistics.total_time | time }} </p>
</div>
- @if (settings?.statisticsRowsAndCharts?.showETH) {
+ @if (showAnyStatisticsColumn && showStatisticsRowsAndCharts) {
<table class="statistics__table__header">
<thead class="statistics__table__header-title">
<tr>
@@ -30,59 +30,61 @@
}
</tr>
</thead>
+ @if (settings?.statisticsRowsAndCharts?.showETH) {
+ <tbody>
+ @let protocolEth = getETHStatistics(statistics.protocols);
+ <tr class="statistics__table__header-eth">
+ <td>{{ protocolEth.name }}</td>
+ @if (settings?.statisticsColumns?.showTotalPackets) {
+ <td>{{ protocolEth.total_packets | decimal }}</td>
+ }
+ @if (settings?.statisticsColumns?.showPacketsPerSec) {
+ <td>
+ {{ getPerSecond(protocolEth.total_packets, statistics.total_time) | decimal }}
+ </td>
+ }
+ @if (settings?.statisticsColumns?.showTotalBytes) {
+ <td>{{ protocolEth.total_bytes | decimal }}</td>
+ }
+ @if (settings?.statisticsColumns?.showBytesPerSec) {
+ <td>
+ {{ getPerSecond(protocolEth.total_bytes, statistics.total_time) | decimal }}
+ </td>
+ }
+ </tr>
+ </tbody>
+ }
+ </table>
+
+ <table class="statistics__table__protocols">
<tbody>
- @let protocolEth = getETHStatistics(statistics.protocols);
- <tr class="statistics__table__header-eth">
- <td>{{ protocolEth.name }}</td>
- @if (settings?.statisticsColumns?.showTotalPackets) {
- <td>{{ protocolEth.total_packets | decimal }}</td>
- }
- @if (settings?.statisticsColumns?.showPacketsPerSec) {
- <td>
- {{ getPerSecond(protocolEth.total_packets, statistics.total_time) | decimal }}
- </td>
- }
- @if (settings?.statisticsColumns?.showTotalBytes) {
- <td>{{ protocolEth.total_bytes | decimal }}</td>
- }
- @if (settings?.statisticsColumns?.showBytesPerSec) {
- <td>
- {{ getPerSecond(protocolEth.total_bytes, statistics.total_time) | decimal }}
- </td>
+ @for (protocol of getProtocols(statistics.protocols); track protocol.name) {
+ @if (showProtocolRow(protocol.name)) {
+ <tr>
+ <td>{{ protocol.name }}</td>
+ @if (settings?.statisticsColumns?.showTotalPackets) {
+ <td>{{ protocol.total_packets | decimal }}</td>
+ }
+ @if (settings?.statisticsColumns?.showPacketsPerSec) {
+ <td>
+ {{ getPerSecond(protocol.total_packets, statistics.total_time) | decimal }}
+ </td>
+ }
+ @if (settings?.statisticsColumns?.showTotalBytes) {
+ <td>{{ protocol.total_bytes | decimal }}</td>
+ }
+ @if (settings?.statisticsColumns?.showBytesPerSec) {
+ <td>
+ {{ getPerSecond(protocol.total_bytes, statistics.total_time) | decimal }}
+ </td>
+ }
+ </tr>
+ }
}
- </tr>
</tbody>
</table>
}
- <table class="statistics__table__protocols">
- <tbody>
- @for (protocol of getProtocols(statistics.protocols); track protocol.name) {
- @if (settings?.statisticsRowsAndCharts?.showIPv4 && protocol.name === 'IPv4' ||
- settings?.statisticsRowsAndCharts?.showIPv6 && protocol.name === 'IPv6' ||
- settings?.statisticsRowsAndCharts?.showTCP && protocol.name === 'TCP') {
- <tr>
- <td>{{ protocol.name }}</td>
- @if (settings?.statisticsColumns?.showTotalPackets) {
- <td>{{ protocol.total_packets | decimal }}</td>
- }
- @if (settings?.statisticsColumns?.showPacketsPerSec) {
- <td>
- {{ getPerSecond(protocol.total_packets, statistics.total_time) | decimal }}
- </td>
- }
- @if (settings?.statisticsColumns?.showTotalBytes) {
- <td>{{ protocol.total_bytes | decimal }}</td>
- }
- @if (settings?.statisticsColumns?.showBytesPerSec) {
- <td>
- {{ getPerSecond(protocol.total_bytes, statistics.total_time) | decimal }}
- </td>
- }
- </tr>
- }
- }
- </tbody>
- </table>
+ @if (showInformationRate) {
<table class="statistics__table__ir">
<thead class="statistics__table__ir-header">
<tr>
@@ -113,6 +115,7 @@
</tr>
</tbody>
</table>
+ }
</div>
}
</div>
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
index 29f8aa4..7afcf20 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
@@ -2,18 +2,17 @@ import {
ChangeDetectionStrategy,
Component,
inject,
- Input,
OnInit,
} from '@angular/core';
import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
import { DashboardApi } from '../../api/dashboard.api';
import { interval, shareReplay, switchMap } from 'rxjs';
import { ProtocolStatistics } from '../../models/dashboard-statistics';
import { TimePipe } from '../../pipes/time.pipe';
import { DecimalPipe } from '../../pipes/decimal.pipe';
-import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
import { SettingsService } from '../../service/settings.service';
import { Settings } from '../../models/settings';
@@ -60,4 +59,33 @@ export class DashboardStatisticsComponent implements OnInit {
getProtocols(protocols: ProtocolStatistics[]): ProtocolStatistics[] {
return protocols.filter(protocol => protocol.name !== 'ETH');
}
+
+ get showAnyStatisticsColumn(): boolean {
+ const cols = this.settings?.statisticsColumns;
+ return (
+ cols?.showBytesPerSec ||
+ cols?.showPacketsPerSec ||
+ cols?.showTotalBytes ||
+ cols?.showTotalPackets
+ );
+ }
+
+ get showStatisticsRowsAndCharts(): boolean {
+ const rows = this.settings?.statisticsRowsAndCharts;
+ return rows?.showETH || rows?.showIPv4 || rows?.showIPv6 || rows?.showTCP;
+ }
+
+ get showInformationRate(): boolean {
+ const ir = this.settings?.statisticsIR;
+ return ir?.showMinValue || ir?.showMaxValue || ir?.showCurrentValue;
+ }
+
+ showProtocolRow(protocolName: string): boolean {
+ const rows = this.settings?.statisticsRowsAndCharts;
+ return (
+ (rows?.showIPv4 && protocolName === 'IPv4') ||
+ (rows?.showIPv6 && protocolName === 'IPv6') ||
+ (rows?.showTCP && protocolName === 'TCP')
+ );
+ }
}
--
GitLab