Add caching indicators status in stakeholder admin pages with circle progress and percentage.

This commit is contained in:
Konstantinos Triantafyllou 2023-06-29 13:31:02 +03:00
parent c95998e8e4
commit 10932bb474
7 changed files with 110 additions and 7 deletions

View File

@ -17,6 +17,7 @@
</main> </main>
<bottom id="bottom" *ngIf="isFrontPage" [centered]="true" [properties]="properties" [showMenuItems]="true"></bottom> <bottom id="bottom" *ngIf="isFrontPage" [centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>
<notification-sidebar *ngIf="!isMobile && user && notificationGroupsInitialized" [configuration]="notificationConfiguration" [user]="user"></notification-sidebar> <notification-sidebar *ngIf="!isMobile && user && notificationGroupsInitialized" [configuration]="notificationConfiguration" [user]="user"></notification-sidebar>
<cache-indicators *ngIf="stakeholder && !isFrontPage && isCurator()" [alias]="stakeholder.alias"></cache-indicators>
</div> </div>
<div *ngIf="view" class="preview uk-text-small uk-flex uk-flex-middle"> <div *ngIf="view" class="preview uk-text-small uk-flex uk-flex-middle">
<span>You are currently in a <span class="uk-text-bold">"Preview"</span> mode. <span class="uk-visible@m"><a (click)="removeView()">The current view</a> of this dashboard may differ.</span></span> <span>You are currently in a <span class="uk-text-bold">"Preview"</span> mode. <span class="uk-visible@m"><a (click)="removeView()">The current view</a> of this dashboard may differ.</span></span>

View File

@ -29,6 +29,7 @@ import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
import {IconsModule} from "./openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "./openaireLibrary/utils/icons/icons.module";
import {IconsService} from "./openaireLibrary/utils/icons/icons.service"; import {IconsService} from "./openaireLibrary/utils/icons/icons.service";
import {incognito} from "./openaireLibrary/utils/icons/icons"; import {incognito} from "./openaireLibrary/utils/icons/icons";
import {CacheIndicatorsModule} from "./cache-indicators/cache-indicators.module";
@NgModule({ @NgModule({
@ -44,7 +45,7 @@ import {incognito} from "./openaireLibrary/utils/icons/icons";
CookieLawModule, CookieLawModule,
BrowserModule.withServerTransition({appId: 'serverApp'}), BrowserModule.withServerTransition({appId: 'serverApp'}),
AppRoutingModule, AppRoutingModule,
SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule, CacheIndicatorsModule
], ],
declarations: [AppComponent, OpenaireErrorPageComponent], declarations: [AppComponent, OpenaireErrorPageComponent],
exports: [AppComponent], exports: [AppComponent],

View File

@ -0,0 +1,9 @@
@import (reference) "~src/assets/openaire-theme/less/_import-variables.less";
.cache-progress {
position: fixed;
bottom: 0;
right: 0;
transform: translate(-50%, -50%);
z-index: @global-z-index;
}

View File

@ -0,0 +1,79 @@
import {Component, Inject, Input, OnChanges, OnDestroy, OnInit, PLATFORM_ID, SimpleChanges} from "@angular/core";
import {Report} from "../../cache-indicators";
import {CacheIndicatorsService} from "../utils/services/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;
// TODO check when change alias;
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();
}
}

View File

@ -0,0 +1,11 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {CacheIndicatorsComponent} from "./cache-indicators.component";
import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
@NgModule({
imports: [CommonModule, IconsModule],
declarations: [CacheIndicatorsComponent],
exports: [CacheIndicatorsComponent]
})
export class CacheIndicatorsModule {}

@ -1 +1 @@
Subproject commit 21fde9cbac2b3b9f93488d95de52d0d063a87fab Subproject commit c1b1d2e4ecec7535a4b3e993159797504247e1e7

View File

@ -1,9 +1,9 @@
import {Injectable} from "@angular/core"; import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import {properties} from "../../../environments/environment"; import {properties} from "../../../environments/environment";
import {Observable} from "rxjs"; import {BehaviorSubject, Observable} from "rxjs";
import {CustomOptions} from "../../openaireLibrary/services/servicesUtils/customOptions.class"; import {CustomOptions} from "../../openaireLibrary/services/servicesUtils/customOptions.class";
import {map} from "rxjs/operators"; import {map, tap} from "rxjs/operators";
import {Report} from "../../../cache-indicators"; import {Report} from "../../../cache-indicators";
@Injectable({ @Injectable({
@ -15,10 +15,12 @@ export class CacheIndicatorsService {
} }
createReport(alias: string) { createReport(alias: string) {
return this.http.post<Report>(properties.domain + properties.baseLink + '/cache/' + alias, {}, CustomOptions.registryOptions()); return this.http.post<any>(properties.domain + properties.baseLink + '/cache/' + alias, {}, CustomOptions.registryOptions())
.pipe(map(res => res.report));
} }
getReport(alias: string) { getReport(alias: string) {
return this.http.get<Report>(properties.domain + properties.baseLink + '/cache/' + alias, CustomOptions.registryOptions()); return this.http.get<any>(properties.domain + properties.baseLink + '/cache/' + alias, CustomOptions.registryOptions())
.pipe(map(res => res.report));
} }
} }