File

src/app/tasks/task-definitions/task-definitions.component.ts

Description

Provides TaskDefinition related services.

Implements

OnInit OnDestroy

Example

Metadata

selector app-tasks-definitions
styleUrls styles.scss
templateUrl ./task-definitions.component.html

Index

Properties
Methods

Constructor

constructor(tasksService: TasksService, modalService: BsModalService, appsService: AppsService, loggerService: LoggerService, groupRouteService: GroupRouteService, router: Router, authService: AuthService, sharedAboutService: SharedAboutService, notificationService: NotificationService)

Constructor

Parameters :
Name Type Optional Description
tasksService TasksService
modalService BsModalService
appsService AppsService
loggerService LoggerService
groupRouteService GroupRouteService
router Router
authService AuthService
sharedAboutService SharedAboutService
notificationService NotificationService

Methods

applyAction
applyAction(action: string, args?: any)

Apply Action

Parameters :
Name Type Optional Description
action string
args any true
Returns : void
applySort
applySort(sort: SortParams)

Apply sort Triggered on column header click

Parameters :
Name Type Optional Description
sort SortParams
Returns : void
changeCheckboxes
changeCheckboxes()

Update the list of selected checkbox

Returns : void
changePaginationPager
changePaginationPager(params: )

Update event from the Paginator Pager

Parameters :
Name Type Optional Description
params
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 :
Name Type Optional Description
item TaskDefinition

the task definition to be removed.

Returns : void
destroySchedules
destroySchedules(taskDefinition: TaskDefinition)

Starts the destroy the {@link TaskSchedule[]}s by opening a confirmation modal dialog.

Parameters :
Name Type Optional Description
taskDefinition TaskDefinition
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 :
Name Type Optional Description
taskDefinitions TaskDefinition[]
Returns : void
details
details(taskDefinition: TaskDefinition)

Route to TaskDefinition details page.

Parameters :
Name Type Optional Description
taskDefinition TaskDefinition
Returns : void
launch
launch(taskDefinition: TaskDefinition)

Route to TaskDefinition launch page.

Parameters :
Name Type Optional Description
taskDefinition TaskDefinition
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 :
Name Type Optional Description
taskDefinition TaskDefinition
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 :
Name Type Optional Description
taskDefinitions TaskDefinition[]
Returns : void
search
search(params: ListDefaultParams)

Run the search

Parameters :
Name Type Optional Description
params ListDefaultParams
Returns : void
taskActions
taskActions(index: number)

Task Actions

Parameters :
Name Type Optional Description
index number
Returns : {}
tasksActions
tasksActions()

Tasks Actions

Returns : {}
updateContext
updateContext()

Write the context in the service.

Returns : void

Properties

context
context: any
Type : any

Storage context

form
form: any
Type : any

Current forms value

itemsSelected
itemsSelected: Array<string>
Type : Array<string>

Contain a key application of each selected application

listBar
listBar: ListBarComponent
Type : ListBarComponent
Decorators : ViewChild

List Bar Component

modal
modal: BsModalRef
Type : BsModalRef

Modal reference

Private ngUnsubscribe$
ngUnsubscribe$: Subject<any>
Type : Subject<any>

Unsubscribe

params
params: TaskListParams
Type : TaskListParams

State of App List Params

schedulesEnabled
schedulesEnabled:
Default value : false

Schedule Enabled state

taskDefinitions
taskDefinitions: Page<TaskDefinition>
Type : Page<TaskDefinition>

Current page of task definitions

Public tasksService
tasksService: TasksService
Type : TasksService
tasksTabulation
tasksTabulation: TasksTabulationComponent
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>&nbsp;</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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""