feat(dashboard): show velocity of memory

src/app/components/key-value-table/key-value-table.component.ts

@@ -1,48 +1,66 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';
+import { Columns, Config, DefaultConfig } from 'ngx-easy-table';
 
 @Component({
 	selector: 'app-rng-kv-table',
 	template: `
-		<table>
-			<tr *ngFor="let k of keys">
-				<th>{{ k.title ? k.title : k.key }}</th>
-				<td>{{ isDefine(data[k.key]) ? data[k.key] : ' ' }}</td>
-			</tr>
-		</table>
+		<ngx-table
+			[configuration]="configuration"
+			[columns]="columns"
+			[data]="keys"
+			[pagination]="{ limit: 100, offset: 0, count: 100 }"
+		>
+			<ng-template let-row let-rowIndex="index">
+				<th style="border: none; padding: 0.25rem 3% 0.25rem 0.5rem;text-align: right;">
+					{{ row.title ? row.title : row.key }}
+				</th>
+				<td style="border: none; padding: 0.25rem 0.5rem;">
+					{{ isDefine(data[row.key]) ? data[row.key] : '??' }}
+				</td>
+				<ng-container
+					*ngIf="addonTemplate"
+					[ngTemplateOutlet]="addonTemplate"
+					[ngTemplateOutletContext]="{ $implicit: row.key }"
+				>
+				</ng-container>
+			</ng-template>
+		</ngx-table>
 	`,
 	styles: [
 		`
-			th {
-				text-align: right;
-				min-width: 20%;
-				max-width: 40%;
-				padding: 0.25rem 3% 0.25rem 0.5rem;
-			}
 			th::after {
 				content: ':';
 			}
-			td {
-				min-width: 50%;
-				word-break: break-word;
-				padding: 0.25rem 0.5rem;
-			}
 			tr {
 				vertical-align: top;
 			}
-			table {
-				width: 100%;
-			}
 		`,
 	],
 })
 export class RngKeyValueTableComponent implements OnInit {
 	constructor() {}
+	@ContentChild(TemplateRef, { static: true }) public addonTemplate: TemplateRef<any>;
+
+	public configuration: Config;
+
+	columns: Columns[] = [
+		{ key: 'keys', title: 'keys' },
+		{ key: 'values', title: 'values' },
+	];
 
 	@Input() keys: { key: string; title?: string }[] = [];
 	@Input() data: { [idx: string]: any } = {};
 
 	isDefine(val: any) {
 		return typeof val !== 'undefined';
 	}
-	ngOnInit() {}
+	ngOnInit() {
+		this.configuration = { ...DefaultConfig };
+		this.configuration.searchEnabled = false;
+		this.configuration.isLoading = false;
+		this.configuration.infiniteScroll = false;
+		this.configuration.headerEnabled = false;
+		this.configuration.paginationEnabled = false;
+		this.configuration.paginationMaxSize = 100;
+	}
 }

src/app/pages/dashboard/dashboard.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ResponsiveSizeInfoRx } from 'ngx-responsive';
 import { combineLatest, Subject } from 'rxjs';
-import { map, takeWhile } from 'rxjs/operators';
+import { map, pairwise, takeWhile } from 'rxjs/operators';
 import { CombErr } from '../../@dataflow/core';
 import { CoreMemstatsFlow, CoreStatsFlow, CoreStatsFlowInNode } from '../../@dataflow/rclone';
 import { FormatBytes } from '../../utils/format-bytes';
@@ -71,7 +71,15 @@ import { ConnectionService } from '../connection.service';
 					<nb-card>
 						<nb-card-header> Memory </nb-card-header>
 						<nb-card-body>
-							<app-rng-kv-table [keys]="memKeys" [data]="memVals"> </app-rng-kv-table>
+							<app-rng-kv-table [keys]="memKeys" [data]="memVals">
+								<ng-template let-key>
+									<th
+										style="border: none; padding: 0.25rem 0.5rem; text-align: right; width: 7.25rem;"
+									>
+										<app-rng-diff [val]="memDiff[key]"></app-rng-diff>
+									</th>
+								</ng-template>
+							</app-rng-kv-table>
 						</nb-card-body>
 					</nb-card>
 				</div>
@@ -125,6 +133,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
 		{ key: 'TotalAlloc' },
 	];
 	memVals = {};
+	memDiff = {};
 
 	private memTrigger = new Subject<number>();
 	mem$: CoreMemstatsFlow;
@@ -168,6 +177,18 @@ export class DashboardComponent implements OnInit, OnDestroy {
 				}
 			}
 		});
+
+		this.mem$
+			.getOutput()
+			.pipe(pairwise())
+			.subscribe(([pre, cur]) => {
+				if (pre[1].length !== 0 || cur[1].length !== 0) return;
+				for (const key in pre[0]['mem-stats']) {
+					if (this.memVals.hasOwnProperty(key)) {
+						this.memDiff[key] = cur[0]['mem-stats'][key] - pre[0]['mem-stats'][key];
+					}
+				}
+			});
 		this.memTrigger.next(1);
 	}
 	ngOnDestroy() {