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

src/app/app.component.html

@@ -17,6 +17,7 @@
         </main>
         <bottom id="bottom" *ngIf="isFrontPage" [centered]="true" [properties]="properties" [showMenuItems]="true"></bottom>
         <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 *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>

src/app/app.module.ts

@@ -29,6 +29,7 @@ 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({
 
@@ -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],

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;
+}

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: `
+    <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();
+  }
+}

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 {}

src/app/openaireLibrary

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

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<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) {
-    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));
   }
 }