File

src/app/jobs/jobs/jobs.component.ts

Description

Main entry point to the Jobs Module. Provides a paginated list of JobExecutions and also provides operations to stop/restart JobExecutions

Implements

OnInit OnDestroy

Example

Metadata

templateUrl ./jobs.component.html

Index

Properties
Methods

Constructor

constructor(jobsService: JobsService, notificationService: NotificationService, confirmService: ConfirmService, authService: AuthService, loggerService: LoggerService, router: Router)

Constructor

Parameters :
Name Type Optional Description
jobsService JobsService
notificationService NotificationService
confirmService ConfirmService
authService AuthService
loggerService LoggerService
router Router

Methods

applyAction
applyAction(action: string, item: JobExecution)

Apply Action

Parameters :
Name Type Optional Description
action string
item JobExecution
Returns : void
changePaginationPager
changePaginationPager(params: )

Update event from the Paginator Pager

Parameters :
Name Type Optional Description
params
Returns : void
jobActions
jobActions(item: JobExecution, index: number)

Job Actions

Parameters :
Name Type Optional Description
item JobExecution
index number
Returns : {}
Public loadJobExecutions
loadJobExecutions()

Load a paginated list of JobExecutions.

Returns : void
ngOnDestroy
ngOnDestroy()

Will cleanup any {@link Subscription}s to prevent memory leaks.

Returns : void
ngOnInit
ngOnInit()

As soon as the page loads we retrieve a list of JobExecutions.

Returns : void
refresh
refresh()

Refresh action

Returns : void
restartJob
restartJob(item: JobExecution)

Restart a job

Parameters :
Name Type Optional Description
item JobExecution
Returns : void
stopJob
stopJob(item: JobExecution)

Stop a job

Parameters :
Name Type Optional Description
item JobExecution
Returns : void
updateContext
updateContext()

Write the context in the service.

Returns : void
viewJob
viewJob(item: JobExecution)

Navigate to the job execution page

Parameters :
Name Type Optional Description
item JobExecution
Returns : void
viewTask
viewTask(item: JobExecution)

Navigate to the task definition page

Parameters :
Name Type Optional Description
item JobExecution
Returns : void

Properties

context
context: any
Type : any

Storage context

Public jobExecutions
jobExecutions: Page<JobExecution>
Type : Page<JobExecution>

Jobs

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

Unsubscribe

params
params: ListParams
Type : ListParams

State of Job List Params

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Subscription, Subject } from 'rxjs';
import { Page } from '../../shared/model';
import { JobsService } from '../jobs.service';
import { JobExecution } from '../model/job-execution.model';
import { takeUntil } from 'rxjs/operators';
import { ListParams, OrderParams } from '../../shared/components/shared.interface';
import { ConfirmService } from '../../shared/components/confirm/confirm.service';
import { NotificationService } from '../../shared/services/notification.service';
import { LoggerService } from '../../shared/services/logger.service';
import { AuthService } from '../../auth/auth.service';

/**
 * Main entry point to the Jobs Module. Provides
 * a paginated list of {@link JobExecution}s and
 * also provides operations to stop/restart {@link JobExecution}s
 *
 * @author Gunnar Hillert
 * @author Damien Vitrac
 */
@Component({
  templateUrl: './jobs.component.html',
})
export class JobsComponent implements OnInit, OnDestroy {

  /**
   * Unsubscribe
   */
  private ngUnsubscribe$: Subject<any> = new Subject();

  /**
   * Jobs
   */
  public jobExecutions: Page<JobExecution>;

  /**
   * State of Job List Params
   * @type {SortParams}
   */
  params: ListParams = {
    sort: 'id',
    order: OrderParams.ASC,
    page: 0,
    size: 30
  };

  /**
   * Storage context
   */
  context: any;

  /**
   * Constructor
   *
   * @param {JobsService} jobsService
   * @param {NotificationService} notificationService
   * @param {ConfirmService} confirmService
   * @param {LoggerService} loggerService
   * @param {Router} router
   */
  constructor(private jobsService: JobsService,
              private notificationService: NotificationService,
              private confirmService: ConfirmService,
              private authService: AuthService,
              private loggerService: LoggerService,
              private router: Router) {
  }

  /**
   * As soon as the page loads we retrieve a list
   * of {@link JobExecution}s.
   */
  ngOnInit() {
    this.context = this.jobsService.jobsContext;
    this.params = { ...this.context };
    this.loadJobExecutions();
  }

  /**
   * Will cleanup any {@link Subscription}s to prevent
   * memory leaks.
   */
  ngOnDestroy() {
    this.updateContext();
    this.ngUnsubscribe$.next();
    this.ngUnsubscribe$.complete();
  }

  /**
   * Job Actions
   * @param {JobExecution} item
   * @param {number} index
   */
  jobActions(item: JobExecution, index: number) {
    return [
      {
        id: 'job-view' + index,
        icon: 'info-circle',
        action: 'view',
        title: 'Show details',
        isDefault: true
      },
      {
        id: 'job-restart' + index,
        icon: 'repeat',
        action: 'restart',
        title: 'Restart the job',
        hidden: !this.authService.securityInfo.canAccess(['ROLE_DEPLOY'])
      },
      {
        id: 'job-stop' + index,
        icon: 'stop',
        action: 'stop',
        title: 'Stop the job',
        disabled: !item.stoppable
      }
    ];
  }

  /**
   * Apply Action
   * @param action
   * @param item
   */
  applyAction(action: string, item: JobExecution) {
    switch (action) {
      case 'view':
        this.viewJob(item);
        break;
      case 'restart':
        this.restartJob(item);
        break;
      case 'stop':
        this.stopJob(item);
        break;
    }
  }

  /**
   * Load a paginated list of {@link JobExecution}s.
   */
  public loadJobExecutions() {
    this.jobsService.getJobExecutions(this.params)
      .pipe(takeUntil(this.ngUnsubscribe$))
      .subscribe(page => {
        if (page.items.length === 0 && this.params.page > 0) {
          this.params.page = 0;
          this.loadJobExecutions();
          return;
        }
        this.jobExecutions = page;
        // this.changeCheckboxes();
        this.updateContext();
      }, error => {
        this.notificationService.error(error);
      });
  }

  /**
   * Refresh action
   */
  refresh() {
    this.loadJobExecutions();
  }

  /**
   * Update event from the Paginator Pager
   * @param params
   */
  changePaginationPager(params) {
    this.params.page = params.page;
    this.params.size = params.size;
    this.updateContext();
    this.loadJobExecutions();
  }

  /**
   * Write the context in the service.
   */
  updateContext() {
    this.context.sort = this.params.sort;
    this.context.order = this.params.order;
    this.context.page = this.params.page;
    this.context.size = this.params.size;
  }

  /**
   * Restart a job
   * @param {JobExecution} item
   */
  restartJob(item: JobExecution) {
    const title = `Confirm restart the job execution`;
    const description = `This action will restart the steps failed of the  ` +
      `<strong>job execution ${item.name} (${item.jobExecutionId})</strong>. Are you sure?`;
    this.confirmService.open(title, description, { confirm: 'Restart' }).subscribe(() => {
      this.loggerService.log('Restart Job ' + item.jobExecutionId);
      this.jobsService.restartJob(item)
        .pipe(takeUntil(this.ngUnsubscribe$))
        .subscribe(data => {
          this.notificationService.success('Successfully restarted job "' + item.name + '"');
        }, error => {
          this.notificationService.error(error);
        });
    });
  }

  /**
   * Stop a job
   * @param {JobExecution} item
   */
  stopJob(item: JobExecution) {
    const title = `Confirm stop job execution`;
    const description = `This action will stop the  ` +
      `<strong>job execution ${item.name} (${item.jobExecutionId})</strong>. Are you sure?`;
    this.confirmService.open(title, description, { confirm: 'Stop' }).subscribe(() => {
      this.loggerService.log('Stop Job' + item.jobExecutionId);
      this.jobsService.stopJob(item)
        .pipe(takeUntil(this.ngUnsubscribe$))
        .subscribe(data => {
            this.notificationService.success('Successfully stopped job "' + item.name + '"');
          }, error => {
            this.notificationService.error(error);
          }
        );
    });
  }

  /**
   * Navigate to the job execution page
   * @param {JobExecution} item
   */
  viewJob(item: JobExecution) {
    this.router.navigate(['jobs/executions/' + item.jobExecutionId]);
  }

  /**
   * Navigate to the task definition page
   * @param {JobExecution} item
   */
  viewTask(item: JobExecution) {
    this.router.navigate(['tasks/executions/' + item.taskExecutionId]);
  }

}
<app-page *ngIf="jobExecutions">

  <app-page-head>
    <app-page-head-title><strong>Batch Job Executions</strong></app-page-head-title>
  </app-page-head>

  <div dataflowLayoutType type="full">
    <p>
      This section lists all available batch job executions and provides the control to restart a job execution (if
      restartable).
    </p>

    <div class="list-bar" *ngIf="!(jobExecutions.totalPages < 2 && jobExecutions.items.length === 0)">
      <button class="btn btn-default btn-fa" (click)="refresh()" title="Refresh" type="button">
        <span class="fa fa-refresh"></span>
        Refresh
      </button>
    </div>

    <table id="tableJobs" *ngIf="jobExecutions?.items && jobExecutions.items.length > 0"
           class="table table-hover table-actions">
      <thead>
      <tr>
        <th style="width: 100px">Execution Id</th>
        <th>Name</th>
        <th style="width: 100px">Task Id</th>
        <th style="width: 100px">Instance Id</th>
        <th style="width: 200px">Job Start Time</th>
        <th style="width: 150px" nowrap="">Step Execution Count</th>
        <th style="width: 100px">Status</th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of jobExecutions.items | paginate: jobExecutions.getPaginationInstance(); index as i">
        <td>
          {{ item.jobExecutionId }}
        </td>
        <td>
          <a style="cursor: pointer" (click)="viewJob(item)">{{ item.name }}</a>
          <app-definition-status [jobExecution]="item"></app-definition-status>
        </td>
        <td>
          <a style="cursor: pointer" (click)="viewTask(item)">{{ item.taskExecutionId }}</a>
        </td>
        <td>{{ item.jobInstanceId }}</td>
        <td>{{ item.startTimeFormatted }}</td>
        <td>{{ item.stepExecutionCount }}</td>
        <td>
          <app-job-execution-status [status]="item.status"></app-job-execution-status>
        </td>
        <td class="table-actions" width="80px" nowrap="">
          <app-list-row-actions [item]="item" (action)="applyAction($event.action, $event.args)"
                                [actions]="jobActions(item, i)"></app-list-row-actions>
        </td>
      </tr>
      </tbody>
    </table>

    <app-list-pagination [page]="jobExecutions" [params]="params" (changed)="changePaginationPager($event)"
                         [item]="'job execution'" [items]="'job executions'">
    </app-list-pagination>

    <app-list-empty [page]="jobExecutions" [filters]="[]">
      <p>There are <strong>no batch job executions</strong> currently available.</p>
      <p>
        You can <a (click)="refresh()">Refresh</a> the page.
      </p>
    </app-list-empty>
  </div>
</app-page>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""