feat(remote.detail): show remote usages

src/app/@dataflow/rclone/index.ts

@@ -19,3 +19,4 @@ export * from './core-bwlimit-flow';
 export * from './options-get-flow';
 export * from './options-set-flow';
 export * from './operations-fsinfo-flow';
+export * from './operations-about-flow';

src/app/@dataflow/rclone/operations-about-flow.ts

@@ -0,0 +1,52 @@
+import { Observable, of } from 'rxjs';
+import { AjaxFlowInteralNode, CombErr, FlowOutNode } from '../core';
+import { IRcloneServer, NavigationFlowOutNode } from '../extra';
+import { OperationsFsinfoFlowOutNode } from './operations-fsinfo-flow';
+import { PostFlow } from './post-flow';
+
+export interface OperationsAboutFlowParamsNode {
+	/** a remote name string eg "drive:" */
+	fs: string;
+}
+
+export interface OperationsAboutFlowInNode
+	extends NavigationFlowOutNode,
+		IRcloneServer,
+		OperationsFsinfoFlowOutNode {}
+
+export interface OperationsAboutFlowOutItemNode {
+	free?: number;
+	other?: number;
+	total?: number;
+	trashed?: number;
+	used?: number;
+}
+export interface OperationsAboutFlowOutNode extends FlowOutNode {
+	about: OperationsAboutFlowOutItemNode;
+}
+
+export abstract class OperationsAboutFlow extends PostFlow<
+	OperationsAboutFlowInNode,
+	OperationsAboutFlowOutNode,
+	OperationsAboutFlowParamsNode
+> {
+	// public prerequest$: Observable<CombErr<OperationsAboutFlowInNode>>;
+	protected cmd = 'operations/about';
+	protected cacheSupport = true;
+	protected params = (pre: CombErr<OperationsAboutFlowInNode>): OperationsAboutFlowParamsNode => {
+		if (pre[1].length !== 0) return {} as any;
+		return { fs: `${pre[0].remote}:` };
+	};
+	protected reconstructAjaxResult(x: AjaxFlowInteralNode): CombErr<OperationsAboutFlowOutNode> {
+		if (x[1].length !== 0) return [{}, x[1]] as any;
+		const rsp = x[0].ajaxRsp.response;
+		return [{ about: rsp }, []];
+	}
+	protected request(
+		pre: CombErr<OperationsAboutFlowInNode>
+	): Observable<CombErr<OperationsAboutFlowOutNode>> {
+		if (pre[1].length !== 0) return of(pre as any);
+		if (pre[0]['fs-info'].Features.About) return super.request(pre);
+		return of([{}, [new Error(`${pre[0].remote} unable to get about info`)]] as any);
+	}
+}

src/app/pages/manager/homeMode/remote.detail.ts

@@ -1,15 +1,40 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ChartDataSets, ChartOptions } from 'chart.js';
+import { BaseChartDirective, Label } from 'ng2-charts';
 import { combineLatest, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CombErr } from '../../../@dataflow/core';
 import { NavigationFlowOutNode } from '../../../@dataflow/extra';
