File

src/app/streams/streams/deployment-properties/deployment-properties.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-stream-deployment-properties
templateUrl ./deployment-properties.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(fb: FormBuilder, sharedAboutService: SharedAboutService, streamsService: StreamsService)

Adds deployment properties to the FormBuilder

Parameters :
Name Type Optional Description
fb FormBuilder

used establish the deployment properties as a part of the form.

sharedAboutService SharedAboutService

used to check if skipper is enable

streamsService StreamsService

The service used to deploy the stream.

Inputs

stream

Type: StreamDefinition

Outputs

cancel $event type: EventEmitter
submit $event type: EventEmitter

Methods

cancelDeployment
cancelDeployment()

Fire cancel event

Returns : void
deployDefinition
deployDefinition()

Deploy the definition and emit on submit event

Returns : void
displayFileContents
displayFileContents(event: any)

Used to read the deployment properties of a stream from a flat file

Parameters :
Name Type Optional Description
event any

The event from the file selection dialog.

Returns : void
ngOnDestroy
ngOnDestroy()

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

Returns : void
ngOnInit
ngOnInit()

Initialize states Load platforms if skipper is enabled Parse the current parameters and populate fields

Returns : void

Properties

deploymentPlatform
deploymentPlatform:
deploymentProperties
deploymentProperties:
form
form: FormGroup
Type : FormGroup
id
id: String
Type : String
Private ngUnsubscribe$
ngUnsubscribe$: Subject<any>
Type : Subject<any>
platforms
platforms: Platform[]
Type : Platform[]
subscriptionPlatforms
subscriptionPlatforms: Subscription
Type : Subscription
import { Component, OnInit, Output, EventEmitter, Input, OnDestroy } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { StreamDefinition } from '../../model/stream-definition';
import { Subscription, Subject } from 'rxjs';
import { SharedAboutService } from '../../../shared/services/shared-about.service';
import { StreamsService } from '../../streams.service';
import { takeUntil } from 'rxjs/operators';
import { StreamDeployValidator } from '../../stream-deploy/stream-deploy.validator';
import { Platform } from '../../../shared/model/platform';

@Component({
  selector: 'app-stream-deployment-properties',
  templateUrl: './deployment-properties.component.html',
})

/**
 * Component used to deploy stream definitions.
 *
 * @author Damien Vitrac
 * @author Gunnar Hillert
 */
export class DeploymentPropertiesComponent implements OnInit, OnDestroy {

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

  id: String;

  form: FormGroup;

  deploymentProperties = new FormControl('', StreamDeployValidator.validateDeploymentProperties);

  deploymentPlatform = new FormControl('');

  platforms: Platform[];

  subscriptionPlatforms: Subscription;

  @Output()
  public cancel = new EventEmitter();

  @Output()
  public submit = new EventEmitter();

  @Input()
  public stream: StreamDefinition;

  /**
   * Adds deployment properties to the FormBuilder
   * @param fb used establish the deployment properties as a part of the form.
   * @param sharedAboutService used to check if skipper is enable
   * @param streamsService The service used to deploy the stream.
   */
  constructor(private fb: FormBuilder,
              private sharedAboutService: SharedAboutService,
              private streamsService: StreamsService) {
    this.form = fb.group({
      'deploymentProperties': this.deploymentProperties,
      'deploymentPlatform': this.deploymentPlatform
    });
  }

  /**
   * Initialize states
   * Load platforms if skipper is enabled
   * Parse the current parameters and populate fields
   */
  ngOnInit() {
    this.subscriptionPlatforms = this.streamsService.getPlatforms()
      .pipe(takeUntil(this.ngUnsubscribe$))
      .subscribe((platforms: Platform[]) => {
        this.platforms = platforms;
      });

    this.deploymentPlatform.setValue('default');
    if (this.stream.deploymentProperties instanceof Object) {
      if (this.stream.deploymentProperties.platformName) {
        this.deploymentPlatform.setValue(this.stream.deploymentProperties.platformName);
      }
      this.deploymentProperties.setValue(Object.keys(this.stream.deploymentProperties)
        .filter(a => a !== 'spring.cloud.dataflow.skipper.platformName')
        .map(a => {
          return a + '=' + this.stream.deploymentProperties[a];
        }).join('\n'));
    }
  }

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

