src/app/jobs/step-execution-progress/step-execution-progress.component.ts
Step Execution Progress
| selector | app-step-execution-progress |
| styleUrls | .step-execution-details/styles.scss |
| templateUrl | ./step-execution-progress.component.html |
Properties |
Methods |
constructor(jobsService: JobsService, route: ActivatedRoute, notificationService: NotificationService, loggerService: LoggerService, routingStateService: RoutingStateService)
|
||||||||||||||||||||||||
|
Constructor
Parameters :
|
| back |
back()
|
|
Navigate to the previous page
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Init component
Returns :
void
|
| refresh |
refresh()
|
|
Refresh
Returns :
void
|
| jobId |
jobId:
|
Type : number
|
|
Current Job ID |
| stepExecutionDetails$ |
stepExecutionDetails$:
|
Type : Observable<any>
|
|
Observable Step Execution Informations |
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { JobsService } from '../jobs.service';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { Observable, forkJoin, EMPTY } from 'rxjs';
import { AppError, HttpAppError } from '../../shared/model/error.model';
import { NotificationService } from '../../shared/services/notification.service';
import { RoutingStateService } from '../../shared/services/routing-state.service';
import { LoggerService } from '../../shared/services/logger.service';
/**
* Step Execution Progress
*
* @author Glenn Renfro
* @author Gunnar Hillert
* @author Damien Vitrac
*/
@Component({
selector: 'app-step-execution-progress',
styleUrls: ['../step-execution-details/styles.scss'],
templateUrl: './step-execution-progress.component.html'
})
export class StepExecutionProgressComponent implements OnInit {
/**
* Observable Step Execution Informations
*/
stepExecutionDetails$: Observable<any>;
/**
* Current Job ID
*/
jobId: number;
/**
* Constructor
*
* @param {JobsService} jobsService
* @param {ActivatedRoute} route
* @param {NotificationService} notificationService
* @param {LoggerService} loggerService
* @param {RoutingStateService} routingStateService
*/
constructor(private jobsService: JobsService,
private route: ActivatedRoute,
private notificationService: NotificationService,
private loggerService: LoggerService,
private routingStateService: RoutingStateService) {
}
/**
* Init component
*/
ngOnInit() {
this.refresh();
}
/**
* Refresh
*/
refresh() {
this.stepExecutionDetails$ = this.route.params
.pipe(
mergeMap(
val => forkJoin([
this.jobsService.getJobExecution(val.jobid),
this.jobsService.getStepExecution(val.jobid, val.stepid),
this.jobsService.getStepExecutionProgress(val.jobid, val.stepid)
]).pipe(map((val2) => {
this.jobId = val.jobid;
return val2;
}))
),
map(
val => ({ jobExecution: val[0], stepExecution: val[1], stepExecutionProgress: val[2] })
),
catchError((error) => {
if (HttpAppError.is404(error) || HttpAppError.is400(error)) {
this.routingStateService.back(`/jobs/executions/`);
}
this.loggerService.log('error while loading Step Execution Progress', error);
this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
return EMPTY;
})
);
}
/**
* Navigate to the previous page
*/
back() {
this.routingStateService.back(`/jobs/executions/${this.jobId}`);
}
}
<app-page *ngIf="stepExecutionDetails$ | async as stepExecutionDetails; else loading">
<app-page-head>
<app-page-head-back [defaultUrl]="'/jobs/executions/' + jobId + '/' + stepExecutionDetails.stepExecution.stepExecution.id"></app-page-head-back>
<app-page-head-title>
Step Execution Progress <strong>{{ stepExecutionDetails.stepExecution.stepExecution.name }}
({{ stepExecutionDetails.stepExecution.stepExecution.id }})</strong>
- Job execution <strong>{{ stepExecutionDetails.jobExecution.name }}</strong>
({{ stepExecutionDetails.jobExecution.jobExecutionId }})
</app-page-head-title>
</app-page-head>
<div class="list-bar">
<button id="refresh" class="btn btn-default btn-fa" (click)="refresh()" title="Refresh" type="button">
<span class="fa fa-refresh"></span>
Refresh
</button>
</div>
<div *ngIf="stepExecutionDetails.stepExecutionProgress.percentageComplete < 1">
<h4>Percentage Complete</h4>
<progressbar [animate]="false" max="100" [value]="stepExecutionDetails.percentageComplete" type="success">
<b>{{ stepExecutionDetails.percentageComplete }}%</b>
</progressbar>
</div>
<div>
<h4>Step Execution History</h4>
<table id="stepExecutionProgress" *ngIf="stepExecutionDetails.stepExecutionProgress?.stepExecutionHistory"
class="table table-hover">
<thead>
<tr>
<th style="width: 250px">Name</th>
<th>Count</th>
<th>Min</th>
<th>Max</th>
<th>Mean</th>
<th>Standard Deviation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Commit Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.commitCount.standardDeviation }}</td>
</tr>
<tr>
<td>Duration</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.duration.standardDeviation }}</td>
</tr>
<tr>
<td>Duration per Read</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.durationPerRead.standardDeviation }}</td>
</tr>
<tr>
<td>Filter Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.filterCount.standardDeviation }}</td>
</tr>
<tr>
<td>Process Skip Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.processSkipCount.standardDeviation }}
</td>
</tr>
<tr>
<td>Read Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readCount.standardDeviation }}</td>
</tr>
<tr>
<td>Read Skip Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.readSkipCount.standardDeviation }}</td>
</tr>
<tr>
<td>Rollback Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.rollbackCount.standardDeviation }}</td>
</tr>
<tr>
<td>Write Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeCount.standardDeviation }}</td>
</tr>
<tr>
<td>Write Skip Count</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.count }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.min }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.max }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.mean }}</td>
<td>{{ stepExecutionDetails.stepExecutionProgress.stepExecutionHistory.writeSkipCount.standardDeviation }}</td>
</tr>
</tbody>
</table>
</div>
</app-page>
<ng-template #loading>
<app-loader></app-loader>
</ng-template>