-import { OperationsFsinfoFlow, OperationsFsinfoFlowInNode } from '../../../@dataflow/rclone';
+import {
+	OperationsAboutFlow,
+	OperationsFsinfoFlow,
+	OperationsFsinfoFlowInNode,
+} from '../../../@dataflow/rclone';
+import { FormatBytes } from '../../../utils/format-bytes';
 import { ConnectionService } from '../../connection.service';
 
 @Component({
 	selector: 'app-home-remote-detail',
 	template: `
 		<h5>{{ _remote }}</h5>
+		<div
+			[nbSpinner]="loadingAbout"
+			[ngStyle]="{
+				display: 'block',
+				'background-color': doughnutChartData[1].data[0] ? '' : 'aliceblue'
+			}"
+		>
+			<canvas
+				baseChart
+				width="250"
+				height="250"
+				[datasets]="doughnutChartData"
+				[options]="doughnutChartOptions"
+				[labels]="doughnutChartLabels"
+				chartType="doughnut"
+			>
+			</canvas>
+		</div>
 		<nb-accordion>
 			<nb-accordion-item *ngIf="feature.length">
 				<nb-accordion-item-header>Feature</nb-accordion-item-header>
@@ -63,19 +88,66 @@ export class RemoteDetailComponent implements OnInit {
 	constructor(private cmdService: ConnectionService) {}
 	_remote = '';
 	loadingFsinfo = false;
+	loadingAbout = false;
 	feature: { k: string; v: boolean }[] = [];
 	hashes: string[] = [];
+
+	// Doughnut
+	public doughnutChartOptions: ChartOptions = {
+		legend: { display: false },
+		cutoutPercentage: 0,
+		animation: { animateScale: true },
+		tooltips: {
+			callbacks: {
+				label(tooltipItem, data) {
+					let label = (data.labels[tooltipItem.index] as string) || '';
+					if (label) {
+						label += ': ';
+					}
+					const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+					if (typeof value === 'number') label += FormatBytes(value, 3);
+					else label += value;
+					console.log(label);
+					return label;
+				},
+			},
+		},
+	};
+	public doughnutChartLabels: Label[] = ['Totol', 'Used', 'Other', 'Trashed', 'Free'];
+	public doughnutChartData: ChartDataSets[] = [
+		{
+			data: [null, 0, 0, 0, 0],
+			backgroundColor: ['', '#3366ff', '#0095ff', '#ffaa00', '#00d68f'],
+			hoverBackgroundColor: ['', '#598bff', '#42aaff', '#ffc94d', '#2ce69b'],
+			borderWidth: 0,
+			label: 'Outside',
+		},
+		{
+			data: [0],
+			backgroundColor: '#ffffff',
+			hoverBackgroundColor: '#c5cee0',
+			borderWidth: 0,
+			label: 'Inside',
+		},
+	];
+
 	set remote(x: NavigationFlowOutNode) {
 		this._remote = x.remote || '';
 		this.loadingFsinfo = true;
+		this.loadingAbout = true;
 		this.trigger.next(x.remote);
 	}
 
 	private trigger = new Subject<string>();
 	fsinfo$: OperationsFsinfoFlow;
+	about$: OperationsAboutFlow;
+
+	@ViewChild(BaseChartDirective) chart: BaseChartDirective;
+
 	ngOnInit() {
 		const outer = this;
 		this.loadingFsinfo = false;
+		this.loadingAbout = false;
 		this.fsinfo$ = new (class extends OperationsFsinfoFlow {
 			public prerequest$ = combineLatest([
 				outer.trigger,
@@ -97,5 +169,17 @@ export class RemoteDetailComponent implements OnInit {
 			this.feature = Object.keys(fsinfo.Features).map(k => ({ k, v: fsinfo.Features[k] }));
 			this.hashes = fsinfo.Hashes;
 		});
+		this.about$ = new (class extends OperationsAboutFlow {
+			public prerequest$ = outer.fsinfo$.getSupersetOutput();
+		})();
+		this.about$.deploy();
+		this.about$.getOutput().subscribe(x => {
+			this.loadingAbout = false;
+			if (x[1].length !== 0) return;
+			const about = x[0].about;
+			this.doughnutChartData[0].data = [null, about.used, about.other, about.trashed, about.free];
+			this.doughnutChartData[1].data = [about.total ? about.total : null];
+			this.chart.update();
+		});
 	}
 }

src/app/pages/manager/manager.module.ts

@@ -18,6 +18,7 @@ import {
 	NbTabsetModule,
 	NbTooltipModule,
 } from '@nebular/theme';
+import { ChartsModule } from 'ng2-charts';
 import { TableModule } from 'ngx-easy-table';
 import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
 import { ClipboardRemotesTableComponent } from './clipboard/clipboard-remotes-table/clipboard-remotes-table.component';
@@ -65,6 +66,7 @@ import { TasksDialogComponent } from './tasks/tasks.dialog';
 		NbAccordionModule,
 		NbSpinnerModule,
 		NbListModule,
+		ChartsModule,
 	],
 })
 export class ManagerModule {}