File

src/app/tasks/task-definition/schedules/task-definition-schedules.component.ts

Description

Component that shows the executions of a Stream Schedule

Implements

OnInit OnDestroy

Example

Metadata

selector app-task-definition-schedules
styleUrls .styles.scss
templateUrl task-definition-schedules.component.html

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, router: Router, loggerService: LoggerService, modalService: BsModalService, tasksService: TasksService)

Constructor

Parameters :
Name Type Optional Description
route ActivatedRoute
router Router
loggerService LoggerService
modalService BsModalService
tasksService TasksService

Methods

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

Apply Action

Parameters :
Name Type Optional Description
action string
args any true
Returns : void
changeCheckboxes
changeCheckboxes(page: Page)

Update the list of selected checkbox

Parameters :
Name Type Optional Description
page Page<TaskSchedule>
Returns : void
countSelected
countSelected()

Number of selected task definitions

Returns : number
destroySchedules
destroySchedules(taskSchedules: TaskSchedule[])

Starts the destroy the TaskSchedules in parameter by opening a confirmation modal dialog.

Parameters :
Name Type Optional Description
taskSchedules TaskSchedule[]
Returns : void
destroySelectedSchedules
destroySelectedSchedules(page: Page)

Starts the destroy process of multiple TaskDefinitions by opening a confirmation modal dialog.

Parameters :
Name Type Optional Description
page Page<TaskSchedule>
Returns : void
details
details(taskSchedule: TaskSchedule)

Route to TaskSchedule details page.

Parameters :
Name Type Optional Description
taskSchedule TaskSchedule
Returns : void
isSchedulesEmpty
isSchedulesEmpty(page: Page)

Determine if there is no task execution

Parameters :
Name Type Optional Description
page Page<TaskSchedule>
Returns : boolean
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 :
Name Type Optional Description
params ListDefaultParams
Returns : void
scheduleActions
scheduleActions(item: TaskSchedule, index: number)

Schedule Actions

Parameters :
Name Type Optional Description
item TaskSchedule
index number
Returns : {}
schedulesActions
schedulesActions()

Schedules Actions

Returns : {}

Properties

form
form: any
Type : any

Current forms value

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

Contain a key application of each selected application

lastParams
lastParams: ListDefaultParams
Type : ListDefaultParams

Last Params

modal
modal: BsModalRef
Type : BsModalRef

Modal reference

params$
params$: Subject<ListDefaultParams>
Type : Subject<ListDefaultParams>

Params Subject

schedules$
schedules$: Observable<any>
Type : Observable<any>

Observable of page of task schedules

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { map, share } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
import { TasksService } from '../../tasks.service';
import { LoggerService } from '../../../shared/services/logger.service';
import { TaskSchedule } from '../../model/task-schedule';
import { TaskSchedulesDestroyComponent } from '../../task-schedules-destroy/task-schedules-destroy.component';
import { ListDefaultParams, OrderParams } from '../../../shared/components/shared.interface';
import { Page } from '../../../shared/model/page';

/**
 * Component that shows the executions of a Stream Schedule
 *
 * @author Damien Vitrac
 */
@Component({
  selector: 'app-task-definition-schedules',
  templateUrl: 'task-definition-schedules.component.html',
  styleUrls: ['../styles.scss'],
})
export class TaskDefinitionScheduleComponent implements OnInit, OnDestroy {

  /**
   * Observable of page of task schedules
   */
  schedules$: Observable<any>;

  /**
   * Params Subject
   */
  params$: Subject<ListDefaultParams>;

  /**
   * Last Params
   */
  lastParams: ListDefaultParams;

  /**
   * Current forms value
   */
  form: any = {
    checkboxes: []
  };

  /**
   * Contain a key application of each selected application
   * @type {Array}
   */
  itemsSelected: Array<string> = [];

  /**
   * Modal reference
   */
  modal: BsModalRef;

  /**
   * Constructor
   *
   * @param {ActivatedRoute} route
   * @param {Router} router
   * @param {LoggerService} loggerService
   * @param {BsModalService} modalService
   * @param {TasksService} tasksService
   */
  constructor(private route: ActivatedRoute,
              private router: Router,
              private loggerService: LoggerService,
              private modalService: BsModalService,
              private tasksService: TasksService) {
    this.params$ = new Subject<ListDefaultParams>();
  }

  /**
   * Init component, call refresh method
   */
  ngOnInit() {
    this.params$.subscribe((params: ListDefaultParams) => {
      this.schedules$ = this.tasksService.getSchedules(params)
        .pipe(map((page: Page<TaskSchedule>) => {
          this.form.checkboxes = page.items.map((schedule) => {
            return this.itemsSelected.indexOf(schedule.name) > -1;
          });
          this.changeCheckboxes(page);
          return page;
        }))
        .pipe(map((page: Page<TaskSchedule>) => {
          return {
            page: page,
            params: params
          };
        }))
        .pipe(share());
    });

    this.route.parent.params.subscribe((params: Params) => {
      this.refresh({
        q: params.id,
        sort: 'SCHEDULE_ID',
        order: OrderParams.ASC,
        page: 0,
        size: 100000
      });
    });
  }

  /**
   * Schedules Actions
   */
  schedulesActions() {
    return [
      {
        id: 'destroy-schedules',
        icon: 'trash',
        action: 'destroySelected',
        title: 'Destroy schedule(s)'
      },
    ];
  }

  /**
   * Schedule Actions
   * @param {TaskSchedule} item
   * @param {number} index
   */
  scheduleActions(item: TaskSchedule, index: number) {
    return [
      {
        id: 'details-schedule' + index,
        icon: 'info-circle',
        action: 'details',
        title: 'Show details',
        isDefault: true
      },
      {
        divider: true
      },
      {
        id: 'destroy-schedule' + index,
        icon: 'trash',
        action: 'destroy',
        title: 'Delete schedule'
      }
    ];
  }

