refactor(dashboard): using jobs component

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

@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CoreStatsFlow, CoreStatsFlowInNode } from 'src/app/@dataflow/rclone';
+import { ConnectionService } from '../connection.service';
+import { takeWhile, combineLatest, map } from 'rxjs/operators';
+import { CombErr } from 'src/app/@dataflow/core';
 
 @Component({
 	selector: 'app-dashboard',
@@ -11,24 +15,101 @@ import { Component, OnInit } from '@angular/core';
 			</div>
 			<div class="row">
 				<div class="col-sm-12 col-md-6 col-xl-6">
-					<dashboard-speed-card> </dashboard-speed-card>
+					<nb-flip-card #flip [showToggleButton]="false">
+						<nb-card-front>
+							<nb-card size="medium">
+								<nb-card-header>
+									<span>Speed Chart</span>
+									<button
+										nbButton
+										size="small"
+										shape="round"
+										appearance="ghost"
+										(click)="flip.toggle()"
+									>
+										<nb-icon icon="options-2"></nb-icon>
+									</button>
+								</nb-card-header>
+								<nb-card-body>
+									<jobs-speed-chart [stats$]="stats$"> </jobs-speed-chart>
+								</nb-card-body>
+							</nb-card>
+						</nb-card-front>
+						<nb-card-back>
+							<nb-card>
+								<nb-card-header>
+									<span>Speed Limitation</span>
+									<button
+										nbButton
+										size="small"
+										shape="round"
+										appearance="ghost"
+										(click)="flip.toggle()"
+									>
+										<nb-icon icon="arrow-back"></nb-icon>
+									</button>
+								</nb-card-header>
+								<nb-card-body>
+									123
+								</nb-card-body>
+							</nb-card>
+						</nb-card-back>
+					</nb-flip-card>
 				</div>
 				<div class="col-sm-12 col-md-6 col-xl-6">
-					<dashboard-stats-card> </dashboard-stats-card>
-				</div>
-				<div class="col-sm-12 col-md-6 col-xl-4">
-					<nb-card><nb-card-body>core/memstats</nb-card-body></nb-card>
-				</div>
-				<div class="col-sm-12 col-md-6 col-xl-4">
-					<nb-card><nb-card-body>cache/stats</nb-card-body></nb-card>
+					<nb-card size="medium">
+						<nb-card-body>
+							<nb-tabset fullWidth>
+								<nb-tab tabTitle="Summary">
+									<jobs-summary [stats$]="stats$"> </jobs-summary>
+								</nb-tab>
+								<nb-tab tabTitle="Memory">
+									Memory stats
+								</nb-tab>
+								<nb-tab tabTitle="Cache">
+									Cache stats
+								</nb-tab>
+							</nb-tabset>
+						</nb-card-body>
+					</nb-card>
 				</div>
 			</div>
 		</div>
 	`,
-	styles: [],
+	styles: [
+		`
+			nb-card-front nb-card-body {
+				overflow-y: hidden;
+			}
+			nb-tabset {
+				height: 100%;
+			}
+			:host nb-tab {
+				padding-top: 2rem;
+			}
+		`,
+	],
 })
-export class DashboardComponent implements OnInit {
-	constructor() {}
+export class DashboardComponent implements OnInit, OnDestroy {
+	constructor(private cmdService: ConnectionService) {}
+
+	public stats$: CoreStatsFlow;
+
+	ngOnInit(): void {
+		const outer = this;
+		this.visable = true;
+		this.stats$ = new (class extends CoreStatsFlow {
+			public prerequest$ = outer.cmdService.rst$.getOutput().pipe(
+				takeWhile(() => outer.visable),
+				combineLatest(outer.cmdService.listCmd$.verify(this.cmd)),
+				map(([, node]): CombErr<CoreStatsFlowInNode> => node)
+			);
+		})();
+		this.stats$.deploy();
+	}
 
-	ngOnInit(): void {}
+	private visable = false;
+	ngOnDestroy() {
+		this.visable = false;
+	}
 }

src/app/pages/dashboard/dashboard.module.ts

@@ -3,14 +3,18 @@ import { CommonModule } from '@angular/common';
 
 import { DashboardRoutingModule } from './dashboard-routing.module';
 import { DashboardComponent } from './dashboard.component';
-import { NbCardModule, NbButtonModule, NbIconModule, NbListModule } from '@nebular/theme';
-import { SpeedCardComponent } from './speed-card/speed-card.component';
-import { SpeedChartsComponent } from './speed-card/speed-charts.component';
+import {
+	NbCardModule,
+	NbButtonModule,
+	NbIconModule,
+	NbListModule,
+	NbTabsetModule,
+} from '@nebular/theme';
 import { ChartsModule } from 'ng2-charts';
-import { StatsCardComponent } from './stats-card/stats-card.component';
+import { JobsModule } from '../jobs/jobs.module';
 
 @NgModule({
-	declarations: [DashboardComponent, SpeedCardComponent, SpeedChartsComponent, StatsCardComponent],
+	declarations: [DashboardComponent],
 	imports: [
 		CommonModule,
 		DashboardRoutingModule,
@@ -19,6 +23,8 @@ import { StatsCardComponent } from './stats-card/stats-card.component';
 		NbIconModule,
 		ChartsModule,
 		NbListModule,
+		JobsModule,
+		NbTabsetModule,
 	],
 })
 export class DashboardModule {}