From 10932bb474d677e6fe3e6b60c8f325bf9e16f70a Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 29 Jun 2023 13:31:02 +0300 Subject: [PATCH] Add caching indicators status in stakeholder admin pages with circle progress and percentage. --- src/app/app.component.html | 1 + src/app/app.module.ts | 5 +- .../cache-indicators.component.less | 9 +++ .../cache-indicators.component.ts | 79 +++++++++++++++++++ .../cache-indicators.module.ts | 11 +++ src/app/openaireLibrary | 2 +- .../services/cache-indicators.service.ts | 10 ++- 7 files changed, 110 insertions(+), 7 deletions(-) create mode 100644 src/app/cache-indicators/cache-indicators.component.less create mode 100644 src/app/cache-indicators/cache-indicators.component.ts create mode 100644 src/app/cache-indicators/cache-indicators.module.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index 8b1bf09..848c146 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -17,6 +17,7 @@ +
You are currently in a "Preview" mode. The current view of this dashboard may differ. diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d83acd9..7a3c945 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,9 +29,10 @@ import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard"; import {IconsModule} from "./openaireLibrary/utils/icons/icons.module"; import {IconsService} from "./openaireLibrary/utils/icons/icons.service"; import {incognito} from "./openaireLibrary/utils/icons/icons"; +import {CacheIndicatorsModule} from "./cache-indicators/cache-indicators.module"; @NgModule({ - + imports: [ SharedModule, BrowserAnimationsModule, @@ -44,7 +45,7 @@ import {incognito} from "./openaireLibrary/utils/icons/icons"; CookieLawModule, BrowserModule.withServerTransition({appId: 'serverApp'}), AppRoutingModule, - SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule + SideBarModule, Schema2jsonldModule, RoleVerificationModule, LoadingModule, NotificationsSidebarModule, IconsModule, CacheIndicatorsModule ], declarations: [AppComponent, OpenaireErrorPageComponent], exports: [AppComponent], diff --git a/src/app/cache-indicators/cache-indicators.component.less b/src/app/cache-indicators/cache-indicators.component.less new file mode 100644 index 0000000..08d5c2a --- /dev/null +++ b/src/app/cache-indicators/cache-indicators.component.less @@ -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; +} diff --git a/src/app/cache-indicators/cache-indicators.component.ts b/src/app/cache-indicators/cache-indicators.component.ts new file mode 100644 index 0000000..32fd00b --- /dev/null +++ b/src/app/cache-indicators/cache-indicators.component.ts @@ -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: ` +
+
+
+ +
+
+ `, + 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(); + } +} diff --git a/src/app/cache-indicators/cache-indicators.module.ts b/src/app/cache-indicators/cache-indicators.module.ts new file mode 100644 index 0000000..aa9cd99 --- /dev/null +++ b/src/app/cache-indicators/cache-indicators.module.ts @@ -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 {} diff --git a/src/app/openaireLibrary b/src/app/openaireLibrary index 21fde9c..c1b1d2e 160000 --- a/src/app/openaireLibrary +++ b/src/app/openaireLibrary @@ -1 +1 @@ -Subproject commit 21fde9cbac2b3b9f93488d95de52d0d063a87fab +Subproject commit c1b1d2e4ecec7535a4b3e993159797504247e1e7 diff --git a/src/app/utils/services/cache-indicators.service.ts b/src/app/utils/services/cache-indicators.service.ts index cc36298..64320cb 100644 --- a/src/app/utils/services/cache-indicators.service.ts +++ b/src/app/utils/services/cache-indicators.service.ts @@ -1,9 +1,9 @@ import {Injectable} from "@angular/core"; import {HttpClient} from "@angular/common/http"; import {properties} from "../../../environments/environment"; -import {Observable} from "rxjs"; +import {BehaviorSubject, Observable} from "rxjs"; import {CustomOptions} from "../../openaireLibrary/services/servicesUtils/customOptions.class"; -import {map} from "rxjs/operators"; +import {map, tap} from "rxjs/operators"; import {Report} from "../../../cache-indicators"; @Injectable({ @@ -15,10 +15,12 @@ export class CacheIndicatorsService { } createReport(alias: string) { - return this.http.post(properties.domain + properties.baseLink + '/cache/' + alias, {}, CustomOptions.registryOptions()); + return this.http.post(properties.domain + properties.baseLink + '/cache/' + alias, {}, CustomOptions.registryOptions()) + .pipe(map(res => res.report)); } getReport(alias: string) { - return this.http.get(properties.domain + properties.baseLink + '/cache/' + alias, CustomOptions.registryOptions()); + return this.http.get(properties.domain + properties.baseLink + '/cache/' + alias, CustomOptions.registryOptions()) + .pipe(map(res => res.report)); } }