  /**
   * Apply Action
   * @param action
   * @param args
   */
  applyAction(action: string, args?: any) {
    switch (action) {
      case 'details':
        this.details(args);
        break;
      case 'destroy':
        this.destroySchedules([args]);
        break;
      case 'destroySelected':
        this.destroySelectedSchedules(args);
        break;
    }
  }

  /**
   * On Destroy
   */
  ngOnDestroy(): void {
    this.params$.complete();
    this.params$.unsubscribe();
  }

  /**
   * Refresh
   * Create an observable which provides the required data
   * @param {ScheduleExecutionListParams} params
   */
  refresh(params: ListDefaultParams) {
    this.lastParams = params;
    this.params$.next(params);
  }

  /**
   * Determine if there is no task execution
   * @param {Page<TaskExecution>} page
   * @returns {boolean}
   */
  isSchedulesEmpty(page: Page<TaskSchedule>): boolean {
    if (page.totalPages < 2) {
      return page.items.length === 0;
    }
    return false;
  }

  /**
   * Update the list of selected checkbox
   */
  changeCheckboxes(page: Page<TaskSchedule>) {
    if (page.items.length !== this.form.checkboxes.length) {
      return;
    }
    const value: Array<string> = page.items.map((schedule, index) => {
      if (this.form.checkboxes[index]) {
        return schedule.name;
      }
    }).filter((a) => a != null);
    this.itemsSelected = value;
  }

  /**
   * Number of selected task definitions
   * @returns {number}
   */
  countSelected(): number {
    return this.form.checkboxes.filter((a) => !!a).length;
  }

  /**
   * Starts the destroy process of multiple {@link TaskDefinition}s
   * by opening a confirmation modal dialog.
   */
  destroySelectedSchedules(page: Page<TaskSchedule>) {
    const schedules = page.items
      .filter((item) => this.itemsSelected.indexOf(item.name) > -1);
    this.destroySchedules(schedules);
  }

  /**
   * Starts the destroy the {@link TaskSchedule}s in parameter
   * by opening a confirmation modal dialog.
   * @param {Page<TaskSchedule>} page
   * @param {TaskSchedule[]} taskSchedules
   */
  destroySchedules(taskSchedules: TaskSchedule[]) {
    if (taskSchedules.length === 0) {
      return;
    }
    this.loggerService.log(`Destroy ${taskSchedules} task schedule(s).`, taskSchedules);
    const className = taskSchedules.length > 1 ? 'modal-lg' : 'modal-md';
    this.modal = this.modalService.show(TaskSchedulesDestroyComponent, { class: className });
    this.modal.content.open({ taskSchedules: taskSchedules }).subscribe(() => {
      this.refresh(this.lastParams);
    });
  }

  /**
   * Route to {@link TaskSchedule} details page.
   * @param {TaskSchedule} taskSchedule
   */
  details(taskSchedule: TaskSchedule) {
    this.router.navigate([`tasks/schedules/${taskSchedule.name}`]);
  }

}
<div *ngIf="schedules$ | async as schedules; else loading" dataflowLayoutType type="full">

  <div id="schedules-list">

    <app-list-bar [params]="schedules.params" [page]="schedules.page" [countSelected]="countSelected()" #listBar
                  (refresh)="refresh(schedules.params)" [hideSearch]="true"
                  [actions]="schedulesActions()" (action)="applyAction($event.action, schedules.page)">
    </app-list-bar>

    <table *ngIf="schedules.page?.items && schedules.page.items.length > 0"
           class="table table-checkbox table-hover" id="taskSchedulesTable">
      <thead>
      <tr>
        <th style="width: 30px">
          <app-master-checkbox (change)="changeCheckboxes(schedules.page)" *ngIf="form?.checkboxes"
                               [dataflowAppRoles]="['ROLE_CREATE']" [items]="form.checkboxes"></app-master-checkbox>
        </th>
        <th>
          Schedule Name
        </th>
        <th nowrap="">
          Cron Expression
        </th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody>
      <ng-container
        *ngFor="let item of schedules.page.items | paginate: schedules.page.getPaginationInstance(); index as i">
        <tr>
          <td class="cell-checkbox">
            <input [dataflowAppRoles]="['ROLE_CREATE']" type="checkbox" (change)="changeCheckboxes(schedules.page)"
                   [(ngModel)]="form.checkboxes[i]"/>
          </td>
          <td>
            <a class="link-schedule" (click)="details(item)" style="cursor: pointer">{{ item.name }}</a>
          </td>
          <td>
            {{ item.cronExpression }}
          </td>
          <td class="table-actions" width="50px" nowrap="">
            <app-list-row-actions [item]="item" (action)="applyAction($event.action, $event.args)"
                                  [actions]="scheduleActions(item, i)"></app-list-row-actions>
          </td>
        </tr>
      </ng-container>
      </tbody>
    </table>

    <app-list-empty [page]="schedules.page" [filters]="[]">
      <p>There is <strong>no task schedule</strong>.</p>
      <p [dataflowAppRoles]="['ROLE_CREATE']">
        You can <a (click)="refresh(schedules.params)">Refresh</a> the page
      </p>
    </app-list-empty>

    <!--
    <div *ngIf="schedules.page" id="empty" style="padding-top:1.5rem">
      <div *ngIf="isSchedulesEmpty(schedules.page)" class="text-center">
        <div class="alert alert-warning" style="display:inline-block;margin:0 auto">
          <strong>No associate schedule.</strong>
        </div>
      </div>
    </div>
    -->

  </div>
</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""