mirror of
https://github.com/everoddandeven/monerod-gui.git
synced 2024-12-22 19:49:27 +00:00
Components refactory
This commit is contained in:
parent
2614ad0919
commit
a4db0fb1f3
4 changed files with 42 additions and 44 deletions
|
@ -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>
|
||||
|
|
|
@ -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[] {
|
||||
|
@ -81,8 +87,6 @@ export class LogsComponent implements AfterViewInit {
|
|||
}
|
||||
|
||||
public ngAfterViewInit(): void {
|
||||
this.navbarService.setLinks(this.navbarLinks);
|
||||
|
||||
setTimeout(() => {
|
||||
this.scrollToBottom();
|
||||
}, 500);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue