gh-632 Fix Job Executions are not showing up on Jobs tab

gh-637 Fix Job Execution Ids not shown on Task details page

* Add Job Execution ids being shown as buttons
* Link buttons to Job Execution details page
* Add tests

fixed misspell

Author: ghillert

ui/src/app/jobs/jobs.component.html

@@ -27,11 +27,11 @@ <h1>Batch Job Executions</h1>
     </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let item of jobExecutions.items | searchFilter: jobExecutions.filter | paginate: jobExecutions.getPaginationInstance(); index as i">
+  <tr *ngFor="let item of jobExecutions.items | paginate: jobExecutions.getPaginationInstance(); index as i">
     <td>{{ item.name }} <app-definition-status [jobExecution]="item"></app-definition-status></td>
     <td><a href="javascript:void(0);" (click)="viewTaskExecutionDetails(item)">{{ item.taskExecutionId }}</a></td>
     <td>{{ item.jobInstanceId }}</td>
-    <td>{{ item.taskExecutionId }}</td>
+    <td>{{ item.jobExecutionId }}</td>
     <td>{{ item.startTimeFormatted }}</td>
     <td>{{ item.stepExecutionCount }}</td>
     <td><app-job-execution-status [status]="item.status"></app-job-execution-status></td>

ui/src/app/tasks/task-details/task-details.component.html

@@ -36,12 +36,20 @@
       <td>Batch Job</td>
       <td>
         <span *ngIf="taskExecution.jobExecutionIds.length > 0" class="glyphicon glyphicon-ok text-info"></span>
-        <span *ngIf="taskExecution.jobExecutionIds.length == 0" class="glyphicon glyphicon-remove"></span>
+        <span *ngIf="taskExecution.jobExecutionIds.length == 0" class="glyphicon glyphicon-remove text-danger"></span>
       </td>
     </tr>
     <tr>
       <td>Job Execution Ids</td>
-      <td></td>
+      <td *ngIf="taskExecution.jobExecutionIds.length > 0" id="jobExecutionIds">
+        <button class="btn btn-default" type="button" (click)="goToJobExecution(jobExecutionId)"
+          *ngFor="let jobExecutionId of taskExecution.jobExecutionIds">
+          {{ jobExecutionId }}
+        </button>
+      </td>
+      <td *ngIf="taskExecution.jobExecutionIds.length == 0">
+          N/A
+      </td>
     </tr>
     <tr>
       <td>Start Time</td>

ui/src/app/tasks/task-details/task-details.component.spec.ts

@@ -36,7 +36,18 @@ describe('TaskExecutionsDetailsComponent', () => {
     errorMessage: null,
     externalExecutionId: 'footask-d465ffe7-6874-42f7-ab04-191e9e6c6376'
     }};
