Components refactory

src/app/pages/logs/logs.component.html

@@ -2,7 +2,7 @@
   <h1 class="h2">Logs</h1>
   <div class="btn-toolbar mb-2 mb-md-0">
     <ul class="nav nav-pills m-3" id="pills-tab" role="tablist">
-      @for(navbarLink of navbarLinks; track navbarLink.name) {
+      @for(navbarLink of links; track navbarLink.name) {
         <li class="nav-item mr-2" role="presentation">
             <button [class]="navbarLink.selected ? 'nav-link active btn-sm' : 'nav-link btn-sm'" [id]="navbarLink.id" data-bs-toggle="pill" [attr.data-bs-target]="navbarLink.target" type="button" role="tab" [attr.aria-controls]="navbarLink.controls" [attr.aria-selected]="navbarLink.selected" [disabled]="navbarLink.disabled">{{navbarLink.name}}</button>
         </li>

src/app/pages/logs/logs.component.ts

@@ -4,15 +4,16 @@ import { NavbarService } from '../../shared/components/navbar/navbar.service';
 import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { DaemonService } from '../../core/services';
 import { LogCategories } from '../../../common';
+import { BasePageComponent } from '../base-page/base-page.component';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-logs',
   templateUrl: './logs.component.html',
   styleUrl: './logs.component.scss'
 })
