File
Implements
Metadata
selector |
app-stream-deployment-properties |
templateUrl |
./deployment-properties.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Methods
cancelDeployment
|
cancelDeployment()
|
|
|
deployDefinition
|
deployDefinition()
|
|
Deploy the definition and emit on submit event
|
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.
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
Will cleanup any {@link Subscription}s to prevent
memory leaks.
|
ngOnInit
|
ngOnInit()
|
|
Initialize states
Load platforms if skipper is enabled
Parse the current parameters and populate fields
|
deploymentPlatform
|
deploymentPlatform:
|
|
deploymentProperties
|
deploymentProperties:
|
|
Private ngUnsubscribe$
|
ngUnsubscribe$: Subject<any>
|
Type : Subject<any>
|
|
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">×</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 with directive