src/app/jobs/job-execution-details/job-execution-details.component.ts
Displays a job's execution detail information based on the job execution id that is passed in via params on the URI.
| selector | app-job-execution-details |
| templateUrl | ./job-execution-details.component.html |
Properties |
Methods |
constructor(jobsService: JobsService, notificationService: NotificationService, route: ActivatedRoute, loggerService: LoggerService, routingStateService: RoutingStateService, router: Router)
|
||||||||||||||||||||||||||||
|
Constructor
Parameters :
|
| back |
back()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Retrieves the JobExecutionId from the JobService.
Returns :
void
|
| viewStep | ||||||||||||
viewStep(jobExecution: JobExecution, item: StepExecution)
|
||||||||||||
|
Navigates to the view step execution page.
Parameters :
Returns :
void
|
| jobExecution$ |
jobExecution$:
|
Type : Observable<JobExecution>
|
|
Observable Jobs |
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { JobsService } from '../jobs.service';
import { JobExecution } from '../model/job-execution.model';
import { StepExecution } from '../model/step-execution.model';
import { catchError, mergeMap } from 'rxjs/operators';
import { Observable, EMPTY } from 'rxjs';
import { NotificationService } from '../../shared/services/notification.service';
import { AppError, HttpAppError } from '../../shared/model/error.model';
import { RoutingStateService } from '../../shared/services/routing-state.service';
import { LoggerService } from '../../shared/services/logger.service';
/**
* Displays a job's execution detail information based on the job execution id that is passed in via params on the URI.
*
* @author Janne Valkealahti
* @author Gunnar Hillert
* @author Damien Vitrac
*/
@Component({
selector: 'app-job-execution-details',
templateUrl: './job-execution-details.component.html'
})
export class JobExecutionDetailsComponent implements OnInit {
/**
* Observable Jobs
*/
jobExecution$: Observable<JobExecution>;
/**
* Constructor
*
* @param {JobsService} jobsService
* @param {NotificationService} notificationService
* @param {ActivatedRoute} route
* @param {LoggerService} loggerService
* @param {RoutingStateService} routingStateService
* @param {Router} router
*/
constructor(private jobsService: JobsService,
private notificationService: NotificationService,
private route: ActivatedRoute,
private loggerService: LoggerService,
private routingStateService: RoutingStateService,
private router: Router) {
}
/**
* Retrieves the JobExecutionId from the JobService.
*/
ngOnInit() {
this.jobExecution$ = this.route.params
.pipe(
mergeMap(
val => this.jobsService.getJobExecution(val.id)
),
catchError((error) => {
if (HttpAppError.is404(error) || HttpAppError.is400(error)) {
this.back();
}
this.loggerService.log('error while loading Job Execution Details', error);
this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
return EMPTY;
})
);
}
/**
* Navigates to the view step execution page.
*
* @param {JobExecution} jobExecution
* @param {StepExecution} item the id of the StepExecution is used to construct the URI parameters along with the
* JobExecutionId.
*/
viewStep(jobExecution: JobExecution, item: StepExecution) {
this.router.navigate([`jobs/executions/${jobExecution.jobExecutionId}/${item.id}`]);
}
back() {
this.routingStateService.back('/jobs/executions', /^(\/jobs\/executions\/)/);
}
}
<app-page *ngIf="jobExecution$ | async as jobExecution; else loading">
<app-page-head>
<app-page-head-back [defaultUrl]="'/jobs/executions'" [isNotRegex]="'^(\/jobs\/executions\/)'"></app-page-head-back>
<app-page-head-title>Job execution <strong>{{ jobExecution.name }} ({{ jobExecution.jobExecutionId }})</strong></app-page-head-title>
</app-page-head>
<p>This section shows the details of the job execution.</p>
<div *ngIf="!jobExecution">
No Job Execution available.
</div>
<div *ngIf="jobExecution">
<table id="jobExecution" class="table table-hover">
<thead>
<tr>
<th style="width: 250px">Property</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Id</td>
<td>{{ jobExecution.jobExecutionId }}</td>
</tr>
<tr>
<td>Job Name</td>
<td>{{ jobExecution.name }}</td>
</tr>
<tr>
<td>Job Instance</td>
<td>{{ jobExecution.jobInstanceId }}</td>
</tr>
<tr>
<td>Task Execution Id</td>
<td>{{ jobExecution.taskExecutionId }}</td>
</tr>
<tr>
<td>Job Parameters</td>
<td>{{ jobExecution.jobParametersString }}</td>
</tr>
<tr>
<td>Start Time</td>
<td>{{ jobExecution.startTime | dataflowDateTime }}</td>
</tr>
<tr>
<td>End Time</td>
<td>{{ jobExecution.endTime | dataflowDateTime }}</td>
</tr>
<tr>
<td>Duration</td>
<td>{{ jobExecution.startTime | dataflowDuration: jobExecution.endTime }}</td>
</tr>
<tr>
<td>Status</td>
<td>
<app-job-execution-status [status]="jobExecution.status"></app-job-execution-status>
</td>
</tr>
<tr>
<td>Exit Code</td>
<td>
<app-job-execution-status [status]="jobExecution.exitCode"></app-job-execution-status>
</td>
</tr>
<tr>
<td>Exit Message</td>
<td>{{ jobExecution.exitMessage }}</td>
</tr>
<tr>
<td>Step Execution Count</td>
<td>{{ jobExecution.stepExecutionCount }}</td>
</tr>
</tbody>
</table>
<h4>Steps</h4>
<table id="stepExecutions" class="table table-hover table-actions">
<thead>
<tr>
<th>Step Id</th>
<th>Step Name</th>
<th>Reads</th>
<th>Writes</th>
<th>Commits</th>
<th>Rollbacks</th>
<th>Duration</th>
<th>Status</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let stepExecution of jobExecution.stepExecutions">
<td>{{ stepExecution.id }}</td>
<td><a style="cursor: pointer" (click)="viewStep(jobExecution, stepExecution)">{{ stepExecution.name }}</a></td>
<td>{{ stepExecution.readCount }}</td>
<td>{{ stepExecution.writeCount }}</td>
<td>{{ stepExecution.commitCount }}</td>
<td>{{ stepExecution.rollbackCount }}</td>
<td>{{ stepExecution.startTime | dataflowDuration: stepExecution.endTime }}</td>
<td>
<app-job-execution-status [status]="stepExecution.status"></app-job-execution-status>
</td>
<td class="table-actions" width="10px">
<div class="actions-btn">
<button type="button" (click)="viewStep(jobExecution, stepExecution)"
class="btn btn-default" title="Details">
<span class="fa fa-ellipsis-h"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</app-page>
<ng-template #loading>
<app-loader></app-loader>
</ng-template>