[DURACOM-131] Added automatic refresh every 5 seconds if the status is running

src/app/process-page/detail/process-detail.component.html

@@ -1,10 +1,15 @@
-<div class="container" *ngVar="(processRD$ | async)?.payload as process">
-    <div class="d-flex">
-        <h2 class="flex-grow-1">{{'process.detail.title' | translate:{
-            id: process?.processId,
-            name: process?.scriptName
-        } }}</h2>
+<div class="container" *ngIf="(processRD$ | async)?.payload as process">
+    <div class="row">
+      <div class="col-10">
+        <h2 class="flex-grow-1">
+          {{ 'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}
+        </h2>
       </div>
+      <div *ngIf="refreshCounter$ | async as seconds" class="col-2">
+        Refreshing in {{ seconds }}s <i class="fas fa-sync-alt fa-spin"></i>
+      </div>
+    </div>
+
     <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
         <div>{{ process?.scriptName }}</div>
     </ds-process-detail-field>
@@ -72,7 +77,7 @@
 
 <ng-template #deleteModal >
 
-    <div *ngVar="(processRD$ | async)?.payload as process">
+    <div *ngIf="(processRD$ | async)?.payload as process">
 
         <div class="modal-header">
             <div>

src/app/process-page/detail/process-detail.component.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, NgZone, OnInit } from '@angular/core';
+import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, interval, Observable, shareReplay, Subscription } from 'rxjs';
 import { finalize, map, switchMap, take, tap } from 'rxjs/operators';
 import { AuthService } from '../../core/auth/auth.service';
 import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
@@ -26,6 +26,7 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { getProcessListRoute } from '../process-page-routing.paths';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { followLink } from '../../shared/utils/follow-link-config.model';
 
 @Component({
   selector: 'ds-process-detail',
@@ -34,7 +35,7 @@ import { TranslateService } from '@ngx-translate/core';
 /**
  * A component displaying detailed information about a DSpace Process
  */
-export class ProcessDetailComponent implements OnInit {
+export class ProcessDetailComponent implements OnInit, OnDestroy {
 
   /**
    * The AlertType enumeration
@@ -65,23 +66,28 @@ export class ProcessDetailComponent implements OnInit {
   /**
    * Boolean on whether or not to show the output logs
    */
-  showOutputLogs;
+  showOutputLogs = false;
   /**
    * When it's retrieving the output logs from backend, to show loading component
    */
-  retrievingOutputLogs$: BehaviorSubject<boolean>;
+  retrievingOutputLogs$ = new BehaviorSubject<boolean>(false);
 
   /**
    * Date format to use for start and end time of processes
    */
   dateFormat = 'yyyy-MM-dd HH:mm:ss ZZZZ';
 
+  refreshCounter$ = new BehaviorSubject(0);
+
   /**
    * Reference to NgbModal
    */
   protected modalRef: NgbModalRef;
 
-  constructor(protected route: ActivatedRoute,
+  private refreshTimerSub?: Subscription;
+
+  constructor(
+    protected route: ActivatedRoute,
     protected router: Router,
     protected processService: ProcessDataService,
     protected bitstreamDataService: BitstreamDataService,
@@ -92,21 +98,23 @@ export class ProcessDetailComponent implements OnInit {
     protected modalService: NgbModal,
     protected notificationsService: NotificationsService,
     protected translateService: TranslateService
-  ) {
-  }
+  ) {}
 
   /**
    * Initialize component properties
    * Display a 404 if the process doesn't exist
    */
   ngOnInit(): void {
-    this.showOutputLogs = false;
-    this.retrievingOutputLogs$ = new BehaviorSubject<boolean>(false);
     this.processRD$ = this.route.data.pipe(
       map((data) => {
+        if (!this.isProcessFinished(data.process.payload)) {
+          this.startRefreshTimer();
+        }
+
         return data.process as RemoteData<Process>;
       }),
-      redirectOn4xx(this.router, this.authService)
+      redirectOn4xx(this.router, this.authService),
+      shareReplay(1)
     );
 
     this.filesRD$ = this.processRD$.pipe(
@@ -115,6 +123,54 @@ export class ProcessDetailComponent implements OnInit {
     );
   }
 
+  refresh() {
+    this.processRD$ = this.processService.findById(
+      this.route.snapshot.params.id,
+      false,
+      true,
+      followLink('script')
+    ).pipe(
+      getFirstSucceededRemoteData(),
+      redirectOn4xx(this.router, this.authService),
+      tap((processRemoteData: RemoteData<Process>) => {
+        console.log('refresh', processRemoteData);
+        if (!this.isProcessFinished(processRemoteData.payload)) {
+          this.startRefreshTimer();
+        }
+      }),
+      shareReplay(1)
+    );
+
+    this.filesRD$ = this.processRD$.pipe(
+      getFirstSucceededRemoteDataPayload(),
+      switchMap((process: Process) => this.processService.getFiles(process.processId))
+    );
+  }
+
+  startRefreshTimer() {
+    this.refreshCounter$.next(0);
+
+    this.refreshTimerSub = interval(1000).subscribe(
+      value => {
+        if (value > 5) {
+          setTimeout(() => {
+            this.refresh();
+            this.stopRefreshTimer();
+            this.refreshCounter$.next(0);
+          }, 1);
+        } else {
+          this.refreshCounter$.next(5 - value);
+        }
+      });
+  }
+
+  stopRefreshTimer() {
+    if (hasValue(this.refreshTimerSub)) {
+      this.refreshTimerSub.unsubscribe();
+      this.refreshTimerSub = undefined;
+    }
+  }
+
   /**
    * Get the name of a bitstream
    * @param bitstream
@@ -210,6 +266,7 @@ export class ProcessDetailComponent implements OnInit {
   openDeleteModal(content) {
     this.modalRef = this.modalService.open(content);
   }
+
   /**
    * Close the modal.
    */
@@ -217,4 +274,7 @@ export class ProcessDetailComponent implements OnInit {
     this.modalRef.close();
   }
 
+  ngOnDestroy(): void {
+    this.stopRefreshTimer();
+  }
 }