69940: Process overview page

resources/i18n/en.json5

@@ -1534,6 +1534,22 @@
 
 
 
+  "process.page.overview.table.finish" : "Finish time",
+
+  "process.page.overview.table.id" : "Process ID",
+
+  "process.page.overview.table.name" : "Name",
+
+  "process.page.overview.table.start" : "Start time",
+
+  "process.page.overview.table.status" : "Status",
+
+  "process.page.overview.table.user" : "User",
+
+  "process.page.overview.title": "Processes Overview",
+
+
+
   "profile.breadcrumbs": "Update Profile",
 
   "profile.card.identify": "Identify",

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

@@ -0,0 +1,33 @@
+<div class="container">
+  <h2>{{'process.page.overview.title' | translate}}</h2>
+  <ds-pagination  *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
+                  [paginationOptions]="pageConfig"
+                  [pageInfoState]="(processesRD$ | async)?.payload"
+                  [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
+                  [hideGear]="true"
+                  [hidePagerWhenSinglePage]="true"
+                  (pageChange)="onPageChange($event)">
+    <table class="table table-striped table-hover table-responsive">
+      <thead>
+        <tr>
+          <th scope="col">{{'process.page.overview.table.id' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.name' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.user' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.start' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.finish' | translate}}</th>
+          <th scope="col">{{'process.page.overview.table.status' | translate}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let process of (processesRD$ | async)?.payload?.page">
+          <td><a [routerLink]="['/processes/', process.processId]">{{process.processId}}</a></td>
+          <td><a [routerLink]="['/processes/', process.processId]">{{process.scriptName}}</a></td>
+          <td *ngVar="(getEpersonName(process.userId) | async) as ePersonName">{{ePersonName}}</td>
+          <td>{{process.startTime}}</td>
+          <td>{{process.endTime}}</td>
+          <td>{{process.processStatus}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </ds-pagination>
+</div>

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

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { ProcessDataService } from '../processes/process-data.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { Process } from '../processes/process.model';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { FindListOptions } from '../../core/data/request.models';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'ds-process-overview',
+  templateUrl: './process-overview.component.html',
+})
+/**
+ * Component displaying a list of all processes in a paginated table
+ */
+export class ProcessOverviewComponent implements OnInit {
+
+  /**
+   * List of all processes
+   */
+  processesRD$: Observable<RemoteData<PaginatedList<Process>>>;
+
+  /**
+   * The current pagination configuration for the page used by the FindAll method
+   */
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+
+  /**
+   * The current pagination configuration for the page
+   */
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'process-overview-pagination',
+    pageSize: 20
+  });
+
+  constructor(protected processService: ProcessDataService,
+              protected ePersonService: EPersonDataService) {
+  }
+
+  ngOnInit(): void {
+    this.setProcesses();
+  }
+
+  /**
+   * When the page is changed, make sure to update the list of processes to match the new page
+   * @param event The page change event
+   */
+  onPageChange(event) {
+    this.config = Object.assign(new FindListOptions(), this.config, {
+      currentPage: event,
+    });
+    this.pageConfig.currentPage = event;
+    this.setProcesses();
+  }
+
+  /**
+   * Send a request to fetch all processes for the current page
+   */
+  setProcesses() {
+    this.processesRD$ = this.processService.findAll(this.config);
+  }
+
+  /**
+   * Get the name of an EPerson by ID
+   * @param id  ID of the EPerson
+   */
+  getEpersonName(id: string): Observable<string> {
+    return this.ePersonService.findById(id).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      map((eperson: EPerson) => eperson.name)
+    );
+  }
+
+}

src/app/process-page/process-page-routing.module.ts

@@ -1,10 +1,15 @@
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { NewProcessComponent } from './new/new-process.component';
+import { ProcessOverviewComponent } from './overview/process-overview.component';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
+      {
+        path: '',
+        component: ProcessOverviewComponent,
+      },
       {
         path: 'new',
         component: NewProcessComponent,

src/app/process-page/process-page.module.ts

@@ -11,6 +11,7 @@ import { ParameterValueInputComponent } from './new/process-parameters/parameter
 import { FileValueInputComponent } from './new/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
 import { BooleanValueInputComponent } from './new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
 import { DateValueInputComponent } from './new/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
+import { ProcessOverviewComponent } from './overview/process-overview.component';
 
 @NgModule({
   imports: [
@@ -28,6 +29,7 @@ import { DateValueInputComponent } from './new/process-parameters/parameter-valu
     FileValueInputComponent,
     BooleanValueInputComponent,
     DateValueInputComponent,
+    ProcessOverviewComponent
   ],
   entryComponents: []
 })