diff --git a/src/app/api/configuration.api.ts b/src/app/api/configuration.api.ts
index fd761e3194002159711e4140edf82603bbbc1736..2d778cdbabc6b19173fbcccf5635462a948f6176 100644
--- a/src/app/api/configuration.api.ts
+++ b/src/app/api/configuration.api.ts
@@ -1,6 +1,6 @@
import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
-import { map, Observable, tap } from 'rxjs';
+import { map, mergeMap, Observable, tap } from 'rxjs';
import {
Configuration,
ConfigurationDto,
@@ -9,7 +9,7 @@ import {
} from '../models/configuration';
import { ApiResponse } from '../models/api-response';
-export const CONFIGURATION_API_URL = '/api/configurations';
+export const CONFIGURATION_API_URL = '/api/configuration';
@Injectable({
providedIn: 'root',
@@ -23,6 +23,33 @@ export class ConfigurationApi {
.pipe(map(dto => dto.data.map(dtoToConfiguration)));
}
+ fetchAppliedConfiguration(): Observable<Configuration> {
+ return this.httpClient
+ .get<ApiResponse<ConfigurationDto[]>>(CONFIGURATION_API_URL)
+ .pipe(
+ map(dto => dto.data),
+
+ map(configurations => {
+ const appliedConfiguration = configurations.find(
+ dto => dto.is_applied
+ );
+
+ if (!appliedConfiguration) {
+ throw new Error('No applied configuration found');
+ }
+ return appliedConfiguration.id;
+ }),
+
+ mergeMap(appliedConfigId => {
+ return this.httpClient
+ .get<
+ ApiResponse<ConfigurationDto>
+ >(`${CONFIGURATION_API_URL}/${appliedConfigId}`)
+ .pipe(map(dto => dtoToConfiguration(dto.data)));
+ })
+ );
+ }
+
find(configName: string): Observable<Configuration> {
return this.httpClient
.get<
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.html b/src/app/components/dashboard-charts/dashboard-charts.component.html
index 8360ae8340b04d1e2962b3394327ac507514ce8d..ea0113fecd57f1b4bb0ca47ab60c49f4d854f18a 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.html
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.html
@@ -1,22 +1,27 @@
+@let settings = settings$ | async;
+
+@if (settings) {
<mat-tab-group>
- @if (settings?.showETH) {
+ @if (settings.showETH) {
<mat-tab label="Frames">
<app-dashboard-chart-frames />
</mat-tab>
}
- @if (settings?.showCurrentValue || settings?.showMaxValue || settings?.showMinValue) {
+ @if (settings.showCurrentValue) {
<mat-tab label="Information Rate">
<app-dashboard-chart-information-rate />
</mat-tab>
}
- @for (protocol of protocols(); track $index) {
- @if (showProtocolChart(protocol)) {
- <mat-tab [label]="protocol">
- <app-dashboard-chart-protocol [protocolName]="protocol" />
- </mat-tab>
+ @if (settings.protocols) {
+ @for (protocol of protocols(); track $index) {
+ @if ((protocols$ | async)?.includes(protocol)) {
+ <mat-tab [label]="protocol">
+ <app-dashboard-chart-protocol [protocolName]="protocol" />
+ </mat-tab>
+ }
}
}
</mat-tab-group>
-
+}
<!--@todo: find other way to fix scrolling to the top of the page-->
<p-skeleton height="300px" />
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.ts b/src/app/components/dashboard-charts/dashboard-charts.component.ts
index 91d36806a8f4f381aa5375236be4af18b356fc32..059f6c8280fc1aa3f3890c77eb2b3bdf5f805e30 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.ts
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.ts
@@ -13,6 +13,9 @@ import { FormsModule } from '@angular/forms';
import { Skeleton } from 'primeng/skeleton';
import { Settings } from '../../models/settings';
import { SettingsService } from '../../service/settings.service';
+import { map, Observable } from 'rxjs';
+import { AsyncPipe } from '@angular/common';
+import { ProtocolStatistics } from '../../models/dashboard-statistics';
@Component({
selector: 'app-dashboard-charts',
@@ -25,6 +28,7 @@ import { SettingsService } from '../../service/settings.service';
SliderModule,
FormsModule,
Skeleton,
+ AsyncPipe,
],
templateUrl: './dashboard-charts.component.html',
styleUrl: './dashboard-charts.component.scss',
@@ -32,22 +36,14 @@ import { SettingsService } from '../../service/settings.service';
})
export class DashboardChartsComponent {
protocols = input.required<string[]>();
- settings!: Settings;
-
private settingsService = inject(SettingsService);
+ settings$: Observable<Settings> = this.settingsService.settings$;
- constructor() {
- this.settingsService.settingsObserver$.subscribe(settings => {
- this.settings = settings;
- });
- }
-
- showProtocolChart(protocolName: string): boolean {
- const rows = this.settings;
- return (
- (rows?.showIPv4 && protocolName === 'ipv4') ||
- (rows?.showIPv6 && protocolName === 'ipv6') ||
- (rows?.showTCP && protocolName === 'tcp')
- );
- }
+ protocols$: Observable<string[]> = this.settingsService.settings$.pipe(
+ map(settings =>
+ Object.keys(settings.protocols || {})
+ .filter(key => settings.protocols[key])
+ .map(key => key.toLowerCase())
+ )
+ );
}
diff --git a/src/app/components/dashboard-settings/dashboard-settings.builder.ts b/src/app/components/dashboard-settings/dashboard-settings.builder.ts
index cbb0caa6a30e86a513d3cd3e1ceba0bc35f06c6e..048c153d0f3370aec1b68911141d4db0325241f1 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.builder.ts
+++ b/src/app/components/dashboard-settings/dashboard-settings.builder.ts
@@ -1,6 +1,8 @@
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { inject, Injectable } from '@angular/core';
import { Settings } from '../../models/settings';
+import { interval, shareReplay, switchMap } from 'rxjs';
+import { DashboardApi } from '../../api/dashboard.api';
export type SettingsForm = FormGroup<{
showTotalPackets: FormControl<boolean>;
@@ -9,9 +11,7 @@ export type SettingsForm = FormGroup<{
showBytesPerSec: FormControl<boolean>;
showETH: FormControl<boolean>;
- showIPv4: FormControl<boolean>;
- showIPv6: FormControl<boolean>;
- showTCP: FormControl<boolean>;
+ protocols: FormGroup<{ [key: string]: FormControl<boolean> }>;
showMinValue: FormControl<boolean>;
showMaxValue: FormControl<boolean>;
@@ -24,44 +24,39 @@ export type SettingsForm = FormGroup<{
export class SettingsFormBuilder {
formBuilder = inject(FormBuilder);
- create(settings?: Settings): SettingsForm {
+ createDefaultForm(protocols: string[]): SettingsForm {
const fb = this.formBuilder.nonNullable;
- return fb.group({
- showTotalPackets: fb.control<boolean>(settings?.showTotalPackets || true),
- showPacketsPerSec: fb.control<boolean>(
- settings?.showPacketsPerSec || true
+ const protocolControls = protocols.reduce(
+ (acc, protocolName) => {
+ acc[protocolName] = new FormControl<boolean>(true, {
+ nonNullable: true,
+ });
+ return acc;
+ },
+ {} as { [key: string]: FormControl<boolean> }
+ );
+
+ const form = fb.group({
+ showTotalPackets: fb.control<boolean>(true),
+ showPacketsPerSec: fb.control<boolean>(true),
+ showTotalBytes: fb.control<boolean>(true),
+ showBytesPerSec: fb.control<boolean>(true),
+
+ showETH: fb.control<boolean>(true),
+ protocols: fb.group<{ [key: string]: FormControl<boolean> }>(
+ protocolControls
),
- showTotalBytes: fb.control<boolean>(settings?.showTotalBytes || true),
- showBytesPerSec: fb.control<boolean>(settings?.showBytesPerSec || true),
- showETH: fb.control<boolean>(settings?.showETH || true),
- showIPv4: fb.control<boolean>(settings?.showIPv4 || true),
- showIPv6: fb.control<boolean>(settings?.showIPv6 || true),
- showTCP: fb.control<boolean>(settings?.showTCP || true),
-
- showMinValue: fb.control<boolean>(settings?.showMinValue || true),
- showMaxValue: fb.control<boolean>(settings?.showMaxValue || true),
- showCurrentValue: fb.control<boolean>(settings?.showCurrentValue || true),
+ showMinValue: fb.control<boolean>(true),
+ showMaxValue: fb.control<boolean>(true),
+ showCurrentValue: fb.control<boolean>(true),
});
+
+ return form;
}
toValue(form: SettingsForm): Settings {
- const data = form.value;
- return <Settings>{
- showTotalPackets: data.showTotalPackets ?? true,
- showPacketsPerSec: data.showPacketsPerSec ?? true,
- showTotalBytes: data.showTotalBytes ?? true,
- showBytesPerSec: data.showBytesPerSec ?? true,
-
- showETH: data.showETH ?? true,
- showIPv4: data.showIPv4 ?? true,
- showIPv6: data.showIPv6 ?? true,
- showTCP: data.showTCP ?? true,
-
- showMinValue: data.showMinValue ?? true,
- showMaxValue: data.showMaxValue ?? true,
- showCurrentValue: data.showCurrentValue ?? true,
- };
+ return form.getRawValue();
}
}
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.html b/src/app/components/dashboard-settings/dashboard-settings.component.html
index 3b5756c593481d6bf4dc23f86a990429adc29164..6ea1fa3b0e2bcc2b995c424e60b2c1f148d37fd5 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.html
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.html
@@ -18,9 +18,11 @@
</div>
<div class="dialog__content__statistics__rows-content">
<mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showETH">ETH</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showIPv4">IPv4</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showIPv6">IPv6</mat-slide-toggle>
- <mat-slide-toggle [hideIcon]="true" [formControl]="form.controls.showTCP">TCP</mat-slide-toggle>
+ @for (entry of Object.entries(form.controls.protocols.controls); track $index) {
+ <mat-slide-toggle [hideIcon]="true" [formControl]="entry[1]">{{
+ entry[0]
+ }}</mat-slide-toggle>
+ }
</div>
</div>
<div class="dialog__content__statistics__ir">
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.scss b/src/app/components/dashboard-settings/dashboard-settings.component.scss
index b89375994bdafd3406704b8200b3f94cc800e61c..04e20566401bf1c80352097971223b89b4e21b4e 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.scss
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.scss
@@ -48,10 +48,9 @@
}
&__actions {
border-radius: map.get(vars.$radius, 'xs');
- padding: map.get(vars.$spacing, 'xxl') 0 map.get(vars.$spacing, 'xl') 0;
+ padding: map.get(vars.$spacing, 'xxl') map.get(vars.$spacing, 'xl') map.get(vars.$spacing, 'xl') map.get(vars.$spacing, 'xl');
display: flex;
- justify-content: center;
- gap: 150px;
+ justify-content: space-between;
::ng-deep app-button {
button {
@@ -61,3 +60,4 @@
}
}
}
+
diff --git a/src/app/components/dashboard-settings/dashboard-settings.component.ts b/src/app/components/dashboard-settings/dashboard-settings.component.ts
index 3acffaa589d80034bced276f0bfaec6e8759461d..c34a6d9d4d06fe5b13a832b988ed7fe9bb990fbf 100644
--- a/src/app/components/dashboard-settings/dashboard-settings.component.ts
+++ b/src/app/components/dashboard-settings/dashboard-settings.component.ts
@@ -35,23 +35,22 @@ import {
})
export class DashboardSettingsComponent implements OnInit {
settingsFormBuilder = inject(SettingsFormBuilder);
- settings = input<Settings>();
- form!: SettingsForm;
dialogRef = inject(MatDialogRef<DashboardSettingsComponent>);
settingsService = inject(SettingsService);
+ form!: SettingsForm;
ngOnInit() {
- this.initializeForm();
- this.loadSettings();
- }
+ this.settingsService.settings$.subscribe(settings => {
+ const protocols = Object.keys(settings.protocols);
+ this.form = this.settingsFormBuilder.createDefaultForm(protocols);
- initializeForm() {
- this.form = this.settingsFormBuilder.create(this.settings());
+ this.initializeForm();
+ });
}
- loadSettings() {
+ initializeForm() {
const currentSettings = this.settingsService.getSettings();
this.form.patchValue(currentSettings);
}
@@ -65,4 +64,6 @@ export class DashboardSettingsComponent implements OnInit {
onCancel() {
this.dialogRef.close();
}
+
+ protected readonly Object = Object;
}
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.html b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
index d7d609615b0b8b078f57880729d969ee7e23fca7..f508b0e9ff4175fa04253f988b78eb432176c564 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.html
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.html
@@ -7,46 +7,48 @@
}
</div>
} @else {
+ @let settings = settings$ | async;
+ @if (settings) {
<div class="statistics__table">
<div class="statistics__table__time">
<p>Total time: {{ statistics.total_time | time }} </p>
</div>
- @if (showAnyStatisticsColumn && showStatisticsRowsAndCharts) {
+ @if (showAnyStatisticsColumn(settings) && showStatisticsRowsAndCharts(settings)) {
<table class="statistics__table__header">
<thead class="statistics__table__header-title">
<tr>
<th></th>
- @if (settings?.showTotalPackets) {
+ @if (settings.showTotalPackets) {
<th>Total packets</th>
}
- @if (settings?.showPacketsPerSec) {
+ @if (settings.showPacketsPerSec) {
<th>Packets per second</th>
}
- @if (settings?.showTotalBytes) {
+ @if (settings.showTotalBytes) {
<th>Total bytes</th>
}
- @if (settings?.showBytesPerSec) {
+ @if (settings.showBytesPerSec) {
<th>Bytes per second</th>
}
</tr>
</thead>
- @if (settings?.showETH) {
+ @if (settings.showETH) {
<tbody>
@let protocolEth = getETHStatistics(statistics.protocols);
<tr class="statistics__table__header-eth">
<td>{{ protocolEth.name }}</td>
- @if (settings?.showTotalPackets) {
+ @if (settings.showTotalPackets) {
<td>{{ protocolEth.total_packets | decimal }}</td>
}
- @if (settings?.showPacketsPerSec) {
+ @if (settings.showPacketsPerSec) {
<td>
{{ getPerSecond(protocolEth.total_packets, statistics.total_time) | decimal }}
</td>
}
- @if (settings?.showTotalBytes) {
+ @if (settings.showTotalBytes) {
<td>{{ protocolEth.total_bytes | decimal }}</td>
}
- @if (settings?.showBytesPerSec) {
+ @if (settings.showBytesPerSec) {
<td>
{{ getPerSecond(protocolEth.total_bytes, statistics.total_time) | decimal }}
</td>
@@ -59,43 +61,43 @@
<table class="statistics__table__protocols">
<tbody>
@for (protocol of getProtocols(statistics.protocols); track protocol.name) {
- @if (showProtocolRow(protocol.name)) {
+ @if(settings.protocols[protocol.name]) {
<tr>
<td>{{ protocol.name }}</td>
- @if (settings?.showTotalPackets) {
+ @if (settings.showTotalPackets) {
<td>{{ protocol.total_packets | decimal }}</td>
}
- @if (settings?.showPacketsPerSec) {
+ @if (settings.showPacketsPerSec) {
<td>
{{ getPerSecond(protocol.total_packets, statistics.total_time) | decimal }}
</td>
}
- @if (settings?.showTotalBytes) {
+ @if (settings.showTotalBytes) {
<td>{{ protocol.total_bytes | decimal }}</td>
}
- @if (settings?.showBytesPerSec) {
+ @if (settings.showBytesPerSec) {
<td>
{{ getPerSecond(protocol.total_bytes, statistics.total_time) | decimal }}
</td>
}
</tr>
- }
+ }
}
</tbody>
</table>
}
- @if (showInformationRate) {
+ @if (showInformationRate(settings!)) {
<table class="statistics__table__ir">
<thead class="statistics__table__ir-header">
<tr>
<th></th>
- @if (settings?.showMinValue) {
+ @if (settings.showMinValue) {
<th>Min</th>
}
- @if (settings?.showMaxValue) {
+ @if (settings.showMaxValue) {
<th>Max</th>
}
- @if (settings?.showCurrentValue) {
+ @if (settings.showCurrentValue) {
<th>Current</th>
}
</tr>
@@ -103,13 +105,13 @@
<tbody>
<tr class="statistics__table_ir-content">
<td>Information Rate</td>
- @if (settings?.showMinValue) {
+ @if (settings.showMinValue) {
<td>{{ statistics.information_rate.min | decimal }}</td>
}
- @if (settings?.showMaxValue) {
+ @if (settings.showMaxValue) {
<td>{{ statistics.information_rate.max | decimal }}</td>
}
- @if (settings?.showCurrentValue) {
+ @if (settings.showCurrentValue) {
<td>{{ statistics.information_rate.current | decimal }}</td>
}
</tr>
@@ -117,5 +119,6 @@
</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 df46c05927686c924f0f850bc97c6447fcbb4225..13fe0cb45540823f63ccd0734d177d59c3a91094 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
@@ -8,7 +8,7 @@ import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
import { AsyncPipe } from '@angular/common';
import { DashboardApi } from '../../api/dashboard.api';
-import { interval, shareReplay, switchMap } from 'rxjs';
+import { interval, Observable, shareReplay, switchMap } from 'rxjs';
import { ProtocolStatistics } from '../../models/dashboard-statistics';
import { TimePipe } from '../../pipes/time.pipe';
import { DecimalPipe } from '../../pipes/decimal.pipe';
@@ -29,17 +29,10 @@ import { Settings } from '../../models/settings';
styleUrl: './dashboard-statistics.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class DashboardStatisticsComponent implements OnInit {
+export class DashboardStatisticsComponent {
dashboardApi = inject(DashboardApi);
- settings!: Settings;
-
settingsService = inject(SettingsService);
-
- ngOnInit() {
- this.settingsService.settingsObserver$.subscribe(settings => {
- this.settings = settings;
- });
- }
+ settings$: Observable<Settings> = this.settingsService.settings$;
dashboardStatistics = interval(1000).pipe(
switchMap(() => this.dashboardApi.fetchStatistics()),
@@ -59,32 +52,27 @@ export class DashboardStatisticsComponent implements OnInit {
return protocols.filter(protocol => protocol.name !== 'ETH');
}
- get showAnyStatisticsColumn(): boolean {
- const cols = this.settings;
+ showAnyStatisticsColumn(settings: Settings): boolean {
return (
- cols?.showBytesPerSec ||
- cols?.showPacketsPerSec ||
- cols?.showTotalBytes ||
- cols?.showTotalPackets
+ settings.showBytesPerSec ||
+ settings.showPacketsPerSec ||
+ settings.showTotalBytes ||
+ settings.showTotalPackets
);
}
- get showStatisticsRowsAndCharts(): boolean {
- const rows = this.settings;
- return rows?.showETH || rows?.showIPv4 || rows?.showIPv6 || rows?.showTCP;
- }
-
- get showInformationRate(): boolean {
- const ir = this.settings;
- return ir?.showMinValue || ir?.showMaxValue || ir?.showCurrentValue;
+ showStatisticsRowsAndCharts(settings: Settings): boolean {
+ return (
+ settings.showETH ||
+ Object.values(settings.protocols).some(v => v === true)
+ );
}
- showProtocolRow(protocolName: string): boolean {
- const rows = this.settings;
+ showInformationRate(settings: Settings): boolean {
return (
- (rows?.showIPv4 && protocolName === 'IPv4') ||
- (rows?.showIPv6 && protocolName === 'IPv6') ||
- (rows?.showTCP && protocolName === 'TCP')
+ settings.showMinValue ||
+ settings.showMaxValue ||
+ settings.showCurrentValue
);
}
}
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index 2638312654af745de1df3ff0aa6976f872591eea..de8f32d77181ec02c252275baa477b65d51aa36e 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,18 +1,20 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ OnInit,
+} from '@angular/core';
import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIcon } from '@angular/material/icon';
-import { MatButtonModule, MatFabButton } from '@angular/material/button';
+import { MatFabButton } from '@angular/material/button';
import { DashboardStatisticsComponent } from '../dashboard-statistics/dashboard-statistics.component';
import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.component';
-import {
- MatDialog,
- MatDialogActions,
- MatDialogClose,
- MatDialogContent,
- MatDialogTitle,
-} from '@angular/material/dialog';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
import { DashboardSettingsComponent } from '../dashboard-settings/dashboard-settings.component';
+import { ConfigurationApi } from '../../api/configuration.api';
+import { SettingsService } from '../../service/settings.service';
+import { map, Observable } from 'rxjs';
@Component({
selector: 'app-dashboard',
@@ -28,13 +30,28 @@ import { DashboardSettingsComponent } from '../dashboard-settings/dashboard-sett
styleUrl: './dashboard.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
readonly dialog = inject(MatDialog);
- openSettings() {
- this.dialog.open(DashboardSettingsComponent, {
- minWidth: '1100px',
- minHeight: '550px',
+ configurationApi = inject(ConfigurationApi);
+ settingsService = inject(SettingsService);
+
+ ngOnInit() {
+ this.configurationApi.fetchAppliedConfiguration().subscribe(config => {
+ if (config) {
+ this.settingsService.initSettings(config.protocols);
+ } else {
+ console.error('Failed to fetch configuration');
+ }
});
}
+
+ openSettings() {
+ const config = new MatDialogConfig();
+
+ config.minWidth = '1100px';
+ config.minHeight = '550px';
+
+ this.dialog.open(DashboardSettingsComponent, config);
+ }
}
diff --git a/src/app/interceptor/mocks/configuration-1.json b/src/app/interceptor/mocks/configuration-1.json
index 6e971313aa0358f2068b1a5eebec1e90d8cb8ba7..93c1d9b1f5575ffd6fdcbaf52e02e18506e2b6a7 100644
--- a/src/app/interceptor/mocks/configuration-1.json
+++ b/src/app/interceptor/mocks/configuration-1.json
@@ -2,7 +2,7 @@
"data": {
"id": "1abc",
"name": "Custom",
- "is_applied": false,
+ "is_applied": true,
"mac_source": [
"01:23:45:67:89:00",
"01:23:45:67:89:11",
@@ -19,6 +19,6 @@
[128, 255],
[1024, 1518]
],
- "protocols": ["IPv4", "IP6", "UDP"]
+ "protocols": ["IPv4", "IPv6", "UDP"]
}
}
diff --git a/src/app/interceptor/mocks/configuration-2.json b/src/app/interceptor/mocks/configuration-2.json
index d18ca9470f7c6dc9b350038ae2edee502e66b3f7..f047b8b4edb47f698b826edce66221969e05d2dd 100644
--- a/src/app/interceptor/mocks/configuration-2.json
+++ b/src/app/interceptor/mocks/configuration-2.json
@@ -2,7 +2,7 @@
"data": {
"id": "2def",
"name": "Everything",
- "is_applied": true,
+ "is_applied": false,
"mac_source": [],
"mac_destination": [],
"frame_ranges": [],
diff --git a/src/app/interceptor/mocks/configurations.json b/src/app/interceptor/mocks/configurations.json
index b1ed282448df746db14186a2c1aae8cfe1f9a6dc..e7de12535e42398db682bf55103fbbf5cc909593 100644
--- a/src/app/interceptor/mocks/configurations.json
+++ b/src/app/interceptor/mocks/configurations.json
@@ -3,7 +3,7 @@
{
"id": "1abc",
"name": "Custom",
- "is_applied": false,
+ "is_applied": true,
"mac_source": [
"01:23:45:67:89:00",
"01:23:45:67:89:11",
@@ -20,12 +20,12 @@
[128, 255],
[1024, 1518]
],
- "protocols": ["IPv4", "IP6", "UDP"]
+ "protocols": ["IPv4", "IPv6", "UDP"]
},
{
"id": "2def",
"name": "Everything",
- "is_applied": true,
+ "is_applied": false,
"mac_source": [],
"mac_destination": [],
"frame_ranges": [],
diff --git a/src/app/interceptor/mocks/dashboard-statistics-2.json b/src/app/interceptor/mocks/dashboard-statistics-2.json
index 9d58d0f611f90c47edf6bbd676fde91d8058d2ea..08e38b504dabcee6fd722b9c954df7f64c12c90c 100644
--- a/src/app/interceptor/mocks/dashboard-statistics-2.json
+++ b/src/app/interceptor/mocks/dashboard-statistics-2.json
@@ -9,7 +9,7 @@
"total-bytes": 123678901
},
{
- "name": "TCP",
+ "name": "UDP",
"total-packets": 323344,
"total-bytes": 32112345
},
diff --git a/src/app/interceptor/mocks/dashboard-statistics.json b/src/app/interceptor/mocks/dashboard-statistics.json
index b05d511f7456fb992cea4866fc92d248c29de429..d9b9013d965ae9923558580d88323c7493b18f6a 100644
--- a/src/app/interceptor/mocks/dashboard-statistics.json
+++ b/src/app/interceptor/mocks/dashboard-statistics.json
@@ -9,7 +9,7 @@
"total-bytes": 123456789
},
{
- "name": "TCP",
+ "name": "UDP",
"total-packets": 321312,
"total-bytes": 32143245
},
diff --git a/src/app/models/settings.ts b/src/app/models/settings.ts
index 09e4e131f79cd7924b41d080c67e4e4525ed1fd6..79a2ce659eb9fde1c9d5af1212d9c77c33b62067 100644
--- a/src/app/models/settings.ts
+++ b/src/app/models/settings.ts
@@ -1,15 +1,11 @@
-export type Settings = SettingsDto;
-
-export interface SettingsDto {
+export interface Settings {
showTotalPackets: boolean;
showPacketsPerSec: boolean;
showTotalBytes: boolean;
showBytesPerSec: boolean;
showETH: boolean;
- showIPv4: boolean;
- showIPv6: boolean;
- showTCP: boolean;
+ protocols: { [key: string]: boolean };
showMinValue: boolean;
showMaxValue: boolean;
diff --git a/src/app/service/settings.service.ts b/src/app/service/settings.service.ts
index 77ad00c2308e766f858291621d17364cb675996b..46b34dbc056bc7fa3b7aa394f7a155de54f041fa 100644
--- a/src/app/service/settings.service.ts
+++ b/src/app/service/settings.service.ts
@@ -1,35 +1,46 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { inject, Injectable } from '@angular/core';
+import {
+ BehaviorSubject,
+ interval,
+ shareReplay,
+ Subject,
+ switchMap,
+} from 'rxjs';
import { Settings } from '../models/settings';
-
-const DEFAULT_SETTINGS: Settings = {
- showTotalPackets: true,
- showPacketsPerSec: true,
- showTotalBytes: true,
- showBytesPerSec: true,
-
- showETH: true,
- showIPv4: true,
- showIPv6: true,
- showTCP: true,
-
- showMinValue: true,
- showMaxValue: true,
- showCurrentValue: true,
-};
+import { SettingsFormBuilder } from '../components/dashboard-settings/dashboard-settings.builder';
@Injectable({
providedIn: 'root',
})
export class SettingsService {
- private settingsSubject = new BehaviorSubject<Settings>(DEFAULT_SETTINGS);
- settingsObserver$ = this.settingsSubject.asObservable();
+ settingsFormBuilder = inject(SettingsFormBuilder);
+
+ private settingsSubject = new BehaviorSubject<Settings>({
+ showBytesPerSec: true,
+ showPacketsPerSec: true,
+ showTotalBytes: true,
+ showTotalPackets: true,
+ showETH: true,
+ protocols: {},
+ showMinValue: true,
+ showMaxValue: true,
+ showCurrentValue: true,
+ });
+
+ settings$ = this.settingsSubject.asObservable();
+
+ initSettings(protocols: string[]) {
+ const defaultSettings = this.settingsFormBuilder.toValue(
+ this.settingsFormBuilder.createDefaultForm(protocols)
+ );
+ this.settingsSubject.next(defaultSettings);
+ }
updateSettings(settings: Settings) {
this.settingsSubject.next(settings);
}
- getSettings() {
+ getSettings(): Settings {
return this.settingsSubject.value;
}
}