src/app/tasks/task-definition/executions/task-definition-executions.component.ts
Component that shows the executions of a Task
| selector | app-task-definition-executions |
| styleUrls | .styles.scss |
| templateUrl | task-definition-executions.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, router: Router, tasksService: TasksService)
|
||||||||||||||||
|
Constructor
Parameters :
|
| applySort | ||||||||||||
applySort(params: ListDefaultParams, sort: SortParams)
|
||||||||||||
|
Apply sort Triggered on column header click
Parameters :
Returns :
void
|
| changePaginationPager | ||||||||||||
changePaginationPager(params: ListDefaultParams, paramsPaginator: )
|
||||||||||||
|
Update event from the Paginator Pager
Parameters :
Returns :
void
|
| details | ||||||||
details(taskExecution: TaskExecution)
|
||||||||
|
Route to TaskExecution details page.
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
On Destroy
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Init component, call refresh method
Returns :
void
|
| refresh | ||||||||
refresh(params: ListDefaultParams)
|
||||||||
|
Refresh Create an observable which provides the required data
Parameters :
Returns :
void
|
| executions$ |
executions$:
|
Type : Observable<any>
|
|
Observable of page of task executions |
| params$ |
params$:
|
Type : Subject<ListDefaultParams>
|
|
Params Subject |
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Observable, Subject } from 'rxjs';
import { TasksService } from '../../tasks.service';
import { ListDefaultParams, SortParams } from '../../../shared/components/shared.interface';
import { TaskExecution } from '../../model/task-execution';
import { map } from 'rxjs/operators';
/**
* Component that shows the executions of a Task
*
* @author Damien Vitrac
*/
@Component({
selector: 'app-task-definition-executions',
templateUrl: 'task-definition-executions.component.html',
styleUrls: ['../styles.scss'],
})
export class TaskDefinitionExecutionsComponent implements OnInit, OnDestroy {
/**
* Observable of page of task executions
*/
executions$: Observable<any>;
/**
* Params Subject
*/
params$: Subject<ListDefaultParams>;
/**
* Constructor
*
* @param {ActivatedRoute} route
* @param {Router} router
* @param {TasksService} tasksService
*/
constructor(private route: ActivatedRoute,
private router: Router,
private tasksService: TasksService) {
this.params$ = new Subject<ListDefaultParams>();
}
/**
* Init component, call refresh method
*/
ngOnInit() {
this.params$.subscribe((params: ListDefaultParams) => {
this.executions$ = this.tasksService.getTaskExecutions(params)
.pipe(map((page) => {
return {
page: page,
params: params
};
}
));
});
this.route.parent.params.subscribe((params: Params) => {
this.params$.next({
q: params.id,
sort: null,
order: null,
page: 0,
size: 30
});
});
}
/**
* On Destroy
*/
ngOnDestroy(): void {
this.params$.complete();
this.params$.unsubscribe();
}
/**
* Refresh
* Create an observable which provides the required data
* @param {ListDefaultParams} params
*/
refresh(params: ListDefaultParams) {
this.params$.next(params);
}
/**
* Update event from the Paginator Pager
* @param params
*/
changePaginationPager(params: ListDefaultParams, paramsPaginator) {
params.page = paramsPaginator.page;
params.size = paramsPaginator.size;
this.refresh(params);
}
/**
* Apply sort
* Triggered on column header click
* @param {ListDefaultParams} params
* @param {SortParams} sort
*/
applySort(params: ListDefaultParams, sort: SortParams) {
params.sort = sort.sort;
params.order = sort.order;
this.refresh(params);
}
/**
* Route to {@link TaskExecution} details page.
* @param {TaskExecution} taskExecution
*/
details(taskExecution: TaskExecution) {
this.router.navigate([`tasks/executions/${taskExecution.executionId}`]);
}
}
<div *ngIf="executions$ | async as executions; else loading" id="executions-list" dataflowLayoutType type="full">
<div class="list-bar" *ngIf="!(executions.page.totalPages < 2 && executions.page.items.length === 0)">
<button class="btn btn-default btn-fa" (click)="refresh(executions.params)" title="Refresh" type="button">
<span class="fa fa-refresh"></span>
Refresh
</button>
</div>
<table *ngIf="executions.page?.items && executions.page.items.length > 0"
class="table table-hover table-actions" id="taskExecutionsTable">
<thead>
<tr>
<th style="width: 140px">
<app-sort id="sort-id" (change)="applySort(executions.params, $event)" [value]="'TASK_EXECUTION_ID'"
[sort]="executions.params">
Execution Id
</app-sort>
</th>
<th nowrap="">
<app-sort id="sort-startdate" (change)="applySort(executions.params, $event)" [value]="'START_TIME'"
[sort]="executions.params">
Start Date
</app-sort>
</th>
<th nowrap="">
<app-sort id="sort-enddate" (change)="applySort(executions.params, $event)" [value]="'END_TIME'"
[sort]="executions.params">
End Date
</app-sort>
</th>
<th nowrap="">
<app-sort id="sort-exitcode" (change)="applySort(executions.params, $event)" [value]="'EXIT_CODE'"
[sort]="executions.params">
Exit Code
</app-sort>
</th>
<th> </th>
</tr>
</thead>
<tbody>
<ng-container
*ngFor="let item of executions.page.items | paginate: executions.page.getPaginationInstance(); index as i">
<tr>
<td>
<a (click)="details(item)" style="cursor: pointer">
#{{ item.executionId }}
</a>
</td>
<td>
{{ item.startTime | dataflowDateTime }}
</td>
<td>
{{ item.endTime | dataflowDateTime }}
</td>
<td>
{{ item.exitCode }}
</td>
<td class="table-actions" width="10px" nowrap="">
<div class="actions-btn" role="group">
<button type="button" name="task-details{{ i }}" (click)="details(item)" class="btn btn-default"
title="Details">
<span class="fa fa-info-circle"></span>
</button>
</div>
</td>
</tr>
</ng-container>
</tbody>
</table>
<app-list-pagination [page]="executions.page" [params]="executions.params"
(changed)="changePaginationPager(executions.params, $event)" [item]="'task execution'"
[items]="'task executions'">
</app-list-pagination>
<app-list-empty [page]="executions.page" [filters]="[]">
<p>There is <strong>no task executed</strong> for this task, yet.</p>
<p>
You can <a (click)="refresh(executions.params)">Refresh</a> the page
</p>
</app-list-empty>
</div>
<ng-template #loading>
<app-loader></app-loader>
</ng-template>