-
+  const commonTestExecutionDetailsWithJobIds = { 1: {
+    executionId: 1,
+    exitCode: 0,
+    taskName: 'footask',
+    startTime: moment('2017-08-10T05:46:19.079Z'),
+    endTime: moment('2017-08-10T05:46:19.098Z'),
+    exitMessage: null,
+    arguments: ['--spring.cloud.task.executionid=1'],
+    jobExecutionIds: [1, 2, 3],
+    errorMessage: null,
+    externalExecutionId: 'footask-d465ffe7-6874-42f7-ab04-191e9e6c6376'
+    }};
 
   beforeEach(async(() => {
     activeRoute = new MockActivatedRoute();
@@ -99,7 +110,56 @@ describe('TaskExecutionsDetailsComponent', () => {
     expect(des[12].nativeElement.textContent).toContain('Batch Job');
     expect(des[13].query(By.css('span')).nativeElement.classList.contains('glyphicon-remove')).toBe(true);
     expect(des[14].nativeElement.textContent).toContain('Job Execution Ids');
-    expect(des[15].nativeElement.textContent).toBe('');
+    expect(des[15].nativeElement.textContent).toContain('N/A');
+    expect(des[16].nativeElement.textContent).toContain('Start Time');
+    expect(des[17].nativeElement.textContent).toContain(expectedStart);
+    expect(des[18].nativeElement.textContent).toContain('End Time');
+    expect(des[19].nativeElement.textContent).toContain(expectedStop);
+    expect(des[20].nativeElement.textContent).toContain('Duration');
+    expect(des[21].nativeElement.textContent).toContain('00:00:00.019');
+    expect(des[22].nativeElement.textContent).toContain('Exit Code');
+    expect(des[23].nativeElement.textContent).toContain('0');
+    expect(des[24].nativeElement.textContent).toContain('Exit Message');
+    expect(des[25].nativeElement.textContent).toContain('N/A');
+  });
+
+  it('Execution details should get populated with Job Execution Ids', () => {
+    activeRoute.testParams = commonTestParams;
+    tasksService.testExecutionDetails = commonTestExecutionDetailsWithJobIds;
+
+    de = fixture.debugElement.query(By.css('div'));
+    el = de.nativeElement;
+    fixture.detectChanges();
+    const expectedStart = moment('2017-08-10T05:46:19.079Z').format('Y-MM-DD[T]HH:mm:ss.SSS[Z]');
+    const expectedStop = moment('2017-08-10T05:46:19.098Z').format('Y-MM-DD[T]HH:mm:ss.SSS[Z]');
+
+    expect(el.textContent).toContain('Task Execution Details - Execution ID: 1');
+
+    const des: DebugElement[] = fixture.debugElement.queryAll(By.css('tbody td'));
+    expect(des.length).toBe(26);
+    expect(des[0].nativeElement.textContent).toContain('Execution Id');
+    expect(des[1].nativeElement.textContent).toContain(commonTestExecutionDetails[1].executionId);
+    expect(des[2].nativeElement.textContent).toContain('Task Name');
+    expect(des[3].nativeElement.textContent).toContain('footask');
+    expect(des[4].nativeElement.textContent).toContain('Arguments');
+    expect(des[5].nativeElement.textContent).toContain('--spring.cloud.task.executionid=1');
+    expect(des[6].nativeElement.textContent).toContain('External Execution Id');
+    expect(des[7].nativeElement.textContent).toContain('footask-d465ffe7-6874-42f7-ab04-191e9e6c6376');
+    expect(des[8].nativeElement.textContent).toContain('Start Time');
+    expect(des[9].nativeElement.textContent).toContain(expectedStart);
+    expect(des[10].nativeElement.textContent).toContain('End Time');
+    expect(des[11].nativeElement.textContent).toContain(expectedStop);
+    expect(des[12].nativeElement.textContent).toContain('Batch Job');
+
+    expect(des[13].query(By.css('span')).nativeElement.classList.contains('glyphicon-ok')).toBe(true);
+    expect(des[14].nativeElement.textContent).toContain('Job Execution Ids');
+    const jobExecutionIdButtons = fixture.debugElement.queryAll(By.css('#jobExecutionIds button'));
+    expect(jobExecutionIdButtons.length).toEqual(3);
+
+    expect(jobExecutionIdButtons[0].nativeElement.innerHTML.trim()).toEqual('1');
+    expect(jobExecutionIdButtons[1].nativeElement.innerHTML.trim()).toEqual('2');
+    expect(jobExecutionIdButtons[2].nativeElement.innerHTML.trim()).toEqual('3');
+
     expect(des[16].nativeElement.textContent).toContain('Start Time');
     expect(des[17].nativeElement.textContent).toContain(expectedStart);
     expect(des[18].nativeElement.textContent).toContain('End Time');
@@ -123,4 +183,28 @@ describe('TaskExecutionsDetailsComponent', () => {
     el.click();
     expect(navigate).toHaveBeenCalledWith(['tasks/executions']);
   });
+
+  it('Job Execution Id button should navigate to job execution details page on click', () => {
+    activeRoute.testParams = commonTestParams;
+    tasksService.testExecutionDetails = commonTestExecutionDetailsWithJobIds;
+
+    de = fixture.debugElement.query(By.css('div'));
+    el = de.nativeElement;
+    fixture.detectChanges();
+
+    const jobExecutionIdButtons = fixture.debugElement.queryAll(By.css('#jobExecutionIds button'));
+
+    const navigate = spyOn((<any>component).router, 'navigate');
+    fixture.detectChanges();
+
+    jobExecutionIdButtons[0].nativeElement.click();
+    expect(navigate).toHaveBeenCalledWith(['jobs/executions/1']);
+
+    jobExecutionIdButtons[1].nativeElement.click();
+    expect(navigate).toHaveBeenCalledWith(['jobs/executions/1']);
+
+    jobExecutionIdButtons[2].nativeElement.click();
+    expect(navigate).toHaveBeenCalledWith(['jobs/executions/1']);
+  });
+
 });

ui/src/app/tasks/task-details/task-details.component.ts

@@ -56,4 +56,14 @@ export class TaskExecutionsDetailsComponent implements OnInit, OnDestroy {
   back() {
     this.router.navigate(['tasks/executions']);
   }
+
+  /**
+   * Redirect user to the page for the provided Job Execution Id.
+   *
+   * @param jobExecutionId Id of the Job Execution
+   */
+  goToJobExecution(jobExecutionId: number) {
+    this.router.navigate(['jobs/executions/' + jobExecutionId]);
+  }
+
 }