Better dispose table, UI fixes

app/preload.js

@@ -91,6 +91,11 @@ contextBridge.exposeInMainWorld('electronAPI', {
   onIsAutoLaunchEnabled: (callback) => {
     ipcRenderer.on('on-is-auto-launch-enabled', callback);
   },
+  unregisterOnIsAutoLaunchEnabled: () => {
+    const listeners = ipcRenderer.listeners('on-is-auto-launch-enabled');
+
+    listeners.forEach((listener) => ipcRenderer.removeListener('on-is-auto-launch-enabled', listener));
+  },
   onEnableAutoLaunchError: (callback) => {
     ipcRenderer.on('on-enable-auto-launch-error', callback);
   },
@@ -117,5 +122,8 @@ contextBridge.exposeInMainWorld('electronAPI', {
   },
   onIsAutoLaunched: (callback) => {
     ipcRenderer.on('on-is-auto-launched', callback);
+  },
+  unregisterOnIsAutoLaunched: () => {
+    ipcRenderer.removeAllListeners('on-is-auto-launched');
   }
 });

src/app/app.component.ts

@@ -43,6 +43,7 @@ export class AppComponent {
       const promise = new Promise<boolean>((resolve) => {
         window.electronAPI.onIsAutoLaunched((event: any, isAutoLaunched: boolean) => {
           console.debug(event);
+          window.electronAPI.unregisterOnIsAutoLaunched();
           resolve(isAutoLaunched);
         });
       });

src/app/pages/bans/bans.component.html

@@ -2,7 +2,7 @@
   <h1 class="h2">Bans</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>
@@ -19,7 +19,7 @@
       id="bansTable"
       data-toggle="bansTable"
       data-toolbar="#toolbar"
-      data-height="460"
+      
       data-pagination="true"
       >
       <thead>

src/app/pages/bans/bans.component.ts

@@ -4,6 +4,7 @@ import { DaemonService } from '../../core/services/daemon/daemon.service';
 import { NavbarLink } from '../../shared/components/navbar/navbar.model';
 import { DaemonDataService } from '../../core/services';
 import { Ban } from '../../../common';
+import { BasePageComponent } from '../base-page/base-page.component';
 
 
 @Component({
@@ -11,12 +12,7 @@ import { Ban } from '../../../common';
   templateUrl: './bans.component.html',
   styleUrl: './bans.component.scss'
 })
-export class BansComponent implements AfterViewInit {
+export class BansComponent extends BasePageComponent implements AfterViewInit {  
-  public readonly navbarLinks: NavbarLink[] = [
-    new NavbarLink('pills-overview-tab', '#pills-overview', 'pills-overview', false, 'Overview', true),
-    new NavbarLink('pills-set-bans-tab', '#pills-set-bans', 'pills-set-bans', false, 'Set Bans', true)
-  ];
-  
   public refreshingBansTable: boolean = false;
   
   public get daemonRunning(): boolean {
@@ -65,19 +61,20 @@ export class BansComponent implements AfterViewInit {
     return bans;
   }
 
-  constructor(private daemonData: DaemonDataService, private daemonService: DaemonService, private navbarService: NavbarService, private ngZone: NgZone) {
+  constructor(private daemonData: DaemonDataService, private daemonService: DaemonService, navbarService: NavbarService, private ngZone: NgZone) {
+    super(navbarService);
+
+    this.setLinks([
+      new NavbarLink('pills-overview-tab', '#pills-overview', 'pills-overview', false, 'Overview', true),
+      new NavbarLink('pills-set-bans-tab', '#pills-set-bans', 'pills-set-bans', false, 'Set Bans', true)
+    ]);
   }
 
   public ngAfterViewInit(): void {
-    this.navbarService.setLinks(this.navbarLinks);
-
     this.ngZone.run(async () => {
-      const $table = $('#bansTable');
+
-      $table.bootstrapTable({});
+      this.initTable('bansTable', true);
-      $table.bootstrapTable('refreshOptions', {
+
-        classes: 'table table-bordered table-hover table-dark table-striped'
-      });
-      $table.bootstrapTable('showLoading');      
       await this.refreshBansTable();
     }).then().catch((error: any) => {
       console.error(error);
@@ -85,34 +82,24 @@ export class BansComponent implements AfterViewInit {
   }
 
   public async refreshBansTable(): Promise<void> {
-    const $table = $('#bansTable');
+    let bans: Ban[] = [];
-    let _bans: Ban[] = [];
     
     try {
       const running = await this.daemonService.isRunning();
 
       if (running) {
-        _bans = await this.daemonService.getBans();
+        bans = await this.daemonService.getBans();
       }
       else {
-        _bans = [];
+        bans = [];
       }
     }
     catch (error) {
       console.error(error);
-      _bans = [];
+      bans = [];
     }
 
-    const bans: any[] = [];
+    this.loadTable('bansTable', bans);
-
-    _bans.forEach((ban) => bans.push({
-      'ip': ban.ip,
-      'host': ban.host,
-      'seconds': ban.seconds
-    }));
-    $table.bootstrapTable('hideLoading');
-    $table.bootstrapTable('load', bans);
-
   }
 
   public async setBans(): Promise<void> {

src/app/pages/base-page/base-page.component.ts

@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs';
 })
 export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
-  private readonly initializedTables: { [key: string]: boolean } = {};
+  private readonly initializedTables: { [key: string]: JQuery<HTMLElement> | undefined } = {};
   private _links: NavbarLink[] = [];
 
   public get links(): NavbarLink[] {
@@ -44,7 +44,7 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
     if(loading) $table.bootstrapTable('showLoading');
 
-    this.setTableInitialized(id);
+    this.setTableInitialized(id, $table);
   }
 
   protected loadTable(id: string, rows: any[]): void {
@@ -54,47 +54,42 @@ export abstract class BasePageComponent implements AfterContentInit, OnDestroy {
 
     if (!this.isTableInitialized(id)) {
       console.warn(`Cannot load table ${id}`);
+      return;
     }
 
-    const $table = $(`#${id}`);
+    const $table = this.initializedTables[id] as JQuery<HTMLElement>;
+
     $table.bootstrapTable('load', rows);
     $table.bootstrapTable('hideLoading');
   }
 
   private destroyTable(id: string): void {
-    if (!document.getElementById(id)) {
+    const $table = this.initializedTables[id];
-      console.warn(`Cannot find table ${id}`);
-      return;
-    }
 
-    if (!this.isTableInitialized(id)) {
+    if (!$table) {
       console.warn(`Table ${id} is not initialized`);
       return;
     }
 
-    const $table = $(`#${id}`);
     $table.bootstrapTable('destroy');
-    this.setTableInitialized(id, false);
+    
+    this.initializedTables[id] = undefined;
   }
 
   private destroyTables(): void {
     for(const key in this.initializedTables) {
-      const initialized: boolean = this.initializedTables[key];
-
-      if (!initialized) continue;
-
       this.destroyTable(key);
     }
   }
 
-  private setTableInitialized(id: string, initialized: boolean = true): void {
+  private setTableInitialized(id: string, table: JQuery<HTMLElement>): void {
-    this.initializedTables[id] = initialized;
+    this.initializedTables[id] = table;
   }
 
   protected isTableInitialized(id: string): boolean {
-    const initalized: boolean | undefined = this.initializedTables[id];
+    const initalized: JQuery<HTMLElement> | undefined = this.initializedTables[id];
 
-    if (initalized == true) {
+    if (initalized) {
       return true;
     }
 

src/app/pages/detail/detail.component.html

@@ -72,7 +72,7 @@
       id="peersTable"
       data-toggle="peersTable"
       data-toolbar="#toolbar"
-      data-height="460"
+      
       data-pagination="true"
       >
       <thead>
@@ -94,7 +94,7 @@
       id="spansTable"
       data-toggle="spansTable"
       data-toolbar="#toolbar"
-      data-height="460"
+      
       data-pagination="true"
       >
       <thead>

src/app/pages/mining/mining.component.html

@@ -176,7 +176,7 @@
       id="chainsTable"
       data-toggle="chainsTable"
       data-toolbar="#toolbar"
-      data-height="460"
+      
       data-pagination="true"
       >
       <thead>
@@ -292,7 +292,6 @@
       </div>
     </div>
 
-
     <div *ngIf="addAuxPowResult" class="card">
       <div class="card-header bg-dark text-white">
         <h4>Result</h4>
@@ -335,7 +334,7 @@
                   data-toggle="auxPowTable"
                   data-toolbar="#toolbar"
                   data-pagination="true"
-                  data-height="460"
+                  
                   >
                   <thead>
                   <tr>

src/app/pages/mining/mining.component.ts

@@ -160,7 +160,6 @@ export class MiningComponent extends BasePageComponent implements AfterViewInit
 
   private loadTables(): void {
     this.loadChainsTable();
-    this.loadAuxPowTable();
   }
 
   private loadChainsTable(): void {

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

@@ -29,7 +29,7 @@
         id="connectionsTable"
         data-toggle="connectionsTable"
         data-toolbar="#toolbar"
-        data-height="460"
+        
         data-pagination="true"
         >
         <thead>

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy } 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';
@@ -12,7 +12,7 @@ import { BasePageComponent } from '../base-page/base-page.component';
   templateUrl: './network.component.html',
   styleUrl: './network.component.scss'
 })
-export class NetworkComponent extends BasePageComponent implements AfterViewInit {
+export class NetworkComponent extends BasePageComponent implements AfterViewInit, OnDestroy {
 
   private netStatsBytesInChart?: Chart;
   private netStatsBytesOutChart?: Chart;
@@ -211,4 +211,15 @@ export class NetworkComponent extends BasePageComponent implements AfterViewInit
 
     this.limiting = false;
   }
+
+  public override ngOnDestroy(): void {
+    if (this.netStatsBytesInChart) {
+      this.netStatsBytesInChart.destroy();
+    }
+    if (this.netStatsBytesOutChart) {
+      this.netStatsBytesOutChart.destroy();
+    }
+
+    super.ngOnDestroy();
+  }
 }

src/app/pages/outputs/outputs.component.html

@@ -27,7 +27,7 @@
         data-toggle="outsTable"
         data-toolbar="#toolbar"
         data-pagination="true"
-        data-height="460"
+        
         >
         <thead>
         <tr>
@@ -97,7 +97,7 @@
         data-toggle="outHistogramsTable"
         data-toolbar="#toolbar"
         data-pagination="true"
-        data-height="460"
+        
         >
         <thead>
         <tr>
@@ -183,7 +183,7 @@
         data-toggle="outDistributionsTable"
         data-toolbar="#toolbar"
         data-pagination="true"
-        data-height="460"
+        
         >
         <thead>
         <tr>

src/app/pages/peers/peers.component.html

@@ -20,7 +20,7 @@
       data-toggle="peerListTable"
       data-toolbar="#toolbar"
       data-pagination="true"
-      data-height="460"
+      
       >
       <thead>
         <tr>
@@ -50,7 +50,7 @@
       id="publicNodesTable"
       data-toggle="publicNodesTable"
       data-toolbar="#toolbar"
-      data-height="460"
+      
       data-pagination="true"
       >
       <thead>

src/app/pages/transactions/transactions.component.html

@@ -23,7 +23,7 @@
         id="transactionsTable"
         data-toggle="transactionsTable"
         data-toolbar="#toolbar"
-        data-height="460"
+        
         data-pagination="true"
         >
         <thead>
@@ -55,7 +55,7 @@
         id="spentKeyImagesTable"
         data-toggle="spentKeyImagesTable"
         data-toolbar="#toolbar"
-        data-height="460"
+        
         data-pagination="true"
         >
         <thead>
@@ -212,8 +212,6 @@
       data-toggle="txPoolBacklogTable"
       data-toolbar="#toolbar"
       data-pagination="true"      
-      data-height="460"
-      data-pagination="true"
       >
       <thead>
       <tr>

src/app/pages/version/version.component.html

@@ -57,8 +57,8 @@
     
     <hr class="my-4">
     
-    <button *ngIf="!upgrading && !installing" class="w-100 btn btn-primary btn-lg" type="submit" (click)="upgrade()" [disabled]="buttonDisabled">{{ buttonTitle }}</button>
+    <button *ngIf="!loading && !upgrading && !installing" class="w-100 btn btn-primary btn-lg" type="submit" (click)="upgrade()" [disabled]="buttonDisabled">{{ buttonTitle }}</button>
-    <button *ngIf="upgrading || installing" class="w-100 btn btn-primary btn-lg" type="button" disabled>
+    <button *ngIf="!loading && upgrading || installing" class="w-100 btn btn-primary btn-lg" type="button" disabled>
       <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
       {{ upgrading ? 'Upgrading' : 'Installing' }} monerod
     </button>

src/app/pages/version/version.component.ts

@@ -87,7 +87,12 @@ export class VersionComponent implements AfterViewInit {
       });
   }
 
+  public loading: boolean = true;
+
   public async load(): Promise<void> {
+    this.loading = true;
+
+    try {
       this.settings = await this.daemonService.getSettings();
       const isElectron = this.electronService.isElectron || (window as any).electronAPI != null;
       const version = await this.daemonService.getVersion(isElectron);
@@ -96,6 +101,12 @@ export class VersionComponent implements AfterViewInit {
       this.currentVersion = version;
       this.latestVersion = latestVersion;
     }
+    catch(error: any) {
+      console.error(error);
+    }
+
+    this.loading = false;
+  }
 
   public get upgrading(): boolean {
     return this.moneroInstaller.upgrading;

src/polyfills.ts

@@ -110,6 +110,7 @@ declare global {
 
       isAutoLaunched: () => void;
       onIsAutoLaunched: (callback: (event: any, isAutoLaunched: boolean) => void) => void;
+      unregisterOnIsAutoLaunched: () => void;
     };
   }
 }