-export class LogsComponent implements AfterViewInit {
+export class LogsComponent extends BasePageComponent implements AfterViewInit {
   @ViewChild('logTerminal', { read: ElementRef }) public logTerminal?: ElementRef<any>;
-  public readonly navbarLinks: NavbarLink[];
   
   public setLogLevelLevel: number = 0;
   public settingLogLevel: boolean = false;
@@ -34,17 +35,22 @@ export class LogsComponent implements AfterViewInit {
   public setLogHashRateError: string = '';
   public setLogHashRateSuccess: boolean = false;
 
-  constructor(private navbarService: NavbarService, private logsService: LogsService, private daemonService: DaemonService, private ngZone: NgZone) {
-    this.logsService.onLog.subscribe((message: string) => {
+  constructor(navbarService: NavbarService, private logsService: LogsService, private daemonService: DaemonService, private ngZone: NgZone) {
+    super(navbarService);
+
+    const onLogSub: Subscription = this.logsService.onLog.subscribe((message: string) => {
       console.debug(message);
       this.onLog()
     });
-    this.navbarLinks = [
+
+    this.setLinks([
       new NavbarLink('pills-overview-tab', '#pills-overview', 'pills-overview', false, 'Overview'),
       new NavbarLink('pills-set-log-level-tab', '#pills-set-log-level', 'pills-set-log-level', false, 'Set Log Level'),
       new NavbarLink('pills-set-log-categories-tab', '#pills-set-log-categories', 'pills-set-log-categories', false, 'Set Log Categories'),
       new NavbarLink('pills-set-log-hash-rate-tab', '#pills-set-log-hash-rate', 'pills-set-log-hash-rate', false, 'Set Log Hash Rate')
-    ];
+    ]);
+
+    this.subscriptions.push(onLogSub);
   }
 
   public get lines(): string[] {
@@ -80,9 +86,7 @@ export class LogsComponent implements AfterViewInit {
     return index;  // usa l'indice per tracciare gli elementi
   }
 
-  public ngAfterViewInit(): void {
-    this.navbarService.setLinks(this.navbarLinks);
-    
+  public ngAfterViewInit(): void {    
     setTimeout(() => {
       this.scrollToBottom();
     }, 500);  

src/app/pages/network/network.component.html

@@ -2,7 +2,7 @@
   <h1 class="h2">Network</h1>
   <div class="btn-toolbar mb-2 mb-md-0">
     <ul class="nav nav-pills m-3" id="pills-tab" role="tablist">
-      @for(navbarLink of navbarLinks; track navbarLink.name) {
+      @for(navbarLink of links; track navbarLink.name) {
         <li class="nav-item mr-2" role="presentation">
             <button [class]="navbarLink.selected ? 'nav-link active btn-sm' : 'nav-link btn-sm'" [id]="navbarLink.id" data-bs-toggle="pill" [attr.data-bs-target]="navbarLink.target" type="button" role="tab" [attr.aria-controls]="navbarLink.controls" [attr.aria-selected]="navbarLink.selected" [disabled]="navbarLink.disabled">{{navbarLink.name}}</button>
         </li>

src/app/pages/network/network.component.ts

@@ -1,18 +1,18 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { NavbarService } from '../../shared/components/navbar/navbar.service';
 import { DaemonDataService, DaemonService } from '../../core/services';
 import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { Chart, ChartData } from 'chart.js/auto'
 import { NetStatsHistoryEntry } from '../../../common';
 import { Subscription } from 'rxjs';
+import { BasePageComponent } from '../base-page/base-page.component';
 
 @Component({
   selector: 'app-network',
   templateUrl: './network.component.html',
   styleUrl: './network.component.scss'
 })
-export class NetworkComponent implements AfterViewInit, OnDestroy {
-  public readonly navbarLinks: NavbarLink[];
+export class NetworkComponent extends BasePageComponent implements AfterViewInit {
 
   private netStatsBytesInChart?: Chart;
   private netStatsBytesOutChart?: Chart;
@@ -32,14 +32,13 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
   public setLimitSuccess: boolean = false;
   public setLimitError: string = '';
 
-  private subscriptions: Subscription[] = [];
-
-  constructor(private navbarService: NavbarService, private daemonService: DaemonService, private daemonData: DaemonDataService) {
-    this.navbarLinks = [
+  constructor(navbarService: NavbarService, private daemonService: DaemonService, private daemonData: DaemonDataService) {
+    super(navbarService);
+    this.setLinks([
       new NavbarLink('pills-net-stats-tab', '#pills-net-stats', 'pills-net-stats', false, 'Statistics'),
       new NavbarLink('pills-connections-tab', '#pills-connections', 'connections', false, 'Connetions'),
       new NavbarLink('pills-limits-tab', '#pills-limit', 'pills-limit', false, 'Limit')
-    ];
+    ]);
 
     const netStatsRefreshStartSub: Subscription = this.daemonData.netStatsRefreshEnd.subscribe(() => {
       this.refreshNetStatsHistory();
@@ -49,44 +48,29 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
       this.loadConnectionsTable();
     });
 
-    this.subscriptions.push(netStatsRefreshStartSub, syncEndSub);
-
-    this.daemonService.onDaemonStatusChanged.subscribe((running: boolean) => {
+    const daemonStatusSub: Subscription = this.daemonService.onDaemonStatusChanged.subscribe((running: boolean) => {
       if (!running) {
         if (this.netStatsBytesInChart) {
           this.netStatsBytesInChart.destroy();
           this.netStatsBytesInChart = undefined;
         }
       }
+      else {
+        this.initNetStatsHistoryChart();
+        this.loadConnectionsTable();
+      }
     });
+
+    this.subscriptions.push(netStatsRefreshStartSub, syncEndSub, daemonStatusSub);
   }
 
   public ngAfterViewInit(): void {
-    this.navbarService.setLinks(this.navbarLinks);
     this.initNetStatsHistoryChart();
-    this.initConnectionsTable();
-  }
-
-  public ngOnDestroy(): void {
-    this.subscriptions.forEach((sub) => {
-      sub.unsubscribe();
-    });
-
-    this.subscriptions = [];
-  }
-
-  private initConnectionsTable(): void {
-    const $table = $('#connectionsTable');
-    $table.bootstrapTable({});
-    $table.bootstrapTable('refreshOptions', {
-      classes: 'table table-bordered table-hover table-dark table-striped'
-    });
+    this.loadConnectionsTable();
   }
 
   private loadConnectionsTable(): void {
-    const $table = $('#connectionsTable');
-
-    $table.bootstrapTable('load', this.daemonData.connections);
+    this.loadTable('connectionsTable', this.daemonData.connections);
   }
 
   private buildChartBytesInData(): ChartData {
@@ -141,12 +125,17 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
       type: 'line',
       data: this.buildChartBytesInData(),
       options: {
+        animation: false,
         plugins: {
           legend: {
             display: false
           },
           tooltip: {
             boxPadding: 3
+          },
+          decimation: {
+            enabled: true,
+            algorithm: 'min-max'
           }
         }
       }
@@ -156,12 +145,17 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
       type: 'line',
       data: this.buildChartBytesOutData(),
       options: {
+        animation: false,
         plugins: {
           legend: {
             display: false
           },
           tooltip: {
             boxPadding: 3
+          },
+          decimation: {
+            enabled: true,
+            algorithm: 'min-max'
           }
         }
       }
@@ -216,5 +210,5 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
     }
 
     this.limiting = false;
-  } 
+  }
 }