Merge pull request #1408 from 4Science/CST-4903

[CST-4903] The start time and end time of the export process are different

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

@@ -2,7 +2,7 @@
     <div class="d-flex">
         <h2 class="flex-grow-1">{{'process.detail.title' | translate:{id: process?.processId, name: process?.scriptName} }}</h2>
         <div>
-            <a class="btn btn-light" [routerLink]="'/processes/new'" [queryParams]="{id: process?.processId}">{{'process.detail.create' | translate}}</a>
+            <button class="btn btn-lg btn-success " routerLink="/processes/new" [queryParams]="{id: process?.processId}"><i class="fas fa-plus pr-2"></i>{{'process.detail.create' | translate}}</button>
         </div>
     </div>
     <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
@@ -23,11 +23,11 @@
     </div>
 
     <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time" [title]="'process.detail.start-time' | translate">
-        <div>{{ process.startTime }}</div>
+        <div>{{ process.startTime | date:dateFormat:'UTC' }}</div>
     </ds-process-detail-field>
 
     <ds-process-detail-field *ngIf="process && process.endTime" id="process-end-time" [title]="'process.detail.end-time' | translate">
-        <div>{{ process.endTime }}</div>
+        <div>{{ process.endTime | date:dateFormat:'UTC' }}</div>
     </ds-process-detail-field>
 
     <ds-process-detail-field *ngIf="process && process.processStatus" id="process-status" [title]="'process.detail.status' | translate">
@@ -35,7 +35,7 @@
     </ds-process-detail-field>
 
     <ds-process-detail-field *ngIf="isProcessFinished(process)" id="process-output" [title]="'process.detail.output'">
-      <button *ngIf="!showOutputLogs && process?._links?.output?.href != undefined" id="showOutputButton" class="btn btn-light" (click)="showProcessOutputLogs()">
+      <button *ngIf="!showOutputLogs && process?._links?.output?.href != undefined" id="showOutputButton" class="btn btn-primary" (click)="showProcessOutputLogs()">
         {{ 'process.detail.logs.button' | translate }}
       </button>
       <ds-loading *ngIf="retrievingOutputLogs$ | async" class="ds-loading" message="{{ 'process.detail.logs.loading' | translate }}"></ds-loading>
@@ -47,7 +47,7 @@
       </p>
     </ds-process-detail-field>
 
-    <div>
+    <div style="text-align: right;">
-      <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
+      <a class="btn btn-outline-secondary mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
     </div>
 </div>

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

@@ -66,6 +66,11 @@ export class ProcessDetailComponent implements OnInit {
    */
   retrievingOutputLogs$: BehaviorSubject<boolean>;
 
+  /**
+   * Date format to use for start and end time of processes
+   */
+  dateFormat = 'yyyy-MM-dd HH:mm:ss ZZZZ';
+
   constructor(protected route: ActivatedRoute,
               protected router: Router,
               protected processService: ProcessDataService,

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

@@ -26,8 +26,8 @@
                     <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 | date:dateFormat}}</td>
+                    <td>{{process.startTime | date:dateFormat:'UTC'}}</td>
-                    <td>{{process.endTime | date:dateFormat}}</td>
+                    <td>{{process.endTime | date:dateFormat:'UTC'}}</td>
                     <td>{{process.processStatus}}</td>
                 </tr>
                 </tbody>

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

@@ -12,12 +12,9 @@ import { By } from '@angular/platform-browser';
 import { ProcessStatus } from '../processes/process-status.model';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 import { createPaginatedList } from '../../shared/testing/utils.test';
-import { of as observableOf } from 'rxjs';
 import { PaginationService } from '../../core/pagination/pagination.service';
-import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
-import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
-import { FindListOptions } from '../../core/data/request.models';
 import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub';
+import { DatePipe } from '@angular/common';
 
 describe('ProcessOverviewComponent', () => {
   let component: ProcessOverviewComponent;
@@ -30,27 +27,29 @@ describe('ProcessOverviewComponent', () => {
   let processes: Process[];
   let ePerson: EPerson;
 
+  const pipe = new DatePipe('en-US');
+
   function init() {
     processes = [
       Object.assign(new Process(), {
         processId: 1,
         scriptName: 'script-name',
-        startTime: '2020-03-19',
+        startTime: '2020-03-19 00:30:00',
-        endTime: '2020-03-19',
+        endTime: '2020-03-19 23:30:00',
         processStatus: ProcessStatus.COMPLETED
       }),
       Object.assign(new Process(), {
         processId: 2,
         scriptName: 'script-name',
-        startTime: '2020-03-20',
+        startTime: '2020-03-20 00:30:00',
-        endTime: '2020-03-20',
+        endTime: '2020-03-20 23:30:00',
         processStatus: ProcessStatus.FAILED
       }),
       Object.assign(new Process(), {
         processId: 3,
         scriptName: 'another-script-name',
-        startTime: '2020-03-21',
+        startTime: '2020-03-21 00:30:00',
-        endTime: '2020-03-21',
+        endTime: '2020-03-21 23:30:00',
         processStatus: ProcessStatus.RUNNING
       })
     ];
@@ -135,14 +134,14 @@ describe('ProcessOverviewComponent', () => {
     it('should display the start time in the fourth column', () => {
       rowElements.forEach((rowElement, index) => {
         const el = rowElement.query(By.css('td:nth-child(4)')).nativeElement;
-        expect(el.textContent).toContain(processes[index].startTime);
+        expect(el.textContent).toContain(pipe.transform(processes[index].startTime, component.dateFormat, 'UTC'));
       });
     });
 
     it('should display the end time in the fifth column', () => {
       rowElements.forEach((rowElement, index) => {
         const el = rowElement.query(By.css('td:nth-child(5)')).nativeElement;
-        expect(el.textContent).toContain(processes[index].endTime);
+        expect(el.textContent).toContain(pipe.transform(processes[index].endTime, component.dateFormat, 'UTC'));
       });
     });
 

src/assets/i18n/en.json5

@@ -2777,13 +2777,13 @@
 
 
 
-  "process.overview.table.finish" : "Finish time",
+  "process.overview.table.finish" : "Finish time (UTC)",
 
   "process.overview.table.id" : "Process ID",
 
   "process.overview.table.name" : "Name",
 
-  "process.overview.table.start" : "Start time",
+  "process.overview.table.start" : "Start time (UTC)",
 
   "process.overview.table.status" : "Status",