src/app/tasks/task-definitions/task-definitions.component.ts
Provides TaskDefinition related services.
selector | app-tasks-definitions |
styleUrls | styles.scss |
templateUrl | ./task-definitions.component.html |
Properties |
Methods |
constructor(tasksService: TasksService, modalService: BsModalService, appsService: AppsService, loggerService: LoggerService, groupRouteService: GroupRouteService, router: Router, authService: AuthService, sharedAboutService: SharedAboutService, notificationService: NotificationService)
|
||||||||||||||||||||||||||||||||||||||||
Constructor
Parameters :
|
applyAction |
applyAction(action: string, args?: any)
|
Apply Action
Returns :
void
|
applySort | ||||||||
applySort(sort: SortParams)
|
||||||||
Apply sort Triggered on column header click
Parameters :
Returns :
void
|
changeCheckboxes |
changeCheckboxes()
|
Update the list of selected checkbox
Returns :
void
|
changePaginationPager | ||||||||
changePaginationPager(params: )
|
||||||||
Update event from the Paginator Pager
Parameters :
Returns :
void
|
countSelected |
countSelected()
|
Number of selected task definitions
Returns :
number
|
createTask |
createTask()
|
Create task
Returns :
void
|
destroy | ||||||||
destroy(item: TaskDefinition)
|
||||||||
Removes the TaskDefinition from the repository. Shows modal dialog prior to deletion to verify if user wants to destroy definition.
Parameters :
Returns :
void
|
destroySchedules | ||||||||
destroySchedules(taskDefinition: TaskDefinition)
|
||||||||
Starts the destroy the {@link TaskSchedule[]}s by opening a confirmation modal dialog.
Parameters :
Returns :
void
|
destroySelectedTasks |
destroySelectedTasks()
|
Starts the destroy process of multiple TaskDefinitions by opening a confirmation modal dialog.
Returns :
void
|
destroyTasks | ||||||||
destroyTasks(taskDefinitions: TaskDefinition[])
|
||||||||
Starts the destroy the TaskDefinitions in parameter by opening a confirmation modal dialog.
Parameters :
Returns :
void
|
details | ||||||||
details(taskDefinition: TaskDefinition)
|
||||||||
Route to TaskDefinition details page.
Parameters :
Returns :
void
|
launch | ||||||||
launch(taskDefinition: TaskDefinition)
|
||||||||
Route to TaskDefinition launch page.
Parameters :
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Close subscription
Returns :
void
|
ngOnInit |
ngOnInit()
|
Retrieves the TaskDefinitions to be displayed on the page.
Returns :
void
|
refresh |
refresh()
|
Initializes the taskDefinitions attribute with the results from Spring Cloud Data Flow server.
Returns :
void
|
registerApps |
registerApps()
|
Navigate to the register app
Returns :
void
|
schedule | ||||||||
schedule(taskDefinition: TaskDefinition)
|
||||||||
Route to TaskDefinition schedule page.
Parameters :
Returns :
void
|
scheduleSelectedTasks |
scheduleSelectedTasks()
|
Starts the schedule process of multiple TaskDefinitions
Returns :
void
|
scheduleTasks | ||||||||
scheduleTasks(taskDefinitions: TaskDefinition[])
|
||||||||
Starts the schedule the TaskDefinitions in parameter
Parameters :
Returns :
void
|
search | ||||||||
search(params: ListDefaultParams)
|
||||||||
Run the search
Parameters :
Returns :
void
|
taskActions | ||||||||
taskActions(index: number)
|
||||||||
Task Actions
Parameters :
Returns :
{}
|
tasksActions |
tasksActions()
|
Tasks Actions
Returns :
{}
|
updateContext |
updateContext()
|
Write the context in the service.
Returns :
void
|
context |
context:
|
Type : any
|
Storage context |
form |
form:
|
Type : any
|
Current forms value |
itemsSelected |
itemsSelected:
|
Type : Array<string>
|
Contain a key application of each selected application |
listBar |
listBar:
|
Type : ListBarComponent
|
Decorators : ViewChild
|
List Bar Component |
modal |
modal:
|
Type : BsModalRef
|
Modal reference |
Private ngUnsubscribe$ |
ngUnsubscribe$:
|
Type : Subject<any>
|
Unsubscribe |
params |
params:
|
Type : TaskListParams
|
State of App List Params |
schedulesEnabled |
schedulesEnabled:
|
Default value : false
|
Schedule Enabled state |
taskDefinitions |
taskDefinitions:
|
Type : Page<TaskDefinition>
|
Current page of task definitions |
Public tasksService |
tasksService:
|
Type : TasksService
|
tasksTabulation |
tasksTabulation:
|
Type : TasksTabulationComponent
|
Decorators : ViewChild
|
Tabulation |
import { Component, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Page } from '../../shared/model/page';
import { Router } from '@angular/router';
import { TaskDefinition } from '../model/task-definition';
import { TasksService } from '../tasks.service';
import { Subject } from 'rxjs';
import { map, takeUntil } from 'rxjs/operators';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { TaskListParams } from '../components/tasks.interface';
import { ListDefaultParams, OrderParams, SortParams } from '../../shared/components/shared.interface';
import { TaskDefinitionsDestroyComponent } from '../task-definitions-destroy/task-definitions-destroy.component';
import { NotificationService } from '../../shared/services/notification.service';
import { LoggerService } from '../../shared/services/logger.service';
import { AppError } from '../../shared/model/error.model';
import { TaskSchedule } from '../model/task-schedule';
import { TaskSchedulesDestroyComponent } from '../task-schedules-destroy/task-schedules-destroy.component';
import { GroupRouteService } from '../../shared/services/group-route.service';
import { SharedAboutService } from '../../shared/services/shared-about.service';
import { FeatureInfo } from '../../shared/model/about/feature-info.model';
import { ListBarComponent } from '../../shared/components/list/list-bar.component';
import { AuthService } from '../../auth/auth.service';
import { AppsService } from '../../apps/apps.service';
import { TasksTabulationComponent } from '../components/tasks-tabulation/tasks-tabulation.component';
/**
* Provides {@link TaskDefinition} related services.
*
* @author Janne Valkealahti
* @author Gunnar Hillert
* @author Glenn Renfro
* @author Damien Vitrac
*
*/
@Component({
selector: 'app-tasks-definitions',
templateUrl: './task-definitions.component.html',
styleUrls: ['styles.scss']
})
export class TaskDefinitionsComponent implements OnInit, OnDestroy {
/**
* Current page of task definitions
*/
taskDefinitions: Page<TaskDefinition>;
/**
* Unsubscribe
*/
private ngUnsubscribe$: Subject<any> = new Subject();
/**
* List Bar Component
*/
@ViewChild('listBar', { static: true })
listBar: ListBarComponent;
/**
* Tabulation
*/
@ViewChild('tasksTabulation', { static: false })
tasksTabulation: TasksTabulationComponent;
/**
* Modal reference
*/
modal: BsModalRef;
/**
* Current forms value
*/
form: any = {
checkboxes: []
};
/**
* State of App List Params
*/
params: TaskListParams = {
sort: 'name',
order: OrderParams.ASC,
page: 0,
size: 30,
q: ''
};
/**
* Schedule Enabled state
* @type {boolean}
*/
schedulesEnabled = false;
/**
* Contain a key application of each selected application
* @type {Array}
*/
itemsSelected: Array<string> = [];
/**
* Storage context
*/
context: any;
/**
* Constructor
*
* @param {TasksService} tasksService
* @param {BsModalService} modalService
* @param {AppsService} appsService
* @param {LoggerService} loggerService
* @param {GroupRouteService} groupRouteService
* @param {Router} router
* @param {AuthService} authService
* @param {SharedAboutService} sharedAboutService
* @param {NotificationService} notificationService
*/
constructor(public tasksService: TasksService,
private modalService: BsModalService,
private appsService: AppsService,
private loggerService: LoggerService,
private groupRouteService: GroupRouteService,
private router: Router,
private authService: AuthService,
private sharedAboutService: SharedAboutService,
private notificationService: NotificationService) {
}
/**
* Tasks Actions
*/
tasksActions() {
return [
{
id: 'destroy-tasks',
icon: 'trash',
action: 'destroySelected',
title: 'Destroy task(s)',
hidden: !this.authService.securityInfo.canAccess(['ROLE_CREATE'])
},
{
id: 'schedule-tasks',
icon: 'clock-o',
action: 'scheduleSelected',
title: 'Schedule task(s)',
hidden: !this.schedulesEnabled || !this.authService.securityInfo.canAccess(['ROLE_SCHEDULE'])
}
];
}
/**
* Task Actions
* @param {TaskDefinition} item
* @param {number} index
*/
taskActions(index: number) {
return [
{
id: 'details-task' + index,
icon: 'info-circle',
action: 'details',
title: 'Show details',
isDefault: true
},
{
divider: true,
hidden: !this.authService.securityInfo.canAccess(['ROLE_DEPLOY'])
},
{
id: 'launch-task' + index,
icon: 'play',
action: 'launch',
title: 'Launch task',
isDefault: true,
hidden: !this.authService.securityInfo.canAccess(['ROLE_DEPLOY'])
},
{
divider: true,
hidden: !this.schedulesEnabled || !this.authService.securityInfo.canAccess(['ROLE_SCHEDULE'])
},
{
id: 'task-schedule' + index,
icon: 'clock-o',
action: 'schedule',
title: 'Schedule task',
disabled: !this.schedulesEnabled,
hidden: !this.schedulesEnabled || !this.authService.securityInfo.canAccess(['ROLE_SCHEDULE'])
},
{
id: 'delete-schedules' + index,
icon: 'trash',
action: 'delete-schedules',
title: 'Delete schedule',
disabled: !this.schedulesEnabled,
hidden: !this.schedulesEnabled || !this.authService.securityInfo.canAccess(['ROLE_SCHEDULE'])
},
{
divider: true,
hidden: !this.authService.securityInfo.canAccess(['ROLE_DESTROY'])
},
{
id: 'destroy-task' + index,
icon: 'trash',
action: 'destroy',
title: 'Destroy task',
hidden: !this.authService.securityInfo.canAccess(['ROLE_DESTROY'])
},
];
}
/**
* Apply Action
* @param action
* @param args
*/
applyAction(action: string, args?: any) {
switch (action) {
case 'details':
this.details(args);
break;
case 'launch':
this.launch(args);
break;
case 'schedule':
this.schedule(args);
break;
case 'delete-schedules':
this.destroySchedules(args);
break;
case 'destroy':
this.destroy(args);
break;
case 'destroySelected':
this.destroySelectedTasks();
break;
case 'scheduleSelected':
this.scheduleSelectedTasks();
break;
}
}
/**
* Retrieves the {@link TaskDefinition}s to be displayed on the page.
*/
ngOnInit() {
this.context = this.tasksService.tasksContext;
this.params = { ...this.context };
this.form = { q: this.context.q, checkboxes: [] };
this.itemsSelected = this.context.itemsSelected || [];
this.sharedAboutService.getFeatureInfo()
.subscribe((featureInfo: FeatureInfo) => {
this.schedulesEnabled = !!featureInfo.schedulesEnabled;
this.refresh();
});
}
/**
* Close subscription
*/
ngOnDestroy() {
this.ngUnsubscribe$.next();
this.ngUnsubscribe$.complete();
}
/**
* Initializes the taskDefinitions attribute with the results from Spring Cloud Data Flow server.
*/
refresh() {
this.tasksService
.getDefinitions(this.params).map((page: Page<TaskDefinition>) => {
this.form.checkboxes = page.items.map((task) => {
return this.itemsSelected.indexOf(task.name) > -1;
});
return page;
})
.pipe(takeUntil(this.ngUnsubscribe$))
.subscribe((page: Page<TaskDefinition>) => {
if (page.items.length === 0 && this.params.page > 0) {
this.params.page = 0;
this.refresh();
return;
}
this.taskDefinitions = page;
this.changeCheckboxes();
this.updateContext();
},
error => {
this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
}
);
if (this.tasksTabulation) {
this.tasksTabulation.forceRefresh();
}
}
/**
* Write the context in the service.
*/
updateContext() {
this.context.q = this.params.q;
this.context.sort = this.params.sort;
this.context.order = this.params.order;
this.context.page = this.params.page;
this.context.size = this.params.size;
this.context.itemsSelected = this.itemsSelected;
}
/**
* Apply sort
* Triggered on column header click
*
* @param {SortParams} sort
*/
applySort(sort: SortParams) {
this.params.sort = sort.sort;
this.params.order = sort.order;
this.refresh();
}
/**
* Run the search
*/
search(params: ListDefaultParams) {
this.params.q = params.q;
this.params.page = 0;
this.refresh();
}
/**
* Update the list of selected checkbox
*/
changeCheckboxes() {
if (!this.taskDefinitions || (this.taskDefinitions.items.length !== this.form.checkboxes.length)) {
return;
}
const value: Array<string> = this.taskDefinitions.items.map((app, index) => {
if (this.form.checkboxes[index]) {
return app.name;
}
}).filter((a) => a != null);
this.itemsSelected = value;
this.updateContext();
}
/**
* Number of selected task definitions
* @returns {number}
*/
countSelected(): number {
return this.form.checkboxes.filter((a) => a).length;
}
/**
* Update event from the Paginator Pager
* @param params
*/
changePaginationPager(params) {
this.params.page = params.page;
this.params.size = params.size;
this.updateContext();
this.refresh();
}
/**
* Removes the {@link TaskDefinition} from the repository. Shows modal dialog
* prior to deletion to verify if user wants to destroy definition.
* @param item the task definition to be removed.
*/
destroy(item: TaskDefinition) {
this.destroyTasks([item]);
}
/**
* Starts the destroy process of multiple {@link TaskDefinition}s
* by opening a confirmation modal dialog.
*/
destroySelectedTasks() {
const taskDefinitions = this.taskDefinitions.items
.filter((item) => this.itemsSelected.indexOf(item.name) > -1);
this.destroyTasks(taskDefinitions);
}
/**
* Starts the schedule process of multiple {@link TaskDefinition}s
*/
scheduleSelectedTasks() {
const taskDefinitions = this.taskDefinitions.items
.filter((item) => this.itemsSelected.indexOf(item.name) > -1);
this.scheduleTasks(taskDefinitions);
}
/**
* Starts the destroy the {@link TaskDefinition}s in parameter
* by opening a confirmation modal dialog.
* @param {TaskDefinition[]} taskDefinitions
*/
destroyTasks(taskDefinitions: TaskDefinition[]) {
if (taskDefinitions.length === 0) {
return;
}
this.loggerService.log(`Destroy ${taskDefinitions} task definition(s).`, taskDefinitions);
const className = taskDefinitions.length > 1 ? 'modal-lg' : 'modal-md';
this.modal = this.modalService.show(TaskDefinitionsDestroyComponent, { class: className });
this.modal.content.open({ taskDefinitions: taskDefinitions }).subscribe(() => {
if (this.taskDefinitions.items.length === 0 &&
this.taskDefinitions.pageNumber > 0) {
this.taskDefinitions.pageNumber = this.taskDefinitions.pageNumber - 1;
}
this.refresh();
});
}
/**
* Starts the destroy the {@link TaskSchedule[]}s
* by opening a confirmation modal dialog.
* @param {TaskDefinition} taskDefinition
*/
destroySchedules(taskDefinition: TaskDefinition) {
this.modal = this.modalService.show(TaskSchedulesDestroyComponent, { class: 'modal-lg' });
this.tasksService
.getSchedules({
q: taskDefinition.name,
sort: 'SCHEDULE_ID',
order: OrderParams.ASC,
page: 0,
size: 1000
}).pipe(map((page: Page<TaskSchedule>) => {
if (page.totalElements === 0) {
this.notificationService.error('No schedule exists for this task.');
this.modal.hide();
} else {
this.loggerService.log(`Delete ${page.items} task schedule(s).`, page.items);
this.modal.content.open({ taskSchedules: page.items }).subscribe(() => {
this.refresh();
});
}
return page;
})).subscribe();
}
/**
* Starts the schedule the {@link TaskDefinition}s in parameter
* @param {TaskDefinition[]} taskDefinitions
*/
scheduleTasks(taskDefinitions: TaskDefinition[]) {
if (taskDefinitions.length === 0) {
return;
}
this.loggerService.log(`Schedule ${taskDefinitions} task definition(s).`, taskDefinitions);
if (taskDefinitions.length === 1) {
this.schedule(taskDefinitions[0]);
} else {
const key = this.groupRouteService.create(taskDefinitions.map((task) => task.name));
this.router.navigate([`tasks/schedules/create/${key}`]);
}
}
/**
* Route to {@link TaskDefinition} details page.
* @param {TaskDefinition} taskDefinition
*/
details(taskDefinition: TaskDefinition) {
this.router.navigate([`tasks/definitions/${taskDefinition.name}`]);
}
/**
* Route to {@link TaskDefinition} launch page.
* @param {TaskDefinition} taskDefinition
*/
launch(taskDefinition: TaskDefinition) {
this.router.navigate([`tasks/definitions/launch/${taskDefinition.name}`]);
}
/**
* Route to {@link TaskDefinition} schedule page.
* @param {TaskDefinition} taskDefinition
*/
schedule(taskDefinition: TaskDefinition) {
this.router.navigate([`tasks/schedules/create/${taskDefinition.name}`]);
}
/**
* Create task
*/
createTask() {
this.router.navigate([`tasks/create`]);
}
/**
* Navigate to the register app
*/
registerApps() {
this.router.navigate(['/apps/add']);
}
}
<app-tasks-tabulation id="tasks-list" *ngIf="taskDefinitions" #tasksTabulation>
<div dataflowLayoutType type="full">
<app-list-bar [params]="params" [page]="taskDefinitions" [countSelected]="countSelected()" #listBar
(refresh)="refresh()" (search)="search($event)" [actions]="tasksActions()"
(action)="applyAction($event.action)">
</app-list-bar>
<table *ngIf="taskDefinitions?.items && taskDefinitions.items.length > 0"
class="table table-hover table-checkbox" id="taskDefinitionsTable">
<thead>
<tr>
<th style="width: 30px" [dataflowAppRoles]="['ROLE_DESTROY']">
<app-master-checkbox (change)="changeCheckboxes()" *ngIf="form?.checkboxes" [dataflowAppRoles]="['ROLE_CREATE']"
[items]="form.checkboxes"></app-master-checkbox>
</th>
<th style="width: 70px">
<app-sort id="sort-name" (change)="applySort($event)" [value]="'taskName'" [sort]="params">
Name
</app-sort>
</th>
<th>
<div class="head-dsl">
<app-sort id="sort-dsl" (change)="applySort($event)" [value]="'dslText'" [sort]="params">
Definitions
</app-sort>
</div>
</th>
<th nowrap="" style="width: 120px">
Status
</th>
<th> </th>
</tr>
</thead>
<tbody>
<ng-container
*ngFor="let item of taskDefinitions.items | paginate: taskDefinitions.getPaginationInstance(); index as i">
<tr>
<td class="cell-checkbox" [dataflowAppRoles]="['ROLE_DESTROY']">
<input [dataflowAppRoles]="['ROLE_CREATE']" type="checkbox" (change)="changeCheckboxes()"
[(ngModel)]="form.checkboxes[i]"/>
</td>
<td width="200px">
<a style="cursor:pointer" [routerLink]="'/tasks/definitions/' + item.name">{{ item.name }}</a>
</td>
<td>
<app-stream-dsl>{{ item.dslText | truncate: 120 }}</app-stream-dsl>
</td>
<td>
<app-task-status [taskDefinition]="item"></app-task-status>
</td>
<td class="table-actions" width="10px" nowrap="">
<app-list-row-actions [item]="item" (action)="applyAction($event.action, $event.args)"
[actions]="taskActions(i)"></app-list-row-actions>
</td>
</tr>
</ng-container>
</tbody>
</table>
<app-list-pagination [page]="taskDefinitions" [params]="params" (changed)="changePaginationPager($event)"
[item]="'task definition'" [items]="'task definitions'">
</app-list-pagination>
<app-list-empty [page]="taskDefinitions" [filters]="[params.q]">
<p>There is <strong>no registered task</strong>, yet.</p>
<div>
<p [dataflowAppRoles]="['ROLE_CREATE']">
You can <a (click)="createTask()">Create Task(s)</a> or <a (click)="refresh()">Refresh</a> the page
</p>
</div>
</app-list-empty>
<app-list-no-result [page]="taskDefinitions" [filters]="[params.q]">
<p>
No results found for
<strong>'{{ params.q }}'</strong>
</p>
<p>
You can <a (click)="listBar.clearSearch()">clear the search</a> or <a (click)="refresh()">Refresh</a> the page.
</p>
</app-list-no-result>
</div>
</app-tasks-tabulation>