79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
|
import {Component, Inject, Input, OnChanges, OnDestroy, OnInit, PLATFORM_ID, SimpleChanges} from "@angular/core";
|
||
|
|
import {Report} from "./cache-indicators";
|
||
|
|
import {CacheIndicatorsService} from "./cache-indicators.service";
|
||
|
|
import {interval, Subject, Subscription} from "rxjs";
|
||
|
|
import {map, switchMap, takeUntil} from "rxjs/operators";
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'cache-indicators',
|
||
|
|
template: `
|
||
|
|
<div *ngIf="report" class="cache-progress">
|
||
|
|
<div class="uk-position-relative" [attr.uk-tooltip]="'Caching indicators process for ' + alias">
|
||
|
|
<div class="uk-progress-circle" [attr.percentage]="report.percentage?report.percentage:0" [style]="'--percentage: ' + (report.percentage?report.percentage:0)"></div>
|
||
|
|
<button *ngIf="report.percentage === 100" (click)="clear()" class="uk-icon-button uk-icon-button-xsmall uk-button-default uk-position-top-right"><icon name="close" [flex]="true" ratio="0.8"></icon></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,
|
||
|
|
styleUrls: ['cache-indicators.component.less']
|
||
|
|
})
|
||
|
|
export class CacheIndicatorsComponent implements OnInit, OnChanges, OnDestroy {
|
||
|
|
report: Report;
|
||
|
|
subscriptions: Subscription[] = [];
|
||
|
|
interval: number = 10000;
|
||
|
|
readonly destroy$ = new Subject();
|
||
|
|
@Input() alias: string;
|
||
|
|
|
||
|
|
constructor(private cacheIndicatorsService: CacheIndicatorsService,
|
||
|
|
@Inject(PLATFORM_ID) private platformId) {
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
this.getReport();
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnChanges(changes: SimpleChanges) {
|
||
|
|
if(changes.alias) {
|
||
|
|
this.getReport();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getReport() {
|
||
|
|
this.clear();
|
||
|
|
this.subscriptions.push(this.cacheIndicatorsService.getReport(this.alias).subscribe(report => {
|
||
|
|
this.getReportInterval(report);
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
getReportInterval(report: Report) {
|
||
|
|
if(this.isBrowser && (this.report || !report?.completed)) {
|
||
|
|
this.report = report;
|
||
|
|
this.subscriptions.push(interval(this.interval).pipe(
|
||
|
|
map(() => this.cacheIndicatorsService.getReport(this.alias)),
|
||
|
|
switchMap(report => report),
|
||
|
|
takeUntil(this.destroy$)).subscribe(report => {
|
||
|
|
console.log(this.alias);
|
||
|
|
this.report = report;
|
||
|
|
if(this.report.completed) {
|
||
|
|
this.destroy$.next();
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
clear() {
|
||
|
|
this.subscriptions.forEach(subscription => {
|
||
|
|
subscription.unsubscribe();
|
||
|
|
})
|
||
|
|
this.report = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
get isBrowser() {
|
||
|
|
return this.platformId === 'browser';
|
||
|
|
}
|
||
|
|
|
||
|
|
ngOnDestroy() {
|
||
|
|
this.clear();
|
||
|
|
}
|
||
|
|
}
|