diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts index d264926ce7f5bd8c2d1933ba789e29ac083b2b5c..65a044ad32af672659949446adfbf8babcecea92 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 f40e325cd74cc1984c0ab7838d5a07634a8e02e8..bf8dc8853234103549e3ec927b4e8447cbc3ac03 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 29f8aa46456c0420b9841c14a32b0832a7399b90..7afcf20efb373090b7d31d4a0701dcaed02b6f09 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') + ); + } }