File

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

Description

Component that provides a launcher of task.

Implements

OnInit OnDestroy

Example

Metadata

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

Index

Properties
Methods

Constructor

constructor(tasksService: TasksService, notificationService: NotificationService, routingStateService: RoutingStateService, route: ActivatedRoute, router: Router)

Constructor

Parameters :
Name Type Optional Description
tasksService TasksService
notificationService NotificationService
routingStateService RoutingStateService
route ActivatedRoute
router Router

Methods

cancel
cancel(taskDefinition: TaskDefinition)

Back action Navigate to the previous URL or /tasks/definitions

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

Can select the platform target

Parameters :
Name Type Optional Description
task
Returns : boolean
ngOnDestroy
ngOnDestroy()

Destroy

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

Returns : void
ngOnInit
ngOnInit()

Initialize Load the task definitions and the platforms

Returns : void
prepareParams
prepareParams(name: string, taskArguments: Array, taskProperties: Array, platform: string)

Prepare params

Parameters :
Name Type Optional Description
name string
taskArguments Array<string>
taskProperties Array<string>
platform string
Returns : TaskLaunchParams
submit
submit(name: string)

Launch the task

Parameters :
Name Type Optional Description
name string
Returns : void

Properties

form
form: FormGroup
Type : FormGroup

Form

kvValidators
kvValidators:

Validators args / props component

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

Unsubscribe

submitted
submitted:
Default value : false

Form Subbmitted

task$
task$: Observable<any>
Type : Observable<any>

Observable of Task Definition

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { TasksService } from '../tasks.service';
import { catchError, map, mergeMap, takeUntil } from 'rxjs/operators';
import { EMPTY, Observable, Subject } from 'rxjs';
import { TaskDefinition } from '../model/task-definition';
import { FormControl, FormGroup, Validator, Validators } from '@angular/forms';
import { NotificationService } from '../../shared/services/notification.service';
import { AppError, HttpAppError } from '../../shared/model/error.model';
import { RoutingStateService } from '../../shared/services/routing-state.service';
import { TaskLaunchParams } from '../components/tasks.interface';
import { TaskLaunchValidator } from './task-launch.validator';
import { KvRichTextValidator } from '../../shared/components/kv-rich-text/kv-rich-text.validator';

/**
 * Component that provides a launcher of task.
 *
 * @author Janne Valkealahti
 * @author Gunnar Hillert
 * @author Damien Vitrac
 */
@Component({
  selector: 'app-task-launch',
  templateUrl: './task-launch.component.html',
  styleUrls: ['./styles.scss']
})
export class TaskLaunchComponent implements OnInit, OnDestroy {

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

  /**
   * Observable of Task Definition
   */
  task$: Observable<any>;

  /**
   * Form
   */
  form: FormGroup;

  /**
   * Validators args / props component
   */
  kvValidators = {
    args: {
      key: [Validators.required],
      value: []
    },
    props: {
      key: [Validators.required, TaskLaunchValidator.key],
      value: []
    }
  };

  /**
   * Form Subbmitted
   */
  submitted = false;

  /**
   * Constructor
   *
   * @param {TasksService} tasksService
   * @param {NotificationService} notificationService
   * @param {RoutingStateService} routingStateService
   * @param {ActivatedRoute} route
   * @param {Router} router
   */
  constructor(private tasksService: TasksService,
              private notificationService: NotificationService,
              private routingStateService: RoutingStateService,
              private route: ActivatedRoute,
              private router: Router) {
  }

  /**
   * Initialize
   * Load the task definitions and the platforms
   */
  ngOnInit() {
    this.task$ = this.route.params
      .pipe(
        mergeMap(val => this.tasksService.getDefinition(val.id)),
        mergeMap(
          val => this.tasksService.getPlatforms()
            .pipe(map(val2 => {
              if (val2.length === 0) {
                this.form = new FormGroup({
                  args: new FormControl('', KvRichTextValidator.validateKvRichText(this.kvValidators.args)),
                  props: new FormControl('', KvRichTextValidator.validateKvRichText(this.kvValidators.props)),
                  platform: new FormControl('')
                });
              } else {
                this.form = new FormGroup({
                  args: new FormControl('', KvRichTextValidator.validateKvRichText(this.kvValidators.args)),
                  props: new FormControl('', KvRichTextValidator.validateKvRichText(this.kvValidators.props)),
                  platform: new FormControl('', Validators.required)
                });
              }
              if (val2.length === 1) {
                this.form.get('platform').setValue(val2[0].name);
              }
              return {
                taskDefinition: val,
                platforms: val2
              };
            }))
        ),
        catchError((error) => {
          if (HttpAppError.is404(error)) {
            this.router.navigate(['/tasks/definitions']);
          }
          this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
          return EMPTY;
        })
      );
  }


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

