diff --git a/resources/i18n/en.json5 b/resources/i18n/en.json5
index 2f6c604bc4..6a9b460014 100644
--- a/resources/i18n/en.json5
+++ b/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",
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
new file mode 100644
index 0000000000..fef4b72776
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -0,0 +1,33 @@
+
+
{{'process.page.overview.title' | translate}}
+
0"
+ [paginationOptions]="pageConfig"
+ [pageInfoState]="(processesRD$ | async)?.payload"
+ [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
+ [hideGear]="true"
+ [hidePagerWhenSinglePage]="true"
+ (pageChange)="onPageChange($event)">
+
+
+
+ {{'process.page.overview.table.id' | translate}} |
+ {{'process.page.overview.table.name' | translate}} |
+ {{'process.page.overview.table.user' | translate}} |
+ {{'process.page.overview.table.start' | translate}} |
+ {{'process.page.overview.table.finish' | translate}} |
+ {{'process.page.overview.table.status' | translate}} |
+
+
+
+
+ {{process.processId}} |
+ {{process.scriptName}} |
+ {{ePersonName}} |
+ {{process.startTime}} |
+ {{process.endTime}} |
+ {{process.processStatus}} |
+
+
+
+
+
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
new file mode 100644
index 0000000000..67f03b07b3
--- /dev/null
+++ b/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>>;
+
+ /**
+ * 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 {
+ return this.ePersonService.findById(id).pipe(
+ getFirstSucceededRemoteDataPayload(),
+ map((eperson: EPerson) => eperson.name)
+ );
+ }
+
+}
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
index bfa7b59193..6a73c4d210 100644
--- a/src/app/process-page/process-page-routing.module.ts
+++ b/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,
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 3652efe825..4e0155661b 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/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: []
})