97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
import {
|
|
Component,
|
|
Inject,
|
|
InjectionToken,
|
|
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";
|
|
import {isPlatformBrowser} from "@angular/common";
|
|
|
|
@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: any) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.getReport();
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
if (changes.alias) {
|
|
this.clear();
|
|
this.getReport();
|
|
}
|
|
}
|
|
|
|
getReport() {
|
|
this.subscriptions.push(this.cacheIndicatorsService.getReport(this.alias).subscribe(report => {
|
|
this.getReportInterval(report);
|
|
}, error => {
|
|
this.report = null;
|
|
}));
|
|
}
|
|
|
|
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 => {
|
|
this.report = report;
|
|
if (this.report.completed) {
|
|
this.destroy$.next();
|
|
}
|
|
}));
|
|
}
|
|
}
|
|
|
|
clear() {
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscription) {
|
|
subscription.unsubscribe();
|
|
}
|
|
});
|
|
this.report = null;
|
|
}
|
|
|
|
get isBrowser() {
|
|
return isPlatformBrowser(this.platformId);
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.clear();
|
|
}
|
|
}
|