  /**
   * Prepare params
   * @param {string} name
   * @param {Array<string>} taskArguments
   * @param {Array<string>} taskProperties
   * @param {string} platform
   * @returns {TaskLaunchParams}
   */
  prepareParams(name: string, taskArguments: Array<string>, taskProperties: Array<string>, platform: string): TaskLaunchParams {
    if (platform && platform !== 'default') {
      taskProperties.push(`spring.cloud.dataflow.task.platformName=${platform}`);
    }
    return {
      name: name,
      args: taskArguments.filter((a) => a !== '').join(' '),
      props: taskProperties.filter((a) => a !== '').join(', ')
    };
  }

  /**
   * Launch the task
   *
   * @param name
   */
  submit(name: string) {
    this.submitted = true;
    if (!this.form.valid) {
      this.notificationService.error('Some field(s) are invalid.');
    } else {
      const taskArguments = this.form.get('args').value.toString().split('\n');
      const taskProperties = this.form.get('props').value.toString().split('\n');
      const platform = this.form.get('platform').value;
      this.tasksService.launchDefinition(this.prepareParams(name, taskArguments, taskProperties, platform))
        .pipe(takeUntil(this.ngUnsubscribe$))
        .subscribe(
          data => {
            this.notificationService.success('Successfully launched task "' + name + '"');
            this.router.navigate(['/tasks/definitions']);
          },
          error => {
            this.notificationService.error(AppError.is(error) ? error.getMessage() : error);
          }
        );
    }
  }

  /**
   * Back action
   * Navigate to the previous URL or /tasks/definitions
   *
   * @param {TaskDefinition} taskDefinition
   */
  cancel(taskDefinition: TaskDefinition) {
    this.routingStateService.back(`/tasks/definitions/${taskDefinition.name}`);
  }

  /**
   * Can select the platform target
   * @param task
   */
  canSelectPlatform(task): boolean {
    return task.platforms && task.platforms.length > 1;
  }

}
<app-page *ngIf="task$ | async as task; else loading">

  <app-page-head>
    <app-page-head-back [defaultUrl]="'/tasks/definitions/' + task.taskDefinition.name"></app-page-head-back>
    <app-page-head-title>Launch task <strong>{{ task.taskDefinition.name }}</strong></app-page-head-title>
  </app-page-head>

  <p>This action will launch the <strong>task definition</strong>.
    Optionally, you can add properties and arguments.</p>

  <form [formGroup]="form" class="form-horizontal" role="form" (ngSubmit)="submit(task.taskDefinition.name)" novalidate>

    <div dataflowLayoutType type="large">

      <div *ngIf="canSelectPlatform(task)">
        <div class="form-group" [class.has-error]="form.get('platform').invalid && submitted">
          <label class="control-label col-xs-2" style="text-align: left;padding-top: 0">
            Platform:
            <em class="required">*</em>
          </label>
          <div class="col-xs-6">
            <select tabindex="1" formControlName="platform">
              <option value="">Select</option>
              <option *ngFor="let platform of task.platforms" [value]="platform.name">
                {{ platform.name }}
                ({{ platform.type }})
              </option>
            </select>
            <span class="help-block" *ngIf="form.get('platform').invalid && submitted">
              Please select a platform.
            </span>
          </div>
        </div>
        <hr>
      </div>

      <div class="form-group" [class.has-error]="form.get('args').invalid && submitted">
        <label class="control-label col-xs-2" style="text-align: left;padding-top: 0">
          Arguments:
        </label>
        <div class="col-xs-10">
          <app-kv-rich-text [validators]="kvValidators.args" [formControl]="form.get('args')"
                            placeholder="--myarg=myvalue"></app-kv-rich-text>
          <span class="help-block" *ngIf="form.get('args').invalid && submitted">
            One or more arguments are invalid.<br/>Example: <code>myarg=myvalue</code>.
          </span>
        </div>


      </div>

      <div class="form-group" [class.has-error]="form.get('props').invalid && submitted">
        <label class="control-label col-xs-2" style="text-align: left;padding-top: 0">
          Parameters:
        </label>
        <div class="col-xs-10">
          <app-kv-rich-text [validators]="kvValidators.props" [formControl]="form.get('props')"
                            placeholder="app.myparam=myvalue"></app-kv-rich-text>
          <span class="help-block" *ngIf="form.get('props').invalid && submitted">
          One or more parameters are invalid.<br/>Example: <code>app.myarg=myvalue</code>.
          </span>
        </div>
      </div>

    </div>

    <app-page-actions>
      <button type="button" class="btn btn-default" (click)="cancel(task.taskDefinition)">
        Cancel
      </button>
      <button type="submit" class="btn btn-primary" id="launch-task">
        Launch the task
      </button>
    </app-page-actions>

  </form>
</app-page>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""