69940: Process detail page intermediate commit

resources/i18n/en.json5

@@ -1534,6 +1534,8 @@
 
 
 
+  "process.page.detail.title" : "Process: {{ id }} - {{ name }}",
+
   "process.page.overview.table.finish" : "Finish time",
 
   "process.page.overview.table.id" : "Process ID",

src/app/core/data/processes/process-data.service.ts

@@ -10,8 +10,11 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { HttpClient } from '@angular/common/http';
 import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
 import { Process } from '../../../process-page/processes/process.model';
+import { dataService } from '../../cache/builders/build-decorators';
+import { PROCESS } from '../../../process-page/processes/process.resource-type';
 
 @Injectable()
+@dataService(PROCESS)
 export class ProcessDataService extends DataService<Process> {
   protected linkPath = 'processes';
 

src/app/core/data/processes/script-data.service.ts

@@ -16,8 +16,11 @@ import { MultipartPostRequest, RestRequest } from '../request.models';
 import { RequestService } from '../request.service';
 import { Observable } from 'rxjs';
 import { RequestEntry } from '../request.reducer';
+import { dataService } from '../../cache/builders/build-decorators';
+import { SCRIPT } from '../../../process-page/scripts/script.resource-type';
 
 @Injectable()
+@dataService(SCRIPT)
 export class ScriptDataService extends DataService<Script> {
   protected linkPath = 'scripts';
 

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

@@ -0,0 +1,2 @@
+<h4 class="mt-3">{{title | translate}}</h4>
+<ng-content></ng-content>

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

@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-process-detail-field',
+  templateUrl: './process-detail-field.component.html',
+})
+export class ProcessDetailFieldComponent {
+  @Input() title: string;
+}

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

@@ -0,0 +1,7 @@
+<div class="container" *ngVar="(processRD$ | async)?.payload as process">
+  <h2>{{'process.page.detail.title' | translate:{ id: process?.id, name: process?.scriptName } }}</h2>
+
+  <ds-process-detail-field [title]="'process.page.detail.script'">
+    <div>{{ process?.scriptName }}</div>
+  </ds-process-detail-field>
+</div>

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

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Process } from '../processes/process.model';
+import { map } from 'rxjs/operators';
+import { redirectToPageNotFoundOn404 } from '../../core/shared/operators';
+
+@Component({
+  selector: 'ds-process-detail',
+  templateUrl: './process-detail.component.html',
+})
+export class ProcessDetailComponent implements OnInit {
+
+  processRD$: Observable<RemoteData<Process>>;
+
+  constructor(protected route: ActivatedRoute,
+              protected router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.processRD$ = this.route.data.pipe(
+      map((data) => data.process as RemoteData<Process>),
+      redirectToPageNotFoundOn404(this.router)
+    );
+  }
+
+}

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

@@ -2,6 +2,8 @@ import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
 import { NewProcessComponent } from './new/new-process.component';
 import { ProcessOverviewComponent } from './overview/process-overview.component';
+import { ProcessPageResolver } from './process-page.resolver';
+import { ProcessDetailComponent } from './detail/process-detail.component';
 
 @NgModule({
   imports: [
@@ -15,7 +17,17 @@ import { ProcessOverviewComponent } from './overview/process-overview.component'
         component: NewProcessComponent,
         data: { title: 'process.new.title' }
       },
+      {
+        path: ':id',
+        component: ProcessDetailComponent,
+        resolve: {
+          process: ProcessPageResolver
+        }
+      }
     ])
+  ],
+  providers: [
+    ProcessPageResolver
   ]
 })
 export class ProcessPageRoutingModule {

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

@@ -12,6 +12,8 @@ import { FileValueInputComponent } from './new/process-parameters/parameter-valu
 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';
+import { ProcessDetailComponent } from './detail/process-detail.component';
+import { ProcessDetailFieldComponent } from './detail/process-detail-field/process-detail-field.component';
 
 @NgModule({
   imports: [
@@ -29,7 +31,9 @@ import { ProcessOverviewComponent } from './overview/process-overview.component'
     FileValueInputComponent,
     BooleanValueInputComponent,
     DateValueInputComponent,
-    ProcessOverviewComponent
+    ProcessOverviewComponent,
+    ProcessDetailComponent,
+    ProcessDetailFieldComponent
   ],
   entryComponents: []
 })

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

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { RemoteData } from '../core/data/remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { find } from 'rxjs/operators';
+import { hasValue } from '../shared/empty.util';
+import { ProcessDataService } from './processes/process-data.service';
+import { Process } from './processes/process.model';
+import { followLink } from '../shared/utils/follow-link-config.model';
+
+/**
+ * This class represents a resolver that requests a specific process before the route is activated
+ */
+@Injectable()
+export class ProcessPageResolver implements Resolve<RemoteData<Process>> {
+  constructor(private processService: ProcessDataService) {
+  }
+
+  /**
+   * Method for resolving a process based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Process>> Emits the found process based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Process>> {
+    return this.processService.findById(route.params.id, followLink('script')).pipe(
+      find((RD) => hasValue(RD.error) || RD.hasSucceeded),
+    );
+  }
+}

src/app/process-page/processes/process.model.ts

@@ -6,7 +6,13 @@ import { autoserialize, deserialize } from 'cerialize';
 import { PROCESS } from './process.resource-type';
 import { excludeFromEquals } from '../../core/utilities/equals.decorators';
 import { ResourceType } from '../../core/shared/resource-type';
-import { typedObject } from '../../core/cache/builders/build-decorators';
+import { link, typedObject } from '../../core/cache/builders/build-decorators';
+import { COLLECTION } from '../../core/shared/collection.resource-type';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Collection } from '../../core/shared/collection.model';
+import { SCRIPT } from '../scripts/script.resource-type';
+import { Script } from '../scripts/script.model';
 
 /**
  * Object representing a process
@@ -74,4 +80,11 @@ export class Process implements CacheableObject {
     output: HALLink,
     files: HALLink
   };
+
+  /**
+   * The Script that created this Process
+   * Will be undefined unless the owningCollection {@link HALLink} has been resolved.
+   */
+  @link(SCRIPT)
+  script?: Observable<RemoteData<Script>>;
 }