  /**
   * Deploy the definition and emit on submit event
   */
  deployDefinition() {
    const propertiesAsMap = {};
    if (this.deploymentProperties.value) {
      for (const prop of this.deploymentProperties.value.split('\n')) {
        if (prop && prop.length > 0 && !prop.startsWith('#')) {
          const index = prop.indexOf('=');
          if (index > 0) {
            propertiesAsMap[prop.substr(0, index)] = prop.substr(index + 1);
          }
        }
      }
    }
    propertiesAsMap['spring.cloud.dataflow.skipper.platformName'] = this.deploymentPlatform.value;
    this.stream.deploymentProperties = propertiesAsMap;
    this.submit.emit();
  }

  /**
   * Fire cancel event
   */
  cancelDeployment() {
    this.cancel.emit();
  }

  /**
   * Used to read the deployment properties of a stream from a flat file
   * @param event The event from the file selection dialog.
   */
  displayFileContents(event: any) {
    const file: File = event.target.files[0];
    const reader: FileReader = new FileReader();
    const _form = this.form;
    reader.onloadend = function (e) {
      _form.patchValue({ deploymentProperties: reader.result });
    };
    reader.readAsText(file);
  }
}
<div class="modal-header">
  <h4 class="modal-title pull-left">Deployment properties for <strong>{{ stream.name }}</strong></h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="cancelDeployment()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<form novalidate [formGroup]="form" (ngSubmit)="deployDefinition()">
  <div class="modal-body">

    <p class="index-page--subtitle">
      Please specify any <strong>optional</strong> deployment properties.
      You can either enter deployment properties directly into the text-area
      field below or alternatively, you can point to an external properties file,
      which will be used to populate the text-area field.<br><br>
      For more information please see the
      <a
        href="https://docs.spring.io/spring-cloud-dataflow/docs/current-SNAPSHOT/reference/htmlsingle/#_passing_application_properties_when_deploying_stream"
        target="_blank">Technical Documentation</a>.
    </p>

    <div id="groupPlatform" class="form-group">
      <label for="deploymentPlatform" class="control-label">Platform</label>
      <div>
        <select id="deploymentPlatform" name="deploymentPlatform" formControlName="deploymentPlatform">
          <option *ngFor="let p of platforms" [value]="p.name">{{ p.name }} ({{ p.type }})</option>
        </select>
        <p class="help-block">You can specify the platform for the deployment.</p>
      </div>
    </div>

    <div class="form-group" [ngClass]="form.controls.deploymentProperties.errors ? 'has-warning has-feedback' : ''">
      <label for="deploymentProperties" class="control-label">Deployment Properties</label>
      <div>
          <textarea class="form-control" id="deploymentProperties" name="deploymentProperties"
                    formControlName="deploymentProperties" autofocus rows="5"
                    placeholder="Enter optional deployment properties.
    1 line per property e.g.:
    property1=Spring
    property2=Data Flow"></textarea>
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"
              *ngIf="form.controls.deploymentProperties.errors"></span>
        <p class="help-block" *ngIf="form.controls.deploymentProperties.errors">The format of your deployment properties
          is invalid. {{ form.controls.deploymentProperties.errors.validateDeploymentProperties.reason }}</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label">Select Properties File</label>
      <div>
        <input type="file" (change)="displayFileContents($event)"/>
        <p class="help-block">Please provide a text file containing deployment properties. This will be used to populate
          the text area above.</p>
      </div>
    </div>
  </div>

  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="cancelDeployment()">Back</button>
    <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Update deployment parameters</button>
  </div>
</form>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""