src/app/tasks/task-definition/task-definition.component.ts
encapsulation | ViewEncapsulation.None |
selector | app-task |
styleUrls | styles.scss |
templateUrl | task-definition.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, notificationService: NotificationService, routingStateService: RoutingStateService, router: Router, loggerService: LoggerService, modalService: BsModalService, sharedAboutService: SharedAboutService, tasksService: TasksService)
|
||||||||||||||||||||||||||||||||||||
Constructor
Parameters :
|
cancel |
cancel()
|
Back action Navigate to the previous URL or /tasks/definitions
Returns :
void
|
destroy | ||||||||
destroy(taskDefinition: TaskDefinition)
|
||||||||
Destroy the task
Parameters :
Returns :
void
|
launch | ||||||||
launch(taskDefinition: TaskDefinition)
|
||||||||
Launch page
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Init
Returns :
void
|
schedule | ||||||||
schedule(taskDefinition: TaskDefinition)
|
||||||||
Navigate to the schedule creation page
Parameters :
Returns :
void
|
counters$ |
counters$:
|
Type : Observable<any>
|
modal |
modal:
|
Type : BsModalRef
|
Modal reference |
task$ |
task$:
|
Type : Observable<any>
|
Observable of Task Definition |
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { TasksService } from '../tasks.service';
import { mergeMap, share, map, catchError } from 'rxjs/operators';
import { Observable, forkJoin, EMPTY } from 'rxjs';
import { TaskDefinition } from '../model/task-definition';
import { RoutingStateService } from '../../shared/services/routing-state.service';
import { AppError, HttpAppError } from '../../shared/model/error.model';
import { NotificationService } from '../../shared/services/notification.service';
import { Page } from '../../shared/model/page';
import { TaskExecution } from '../model/task-execution';
import { TaskSchedule } from '../model/task-schedule';
import { LoggerService } from '../../shared/services/logger.service';
import { TaskDefinitionsDestroyComponent } from '../task-definitions-destroy/task-definitions-destroy.component';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { SharedAboutService } from '../../shared/services/shared-about.service';
import { FeatureInfo } from '../../shared/model/about/feature-info.model';
/**
* @author Glenn Renfro
* @author Gunnar Hillert
* @author Damien Vitrac
*/
@Component({
selector: 'app-task',
templateUrl: 'task-definition.component.html',
styleUrls: ['styles.scss'],
encapsulation: ViewEncapsulation.None
})
export class TaskDefinitionComponent implements OnInit {
/**
* Observable of Task Definition
*/
task$: Observable<any>;
counters$: Observable<any>;
/**
* Modal reference
*/
modal: BsModalRef;
/**
* Constructor
*
* @param {ActivatedRoute} route
* @param {NotificationService} notificationService
* @param {RoutingStateService} routingStateService
* @param {Router} router
* @param {LoggerService} loggerService
* @param {BsModalService} modalService
* @param {SharedAboutService} sharedAboutService
* @param {TasksService} tasksService
*/
constructor(private route: ActivatedRoute,
private notificationService: NotificationService,
private routingStateService: RoutingStateService,
private router: Router,
private loggerService: LoggerService,
private modalService: BsModalService,
private sharedAboutService: SharedAboutService,
private tasksService: TasksService) {
}
/**
* Init
*/
ngOnInit() {
this.task$ = this.route.params
.pipe(mergeMap(
(params: Params) => this.sharedAboutService.getFeatureInfo()
.pipe(map((featureInfo: FeatureInfo) => {
return {
id: params.id,
schedulesEnabled: featureInfo.schedulesEnabled
};
}))
))
.pipe(
mergeMap(
(params: any) => this.tasksService.getDefinition(params.id)
.pipe(map((taskDefinition: TaskDefinition) => {
return {
schedulesEnabled: params.schedulesEnabled,
definition: taskDefinition
};
})),
),
catchError((error) => {
if (HttpAppError.is404(error)) {
this.cancel();
}
this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
return EMPTY;
})
);
this.counters$ = this.route.params
.pipe(
mergeMap(
(params: Params) => this.sharedAboutService.getFeatureInfo()
.pipe(map((featureInfo: FeatureInfo) => {
return {
id: params.id,
schedulesEnabled: featureInfo.schedulesEnabled
};
}))
),
mergeMap(
(params: any) => {
const arr = [];
arr.push(this.tasksService.getTaskExecutions({ q: params.id, size: 1, page: 0, sort: null, order: null }));
if (params.schedulesEnabled) {
arr.push(this.tasksService.getSchedules({ q: params.id, size: 1, page: 0, sort: null, order: null }));
}
return forkJoin([...arr])
.pipe(map((forks) => {
const result = { executions: (forks[0] as Page<TaskExecution>).totalElements };
if (params.schedulesEnabled) {
result['schedules'] = (forks[1] as Page<TaskSchedule>).totalElements;
}
return result;
}));
}
),
share()
);
}
/**
* Navigate to the schedule creation page
* @param {TaskDefinition} taskDefinition
*/
schedule(taskDefinition: TaskDefinition) {
this.router.navigate([`/tasks/schedules/create/${taskDefinition.name}`]);
}
/**
* Launch page
* @param {TaskDefinition} taskDefinition
*/
launch(taskDefinition: TaskDefinition) {
this.router.navigate([`/tasks/definitions/launch/${taskDefinition.name}`]);
}
/**
* Destroy the task
*
* @param {TaskDefinition} taskDefinition
*/
destroy(taskDefinition: TaskDefinition) {
this.loggerService.log(`Destroy ${taskDefinition.name} task definition.`, taskDefinition.name);
this.modal = this.modalService.show(TaskDefinitionsDestroyComponent, { class: 'modal-md' });
this.modal.content.open({ taskDefinitions: [taskDefinition] }).subscribe(() => {
this.router.navigate([`/tasks/definitions`]);
});
}
/**
* Back action
* Navigate to the previous URL or /tasks/definitions
*/
cancel() {
this.routingStateService.back('/tasks/definitions', /^(\/tasks\/definitions\/)/);
}
}
<app-page *ngIf="task$ | async as task; else loading">
<app-page-head>
<app-page-head-back [defaultUrl]="'/tasks/definitions'"
[isNotRegex]="'^(\/tasks\/definitions\/)'"></app-page-head-back>
<app-page-head-title>Task <strong>{{ task.definition.name }}</strong></app-page-head-title>
<app-page-head-subtitle>
<app-task-status [taskDefinition]="task.definition"></app-task-status>
</app-page-head-subtitle>
<app-page-head-actions>
<button name="stream-stop" type="button" id="task-launch" [dataflowAppRoles]="['ROLE_DEPLOY']"
(click)="launch(task.definition)" class="btn btn-primary btn-fa" title="Launch">
<span class="fa fa-play"></span>
Launch task
</button>
<button *ngIf="task.schedulesEnabled" id="task-schedule" type="button" [dataflowAppRoles]="['ROLE_SCHEDULE']"
(click)="schedule(task.definition)" class="btn btn-primary btn-fa" title="Schedule">
<span class="fa fa-clock-o"></span>
Schedule
</button>
<button name="stream-remove" type="button" (click)="destroy(task.definition)" id="task-remove"
class="btn btn-danger btn-fa" title="Destroy" [dataflowAppRoles]="['ROLE_DESTROY']">
<span class="fa fa-trash"></span>
Destroy task
</button>
</app-page-head-actions>
</app-page-head>
<div class="page-tab">
<div class="page-tab-head">
<ul class="nav nav-tabs">
<li role="presentation" routerLinkActive="active"><a routerLink="summary">Summary</a></li>
<li role="presentation" routerLinkActive="active"><a routerLink="graph">Graph</a></li>
<li role="presentation" routerLinkActive="active">
<a routerLink="executions">
Executions
<span *ngIf="counters$ | async as counters;">
<span class="label label-count label-primary"
*ngIf="counters.executions">{{counters.executions}}</span>
</span>
</a>
</li>
<li role="presentation" routerLinkActive="active" *ngIf="task.schedulesEnabled">
<a routerLink="schedules">
Schedules
<span *ngIf="counters$ | async as counters;">
<span class="label label-count label-primary"
*ngIf="counters.schedules">{{counters.schedules}}</span>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane in active">
<router-outlet></router-outlet>
</div>
</div>
</div>
</app-page>
<ng-template #loading>
<app-loader></app-loader>
</ng-template>