You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by bo...@apache.org on 2023/01/20 21:11:09 UTC
[streampipes] branch chore/formatting-inting-editor created (now ee7bb5adf)
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a change to branch chore/formatting-inting-editor
in repository https://gitbox.apache.org/repos/asf/streampipes.git
at ee7bb5adf [#877] apply formatting and linting to editor module
This branch includes the following new commits:
new ee7bb5adf [#877] apply formatting and linting to editor module
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[streampipes] 01/01: [#877] apply formatting and linting to editor module
Posted by bo...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bossenti pushed a commit to branch chore/formatting-inting-editor
in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit ee7bb5adfa16aa423b280176a1e5e681085716e1
Author: bossenti <bo...@posteo.de>
AuthorDate: Fri Jan 20 22:10:34 2023 +0100
[#877] apply formatting and linting to editor module
---
ui/.eslintignore | 1 -
ui/.prettierignore | 1 -
.../output-strategy/base/BaseOutputStrategy.ts | 26 +-
.../custom-output-strategy.component.html | 86 +-
.../custom-output-strategy.component.scss | 1 -
.../custom-output-strategy.component.ts | 101 +-
.../output-strategy/output-strategy.component.html | 44 +-
.../output-strategy/output-strategy.component.scss | 10 +-
.../output-strategy/output-strategy.component.ts | 43 +-
.../property-selection.component.html | 37 +-
.../property-selection.component.scss | 4 +-
.../property-selection.component.ts | 90 +-
.../user-defined-output.component.html | 85 +-
.../user-defined-output.component.scss | 1 -
.../user-defined-output.component.ts | 137 +--
.../pipeline-assembly.component.html | 154 ++-
.../pipeline-assembly.component.scss | 11 +-
.../pipeline-assembly.component.ts | 226 ++--
.../pipeline-element-documentation.component.html | 8 +-
.../pipeline-element-documentation.component.scss | 2 +-
.../pipeline-element-documentation.component.ts | 52 +-
.../pipeline-element-icon-stand-row.component.html | 58 +-
.../pipeline-element-icon-stand-row.component.scss | 84 +-
.../pipeline-element-icon-stand-row.component.ts | 59 +-
.../pipeline-element-icon-stand.component.html | 244 +++--
.../pipeline-element-icon-stand.component.scss | 89 +-
.../pipeline-element-icon-stand.component.ts | 306 +++---
.../pipeline-element-options.component.html | 142 ++-
.../pipeline-element-options.component.ts | 338 +++---
.../pipeline-element-preview.component.html | 17 +-
.../pipeline-element-preview.component.scss | 32 +-
.../pipeline-element-preview.component.ts | 76 +-
.../pipeline-element-recommendation.component.html | 35 +-
.../pipeline-element-recommendation.component.ts | 290 ++---
.../pipeline-element.component.html | 9 +-
.../pipeline-element/pipeline-element.component.ts | 38 +-
.../components/pipeline/pipeline.component.html | 116 +-
.../components/pipeline/pipeline.component.ts | 1107 ++++++++++++--------
ui/src/app/editor/constants/editor.constants.ts | 13 +-
.../compatible-elements.component.html | 41 +-
.../compatible-elements.component.scss | 13 +-
.../compatible-elements.component.ts | 138 +--
.../dialog/customize/customize.component.html | 178 +++-
.../dialog/customize/customize.component.scss | 7 +-
.../editor/dialog/customize/customize.component.ts | 365 ++++---
ui/src/app/editor/dialog/help/help.component.html | 88 +-
ui/src/app/editor/dialog/help/help.component.scss | 8 +-
ui/src/app/editor/dialog/help/help.component.ts | 157 +--
.../matching-error/matching-error.component.html | 39 +-
.../matching-error/matching-error.component.scss | 2 +-
.../matching-error/matching-error.component.ts | 31 +-
.../missing-elements-for-tutorial.component.html | 24 +-
.../missing-elements-for-tutorial.component.scss | 2 +-
.../missing-elements-for-tutorial.component.ts | 24 +-
.../pipeline-element-discovery.component.html | 41 +-
.../pipeline-element-discovery.component.scss | 4 +-
.../pipeline-element-discovery.component.ts | 124 +--
.../save-pipeline/save-pipeline.component.html | 144 ++-
.../save-pipeline/save-pipeline.component.scss | 20 +-
.../save-pipeline/save-pipeline.component.ts | 306 +++---
.../welcome-tour/welcome-tour.component.html | 45 +-
.../welcome-tour/welcome-tour.component.scss | 28 +-
.../dialog/welcome-tour/welcome-tour.component.ts | 69 +-
ui/src/app/editor/editor.component.html | 47 +-
ui/src/app/editor/editor.component.scss | 10 +-
ui/src/app/editor/editor.component.ts | 272 ++---
ui/src/app/editor/editor.module.ts | 19 +-
.../filter/enabled-pipeline-element.filter.ts | 17 +-
ui/src/app/editor/model/editor.model.ts | 86 +-
ui/src/app/editor/model/jsplumb.model.ts | 12 +-
ui/src/app/editor/services/editor.service.ts | 228 ++--
.../app/editor/services/jsplumb-bridge.service.ts | 32 +-
.../app/editor/services/jsplumb-config.service.ts | 314 +++---
.../editor/services/jsplumb-endpoint.service.ts | 80 +-
.../app/editor/services/jsplumb-factory.service.ts | 43 +-
ui/src/app/editor/services/jsplumb.service.ts | 695 +++++++-----
.../app/editor/services/object-provider.service.ts | 74 +-
.../services/pipeline-canvas-scrolling.service.ts | 19 +-
.../app/editor/services/pipeline-editor.service.ts | 23 +-
.../services/pipeline-element-dragged.service.ts | 12 +-
.../services/pipeline-element-group-filter.pipe.ts | 29 +-
.../services/pipeline-element-name-filter.pipe.ts | 28 +-
.../pipeline-element-recommendation.service.ts | 43 +-
.../services/pipeline-element-type-filter.pipe.ts | 25 +-
.../services/pipeline-positioning.service.ts | 362 ++++---
.../app/editor/services/pipeline-style.service.ts | 114 +-
.../editor/services/pipeline-validation.service.ts | 119 ++-
ui/src/app/editor/utils/editor.utils.ts | 127 ++-
ui/src/app/editor/utils/style-sanitizer.ts | 13 +-
.../elements/pipeline-elements-row.component.html | 4 +-
90 files changed, 5283 insertions(+), 3635 deletions(-)
diff --git a/ui/.eslintignore b/ui/.eslintignore
index c980966c1..4c9d16627 100644
--- a/ui/.eslintignore
+++ b/ui/.eslintignore
@@ -25,7 +25,6 @@ src/app/core-ui
src/app/CustomMaterial
src/app/dashboard
src/app/data-explorer
-src/app/editor
src/app/files
src/app/info
src/app/login
diff --git a/ui/.prettierignore b/ui/.prettierignore
index 3930e91ee..fd1073283 100644
--- a/ui/.prettierignore
+++ b/ui/.prettierignore
@@ -25,7 +25,6 @@ src/app/core-ui
src/app/CustomMaterial
src/app/dashboard
src/app/data-explorer
-src/app/editor
src/app/files
src/app/info
src/app/login
diff --git a/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts b/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts
index 8a920817f..1d57a7d45 100644
--- a/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts
+++ b/ui/src/app/editor/components/output-strategy/base/BaseOutputStrategy.ts
@@ -19,28 +19,24 @@
import { Input, Directive } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import {
- DataProcessorInvocation,
- OutputStrategy
+ DataProcessorInvocation,
+ OutputStrategy,
} from '@streampipes/platform-services';
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
export abstract class BaseOutputStrategy<T extends OutputStrategy> {
+ @Input()
+ parentForm: UntypedFormGroup;
- @Input()
- parentForm: UntypedFormGroup;
+ @Input()
+ outputStrategy: T;
- @Input()
- outputStrategy: T;
+ @Input()
+ selectedElement: DataProcessorInvocation;
- @Input()
- selectedElement: DataProcessorInvocation;
-
- @Input()
- restrictedEditMode: boolean;
-
- constructor() {
-
- }
+ @Input()
+ restrictedEditMode: boolean;
+ constructor() {}
}
diff --git a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
index 288298b2c..c2321fe8e 100644
--- a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
+++ b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html
@@ -17,35 +17,81 @@
-->
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
- <h5 style="margin-right:10px;">{{selectedElement.inputStreams[0].name}}</h5>
- <button mat-button mat-raised-button color="accent" class="small-button"
- (click)="selectAll(collectedPropertiesFirstStream)"
- style="margin-right:10px;margin-left:10px;" [disabled]="restrictedEditMode">Select all
+ <h5 style="margin-right: 10px">
+ {{ selectedElement.inputStreams[0].name }}
+ </h5>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="selectAll(collectedPropertiesFirstStream)"
+ style="margin-right: 10px; margin-left: 10px"
+ [disabled]="restrictedEditMode"
+ >
+ Select all
</button>
- <button mat-button mat-raised-button class="mat-basic small-button"
- (click)="deselectAll(collectedPropertiesFirstStream)" [disabled]="restrictedEditMode">Select
- none
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic small-button"
+ (click)="deselectAll(collectedPropertiesFirstStream)"
+ [disabled]="restrictedEditMode"
+ >
+ Select none
</button>
</div>
<div *ngFor="let property of collectedPropertiesFirstStream; let i = index">
- <property-selection (validateForm)="checkFormValidity()" [outputStrategy]="outputStrategy" [eventProperty]="property"
- [layer]="0" [restrictedEditMode]="restrictedEditMode"></property-selection>
+ <sp-property-selection
+ (validateForm)="checkFormValidity()"
+ [outputStrategy]="outputStrategy"
+ [eventProperty]="property"
+ [layer]="0"
+ [restrictedEditMode]="restrictedEditMode"
+ ></sp-property-selection>
</div>
- <div fxLayout="column" fxFlex="100" *ngIf="collectedPropertiesSecondStream.length > 0">
+ <div
+ fxLayout="column"
+ fxFlex="100"
+ *ngIf="collectedPropertiesSecondStream.length > 0"
+ >
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
- <h5 style="margin-right:10px;">{{selectedElement.inputStreams[1].name}}</h5>
- <button mat-button mat-raised-button color="accent" class="small-button"
- (click)="selectAll(collectedPropertiesSecondStream)"
- style="margin-right:10px;margin-left:10px;" [disabled]="restrictedEditMode">Select all
+ <h5 style="margin-right: 10px">
+ {{ selectedElement.inputStreams[1].name }}
+ </h5>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="selectAll(collectedPropertiesSecondStream)"
+ style="margin-right: 10px; margin-left: 10px"
+ [disabled]="restrictedEditMode"
+ >
+ Select all
</button>
- <button mat-button mat-raised-button class="mat-basic small-button"
- (click)="deselectAll(collectedPropertiesSecondStream)" [disabled]="restrictedEditMode">Select
- none
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic small-button"
+ (click)="deselectAll(collectedPropertiesSecondStream)"
+ [disabled]="restrictedEditMode"
+ >
+ Select none
</button>
</div>
- <div *ngFor="let property of collectedPropertiesSecondStream; let i = index">
- <property-selection [outputStrategy]="outputStrategy" [eventProperty]="property"
- [layer]="0" [restrictedEditMode]="restrictedEditMode"></property-selection>
+ <div
+ *ngFor="
+ let property of collectedPropertiesSecondStream;
+ let i = index
+ "
+ >
+ <sp-property-selection
+ [outputStrategy]="outputStrategy"
+ [eventProperty]="property"
+ [layer]="0"
+ [restrictedEditMode]="restrictedEditMode"
+ ></sp-property-selection>
</div>
</div>
</div>
diff --git a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.scss b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.scss
index 58ba04bdd..13cbc4aac 100644
--- a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.scss
+++ b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.scss
@@ -15,4 +15,3 @@
* limitations under the License.
*
*/
-
diff --git a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts
index 12faf2615..281e5c41a 100644
--- a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts
+++ b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.ts
@@ -23,51 +23,74 @@ import { PropertySelectorService } from '../../../../services/property-selector.
import { UntypedFormControl } from '@angular/forms';
@Component({
- selector: 'custom-output-strategy',
- templateUrl: './custom-output-strategy.component.html',
- styleUrls: ['./custom-output-strategy.component.scss']
+ selector: 'sp-custom-output-strategy',
+ templateUrl: './custom-output-strategy.component.html',
+ styleUrls: ['./custom-output-strategy.component.scss'],
})
-export class CustomOutputStrategyComponent extends BaseOutputStrategy<CustomOutputStrategy> implements OnInit {
+export class CustomOutputStrategyComponent
+ extends BaseOutputStrategy<CustomOutputStrategy>
+ implements OnInit
+{
+ collectedPropertiesFirstStream: any;
+ collectedPropertiesSecondStream: any;
- collectedPropertiesFirstStream: any;
- collectedPropertiesSecondStream: any;
-
- constructor(private propertySelectorService: PropertySelectorService) {
- super();
- }
+ constructor(private propertySelectorService: PropertySelectorService) {
+ super();
+ }
- ngOnInit() {
- this.parentForm.addControl('output-strategy', new UntypedFormControl());
- this.collectedPropertiesFirstStream = this.propertySelectorService
- .makeProperties(this.getProperties(0), this.outputStrategy.availablePropertyKeys, this.propertySelectorService.firstStreamPrefix);
- this.collectedPropertiesSecondStream = this.propertySelectorService
- .makeProperties(this.getProperties(1), this.outputStrategy.availablePropertyKeys, this.propertySelectorService.secondStreamPrefix);
- this.checkFormValidity();
- }
+ ngOnInit() {
+ this.parentForm.addControl('output-strategy', new UntypedFormControl());
+ this.collectedPropertiesFirstStream =
+ this.propertySelectorService.makeProperties(
+ this.getProperties(0),
+ this.outputStrategy.availablePropertyKeys,
+ this.propertySelectorService.firstStreamPrefix,
+ );
+ this.collectedPropertiesSecondStream =
+ this.propertySelectorService.makeProperties(
+ this.getProperties(1),
+ this.outputStrategy.availablePropertyKeys,
+ this.propertySelectorService.secondStreamPrefix,
+ );
+ this.checkFormValidity();
+ }
- getProperties(streamIndex) {
- return this.selectedElement.inputStreams[streamIndex] === undefined ?
- [] : this.selectedElement.inputStreams[streamIndex].eventSchema.eventProperties;
- }
+ getProperties(streamIndex) {
+ return this.selectedElement.inputStreams[streamIndex] === undefined
+ ? []
+ : this.selectedElement.inputStreams[streamIndex].eventSchema
+ .eventProperties;
+ }
- selectAll(collectedProperties) {
- collectedProperties.forEach(ep => this.outputStrategy.selectedPropertyKeys.push(ep.runtimeId));
- // This is needed to trigger update of scope
- this.outputStrategy.selectedPropertyKeys = this.outputStrategy.selectedPropertyKeys.filter(el => true);
- this.checkFormValidity();
- }
+ selectAll(collectedProperties) {
+ collectedProperties.forEach(ep =>
+ this.outputStrategy.selectedPropertyKeys.push(ep.runtimeId),
+ );
+ // This is needed to trigger update of scope
+ this.outputStrategy.selectedPropertyKeys =
+ this.outputStrategy.selectedPropertyKeys.filter(el => true);
+ this.checkFormValidity();
+ }
- deselectAll(collectedProperties) {
- collectedProperties.forEach(ep => this.outputStrategy.selectedPropertyKeys =
- this.outputStrategy.selectedPropertyKeys.filter(item => item !== ep.runtimeId));
- this.checkFormValidity();
- }
+ deselectAll(collectedProperties) {
+ collectedProperties.forEach(
+ ep =>
+ (this.outputStrategy.selectedPropertyKeys =
+ this.outputStrategy.selectedPropertyKeys.filter(
+ item => item !== ep.runtimeId,
+ )),
+ );
+ this.checkFormValidity();
+ }
- checkFormValidity() {
- if (!this.outputStrategy.selectedPropertyKeys || this.outputStrategy.selectedPropertyKeys.length === 0) {
- this.parentForm.controls['output-strategy'].setErrors({});
- } else {
- this.parentForm.controls['output-strategy'].setErrors(undefined);
+ checkFormValidity() {
+ if (
+ !this.outputStrategy.selectedPropertyKeys ||
+ this.outputStrategy.selectedPropertyKeys.length === 0
+ ) {
+ this.parentForm.controls['output-strategy'].setErrors({});
+ } else {
+ this.parentForm.controls['output-strategy'].setErrors(undefined);
+ }
}
- }
}
diff --git a/ui/src/app/editor/components/output-strategy/output-strategy.component.html b/ui/src/app/editor/components/output-strategy/output-strategy.component.html
index e208f753d..ce736ced7 100644
--- a/ui/src/app/editor/components/output-strategy/output-strategy.component.html
+++ b/ui/src/app/editor/components/output-strategy/output-strategy.component.html
@@ -22,22 +22,36 @@
<b>Select output</b>
</div>
<div fxFlex="100">
- <div class="customize-item-content"
- *ngIf="outputStrategy['@class'] === 'org.apache.streampipes.model.output.CustomOutputStrategy'">
- <custom-output-strategy [outputStrategy]="outputStrategy"
- [selectedElement]="selectedElement"
- [parentForm]="parentForm"
- [restrictedEditMode]="restrictedEditMode">
- </custom-output-strategy>
+ <div
+ class="customize-item-content"
+ *ngIf="
+ outputStrategy['@class'] ===
+ 'org.apache.streampipes.model.output.CustomOutputStrategy'
+ "
+ >
+ <sp-custom-output-strategy
+ [outputStrategy]="outputStrategy"
+ [selectedElement]="selectedElement"
+ [parentForm]="parentForm"
+ [restrictedEditMode]="restrictedEditMode"
+ >
+ </sp-custom-output-strategy>
</div>
- <div class="customize-item-content"
- *ngIf="outputStrategy['@class'] === 'org.apache.streampipes.model.output.UserDefinedOutputStrategy'">
- <user-defined-output-strategy [outputStrategy]="outputStrategy"
- [selectedElement]="selectedElement"
- [parentForm]="parentForm"
- [restrictedEditMode]="restrictedEditMode">
- </user-defined-output-strategy>
+ <div
+ class="customize-item-content"
+ *ngIf="
+ outputStrategy['@class'] ===
+ 'org.apache.streampipes.model.output.UserDefinedOutputStrategy'
+ "
+ >
+ <sp-user-defined-output-strategy
+ [outputStrategy]="outputStrategy"
+ [selectedElement]="selectedElement"
+ [parentForm]="parentForm"
+ [restrictedEditMode]="restrictedEditMode"
+ >
+ </sp-user-defined-output-strategy>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/editor/components/output-strategy/output-strategy.component.scss b/ui/src/app/editor/components/output-strategy/output-strategy.component.scss
index e513418ca..84830c8ed 100644
--- a/ui/src/app/editor/components/output-strategy/output-strategy.component.scss
+++ b/ui/src/app/editor/components/output-strategy/output-strategy.component.scss
@@ -17,8 +17,8 @@
*/
.static-property-panel {
- border-left:5px solid gray;
- padding-left: 10px;
- margin-bottom: 10px;
- margin-top: 10px;
-}
\ No newline at end of file
+ border-left: 5px solid gray;
+ padding-left: 10px;
+ margin-bottom: 10px;
+ margin-top: 10px;
+}
diff --git a/ui/src/app/editor/components/output-strategy/output-strategy.component.ts b/ui/src/app/editor/components/output-strategy/output-strategy.component.ts
index c51d716fa..634023a8a 100644
--- a/ui/src/app/editor/components/output-strategy/output-strategy.component.ts
+++ b/ui/src/app/editor/components/output-strategy/output-strategy.component.ts
@@ -17,34 +17,39 @@
*/
import { Component, Input, OnInit } from '@angular/core';
-import { DataProcessorInvocation, OutputStrategy } from '@streampipes/platform-services';
+import {
+ DataProcessorInvocation,
+ OutputStrategy,
+} from '@streampipes/platform-services';
import { UntypedFormGroup } from '@angular/forms';
@Component({
- selector: 'output-strategy',
- templateUrl: './output-strategy.component.html',
- styleUrls: ['./output-strategy.component.scss']
+ selector: 'sp-output-strategy',
+ templateUrl: './output-strategy.component.html',
+ styleUrls: ['./output-strategy.component.scss'],
})
export class OutputStrategyComponent implements OnInit {
+ @Input()
+ parentForm: UntypedFormGroup;
- @Input()
- parentForm: UntypedFormGroup;
+ @Input()
+ outputStrategy: OutputStrategy;
- @Input()
- outputStrategy: OutputStrategy;
+ @Input()
+ selectedElement: DataProcessorInvocation;
- @Input()
- selectedElement: DataProcessorInvocation;
+ @Input()
+ restrictedEditMode: boolean;
- @Input()
- restrictedEditMode: boolean;
+ label: string;
- label: string;
+ customizableOutputStrategy: boolean;
- customizableOutputStrategy: boolean;
-
- ngOnInit(): void {
- this.customizableOutputStrategy = this.outputStrategy['@class'] === 'org.apache.streampipes.model.output.CustomOutputStrategy' ||
- this.outputStrategy['@class'] === 'org.apache.streampipes.model.output.UserDefinedOutputStrategy';
- }
+ ngOnInit(): void {
+ this.customizableOutputStrategy =
+ this.outputStrategy['@class'] ===
+ 'org.apache.streampipes.model.output.CustomOutputStrategy' ||
+ this.outputStrategy['@class'] ===
+ 'org.apache.streampipes.model.output.UserDefinedOutputStrategy';
+ }
}
diff --git a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
index baff41c64..6ceb0ddec 100644
--- a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
+++ b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.html
@@ -16,26 +16,39 @@
~
-->
-<div class="property-selection" style="margin-left:{{layer*5}}%">
+<div class="property-selection" style="margin-left:{{ layer * 5 }}%">
<div fxLayout="row">
- <mat-checkbox [checked]="exists(eventProperty.runtimeId)"
- (change)="toggle(eventProperty.runtimeId)"
- style="margin-right: 10px;" [disabled]="restrictedEditMode"
- [attr.data-cy]="eventProperty.runtimeName">
+ <mat-checkbox
+ [checked]="exists(eventProperty.runtimeId)"
+ (change)="toggle(eventProperty.runtimeId)"
+ style="margin-right: 10px"
+ [disabled]="restrictedEditMode"
+ [attr.data-cy]="eventProperty.runtimeName"
+ >
</mat-checkbox>
<div>
- <div *ngIf="eventProperty.label"><b>{{eventProperty.label}}</b><br/>
- <mat-hint class="description">{{eventProperty.description}},
- field name: {{eventProperty.runtimeName}}</mat-hint>
- <br/></div>
- <div *ngIf="!eventProperty.label"><b>{{eventProperty.runtimeName}}</b><br/>
+ <div *ngIf="eventProperty.label">
+ <b>{{ eventProperty.label }}</b
+ ><br />
+ <mat-hint class="description"
+ >{{ eventProperty.description }}, field name:
+ {{ eventProperty.runtimeName }}</mat-hint
+ >
+ <br />
+ </div>
+ <div *ngIf="!eventProperty.label">
+ <b>{{ eventProperty.runtimeName }}</b
+ ><br />
</div>
</div>
</div>
</div>
<div *ngIf="isNestedProperty">
<div *ngFor="let nestedProperty of eventProperty.eventProperties">
- <property-selection [outputStrategy]="outputStrategy" [eventProperty]="nestedProperty"
- [layer]="(layer + 1)"></property-selection>
+ <sp-property-selection
+ [outputStrategy]="outputStrategy"
+ [eventProperty]="nestedProperty"
+ [layer]="layer + 1"
+ ></sp-property-selection>
</div>
</div>
diff --git a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss
index ad64fae11..440a058e0 100644
--- a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss
+++ b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.scss
@@ -17,5 +17,5 @@
*/
.description {
- font-size: 10px;
-}
\ No newline at end of file
+ font-size: 10px;
+}
diff --git a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
index b3623c4d6..b04615b67 100644
--- a/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
+++ b/ui/src/app/editor/components/output-strategy/property-selection/property-selection.component.ts
@@ -18,63 +18,69 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {
- CustomOutputStrategy,
- EventPropertyNested,
- EventPropertyUnion
+ CustomOutputStrategy,
+ EventPropertyNested,
+ EventPropertyUnion,
} from '@streampipes/platform-services';
@Component({
- selector: 'property-selection',
- templateUrl: './property-selection.component.html',
- styleUrls: ['./property-selection.component.scss']
+ selector: 'sp-property-selection',
+ templateUrl: './property-selection.component.html',
+ styleUrls: ['./property-selection.component.scss'],
})
export class PropertySelectionComponent implements OnInit {
+ @Input()
+ outputStrategy: CustomOutputStrategy;
- @Input()
- outputStrategy: CustomOutputStrategy;
+ @Input()
+ eventProperty: EventPropertyUnion;
- @Input()
- eventProperty: EventPropertyUnion;
+ @Input()
+ layer: number;
- @Input()
- layer: number;
+ @Input()
+ restrictedEditMode: boolean;
- @Input()
- restrictedEditMode: boolean;
+ @Output()
+ validateForm: EventEmitter<boolean> = new EventEmitter<boolean>();
- @Output()
- validateForm: EventEmitter<boolean> = new EventEmitter<boolean>();
+ isNestedProperty: boolean;
- isNestedProperty: boolean;
-
- ngOnInit() {
- this.isNestedProperty = this.eventProperty instanceof EventPropertyNested;
- }
+ ngOnInit() {
+ this.isNestedProperty =
+ this.eventProperty instanceof EventPropertyNested;
+ }
- toggle(runtimeId) {
- if (this.exists(runtimeId)) {
- this.remove(runtimeId);
- } else {
- this.add(runtimeId);
+ toggle(runtimeId) {
+ if (this.exists(runtimeId)) {
+ this.remove(runtimeId);
+ } else {
+ this.add(runtimeId);
+ }
+ this.triggerFormValidation();
}
- this.triggerFormValidation();
- }
- exists(runtimeId) {
- return this.outputStrategy.selectedPropertyKeys.some(e => e === runtimeId);
- }
+ exists(runtimeId) {
+ return this.outputStrategy.selectedPropertyKeys.some(
+ e => e === runtimeId,
+ );
+ }
- add(runtimeId) {
- this.outputStrategy.selectedPropertyKeys.push(runtimeId);
- // This is needed to trigger update of scope
- this.outputStrategy.selectedPropertyKeys = this.outputStrategy.selectedPropertyKeys.filter(el => true);
- }
+ add(runtimeId) {
+ this.outputStrategy.selectedPropertyKeys.push(runtimeId);
+ // This is needed to trigger update of scope
+ this.outputStrategy.selectedPropertyKeys =
+ this.outputStrategy.selectedPropertyKeys.filter(el => true);
+ }
- remove(runtimeId) {
- this.outputStrategy.selectedPropertyKeys = this.outputStrategy.selectedPropertyKeys.filter(el => el !== runtimeId);
- }
+ remove(runtimeId) {
+ this.outputStrategy.selectedPropertyKeys =
+ this.outputStrategy.selectedPropertyKeys.filter(
+ el => el !== runtimeId,
+ );
+ }
- triggerFormValidation() {
- this.validateForm.emit(true);
- }
+ triggerFormValidation() {
+ this.validateForm.emit(true);
+ }
}
diff --git a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
index 17b383880..918c5f389 100644
--- a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
+++ b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.html
@@ -17,33 +17,55 @@
-->
<div fxFlex="100" fxLayout="column">
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" style="margin-bottom:20px;">
- <button mat-button mat-raised-button color="accent" class="small-button"
- (click)="applyDefaultSchema()"
- style="margin-right:10px;margin-left:10px;"
- [disabled]="restrictedEditMode"
- data-cy="use-input-schema">Use input schema
+ <div
+ fxFlex="100"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ style="margin-bottom: 20px"
+ >
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ class="small-button"
+ (click)="applyDefaultSchema()"
+ style="margin-right: 10px; margin-left: 10px"
+ [disabled]="restrictedEditMode"
+ data-cy="use-input-schema"
+ >
+ Use input schema
</button>
</div>
- <div fxFlex="100" fxLayout="row" *ngFor="let ep of outputStrategy.eventProperties; let i = index">
+ <div
+ fxFlex="100"
+ fxLayout="row"
+ *ngFor="let ep of outputStrategy.eventProperties; let i = index"
+ >
<div fxLayout="column" fxFlex="30">
<mat-form-field fxFlex>
<mat-label>Runtime name</mat-label>
- <input [(ngModel)]="ep.runtimeName"
- data-cy="runtime-name"
- fxFlex
- matInput>
+ <input
+ [(ngModel)]="ep.runtimeName"
+ data-cy="runtime-name"
+ fxFlex
+ matInput
+ />
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="30">
<mat-form-field class="example-full-width">
<mat-label>Runtime type</mat-label>
- <mat-select [(ngModel)]="ep.runtimeType"
- [disabled]="restrictedEditMode"
- data-cy="runtime-type">
- <mat-option *ngFor="let primitive of primitiveClasses" [value]="primitive.id">
- {{primitive.label}}
+ <mat-select
+ [(ngModel)]="ep.runtimeType"
+ [disabled]="restrictedEditMode"
+ data-cy="runtime-type"
+ >
+ <mat-option
+ *ngFor="let primitive of primitiveClasses"
+ [value]="primitive.id"
+ >
+ {{ primitive.label }}
</mat-option>
</mat-select>
</mat-form-field>
@@ -51,25 +73,34 @@
<div fxLayout="column" fxFlex="30">
<mat-form-field fxFlex>
<mat-label>Semantic type</mat-label>
- <input [(ngModel)]="ep.domainProperties[0]"
- [disabled]="restrictedEditMode"
- data-cy="semantic-type"
- fxFlex
- matInput>
+ <input
+ [(ngModel)]="ep.domainProperties[0]"
+ [disabled]="restrictedEditMode"
+ data-cy="semantic-type"
+ fxFlex
+ matInput
+ />
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="10">
- <button mat-icon-button class="icon-button" (click)="removeProperty(ep)" [disabled]="restrictedEditMode">
+ <button
+ mat-icon-button
+ class="icon-button"
+ (click)="removeProperty(ep)"
+ [disabled]="restrictedEditMode"
+ >
<mat-icon class="icon">remove</mat-icon>
</button>
</div>
</div>
<div>
- <button mat-button
- mat-flat-button
- (click)="addProperty()"
- [disabled]="restrictedEditMode"
- data-cy="add-field">
+ <button
+ mat-button
+ mat-flat-button
+ (click)="addProperty()"
+ [disabled]="restrictedEditMode"
+ data-cy="add-field"
+ >
<mat-icon class="icon">add</mat-icon>
<span>Add field</span>
</button>
diff --git a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.scss b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.scss
index 58ba04bdd..13cbc4aac 100644
--- a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.scss
+++ b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.scss
@@ -15,4 +15,3 @@
* limitations under the License.
*
*/
-
diff --git a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
index 2207b42f4..737c8db9a 100644
--- a/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
+++ b/ui/src/app/editor/components/output-strategy/user-defined-output/user-defined-output.component.ts
@@ -19,84 +19,99 @@
import { Component, OnInit } from '@angular/core';
import { BaseOutputStrategy } from '../base/BaseOutputStrategy';
import {
- EventPropertyPrimitive,
- UserDefinedOutputStrategy
+ EventPropertyPrimitive,
+ UserDefinedOutputStrategy,
} from '@streampipes/platform-services';
import { UntypedFormControl } from '@angular/forms';
@Component({
- selector: 'user-defined-output-strategy',
- templateUrl: './user-defined-output.component.html',
- styleUrls: ['./user-defined-output.component.scss']
+ selector: 'sp-user-defined-output-strategy',
+ templateUrl: './user-defined-output.component.html',
+ styleUrls: ['./user-defined-output.component.scss'],
})
-export class UserDefinedOutputStrategyComponent extends BaseOutputStrategy<UserDefinedOutputStrategy> implements OnInit {
+export class UserDefinedOutputStrategyComponent
+ extends BaseOutputStrategy<UserDefinedOutputStrategy>
+ implements OnInit
+{
+ private prefix = 'urn:streampipes.org:spi:';
+ private chars =
+ '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
- private prefix = 'urn:streampipes.org:spi:';
- private chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+ collectedPropertiesFirstStream: any;
+ collectedPropertiesSecondStream: any;
- collectedPropertiesFirstStream: any;
- collectedPropertiesSecondStream: any;
+ primitiveClasses = [
+ { label: 'String', id: 'http://www.w3.org/2001/XMLSchema#string' },
+ { label: 'Boolean', id: 'http://www.w3.org/2001/XMLSchema#boolean' },
+ { label: 'Integer', id: 'http://www.w3.org/2001/XMLSchema#integer' },
+ { label: 'Long', id: 'http://www.w3.org/2001/XMLSchema#long' },
+ { label: 'Double', id: 'http://www.w3.org/2001/XMLSchema#double' },
+ { label: 'Float', id: 'http://www.w3.org/2001/XMLSchema#float' },
+ ];
- primitiveClasses = [{'label': 'String', 'id': 'http://www.w3.org/2001/XMLSchema#string'},
- {'label': 'Boolean', 'id': 'http://www.w3.org/2001/XMLSchema#boolean'},
- {'label': 'Integer', 'id': 'http://www.w3.org/2001/XMLSchema#integer'},
- {'label': 'Long', 'id': 'http://www.w3.org/2001/XMLSchema#long'},
- {'label': 'Double', 'id': 'http://www.w3.org/2001/XMLSchema#double'},
- {'label': 'Float', 'id': 'http://www.w3.org/2001/XMLSchema#float'}];
-
- constructor() {
- super();
- }
+ constructor() {
+ super();
+ }
- ngOnInit() {
- this.parentForm.addControl('output-strategy', new UntypedFormControl());
- if (!this.outputStrategy.eventProperties) {
- this.outputStrategy.eventProperties = [];
+ ngOnInit() {
+ this.parentForm.addControl('output-strategy', new UntypedFormControl());
+ if (!this.outputStrategy.eventProperties) {
+ this.outputStrategy.eventProperties = [];
+ }
+ this.checkFormValidity();
}
- this.checkFormValidity();
- }
- applyDefaultSchema() {
- this.outputStrategy.eventProperties =
- [...this.selectedElement.inputStreams[0].eventSchema.eventProperties];
- this.checkFormValidity();
- }
+ applyDefaultSchema() {
+ this.outputStrategy.eventProperties = [
+ ...this.selectedElement.inputStreams[0].eventSchema.eventProperties,
+ ];
+ this.checkFormValidity();
+ }
- removeProperty(ep: any) {
- this.outputStrategy.eventProperties
- .splice(this.outputStrategy.eventProperties.indexOf(ep), 1);
- this.checkFormValidity();
- }
+ removeProperty(ep: any) {
+ this.outputStrategy.eventProperties.splice(
+ this.outputStrategy.eventProperties.indexOf(ep),
+ 1,
+ );
+ this.checkFormValidity();
+ }
- addProperty() {
- this.outputStrategy.eventProperties.push(this.makeDefaultProperty());
- this.checkFormValidity();
- }
+ addProperty() {
+ this.outputStrategy.eventProperties.push(this.makeDefaultProperty());
+ this.checkFormValidity();
+ }
- makeDefaultProperty() {
- const ep = {} as EventPropertyPrimitive;
- ep['@class'] = 'org.apache.streampipes.model.schema.EventPropertyPrimitive';
- ep.domainProperties = [];
- ep.elementId = 'urn:streampipes.org:spi:eventpropertyprimitive:' + this.makeId();
+ makeDefaultProperty() {
+ const ep = {} as EventPropertyPrimitive;
+ ep['@class'] =
+ 'org.apache.streampipes.model.schema.EventPropertyPrimitive';
+ ep.domainProperties = [];
+ ep.elementId =
+ 'urn:streampipes.org:spi:eventpropertyprimitive:' + this.makeId();
- return ep;
- }
+ return ep;
+ }
- makeId() {
- return this.prefix + this.randomString(6);
- }
+ makeId() {
+ return this.prefix + this.randomString(6);
+ }
- randomString(length) {
- let result = '';
- for (let i = length; i > 0; --i) { result += this.chars[Math.floor(Math.random() * this.chars.length)]; }
- return result;
- }
+ randomString(length) {
+ let result = '';
+ for (let i = length; i > 0; --i) {
+ result += this.chars[Math.floor(Math.random() * this.chars.length)];
+ }
+ return result;
+ }
- checkFormValidity() {
- if (!this.outputStrategy.eventProperties || this.outputStrategy.eventProperties.length === 0) {
- this.parentForm.controls['output-strategy'].setErrors({});
- } else {
- this.parentForm.controls['output-strategy'].setErrors(undefined);
+ checkFormValidity() {
+ if (
+ !this.outputStrategy.eventProperties ||
+ this.outputStrategy.eventProperties.length === 0
+ ) {
+ this.parentForm.controls['output-strategy'].setErrors({});
+ } else {
+ this.parentForm.controls['output-strategy'].setErrors(undefined);
+ }
}
- }
}
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
index 4e39a963d..6cc1bc621 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.html
@@ -19,13 +19,17 @@
<div fxFlex="100" fxLayout="column">
<div class="pipeline-assembly-options sp-bg-lightgray page-container-nav">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center">
- <button mat-button
- mat-raised-button
- color="accent"
- matTooltip="Save Pipeline" [matTooltipPosition]="'above'"
- [disabled]="!pipelineValidationService.pipelineValid"
- (click)="submit()" type="submit"
- data-cy="sp-editor-save-pipeline">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ matTooltip="Save Pipeline"
+ [matTooltipPosition]="'above'"
+ [disabled]="!pipelineValidationService.pipelineValid"
+ (click)="submit()"
+ type="submit"
+ data-cy="sp-editor-save-pipeline"
+ >
<div fxLayoutAlign="start center" fxLayout="row">
<i class="material-icons">save</i>
<span> Save pipeline</span>
@@ -43,50 +47,88 @@
<!-- (click)="toggleSelectMode()">-->
<!-- <i class="material-icons">mode_edit</i>-->
<!-- </button>-->
- <button mat-button
- color="accent"
- matTooltip="Data Preview"
- [matTooltipPosition]="'above'"
- (click)="triggerPipelinePreview()" [disabled]="isPipelineAssemblyEmpty()">
+ <button
+ mat-button
+ color="accent"
+ matTooltip="Data Preview"
+ [matTooltipPosition]="'above'"
+ (click)="triggerPipelinePreview()"
+ [disabled]="isPipelineAssemblyEmpty()"
+ >
<div fxLayoutAlign="start center" fxLayout="row">
<i class="material-icons">visibility</i>
- <span *ngIf="!pipelineComponent.previewModeActive"> Enable live preview</span>
- <span *ngIf="pipelineComponent.previewModeActive"> Disable live preview</span>
+ <span *ngIf="!pipelineComponent.previewModeActive"
+ > Enable live preview</span
+ >
+ <span *ngIf="pipelineComponent.previewModeActive"
+ > Disable live preview</span
+ >
</div>
</button>
<span class="assembly-options-divider"></span>
- <button mat-button
- color="accent"
- mat-icon-button
- matTooltip="Auto Layout" [matTooltipPosition]="'above'"
- (click)="autoLayout()">
+ <button
+ mat-button
+ color="accent"
+ mat-icon-button
+ matTooltip="Auto Layout"
+ [matTooltipPosition]="'above'"
+ (click)="autoLayout()"
+ >
<i class="material-icons">settings_overscan</i>
</button>
- <button mat-button
- color="accent"
- mat-icon-button
- matTooltip="Add pipeline element" [matTooltipPosition]="'above'"
- (click)="openDiscoverDialog()"
- data-cy="sp-editor-add-pipeline-element">
+ <button
+ mat-button
+ color="accent"
+ mat-icon-button
+ matTooltip="Add pipeline element"
+ [matTooltipPosition]="'above'"
+ (click)="openDiscoverDialog()"
+ data-cy="sp-editor-add-pipeline-element"
+ >
<i class="material-icons">add</i>
</button>
- <div fxLayout="column" fxLayoutAlign="start center" class="pipeline-cache-block">
- <div fxFlex="100" fxLayoutAlign="start center" fxLayout="row"
- *ngIf="pipelineCached || pipelineCacheRunning">
- <div *ngIf="pipelineCached" fxLayout="row" fxLayoutAlign="start center">
- <mat-spinner [mode]="'indeterminate'" class="mat-spinner-color" [diameter]="15"
- *ngIf="pipelineCacheRunning"></mat-spinner>
- <span> {{pipelineCacheRunning ? ' Saving pipeline modifications' : 'All pipeline modifications saved.'}}</span>
+ <div
+ fxLayout="column"
+ fxLayoutAlign="start center"
+ class="pipeline-cache-block"
+ >
+ <div
+ fxFlex="100"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ *ngIf="pipelineCached || pipelineCacheRunning"
+ >
+ <div
+ *ngIf="pipelineCached"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ >
+ <mat-spinner
+ [mode]="'indeterminate'"
+ class="mat-spinner-color"
+ [diameter]="15"
+ *ngIf="pipelineCacheRunning"
+ ></mat-spinner>
+ <span
+ > {{
+ pipelineCacheRunning
+ ? ' Saving pipeline modifications'
+ : 'All pipeline modifications saved.'
+ }}</span
+ >
</div>
</div>
</div>
<span fxFlex></span>
- <button mat-button
- color="accent"
- mat-icon-button matTooltip="Clear Assembly Area"
- [matTooltipPosition]="'above'"
- [disabled]="editorService.pipelineAssemblyEmpty"
- (click)="showClearAssemblyConfirmDialog($event)">
+ <button
+ mat-button
+ color="accent"
+ mat-icon-button
+ matTooltip="Clear Assembly Area"
+ [matTooltipPosition]="'above'"
+ [disabled]="editorService.pipelineAssemblyEmpty"
+ (click)="showClearAssemblyConfirmDialog($event)"
+ >
<i class="material-icons">clear</i>
</button>
</div>
@@ -95,9 +137,10 @@
<div class="pipeline-canvas-outer" #outerCanvas>
<div class="pipeline-validation-hint">
<sp-error-hint
- [displayMessages]="!isPipelineAssemblyEmpty()"
- [errorMessages]="pipelineValidationService.errorMessages"
- [validationString]="'Pipeline'">
+ [displayMessages]="!isPipelineAssemblyEmpty()"
+ [errorMessages]="pipelineValidationService.errorMessages"
+ [validationString]="'Pipeline'"
+ >
</sp-error-hint>
</div>
<div class="pan-control">
@@ -130,20 +173,23 @@
</div>
</div>
</div>
- <pipeline class="canvas jtk-surface" id="assembly"
- #pipelineComponent
- [pipelineValid]="pipelineValid"
- [canvasId]="'assembly'"
- [rawPipelineModel]="rawPipelineModel"
- [allElements]="allElements"
- [preview]="false"
- [pipelineCached]="pipelineCached"
- [pipelineCanvasMetadata]="pipelineCanvasMetadata"
- [pipelineCacheRunning]="pipelineCacheRunning"
- (pipelineCachedChanged)="pipelineCached=$event"
- (pipelineCacheRunningChanged)="pipelineCacheRunning=$event" style="position:absolute;">
+ <pipeline
+ class="canvas jtk-surface"
+ id="assembly"
+ #pipelineComponent
+ [pipelineValid]="pipelineValid"
+ [canvasId]="'assembly'"
+ [rawPipelineModel]="rawPipelineModel"
+ [allElements]="allElements"
+ [preview]="false"
+ [pipelineCached]="pipelineCached"
+ [pipelineCanvasMetadata]="pipelineCanvasMetadata"
+ [pipelineCacheRunning]="pipelineCacheRunning"
+ (pipelineCachedChanged)="pipelineCached = $event"
+ (pipelineCacheRunningChanged)="pipelineCacheRunning = $event"
+ style="position: absolute"
+ >
</pipeline>
-
</div>
</div>
</div>
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
index 52b217d9c..df77313f0 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.scss
@@ -18,17 +18,17 @@
@import '../../../../scss/_variables.scss';
-.mat-spinner-color::ng-deep svg circle{
+.mat-spinner-color::ng-deep svg circle {
stroke: var(--color-accent) !important;
}
.pipeline-cache-progress {
- display:inline-block;
+ display: inline-block;
}
.pipeline-cache-block {
height: 100%;
- margin-left:15px;
+ margin-left: 15px;
}
.outerAssembly {
@@ -76,7 +76,7 @@
.jtk-surface-nopan {
overflow: scroll !important;
- cursor:default;
+ cursor: default;
}
.zoom-control {
@@ -89,7 +89,6 @@
background: var(--color-bg-1);
box-shadow: 0.175em 0.175em 0 0 rgba(15, 28, 63, 0.125);
border-radius: 10px;
-
}
.pipeline-validation-hint {
@@ -174,5 +173,3 @@
.color-warn {
color: var(--color-warn);
}
-
-
diff --git a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
index edf8e0db5..7507ffd11 100644
--- a/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -32,13 +32,25 @@ import { PipelinePositioningService } from '../../services/pipeline-positioning.
import { PipelineValidationService } from '../../services/pipeline-validation.service';
import { JsplumbService } from '../../services/jsplumb.service';
import { ShepherdService } from '../../../services/tour/shepherd.service';
-import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
+import {
+ PipelineElementConfig,
+ PipelineElementUnion,
+} from '../../model/editor.model';
import { ObjectProvider } from '../../services/object-provider.service';
-import { ConfirmDialogComponent, DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
+import {
+ ConfirmDialogComponent,
+ DialogService,
+ PanelType,
+ SpBreadcrumbService,
+} from '@streampipes/shared-ui';
import { SavePipelineComponent } from '../../dialog/save-pipeline/save-pipeline.component';
import { MatDialog } from '@angular/material/dialog';
import { EditorService } from '../../services/editor.service';
-import { PipelineCanvasMetadata, PipelineCanvasMetadataService, PipelineService } from '@streampipes/platform-services';
+import {
+ PipelineCanvasMetadata,
+ PipelineCanvasMetadataService,
+ PipelineService,
+} from '@streampipes/platform-services';
import { JsplumbFactoryService } from '../../services/jsplumb-factory.service';
import Panzoom, { PanzoomObject } from '@panzoom/panzoom';
import { PipelineElementDraggedService } from '../../services/pipeline-element-dragged.service';
@@ -48,14 +60,12 @@ import { PipelineElementDiscoveryComponent } from '../../dialog/pipeline-element
import { SpPipelineRoutes } from '../../../pipelines/pipelines.routes';
import { Router } from '@angular/router';
-
@Component({
- selector: 'pipeline-assembly',
+ selector: 'sp-pipeline-assembly',
templateUrl: './pipeline-assembly.component.html',
- styleUrls: ['./pipeline-assembly.component.scss']
+ styleUrls: ['./pipeline-assembly.component.scss'],
})
export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
-
@Input()
rawPipelineModel: PipelineElementConfig[];
@@ -66,7 +76,8 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
allElements: PipelineElementUnion[];
@Output()
- pipelineCanvasMaximizedEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+ pipelineCanvasMaximizedEmitter: EventEmitter<boolean> =
+ new EventEmitter<boolean>();
JsplumbBridge: JsplumbBridge;
@@ -85,7 +96,8 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
pipelineCacheRunning = false;
pipelineCached = false;
- pipelineCanvasMetadata: PipelineCanvasMetadata = new PipelineCanvasMetadata();
+ pipelineCanvasMetadata: PipelineCanvasMetadata =
+ new PipelineCanvasMetadata();
pipelineCanvasMetadataAvailable = false;
config: any = {};
@@ -96,22 +108,23 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
panzoom: PanzoomObject;
- constructor(private jsPlumbFactoryService: JsplumbFactoryService,
- private pipelinePositioningService: PipelinePositioningService,
- private objectProvider: ObjectProvider,
- public editorService: EditorService,
- public pipelineValidationService: PipelineValidationService,
- private pipelineService: PipelineService,
- private jsplumbService: JsplumbService,
- private shepherdService: ShepherdService,
- private dialogService: DialogService,
- private dialog: MatDialog,
- private ngZone: NgZone,
- private pipelineElementDraggedService: PipelineElementDraggedService,
- private pipelineCanvasMetadataService: PipelineCanvasMetadataService,
- private breadcrumbService: SpBreadcrumbService,
- private router: Router) {
-
+ constructor(
+ private jsPlumbFactoryService: JsplumbFactoryService,
+ private pipelinePositioningService: PipelinePositioningService,
+ private objectProvider: ObjectProvider,
+ public editorService: EditorService,
+ public pipelineValidationService: PipelineValidationService,
+ private pipelineService: PipelineService,
+ private jsplumbService: JsplumbService,
+ private shepherdService: ShepherdService,
+ private dialogService: DialogService,
+ private dialog: MatDialog,
+ private ngZone: NgZone,
+ private pipelineElementDraggedService: PipelineElementDraggedService,
+ private pipelineCanvasMetadataService: PipelineCanvasMetadataService,
+ private breadcrumbService: SpBreadcrumbService,
+ private router: Router,
+ ) {
this.selectMode = true;
this.currentZoomLevel = 1;
}
@@ -122,37 +135,48 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
} else {
this.checkAndDisplayCachedPipeline();
}
- this.pipelineElementDraggedService.pipelineElementMovedSubject.subscribe(position => {
- const offsetHeight = this.pipelineCanvas.nativeElement.offsetHeight;
- const offsetWidth = this.pipelineCanvas.nativeElement.offsetWidth;
- const currentPan = this.panzoom.getPan();
- let xOffset = 0;
- let yOffset = 0;
- if ((position.y + currentPan.y) > (offsetHeight - 100)) {
- yOffset = -10;
- }
- if ((position.x + currentPan.x) > (offsetWidth - 100)) {
- xOffset = -10;
- }
- if (xOffset < 0 || yOffset < 0) {
- this.pan(xOffset, yOffset);
- }
- });
+ this.pipelineElementDraggedService.pipelineElementMovedSubject.subscribe(
+ position => {
+ const offsetHeight =
+ this.pipelineCanvas.nativeElement.offsetHeight;
+ const offsetWidth =
+ this.pipelineCanvas.nativeElement.offsetWidth;
+ const currentPan = this.panzoom.getPan();
+ let xOffset = 0;
+ let yOffset = 0;
+ if (position.y + currentPan.y > offsetHeight - 100) {
+ yOffset = -10;
+ }
+ if (position.x + currentPan.x > offsetWidth - 100) {
+ xOffset = -10;
+ }
+ if (xOffset < 0 || yOffset < 0) {
+ this.pan(xOffset, yOffset);
+ }
+ },
+ );
}
ngAfterViewInit() {
- this.JsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge(this.preview);
+ this.JsplumbBridge = this.jsPlumbFactoryService.getJsplumbBridge(
+ this.preview,
+ );
const elem = document.getElementById('assembly');
this.panzoom = Panzoom(elem, {
maxScale: 5,
excludeClass: 'sp-no-pan',
canvas: true,
- contain: 'outside'
+ contain: 'outside',
});
}
autoLayout() {
- this.pipelinePositioningService.layoutGraph('#assembly', 'div[id^=\'jsplumb\']', 110, false);
+ this.pipelinePositioningService.layoutGraph(
+ '#assembly',
+ "div[id^='jsplumb']",
+ 110,
+ false,
+ );
this.JsplumbBridge.repaintEverything();
}
@@ -175,11 +199,11 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
const dialogRef = this.dialog.open(ConfirmDialogComponent, {
width: '500px',
data: {
- 'title': 'Do you really want to delete the current pipeline?',
- 'subtitle': 'This cannot be undone.',
- 'cancelTitle': 'No',
- 'okTitle': 'Yes',
- 'confirmAndCancel': true
+ title: 'Do you really want to delete the current pipeline?',
+ subtitle: 'This cannot be undone.',
+ cancelTitle: 'No',
+ okTitle: 'Yes',
+ confirmAndCancel: true,
},
});
dialogRef.afterClosed().subscribe(ev => {
@@ -204,9 +228,14 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
this.JsplumbBridge.setZoom(this.currentZoomLevel);
this.JsplumbBridge.repaintEverything();
- const removePipelineFromCache = this.editorService.removePipelineFromCache();
- const removeCanvasMetadataFromCache = this.editorService.removeCanvasMetadataFromCache();
- forkJoin([removePipelineFromCache, removeCanvasMetadataFromCache]).subscribe(msg => {
+ const removePipelineFromCache =
+ this.editorService.removePipelineFromCache();
+ const removeCanvasMetadataFromCache =
+ this.editorService.removeCanvasMetadataFromCache();
+ forkJoin([
+ removePipelineFromCache,
+ removeCanvasMetadataFromCache,
+ ]).subscribe(msg => {
this.pipelineCached = false;
this.pipelineCacheRunning = false;
});
@@ -218,7 +247,10 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
submit() {
const pipelineModel = this.pipelineComponent.rawPipelineModel;
const pipeline = this.objectProvider.makeFinalPipeline(pipelineModel);
- this.pipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, pipelineModel);
+ this.pipelinePositioningService.collectPipelineElementPositions(
+ this.pipelineCanvasMetadata,
+ pipelineModel,
+ );
pipeline.name = this.currentPipelineName;
pipeline.description = this.currentPipelineDescription;
if (this.currentModifiedPipelineId) {
@@ -229,16 +261,17 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
panelType: PanelType.SLIDE_IN_PANEL,
title: 'Save pipeline',
data: {
- 'pipeline': pipeline,
- 'currentModifiedPipelineId': this.currentModifiedPipelineId,
- 'pipelineCanvasMetadata': this.pipelineCanvasMetadata
- }
+ pipeline: pipeline,
+ currentModifiedPipelineId: this.currentModifiedPipelineId,
+ pipelineCanvasMetadata: this.pipelineCanvasMetadata,
+ },
});
}
checkAndDisplayCachedPipeline() {
const cachedPipeline = this.editorService.getCachedPipeline();
- const cachedCanvasMetadata = this.editorService.getCachedPipelineCanvasMetadata();
+ const cachedCanvasMetadata =
+ this.editorService.getCachedPipelineCanvasMetadata();
forkJoin([cachedPipeline, cachedCanvasMetadata]).subscribe(results => {
if (results[0] && results[0].length > 0) {
this.rawPipelineModel = results[0] as PipelineElementConfig[];
@@ -248,20 +281,35 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
}
displayPipelineById() {
- const pipelineRequest = this.pipelineService.getPipelineById(this.currentModifiedPipelineId);
- const canvasRequest = this.pipelineCanvasMetadataService.getPipelineCanvasMetadata(this.currentModifiedPipelineId);
+ const pipelineRequest = this.pipelineService.getPipelineById(
+ this.currentModifiedPipelineId,
+ );
+ const canvasRequest =
+ this.pipelineCanvasMetadataService.getPipelineCanvasMetadata(
+ this.currentModifiedPipelineId,
+ );
pipelineRequest.subscribe(pipelineResp => {
- const pipeline = pipelineResp;
- this.currentPipelineName = pipeline.name;
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: pipeline.name}, {label: 'Modify'}]);
- this.currentPipelineDescription = pipeline.description;
- this.rawPipelineModel = this.jsplumbService.makeRawPipeline(pipeline, false);
- canvasRequest.subscribe(canvasResp => {
+ const pipeline = pipelineResp;
+ this.currentPipelineName = pipeline.name;
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: pipeline.name },
+ { label: 'Modify' },
+ ]);
+ this.currentPipelineDescription = pipeline.description;
+ this.rawPipelineModel = this.jsplumbService.makeRawPipeline(
+ pipeline,
+ false,
+ );
+ canvasRequest.subscribe(
+ canvasResp => {
this.handleCanvasMetadataResponse(canvasResp);
- }, error => {
+ },
+ error => {
this.handleCanvasMetadataResponse(undefined);
- });
- });
+ },
+ );
+ });
}
handleCanvasMetadataResponse(canvasMetadata: PipelineCanvasMetadata) {
@@ -272,25 +320,43 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
this.pipelineCanvasMetadataAvailable = false;
this.pipelineCanvasMetadata = new PipelineCanvasMetadata();
}
- this.displayPipelineInEditor(!this.pipelineCanvasMetadataAvailable, this.pipelineCanvasMetadata);
+ this.displayPipelineInEditor(
+ !this.pipelineCanvasMetadataAvailable,
+ this.pipelineCanvasMetadata,
+ );
}
- displayPipelineInEditor(autoLayout,
- pipelineCanvasMetadata?: PipelineCanvasMetadata) {
+ displayPipelineInEditor(
+ autoLayout,
+ pipelineCanvasMetadata?: PipelineCanvasMetadata,
+ ) {
setTimeout(() => {
- this.pipelinePositioningService.displayPipeline(this.rawPipelineModel, '#assembly', false, autoLayout, pipelineCanvasMetadata);
+ this.pipelinePositioningService.displayPipeline(
+ this.rawPipelineModel,
+ '#assembly',
+ false,
+ autoLayout,
+ pipelineCanvasMetadata,
+ );
this.editorService.makePipelineAssemblyEmpty(false);
this.ngZone.run(() => {
- this.pipelineValid = this.pipelineValidationService
- .isValidPipeline(this.rawPipelineModel.filter(pe => !(pe.settings.disabled)), false);
+ this.pipelineValid =
+ this.pipelineValidationService.isValidPipeline(
+ this.rawPipelineModel.filter(
+ pe => !pe.settings.disabled,
+ ),
+ false,
+ );
});
this.pipelineComponent.triggerPipelineModification();
});
}
-
isPipelineAssemblyEmpty() {
- return this.rawPipelineModel.length === 0 || this.rawPipelineModel.every(pe => pe.settings.disabled);
+ return (
+ this.rawPipelineModel.length === 0 ||
+ this.rawPipelineModel.every(pe => pe.settings.disabled)
+ );
}
panLeft() {
@@ -334,9 +400,9 @@ export class PipelineAssemblyComponent implements OnInit, AfterViewInit {
title: 'Discover pipeline elements',
width: '50vw',
data: {
- 'currentElements': this.allElements,
- 'rawPipelineModel': this.rawPipelineModel
- }
+ currentElements: this.allElements,
+ rawPipelineModel: this.rawPipelineModel,
+ },
});
}
}
diff --git a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.html b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.html
index 3cb34c9ae..ab2cf5756 100644
--- a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.html
+++ b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.html
@@ -16,9 +16,11 @@
~
-->
-<p showdown="{{documentationMarkdown}}" *ngIf="documentationMarkdown && !error" [ngClass]="useStyling ? 'note' : ''">
-
-</p>
+<p
+ showdown="{{ documentationMarkdown }}"
+ *ngIf="documentationMarkdown && !error"
+ [ngClass]="useStyling ? 'note' : ''"
+></p>
<p *ngIf="error" [ngClass]="useStyling ? 'note' : ''">
(no documentation available)
</p>
diff --git a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.scss b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.scss
index 41ecef044..13cbc4aac 100644
--- a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.scss
+++ b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.scss
@@ -14,4 +14,4 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*
- */
\ No newline at end of file
+ */
diff --git a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
index bbe039d05..f128ce70d 100644
--- a/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-documentation/pipeline-element-documentation.component.ts
@@ -20,33 +20,31 @@ import { Component, Input, OnInit } from '@angular/core';
import { PipelineElementService } from '@streampipes/platform-services';
@Component({
- selector: 'pipeline-element-documentation',
- templateUrl: './pipeline-element-documentation.component.html',
- styleUrls: ['./pipeline-element-documentation.component.scss']
+ selector: 'sp-pipeline-element-documentation',
+ templateUrl: './pipeline-element-documentation.component.html',
+ styleUrls: ['./pipeline-element-documentation.component.scss'],
})
export class PipelineElementDocumentationComponent implements OnInit {
-
- @Input()
- appId: string;
-
- @Input()
- useStyling: boolean;
-
- documentationMarkdown: any;
- error: any;
-
- constructor(private pipelineElementService: PipelineElementService) {
-
- }
-
- ngOnInit(): void {
- this.pipelineElementService.getDocumentation(this.appId).subscribe(msg => {
- this.error = false;
- this.documentationMarkdown = msg;
- }, error => {
- this.error = true;
- });
- }
-
-
+ @Input()
+ appId: string;
+
+ @Input()
+ useStyling: boolean;
+
+ documentationMarkdown: any;
+ error: any;
+
+ constructor(private pipelineElementService: PipelineElementService) {}
+
+ ngOnInit(): void {
+ this.pipelineElementService.getDocumentation(this.appId).subscribe(
+ msg => {
+ this.error = false;
+ this.documentationMarkdown = msg;
+ },
+ error => {
+ this.error = true;
+ },
+ );
+ }
}
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html b/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
index 25eb72dec..18970b039 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.html
@@ -15,44 +15,56 @@
~ limitations under the License.
~
-->
-<div fxLayout="row"
- class="draggable-pipeline-element"
- fxFlex="100"
- id="{{ element.appId }}"
- [attr.data-pe]="element.elementId"
- (mouseenter)="updateMouseOver(element.name)"
- (mouseleave)="updateMouseOver('')">
+<div
+ fxLayout="row"
+ class="draggable-pipeline-element"
+ fxFlex="100"
+ id="{{ element.appId }}"
+ [attr.data-pe]="element.elementId"
+ (mouseenter)="updateMouseOver(element.name)"
+ (mouseleave)="updateMouseOver('')"
+>
<div fxFlex="50px">
- <div matTooltip="{{element.name}}" [matTooltipPosition]="'above'"
- class="draggable-icon-editor tt"
- [ngClass]="activeCssClass">
+ <div
+ matTooltip="{{ element.name }}"
+ [matTooltipPosition]="'above'"
+ class="draggable-icon-editor tt"
+ [ngClass]="activeCssClass"
+ >
<span id="container" class="pe-container">
- <pipeline-element
+ <sp-pipeline-element
id="pe-icon-stand-{{ element.appId }}"
- style="margin-left:-3%"
+ style="margin-left: -3%"
[iconStandSize]="true"
[attr.data-cy]="'sp-pipeline-element-' + cypressName"
[pipelineElement]="element"
- [preview]="false"></pipeline-element>
+ [preview]="false"
+ ></sp-pipeline-element>
</span>
</div>
</div>
<div fxFlex fxLayoutAlign="start start" fxLayout="column">
<div class="element-name" fxLayoutAlign="start start">
- {{element.name}}
+ {{ element.name }}
</div>
- <div class="element-description" *ngIf="currentMouseOver" fxLayoutAlign="start start">
- <small>{{element.description}}</small>
+ <div
+ class="element-description"
+ *ngIf="currentMouseOver"
+ fxLayoutAlign="start start"
+ >
+ <small>{{ element.description }}</small>
</div>
</div>
<div fxLayoutAlign="end start" *ngIf="currentMouseOver">
- <button mat-button
- mat-raised-button
- mat-icon-button
- color="accent"
- class="help-button-stand"
- (click)="openHelpDialog(element)">?
+ <button
+ mat-button
+ mat-raised-button
+ mat-icon-button
+ color="accent"
+ class="help-button-stand"
+ (click)="openHelpDialog(element)"
+ >
+ ?
</button>
</div>
</div>
-
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss b/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
index 085ba5084..170b40e0d 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.scss
@@ -17,67 +17,67 @@
*/
.draggable-icon-editor {
- cursor: move;
- vertical-align: top;
- background-color: var(--color-pe);
- display: inline-block;
- height: 35px;
- width: 35px;
- line-height: 35px;
- box-shadow: 1px 1px 2px var(--color-shadow);
- text-align: center;
- z-index:100;
+ cursor: move;
+ vertical-align: top;
+ background-color: var(--color-pe);
+ display: inline-block;
+ height: 35px;
+ width: 35px;
+ line-height: 35px;
+ box-shadow: 1px 1px 2px var(--color-shadow);
+ text-align: center;
+ z-index: 100;
}
.draggable-icon-drag {
- cursor: pointer;
- vertical-align: top;
- background: var(--color-pe);
- display: inline-block;
- height: 70px;
- width: 70px;
- line-height: 70px;
- box-shadow: 1px 1px 2px var(--color-shadow);
- text-align: center;
- background: white;
- z-index: 100;
+ cursor: pointer;
+ vertical-align: top;
+ background: var(--color-pe);
+ display: inline-block;
+ height: 70px;
+ width: 70px;
+ line-height: 70px;
+ box-shadow: 1px 1px 2px var(--color-shadow);
+ text-align: center;
+ background: white;
+ z-index: 100;
}
.draggable-pipeline-element {
- cursor: move;
- z-index: 100;
+ cursor: move;
+ z-index: 100;
}
.element-name {
- font-size: 11pt;
- font-weight: 500;
+ font-size: 11pt;
+ font-weight: 500;
}
.element-description {
- font-weight: 300;
+ font-weight: 300;
}
.help-button-stand {
- padding: 0;
- min-width: 0;
- width: 20px;
- height: 20px;
- flex-shrink: 0;
- line-height: 20px;
- border-radius: 0;
- margin-right: 5px;
+ padding: 0;
+ min-width: 0;
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+ line-height: 20px;
+ border-radius: 0;
+ margin-right: 5px;
}
.pe-container {
- position:relative;
- display:block;
- width:35px;
- height:35px;
+ position: relative;
+ display: block;
+ width: 35px;
+ height: 35px;
}
.pe-container-drag {
- position:relative;
- display:block;
- width:70px;
- height:70px;
+ position: relative;
+ display: block;
+ width: 70px;
+ height: 70px;
}
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts b/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
index bd799a073..ab0e2385c 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand-row/pipeline-element-icon-stand-row.component.ts
@@ -16,46 +16,47 @@
*
*/
-import { Component, Input, OnInit, } from '@angular/core';
-import { PipelineElementType, PipelineElementUnion } from '../../model/editor.model';
+import { Component, Input, OnInit } from '@angular/core';
+import {
+ PipelineElementType,
+ PipelineElementUnion,
+} from '../../model/editor.model';
import { PipelineElementTypeUtils } from '../../utils/editor.utils';
import { EditorService } from '../../services/editor.service';
-
@Component({
- selector: 'sp-pe-icon-stand-row',
- templateUrl: './pipeline-element-icon-stand-row.component.html',
- styleUrls: ['./pipeline-element-icon-stand-row.component.scss']
+ selector: 'sp-pe-icon-stand-row',
+ templateUrl: './pipeline-element-icon-stand-row.component.html',
+ styleUrls: ['./pipeline-element-icon-stand-row.component.scss'],
})
export class PipelineElementIconStandRowComponent implements OnInit {
+ @Input()
+ element: PipelineElementUnion;
- @Input()
- element: PipelineElementUnion;
-
- activeCssClass: string;
- cypressName: string;
-
- currentMouseOver = false;
+ activeCssClass: string;
+ cypressName: string;
- constructor(private editorService: EditorService) {
+ currentMouseOver = false;
- }
+ constructor(private editorService: EditorService) {}
- ngOnInit(): void {
- const activeType = PipelineElementTypeUtils.fromClassName(this.element['@class']);
- this.activeCssClass = this.makeActiveCssClass(activeType);
- this.cypressName = this.element.name.toLowerCase().replace(' ', '_');
- }
+ ngOnInit(): void {
+ const activeType = PipelineElementTypeUtils.fromClassName(
+ this.element['@class'],
+ );
+ this.activeCssClass = this.makeActiveCssClass(activeType);
+ this.cypressName = this.element.name.toLowerCase().replace(' ', '_');
+ }
- makeActiveCssClass(elementType: PipelineElementType): string {
- return PipelineElementTypeUtils.toCssShortHand(elementType);
- }
+ makeActiveCssClass(elementType: PipelineElementType): string {
+ return PipelineElementTypeUtils.toCssShortHand(elementType);
+ }
- updateMouseOver(e: string) {
- this.currentMouseOver = !this.currentMouseOver;
- }
+ updateMouseOver(e: string) {
+ this.currentMouseOver = !this.currentMouseOver;
+ }
- openHelpDialog(pipelineElement) {
- this.editorService.openHelpDialog(pipelineElement);
- }
+ openHelpDialog(pipelineElement) {
+ this.editorService.openHelpDialog(pipelineElement);
+ }
}
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
index f625f1f7a..6b632de6a 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -15,110 +15,196 @@
~ limitations under the License.
~
-->
-<div fxFlex="100" fxLayout="column" class="border" style="width: 250px;" [attr.data-cy]="'sp-pipeline-element-selection'">
- <div class="editorIconStandOptions sp-bg-lightgray page-container-nav" style="padding:0px;">
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" style="padding-left:5px;">
+<div
+ fxFlex="100"
+ fxLayout="column"
+ class="border"
+ style="width: 250px"
+ [attr.data-cy]="'sp-pipeline-element-selection'"
+>
+ <div
+ class="editorIconStandOptions sp-bg-lightgray page-container-nav"
+ style="padding: 0px"
+ >
+ <div
+ fxFlex="100"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ style="padding-left: 5px"
+ >
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<i class="material-icons sp-accent">search</i>
- <mat-form-field floatLabel="never" color="accent" class="search-field">
+ <mat-form-field
+ floatLabel="never"
+ color="accent"
+ class="search-field"
+ >
<mat-label>Find element</mat-label>
- <input matInput
- type="text"
- (keyup)="makeDraggable()"
- placeholder="Find element"
- [(ngModel)]="elementFilter">
- <button *ngIf="elementFilter"
- matSuffix
- mat-icon-button
- aria-label="Find element" (click)="clearInput()">
+ <input
+ matInput
+ type="text"
+ (keyup)="makeDraggable()"
+ placeholder="Find element"
+ [(ngModel)]="elementFilter"
+ />
+ <button
+ *ngIf="elementFilter"
+ matSuffix
+ mat-icon-button
+ aria-label="Find element"
+ (click)="clearInput()"
+ >
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
<span fxFlex></span>
- <button mat-button
- mat-icon-button
- color="accent"
- (click)="startCreatePipelineTour()"
- [matTooltip]="'Tutorial'" style="margin-right: 5px;">
- <i class="material-icons">
- school
- </i>
+ <button
+ mat-button
+ mat-icon-button
+ color="accent"
+ (click)="startCreatePipelineTour()"
+ [matTooltip]="'Tutorial'"
+ style="margin-right: 5px"
+ >
+ <i class="material-icons"> school </i>
</button>
</div>
</div>
</div>
- <div id="editor-icon-stand"
- class="icon-stand"
- *ngIf="allElements">
- <div fxFlex="100"
- fxLayout="column">
- <div *ngFor="let availableType; let i = index of availableTypes"
- fxLayout="column"
- class="panel-outer">
- <div class="panel-header"
- id="panel-{{availableType.filters[0]}}"
- fxLayout="row"
- fxLayoutAlign="start center"
- [ngStyle]="{background: 'var(--color-bg-2)'}">
- <div class="panel-title"
- fxLayoutAlign="start center">
- {{availableType.title}}
+ <div id="editor-icon-stand" class="icon-stand" *ngIf="allElements">
+ <div fxFlex="100" fxLayout="column">
+ <div
+ *ngFor="let availableType; let i = index; of: availableTypes"
+ fxLayout="column"
+ class="panel-outer"
+ >
+ <div
+ class="panel-header"
+ id="panel-{{ availableType.filters[0] }}"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ [ngStyle]="{ background: 'var(--color-bg-2)' }"
+ >
+ <div class="panel-title" fxLayoutAlign="start center">
+ {{ availableType.title }}
</div>
<span fxFlex></span>
- <button mat-icon-button
- matTooltip="Create new source"
- (click)="navigateToConnect()"
- *ngIf="availableType.title === availableTypes[0].title">
+ <button
+ mat-icon-button
+ matTooltip="Create new source"
+ (click)="navigateToConnect()"
+ *ngIf="availableType.title === availableTypes[0].title"
+ >
<mat-icon>add</mat-icon>
</button>
- <button mat-icon-button
- (click)="toggleOpen(availableType)"
- *ngIf="!availableType.open">
+ <button
+ mat-icon-button
+ (click)="toggleOpen(availableType)"
+ *ngIf="!availableType.open"
+ >
<mat-icon>expand_more</mat-icon>
</button>
- <button mat-icon-button
- (click)="toggleOpen(availableType)"
- *ngIf="availableType.open">
+ <button
+ mat-icon-button
+ (click)="toggleOpen(availableType)"
+ *ngIf="availableType.open"
+ >
<mat-icon>expand_less</mat-icon>
</button>
</div>
- <div fxFlex="100"
- fxLayout="column"
- *ngIf="availableType.open" class="panel-content">
- <div fxLayout="row"
- fxLayoutAlign="end center"
- class="panel-options"
- *ngIf="!(availableType.filters[0] === 1)">
- <small>Sort: <a (click)="changeSorting(availableType, 'group')"
- class="sort-option"
- [ngClass]="availableType.sort === 'group' ? 'sort-selected' : 'sort-unselected'">Group</a> |
- <a (click)="changeSorting(availableType, 'name')"
- class="sort-option"
- [ngClass]="availableType.sort === 'name' ? 'sort-selected' : 'sort-unselected'">Name</a></small>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="availableType.open"
+ class="panel-content"
+ >
+ <div
+ fxLayout="row"
+ fxLayoutAlign="end center"
+ class="panel-options"
+ *ngIf="!(availableType.filters[0] === 1)"
+ >
+ <small
+ >Sort: <a
+ (click)="changeSorting(availableType, 'group')"
+ class="sort-option"
+ [ngClass]="
+ availableType.sort === 'group'
+ ? 'sort-selected'
+ : 'sort-unselected'
+ "
+ >Group</a
+ > |
+ <a
+ (click)="changeSorting(availableType, 'name')"
+ class="sort-option"
+ [ngClass]="
+ availableType.sort === 'name'
+ ? 'sort-selected'
+ : 'sort-unselected'
+ "
+ >Name</a
+ ></small
+ >
</div>
- <div fxFlex="100"
- fxLayout="column"
- *ngIf="availableType.sort === 'name'">
- <div fxLayout="column"
- fxFlex="100"
- *ngFor="let element of allElements | pipelineElementType:availableType.filters | pipelineElementName:elementFilter"
- class="pe-row">
- <sp-pe-icon-stand-row [element]="element" fxFlex="100"></sp-pe-icon-stand-row>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="availableType.sort === 'name'"
+ >
+ <div
+ fxLayout="column"
+ fxFlex="100"
+ *ngFor="
+ let element of allElements
+ | pipelineElementType
+ : availableType.filters
+ | pipelineElementName : elementFilter
+ "
+ class="pe-row"
+ >
+ <sp-pe-icon-stand-row
+ [element]="element"
+ fxFlex="100"
+ ></sp-pe-icon-stand-row>
</div>
</div>
- <div fxFlex="100"
- fxLayout="column"
- *ngIf="availableType.sort === 'group' && categoriesReady">
- <div *ngFor="let category of allCategories.get(availableType.filters[0])"
- fxLayout="column">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="
+ availableType.sort === 'group' && categoriesReady
+ "
+ >
+ <div
+ *ngFor="
+ let category of allCategories.get(
+ availableType.filters[0]
+ )
+ "
+ fxLayout="column"
+ >
<div class="group-outer">
- <span class="group-title">{{category.label}}</span>
+ <span class="group-title">{{
+ category.label
+ }}</span>
</div>
- <div fxLayout="column"
- fxFlex="100"
- *ngFor="let element of allElements | pipelineElementType:availableType.filters | pipelineElementName:elementFilter | pipelineElementGroup:category"
- class="pe-row">
- <sp-pe-icon-stand-row [element]="element" fxFlex="100"></sp-pe-icon-stand-row>
+ <div
+ fxLayout="column"
+ fxFlex="100"
+ *ngFor="
+ let element of allElements
+ | pipelineElementType
+ : availableType.filters
+ | pipelineElementName : elementFilter
+ | pipelineElementGroup : category
+ "
+ class="pe-row"
+ >
+ <sp-pe-icon-stand-row
+ [element]="element"
+ fxFlex="100"
+ ></sp-pe-icon-stand-row>
</div>
</div>
</div>
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
index be1bab152..76b298677 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
@@ -19,100 +19,99 @@
@import '../../../../scss/_variables.scss';
.menu-text-color {
- color: var(--color-accent);
- display: flex;
- align-items: center;
+ color: var(--color-accent);
+ display: flex;
+ align-items: center;
}
.icon-stand {
- max-height: calc(100vh - 148px);
- overflow-y: auto;
- background: var(--color-bg-1);
- margin-top: 5px;
+ max-height: calc(100vh - 148px);
+ overflow-y: auto;
+ background: var(--color-bg-1);
+ margin-top: 5px;
}
.border {
- border: 1px solid var(--color-bg-3);
+ border: 1px solid var(--color-bg-3);
}
.pe-row {
- padding-top: 5px;
- padding-bottom: 5px;
- padding-left: 5px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 5px;
}
-
.pe-row:nth-child(even) {
- background-color: var(--color-bg-1);
+ background-color: var(--color-bg-1);
}
.pe-row:nth-child(odd) {
- background-color: var(--color-bg-0);
+ background-color: var(--color-bg-0);
}
.pe-row:hover {
- background-color: var(--color-bg-2);
- cursor: pointer;
+ background-color: var(--color-bg-2);
+ cursor: pointer;
}
.panel-header {
- padding: 3px;
+ padding: 3px;
}
.panel-title {
- font-weight: 400;
- padding-left: 5px;
+ font-weight: 400;
+ padding-left: 5px;
}
.panel-options {
- margin-top: 10px;
- margin-bottom: 5px;
- margin-right: 5px;
+ margin-top: 10px;
+ margin-bottom: 5px;
+ margin-right: 5px;
}
.panel-content {
- margin-top: 10px;
+ margin-top: 10px;
}
.sort-selected {
- padding: 3px;
- background: var(--color-accent);
- color: white;
+ padding: 3px;
+ background: var(--color-accent);
+ color: white;
}
.sort-unselected {
- padding: 3px;
- color: var(--color-accent);
+ padding: 3px;
+ color: var(--color-accent);
}
.panel-outer {
- margin-bottom: 10px;
- margin-left: 0;
- margin-right: 0px;
- border-right: 1px solid var(--color-bg-3);
- border-bottom: 1px solid var(--color-bg-3);
- border-top: 1px solid var(--color-bg-3);
+ margin-bottom: 10px;
+ margin-left: 0;
+ margin-right: 0px;
+ border-right: 1px solid var(--color-bg-3);
+ border-bottom: 1px solid var(--color-bg-3);
+ border-top: 1px solid var(--color-bg-3);
}
.search-field {
- width: 160px;
+ width: 160px;
}
.group-outer {
- margin-top: 15px;
- margin-bottom: 10px;
- margin-left: 5px;
+ margin-top: 15px;
+ margin-bottom: 10px;
+ margin-left: 5px;
}
.group-title {
- padding-left: 5px;
- padding-right: 5px;
- border-radius: 3px;
- font-size: small;
- background: var(--color-primary);
- color: var(--color-accent);
+ padding-left: 5px;
+ padding-right: 5px;
+ border-radius: 3px;
+ font-size: small;
+ background: var(--color-primary);
+ color: var(--color-accent);
}
.sort-option {
- cursor: pointer;
+ cursor: pointer;
}
diff --git a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
index c1c5dac02..7754f1ad3 100644
--- a/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
@@ -16,143 +16,185 @@
*
*/
-import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, } from '@angular/core';
+import {
+ AfterViewInit,
+ Component,
+ EventEmitter,
+ Input,
+ OnInit,
+ Output,
+} from '@angular/core';
import { RestApi } from '../../../services/rest-api.service';
-import { PeCategory, PipelineElementType, PipelineElementUnion } from '../../model/editor.model';
+import {
+ PeCategory,
+ PipelineElementType,
+ PipelineElementUnion,
+} from '../../model/editor.model';
import { EditorService } from '../../services/editor.service';
import { zip } from 'rxjs';
-import { Router } from "@angular/router";
-
+import { Router } from '@angular/router';
@Component({
- selector: 'pipeline-element-icon-stand',
- templateUrl: './pipeline-element-icon-stand.component.html',
- styleUrls: ['./pipeline-element-icon-stand.component.scss']
+ selector: 'sp-pipeline-element-icon-stand',
+ templateUrl: './pipeline-element-icon-stand.component.html',
+ styleUrls: ['./pipeline-element-icon-stand.component.scss'],
})
-export class PipelineElementIconStandComponent implements OnInit, AfterViewInit {
-
- availableTypes = [
- {
- title: 'Data Sources',
- filters: [PipelineElementType.DataStream, PipelineElementType.DataSet],
- open: true,
- color: 'var(--color-stream)',
- sort: 'name'
- },
- {
- title: 'Data Processors',
- filters: [PipelineElementType.DataProcessor],
- open: true,
- color: 'var(--color-processor)',
- sort: 'name'
- },
- {
- title: 'Data Sinks',
- filters: [PipelineElementType.DataSink],
- open: true,
- color: 'var(--color-sink)',
- sort: 'name'
- }];
-
- @Input()
- allElements: PipelineElementUnion[];
-
- @Output()
- startTourEmitter: EventEmitter<void> = new EventEmitter<void>();
-
- elementFilter = '';
- allCategories: Map<PipelineElementType, PeCategory[]> = new Map();
- categoriesReady = false;
- uncategorized: PeCategory = {code: 'UNCATEGORIZED', label: 'Uncategorized', description: ''};
-
- constructor(private restApi: RestApi,
- private editorService: EditorService,
- private router: Router) {
-
- }
-
- ngOnInit(): void {
- this.loadOptions();
- }
-
- ngAfterViewInit() {
- this.makeDraggable();
- }
-
- loadOptions() {
- zip(this.editorService.getEpCategories(),
- this.editorService.getEpaCategories(),
- this.editorService.getEcCategories()).subscribe((results) => {
- results[0] = this.sort(results[0]).filter(category => this.filterForExistingCategories(category));
- results[1] = this.sort(results[1]).filter(category => this.filterForExistingCategories(category));
- results[2] = this.sort(results[2]).filter(category => this.filterForExistingCategories(category));
- this.allCategories.set(PipelineElementType.DataStream, results[0]);
- this.allCategories.set(PipelineElementType.DataProcessor, results[1]);
- this.allCategories.set(PipelineElementType.DataSink, results[2]);
- this.categoriesReady = true;
- });
- }
-
- filterForExistingCategories(category: PeCategory): boolean {
- return this.allElements
- .filter(element => element.category)
- .find(element => element.category.find(elCat => elCat === category.code)) !== undefined ||
- ((category.code === this.uncategorized.code) && this.allElements.find(element => (!element.category)) !== undefined);
- }
-
- sort(categories: PeCategory[]) {
- return categories.sort((a, b) => {
- return a.label.localeCompare(b.label);
- });
- }
-
- makeDraggable() {
- setTimeout(() => {
- ($('.draggable-pipeline-element') as any).draggable({
- revert: 'invalid',
- helper: ((ev) => {
- const draggable = $(ev.currentTarget).find('.draggable-icon-editor').first().clone();
- const draggableContainer = $(draggable).find('.pe-container').first();
- $(draggable).removeClass('draggable-icon-editor');
- $(draggable).addClass('draggable-icon-drag');
- $(draggableContainer).removeClass('pe-container');
- $(draggableContainer).addClass('pe-container-drag');
- return draggable.clone();
- }),
- stack: '.draggable-pipeline-element',
- start(el, ui) {
- ui.helper.appendTo('#content');
- $('#outerAssemblyArea').css('border', '3px dashed #39b54a');
+export class PipelineElementIconStandComponent
+ implements OnInit, AfterViewInit
+{
+ availableTypes = [
+ {
+ title: 'Data Sources',
+ filters: [
+ PipelineElementType.DataStream,
+ PipelineElementType.DataSet,
+ ],
+ open: true,
+ color: 'var(--color-stream)',
+ sort: 'name',
},
- stop(el, ui) {
- $('#outerAssemblyArea').css('border', '1px solid var(--color-bg-3)');
- }
- });
- });
- }
-
- toggleOpen(availableType: any): void {
- availableType.open = !availableType.open;
- this.makeDraggable();
- }
-
- startCreatePipelineTour() {
- this.startTourEmitter.emit();
- }
-
- changeSorting(availableType: any,
- sortMode: string) {
- availableType.sort = sortMode;
- this.makeDraggable();
- }
-
- clearInput() {
- this.elementFilter = '';
- this.makeDraggable();
- }
-
- navigateToConnect() {
- this.router.navigate(['connect']);
- }
-
+ {
+ title: 'Data Processors',
+ filters: [PipelineElementType.DataProcessor],
+ open: true,
+ color: 'var(--color-processor)',
+ sort: 'name',
+ },
+ {
+ title: 'Data Sinks',
+ filters: [PipelineElementType.DataSink],
+ open: true,
+ color: 'var(--color-sink)',
+ sort: 'name',
+ },
+ ];
+
+ @Input()
+ allElements: PipelineElementUnion[];
+
+ @Output()
+ startTourEmitter: EventEmitter<void> = new EventEmitter<void>();
+
+ elementFilter = '';
+ allCategories: Map<PipelineElementType, PeCategory[]> = new Map();
+ categoriesReady = false;
+ uncategorized: PeCategory = {
+ code: 'UNCATEGORIZED',
+ label: 'Uncategorized',
+ description: '',
+ };
+
+ constructor(
+ private restApi: RestApi,
+ private editorService: EditorService,
+ private router: Router,
+ ) {}
+
+ ngOnInit(): void {
+ this.loadOptions();
+ }
+
+ ngAfterViewInit() {
+ this.makeDraggable();
+ }
+
+ loadOptions() {
+ zip(
+ this.editorService.getEpCategories(),
+ this.editorService.getEpaCategories(),
+ this.editorService.getEcCategories(),
+ ).subscribe(results => {
+ results[0] = this.sort(results[0]).filter(category =>
+ this.filterForExistingCategories(category),
+ );
+ results[1] = this.sort(results[1]).filter(category =>
+ this.filterForExistingCategories(category),
+ );
+ results[2] = this.sort(results[2]).filter(category =>
+ this.filterForExistingCategories(category),
+ );
+ this.allCategories.set(PipelineElementType.DataStream, results[0]);
+ this.allCategories.set(
+ PipelineElementType.DataProcessor,
+ results[1],
+ );
+ this.allCategories.set(PipelineElementType.DataSink, results[2]);
+ this.categoriesReady = true;
+ });
+ }
+
+ filterForExistingCategories(category: PeCategory): boolean {
+ return (
+ this.allElements
+ .filter(element => element.category)
+ .find(element =>
+ element.category.find(elCat => elCat === category.code),
+ ) !== undefined ||
+ (category.code === this.uncategorized.code &&
+ this.allElements.find(element => !element.category) !==
+ undefined)
+ );
+ }
+
+ sort(categories: PeCategory[]) {
+ return categories.sort((a, b) => {
+ return a.label.localeCompare(b.label);
+ });
+ }
+
+ makeDraggable() {
+ setTimeout(() => {
+ ($('.draggable-pipeline-element') as any).draggable({
+ revert: 'invalid',
+ helper: ev => {
+ const draggable = $(ev.currentTarget)
+ .find('.draggable-icon-editor')
+ .first()
+ .clone();
+ const draggableContainer = $(draggable)
+ .find('.pe-container')
+ .first();
+ $(draggable).removeClass('draggable-icon-editor');
+ $(draggable).addClass('draggable-icon-drag');
+ $(draggableContainer).removeClass('pe-container');
+ $(draggableContainer).addClass('pe-container-drag');
+ return draggable.clone();
+ },
+ stack: '.draggable-pipeline-element',
+ start(el, ui) {
+ ui.helper.appendTo('#content');
+ $('#outerAssemblyArea').css('border', '3px dashed #39b54a');
+ },
+ stop(el, ui) {
+ $('#outerAssemblyArea').css(
+ 'border',
+ '1px solid var(--color-bg-3)',
+ );
+ },
+ });
+ });
+ }
+
+ toggleOpen(availableType: any): void {
+ availableType.open = !availableType.open;
+ this.makeDraggable();
+ }
+
+ startCreatePipelineTour() {
+ this.startTourEmitter.emit();
+ }
+
+ changeSorting(availableType: any, sortMode: string) {
+ availableType.sort = sortMode;
+ this.makeDraggable();
+ }
+
+ clearInput() {
+ this.elementFilter = '';
+ this.makeDraggable();
+ }
+
+ navigateToConnect() {
+ this.router.navigate(['connect']);
+ }
}
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
index b2597f3a3..92e1483c1 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.html
@@ -16,57 +16,127 @@
~
-->
<div>
- <div [ngStyle]="currentMouseOverElement==pipelineElement.payload.dom ? {opacity: 1} : {opacity: 1}" class="sp-fade-options">
- <span class="options-button customize-button" *ngIf="pipelineElement.type!='stream'" style="z-index:10">
- <button class="options-icon-button" mat-button mat-icon-button matTooltip="Configure Element"
- [matTooltipPosition]="'above'"
- (click)="customizeElement(pipelineElement)">
+ <div
+ [ngStyle]="
+ currentMouseOverElement === pipelineElement.payload.dom
+ ? { opacity: 1 }
+ : { opacity: 1 }
+ "
+ class="sp-fade-options"
+ >
+ <span
+ class="options-button customize-button"
+ *ngIf="pipelineElement.type !== 'stream'"
+ style="z-index: 10"
+ >
+ <button
+ class="options-icon-button"
+ mat-button
+ mat-icon-button
+ matTooltip="Configure Element"
+ [matTooltipPosition]="'above'"
+ (click)="customizeElement(pipelineElement)"
+ >
<i class="material-icons options-icon-size">settings</i>
- </button>
+ </button>
</span>
- <span class="options-button customize-button"
- *ngIf="pipelineElement.type=='stream' && isWildcardTopic()"
- style="z-index:10">
- <button class="options-icon-button" mat-button mat-icon-button matTooltip="Configure Element" [matTooltipPosition]="'above'"
- (click)="openCustomizeStreamDialog()">
+ <span
+ class="options-button customize-button"
+ *ngIf="pipelineElement.type === 'stream' && isWildcardTopic()"
+ style="z-index: 10"
+ >
+ <button
+ class="options-icon-button"
+ mat-button
+ mat-icon-button
+ matTooltip="Configure Element"
+ [matTooltipPosition]="'above'"
+ (click)="openCustomizeStreamDialog()"
+ >
<i class="material-icons options-icon-size">settings</i>
</button>
</span>
- <span class="options-button delete-button" style="z-index:10">
- <button class="options-icon-button" mat-button mat-icon-button matTooltip="Delete Element" [matTooltipPosition]="'above'"
- (click)="removeElement(pipelineElement)">
+ <span class="options-button delete-button" style="z-index: 10">
+ <button
+ class="options-icon-button"
+ mat-button
+ mat-icon-button
+ matTooltip="Delete Element"
+ [matTooltipPosition]="'above'"
+ (click)="removeElement(pipelineElement)"
+ >
<i class="material-icons options-icon-size">clear</i>
</button>
</span>
- <span class="options-button possible-button" *ngIf="pipelineElement.type!='action'" style="z-index:10">
- <button class="options-icon-button" mat-button mat-icon-button matTooltip="Compatible Elements" [matTooltipPosition]="'below'"
- [disabled]="!possibleElements || possibleElements.length == 0"
- (click)="openPossibleElementsDialog()"
- [attr.data-cy]="'sp-possible-elements-' + pipelineElement.payload.name.toLowerCase().replaceAll(' ', '_')"_>
+ <span
+ class="options-button possible-button"
+ *ngIf="pipelineElement.type !== 'action'"
+ style="z-index: 10"
+ >
+ <button
+ class="options-icon-button"
+ mat-button
+ mat-icon-button
+ matTooltip="Compatible Elements"
+ [matTooltipPosition]="'below'"
+ [disabled]="!possibleElements || possibleElements.length === 0"
+ (click)="openPossibleElementsDialog()"
+ [attr.data-cy]="
+ 'sp-possible-elements-' +
+ pipelineElement.payload.name
+ .toLowerCase()
+ .replaceAll(' ', '_')
+ "
+ _
+ >
<i class="material-icons options-icon-size">account_tree</i>
- </button>
+ </button>
</span>
- <span class="options-button recommended-button"
- *ngIf="pipelineElement.type!='action' && (recommendationsAvailable) && recommendedElements.length > 0"
- style="z-index:10">
- <button class="options-icon-button" mat-button mat-icon-button matTooltip="Recommended Elements" [matTooltipPosition]="'below'"
- (click)="showRecommendations($event)"
- [disabled]="!recommendationsAvailable">
+ <span
+ class="options-button recommended-button"
+ *ngIf="
+ pipelineElement.type !== 'action' &&
+ recommendationsAvailable &&
+ recommendedElements.length > 0
+ "
+ style="z-index: 10"
+ >
+ <button
+ class="options-icon-button"
+ mat-button
+ mat-icon-button
+ matTooltip="Recommended Elements"
+ [matTooltipPosition]="'below'"
+ (click)="showRecommendations($event)"
+ [disabled]="!recommendationsAvailable"
+ >
<i class="material-icons options-icon-size">add</i>
</button>
</span>
- <span class="options-button help-button" style="z-index:10">
- <button class="options-icon-button" matTooltip="Help" [matTooltipPosition]="'below'"
- mat-button mat-icon-button (click)="openHelpDialog()">
+ <span class="options-button help-button" style="z-index: 10">
+ <button
+ class="options-icon-button"
+ matTooltip="Help"
+ [matTooltipPosition]="'below'"
+ mat-button
+ mat-icon-button
+ (click)="openHelpDialog()"
+ >
<i class="material-icons options-icon-size">help</i>
- </button>
+ </button>
</span>
- <div class="editor-pe-info" [ngClass]="'pe-info-' + pipelineElementCssType">
- {{pipelineElement.payload.name}}
+ <div
+ class="editor-pe-info"
+ [ngClass]="'pe-info-' + pipelineElementCssType"
+ >
+ {{ pipelineElement.payload.name }}
</div>
</div>
- <pipeline-element-recommendation [rawPipelineModel]="rawPipelineModel"
- [pipelineElementDomId]="pipelineElement.payload.dom"
- [recommendedElements]="recommendedElements"
- [recommendationsShown]="recommendationsShown" *ngIf="recommendationsAvailable"></pipeline-element-recommendation>
+ <sp-pipeline-element-recommendation
+ [rawPipelineModel]="rawPipelineModel"
+ [pipelineElementDomId]="pipelineElement.payload.dom"
+ [recommendedElements]="recommendedElements"
+ [recommendationsShown]="recommendationsShown"
+ *ngIf="recommendationsAvailable"
+ ></sp-pipeline-element-recommendation>
</div>
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
index 50f079989..d4762ec6d 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -20,19 +20,26 @@ import { JsplumbBridge } from '../../services/jsplumb-bridge.service';
import { JsplumbService } from '../../services/jsplumb.service';
import { PipelineValidationService } from '../../services/pipeline-validation.service';
import { RestApi } from '../../../services/rest-api.service';
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnDestroy,
+ OnInit,
+ Output,
+} from '@angular/core';
import { PipelineElementRecommendationService } from '../../services/pipeline-element-recommendation.service';
import { ObjectProvider } from '../../services/object-provider.service';
import {
- PipelineElementConfig,
- PipelineElementConfigurationStatus,
- PipelineElementUnion
+ PipelineElementConfig,
+ PipelineElementConfigurationStatus,
+ PipelineElementUnion,
} from '../../model/editor.model';
import {
- DataProcessorInvocation,
- DataSinkInvocation,
- SpDataStream,
- WildcardTopicDefinition
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ SpDataStream,
+ WildcardTopicDefinition,
} from '@streampipes/platform-services';
import { EditorService } from '../../services/editor.service';
import { DialogService, PanelType } from '@streampipes/shared-ui';
@@ -42,148 +49,183 @@ import { Subscription } from 'rxjs';
import { JsplumbFactoryService } from '../../services/jsplumb-factory.service';
@Component({
- selector: 'pipeline-element-options',
- templateUrl: './pipeline-element-options.component.html',
- styleUrls: ['./pipeline-element-options.component.css']
+ selector: 'sp-pipeline-element-options',
+ templateUrl: './pipeline-element-options.component.html',
+ styleUrls: ['./pipeline-element-options.component.css'],
})
export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
+ recommendationsAvailable: any = false;
+ possibleElements: PipelineElementUnion[];
+ recommendedElements: PipelineElementUnion[];
+ recommendationsShown: any = false;
+ pipelineElementCssType: string;
+ isDataSource: boolean;
+
+ @Input()
+ currentMouseOverElement: string;
+
+ @Input()
+ pipelineElementId: string;
+
+ @Input()
+ pipelineValid: boolean;
+
+ @Input()
+ internalId: string;
+
+ @Input()
+ pipelineElement: PipelineElementConfig;
+
+ @Input()
+ rawPipelineModel: PipelineElementConfig[];
+
+ @Input()
+ allElements: PipelineElementUnion[];
+
+ @Output()
+ delete: EventEmitter<PipelineElementConfig> =
+ new EventEmitter<PipelineElementConfig>();
+
+ @Output()
+ customize: EventEmitter<PipelineElementConfig> =
+ new EventEmitter<PipelineElementConfig>();
+
+ pipelineElementConfiguredObservable: Subscription;
+
+ JsplumbBridge: JsplumbBridge;
+
+ constructor(
+ private objectProvider: ObjectProvider,
+ private pipelineElementRecommendationService: PipelineElementRecommendationService,
+ private dialogService: DialogService,
+ private editorService: EditorService,
+ private jsplumbFactoryService: JsplumbFactoryService,
+ private jsplumbService: JsplumbService,
+ private pipelineValidationService: PipelineValidationService,
+ private restApi: RestApi,
+ ) {
+ this.recommendationsAvailable = false;
+ this.possibleElements = [];
+ this.recommendedElements = [];
+ this.recommendationsShown = false;
+ this.JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(false);
+ }
+
+ ngOnInit() {
+ this.pipelineElementConfiguredObservable =
+ this.editorService.pipelineElementConfigured$.subscribe(
+ pipelineElementDomId => {
+ this.pipelineElement.settings.openCustomize = false;
+ this.restApi.updateCachedPipeline(this.rawPipelineModel);
+ if (
+ pipelineElementDomId ===
+ this.pipelineElement.payload.dom &&
+ !(
+ this.pipelineElement.payload instanceof
+ DataSinkInvocation
+ )
+ ) {
+ this.initRecs(this.pipelineElement.payload.dom);
+ }
+ },
+ );
+ this.pipelineElementCssType = this.pipelineElement.type;
+
+ this.isDataSource =
+ this.pipelineElement.type === 'stream' ||
+ this.pipelineElement.type === 'set';
+
+ if (
+ this.isDataSource ||
+ (this.pipelineElement.payload instanceof DataProcessorInvocation &&
+ this.pipelineElement.settings.completed ===
+ PipelineElementConfigurationStatus.OK)
+ ) {
+ this.initRecs(this.pipelineElement.payload.dom);
+ }
+ }
+
+ removeElement(pipelineElement: PipelineElementConfig) {
+ this.delete.emit(pipelineElement);
+ }
+
+ customizeElement(pipelineElement: PipelineElementConfig) {
+ this.customize.emit(pipelineElement);
+ }
+
+ openHelpDialog() {
+ this.editorService.openHelpDialog(this.pipelineElement.payload);
+ }
+
+ openCustomizeStreamDialog() {
+ // this.EditorDialogManager.showCustomizeStreamDialog(this.pipelineElement.payload);
+ }
+
+ initRecs(pipelineElementDomId) {
+ const clonedModel: PipelineElementConfig[] = cloneDeep(
+ this.rawPipelineModel,
+ );
+ const currentPipeline = this.objectProvider.makePipeline(clonedModel);
+ this.editorService
+ .recommendPipelineElement(currentPipeline, pipelineElementDomId)
+ .subscribe(result => {
+ if (result.success) {
+ this.possibleElements = cloneDeep(
+ this.pipelineElementRecommendationService.collectPossibleElements(
+ this.allElements,
+ result.possibleElements,
+ ),
+ );
+ this.recommendedElements = cloneDeep(
+ this.pipelineElementRecommendationService.populateRecommendedList(
+ this.allElements,
+ result.recommendedElements,
+ ),
+ );
+ this.recommendationsAvailable = true;
+ }
+ });
+ }
+
+ openPossibleElementsDialog() {
+ const dialogRef = this.dialogService.open(CompatibleElementsComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Compatible Elements',
+ data: {
+ rawPipelineModel: this.rawPipelineModel,
+ possibleElements: this.possibleElements,
+ pipelineElementDomId: this.pipelineElement.payload.dom,
+ },
+ });
+
+ dialogRef.afterClosed().subscribe(c => {});
+ }
+
+ showRecommendations(e) {
+ this.recommendationsShown = !this.recommendationsShown;
+ e.stopPropagation();
+ }
+
+ isRootElement() {
+ return (
+ this.JsplumbBridge.getConnections({
+ source: document.getElementById(
+ this.pipelineElement.payload.dom,
+ ),
+ }).length === 0
+ );
+ }
+
+ isWildcardTopic() {
+ console.log(this.pipelineElement);
+ return (
+ (this.pipelineElement.payload as SpDataStream).eventGrounding
+ .transportProtocols[0].topicDefinition instanceof
+ WildcardTopicDefinition
+ );
+ }
- recommendationsAvailable: any = false;
- possibleElements: PipelineElementUnion[];
- recommendedElements: PipelineElementUnion[];
- recommendationsShown: any = false;
- pipelineElementCssType: string;
- isDataSource: boolean;
-
- @Input()
- currentMouseOverElement: string;
-
- @Input()
- pipelineElementId: string;
-
- @Input()
- pipelineValid: boolean;
-
- @Input()
- internalId: string;
-
- @Input()
- pipelineElement: PipelineElementConfig;
-
- @Input()
- rawPipelineModel: PipelineElementConfig[];
-
- @Input()
- allElements: PipelineElementUnion[];
-
- @Output()
- delete: EventEmitter<PipelineElementConfig> = new EventEmitter<PipelineElementConfig>();
-
- @Output()
- customize: EventEmitter<PipelineElementConfig> = new EventEmitter<PipelineElementConfig>();
-
- pipelineElementConfiguredObservable: Subscription;
-
- JsplumbBridge: JsplumbBridge;
-
- constructor(private objectProvider: ObjectProvider,
- private pipelineElementRecommendationService: PipelineElementRecommendationService,
- private dialogService: DialogService,
- private editorService: EditorService,
- private jsplumbFactoryService: JsplumbFactoryService,
- private jsplumbService: JsplumbService,
- private pipelineValidationService: PipelineValidationService,
- private restApi: RestApi) {
- this.recommendationsAvailable = false;
- this.possibleElements = [];
- this.recommendedElements = [];
- this.recommendationsShown = false;
- this.JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(false);
- }
-
- ngOnInit() {
- this.pipelineElementConfiguredObservable = this.editorService.pipelineElementConfigured$.subscribe(pipelineElementDomId => {
- this.pipelineElement.settings.openCustomize = false;
- this.restApi.updateCachedPipeline(this.rawPipelineModel);
- if (pipelineElementDomId === this.pipelineElement.payload.dom && ! (this.pipelineElement.payload instanceof DataSinkInvocation)) {
- this.initRecs(this.pipelineElement.payload.dom);
- }
- });
- this.pipelineElementCssType = this.pipelineElement.type;
-
- this.isDataSource = this.pipelineElement.type === 'stream' || this.pipelineElement.type === 'set';
-
- if (this.isDataSource ||
- (this.pipelineElement.payload instanceof DataProcessorInvocation && this.pipelineElement.settings.completed === PipelineElementConfigurationStatus.OK)) {
- this.initRecs(this.pipelineElement.payload.dom);
+ ngOnDestroy(): void {
+ this.pipelineElementConfiguredObservable.unsubscribe();
}
- }
-
- removeElement(pipelineElement: PipelineElementConfig) {
- this.delete.emit(pipelineElement);
- }
-
- customizeElement(pipelineElement: PipelineElementConfig) {
- this.customize.emit(pipelineElement);
- }
-
- openHelpDialog() {
- this.editorService.openHelpDialog(this.pipelineElement.payload);
- }
-
- openCustomizeStreamDialog() {
- // this.EditorDialogManager.showCustomizeStreamDialog(this.pipelineElement.payload);
- }
-
- initRecs(pipelineElementDomId) {
- const clonedModel: PipelineElementConfig[] = cloneDeep(this.rawPipelineModel);
- const currentPipeline = this.objectProvider.makePipeline(clonedModel);
- this.editorService.recommendPipelineElement(currentPipeline, pipelineElementDomId).subscribe((result) => {
- if (result.success) {
- this.possibleElements =
- cloneDeep(this.pipelineElementRecommendationService.collectPossibleElements(this.allElements, result.possibleElements));
- this.recommendedElements =
- cloneDeep(this.pipelineElementRecommendationService.populateRecommendedList(this.allElements, result.recommendedElements));
- this.recommendationsAvailable = true;
- }
- });
- }
-
- openPossibleElementsDialog() {
- const dialogRef = this.dialogService.open(CompatibleElementsComponent, {
- panelType: PanelType.SLIDE_IN_PANEL,
- title: 'Compatible Elements',
- data: {
- 'rawPipelineModel': this.rawPipelineModel,
- 'possibleElements': this.possibleElements,
- 'pipelineElementDomId': this.pipelineElement.payload.dom
- }
- });
-
- dialogRef.afterClosed().subscribe(c => {
-
- });
- }
-
- showRecommendations(e) {
- this.recommendationsShown = !this.recommendationsShown;
- e.stopPropagation();
- }
-
- isRootElement() {
- return this.JsplumbBridge.getConnections({source: document.getElementById(this.pipelineElement.payload.dom)}).length === 0;
- }
-
- isWildcardTopic() {
- console.log(this.pipelineElement);
- return (this.pipelineElement
- .payload as SpDataStream)
- .eventGrounding
- .transportProtocols[0]
- .topicDefinition instanceof WildcardTopicDefinition;
- }
-
- ngOnDestroy(): void {
- this.pipelineElementConfiguredObservable.unsubscribe();
- }
}
diff --git a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
index a2cf510de..306b9f582 100644
--- a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
+++ b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.html
@@ -17,16 +17,23 @@
-->
<div class="data-preview">
- <div *ngIf="!runtimeData" fxFlex="100" fxLayout="column" fxLayoutAlign="center center">
+ <div
+ *ngIf="!runtimeData"
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ >
<mat-spinner [diameter]="20" color="accent"></mat-spinner>
<span class="preview-table mt-10">Waiting for live data...</span>
</div>
<table class="row-border hover preview-table" *ngIf="runtimeData">
<tbody id="preview-data-rows-id">
- <tr *ngFor="let item of runtimeData | keyvalue" class="preview-row">
- <td><b>{{item.key}}</b></td>
- <td>{{item.value}}</td>
- </tr>
+ <tr *ngFor="let item of runtimeData | keyvalue" class="preview-row">
+ <td>
+ <b>{{ item.key }}</b>
+ </td>
+ <td>{{ item.value }}</td>
+ </tr>
</tbody>
</table>
</div>
diff --git a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
index 691742f3f..bf2c8f643 100644
--- a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
+++ b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.scss
@@ -17,31 +17,31 @@
*/
.data-preview {
- position: relative;
- left: 0px;
- top: 120px;
- width: 250px;
- height: 120px;
- background: var(--color-bg-dialog);
- overflow: auto;
- border: 1px solid gray;
- box-shadow: 0.175em 0.175em 0 0 rgba(15, 28, 63, 0.125);
- z-index:50;
+ position: relative;
+ left: 0px;
+ top: 120px;
+ width: 250px;
+ height: 120px;
+ background: var(--color-bg-dialog);
+ overflow: auto;
+ border: 1px solid gray;
+ box-shadow: 0.175em 0.175em 0 0 rgba(15, 28, 63, 0.125);
+ z-index: 50;
}
.preview-table {
- font-size:9pt;
+ font-size: 9pt;
}
.mt-10 {
- margin-top: 10px;
+ margin-top: 10px;
}
-.preview-row, .preview-table {
- background: var(--color-bg-dialog);
+.preview-row,
+.preview-table {
+ background: var(--color-bg-dialog);
}
.dataTable tbody tr:hover {
- background: var(--color-bg-1);
+ background: var(--color-bg-1);
}
-
diff --git a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
index e4501f842..8e57fc405 100644
--- a/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-preview/pipeline-element-preview.component.ts
@@ -16,53 +16,53 @@
*
*/
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
import { EditorService } from '../../services/editor.service';
@Component({
- selector: 'pipeline-element-preview',
- templateUrl: './pipeline-element-preview.component.html',
- styleUrls: ['./pipeline-element-preview.component.scss']
+ selector: 'sp-pipeline-element-preview',
+ templateUrl: './pipeline-element-preview.component.html',
+ styleUrls: ['./pipeline-element-preview.component.scss'],
})
-export class PipelineElementPreviewComponent implements OnInit, OnDestroy {
+export class PipelineElementPreviewComponent implements OnInit {
+ @Input()
+ previewId: string;
- @Input()
- previewId: string;
+ @Input()
+ pipelineElementDomId: string;
- @Input()
- pipelineElementDomId: string;
+ runtimeData: ReadonlyMap<string, unknown>;
- runtimeData: ReadonlyMap<string, unknown>;
+ runtimeDataError = false;
+ timer: any;
- runtimeDataError = false;
- timer: any;
+ constructor(private editorService: EditorService) {}
- constructor(private editorService: EditorService) {
+ ngOnInit(): void {
+ this.getLatestRuntimeInfo();
+ }
- }
-
- ngOnInit(): void {
- this.getLatestRuntimeInfo();
- }
-
- ngOnDestroy(): void {
- }
-
- getLatestRuntimeInfo() {
- this.editorService.getPipelinePreviewResult(this.previewId, this.pipelineElementDomId).subscribe(data => {
- if (data) {
- this.runtimeDataError = false;
- if (!(Object.keys(data).length === 0 && data.constructor === Object)) {
- this.runtimeData = data;
- }
-
- this.timer = setTimeout(() => {
- this.getLatestRuntimeInfo();
- }, 1000);
- } else {
- this.runtimeDataError = true;
- }
- });
- }
+ getLatestRuntimeInfo() {
+ this.editorService
+ .getPipelinePreviewResult(this.previewId, this.pipelineElementDomId)
+ .subscribe(data => {
+ if (data) {
+ this.runtimeDataError = false;
+ if (
+ !(
+ Object.keys(data).length === 0 &&
+ data.constructor === Object
+ )
+ ) {
+ this.runtimeData = data;
+ }
+ this.timer = setTimeout(() => {
+ this.getLatestRuntimeInfo();
+ }, 1000);
+ } else {
+ this.runtimeDataError = true;
+ }
+ });
+ }
}
diff --git a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
index 09748fce6..aab5cdff7 100644
--- a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
+++ b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
@@ -16,16 +16,35 @@
~
-->
-<div *ngIf="recommendationsPrepared && recommendedElements.length > 0" class="cv-wrapper" [ngClass]="recommendationsShown ? 'opened-nav' : ''">
+<div
+ *ngIf="recommendationsPrepared && recommendedElements.length > 0"
+ class="cv-wrapper"
+ [ngClass]="recommendationsShown ? 'opened-nav' : ''"
+>
<ul>
- <li *ngFor="let recommendedElement of recommendedElements" style="z-index: -1;"
- [style]="recommendedElement.layoutSettings.skewStyle">
- <a [style]="recommendedElement.layoutSettings.unskewStyle" [ngClass]="recommendedElement.layoutSettings.type" (click)="create(recommendedElement)" *ngIf="recommendedElement.name">
+ <li
+ *ngFor="let recommendedElement of recommendedElements"
+ style="z-index: -1"
+ [style]="recommendedElement.layoutSettings.skewStyle"
+ >
+ <a
+ [style]="recommendedElement.layoutSettings.unskewStyle"
+ [ngClass]="recommendedElement.layoutSettings.type"
+ (click)="create(recommendedElement)"
+ *ngIf="recommendedElement.name"
+ >
</a>
- <div (click)="create(recommendedElement)" [style]="recommendedElement.layoutSettings.unskewStyleLabel"
- [ngClass]="recommendedElement.layoutSettings.type">
- <pipeline-element [iconSize]="'small'" [pipelineElement]="recommendedElement" *ngIf="recommendedElement.name">
- </pipeline-element>
+ <div
+ (click)="create(recommendedElement)"
+ [style]="recommendedElement.layoutSettings.unskewStyleLabel"
+ [ngClass]="recommendedElement.layoutSettings.type"
+ >
+ <sp-pipeline-element
+ [iconSize]="'small'"
+ [pipelineElement]="recommendedElement"
+ *ngIf="recommendedElement.name"
+ >
+ </sp-pipeline-element>
</div>
</li>
</ul>
diff --git a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
index 32fe6c453..92a2752ad 100644
--- a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
@@ -17,139 +17,171 @@
*/
import { JsplumbService } from '../../services/jsplumb.service';
-import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
-import { InvocablePipelineElementUnion, PipelineElementConfig } from '../../model/editor.model';
+import { Component, Input } from '@angular/core';
+import {
+ InvocablePipelineElementUnion,
+ PipelineElementConfig,
+} from '../../model/editor.model';
import { DataProcessorInvocation } from '@streampipes/platform-services';
import { SafeCss } from '../../utils/style-sanitizer';
@Component({
- selector: 'pipeline-element-recommendation',
- templateUrl: './pipeline-element-recommendation.component.html',
- styleUrls: ['./pipeline-element-recommendation.component.scss']
+ selector: 'sp-pipeline-element-recommendation',
+ templateUrl: './pipeline-element-recommendation.component.html',
+ styleUrls: ['./pipeline-element-recommendation.component.scss'],
})
-export class PipelineElementRecommendationComponent implements OnInit, AfterViewInit {
-
- @Input()
- recommendationsShown: boolean;
-
- @Input()
- rawPipelineModel: PipelineElementConfig[];
-
- @Input()
- pipelineElementDomId: string;
-
- _recommendedElements: any;
-
- recommendationsPrepared = false;
-
- constructor(private jsplumbService: JsplumbService,
- public safeCss: SafeCss) {
-
- }
-
- ngOnInit() {
- }
-
- ngAfterViewInit(): void {
-
- }
-
- prepareStyles(recommendedElements) {
- recommendedElements.forEach((element, index) => {
- this.setLayoutSettings(element, index, recommendedElements);
- });
- }
-
- setLayoutSettings(element, index, recommendedElements) {
- element.layoutSettings = {
- skewStyle: element.name ? this.getSkewStyle(index, recommendedElements) : {'opacity': 0},
- unskewStyle: this.getUnskewStyle(element, index, recommendedElements),
- unskewStyleLabel: this.getUnskewStyleLabel(index, recommendedElements),
- type: element instanceof DataProcessorInvocation ? 'sepa' : 'action'
- };
- }
-
- create(recommendedElement: InvocablePipelineElementUnion) {
- this.recommendationsShown = false;
- this.jsplumbService.createElement(this.rawPipelineModel, recommendedElement, this.pipelineElementDomId);
- }
-
- getUnskewStyle(recommendedElement, index, recommendedElements) {
- const unskew = -(this.getSkew(recommendedElements));
- const rotate = -(90 - (this.getSkew(recommendedElements) / 2));
-
- return 'transform: skew(' + unskew + 'deg)' + ' rotate(' + rotate + 'deg)' + ' scale(1);'
- + 'background-color: ' + this.getBackgroundColor(recommendedElement, index);
- }
-
- getBackgroundColor(recommendedElement, index) {
- let alpha = (recommendedElement.weight < 0.2 ? 0.2 : (recommendedElement.weight - 0.2));
- alpha = Math.round((alpha * 10)) / 10;
- const rgb = recommendedElement instanceof DataProcessorInvocation ? this.getSepaColor(index) : this.getActionColor(index);
- return 'rgba(' + rgb + ',' + alpha + ')';
- }
-
- getSepaColor(index) {
- return (index % 2 === 0) ? '0, 150, 136' : '0, 164, 150';
- }
-
- getActionColor(index) {
- return (index % 2 === 0) ? '63, 81, 181' : '79, 101, 230';
- }
-
- getSkewStyle(index, recommendedElements) {
- // transform: rotate(72deg) skew(18deg);
- const skew = this.getSkew(recommendedElements);
- const rotate = (index + 1) * this.getAngle(recommendedElements);
-
- return 'transform: rotate(' + rotate + 'deg) skew(' + skew + 'deg);';
- }
-
- getUnskewStyleLabel(index, recommendedElements) {
- const unskew = -(this.getSkew(recommendedElements));
- const rotate = (index + 1) * this.getAngle(recommendedElements);
- const unrotate = -360 + (rotate * -1);
-
- return 'transform: skew(' + unskew + 'deg)' + ' rotate(' + unrotate + 'deg)' + ' scale(1);'
- + 'z-index: -1;'
- + 'margin-left: 50%;'
- + 'margin-top: 50%;'
- + 'position: absolute;'
- + 'background: white;'
- + 'height: 50px;'
- + 'width: 50px;'
- + 'font-size: 16px;'
- + 'text-align: center;'
- + 'line-height: 50px;'
- + 'top: 0px;';
- }
-
- getSkew(recommendedElements) {
- return (90 - this.getAngle(recommendedElements));
- }
-
- getAngle(recommendedElements) {
- return (360 / recommendedElements.length);
- }
-
- fillRemainingItems(recommendedElements) {
- if (recommendedElements.length < 6) {
- for (let i = recommendedElements.length; i < 6; i++) {
- const element = {fakeElement: true, weight: 0};
- recommendedElements.push(element);
- }
+export class PipelineElementRecommendationComponent {
+ @Input()
+ recommendationsShown: boolean;
+
+ @Input()
+ rawPipelineModel: PipelineElementConfig[];
+
+ @Input()
+ pipelineElementDomId: string;
+
+ _recommendedElements: any;
+
+ recommendationsPrepared = false;
+
+ constructor(
+ private jsplumbService: JsplumbService,
+ public safeCss: SafeCss,
+ ) {}
+
+ prepareStyles(recommendedElements) {
+ recommendedElements.forEach((element, index) => {
+ this.setLayoutSettings(element, index, recommendedElements);
+ });
+ }
+
+ setLayoutSettings(element, index, recommendedElements) {
+ element.layoutSettings = {
+ skewStyle: element.name
+ ? this.getSkewStyle(index, recommendedElements)
+ : { opacity: 0 },
+ unskewStyle: this.getUnskewStyle(
+ element,
+ index,
+ recommendedElements,
+ ),
+ unskewStyleLabel: this.getUnskewStyleLabel(
+ index,
+ recommendedElements,
+ ),
+ type:
+ element instanceof DataProcessorInvocation ? 'sepa' : 'action',
+ };
+ }
+
+ create(recommendedElement: InvocablePipelineElementUnion) {
+ this.recommendationsShown = false;
+ this.jsplumbService.createElement(
+ this.rawPipelineModel,
+ recommendedElement,
+ this.pipelineElementDomId,
+ );
+ }
+
+ getUnskewStyle(recommendedElement, index, recommendedElements) {
+ const unskew = -this.getSkew(recommendedElements);
+ const rotate = -(90 - this.getSkew(recommendedElements) / 2);
+
+ return (
+ 'transform: skew(' +
+ unskew +
+ 'deg)' +
+ ' rotate(' +
+ rotate +
+ 'deg)' +
+ ' scale(1);' +
+ 'background-color: ' +
+ this.getBackgroundColor(recommendedElement, index)
+ );
+ }
+
+ getBackgroundColor(recommendedElement, index) {
+ let alpha =
+ recommendedElement.weight < 0.2
+ ? 0.2
+ : recommendedElement.weight - 0.2;
+ alpha = Math.round(alpha * 10) / 10;
+ const rgb =
+ recommendedElement instanceof DataProcessorInvocation
+ ? this.getSepaColor(index)
+ : this.getActionColor(index);
+ return 'rgba(' + rgb + ',' + alpha + ')';
+ }
+
+ getSepaColor(index) {
+ return index % 2 === 0 ? '0, 150, 136' : '0, 164, 150';
+ }
+
+ getActionColor(index) {
+ return index % 2 === 0 ? '63, 81, 181' : '79, 101, 230';
+ }
+
+ getSkewStyle(index, recommendedElements) {
+ // transform: rotate(72deg) skew(18deg);
+ const skew = this.getSkew(recommendedElements);
+ const rotate = (index + 1) * this.getAngle(recommendedElements);
+
+ return 'transform: rotate(' + rotate + 'deg) skew(' + skew + 'deg);';
+ }
+
+ getUnskewStyleLabel(index, recommendedElements) {
+ const unskew = -this.getSkew(recommendedElements);
+ const rotate = (index + 1) * this.getAngle(recommendedElements);
+ const unrotate = -360 + rotate * -1;
+
+ return (
+ 'transform: skew(' +
+ unskew +
+ 'deg)' +
+ ' rotate(' +
+ unrotate +
+ 'deg)' +
+ ' scale(1);' +
+ 'z-index: -1;' +
+ 'margin-left: 50%;' +
+ 'margin-top: 50%;' +
+ 'position: absolute;' +
+ 'background: white;' +
+ 'height: 50px;' +
+ 'width: 50px;' +
+ 'font-size: 16px;' +
+ 'text-align: center;' +
+ 'line-height: 50px;' +
+ 'top: 0px;'
+ );
+ }
+
+ getSkew(recommendedElements) {
+ return 90 - this.getAngle(recommendedElements);
+ }
+
+ getAngle(recommendedElements) {
+ return 360 / recommendedElements.length;
+ }
+
+ fillRemainingItems(recommendedElements) {
+ if (recommendedElements.length < 6) {
+ for (let i = recommendedElements.length; i < 6; i++) {
+ const element = { fakeElement: true, weight: 0 };
+ recommendedElements.push(element);
+ }
+ }
+ }
+
+ get recommendedElements() {
+ return this._recommendedElements;
+ }
+
+ @Input()
+ set recommendedElements(recommendedElements: any) {
+ this.fillRemainingItems(recommendedElements);
+ this.prepareStyles(recommendedElements);
+ this._recommendedElements = recommendedElements;
+ this.recommendationsPrepared = true;
}
- }
-
- get recommendedElements() {
- return this._recommendedElements;
- }
-
- @Input()
- set recommendedElements(recommendedElements: any) {
- this.fillRemainingItems(recommendedElements);
- this.prepareStyles(recommendedElements);
- this._recommendedElements = recommendedElements;
- this.recommendationsPrepared = true;
- }
}
diff --git a/ui/src/app/editor/components/pipeline-element/pipeline-element.component.html b/ui/src/app/editor/components/pipeline-element/pipeline-element.component.html
index 60a30dc8f..0ef40b4a2 100644
--- a/ui/src/app/editor/components/pipeline-element/pipeline-element.component.html
+++ b/ui/src/app/editor/components/pipeline-element/pipeline-element.component.html
@@ -16,7 +16,10 @@
~
-->
-<img [src]="image" *ngIf="showImage" style="{{iconSizeCss()}}">
-<span *ngIf="!showImage" [ngClass]="iconStandSize ? 'text-small<' : 'element-text-icon'">
- {{iconText}}
+<img [src]="image" *ngIf="showImage" style="{{ iconSizeCss() }}" />
+<span
+ *ngIf="!showImage"
+ [ngClass]="iconStandSize ? 'text-small<' : 'element-text-icon'"
+>
+ {{ iconText }}
</span>
diff --git a/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts b/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts
index f6ac75cb0..b987980ec 100644
--- a/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts
+++ b/ui/src/app/editor/components/pipeline-element/pipeline-element.component.ts
@@ -16,20 +16,18 @@
*
*/
-import { Component, Input, OnInit, } from '@angular/core';
+import { Component, Input } from '@angular/core';
import { RestApi } from '../../../services/rest-api.service';
import { ElementIconText } from '../../../services/get-element-icon-text.service';
import { PipelineElementUnion } from '../../model/editor.model';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-
@Component({
- selector: 'pipeline-element',
+ selector: 'sp-pipeline-element',
templateUrl: './pipeline-element.component.html',
- styleUrls: ['./pipeline-element.component.css']
+ styleUrls: ['./pipeline-element.component.css'],
})
-export class PipelineElementComponent implements OnInit {
-
+export class PipelineElementComponent {
showImage: any;
iconText: any;
@@ -47,19 +45,20 @@ export class PipelineElementComponent implements OnInit {
iconUrl: any;
image: SafeUrl;
- constructor(private restApi: RestApi,
- private elementIconText: ElementIconText,
- private sanitizer: DomSanitizer) {
-
- }
-
- ngOnInit(): void {
-
- }
+ constructor(
+ private restApi: RestApi,
+ private elementIconText: ElementIconText,
+ private sanitizer: DomSanitizer,
+ ) {}
checkImageAvailable() {
- if (this.pipelineElement.includesAssets && this.pipelineElement.includedAssets.indexOf('icon.png') > -1) {
- this.image = this.sanitizer.bypassSecurityTrustUrl(this.makeAssetIconUrl());
+ if (
+ this.pipelineElement.includesAssets &&
+ this.pipelineElement.includedAssets.indexOf('icon.png') > -1
+ ) {
+ this.image = this.sanitizer.bypassSecurityTrustUrl(
+ this.makeAssetIconUrl(),
+ );
this.showImage = true;
} else {
this.showImage = false;
@@ -89,8 +88,9 @@ export class PipelineElementComponent implements OnInit {
@Input()
set pipelineElement(pipelineElement: PipelineElementUnion) {
this.pipelineElement_ = pipelineElement;
- this.iconText = this.elementIconText.getElementIconText(this.pipelineElement.name);
+ this.iconText = this.elementIconText.getElementIconText(
+ this.pipelineElement.name,
+ );
this.checkImageAvailable();
}
-
}
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html b/ui/src/app/editor/components/pipeline/pipeline.component.html
index 5a2def9d0..7cd3a3206 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.html
@@ -15,50 +15,92 @@
~ limitations under the License.
~
-->
-<div [attr.data-jtk-managed]="pipelineElement.payload.dom"
- id="{{pipelineElement.payload.dom}}"
- style="{{getElementCss(pipelineElement.settings)}}"
- (click)="updateOptionsClick(pipelineElement.payload.dom)"
- (mouseenter)="updateMouseover(pipelineElement.payload.dom)"
- (mouseleave)="updateMouseover('')"
- *ngFor="let pipelineElement of rawPipelineModel | enabledPipelineElement" class="sp-no-pan">
- <div style="z-index:5;"
- [ngClass]="getElementCssClasses(pipelineElement)">
- <div class="pipeline-element-progress-container sp-fade" *ngIf="pipelineElement.settings.loadingStatus">
- <mat-spinner [mode]="'indeterminate'" class="pipeline-element-progress" [diameter]="40"
- color="accent"></mat-spinner>
+<div
+ [attr.data-jtk-managed]="pipelineElement.payload.dom"
+ id="{{ pipelineElement.payload.dom }}"
+ style="{{ getElementCss(pipelineElement.settings) }}"
+ (click)="updateOptionsClick(pipelineElement.payload.dom)"
+ (mouseenter)="updateMouseover(pipelineElement.payload.dom)"
+ (mouseleave)="updateMouseover('')"
+ *ngFor="let pipelineElement of rawPipelineModel | enabledPipelineElement"
+ class="sp-no-pan"
+>
+ <div style="z-index: 5" [ngClass]="getElementCssClasses(pipelineElement)">
+ <div
+ class="pipeline-element-progress-container sp-fade"
+ *ngIf="pipelineElement.settings.loadingStatus"
+ >
+ <mat-spinner
+ [mode]="'indeterminate'"
+ class="pipeline-element-progress"
+ [diameter]="40"
+ color="accent"
+ ></mat-spinner>
</div>
- <div class="pipeline-element-loading-container sp-fade-opacity"
- *ngIf="pipelineElement.settings.loadingStatus"></div>
- <div class="pipeline-element-configuration-status {{pipelineElement.type === 'stream' ? 'pi-stream' : 'pi-processor'}}" *ngIf="!preview">
- <i class="material-icons pipeline-element-configuration-invalid-icon" *ngIf="pipelineElement.settings.completed === 3">
+ <div
+ class="pipeline-element-loading-container sp-fade-opacity"
+ *ngIf="pipelineElement.settings.loadingStatus"
+ ></div>
+ <div
+ class="pipeline-element-configuration-status {{
+ pipelineElement.type === 'stream' ? 'pi-stream' : 'pi-processor'
+ }}"
+ *ngIf="!preview"
+ >
+ <i
+ class="material-icons pipeline-element-configuration-invalid-icon"
+ *ngIf="pipelineElement.settings.completed === 3"
+ >
warning
</i>
- <i class="material-icons pipeline-element-configuration-modified-icon" *ngIf="pipelineElement.settings.completed === 2">
+ <i
+ class="material-icons pipeline-element-configuration-modified-icon"
+ *ngIf="pipelineElement.settings.completed === 2"
+ >
warning
</i>
- <i class="material-icons pipeline-element-configuration-ok-icon" *ngIf="pipelineElement.settings.completed === 1">
+ <i
+ class="material-icons pipeline-element-configuration-ok-icon"
+ *ngIf="pipelineElement.settings.completed === 1"
+ >
check_circle
</i>
</div>
- <pipeline-element [pipelineElement]="pipelineElement.payload" [preview]="preview"></pipeline-element>
+ <sp-pipeline-element
+ [pipelineElement]="pipelineElement.payload"
+ [preview]="preview"
+ ></sp-pipeline-element>
</div>
- <pipeline-element-options *ngIf="!preview"
- (delete)="handleDeleteOption($event)"
- (customize)="showCustomizeDialog($event)"
- [currentMouseOverElement]="currentMouseOverElement"
- [pipelineValid]="pipelineValid"
- [allElements]="allElements"
- [pipelineElement]="pipelineElement"
- [rawPipelineModel]="rawPipelineModel"
- [pipelineElementId]="(pipelineElement.type == 'stream' || pipelineElement.type == 'set') ? pipelineElement.payload.elementId : pipelineElement.payload.belongsTo"
- [internalId]="pipelineElement.payload.dom"
- [attr.data-cy]="'sp-pe-menu-' + pipelineElement.payload.name.toLowerCase().replaceAll(' ', '_')">
- </pipeline-element-options>
- <pipeline-element-preview
- *ngIf="previewModeActive && (pipelinePreview.supportedPipelineElementDomIds.indexOf(pipelineElement.payload.dom) > -1)"
- [previewId]="pipelinePreview.previewId"
- [pipelineElementDomId]="pipelineElement.payload.dom">
-
- </pipeline-element-preview>
+ <sp-pipeline-element-options
+ *ngIf="!preview"
+ (delete)="handleDeleteOption($event)"
+ (customize)="showCustomizeDialog($event)"
+ [currentMouseOverElement]="currentMouseOverElement"
+ [pipelineValid]="pipelineValid"
+ [allElements]="allElements"
+ [pipelineElement]="pipelineElement"
+ [rawPipelineModel]="rawPipelineModel"
+ [pipelineElementId]="
+ pipelineElement.type === 'stream' || pipelineElement.type === 'set'
+ ? pipelineElement.payload.elementId
+ : pipelineElement.payload.belongsTo
+ "
+ [internalId]="pipelineElement.payload.dom"
+ [attr.data-cy]="
+ 'sp-pe-menu-' +
+ pipelineElement.payload.name.toLowerCase().replaceAll(' ', '_')
+ "
+ >
+ </sp-pipeline-element-options>
+ <sp-pipeline-element-preview
+ *ngIf="
+ previewModeActive &&
+ pipelinePreview.supportedPipelineElementDomIds.indexOf(
+ pipelineElement.payload.dom
+ ) > -1
+ "
+ [previewId]="pipelinePreview.previewId"
+ [pipelineElementDomId]="pipelineElement.payload.dom"
+ >
+ </sp-pipeline-element-preview>
</div>
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index 4e6598b13..fd9ce2c44 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -21,505 +21,684 @@ import { JsplumbService } from '../../services/jsplumb.service';
import { PipelineEditorService } from '../../services/pipeline-editor.service';
import { JsplumbBridge } from '../../services/jsplumb-bridge.service';
import { ShepherdService } from '../../../services/tour/shepherd.service';
-import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
import {
- InvocablePipelineElementUnion,
- PipelineElementConfig,
- PipelineElementConfigurationStatus,
- PipelineElementUnion
+ Component,
+ EventEmitter,
+ Input,
+ NgZone,
+ OnDestroy,
+ OnInit,
+ Output,
+} from '@angular/core';
+import {
+ InvocablePipelineElementUnion,
+ PipelineElementConfig,
+ PipelineElementConfigurationStatus,
+ PipelineElementUnion,
} from '../../model/editor.model';
import {
- CustomOutputStrategy,
- DataProcessorInvocation,
- DataSinkInvocation,
- Notification,
- Pipeline,
- PipelineCanvasMetadata,
- PipelineEdgeValidation,
- PipelineModificationMessage,
- PipelinePreviewModel,
- SpDataSet,
- SpDataStream
+ CustomOutputStrategy,
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ Notification,
+ Pipeline,
+ PipelineCanvasMetadata,
+ PipelineEdgeValidation,
+ PipelineModificationMessage,
+ PipelinePreviewModel,
+ SpDataSet,
+ SpDataStream,
} from '@streampipes/platform-services';
import { ObjectProvider } from '../../services/object-provider.service';
import { CustomizeComponent } from '../../dialog/customize/customize.component';
-import { DialogService, PanelType, ConfirmDialogComponent } from '@streampipes/shared-ui';
+import {
+ DialogService,
+ PanelType,
+ ConfirmDialogComponent,
+} from '@streampipes/shared-ui';
import { EditorService } from '../../services/editor.service';
import { MatchingErrorComponent } from '../../dialog/matching-error/matching-error.component';
import { MatDialog } from '@angular/material/dialog';
import { forkJoin } from 'rxjs';
import { JsplumbFactoryService } from '../../services/jsplumb-factory.service';
import { PipelinePositioningService } from '../../services/pipeline-positioning.service';
-import { EVENT_CONNECTION_ABORT, EVENT_CONNECTION_DRAG } from '@jsplumb/browser-ui';
-import { EVENT_CONNECTION, EVENT_CONNECTION_DETACHED, EVENT_CONNECTION_MOVED } from '@jsplumb/core';
+import {
+ EVENT_CONNECTION_ABORT,
+ EVENT_CONNECTION_DRAG,
+} from '@jsplumb/browser-ui';
+import {
+ EVENT_CONNECTION,
+ EVENT_CONNECTION_DETACHED,
+ EVENT_CONNECTION_MOVED,
+} from '@jsplumb/core';
import { PipelineStyleService } from '../../services/pipeline-style.service';
@Component({
- selector: 'pipeline',
- templateUrl: './pipeline.component.html',
- styleUrls: ['./pipeline.component.css']
+ selector: 'sp-pipeline',
+ templateUrl: './pipeline.component.html',
+ styleUrls: ['./pipeline.component.css'],
})
export class PipelineComponent implements OnInit, OnDestroy {
+ @Input()
+ pipelineValid: boolean;
- @Input()
- pipelineValid: boolean;
-
- @Input()
- canvasId: string;
-
- @Input()
- rawPipelineModel: PipelineElementConfig[];
-
- @Input()
- allElements: PipelineElementUnion[];
-
- @Input()
- preview: boolean;
-
- @Input()
- pipelineCached: boolean;
-
- @Output()
- pipelineCachedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
-
- @Input()
- pipelineCacheRunning: boolean;
-
- @Input()
- pipelineCanvasMetadata: PipelineCanvasMetadata;
-
- @Output()
- pipelineCacheRunningChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
-
- currentMouseOverElement: string;
- currentPipelineModel: Pipeline;
- idCounter: any;
- currentZoomLevel: any;
-
- canvasWidth = '100%';
- canvasHeight = '100%';
-
- JsplumbBridge: JsplumbBridge;
-
- previewModeActive = false;
- pipelinePreview: PipelinePreviewModel;
-
- constructor(private jsplumbService: JsplumbService,
- private pipelineEditorService: PipelineEditorService,
- private pipelinePositioningService: PipelinePositioningService,
- private jsplumbFactoryService: JsplumbFactoryService,
- private objectProvider: ObjectProvider,
- private editorService: EditorService,
- private shepherdService: ShepherdService,
- private pipelineStyleService: PipelineStyleService,
- private pipelineValidationService: PipelineValidationService,
- private dialogService: DialogService,
- private dialog: MatDialog,
- private ngZone: NgZone) {
- this.currentMouseOverElement = '';
- this.currentPipelineModel = new Pipeline();
- this.idCounter = 0;
-
- this.currentZoomLevel = 1;
- }
-
- ngOnInit() {
- this.JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(this.preview);
- this.initAssembly();
- this.initPlumb();
- }
-
- validatePipeline() {
- setTimeout(() => {
- this.ngZone.run(() => {
- this.pipelineValid = this.pipelineValidationService
- .isValidPipeline(this.rawPipelineModel.filter(pe => !(pe.settings.disabled)), this.preview);
- });
- });
- }
-
- ngOnDestroy() {
- this.deletePipelineElementPreview(false);
- this.jsplumbFactoryService.destroy(this.preview);
- }
-
- updateMouseover(elementId) {
- this.currentMouseOverElement = elementId;
- }
-
- updateOptionsClick(elementId) {
- this.currentMouseOverElement = this.currentMouseOverElement === elementId ? '' : elementId;
- }
-
- getElementCss(currentPipelineElementSettings) {
- return 'position:absolute;'
- + (this.preview ? 'width:75px;' : 'width:90px;')
- + (this.preview ? 'height:75px;' : 'height:90px;')
- + 'left: ' + currentPipelineElementSettings.position.x + 'px; '
- + 'top: ' + currentPipelineElementSettings.position.y + 'px; ';
- }
-
- getElementCssClasses(currentPipelineElement) {
- return currentPipelineElement.type + ' ' + (currentPipelineElement.settings.openCustomize ? '' : '')
- + currentPipelineElement.settings.connectable + ' '
- + currentPipelineElement.settings.displaySettings;
- }
-
- isStreamInPipeline() {
- return this.isInPipeline('stream');
- }
-
- isSetInPipeline() {
- return this.isInPipeline('set');
- }
-
- isInPipeline(type) {
- return this.rawPipelineModel.some(x => (x.type === type && !(x.settings.disabled)));
- }
-
- showMixedStreamAlert() {
- this.dialog.open(ConfirmDialogComponent, {
- width: '500px',
- data: {
- 'title': 'Currently, it is not possible to mix data streams and data sets in a single pipeline.',
- 'confirmAndCancel': false,
- 'okTitle': 'Ok',
- },
- });
- }
-
- findPipelineElementByElementId(elementId: string) {
- return this.allElements.find(a => a.elementId === elementId);
- }
-
- initAssembly() {
- ($('#assembly') as any).droppable({
- tolerance: 'fit',
- drop: (element, ui) => {
- const pipelineElementId = ui.draggable.data('pe');
- const pipelineElement: PipelineElementUnion = this.findPipelineElementByElementId(pipelineElementId);
- if (ui.draggable.hasClass('draggable-pipeline-element')) {
- this.editorService.makePipelineAssemblyEmpty(false);
- const newElementId = pipelineElement.elementId + ':' + this.jsplumbService.makeId(5);
- const pipelineElementConfig = this.jsplumbService.createNewPipelineElementConfig(pipelineElement,
- this.pipelineEditorService.getCoordinates(ui, this.currentZoomLevel),
- false,
- false,
- newElementId);
- if ((this.isStreamInPipeline() && pipelineElementConfig.type === 'set') ||
- this.isSetInPipeline() && pipelineElementConfig.type === 'stream') {
- this.showMixedStreamAlert();
- } else {
- this.rawPipelineModel.push(pipelineElementConfig);
- if (pipelineElementConfig.type === 'set') {
- setTimeout(() => {
- this.editorService.updateDataSet(pipelineElementConfig.payload).subscribe(data => {
- (pipelineElementConfig.payload as SpDataSet).eventGrounding = data.eventGrounding;
- (pipelineElementConfig.payload as SpDataSet).datasetInvocationId = data.invocationId;
- this.jsplumbService.dataStreamDropped(
- pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload as SpDataSet,
- true,
- false);
- });
- }, 0);
- } else if (pipelineElementConfig.type === 'stream') {
- this.checkTopicModel(pipelineElementConfig);
- } else if (pipelineElementConfig.type === 'sepa') {
- setTimeout(() => {
- this.jsplumbService.dataProcessorDropped(
- pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload as DataProcessorInvocation,
- true,
- false
- );
- }, 10);
- } else if (pipelineElementConfig.type === 'action') {
- setTimeout(() => {
- this.jsplumbService.dataSinkDropped(
- pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload as DataSinkInvocation,
- true,
- false);
- }, 10);
- }
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.trigger('drop-' + pipelineElementConfig.type);
- }
- }
+ @Input()
+ canvasId: string;
+
+ @Input()
+ rawPipelineModel: PipelineElementConfig[];
+
+ @Input()
+ allElements: PipelineElementUnion[];
+
+ @Input()
+ preview: boolean;
+
+ @Input()
+ pipelineCached: boolean;
+
+ @Output()
+ pipelineCachedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+ @Input()
+ pipelineCacheRunning: boolean;
+
+ @Input()
+ pipelineCanvasMetadata: PipelineCanvasMetadata;
+
+ @Output()
+ pipelineCacheRunningChanged: EventEmitter<boolean> =
+ new EventEmitter<boolean>();
+
+ currentMouseOverElement: string;
+ currentPipelineModel: Pipeline;
+ idCounter: any;
+ currentZoomLevel: any;
+
+ canvasWidth = '100%';
+ canvasHeight = '100%';
+
+ JsplumbBridge: JsplumbBridge;
+
+ previewModeActive = false;
+ pipelinePreview: PipelinePreviewModel;
+
+ constructor(
+ private jsplumbService: JsplumbService,
+ private pipelineEditorService: PipelineEditorService,
+ private pipelinePositioningService: PipelinePositioningService,
+ private jsplumbFactoryService: JsplumbFactoryService,
+ private objectProvider: ObjectProvider,
+ private editorService: EditorService,
+ private shepherdService: ShepherdService,
+ private pipelineStyleService: PipelineStyleService,
+ private pipelineValidationService: PipelineValidationService,
+ private dialogService: DialogService,
+ private dialog: MatDialog,
+ private ngZone: NgZone,
+ ) {
+ this.currentMouseOverElement = '';
+ this.currentPipelineModel = new Pipeline();
+ this.idCounter = 0;
+
+ this.currentZoomLevel = 1;
+ }
+
+ ngOnInit() {
+ this.JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(
+ this.preview,
+ );
+ this.initAssembly();
+ this.initPlumb();
+ }
+
+ validatePipeline() {
+ setTimeout(() => {
+ this.ngZone.run(() => {
+ this.pipelineValid =
+ this.pipelineValidationService.isValidPipeline(
+ this.rawPipelineModel.filter(
+ pe => !pe.settings.disabled,
+ ),
+ this.preview,
+ );
+ });
+ });
+ }
+
+ ngOnDestroy() {
+ this.deletePipelineElementPreview(false);
+ this.jsplumbFactoryService.destroy(this.preview);
+ }
+
+ updateMouseover(elementId) {
+ this.currentMouseOverElement = elementId;
+ }
+
+ updateOptionsClick(elementId) {
+ this.currentMouseOverElement =
+ this.currentMouseOverElement === elementId ? '' : elementId;
+ }
+
+ getElementCss(currentPipelineElementSettings) {
+ return (
+ 'position:absolute;' +
+ (this.preview ? 'width:75px;' : 'width:90px;') +
+ (this.preview ? 'height:75px;' : 'height:90px;') +
+ 'left: ' +
+ currentPipelineElementSettings.position.x +
+ 'px; ' +
+ 'top: ' +
+ currentPipelineElementSettings.position.y +
+ 'px; '
+ );
+ }
+
+ getElementCssClasses(currentPipelineElement) {
+ return (
+ currentPipelineElement.type +
+ ' ' +
+ (currentPipelineElement.settings.openCustomize ? '' : '') +
+ currentPipelineElement.settings.connectable +
+ ' ' +
+ currentPipelineElement.settings.displaySettings
+ );
+ }
+
+ isStreamInPipeline() {
+ return this.isInPipeline('stream');
+ }
+
+ isSetInPipeline() {
+ return this.isInPipeline('set');
+ }
+
+ isInPipeline(type) {
+ return this.rawPipelineModel.some(
+ x => x.type === type && !x.settings.disabled,
+ );
+ }
+
+ showMixedStreamAlert() {
+ this.dialog.open(ConfirmDialogComponent, {
+ width: '500px',
+ data: {
+ title: 'Currently, it is not possible to mix data streams and data sets in a single pipeline.',
+ confirmAndCancel: false,
+ okTitle: 'Ok',
+ },
+ });
+ }
+
+ findPipelineElementByElementId(elementId: string) {
+ return this.allElements.find(a => a.elementId === elementId);
+ }
+
+ initAssembly() {
+ ($('#assembly') as any).droppable({
+ tolerance: 'fit',
+ drop: (element, ui) => {
+ const pipelineElementId = ui.draggable.data('pe');
+ const pipelineElement: PipelineElementUnion =
+ this.findPipelineElementByElementId(pipelineElementId);
+ if (ui.draggable.hasClass('draggable-pipeline-element')) {
+ this.editorService.makePipelineAssemblyEmpty(false);
+ const newElementId =
+ pipelineElement.elementId +
+ ':' +
+ this.jsplumbService.makeId(5);
+ const pipelineElementConfig =
+ this.jsplumbService.createNewPipelineElementConfig(
+ pipelineElement,
+ this.pipelineEditorService.getCoordinates(
+ ui,
+ this.currentZoomLevel,
+ ),
+ false,
+ false,
+ newElementId,
+ );
+ if (
+ (this.isStreamInPipeline() &&
+ pipelineElementConfig.type === 'set') ||
+ (this.isSetInPipeline() &&
+ pipelineElementConfig.type === 'stream')
+ ) {
+ this.showMixedStreamAlert();
+ } else {
+ this.rawPipelineModel.push(pipelineElementConfig);
+ if (pipelineElementConfig.type === 'set') {
+ setTimeout(() => {
+ this.editorService
+ .updateDataSet(
+ pipelineElementConfig.payload,
+ )
+ .subscribe(data => {
+ (
+ pipelineElementConfig.payload as SpDataSet
+ ).eventGrounding = data.eventGrounding;
+ (
+ pipelineElementConfig.payload as SpDataSet
+ ).datasetInvocationId =
+ data.invocationId;
+ this.jsplumbService.dataStreamDropped(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload as SpDataSet,
+ true,
+ false,
+ );
+ });
+ }, 0);
+ } else if (pipelineElementConfig.type === 'stream') {
+ this.checkTopicModel(pipelineElementConfig);
+ } else if (pipelineElementConfig.type === 'sepa') {
+ setTimeout(() => {
+ this.jsplumbService.dataProcessorDropped(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload as DataProcessorInvocation,
+ true,
+ false,
+ );
+ }, 10);
+ } else if (pipelineElementConfig.type === 'action') {
+ setTimeout(() => {
+ this.jsplumbService.dataSinkDropped(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload as DataSinkInvocation,
+ true,
+ false,
+ );
+ }, 10);
+ }
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.trigger(
+ 'drop-' + pipelineElementConfig.type,
+ );
+ }
+ }
+ }
+ this.JsplumbBridge.repaintEverything();
+ this.validatePipeline();
+ this.triggerPipelineCacheUpdate();
+ },
+ });
+ }
+
+ checkTopicModel(pipelineElementConfig: PipelineElementConfig) {
+ console.log(pipelineElementConfig);
+ setTimeout(() => {
+ this.jsplumbService.dataStreamDropped(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload as SpDataStream,
+ true,
+ false,
+ );
+ }, 10);
+
+ const streamDescription = pipelineElementConfig.payload as SpDataStream;
+ if (
+ streamDescription.eventGrounding.transportProtocols[0]
+ .topicDefinition['@class'] ===
+ 'org.apache.streampipes.model.grounding.WildcardTopicDefinition'
+ ) {
+ // this.EditorDialogManager.showCustomizeStreamDialog(streamDescription);
+ }
+ }
+
+ handleDeleteOption(pipelineElement: PipelineElementConfig) {
+ this.JsplumbBridge.removeAllEndpoints(pipelineElement.payload.dom);
+ this.rawPipelineModel = this.rawPipelineModel.filter(
+ pe => !(pe.payload.dom === pipelineElement.payload.dom),
+ );
+ if (this.rawPipelineModel.every(pe => pe.settings.disabled)) {
+ this.editorService.makePipelineAssemblyEmpty(true);
}
this.JsplumbBridge.repaintEverything();
this.validatePipeline();
this.triggerPipelineCacheUpdate();
- }
- });
- }
-
- checkTopicModel(pipelineElementConfig: PipelineElementConfig) {
- console.log(pipelineElementConfig);
- setTimeout(() => {
- this.jsplumbService.dataStreamDropped(pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload as SpDataStream,
- true,
- false);
- }, 10);
-
- const streamDescription = pipelineElementConfig.payload as SpDataStream;
- if (streamDescription
- .eventGrounding
- .transportProtocols[0]
- .topicDefinition['@class'] === 'org.apache.streampipes.model.grounding.WildcardTopicDefinition') {
- // this.EditorDialogManager.showCustomizeStreamDialog(streamDescription);
}
- }
- handleDeleteOption(pipelineElement: PipelineElementConfig) {
- this.JsplumbBridge.removeAllEndpoints(pipelineElement.payload.dom);
- this.rawPipelineModel = this.rawPipelineModel.filter(pe => !(pe.payload.dom === pipelineElement.payload.dom));
- if (this.rawPipelineModel.every(pe => pe.settings.disabled)) {
- this.editorService.makePipelineAssemblyEmpty(true);
+ initPlumb() {
+ this.JsplumbBridge.unbind(EVENT_CONNECTION);
+
+ this.JsplumbBridge.bind(EVENT_CONNECTION_MOVED, info => {
+ const pe = this.objectProvider.findElement(
+ info.newTargetEndpoint.elementId,
+ this.rawPipelineModel,
+ );
+ const oldPe = this.objectProvider.findElement(
+ info.originalTargetEndpoint.elementId,
+ this.rawPipelineModel,
+ );
+ (oldPe.payload as InvocablePipelineElementUnion).configured = false;
+ (pe.payload as InvocablePipelineElementUnion).configured = false;
+ });
+
+ this.JsplumbBridge.bind(EVENT_CONNECTION_DETACHED, info => {
+ const pe = this.objectProvider.findElement(
+ info.targetEndpoint.elementId,
+ this.rawPipelineModel,
+ );
+ (pe.payload as InvocablePipelineElementUnion).configured = false;
+ pe.settings.openCustomize = true;
+ info.targetEndpoint.setType('empty');
+ this.JsplumbBridge.repaintEverything();
+ this.validatePipeline();
+ });
+
+ this.JsplumbBridge.bind(EVENT_CONNECTION_DRAG, () => {
+ this.JsplumbBridge.selectEndpoints().each(endpoint => {
+ if (endpoint.isTarget && endpoint.connections.length === 0) {
+ endpoint.setType('highlight');
+ }
+ });
+ this.JsplumbBridge.repaintEverything();
+ });
+ this.JsplumbBridge.bind(EVENT_CONNECTION_ABORT, () => {
+ this.JsplumbBridge.selectEndpoints().each(endpoint => {
+ if (endpoint.isTarget && endpoint.connections.length === 0) {
+ endpoint.setType('empty');
+ }
+ });
+ this.JsplumbBridge.repaintEverything();
+ });
+
+ this.JsplumbBridge.bind(EVENT_CONNECTION, info => {
+ const pe = this.objectProvider.findElement(
+ info.target.id,
+ this.rawPipelineModel,
+ );
+ if (pe.settings.openCustomize) {
+ this.currentPipelineModel = this.objectProvider.makePipeline(
+ this.rawPipelineModel,
+ );
+ pe.settings.loadingStatus = true;
+ this.objectProvider
+ .updatePipeline(this.currentPipelineModel)
+ .subscribe(
+ pipelineModificationMessage => {
+ pe.settings.loadingStatus = false;
+ const edgeValidations =
+ this.getTargetEdgeValidations(
+ pipelineModificationMessage,
+ info.target.id,
+ );
+ const currentConnectionValid =
+ this.currentConnectionValid(
+ pe,
+ edgeValidations,
+ );
+ if (currentConnectionValid) {
+ this.validatePipeline();
+ this.modifyPipeline(
+ pipelineModificationMessage,
+ );
+ if (
+ this.jsplumbService.isFullyConnected(
+ pe,
+ this.preview,
+ )
+ ) {
+ const payload =
+ pe.payload as InvocablePipelineElementUnion;
+ if (
+ (payload.staticProperties &&
+ payload.staticProperties.length >
+ 0) ||
+ this.isCustomOutput(pe)
+ ) {
+ this.showCustomizeDialog(pe);
+ } else {
+ (
+ pe.payload as InvocablePipelineElementUnion
+ ).configured = true;
+ this.pipelineStyleService.updatePeConfigurationStatus(
+ pe,
+ PipelineElementConfigurationStatus.OK,
+ );
+ this.announceConfiguredElement(pe);
+ this.triggerPipelineCacheUpdate();
+ }
+ }
+ } else {
+ this.JsplumbBridge.detach(info.connection);
+ const invalidEdgeValidation =
+ edgeValidations.find(
+ e => e.sourceId === info.source.id,
+ );
+ if (invalidEdgeValidation) {
+ this.showMatchingErrorDialog(
+ invalidEdgeValidation.status
+ .notifications,
+ );
+ }
+ }
+ },
+ status => {
+ pe.settings.loadingStatus = false;
+ this.showErrorDialog(
+ status.error.title,
+ status.error.description,
+ );
+ },
+ );
+ }
+ });
+
+ window.onresize = () => {
+ this.JsplumbBridge.repaintEverything();
+ };
+ }
+
+ currentConnectionValid(
+ pe: PipelineElementConfig,
+ targetEdges: PipelineEdgeValidation[],
+ ) {
+ const entity = pe.payload as InvocablePipelineElementUnion;
+ return targetEdges.every(
+ e => e.status.validationStatusType === 'COMPLETE',
+ );
}
- this.JsplumbBridge.repaintEverything();
- this.validatePipeline();
- this.triggerPipelineCacheUpdate();
- }
-
- initPlumb() {
- this.JsplumbBridge.unbind(EVENT_CONNECTION);
-
- this.JsplumbBridge.bind(EVENT_CONNECTION_MOVED, (info) => {
- const pe = this.objectProvider.findElement(info.newTargetEndpoint.elementId, this.rawPipelineModel);
- const oldPe = this.objectProvider.findElement(info.originalTargetEndpoint.elementId, this.rawPipelineModel);
- (oldPe.payload as InvocablePipelineElementUnion).configured = false;
- (pe.payload as InvocablePipelineElementUnion).configured = false;
- });
-
- this.JsplumbBridge.bind(EVENT_CONNECTION_DETACHED, (info) => {
- const pe = this.objectProvider.findElement(info.targetEndpoint.elementId, this.rawPipelineModel);
- (pe.payload as InvocablePipelineElementUnion).configured = false;
- pe.settings.openCustomize = true;
- info.targetEndpoint.setType('empty');
- this.JsplumbBridge.repaintEverything();
- this.validatePipeline();
- });
-
- this.JsplumbBridge.bind(EVENT_CONNECTION_DRAG, () => {
- this.JsplumbBridge.selectEndpoints().each(endpoint => {
- if (endpoint.isTarget && endpoint.connections.length === 0) {
- endpoint.setType('highlight');
+
+ getTargetEdgeValidations(
+ pipelineModificationMessage: PipelineModificationMessage,
+ targetDomId: string,
+ ): PipelineEdgeValidation[] {
+ const edgeValidations = pipelineModificationMessage.edgeValidations;
+ return edgeValidations.filter(ev => ev.targetId === targetDomId);
+ }
+
+ modifyPipeline(pm: PipelineModificationMessage) {
+ if (pm.pipelineModifications) {
+ pm.pipelineModifications.forEach(modification => {
+ const id = modification.domId;
+ if (id !== 'undefined') {
+ const pe = this.objectProvider.findElement(
+ id,
+ this.rawPipelineModel,
+ );
+ if (modification.staticProperties) {
+ (
+ pe.payload as InvocablePipelineElementUnion
+ ).staticProperties = modification.staticProperties;
+ }
+ if (pe.payload instanceof DataProcessorInvocation) {
+ if (modification.outputStrategies) {
+ (
+ pe.payload as DataProcessorInvocation
+ ).outputStrategies = modification.outputStrategies;
+ }
+ if (modification.outputStream) {
+ (
+ pe.payload as DataProcessorInvocation
+ ).outputStream = modification.outputStream;
+ }
+ }
+ if (modification.inputStreams) {
+ (
+ pe.payload as InvocablePipelineElementUnion
+ ).inputStreams = modification.inputStreams;
+ }
+ if (modification.validationInfos.length > 0) {
+ this.pipelineStyleService.updatePeConfigurationStatus(
+ pe,
+ PipelineElementConfigurationStatus.MODIFIED,
+ );
+ }
+ }
+ });
}
- });
- this.JsplumbBridge.repaintEverything();
- });
- this.JsplumbBridge.bind(EVENT_CONNECTION_ABORT, () => {
- this.JsplumbBridge.selectEndpoints().each(endpoint => {
- if (endpoint.isTarget && endpoint.connections.length === 0) {
- endpoint.setType('empty');
+ if (pm.edgeValidations) {
+ this.pipelineStyleService.updateAllConnectorStyles(
+ pm.edgeValidations,
+ );
+ this.pipelineStyleService.updateAllEndpointStyles(
+ pm.edgeValidations,
+ );
+ this.JsplumbBridge.repaintEverything();
}
- });
- this.JsplumbBridge.repaintEverything();
- });
-
- this.JsplumbBridge.bind(EVENT_CONNECTION, (info) => {
- const pe = this.objectProvider.findElement(info.target.id, this.rawPipelineModel);
- if (pe.settings.openCustomize) {
- this.currentPipelineModel = this.objectProvider.makePipeline(this.rawPipelineModel);
- pe.settings.loadingStatus = true;
- this.objectProvider.updatePipeline(this.currentPipelineModel)
- .subscribe(pipelineModificationMessage => {
- pe.settings.loadingStatus = false;
- const edgeValidations = this.getTargetEdgeValidations(pipelineModificationMessage, info.target.id);
- const currentConnectionValid = this.currentConnectionValid(pe, edgeValidations);
- if (currentConnectionValid) {
- this.validatePipeline();
- this.modifyPipeline(pipelineModificationMessage);
- if (this.jsplumbService.isFullyConnected(pe, this.preview)) {
- const payload = pe.payload as InvocablePipelineElementUnion;
- if ((payload.staticProperties && payload.staticProperties.length > 0) || this.isCustomOutput(pe)) {
- this.showCustomizeDialog(pe);
- } else {
- (pe.payload as InvocablePipelineElementUnion).configured = true;
- this.pipelineStyleService.updatePeConfigurationStatus(pe, PipelineElementConfigurationStatus.OK);
- this.announceConfiguredElement(pe);
- this.triggerPipelineCacheUpdate();
+ }
+
+ isCustomOutput(pe) {
+ let custom = false;
+ if (pe.payload instanceof DataProcessorInvocation) {
+ pe.payload.outputStrategies.forEach(strategy => {
+ if (strategy instanceof CustomOutputStrategy) {
+ custom = true;
}
- }
- } else {
- this.JsplumbBridge.detach(info.connection);
- const invalidEdgeValidation = edgeValidations.find(e => e.sourceId === info.source.id);
- if (invalidEdgeValidation) {
- this.showMatchingErrorDialog(invalidEdgeValidation.status.notifications);
- }
- }
- }, status => {
- pe.settings.loadingStatus = false;
- this.showErrorDialog(status.error.title, status.error.description);
- });
- }
- });
-
- window.onresize = () => {
- this.JsplumbBridge.repaintEverything();
- };
- }
-
- currentConnectionValid(pe: PipelineElementConfig,
- targetEdges: PipelineEdgeValidation[]) {
- const entity = pe.payload as InvocablePipelineElementUnion;
- return targetEdges.every(e => e.status.validationStatusType === 'COMPLETE');
- }
-
- getTargetEdgeValidations(pipelineModificationMessage: PipelineModificationMessage,
- targetDomId: string): PipelineEdgeValidation[] {
- const edgeValidations = pipelineModificationMessage.edgeValidations;
- return edgeValidations.filter(ev => ev.targetId === targetDomId);
- }
-
- modifyPipeline(pm: PipelineModificationMessage) {
- if (pm.pipelineModifications) {
- pm.pipelineModifications.forEach(modification => {
- const id = modification.domId;
- if (id !== 'undefined') {
- const pe = this.objectProvider.findElement(id, this.rawPipelineModel);
- if (modification.staticProperties) {
- (pe.payload as InvocablePipelineElementUnion).staticProperties = modification.staticProperties;
- }
- if (pe.payload instanceof DataProcessorInvocation) {
- if (modification.outputStrategies) {
- (pe.payload as DataProcessorInvocation).outputStrategies = modification.outputStrategies;
- }
- if (modification.outputStream) {
- (pe.payload as DataProcessorInvocation).outputStream = modification.outputStream;
- }
- }
- if (modification.inputStreams) {
- (pe.payload as InvocablePipelineElementUnion).inputStreams = modification.inputStreams;
- }
- if (modification.validationInfos.length > 0) {
- this.pipelineStyleService.updatePeConfigurationStatus(pe, PipelineElementConfigurationStatus.MODIFIED);
- }
+ });
}
- });
+ return custom;
}
- if (pm.edgeValidations) {
- this.pipelineStyleService.updateAllConnectorStyles(pm.edgeValidations);
- this.pipelineStyleService.updateAllEndpointStyles(pm.edgeValidations);
- this.JsplumbBridge.repaintEverything();
+
+ triggerPipelineCacheUpdate() {
+ setTimeout(() => {
+ this.pipelineCacheRunning = true;
+ this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning);
+ this.pipelinePositioningService.collectPipelineElementPositions(
+ this.pipelineCanvasMetadata,
+ this.rawPipelineModel,
+ );
+ const updateCachedPipeline =
+ this.editorService.updateCachedPipeline(this.rawPipelineModel);
+ const updateCachedCanvasMetadata =
+ this.editorService.updateCachedCanvasMetadata(
+ this.pipelineCanvasMetadata,
+ );
+ forkJoin([
+ updateCachedPipeline,
+ updateCachedCanvasMetadata,
+ ]).subscribe(() => {
+ this.pipelineCacheRunning = false;
+ this.pipelineCacheRunningChanged.emit(
+ this.pipelineCacheRunning,
+ );
+ this.pipelineCached = true;
+ this.pipelineCachedChanged.emit(this.pipelineCached);
+ });
+ });
}
- }
-
- isCustomOutput(pe) {
- let custom = false;
- if (pe.payload instanceof DataProcessorInvocation) {
- pe.payload.outputStrategies.forEach(strategy => {
- if (strategy instanceof CustomOutputStrategy) {
- custom = true;
- }
- });
+
+ showErrorDialog(title, description) {
+ this.dialog.open(ConfirmDialogComponent, {
+ width: '500px',
+ data: {
+ title: title,
+ subtitle: description,
+ okTitle: 'Ok',
+ confirmAndCancel: false,
+ },
+ });
}
- return custom;
- }
-
- triggerPipelineCacheUpdate() {
- setTimeout(() => {
- this.pipelineCacheRunning = true;
- this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning);
- this.pipelinePositioningService.collectPipelineElementPositions(this.pipelineCanvasMetadata, this.rawPipelineModel);
- const updateCachedPipeline = this.editorService.updateCachedPipeline(this.rawPipelineModel);
- const updateCachedCanvasMetadata = this.editorService.updateCachedCanvasMetadata(this.pipelineCanvasMetadata);
- forkJoin([updateCachedPipeline, updateCachedCanvasMetadata]).subscribe(() => {
- this.pipelineCacheRunning = false;
- this.pipelineCacheRunningChanged.emit(this.pipelineCacheRunning);
- this.pipelineCached = true;
- this.pipelineCachedChanged.emit(this.pipelineCached);
- });
- });
- }
-
- showErrorDialog(title, description) {
- this.dialog.open(ConfirmDialogComponent, {
- width: '500px',
- data: {
- 'title': title,
- 'subtitle': description,
- 'okTitle': 'Ok',
- 'confirmAndCancel': false
- },
- });
- }
-
- showMatchingErrorDialog(notifications: Notification[]) {
- this.dialogService.open(MatchingErrorComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Invalid Connection',
- data: {
- 'notifications': notifications
- }
- });
- }
-
- showCustomizeDialog(pipelineElementConfig: PipelineElementConfig) {
- const dialogRef = this.dialogService.open(CustomizeComponent, {
- panelType: PanelType.SLIDE_IN_PANEL,
- title: 'Customize ' + pipelineElementConfig.payload.name,
- width: '50vw',
- data: {
- 'pipelineElement': pipelineElementConfig,
- }
- });
-
- dialogRef.afterClosed().subscribe(c => {
- if (c) {
- pipelineElementConfig.settings.openCustomize = false;
- (pipelineElementConfig.payload as InvocablePipelineElementUnion).configured = true;
- this.currentPipelineModel = this.objectProvider.makePipeline(this.rawPipelineModel);
- this.objectProvider.updatePipeline(this.currentPipelineModel).subscribe(pm => {
- this.modifyPipeline(pm);
- // if (!(pipelineElementConfig.payload instanceof DataSinkInvocation)) {
- // this.JsplumbBridge.activateEndpoint('out-' + pipelineElementConfig.payload.dom, pipelineElementConfig.settings.completed);
- // }
- this.triggerPipelineCacheUpdate();
- this.announceConfiguredElement(pipelineElementConfig);
- if (this.previewModeActive) {
- this.deletePipelineElementPreview(true);
- }
- this.validatePipeline();
+
+ showMatchingErrorDialog(notifications: Notification[]) {
+ this.dialogService.open(MatchingErrorComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Invalid Connection',
+ data: {
+ notifications: notifications,
+ },
});
- } else {
- this.validatePipeline();
- }
- });
- }
-
- announceConfiguredElement(pe: PipelineElementConfig) {
- this.editorService.announceConfiguredElement(pe.payload.dom);
- }
-
- initiatePipelineElementPreview() {
- if (!this.previewModeActive) {
- const pipeline = this.objectProvider.makePipeline(this.rawPipelineModel);
- this.editorService.initiatePipelinePreview(pipeline).subscribe(response => {
- this.pipelinePreview = response;
- this.previewModeActive = true;
- });
- } else {
- this.deletePipelineElementPreview(false);
}
- }
-
- deletePipelineElementPreview(resume: boolean) {
- if (this.previewModeActive) {
- this.editorService.deletePipelinePreviewRequest(this.pipelinePreview.previewId).subscribe(() => {
- this.previewModeActive = false;
- if (resume) {
- this.initiatePipelineElementPreview();
+
+ showCustomizeDialog(pipelineElementConfig: PipelineElementConfig) {
+ const dialogRef = this.dialogService.open(CustomizeComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: 'Customize ' + pipelineElementConfig.payload.name,
+ width: '50vw',
+ data: {
+ pipelineElement: pipelineElementConfig,
+ },
+ });
+
+ dialogRef.afterClosed().subscribe(c => {
+ if (c) {
+ pipelineElementConfig.settings.openCustomize = false;
+ (
+ pipelineElementConfig.payload as InvocablePipelineElementUnion
+ ).configured = true;
+ this.currentPipelineModel = this.objectProvider.makePipeline(
+ this.rawPipelineModel,
+ );
+ this.objectProvider
+ .updatePipeline(this.currentPipelineModel)
+ .subscribe(pm => {
+ this.modifyPipeline(pm);
+ // if (!(pipelineElementConfig.payload instanceof DataSinkInvocation)) {
+ // this.JsplumbBridge.activateEndpoint('out-' + pipelineElementConfig.payload.dom, pipelineElementConfig.settings.completed);
+ // }
+ this.triggerPipelineCacheUpdate();
+ this.announceConfiguredElement(pipelineElementConfig);
+ if (this.previewModeActive) {
+ this.deletePipelineElementPreview(true);
+ }
+ this.validatePipeline();
+ });
+ } else {
+ this.validatePipeline();
+ }
+ });
+ }
+
+ announceConfiguredElement(pe: PipelineElementConfig) {
+ this.editorService.announceConfiguredElement(pe.payload.dom);
+ }
+
+ initiatePipelineElementPreview() {
+ if (!this.previewModeActive) {
+ const pipeline = this.objectProvider.makePipeline(
+ this.rawPipelineModel,
+ );
+ this.editorService
+ .initiatePipelinePreview(pipeline)
+ .subscribe(response => {
+ this.pipelinePreview = response;
+ this.previewModeActive = true;
+ });
+ } else {
+ this.deletePipelineElementPreview(false);
+ }
+ }
+
+ deletePipelineElementPreview(resume: boolean) {
+ if (this.previewModeActive) {
+ this.editorService
+ .deletePipelinePreviewRequest(this.pipelinePreview.previewId)
+ .subscribe(() => {
+ this.previewModeActive = false;
+ if (resume) {
+ this.initiatePipelineElementPreview();
+ }
+ });
}
- });
}
- }
- triggerPipelineModification() {
- this.currentPipelineModel = this.objectProvider.makePipeline(this.rawPipelineModel);
- this.objectProvider.updatePipeline(this.currentPipelineModel).subscribe(pm => this.modifyPipeline(pm));
- }
+ triggerPipelineModification() {
+ this.currentPipelineModel = this.objectProvider.makePipeline(
+ this.rawPipelineModel,
+ );
+ this.objectProvider
+ .updatePipeline(this.currentPipelineModel)
+ .subscribe(pm => this.modifyPipeline(pm));
+ }
}
diff --git a/ui/src/app/editor/constants/editor.constants.ts b/ui/src/app/editor/constants/editor.constants.ts
index bfac71a08..8eca685a2 100644
--- a/ui/src/app/editor/constants/editor.constants.ts
+++ b/ui/src/app/editor/constants/editor.constants.ts
@@ -17,9 +17,12 @@
*/
export class EditorConstants {
-
- static readonly DATA_STREAM_IDENTIFIER = 'org.apache.streampipes.model.SpDataStream';
- static readonly DATA_SET_IDENTIFIER = 'org.apache.streampipes.model.SpDataSet';
- static readonly DATA_PROCESSOR_IDENTIFIER = 'org.apache.streampipes.model.graph.DataProcessorInvocation';
- static readonly DATA_SINK_IDENTIFIER = 'org.apache.streampipes.model.graph.DataSinkInvocation';
+ static readonly DATA_STREAM_IDENTIFIER =
+ 'org.apache.streampipes.model.SpDataStream';
+ static readonly DATA_SET_IDENTIFIER =
+ 'org.apache.streampipes.model.SpDataSet';
+ static readonly DATA_PROCESSOR_IDENTIFIER =
+ 'org.apache.streampipes.model.graph.DataProcessorInvocation';
+ static readonly DATA_SINK_IDENTIFIER =
+ 'org.apache.streampipes.model.graph.DataSinkInvocation';
}
diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
index f20d3d542..f00245a4b 100644
--- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
+++ b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.html
@@ -19,15 +19,39 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
<div fxFlex="100" fxLayout="column">
- <div *ngFor="let possibleElement of possibleElements; index as i" (click)="create(possibleElement)">
- <div fxLayout="row" class="m-10" fxLayoutAlign="start center" [style]="styles[i]" (mouseenter)="changeStyle(i, true)" (mouseleave)="changeStyle(i, false)"
- [attr.data-cy]="'sp-compatible-elements-' + possibleElement.name.toLowerCase().replaceAll(' ', '_')">
- <div class="draggable-icon-preview {{isDataProcessor(possibleElement) ? 'sepa' : 'action'}}">
- <pipeline-element [pipelineElement]="possibleElement" [iconSize]="true"></pipeline-element>
+ <div
+ *ngFor="let possibleElement of possibleElements; index as i"
+ (click)="create(possibleElement)"
+ >
+ <div
+ fxLayout="row"
+ class="m-10"
+ fxLayoutAlign="start center"
+ [style]="styles[i]"
+ (mouseenter)="changeStyle(i, true)"
+ (mouseleave)="changeStyle(i, false)"
+ [attr.data-cy]="
+ 'sp-compatible-elements-' +
+ possibleElement.name.toLowerCase().replaceAll(' ', '_')
+ "
+ >
+ <div
+ class="draggable-icon-preview {{
+ isDataProcessor(possibleElement) ? 'sepa' : 'action'
+ }}"
+ >
+ <sp-pipeline-element
+ [pipelineElement]="possibleElement"
+ [iconSize]="true"
+ ></sp-pipeline-element>
</div>
<div fxLayout="column" fxLayoutAlign="center start">
- <div class="element-name">{{ possibleElement.name }}</div>
- <div class="element-description">{{ possibleElement.description }}</div>
+ <div class="element-name">
+ {{ possibleElement.name }}
+ </div>
+ <div class="element-description">
+ {{ possibleElement.description }}
+ </div>
</div>
</div>
<mat-divider></mat-divider>
@@ -36,9 +60,8 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
-
<button mat-button mat-raised-button class="mat-basic" (click)="hide()">
Cancel
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.scss b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.scss
index 8ef9d15ce..a7fa1d497 100644
--- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.scss
+++ b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.scss
@@ -18,23 +18,16 @@
@import '../../../../scss/sp/sp-dialog.scss';
-
-
.element-name {
-
}
.element-description {
-
}
.m-10 {
- padding-top:10px;
- padding-bottom:10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
-
-
.list-item {
-
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
index 9c7a88e14..b9651c032 100644
--- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
+++ b/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
@@ -20,73 +20,81 @@ import { Component, Input, OnInit } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
import { JsplumbService } from '../../services/jsplumb.service';
import { DataProcessorInvocation } from '@streampipes/platform-services';
-import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
+import {
+ PipelineElementConfig,
+ PipelineElementUnion,
+} from '../../model/editor.model';
@Component({
- selector: 'compatible-elements',
- templateUrl: './compatible-elements.component.html',
- styleUrls: ['./compatible-elements.component.scss']
+ selector: 'sp-compatible-elements',
+ templateUrl: './compatible-elements.component.html',
+ styleUrls: ['./compatible-elements.component.scss'],
})
export class CompatibleElementsComponent implements OnInit {
-
- @Input()
- rawPipelineModel: PipelineElementConfig[];
-
- @Input()
- pipelineElementDomId: any;
-
- @Input()
- possibleElements: PipelineElementUnion[];
-
- styles: any[] = [];
-
-
- constructor(private dialogRef: DialogRef<CompatibleElementsComponent>,
- private JsPlumbService: JsplumbService) {
- // this.ElementIconText = ElementIconText;
- }
-
- ngOnInit() {
- this.possibleElements.sort((a, b) => a.name.localeCompare(b.name));
- this.possibleElements.forEach(pe => {
- this.styles.push(this.makeStandardStyle());
- });
- }
-
- create(possibleElement) {
- this.JsPlumbService.createElement(this.rawPipelineModel, possibleElement, this.pipelineElementDomId);
- this.hide();
- }
-
- iconText(elementId) {
- // return this.ElementIconText.getElementIconText(elementId);
- }
-
- hide() {
- // this.$mdDialog.hide();
- this.dialogRef.close();
- }
-
- isDataProcessor(possibleElement: PipelineElementUnion) {
- return possibleElement instanceof DataProcessorInvocation;
- }
-
- makeStandardStyle() {
- return {
- background: 'var(--color-bg-dialog)',
- cursor: 'auto'
- };
- }
-
- makeHoverStyle() {
- return {
- background: 'var(--color-bg-1)',
- cursor: 'pointer'
- };
- }
-
- changeStyle(index: number, hover: boolean) {
- hover ? this.styles[index] = this.makeHoverStyle() : this.styles[index] = this.makeStandardStyle();
- }
-
+ @Input()
+ rawPipelineModel: PipelineElementConfig[];
+
+ @Input()
+ pipelineElementDomId: any;
+
+ @Input()
+ possibleElements: PipelineElementUnion[];
+
+ styles: any[] = [];
+
+ constructor(
+ private dialogRef: DialogRef<CompatibleElementsComponent>,
+ private JsPlumbService: JsplumbService,
+ ) {
+ // this.ElementIconText = ElementIconText;
+ }
+
+ ngOnInit() {
+ this.possibleElements.sort((a, b) => a.name.localeCompare(b.name));
+ this.possibleElements.forEach(pe => {
+ this.styles.push(this.makeStandardStyle());
+ });
+ }
+
+ create(possibleElement) {
+ this.JsPlumbService.createElement(
+ this.rawPipelineModel,
+ possibleElement,
+ this.pipelineElementDomId,
+ );
+ this.hide();
+ }
+
+ iconText(elementId) {
+ // return this.ElementIconText.getElementIconText(elementId);
+ }
+
+ hide() {
+ // this.$mdDialog.hide();
+ this.dialogRef.close();
+ }
+
+ isDataProcessor(possibleElement: PipelineElementUnion) {
+ return possibleElement instanceof DataProcessorInvocation;
+ }
+
+ makeStandardStyle() {
+ return {
+ background: 'var(--color-bg-dialog)',
+ cursor: 'auto',
+ };
+ }
+
+ makeHoverStyle() {
+ return {
+ background: 'var(--color-bg-1)',
+ cursor: 'pointer',
+ };
+ }
+
+ changeStyle(index: number, hover: boolean) {
+ hover
+ ? (this.styles[index] = this.makeHoverStyle())
+ : (this.styles[index] = this.makeStandardStyle());
+ }
}
diff --git a/ui/src/app/editor/dialog/customize/customize.component.html b/ui/src/app/editor/dialog/customize/customize.component.html
index 9e5e04f3c..63b16d91c 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.html
+++ b/ui/src/app/editor/dialog/customize/customize.component.html
@@ -19,69 +19,124 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content">
<div fxFlex="100" fxLayout="column">
- <div style="border-bottom:1px solid #ccc;padding:10px;" fxLayout="row" class="sp-tab-bg">
- <div fxFlex fxLayoutAlign="start center" *ngIf="availableTemplates && availableTemplates.length > 0">
- <mat-form-field class="form-field" floatLabel="never" color="accent">
+ <div
+ style="border-bottom: 1px solid #ccc; padding: 10px"
+ fxLayout="row"
+ class="sp-tab-bg"
+ >
+ <div
+ fxFlex
+ fxLayoutAlign="start center"
+ *ngIf="availableTemplates && availableTemplates.length > 0"
+ >
+ <mat-form-field
+ class="form-field"
+ floatLabel="never"
+ color="accent"
+ >
<mat-label>Use template</mat-label>
- <mat-select (selectionChange)="loadTemplate($event)"
- [(value)]="selectedTemplate">
+ <mat-select
+ (selectionChange)="loadTemplate($event)"
+ [(value)]="selectedTemplate"
+ >
<mat-option>--</mat-option>
- <mat-option [value]="template" *ngFor="let template of availableTemplates">
- {{template.templateName}}
+ <mat-option
+ [value]="template"
+ *ngFor="let template of availableTemplates"
+ >
+ {{ template.templateName }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxFlex fxLayout="row" fxLayoutAlign="end center">
- <mat-slide-toggle [(ngModel)]="showDocumentation"
- color="accent"
- [disabled]="!pipelineElement.payload.includesAssets">
+ <mat-slide-toggle
+ [(ngModel)]="showDocumentation"
+ color="accent"
+ [disabled]="!pipelineElement.payload.includesAssets"
+ >
Show documentation
</mat-slide-toggle>
<span> </span>
- <mat-slide-toggle [(ngModel)]="displayRecommended" color="accent">
+ <mat-slide-toggle
+ [(ngModel)]="displayRecommended"
+ color="accent"
+ >
Show only recommended settings
</mat-slide-toggle>
</div>
</div>
<div fxFlex="100" fxLayout="row">
- <div fxFlex="{{_showDocumentation ? 50: 100}}">
+ <div fxFlex="{{ _showDocumentation ? 50 : 100 }}">
<div fxLayout="column" *ngIf="!templateMode">
- <div fxFlex="100" fxLayout="column" class="customize-section p-15">
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ class="customize-section p-15"
+ >
<form [formGroup]="parentForm" fxFlex="100">
- <app-static-property *ngFor="let config of cachedPipelineElement.staticProperties"
- [staticProperty]="config"
- [pipelineElement]="cachedPipelineElement"
- [displayRecommended]="displayRecommended"
- [staticProperties]="cachedPipelineElement.staticProperties"
- [eventSchemas]="eventSchemas"
- [parentForm]="parentForm"
- [fieldName]="config.internalName"
- [completedStaticProperty]="completedStaticProperty"
- (updateEmitter)="triggerUpdate($event)"
- (validateEmitter)="validConfiguration($event)">
+ <app-static-property
+ *ngFor="
+ let config of cachedPipelineElement.staticProperties
+ "
+ [staticProperty]="config"
+ [pipelineElement]="cachedPipelineElement"
+ [displayRecommended]="displayRecommended"
+ [staticProperties]="
+ cachedPipelineElement.staticProperties
+ "
+ [eventSchemas]="eventSchemas"
+ [parentForm]="parentForm"
+ [fieldName]="config.internalName"
+ [completedStaticProperty]="
+ completedStaticProperty
+ "
+ (updateEmitter)="triggerUpdate($event)"
+ (validateEmitter)="
+ validConfiguration($event)
+ "
+ >
</app-static-property>
<div *ngIf="isDataProcessor">
- <output-strategy
- *ngFor="let outputStrategy of cachedPipelineElement.outputStrategies"
- [parentForm]="parentForm"
- [outputStrategy]="outputStrategy"
- [selectedElement]="cachedPipelineElement">
- </output-strategy>
+ <sp-output-strategy
+ *ngFor="
+ let outputStrategy of cachedPipelineElement.outputStrategies
+ "
+ [parentForm]="parentForm"
+ [outputStrategy]="outputStrategy"
+ [selectedElement]="
+ cachedPipelineElement
+ "
+ >
+ </sp-output-strategy>
</div>
</form>
</div>
</div>
<div fxLayout="column" *ngIf="templateMode">
- <pipeline-element-template-config [staticProperties]="cachedPipelineElement.staticProperties"
- [template]="template" [templateConfigs]="templateConfigs" [appId]="cachedPipelineElement.appId">
+ <pipeline-element-template-config
+ [staticProperties]="
+ cachedPipelineElement.staticProperties
+ "
+ [template]="template"
+ [templateConfigs]="templateConfigs"
+ [appId]="cachedPipelineElement.appId"
+ >
</pipeline-element-template-config>
</div>
</div>
- <div fxFlex="50" *ngIf="showDocumentation"
- style="padding-left:10px;border-left: 2px solid rgb(204, 204, 204);">
- <pipeline-element-documentation [useStyling]="false"
- [appId]="pipelineElement.payload.appId"></pipeline-element-documentation>
+ <div
+ fxFlex="50"
+ *ngIf="showDocumentation"
+ style="
+ padding-left: 10px;
+ border-left: 2px solid rgb(204, 204, 204);
+ "
+ >
+ <sp-pipeline-element-documentation
+ [useStyling]="false"
+ [appId]="pipelineElement.payload.appId"
+ ></sp-pipeline-element-documentation>
</div>
</div>
</div>
@@ -89,26 +144,55 @@
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
<div fxLayout="row" *ngIf="!templateMode">
- <button mat-button mat-raised-button color="accent" (click)="save()" style="margin-right:10px;"
- [disabled]="!(formValid)"
- data-cy="sp-element-configuration-save">
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="save()"
+ style="margin-right: 10px"
+ [disabled]="!formValid"
+ data-cy="sp-element-configuration-save"
+ >
<i class="material-icons">save</i><span> Save</span>
</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ >
Cancel
</button>
<div fxFlex></div>
- <button mat-button mat-raised-button color="accent" [disabled]="!(formValid)"
- (click)="triggerTemplateMode()">
- <i class="material-icons">add_circle_outline</i><span> Create template</span>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ [disabled]="!formValid"
+ (click)="triggerTemplateMode()"
+ >
+ <i class="material-icons">add_circle_outline</i
+ ><span> Create template</span>
</button>
</div>
<div fxLayout="row" *ngIf="templateMode">
- <button mat-button mat-raised-button color="accent" (click)="saveTemplate()" style="margin-right:10px;"
- [disabled]="!(formValid)">
- <i class="material-icons">save</i><span> Save template</span>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="saveTemplate()"
+ style="margin-right: 10px"
+ [disabled]="!formValid"
+ >
+ <i class="material-icons">save</i
+ ><span> Save template</span>
</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="cancelTemplateMode()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="cancelTemplateMode()"
+ >
Cancel
</button>
</div>
diff --git a/ui/src/app/editor/dialog/customize/customize.component.scss b/ui/src/app/editor/dialog/customize/customize.component.scss
index d613b95a3..6802b6687 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.scss
+++ b/ui/src/app/editor/dialog/customize/customize.component.scss
@@ -19,12 +19,9 @@
@import '../../../../scss/sp/sp-dialog.scss';
.form-field .mat-form-field-wrapper {
- margin-bottom: -1.25em;
+ margin-bottom: -1.25em;
}
-
.form-field .mat-form-field-infix {
- border-top: 0;
+ border-top: 0;
}
-
-
diff --git a/ui/src/app/editor/dialog/customize/customize.component.ts b/ui/src/app/editor/dialog/customize/customize.component.ts
index 88e3795cb..5ba51d280 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor/dialog/customize/customize.component.ts
@@ -16,20 +16,28 @@
*
*/
-import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import {
- InvocablePipelineElementUnion,
- PipelineElementConfig,
- PipelineElementConfigurationStatus
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ Input,
+ OnInit,
+ ViewEncapsulation,
+} from '@angular/core';
+import {
+ InvocablePipelineElementUnion,
+ PipelineElementConfig,
+ PipelineElementConfigurationStatus,
} from '../../model/editor.model';
import { DialogRef } from '@streampipes/shared-ui';
import { JsplumbService } from '../../services/jsplumb.service';
import {
- DataProcessorInvocation, DataSinkInvocation,
- EventSchema,
- PipelineElementTemplate,
- PipelineElementTemplateConfig,
- PipelineElementTemplateService
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ EventSchema,
+ PipelineElementTemplate,
+ PipelineElementTemplateConfig,
+ PipelineElementTemplateService,
} from '@streampipes/platform-services';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { ShepherdService } from '../../../services/tour/shepherd.service';
@@ -37,174 +45,195 @@ import { ConfigurationInfo } from '../../../connect/model/ConfigurationInfo';
import { PipelineStyleService } from '../../services/pipeline-style.service';
@Component({
- selector: 'customize-pipeline-element',
- templateUrl: './customize.component.html',
- styleUrls: ['./customize.component.scss'],
- encapsulation: ViewEncapsulation.None
+ selector: 'sp-customize-pipeline-element',
+ templateUrl: './customize.component.html',
+ styleUrls: ['./customize.component.scss'],
+ encapsulation: ViewEncapsulation.None,
})
export class CustomizeComponent implements OnInit, AfterViewInit {
+ @Input()
+ pipelineElement: PipelineElementConfig;
+
+ cachedPipelineElement: InvocablePipelineElementUnion;
+ eventSchemas: EventSchema[] = [];
+
+ displayRecommended = true;
+ _showDocumentation = false;
+
+ selection: any;
+ matchingSelectionLeft: any;
+ matchingSelectionRight: any;
+ invalid: any;
+ helpDialogVisible: any;
+ validationErrors: any;
+
+ sourceEndpoint: any;
+ sepa: any;
+
+ parentForm: UntypedFormGroup;
+ formValid: boolean;
+ viewInitialized = false;
+
+ isDataProcessor = false;
+ originalDialogWidth: string | number;
+ completedStaticProperty: ConfigurationInfo;
+
+ availableTemplates: PipelineElementTemplate[];
+ selectedTemplate: any = false;
+ templateMode = false;
+ template: PipelineElementTemplate;
+ templateConfigs: Map<string, any> = new Map();
+
+ constructor(
+ private dialogRef: DialogRef<CustomizeComponent>,
+ private jsPlumbService: JsplumbService,
+ private shepherdService: ShepherdService,
+ private fb: UntypedFormBuilder,
+ private changeDetectorRef: ChangeDetectorRef,
+ private pipelineElementTemplateService: PipelineElementTemplateService,
+ private pipelineStyleService: PipelineStyleService,
+ ) {}
+
+ ngOnInit(): void {
+ this.originalDialogWidth = this.dialogRef.currentConfig().width;
+ this.cachedPipelineElement = this.jsPlumbService.clone(
+ this.pipelineElement.payload,
+ ) as InvocablePipelineElementUnion;
+ this.isDataProcessor =
+ this.cachedPipelineElement instanceof DataProcessorInvocation;
+ this.cachedPipelineElement.inputStreams.forEach(is => {
+ this.eventSchemas = this.eventSchemas.concat(is.eventSchema);
+ });
+ this.formValid =
+ this.pipelineElement.settings.completed ===
+ PipelineElementConfigurationStatus.OK;
- @Input()
- pipelineElement: PipelineElementConfig;
-
- cachedPipelineElement: InvocablePipelineElementUnion;
- eventSchemas: EventSchema[] = [];
-
- displayRecommended = true;
- _showDocumentation = false;
-
- selection: any;
- matchingSelectionLeft: any;
- matchingSelectionRight: any;
- invalid: any;
- helpDialogVisible: any;
- validationErrors: any;
-
- sourceEndpoint: any;
- sepa: any;
-
- parentForm: UntypedFormGroup;
- formValid: boolean;
- viewInitialized = false;
-
- isDataProcessor = false;
- originalDialogWidth: string | number;
- completedStaticProperty: ConfigurationInfo;
-
- availableTemplates: PipelineElementTemplate[];
- selectedTemplate: any = false;
- templateMode = false;
- template: PipelineElementTemplate;
- templateConfigs: Map<string, any> = new Map();
-
- constructor(private dialogRef: DialogRef<CustomizeComponent>,
- private jsPlumbService: JsplumbService,
- private shepherdService: ShepherdService,
- private fb: UntypedFormBuilder,
- private changeDetectorRef: ChangeDetectorRef,
- private pipelineElementTemplateService: PipelineElementTemplateService,
- private pipelineStyleService: PipelineStyleService) {
-
- }
-
- ngOnInit(): void {
- this.originalDialogWidth = this.dialogRef.currentConfig().width;
- this.cachedPipelineElement = this.jsPlumbService.clone(this.pipelineElement.payload) as InvocablePipelineElementUnion;
- this.isDataProcessor = this.cachedPipelineElement instanceof DataProcessorInvocation;
- this.cachedPipelineElement.inputStreams.forEach(is => {
- this.eventSchemas = this.eventSchemas.concat(is.eventSchema);
- });
- this.formValid = this.pipelineElement.settings.completed === PipelineElementConfigurationStatus.OK;
-
- this.parentForm = this.fb.group({});
-
- this.parentForm.valueChanges.subscribe(v => {
- });
-
- this.parentForm.statusChanges.subscribe((status) => {
- this.formValid = this.viewInitialized && this.parentForm.valid;
- });
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.trigger('customize-' + this.pipelineElement.type);
- }
- this.loadPipelineElementTemplates();
- }
-
- loadPipelineElementTemplates() {
- this.pipelineElementTemplateService
- .getPipelineElementTemplates(this.cachedPipelineElement.appId)
- .subscribe(templates => {
- this.availableTemplates = templates;
+ this.parentForm = this.fb.group({});
+
+ this.parentForm.valueChanges.subscribe(v => {});
+
+ this.parentForm.statusChanges.subscribe(status => {
+ this.formValid = this.viewInitialized && this.parentForm.valid;
});
- }
-
- close() {
- this.dialogRef.close();
- }
-
- save() {
- this.pipelineElement.payload = this.cachedPipelineElement;
- this.pipelineStyleService.updatePeConfigurationStatus(this.pipelineElement, PipelineElementConfigurationStatus.OK);
- this.pipelineElement.payload.configured = true;
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.trigger('save-' + this.pipelineElement.type);
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.trigger(
+ 'customize-' + this.pipelineElement.type,
+ );
+ }
+ this.loadPipelineElementTemplates();
}
- this.dialogRef.close(this.pipelineElement);
- }
- validConfiguration(event: any) {
+ loadPipelineElementTemplates() {
+ this.pipelineElementTemplateService
+ .getPipelineElementTemplates(this.cachedPipelineElement.appId)
+ .subscribe(templates => {
+ this.availableTemplates = templates;
+ });
+ }
- }
+ close() {
+ this.dialogRef.close();
+ }
- set showDocumentation(value: boolean) {
- if (value) {
- this.dialogRef.changeDialogSize({width: '90vw'});
- } else {
- this.dialogRef.changeDialogSize({width: this.originalDialogWidth});
+ save() {
+ this.pipelineElement.payload = this.cachedPipelineElement;
+ this.pipelineStyleService.updatePeConfigurationStatus(
+ this.pipelineElement,
+ PipelineElementConfigurationStatus.OK,
+ );
+ this.pipelineElement.payload.configured = true;
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.trigger('save-' + this.pipelineElement.type);
+ }
+ this.dialogRef.close(this.pipelineElement);
}
- this._showDocumentation = value;
- }
-
- get showDocumentation(): boolean {
- return this._showDocumentation;
- }
-
- ngAfterViewInit(): void {
- this.viewInitialized = true;
- this.formValid = this.viewInitialized && this.parentForm.valid;
- this.changeDetectorRef.detectChanges();
- }
-
- triggerUpdate(configurationInfo: ConfigurationInfo) {
- this.completedStaticProperty = {...configurationInfo};
- }
-
- triggerTemplateMode() {
- this.template = new PipelineElementTemplate();
- this.templateMode = true;
- }
-
- saveTemplate() {
- this.template.templateConfigs = this.convert(this.templateConfigs);
- this.pipelineElementTemplateService.storePipelineElementTemplate(this.template).subscribe(result => {
- this.loadPipelineElementTemplates();
- this.templateMode = false;
- });
- }
-
- convert(templateConfigs: Map<string, any>): any {
- const configs: { [index: string]: PipelineElementTemplateConfig } = {};
- templateConfigs.forEach((value, key) => {
- configs[key] = new PipelineElementTemplateConfig();
- configs[key].editable = value.editable;
- configs[key].displayed = value.displayed;
- configs[key].value = value.value;
- });
- return configs;
- }
-
- cancelTemplateMode() {
- this.templateMode = false;
- }
-
- loadTemplate(event: any) {
- if (!event.value) {
- this.cachedPipelineElement = this.jsPlumbService.clone(this.pipelineElement.payload) as InvocablePipelineElementUnion;
- this.selectedTemplate = false;
- } else {
- this.selectedTemplate = event.value;
- if (this.cachedPipelineElement instanceof DataProcessorInvocation) {
- this.pipelineElementTemplateService.getConfiguredDataProcessorForTemplate(event.value._id, this.cachedPipelineElement)
- .subscribe(pe => {
- this.cachedPipelineElement = pe as InvocablePipelineElementUnion;
- });
- } else {
- this.pipelineElementTemplateService.getConfiguredDataSinkForTemplate(event.value._id,
- this.cachedPipelineElement as DataSinkInvocation)
- .subscribe(pe => {
- this.cachedPipelineElement = pe as InvocablePipelineElementUnion;
+
+ validConfiguration(event: any) {}
+
+ set showDocumentation(value: boolean) {
+ if (value) {
+ this.dialogRef.changeDialogSize({ width: '90vw' });
+ } else {
+ this.dialogRef.changeDialogSize({
+ width: this.originalDialogWidth,
+ });
+ }
+ this._showDocumentation = value;
+ }
+
+ get showDocumentation(): boolean {
+ return this._showDocumentation;
+ }
+
+ ngAfterViewInit(): void {
+ this.viewInitialized = true;
+ this.formValid = this.viewInitialized && this.parentForm.valid;
+ this.changeDetectorRef.detectChanges();
+ }
+
+ triggerUpdate(configurationInfo: ConfigurationInfo) {
+ this.completedStaticProperty = { ...configurationInfo };
+ }
+
+ triggerTemplateMode() {
+ this.template = new PipelineElementTemplate();
+ this.templateMode = true;
+ }
+
+ saveTemplate() {
+ this.template.templateConfigs = this.convert(this.templateConfigs);
+ this.pipelineElementTemplateService
+ .storePipelineElementTemplate(this.template)
+ .subscribe(result => {
+ this.loadPipelineElementTemplates();
+ this.templateMode = false;
+ });
+ }
+
+ convert(templateConfigs: Map<string, any>): any {
+ const configs: { [index: string]: PipelineElementTemplateConfig } = {};
+ templateConfigs.forEach((value, key) => {
+ configs[key] = new PipelineElementTemplateConfig();
+ configs[key].editable = value.editable;
+ configs[key].displayed = value.displayed;
+ configs[key].value = value.value;
});
- }
+ return configs;
+ }
+
+ cancelTemplateMode() {
+ this.templateMode = false;
+ }
+
+ loadTemplate(event: any) {
+ if (!event.value) {
+ this.cachedPipelineElement = this.jsPlumbService.clone(
+ this.pipelineElement.payload,
+ ) as InvocablePipelineElementUnion;
+ this.selectedTemplate = false;
+ } else {
+ this.selectedTemplate = event.value;
+ if (this.cachedPipelineElement instanceof DataProcessorInvocation) {
+ this.pipelineElementTemplateService
+ .getConfiguredDataProcessorForTemplate(
+ event.value._id,
+ this.cachedPipelineElement,
+ )
+ .subscribe(pe => {
+ this.cachedPipelineElement =
+ pe as InvocablePipelineElementUnion;
+ });
+ } else {
+ this.pipelineElementTemplateService
+ .getConfiguredDataSinkForTemplate(
+ event.value._id,
+ this.cachedPipelineElement as DataSinkInvocation,
+ )
+ .subscribe(pe => {
+ this.cachedPipelineElement =
+ pe as InvocablePipelineElementUnion;
+ });
+ }
+ }
}
- }
}
diff --git a/ui/src/app/editor/dialog/help/help.component.html b/ui/src/app/editor/dialog/help/help.component.html
index a39ace505..b17cd1f4b 100644
--- a/ui/src/app/editor/dialog/help/help.component.html
+++ b/ui/src/app/editor/dialog/help/help.component.html
@@ -18,56 +18,92 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
- <h4>{{pipelineElement.name}}</h4>
+ <h4>{{ pipelineElement.name }}</h4>
<p>
- {{pipelineElement.description}}
+ {{ pipelineElement.description }}
</p>
- <mat-tab-group color="accent"
- [selectedIndex]="selectedIndex"
- (selectedIndexChange)="selectedIndex=$event">
- <mat-tab *ngFor="let tab of tabs"
- label="{{tab.title}}">
+ <mat-tab-group
+ color="accent"
+ [selectedIndex]="selectedIndex"
+ (selectedIndexChange)="selectedIndex = $event"
+ >
+ <mat-tab *ngFor="let tab of tabs" label="{{ tab.title }}">
</mat-tab>
</mat-tab-group>
- <div style="margin-top:15px;">
- <div *ngIf="selectedIndex == 0 && streamMode">
+ <div style="margin-top: 15px">
+ <div *ngIf="selectedIndex === 0 && streamMode">
<h5>Field Names</h5>
<div>
<table class="dataTable row-border hover preview-table">
<thead>
- <tr class="preview-row">
- <th>Field Name</th>
- <th>Description</th>
- <th>Runtime Name</th>
- <th>Type</th>
- </tr>
+ <tr class="preview-row">
+ <th>Field Name</th>
+ <th>Description</th>
+ <th>Runtime Name</th>
+ <th>Type</th>
+ </tr>
</thead>
<tbody id="preview-data-rows-id">
- <tr *ngFor="let property of pipelineElement.eventSchema.eventProperties" class="preview-row">
- <td>{{property.label ? property.label : "(n/a)"}}</td>
- <td>{{property.description ? property.description : "(n/a)"}}</td>
- <td>{{property.runtimeName}}</td>
- <td>{{getFriendlyRuntimeType(property.runtimeType)}}</td>
- </tr>
+ <tr
+ *ngFor="
+ let property of pipelineElement.eventSchema
+ .eventProperties
+ "
+ class="preview-row"
+ >
+ <td>
+ {{
+ property.label
+ ? property.label
+ : '(n/a)'
+ }}
+ </td>
+ <td>
+ {{
+ property.description
+ ? property.description
+ : '(n/a)'
+ }}
+ </td>
+ <td>{{ property.runtimeName }}</td>
+ <td>
+ {{
+ getFriendlyRuntimeType(
+ property.runtimeType
+ )
+ }}
+ </td>
+ </tr>
</tbody>
</table>
</div>
</div>
- <div *ngIf="selectedIndex == 1 && streamMode">
+ <div *ngIf="selectedIndex === 1 && streamMode">
<div>
- <sp-pipeline-element-runtime-info [streamDescription]="pipelineElement" [pollingActive]="pollingActive"></sp-pipeline-element-runtime-info>
+ <sp-pipeline-element-runtime-info
+ [streamDescription]="pipelineElement"
+ [pollingActive]="pollingActive"
+ ></sp-pipeline-element-runtime-info>
</div>
</div>
- <div *ngIf="selectedTab == 2 || !(streamMode)">
- <pipeline-element-documentation [useStyling]="false" [appId]="pipelineElement.appId"></pipeline-element-documentation>
+ <div *ngIf="selectedTab === 2 || !streamMode">
+ <sp-pipeline-element-documentation
+ [useStyling]="false"
+ [appId]="pipelineElement.appId"
+ ></sp-pipeline-element-documentation>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ >
Close
</button>
</div>
diff --git a/ui/src/app/editor/dialog/help/help.component.scss b/ui/src/app/editor/dialog/help/help.component.scss
index 497653847..3e7522f22 100644
--- a/ui/src/app/editor/dialog/help/help.component.scss
+++ b/ui/src/app/editor/dialog/help/help.component.scss
@@ -18,11 +18,11 @@
@import '../../../../scss/sp/sp-dialog.scss';
-.preview-row, .preview-table {
- background: var(--color-bg-dialog);
+.preview-row,
+.preview-table {
+ background: var(--color-bg-dialog);
}
.dataTable tbody tr:hover {
- background: var(--color-bg-1);
+ background: var(--color-bg-1);
}
-
diff --git a/ui/src/app/editor/dialog/help/help.component.ts b/ui/src/app/editor/dialog/help/help.component.ts
index 41196b4ee..c713ad436 100644
--- a/ui/src/app/editor/dialog/help/help.component.ts
+++ b/ui/src/app/editor/dialog/help/help.component.ts
@@ -18,96 +18,99 @@
import { Component, Input, OnInit } from '@angular/core';
import { PipelineElementUnion } from '../../model/editor.model';
-import { PipelineElementService, SpDataStream } from '@streampipes/platform-services';
+import {
+ PipelineElementService,
+ SpDataStream,
+} from '@streampipes/platform-services';
import { DialogRef } from '@streampipes/shared-ui';
import { PipelineElementTypeUtils } from '../../utils/editor.utils';
@Component({
- selector: 'pipeline-element-help',
- templateUrl: './help.component.html',
- styleUrls: ['./help.component.scss']
+ selector: 'sp-pipeline-element-help',
+ templateUrl: './help.component.html',
+ styleUrls: ['./help.component.scss'],
})
export class HelpComponent implements OnInit {
-
- selectedTab = 0;
- pollingActive: boolean;
-
- selectedIndex = 0;
-
- nsPrefix = 'http://www.w3.org/2001/XMLSchema#';
- availableTabs = [
- {
- title: 'Fields',
- type: 'fields',
- targets: ['set', 'stream']
- },
- {
- title: 'Values',
- type: 'values',
- targets: ['set', 'stream']
- },
- {
- title: 'Documentation',
- type: 'documentation',
- targets: ['set', 'stream', 'sepa', 'action']
+ selectedTab = 0;
+ pollingActive: boolean;
+
+ selectedIndex = 0;
+
+ nsPrefix = 'http://www.w3.org/2001/XMLSchema#';
+ availableTabs = [
+ {
+ title: 'Fields',
+ type: 'fields',
+ targets: ['set', 'stream'],
+ },
+ {
+ title: 'Values',
+ type: 'values',
+ targets: ['set', 'stream'],
+ },
+ {
+ title: 'Documentation',
+ type: 'documentation',
+ targets: ['set', 'stream', 'sepa', 'action'],
+ },
+ ];
+
+ tabs: any[] = [];
+ streamMode: boolean;
+
+ @Input()
+ pipelineElement: PipelineElementUnion;
+
+ constructor(
+ private pipelineElementService: PipelineElementService,
+ private dialogRef: DialogRef<HelpComponent>,
+ ) {
+ this.pollingActive = true;
}
- ];
-
- tabs: any[] = [];
- streamMode: boolean;
- @Input()
- pipelineElement: PipelineElementUnion;
-
- constructor(private pipelineElementService: PipelineElementService,
- private dialogRef: DialogRef<HelpComponent>) {
- this.pollingActive = true;
- }
-
- ngOnInit() {
- if (this.pipelineElement instanceof SpDataStream) {
- this.tabs = this.availableTabs;
- this.streamMode = true;
- } else {
- this.tabs.push(this.availableTabs[2]);
- this.streamMode = false;
+ ngOnInit() {
+ if (this.pipelineElement instanceof SpDataStream) {
+ this.tabs = this.availableTabs;
+ this.streamMode = true;
+ } else {
+ this.tabs.push(this.availableTabs[2]);
+ this.streamMode = false;
+ }
}
- }
- getFriendlyRuntimeType(runtimeType) {
- if (this.isNumber(runtimeType)) {
- return 'Number';
- } else if (this.isBoolean(runtimeType)) {
- return 'Boolean';
- } else {
- return 'Text';
+ getFriendlyRuntimeType(runtimeType) {
+ if (this.isNumber(runtimeType)) {
+ return 'Number';
+ } else if (this.isBoolean(runtimeType)) {
+ return 'Boolean';
+ } else {
+ return 'Text';
+ }
}
- }
-
- isNumber(runtimeType) {
- return (runtimeType === (this.nsPrefix + 'float')) ||
- (runtimeType === (this.nsPrefix + 'integer')) ||
- (runtimeType === (this.nsPrefix + 'long')) ||
- (runtimeType === (this.nsPrefix + 'double'));
- }
-
- isBoolean(runtimeType) {
- return runtimeType === this.nsPrefix + 'boolean';
- }
-
- close() {
- this.pollingActive = false;
- setTimeout(() => {
- this.dialogRef.close();
- });
- }
+ isNumber(runtimeType) {
+ return (
+ runtimeType === this.nsPrefix + 'float' ||
+ runtimeType === this.nsPrefix + 'integer' ||
+ runtimeType === this.nsPrefix + 'long' ||
+ runtimeType === this.nsPrefix + 'double'
+ );
+ }
- filterTab(tab) {
- const type = PipelineElementTypeUtils.fromType(this.pipelineElement);
- const cssShortHand = PipelineElementTypeUtils.toCssShortHand(type);
- return tab.targets.indexOf(cssShortHand) !== -1;
- }
+ isBoolean(runtimeType) {
+ return runtimeType === this.nsPrefix + 'boolean';
+ }
+ close() {
+ this.pollingActive = false;
+ setTimeout(() => {
+ this.dialogRef.close();
+ });
+ }
+ filterTab(tab) {
+ const type = PipelineElementTypeUtils.fromType(this.pipelineElement);
+ const cssShortHand = PipelineElementTypeUtils.toCssShortHand(type);
+ return tab.targets.indexOf(cssShortHand) !== -1;
+ }
}
diff --git a/ui/src/app/editor/dialog/matching-error/matching-error.component.html b/ui/src/app/editor/dialog/matching-error/matching-error.component.html
index e0a7fa8b0..c68c6ed8e 100644
--- a/ui/src/app/editor/dialog/matching-error/matching-error.component.html
+++ b/ui/src/app/editor/dialog/matching-error/matching-error.component.html
@@ -20,23 +20,35 @@
<div class="sp-dialog-content p-15">
<div>
<h4>These elements can't be connected.</h4>
- <h4>The input data stream does not satisfy the requirements specified by the data processor.</h4>
- <button mat-button (click)="toggleStatusDetailsVisible()" type="button" class="md-accent">
+ <h4>
+ The input data stream does not satisfy the requirements
+ specified by the data processor.
+ </h4>
+ <button
+ mat-button
+ (click)="toggleStatusDetailsVisible()"
+ type="button"
+ class="md-accent"
+ >
<div *ngIf="!statusDetailsVisible">Show Details</div>
<div *ngIf="statusDetailsVisible">Hide Details</div>
</button>
<div *ngIf="statusDetailsVisible">
<div *ngFor="let entry of notifications">
- <div fxFlex="100" class="md-whiteframe-z1" style="margin-bottom:10px;">
+ <div
+ fxFlex="100"
+ class="md-whiteframe-z1"
+ style="margin-bottom: 10px"
+ >
<div fxFlex fxLayout="column" class="md-padding">
-<!-- <div>-->
-<!-- <i class="material-icons" *ngIf="entry.matchingResultMessage">done</i>-->
-<!-- <i class="material-icons" *ngIf="entry.matchingSuccessful">warning</i>-->
-<!-- <b>{{entry.title}} </b>-->
-<!-- </div>-->
+ <!-- <div>-->
+ <!-- <i class="material-icons" *ngIf="entry.matchingResultMessage">done</i>-->
+ <!-- <i class="material-icons" *ngIf="entry.matchingSuccessful">warning</i>-->
+ <!-- <b>{{entry.title}} </b>-->
+ <!-- </div>-->
<div fxFlex="column">
- {{entry.title}}<br/>
- {{entry.description}}
+ {{ entry.title }}<br />
+ {{ entry.description }}
</div>
</div>
</div>
@@ -46,7 +58,12 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ >
Close
</button>
</div>
diff --git a/ui/src/app/editor/dialog/matching-error/matching-error.component.scss b/ui/src/app/editor/dialog/matching-error/matching-error.component.scss
index 0a776e5ff..fddade7bf 100644
--- a/ui/src/app/editor/dialog/matching-error/matching-error.component.scss
+++ b/ui/src/app/editor/dialog/matching-error/matching-error.component.scss
@@ -16,4 +16,4 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
diff --git a/ui/src/app/editor/dialog/matching-error/matching-error.component.ts b/ui/src/app/editor/dialog/matching-error/matching-error.component.ts
index d0ab5f37e..931b6929c 100644
--- a/ui/src/app/editor/dialog/matching-error/matching-error.component.ts
+++ b/ui/src/app/editor/dialog/matching-error/matching-error.component.ts
@@ -21,27 +21,24 @@ import { DialogRef } from '@streampipes/shared-ui';
import { Notification } from '@streampipes/platform-services';
@Component({
- selector: 'matching-error',
- templateUrl: './matching-error.component.html',
- styleUrls: ['./matching-error.component.scss']
+ selector: 'sp-matching-error',
+ templateUrl: './matching-error.component.html',
+ styleUrls: ['./matching-error.component.scss'],
})
export class MatchingErrorComponent {
+ @Input()
+ notifications: Notification[];
- @Input()
- notifications: Notification[];
+ msg: any;
+ statusDetailsVisible: any;
- msg: any;
- statusDetailsVisible: any;
+ constructor(private dialogRef: DialogRef<MatchingErrorComponent>) {}
- constructor(private dialogRef: DialogRef<MatchingErrorComponent>) {
+ close() {
+ this.dialogRef.close();
+ }
- }
-
- close() {
- this.dialogRef.close();
- }
-
- toggleStatusDetailsVisible() {
- this.statusDetailsVisible = !(this.statusDetailsVisible);
- }
+ toggleStatusDetailsVisible() {
+ this.statusDetailsVisible = !this.statusDetailsVisible;
+ }
}
diff --git a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
index c80e76c26..4b78c097f 100644
--- a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
+++ b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.html
@@ -20,18 +20,32 @@
<div class="sp-dialog-content p-15">
<div fxFlex="100" fxLayout="column">
<div fxFlex="100" fxLayout="column">
- <h4>The tutorial requires pipeline elements that are not yet installed.</h4>
- <h5>Install the following pipeline elements and start the tutorial again:</h5>
+ <h4>
+ The tutorial requires pipeline elements that are not yet
+ installed.
+ </h4>
+ <h5>
+ Install the following pipeline elements and start the
+ tutorial again:
+ </h5>
<div *ngFor="let missingElement of missingElementsForTutorial">
- <li><b>{{missingElement.name}}</b> <i>({{missingElement.appId}})</i></li>
+ <li>
+ <b>{{ missingElement.name }}</b>
+ <i>({{ missingElement.appId }})</i>
+ </li>
</div>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right">
- <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ >
Close
</button>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.scss b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.scss
index 0a776e5ff..fddade7bf 100644
--- a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.scss
+++ b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.scss
@@ -16,4 +16,4 @@
*
*/
-@import '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
+@import '../../../../scss/sp/sp-dialog.scss';
diff --git a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
index fe05455aa..18ed7dd96 100644
--- a/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
+++ b/ui/src/app/editor/dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component.ts
@@ -20,21 +20,19 @@ import { Component, Input } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
@Component({
- selector: 'missing-elements-for-tutorial',
- templateUrl: './missing-elements-for-tutorial.component.html',
- styleUrls: ['./missing-elements-for-tutorial.component.scss']
+ selector: 'sp-missing-elements-for-tutorial',
+ templateUrl: './missing-elements-for-tutorial.component.html',
+ styleUrls: ['./missing-elements-for-tutorial.component.scss'],
})
export class MissingElementsForTutorialComponent {
+ @Input()
+ missingElementsForTutorial: any[];
+ constructor(
+ private dialogRef: DialogRef<MissingElementsForTutorialComponent>,
+ ) {}
- @Input()
- missingElementsForTutorial: any[];
-
- constructor(private dialogRef: DialogRef<MissingElementsForTutorialComponent>) {
-
- }
-
- close() {
- this.dialogRef.close();
- }
+ close() {
+ this.dialogRef.close();
+ }
}
diff --git a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.html b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.html
index 602c28233..b21358d1f 100644
--- a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.html
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.html
@@ -19,18 +19,38 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15">
<div fxFlex="100" fxLayout="column">
- <div *ngFor="let currentElement of currentElements; index as i" (click)="create(currentElement)">
- <div fxLayout="row" class="m-10" fxLayoutAlign="start center"
- [style]="styles[i]"
- (mouseenter)="changeStyle(i, true)"
- (mouseleave)="changeStyle(i, false)"
- [attr.data-cy]="currentElement.name.toLowerCase().replaceAll(' ', '_')">
- <div class="draggable-icon-preview {{currentElementStyle(currentElement)}}">
- <pipeline-element [pipelineElement]="currentElement" [iconSize]="true"></pipeline-element>
+ <div
+ *ngFor="let currentElement of currentElements; index as i"
+ (click)="create(currentElement)"
+ >
+ <div
+ fxLayout="row"
+ class="m-10"
+ fxLayoutAlign="start center"
+ [style]="styles[i]"
+ (mouseenter)="changeStyle(i, true)"
+ (mouseleave)="changeStyle(i, false)"
+ [attr.data-cy]="
+ currentElement.name.toLowerCase().replaceAll(' ', '_')
+ "
+ >
+ <div
+ class="draggable-icon-preview {{
+ currentElementStyle(currentElement)
+ }}"
+ >
+ <sp-pipeline-element
+ [pipelineElement]="currentElement"
+ [iconSize]="true"
+ ></sp-pipeline-element>
</div>
<div fxLayout="column" fxLayoutAlign="center start">
- <div class="element-name">{{ currentElement.name }}</div>
- <div class="element-description">{{ currentElement.description }}</div>
+ <div class="element-name">
+ {{ currentElement.name }}
+ </div>
+ <div class="element-description">
+ {{ currentElement.description }}
+ </div>
</div>
</div>
<mat-divider></mat-divider>
@@ -39,7 +59,6 @@
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
-
<button mat-button mat-raised-button class="mat-basic" (click)="hide()">
Cancel
</button>
diff --git a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.scss b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.scss
index 31ebd4267..0945c5cb6 100644
--- a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.scss
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.scss
@@ -19,6 +19,6 @@
@import '../../../../scss/sp/sp-dialog.scss';
.m-10 {
- padding-top:10px;
- padding-bottom:10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
diff --git a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
index 513b08d02..edf8fce9b 100644
--- a/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
@@ -20,79 +20,85 @@ import { Component, Input, OnInit } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
import { JsplumbService } from '../../services/jsplumb.service';
import {
- DataProcessorInvocation,
- DataSinkInvocation,
- SpDataSet,
- SpDataStream
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ SpDataSet,
+ SpDataStream,
} from '@streampipes/platform-services';
-import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
+import {
+ PipelineElementConfig,
+ PipelineElementUnion,
+} from '../../model/editor.model';
@Component({
- selector: 'sp-pipeline-element-discovery',
- templateUrl: './pipeline-element-discovery.component.html',
- styleUrls: ['./pipeline-element-discovery.component.scss']
+ selector: 'sp-pipeline-element-discovery',
+ templateUrl: './pipeline-element-discovery.component.html',
+ styleUrls: ['./pipeline-element-discovery.component.scss'],
})
export class PipelineElementDiscoveryComponent implements OnInit {
+ @Input()
+ rawPipelineModel: PipelineElementConfig[];
- @Input()
- rawPipelineModel: PipelineElementConfig[];
-
- @Input()
- currentElements: PipelineElementUnion[];
-
- styles: any[] = [];
+ @Input()
+ currentElements: PipelineElementUnion[];
- constructor(private dialogRef: DialogRef<PipelineElementDiscoveryComponent>,
- private JsPlumbService: JsplumbService) {
+ styles: any[] = [];
- }
+ constructor(
+ private dialogRef: DialogRef<PipelineElementDiscoveryComponent>,
+ private JsPlumbService: JsplumbService,
+ ) {}
- ngOnInit() {
- this.currentElements.sort((a, b) => a.name.localeCompare(b.name));
- this.currentElements.forEach(pe => {
- this.styles.push(this.makeStandardStyle());
- });
- }
+ ngOnInit() {
+ this.currentElements.sort((a, b) => a.name.localeCompare(b.name));
+ this.currentElements.forEach(pe => {
+ this.styles.push(this.makeStandardStyle());
+ });
+ }
- create(selectedElement) {
- this.JsPlumbService.createElementWithoutConnection(this.rawPipelineModel,
- selectedElement,
- 200,
- 100);
- this.hide();
- }
+ create(selectedElement) {
+ this.JsPlumbService.createElementWithoutConnection(
+ this.rawPipelineModel,
+ selectedElement,
+ 200,
+ 100,
+ );
+ this.hide();
+ }
- hide() {
- this.dialogRef.close();
- }
+ hide() {
+ this.dialogRef.close();
+ }
- currentElementStyle(possibleElement: PipelineElementUnion) {
- if (possibleElement instanceof DataProcessorInvocation) {
- return 'sepa';
- } else if (possibleElement instanceof DataSinkInvocation) {
- return 'action';
- } else if (possibleElement instanceof SpDataSet) {
- return 'set';
- } else if (possibleElement instanceof SpDataStream) {
- return 'stream';
+ currentElementStyle(possibleElement: PipelineElementUnion) {
+ if (possibleElement instanceof DataProcessorInvocation) {
+ return 'sepa';
+ } else if (possibleElement instanceof DataSinkInvocation) {
+ return 'action';
+ } else if (possibleElement instanceof SpDataSet) {
+ return 'set';
+ } else if (possibleElement instanceof SpDataStream) {
+ return 'stream';
+ }
}
- }
- makeStandardStyle() {
- return {
- background: 'white',
- cursor: 'auto'
- };
- }
+ makeStandardStyle() {
+ return {
+ background: 'white',
+ cursor: 'auto',
+ };
+ }
- makeHoverStyle() {
- return {
- background: 'lightgrey',
- cursor: 'pointer'
- };
- }
+ makeHoverStyle() {
+ return {
+ background: 'lightgrey',
+ cursor: 'pointer',
+ };
+ }
- changeStyle(index: number, hover: boolean) {
- hover ? this.styles[index] = this.makeHoverStyle() : this.styles[index] = this.makeStandardStyle();
- }
+ changeStyle(index: number, hover: boolean) {
+ hover
+ ? (this.styles[index] = this.makeHoverStyle())
+ : (this.styles[index] = this.makeStandardStyle());
+ }
}
diff --git a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
index 607638976..bfc222978 100644
--- a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
+++ b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.html
@@ -19,11 +19,28 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content padding-20">
<div fxFlex="100" fxLayout="column">
- <div fxFlex="100" fxLayout="column" *ngIf="!saved && !saving && !storageError">
- <div id="overwriteCheckbox" class="checkbox" *ngIf="currentModifiedPipelineId">
- <mat-radio-group [(ngModel)]="updateMode" fxLayout="column" color="accent" class="pipeline-radio-group">
- <mat-radio-button [value]="'update'" class="mb-10" style="padding-left: 0;">
- Update pipeline <b>{{currentPipelineName}}</b>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="!saved && !saving && !storageError"
+ >
+ <div
+ id="overwriteCheckbox"
+ class="checkbox"
+ *ngIf="currentModifiedPipelineId"
+ >
+ <mat-radio-group
+ [(ngModel)]="updateMode"
+ fxLayout="column"
+ color="accent"
+ class="pipeline-radio-group"
+ >
+ <mat-radio-button
+ [value]="'update'"
+ class="mb-10"
+ style="padding-left: 0"
+ >
+ Update pipeline <b>{{ currentPipelineName }}</b>
</mat-radio-button>
<mat-radio-button [value]="'clone'" class="mb-10">
Create new pipeline
@@ -31,55 +48,112 @@
</mat-radio-group>
</div>
<form [formGroup]="submitPipelineForm">
- <div fxFlex="100" fxLayout="column" *ngIf="!currentModifiedPipelineId || updateMode=='clone'">
- <mat-form-field fxFlex color="accent">
- <mat-label>Pipeline Name</mat-label>
- <input [formControlName]="'pipelineName'"
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ *ngIf="
+ !currentModifiedPipelineId || updateMode === 'clone'
+ "
+ >
+ <mat-form-field fxFlex color="accent">
+ <mat-label>Pipeline Name</mat-label>
+ <input
+ [formControlName]="'pipelineName'"
data-cy="sp-editor-pipeline-name"
- matInput name="pipelineName"/>
-<!-- <span ng-show="submitPipelineForm.pipelineName.$touched && submitPipelineForm.pipelineName.$error.required">Please provide a pipeline name.</span>-->
-<!-- <span ng-show="submitPipelineForm.pipelineName.$error.maxlength">Please provide a shorter pipeline name.</span>-->
- </mat-form-field>
- <mat-form-field fxFlex color="accent">
- <mat-label>Description</mat-label>
- <input [formControlName]="'pipelineDescription'" matInput/>
-<!-- <span ng-show="submitPipelineForm.pipelineDescription.$error.maxlength">Please provide a shorter description.</span>-->
- </mat-form-field>
- </div>
+ matInput
+ name="pipelineName"
+ />
+ <!-- <span ng-show="submitPipelineForm.pipelineName.$touched && submitPipelineForm.pipelineName.$error.required">Please provide a pipeline name.</span>-->
+ <!-- <span ng-show="submitPipelineForm.pipelineName.$error.maxlength">Please provide a shorter pipeline name.</span>-->
+ </mat-form-field>
+ <mat-form-field fxFlex color="accent">
+ <mat-label>Description</mat-label>
+ <input
+ [formControlName]="'pipelineDescription'"
+ matInput
+ />
+ <!-- <span ng-show="submitPipelineForm.pipelineDescription.$error.maxlength">Please provide a shorter description.</span>-->
+ </mat-form-field>
+ </div>
</form>
- <mat-checkbox (click)="triggerTutorial()"
- [(ngModel)]="startPipelineAfterStorage"
- color="accent"
- data-cy="sp-editor-checkbox-start-immediately">
+ <mat-checkbox
+ (click)="triggerTutorial()"
+ [(ngModel)]="startPipelineAfterStorage"
+ color="accent"
+ data-cy="sp-editor-checkbox-start-immediately"
+ >
Start pipeline immediately
</mat-checkbox>
</div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="saving">
- <mat-spinner [mode]="'indeterminate'" [diameter]="50" color="accent"></mat-spinner>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="saving"
+ >
+ <mat-spinner
+ [mode]="'indeterminate'"
+ [diameter]="50"
+ color="accent"
+ ></mat-spinner>
<span class="status-text">Saving pipeline...</span>
</div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="saved">
- <mat-icon color="accent" style="font-size:50pt;height:60px;width:60px;">check_circle</mat-icon>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="saved"
+ >
+ <mat-icon
+ color="accent"
+ style="font-size: 50pt; height: 60px; width: 60px"
+ >check_circle</mat-icon
+ >
<span class="status-text">Pipeline successfully stored.</span>
</div>
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="storageError">
- <mat-icon color="accent" style="font-size:50pt;height:60px;width:60px;">error</mat-icon>
- <span class="status-text">Your pipeline could not be stored.</span>
- <span class="status-subtext">{{errorMessage}}</span>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="storageError"
+ >
+ <mat-icon
+ color="accent"
+ style="font-size: 50pt; height: 60px; width: 60px"
+ >error</mat-icon
+ >
+ <span class="status-text"
+ >Your pipeline could not be stored.</span
+ >
+ <span class="status-subtext">{{ errorMessage }}</span>
</div>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions">
- <button [disabled]="!submitPipelineForm.valid || saving || saved" mat-button mat-raised-button color="accent" (click)="savePipeline(false)" style="margin-right:10px;">
+ <button
+ [disabled]="!submitPipelineForm.valid || saving || saved"
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="savePipeline(false)"
+ style="margin-right: 10px"
+ >
Save
</button>
- <button [disabled]="!submitPipelineForm.valid || saving || saved" mat-button mat-raised-button color="accent" (click)="savePipeline(true)" style="margin-right:10px;"
- data-cy="sp-editor-save">
+ <button
+ [disabled]="!submitPipelineForm.valid || saving || saved"
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="savePipeline(true)"
+ style="margin-right: 10px"
+ data-cy="sp-editor-save"
+ >
Save and go to pipeline view
</button>
<button mat-button mat-raised-button class="mat-basic" (click)="hide()">
- {{saved ? 'Close' : 'Cancel'}}
+ {{ saved ? 'Close' : 'Cancel' }}
</button>
</div>
</div>
diff --git a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.scss b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.scss
index c5dce8d4d..5b19b8215 100644
--- a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.scss
+++ b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.scss
@@ -19,28 +19,28 @@
@import '../../../../scss/sp/sp-dialog.scss';
.customize-section {
- display:flex;
- flex: 1 1 auto;
- padding: 20px;
+ display: flex;
+ flex: 1 1 auto;
+ padding: 20px;
}
.padding-20 {
- padding: 20px;
+ padding: 20px;
}
.mb-10 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
::ng-deep .pipeline-radio-group .mat-radio-label {
- padding: 0;
+ padding: 0;
}
.status-text {
- font-size: 14pt;
- margin-top:10px;
+ font-size: 14pt;
+ margin-top: 10px;
}
.status-subtext {
- font-size: 12pt;
-}
\ No newline at end of file
+ font-size: 12pt;
+}
diff --git a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
index 907be7193..f9f12f1bc 100644
--- a/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
+++ b/ui/src/app/editor/dialog/save-pipeline/save-pipeline.component.ts
@@ -18,171 +18,207 @@
import { Component, Input, OnInit } from '@angular/core';
import { DialogRef } from '@streampipes/shared-ui';
-import { Message, Pipeline, PipelineCanvasMetadata, PipelineService, PipelineCanvasMetadataService } from '@streampipes/platform-services';
+import {
+ Message,
+ Pipeline,
+ PipelineCanvasMetadata,
+ PipelineService,
+ PipelineCanvasMetadataService,
+} from '@streampipes/platform-services';
import { ObjectProvider } from '../../services/object-provider.service';
import { EditorService } from '../../services/editor.service';
import { ShepherdService } from '../../../services/tour/shepherd.service';
-import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import {
+ UntypedFormControl,
+ UntypedFormGroup,
+ Validators,
+} from '@angular/forms';
import { Router } from '@angular/router';
-import { InvocablePipelineElementUnion } from "../../model/editor.model";
-import { JsplumbService } from "../../services/jsplumb.service";
+import { InvocablePipelineElementUnion } from '../../model/editor.model';
+import { JsplumbService } from '../../services/jsplumb.service';
@Component({
- selector: 'save-pipeline',
- templateUrl: './save-pipeline.component.html',
- styleUrls: ['./save-pipeline.component.scss']
+ selector: 'sp-save-pipeline',
+ templateUrl: './save-pipeline.component.html',
+ styleUrls: ['./save-pipeline.component.scss'],
})
export class SavePipelineComponent implements OnInit {
+ pipelineCategories: any;
+ startPipelineAfterStorage: any;
+ updateMode: any;
- pipelineCategories: any;
- startPipelineAfterStorage: any;
- updateMode: any;
+ submitPipelineForm: UntypedFormGroup = new UntypedFormGroup({});
- submitPipelineForm: UntypedFormGroup = new UntypedFormGroup({});
+ @Input()
+ pipeline: Pipeline;
- @Input()
- pipeline: Pipeline;
+ @Input()
+ modificationMode: string;
- @Input()
- modificationMode: string;
+ @Input()
+ currentModifiedPipelineId: string;
- @Input()
- currentModifiedPipelineId: string;
+ @Input()
+ pipelineCanvasMetadata: PipelineCanvasMetadata;
- @Input()
- pipelineCanvasMetadata: PipelineCanvasMetadata;
+ saving = false;
+ saved = false;
- saving = false;
- saved = false;
+ storageError = false;
+ errorMessage = '';
- storageError = false;
- errorMessage = '';
+ currentPipelineName: string;
- currentPipelineName: string;
-
- constructor(private editorService: EditorService,
- private dialogRef: DialogRef<SavePipelineComponent>,
- private jsplumbService: JsplumbService,
- private objectProvider: ObjectProvider,
- private pipelineService: PipelineService,
- private router: Router,
- private shepherdService: ShepherdService,
- private pipelineCanvasService: PipelineCanvasMetadataService) {
- this.pipelineCategories = [];
- this.updateMode = 'update';
- }
-
- ngOnInit() {
- this.getPipelineCategories();
- if (this.currentModifiedPipelineId) {
- this.currentPipelineName = this.pipeline.name;
+ constructor(
+ private editorService: EditorService,
+ private dialogRef: DialogRef<SavePipelineComponent>,
+ private jsplumbService: JsplumbService,
+ private objectProvider: ObjectProvider,
+ private pipelineService: PipelineService,
+ private router: Router,
+ private shepherdService: ShepherdService,
+ private pipelineCanvasService: PipelineCanvasMetadataService,
+ ) {
+ this.pipelineCategories = [];
+ this.updateMode = 'update';
}
- this.submitPipelineForm.addControl('pipelineName', new UntypedFormControl(this.pipeline.name,
- [Validators.required,
- Validators.maxLength(40)]));
- this.submitPipelineForm.addControl('pipelineDescription', new UntypedFormControl(this.pipeline.description,
- [Validators.maxLength(80)]));
-
- this.submitPipelineForm.controls['pipelineName'].valueChanges.subscribe(value => {
- this.pipeline.name = value;
- });
-
- this.submitPipelineForm.controls['pipelineDescription'].valueChanges.subscribe(value => {
- this.pipeline.description = value;
- });
+ ngOnInit() {
+ this.getPipelineCategories();
+ if (this.currentModifiedPipelineId) {
+ this.currentPipelineName = this.pipeline.name;
+ }
+
+ this.submitPipelineForm.addControl(
+ 'pipelineName',
+ new UntypedFormControl(this.pipeline.name, [
+ Validators.required,
+ Validators.maxLength(40),
+ ]),
+ );
+ this.submitPipelineForm.addControl(
+ 'pipelineDescription',
+ new UntypedFormControl(this.pipeline.description, [
+ Validators.maxLength(80),
+ ]),
+ );
+
+ this.submitPipelineForm.controls['pipelineName'].valueChanges.subscribe(
+ value => {
+ this.pipeline.name = value;
+ },
+ );
+
+ this.submitPipelineForm.controls[
+ 'pipelineDescription'
+ ].valueChanges.subscribe(value => {
+ this.pipeline.description = value;
+ });
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.trigger('enter-pipeline-name');
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.trigger('enter-pipeline-name');
+ }
}
- }
-
- triggerTutorial() {
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.trigger('save-pipeline-dialog');
+ triggerTutorial() {
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.trigger('save-pipeline-dialog');
+ }
}
- }
-
- displayErrors(data?: string) {
- this.storageError = true;
- this.errorMessage = data;
- }
-
- getPipelineCategories() {
- this.pipelineService.getPipelineCategories().subscribe(pipelineCategories => {
- this.pipelineCategories = pipelineCategories;
- });
- }
-
-
- savePipeline(switchTab) {
- let storageRequest;
- const updateMode = this.currentModifiedPipelineId && this.updateMode === 'update';
-
- if (updateMode) {
- storageRequest = this.pipelineService.updatePipeline(this.pipeline);
- } else {
- if (this.currentModifiedPipelineId) {
- this.pipeline.actions.forEach(element => this.updateId(element));
- this.pipeline.sepas.forEach(element => this.updateId(element));
- }
- this.pipeline._id = undefined;
- storageRequest = this.pipelineService.storePipeline(this.pipeline);
+
+ displayErrors(data?: string) {
+ this.storageError = true;
+ this.errorMessage = data;
}
- storageRequest
- .subscribe(statusMessage => {
- if (statusMessage.success) {
- const pipelineId: string = statusMessage.notifications[1].description;
- this.storePipelineCanvasMetadata(pipelineId, updateMode);
- this.afterStorage(statusMessage, switchTab, pipelineId);
- } else {
- this.displayErrors(statusMessage.notifications[0]);
- }
- }, data => {
- this.displayErrors();
- });
- }
-
- updateId(entity: InvocablePipelineElementUnion) {
- const lastIdIndex = entity.elementId.lastIndexOf(':');
- const newElementId = entity.elementId.substring(0, lastIdIndex + 1) + this.jsplumbService.makeId(5);
- entity.elementId = newElementId;
- entity.uri = newElementId;
- }
-
- storePipelineCanvasMetadata(pipelineId: string,
- updateMode: boolean) {
- let request;
- this.pipelineCanvasMetadata.pipelineId = pipelineId;
- if (updateMode) {
- request = this.pipelineCanvasService.updatePipelineCanvasMetadata(this.pipelineCanvasMetadata);
- } else {
- this.pipelineCanvasMetadata._id = undefined;
- this.pipelineCanvasMetadata._rev = undefined;
- request = this.pipelineCanvasService.addPipelineCanvasMetadata(this.pipelineCanvasMetadata);
+ getPipelineCategories() {
+ this.pipelineService
+ .getPipelineCategories()
+ .subscribe(pipelineCategories => {
+ this.pipelineCategories = pipelineCategories;
+ });
}
- request.subscribe();
- }
+ savePipeline(switchTab) {
+ let storageRequest;
+ const updateMode =
+ this.currentModifiedPipelineId && this.updateMode === 'update';
+
+ if (updateMode) {
+ storageRequest = this.pipelineService.updatePipeline(this.pipeline);
+ } else {
+ if (this.currentModifiedPipelineId) {
+ this.pipeline.actions.forEach(element =>
+ this.updateId(element),
+ );
+ this.pipeline.sepas.forEach(element => this.updateId(element));
+ }
+ this.pipeline._id = undefined;
+ storageRequest = this.pipelineService.storePipeline(this.pipeline);
+ }
+
+ storageRequest.subscribe(
+ statusMessage => {
+ if (statusMessage.success) {
+ const pipelineId: string =
+ statusMessage.notifications[1].description;
+ this.storePipelineCanvasMetadata(pipelineId, updateMode);
+ this.afterStorage(statusMessage, switchTab, pipelineId);
+ } else {
+ this.displayErrors(statusMessage.notifications[0]);
+ }
+ },
+ data => {
+ this.displayErrors();
+ },
+ );
+ }
- afterStorage(statusMessage: Message, switchTab, pipelineId?: string) {
- this.hide();
- this.editorService.makePipelineAssemblyEmpty(true);
- this.editorService.removePipelineFromCache().subscribe();
- if (this.shepherdService.isTourActive()) {
- this.shepherdService.hideCurrentStep();
+ updateId(entity: InvocablePipelineElementUnion) {
+ const lastIdIndex = entity.elementId.lastIndexOf(':');
+ const newElementId =
+ entity.elementId.substring(0, lastIdIndex + 1) +
+ this.jsplumbService.makeId(5);
+ entity.elementId = newElementId;
+ entity.uri = newElementId;
}
- if (switchTab && !this.startPipelineAfterStorage) {
- this.router.navigate(['pipelines']);
+
+ storePipelineCanvasMetadata(pipelineId: string, updateMode: boolean) {
+ let request;
+ this.pipelineCanvasMetadata.pipelineId = pipelineId;
+ if (updateMode) {
+ request = this.pipelineCanvasService.updatePipelineCanvasMetadata(
+ this.pipelineCanvasMetadata,
+ );
+ } else {
+ this.pipelineCanvasMetadata._id = undefined;
+ this.pipelineCanvasMetadata._rev = undefined;
+ request = this.pipelineCanvasService.addPipelineCanvasMetadata(
+ this.pipelineCanvasMetadata,
+ );
+ }
+
+ request.subscribe();
}
- if (this.startPipelineAfterStorage) {
- this.router.navigate(['pipelines'], { queryParams: {pipeline: pipelineId}});
+
+ afterStorage(statusMessage: Message, switchTab, pipelineId?: string) {
+ this.hide();
+ this.editorService.makePipelineAssemblyEmpty(true);
+ this.editorService.removePipelineFromCache().subscribe();
+ if (this.shepherdService.isTourActive()) {
+ this.shepherdService.hideCurrentStep();
+ }
+ if (switchTab && !this.startPipelineAfterStorage) {
+ this.router.navigate(['pipelines']);
+ }
+ if (this.startPipelineAfterStorage) {
+ this.router.navigate(['pipelines'], {
+ queryParams: { pipeline: pipelineId },
+ });
+ }
}
- }
- hide() {
- this.dialogRef.close();
- }
+ hide() {
+ this.dialogRef.close();
+ }
}
diff --git a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.html b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.html
index 1bd25ee80..458863dbd 100644
--- a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.html
+++ b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.html
@@ -20,25 +20,54 @@
<div class="sp-dialog-content p-15" fxLayout="column">
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
<b><h2 class="welcome-animation">Hello!</h2></b>
- <b><h3>Thank you for using {{appConstants.APP_NAME}}.</h3></b>
+ <b
+ ><h3>Thank you for using {{ appConstants.APP_NAME }}.</h3></b
+ >
</div>
- <div><img src="assets/img/sp-pipeline-white-small.png"
- style="margin-left:auto;margin-right:auto;display:block;">
+ <div>
+ <img
+ src="assets/img/sp-pipeline-white-small.png"
+ style="margin-left: auto; margin-right: auto; display: block"
+ />
</div>
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column">
- <b>{{appConstants.APP_NAME}} is your self-service toolbox for real-time analytics.</b>
- <p>If you are using {{appConstants.APP_NAME}} for the first time, we recommend taking the interactive tour!</p>
+ <b
+ >{{ appConstants.APP_NAME }} is your self-service toolbox
+ for real-time analytics.</b
+ >
+ <p>
+ If you are using {{ appConstants.APP_NAME }} for the first
+ time, we recommend taking the interactive tour!
+ </p>
</div>
- <button mat-button mat-raised-button color="accent" (click)="startCreatePipelineTour()">Start Tour</button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ (click)="startCreatePipelineTour()"
+ >
+ Start Tour
+ </button>
</div>
</div>
<mat-divider></mat-divider>
<div class="sp-dialog-actions actions-align-right" fxLayout="row">
- <button mat-button mat-raised-button class="mat-basic" (click)="hideTourForever()" style="margin-right:10px;">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="hideTourForever()"
+ style="margin-right: 10px"
+ >
Do not show again
</button>
- <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ <button
+ mat-button
+ mat-raised-button
+ class="mat-basic"
+ (click)="close()"
+ >
Close
</button>
</div>
diff --git a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.scss b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.scss
index b0978136d..564502677 100644
--- a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.scss
+++ b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.scss
@@ -19,23 +19,23 @@
@import '../../../../scss/sp/sp-dialog.scss';
.welcome-animation {
- font-family: Arial;
- border-right: .1em solid black;
- width: 5ch;
- white-space: nowrap;
- overflow: hidden;
- -webkit-animation: typing 1s steps(5, end),
- blink-caret .5s step-end infinite alternate;
+ font-family: Arial;
+ border-right: 0.1em solid black;
+ width: 5ch;
+ white-space: nowrap;
+ overflow: hidden;
+ -webkit-animation: typing 1s steps(5, end),
+ blink-caret 0.5s step-end infinite alternate;
}
@keyframes typing {
- from {
- width: 0;
- }
+ from {
+ width: 0;
+ }
}
@keyframes blink-caret {
- 50% {
- border-color: transparent;
- }
-}
\ No newline at end of file
+ 50% {
+ border-color: transparent;
+ }
+}
diff --git a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
index 14bc15fd4..8690b4785 100644
--- a/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
+++ b/ui/src/app/editor/dialog/welcome-tour/welcome-tour.component.ts
@@ -25,45 +25,48 @@ import { UserAccount, UserInfo } from '@streampipes/platform-services';
import { ProfileService } from '../../../profile/profile.service';
@Component({
- selector: 'welcome-tour',
- templateUrl: './welcome-tour.component.html',
- styleUrls: ['./welcome-tour.component.scss']
+ selector: 'sp-welcome-tour',
+ templateUrl: './welcome-tour.component.html',
+ styleUrls: ['./welcome-tour.component.scss'],
})
export class WelcomeTourComponent implements OnInit {
+ @Input()
+ userInfo: UserInfo;
- @Input()
- userInfo: UserInfo;
+ currentUser: UserAccount;
- currentUser: UserAccount;
+ constructor(
+ private authService: AuthService,
+ private dialogRef: DialogRef<WelcomeTourComponent>,
+ private profileService: ProfileService,
+ private shepherdService: ShepherdService,
+ public appConstants: AppConstants,
+ ) {}
- constructor(private authService: AuthService,
- private dialogRef: DialogRef<WelcomeTourComponent>,
- private profileService: ProfileService,
- private shepherdService: ShepherdService,
- public appConstants: AppConstants) {
- }
+ ngOnInit(): void {
+ this.profileService
+ .getUserProfile(this.userInfo.username)
+ .subscribe(data => {
+ this.currentUser = data;
+ });
+ }
- ngOnInit(): void {
- this.profileService.getUserProfile(this.userInfo.username).subscribe(data => {
- this.currentUser = data;
- });
- }
+ startCreatePipelineTour() {
+ this.shepherdService.startCreatePipelineTour();
+ this.close();
+ }
- startCreatePipelineTour() {
- this.shepherdService.startCreatePipelineTour();
- this.close();
- }
-
- hideTourForever() {
- this.currentUser.hideTutorial = true;
- this.profileService.updateUserProfile(this.currentUser).subscribe(data => {
- this.authService.updateTokenAndUserInfo();
- this.close();
- });
- }
-
- close() {
- this.dialogRef.close();
- }
+ hideTourForever() {
+ this.currentUser.hideTutorial = true;
+ this.profileService
+ .updateUserProfile(this.currentUser)
+ .subscribe(data => {
+ this.authService.updateTokenAndUserInfo();
+ this.close();
+ });
+ }
+ close() {
+ this.dialogRef.close();
+ }
}
diff --git a/ui/src/app/editor/editor.component.html b/ui/src/app/editor/editor.component.html
index 0a2528145..ddd45dd0e 100644
--- a/ui/src/app/editor/editor.component.html
+++ b/ui/src/app/editor/editor.component.html
@@ -19,23 +19,42 @@
<div fxLayout="column" class="page-container">
<div class="fixed-height" fxLayout="row" fxFlex="100">
<div fxFlex="250px">
- <div fxFlex="100" fxLayout="column" fxLayoutAlign="center center" *ngIf="!allElementsLoaded">
- <mat-spinner [diameter]="30" color="accent" mode="indeterminate"></mat-spinner>
+ <div
+ fxFlex="100"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ *ngIf="!allElementsLoaded"
+ >
+ <mat-spinner
+ [diameter]="30"
+ color="accent"
+ mode="indeterminate"
+ ></mat-spinner>
<p>Loading pipeline elements...</p>
</div>
- <div id="shepherd-test"
- style="padding:0px;border-bottom:1px solid #ffffff;margin-right: 5px;">
- <pipeline-element-icon-stand
- [allElements]="allElements"
- *ngIf="allElementsLoaded"
- (startTourEmitter)="startCreatePipelineTour()">
- </pipeline-element-icon-stand>
+ <div
+ id="shepherd-test"
+ style="
+ padding: 0px;
+ border-bottom: 1px solid #ffffff;
+ margin-right: 5px;
+ "
+ >
+ <sp-pipeline-element-icon-stand
+ [allElements]="allElements"
+ *ngIf="allElementsLoaded"
+ (startTourEmitter)="startCreatePipelineTour()"
+ >
+ </sp-pipeline-element-icon-stand>
</div>
</div>
- <pipeline-assembly fxFlex="100" style="margin-left: 10px;"
- [rawPipelineModel]="rawPipelineModel"
- [allElements]="allElements"
- [currentModifiedPipelineId]="currentModifiedPipelineId">
- </pipeline-assembly>
+ <sp-pipeline-assembly
+ fxFlex="100"
+ style="margin-left: 10px"
+ [rawPipelineModel]="rawPipelineModel"
+ [allElements]="allElements"
+ [currentModifiedPipelineId]="currentModifiedPipelineId"
+ >
+ </sp-pipeline-assembly>
</div>
</div>
diff --git a/ui/src/app/editor/editor.component.scss b/ui/src/app/editor/editor.component.scss
index 58b8fb3d8..7eb1f8c3e 100644
--- a/ui/src/app/editor/editor.component.scss
+++ b/ui/src/app/editor/editor.component.scss
@@ -19,18 +19,18 @@
@import '../../scss/variables';
.text-color {
- color: var(--color-accent);
+ color: var(--color-accent);
}
.page-container {
- border: 0;
+ border: 0;
}
.border {
- border: 1px solid var(--color-bg-2);
+ border: 1px solid var(--color-bg-2);
}
.editor-canvas-options {
- padding: 0;
- background-color: var(--color-bg-1);
+ padding: 0;
+ background-color: var(--color-bg-1);
}
diff --git a/ui/src/app/editor/editor.component.ts b/ui/src/app/editor/editor.component.ts
index ddebcef2d..1085451e2 100644
--- a/ui/src/app/editor/editor.component.ts
+++ b/ui/src/app/editor/editor.component.ts
@@ -19,12 +19,17 @@
import { Component, OnInit } from '@angular/core';
import { EditorService } from './services/editor.service';
import { PipelineElementService } from '@streampipes/platform-services';
-import { PipelineElementConfig, PipelineElementUnion } from './model/editor.model';
-import { DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
-import { WelcomeTourComponent } from './dialog/welcome-tour/welcome-tour.component';
import {
- MissingElementsForTutorialComponent
-} from './dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component';
+ PipelineElementConfig,
+ PipelineElementUnion,
+} from './model/editor.model';
+import {
+ DialogService,
+ PanelType,
+ SpBreadcrumbService,
+} from '@streampipes/shared-ui';
+import { WelcomeTourComponent } from './dialog/welcome-tour/welcome-tour.component';
+import { MissingElementsForTutorialComponent } from './dialog/missing-elements-for-tutorial/missing-elements-for-tutorial.component';
import { ShepherdService } from '../services/tour/shepherd.service';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from '../services/auth.service';
@@ -33,127 +38,152 @@ import { AppConstants } from '../services/app.constants';
import { SpPipelineRoutes } from '../pipelines/pipelines.routes';
@Component({
- selector: 'editor',
- templateUrl: './editor.component.html',
- styleUrls: ['./editor.component.scss']
+ selector: 'sp-editor',
+ templateUrl: './editor.component.html',
+ styleUrls: ['./editor.component.scss'],
})
export class EditorComponent implements OnInit {
-
- allElements: PipelineElementUnion[] = [];
-
- rawPipelineModel: PipelineElementConfig[] = [];
- currentModifiedPipelineId: string;
-
- allElementsLoaded = false;
-
- requiredStreamForTutorialAppId: any = 'org.apache.streampipes.sources.simulator.flowrate1';
- requiredProcessorForTutorialAppId: any = 'org.apache.streampipes.processors.filters.jvm.numericalfilter';
- requiredSinkForTutorialAppId: any = 'org.apache.streampipes.sinks.internal.jvm.datalake';
- missingElementsForTutorial: any = [];
-
- isTutorialOpen = false;
-
- constructor(private editorService: EditorService,
- private pipelineElementService: PipelineElementService,
- private authService: AuthService,
- private dialogService: DialogService,
- private shepherdService: ShepherdService,
- private activatedRoute: ActivatedRoute,
- private appConstants: AppConstants,
- private breadcrumbService: SpBreadcrumbService) {
- }
-
- ngOnInit() {
- this.activatedRoute.params.subscribe(params => {
- if (params.pipelineId) {
- this.currentModifiedPipelineId = params.pipelineId;
- } else {
- this.breadcrumbService.updateBreadcrumb([SpPipelineRoutes.BASE, {label: 'New Pipeline'}]);
- }
- });
- zip(this.pipelineElementService.getDataStreams(),
- this.pipelineElementService.getDataProcessors(),
- this.pipelineElementService.getDataSinks()).subscribe(response => {
- this.allElements = this.allElements
- .concat(response[0])
- .concat(response[1])
- .concat(response[2])
- .sort((a, b) => {
- return a.name.localeCompare(b.name);
+ allElements: PipelineElementUnion[] = [];
+
+ rawPipelineModel: PipelineElementConfig[] = [];
+ currentModifiedPipelineId: string;
+
+ allElementsLoaded = false;
+
+ requiredStreamForTutorialAppId: any =
+ 'org.apache.streampipes.sources.simulator.flowrate1';
+ requiredProcessorForTutorialAppId: any =
+ 'org.apache.streampipes.processors.filters.jvm.numericalfilter';
+ requiredSinkForTutorialAppId: any =
+ 'org.apache.streampipes.sinks.internal.jvm.datalake';
+ missingElementsForTutorial: any = [];
+
+ isTutorialOpen = false;
+
+ constructor(
+ private editorService: EditorService,
+ private pipelineElementService: PipelineElementService,
+ private authService: AuthService,
+ private dialogService: DialogService,
+ private shepherdService: ShepherdService,
+ private activatedRoute: ActivatedRoute,
+ private appConstants: AppConstants,
+ private breadcrumbService: SpBreadcrumbService,
+ ) {}
+
+ ngOnInit() {
+ this.activatedRoute.params.subscribe(params => {
+ if (params.pipelineId) {
+ this.currentModifiedPipelineId = params.pipelineId;
+ } else {
+ this.breadcrumbService.updateBreadcrumb([
+ SpPipelineRoutes.BASE,
+ { label: 'New Pipeline' },
+ ]);
+ }
});
- this.allElementsLoaded = true;
- this.checkForTutorial();
- });
- }
-
- checkForTutorial() {
- const currentUser = this.authService.getCurrentUser();
- if (currentUser.showTutorial && !this.isTutorialOpen) {
- if (this.requiredPipelineElementsForTourPresent()) {
- this.isTutorialOpen = true;
- this.dialogService.open(WelcomeTourComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Welcome to ' + this.appConstants.APP_NAME,
- data: {
- 'userInfo': currentUser
- }
+ zip(
+ this.pipelineElementService.getDataStreams(),
+ this.pipelineElementService.getDataProcessors(),
+ this.pipelineElementService.getDataSinks(),
+ ).subscribe(response => {
+ this.allElements = this.allElements
+ .concat(response[0])
+ .concat(response[1])
+ .concat(response[2])
+ .sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
+ this.allElementsLoaded = true;
+ this.checkForTutorial();
});
- }
}
- }
-
- startCreatePipelineTour() {
- if (this.requiredPipelineElementsForTourPresent()) {
- this.shepherdService.startCreatePipelineTour();
- } else {
- this.missingElementsForTutorial = [];
- if (!this.requiredStreamForTourPresent()) {
- this.missingElementsForTutorial.push({'name': 'Flow Rate 1', 'appId': this.requiredStreamForTutorialAppId});
- }
- if (!this.requiredProcessorForTourPresent()) {
- this.missingElementsForTutorial.push({
- 'name': 'Numerical Filter',
- 'appId': this.requiredProcessorForTutorialAppId
- });
- }
- if (!this.requiredSinkForTourPresent()) {
- this.missingElementsForTutorial.push({'name': 'Dashboard Sink', 'appId': this.requiredSinkForTutorialAppId});
- }
-
- this.dialogService.open(MissingElementsForTutorialComponent, {
- panelType: PanelType.STANDARD_PANEL,
- title: 'Tutorial requires pipeline elements',
- data: {
- 'missingElementsForTutorial': this.missingElementsForTutorial
+
+ checkForTutorial() {
+ const currentUser = this.authService.getCurrentUser();
+ if (currentUser.showTutorial && !this.isTutorialOpen) {
+ if (this.requiredPipelineElementsForTourPresent()) {
+ this.isTutorialOpen = true;
+ this.dialogService.open(WelcomeTourComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Welcome to ' + this.appConstants.APP_NAME,
+ data: {
+ userInfo: currentUser,
+ },
+ });
+ }
}
- });
}
- }
-
- requiredPipelineElementsForTourPresent() {
- return this.requiredStreamForTourPresent() &&
- this.requiredProcessorForTourPresent() &&
- this.requiredSinkForTourPresent();
- }
-
- requiredStreamForTourPresent() {
- return this.requiredPeForTourPresent(this.allElements,
- this.requiredStreamForTutorialAppId);
- }
-
- requiredProcessorForTourPresent() {
- return this.requiredPeForTourPresent(this.allElements,
- this.requiredProcessorForTutorialAppId);
- }
-
- requiredSinkForTourPresent() {
- return this.requiredPeForTourPresent(this.allElements,
- this.requiredSinkForTutorialAppId);
- }
-
- requiredPeForTourPresent(list, appId) {
- return list && list.some(el => {
- return el.appId === appId;
- });
- }
+
+ startCreatePipelineTour() {
+ if (this.requiredPipelineElementsForTourPresent()) {
+ this.shepherdService.startCreatePipelineTour();
+ } else {
+ this.missingElementsForTutorial = [];
+ if (!this.requiredStreamForTourPresent()) {
+ this.missingElementsForTutorial.push({
+ name: 'Flow Rate 1',
+ appId: this.requiredStreamForTutorialAppId,
+ });
+ }
+ if (!this.requiredProcessorForTourPresent()) {
+ this.missingElementsForTutorial.push({
+ name: 'Numerical Filter',
+ appId: this.requiredProcessorForTutorialAppId,
+ });
+ }
+ if (!this.requiredSinkForTourPresent()) {
+ this.missingElementsForTutorial.push({
+ name: 'Dashboard Sink',
+ appId: this.requiredSinkForTutorialAppId,
+ });
+ }
+
+ this.dialogService.open(MissingElementsForTutorialComponent, {
+ panelType: PanelType.STANDARD_PANEL,
+ title: 'Tutorial requires pipeline elements',
+ data: {
+ missingElementsForTutorial: this.missingElementsForTutorial,
+ },
+ });
+ }
+ }
+
+ requiredPipelineElementsForTourPresent() {
+ return (
+ this.requiredStreamForTourPresent() &&
+ this.requiredProcessorForTourPresent() &&
+ this.requiredSinkForTourPresent()
+ );
+ }
+
+ requiredStreamForTourPresent() {
+ return this.requiredPeForTourPresent(
+ this.allElements,
+ this.requiredStreamForTutorialAppId,
+ );
+ }
+
+ requiredProcessorForTourPresent() {
+ return this.requiredPeForTourPresent(
+ this.allElements,
+ this.requiredProcessorForTutorialAppId,
+ );
+ }
+
+ requiredSinkForTourPresent() {
+ return this.requiredPeForTourPresent(
+ this.allElements,
+ this.requiredSinkForTutorialAppId,
+ );
+ }
+
+ requiredPeForTourPresent(list, appId) {
+ return (
+ list &&
+ list.some(el => {
+ return el.appId === appId;
+ })
+ );
+ }
}
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index 284ce1faa..fb96615f3 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -63,7 +63,6 @@ import { PipelineElementTypeFilterPipe } from './services/pipeline-element-type-
import { PipelineElementNameFilterPipe } from './services/pipeline-element-name-filter.pipe';
import { PipelineElementGroupFilterPipe } from './services/pipeline-element-group-filter.pipe';
-
@NgModule({
imports: [
CoreUiModule,
@@ -109,21 +108,11 @@ import { PipelineElementGroupFilterPipe } from './services/pipeline-element-grou
PropertySelectionComponent,
SavePipelineComponent,
SafeCss,
- WelcomeTourComponent
- ],
- providers: [
- SemanticTypeUtilsService,
- SafeCss,
+ WelcomeTourComponent,
],
- exports: [
- EditorComponent,
- PipelineComponent,
- PipelineElementComponent
- ]
+ providers: [SemanticTypeUtilsService, SafeCss],
+ exports: [EditorComponent, PipelineComponent, PipelineElementComponent],
})
export class EditorModule {
-
- constructor() {
- }
-
+ constructor() {}
}
diff --git a/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts b/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts
index 36b1a5de7..02730ebad 100644
--- a/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts
+++ b/ui/src/app/editor/filter/enabled-pipeline-element.filter.ts
@@ -20,14 +20,17 @@ import { Pipe, PipeTransform } from '@angular/core';
import { PipelineElementConfig } from '../model/editor.model';
@Pipe({
- name: 'enabledPipelineElement',
- pure: false
+ name: 'enabledPipelineElement',
+ pure: false,
})
export class EnabledPipelineElementFilter implements PipeTransform {
- transform(items: PipelineElementConfig[]): any {
- if (!items) {
- return items;
+ transform(items: PipelineElementConfig[]): any {
+ if (!items) {
+ return items;
+ }
+ return items.filter(
+ item =>
+ item.settings.disabled === undefined || !item.settings.disabled,
+ );
}
- return items.filter(item => item.settings.disabled === undefined || !item.settings.disabled);
- }
}
diff --git a/ui/src/app/editor/model/editor.model.ts b/ui/src/app/editor/model/editor.model.ts
index 45945be6b..61c651a99 100644
--- a/ui/src/app/editor/model/editor.model.ts
+++ b/ui/src/app/editor/model/editor.model.ts
@@ -16,79 +16,87 @@
*
*/
-import { DataProcessorInvocation, DataSinkInvocation, SpDataSet, SpDataStream } from '@streampipes/platform-services';
+import {
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ SpDataSet,
+ SpDataStream,
+} from '@streampipes/platform-services';
import { InjectionToken } from '@angular/core';
export interface PipelineElementHolder {
- [key: string]: PipelineElementUnion[];
+ [key: string]: PipelineElementUnion[];
}
export interface PipelineElementPosition {
- x: number;
- y: number;
+ x: number;
+ y: number;
}
export enum PipelineElementConfigurationStatus {
- OK = 1,
- MODIFIED,
- INCOMPLETE,
+ OK = 1,
+ MODIFIED,
+ INCOMPLETE,
}
export interface PipelineElementConfig {
- type: string;
- settings: {
- openCustomize: boolean,
- preview: boolean,
- displaySettings: string,
- connectable: string,
- disabled: boolean,
- loadingStatus: boolean,
- completed: PipelineElementConfigurationStatus
- position: {
- x: number,
- y: number
- }
- };
- payload: PipelineElementUnion;
+ type: string;
+ settings: {
+ openCustomize: boolean;
+ preview: boolean;
+ displaySettings: string;
+ connectable: string;
+ disabled: boolean;
+ loadingStatus: boolean;
+ completed: PipelineElementConfigurationStatus;
+ position: {
+ x: number;
+ y: number;
+ };
+ };
+ payload: PipelineElementUnion;
}
export interface PipelineElementRecommendationLayout {
- skewStyle: any;
- unskewStyle: any;
- unskewStyleLabel: any;
- type: string;
+ skewStyle: any;
+ unskewStyle: any;
+ unskewStyleLabel: any;
+ type: string;
}
export enum PipelineElementType {
- DataSet,
- DataStream,
- DataProcessor,
- DataSink
+ DataSet,
+ DataStream,
+ DataProcessor,
+ DataSink,
}
export interface TabsModel {
- title: string;
- type: PipelineElementIdentifier;
- shorthand: string;
+ title: string;
+ type: PipelineElementIdentifier;
+ shorthand: string;
}
export type PipelineElementUnion =
- SpDataSet
+ | SpDataSet
| SpDataStream
| DataProcessorInvocation
| DataSinkInvocation;
-export type InvocablePipelineElementUnion = DataProcessorInvocation | DataSinkInvocation;
+export type InvocablePipelineElementUnion =
+ | DataProcessorInvocation
+ | DataSinkInvocation;
export const PIPELINE_ELEMENT_TOKEN = new InjectionToken<{}>('pipelineElement');
-export type PipelineElementIdentifier = 'org.apache.streampipes.model.SpDataStream'
+export type PipelineElementIdentifier =
+ | 'org.apache.streampipes.model.SpDataStream'
| 'org.apache.streampipes.model.SpDataSet'
| 'org.apache.streampipes.model.graph.DataProcessorInvocation'
| 'org.apache.streampipes.model.graph.DataSinkInvocation';
export interface PeCategory {
- code: string;
- label: string;
- description: string;
+ code: string;
+ label: string;
+ description: string;
}
diff --git a/ui/src/app/editor/model/jsplumb.model.ts b/ui/src/app/editor/model/jsplumb.model.ts
index 4b46941d7..5c9a55e72 100644
--- a/ui/src/app/editor/model/jsplumb.model.ts
+++ b/ui/src/app/editor/model/jsplumb.model.ts
@@ -17,10 +17,10 @@
*/
export interface JsplumbSettings {
- dotRadius: number;
- lineWidth: number;
- arrowWidth: number;
- arrowLength: number;
- arrowLineWidth: number;
- curviness: number;
+ dotRadius: number;
+ lineWidth: number;
+ arrowWidth: number;
+ arrowLength: number;
+ arrowLineWidth: number;
+ curviness: number;
}
diff --git a/ui/src/app/editor/services/editor.service.ts b/ui/src/app/editor/services/editor.service.ts
index 99c19e397..6aef9e793 100644
--- a/ui/src/app/editor/services/editor.service.ts
+++ b/ui/src/app/editor/services/editor.service.ts
@@ -19,114 +19,164 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
- DataProcessorInvocation,
- DataSetModificationMessage,
- DataSinkInvocation,
- Pipeline,
- PipelineCanvasMetadata,
- PipelineElementRecommendationMessage,
- PipelineModificationMessage,
- PipelinePreviewModel,
- PlatformServicesCommons,
- SpDataSet,
- SpDataStream
+ DataProcessorInvocation,
+ DataSetModificationMessage,
+ DataSinkInvocation,
+ Pipeline,
+ PipelineCanvasMetadata,
+ PipelineElementRecommendationMessage,
+ PipelineModificationMessage,
+ PipelinePreviewModel,
+ PlatformServicesCommons,
+ SpDataSet,
+ SpDataStream,
} from '@streampipes/platform-services';
import { Observable, Subject } from 'rxjs';
-import { PeCategory, PipelineElementConfig, PipelineElementUnion } from '../model/editor.model';
+import {
+ PeCategory,
+ PipelineElementConfig,
+ PipelineElementUnion,
+} from '../model/editor.model';
import { DialogService, PanelType } from '@streampipes/shared-ui';
import { HelpComponent } from '../dialog/help/help.component';
import { map } from 'rxjs/operators';
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class EditorService {
-
private pipelineElementConfigured = new Subject<string>();
- public pipelineElementConfigured$ = this.pipelineElementConfigured.asObservable();
+ public pipelineElementConfigured$ =
+ this.pipelineElementConfigured.asObservable();
pipelineAssemblyEmpty = true;
- constructor(private http: HttpClient,
- private platformServicesCommons: PlatformServicesCommons,
- private dialogService: DialogService) {
- }
+ constructor(
+ private http: HttpClient,
+ private platformServicesCommons: PlatformServicesCommons,
+ private dialogService: DialogService,
+ ) {}
get apiBasePath() {
- return this.platformServicesCommons.apiBasePath;
+ return this.platformServicesCommons.apiBasePath;
}
- recommendPipelineElement(pipeline: Pipeline,
- currentDomId: string): Observable<PipelineElementRecommendationMessage> {
- return this.http.post(this.pipelinesResourceUrl + '/recommend/' + currentDomId, pipeline)
- .pipe(map(data => PipelineElementRecommendationMessage.fromData(data as any)));
+ recommendPipelineElement(
+ pipeline: Pipeline,
+ currentDomId: string,
+ ): Observable<PipelineElementRecommendationMessage> {
+ return this.http
+ .post(
+ this.pipelinesResourceUrl + '/recommend/' + currentDomId,
+ pipeline,
+ )
+ .pipe(
+ map(data =>
+ PipelineElementRecommendationMessage.fromData(data as any),
+ ),
+ );
}
updatePartialPipeline(pipeline): Observable<PipelineModificationMessage> {
- return this.http.post(this.pipelinesResourceUrl + '/update', pipeline)
- .pipe(map(data => {
- return PipelineModificationMessage.fromData(data as any);
- }));
+ return this.http
+ .post(this.pipelinesResourceUrl + '/update', pipeline)
+ .pipe(
+ map(data => {
+ return PipelineModificationMessage.fromData(data as any);
+ }),
+ );
+ }
+
+ updateDataSet(dataSet): Observable<DataSetModificationMessage> {
+ return this.http
+ .post(
+ this.platformServicesCommons.apiBasePath +
+ '/pipelines/update/dataset',
+ dataSet,
+ )
+ .pipe(
+ map(data =>
+ DataSetModificationMessage.fromData(
+ data as DataSetModificationMessage,
+ ),
+ ),
+ );
}
- updateDataSet(dataSet): Observable<DataSetModificationMessage> {
- return this.http.post(this.platformServicesCommons.apiBasePath + '/pipelines/update/dataset', dataSet)
- .pipe(map(data => DataSetModificationMessage.fromData(data as DataSetModificationMessage)));
- }
-
getCachedPipeline(): Observable<PipelineElementConfig[]> {
- return this.http.get(this.apiBasePath + '/pipeline-cache')
- .pipe(map(result => {
- if (result === null) {
- return [];
- } else {
- const configs: PipelineElementConfig[] = result as PipelineElementConfig[];
- configs.map(config => config.payload = this.convert(config.payload));
- return configs;
- }
- }));
+ return this.http.get(this.apiBasePath + '/pipeline-cache').pipe(
+ map(result => {
+ if (result === null) {
+ return [];
+ } else {
+ const configs: PipelineElementConfig[] =
+ result as PipelineElementConfig[];
+ configs.map(
+ config =>
+ (config.payload = this.convert(config.payload)),
+ );
+ return configs;
+ }
+ }),
+ );
}
getCachedPipelineCanvasMetadata(): Observable<PipelineCanvasMetadata> {
- return this.http.get(this.apiBasePath + '/pipeline-canvas-cache')
- .pipe(map(response => {
- return PipelineCanvasMetadata.fromData(response as any);
- }));
+ return this.http.get(this.apiBasePath + '/pipeline-canvas-cache').pipe(
+ map(response => {
+ return PipelineCanvasMetadata.fromData(response as any);
+ }),
+ );
}
convert(payload: any) {
- if (payload['@class'] === 'org.apache.streampipes.model.SpDataSet') {
- return SpDataSet.fromData(payload as SpDataSet);
- } else if (payload['@class'] === 'org.apache.streampipes.model.SpDataStream') {
- return SpDataStream.fromData(payload as SpDataStream);
- } else if (payload['@class'] === 'org.apache.streampipes.model.graph.DataProcessorInvocation') {
- return DataProcessorInvocation.fromData(payload as DataProcessorInvocation);
- } else {
- return DataSinkInvocation.fromData(payload as DataSinkInvocation);
- }
+ if (payload['@class'] === 'org.apache.streampipes.model.SpDataSet') {
+ return SpDataSet.fromData(payload as SpDataSet);
+ } else if (
+ payload['@class'] === 'org.apache.streampipes.model.SpDataStream'
+ ) {
+ return SpDataStream.fromData(payload as SpDataStream);
+ } else if (
+ payload['@class'] ===
+ 'org.apache.streampipes.model.graph.DataProcessorInvocation'
+ ) {
+ return DataProcessorInvocation.fromData(
+ payload as DataProcessorInvocation,
+ );
+ } else {
+ return DataSinkInvocation.fromData(payload as DataSinkInvocation);
+ }
}
getEpCategories(): Observable<PeCategory[]> {
- return this.http.get(this.platformServicesCommons.apiBasePath + '/categories/ep')
- .pipe(map(response => response as PeCategory[]));
+ return this.http
+ .get(this.platformServicesCommons.apiBasePath + '/categories/ep')
+ .pipe(map(response => response as PeCategory[]));
}
getEpaCategories(): Observable<PeCategory[]> {
- return this.http.get(this.platformServicesCommons.apiBasePath + '/categories/epa')
- .pipe(map(response => response as PeCategory[]));
+ return this.http
+ .get(this.platformServicesCommons.apiBasePath + '/categories/epa')
+ .pipe(map(response => response as PeCategory[]));
}
getEcCategories(): Observable<PeCategory[]> {
- return this.http.get(this.platformServicesCommons.apiBasePath + '/categories/ec')
- .pipe(map(response => response as PeCategory[]));
+ return this.http
+ .get(this.platformServicesCommons.apiBasePath + '/categories/ec')
+ .pipe(map(response => response as PeCategory[]));
}
updateCachedPipeline(rawPipelineModel: any) {
- return this.http.post(this.apiBasePath + '/pipeline-cache', rawPipelineModel);
+ return this.http.post(
+ this.apiBasePath + '/pipeline-cache',
+ rawPipelineModel,
+ );
}
updateCachedCanvasMetadata(pipelineCanvasMetadata: PipelineCanvasMetadata) {
- return this.http.post(this.platformServicesCommons.apiBasePath
- + '/pipeline-canvas-cache', pipelineCanvasMetadata);
+ return this.http.post(
+ this.platformServicesCommons.apiBasePath + '/pipeline-canvas-cache',
+ pipelineCanvasMetadata,
+ );
}
removePipelineFromCache() {
@@ -134,7 +184,7 @@ export class EditorService {
}
removeCanvasMetadataFromCache() {
- return this.http.delete(this.apiBasePath + '/pipeline-canvas-cache');
+ return this.http.delete(this.apiBasePath + '/pipeline-canvas-cache');
}
private get pipelinesResourceUrl() {
@@ -155,28 +205,40 @@ export class EditorService {
title: pipelineElement.name,
width: '70vw',
data: {
- 'pipelineElement': pipelineElement
- }
+ pipelineElement: pipelineElement,
+ },
});
}
- initiatePipelinePreview(pipeline: Pipeline): Observable<PipelinePreviewModel> {
- return this.http.post(this.pipelinePreviewBasePath, pipeline)
- .pipe(map(response => PipelinePreviewModel.fromData(response as any)));
+ initiatePipelinePreview(
+ pipeline: Pipeline,
+ ): Observable<PipelinePreviewModel> {
+ return this.http
+ .post(this.pipelinePreviewBasePath, pipeline)
+ .pipe(
+ map(response => PipelinePreviewModel.fromData(response as any)),
+ );
}
- deletePipelinePreviewRequest(previewId: string): Observable<any> {
- return this.http.delete(this.pipelinePreviewBasePath + '/' + previewId);
- }
+ deletePipelinePreviewRequest(previewId: string): Observable<any> {
+ return this.http.delete(this.pipelinePreviewBasePath + '/' + previewId);
+ }
- getPipelinePreviewResult(previewId: string, pipelineElementDomId: string): Observable<any> {
- return this.http.get(this.pipelinePreviewBasePath
- + '/'
- + previewId
- + '/' + pipelineElementDomId, {headers: { ignoreLoadingBar: '' }});
- }
+ getPipelinePreviewResult(
+ previewId: string,
+ pipelineElementDomId: string,
+ ): Observable<any> {
+ return this.http.get(
+ this.pipelinePreviewBasePath +
+ '/' +
+ previewId +
+ '/' +
+ pipelineElementDomId,
+ { headers: { ignoreLoadingBar: '' } },
+ );
+ }
- get pipelinePreviewBasePath() {
- return this.apiBasePath + '/pipeline-element-preview';
- }
+ get pipelinePreviewBasePath() {
+ return this.apiBasePath + '/pipeline-element-preview';
+ }
}
diff --git a/ui/src/app/editor/services/jsplumb-bridge.service.ts b/ui/src/app/editor/services/jsplumb-bridge.service.ts
index 4652d8508..bed379230 100644
--- a/ui/src/app/editor/services/jsplumb-bridge.service.ts
+++ b/ui/src/app/editor/services/jsplumb-bridge.service.ts
@@ -20,16 +20,18 @@ import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
import { EndpointSelection, SelectOptions } from '@jsplumb/core';
export class JsplumbBridge {
-
- constructor(private jsPlumbInstance: BrowserJsPlumbInstance) {
- }
+ constructor(private jsPlumbInstance: BrowserJsPlumbInstance) {}
activateEndpoint(endpointId: string, endpointEnabled: boolean) {
const endpoint = this.getEndpointById(endpointId);
endpoint.enabled = endpointEnabled;
}
- activateEndpointWithType(endpointId: string, endpointEnabled: boolean, endpointType: string) {
+ activateEndpointWithType(
+ endpointId: string,
+ endpointEnabled: boolean,
+ endpointType: string,
+ ) {
this.activateEndpoint(endpointId, endpointEnabled);
this.setEndpointType(endpointId, endpointType);
}
@@ -69,7 +71,7 @@ export class JsplumbBridge {
return this.jsPlumbInstance.bind(event, fn);
}
- selectEndpoints(endpoint?): EndpointSelection {
+ selectEndpoints(endpoint?): EndpointSelection {
if (endpoint === undefined) {
return this.jsPlumbInstance.selectEndpoints();
} else {
@@ -78,11 +80,15 @@ export class JsplumbBridge {
}
getTargetEndpoint(id: string): EndpointSelection {
- return this.jsPlumbInstance.selectEndpoints({target: document.getElementById(id)});
+ return this.jsPlumbInstance.selectEndpoints({
+ target: document.getElementById(id),
+ });
}
getEndpointCount(id: string): number {
- return this.jsPlumbInstance.selectEndpoints({element: document.getElementById(id)}).length;
+ return this.jsPlumbInstance.selectEndpoints({
+ element: document.getElementById(id),
+ }).length;
}
detach(connection) {
@@ -93,10 +99,12 @@ export class JsplumbBridge {
return this.jsPlumbInstance.getConnections(filter);
}
- addEndpoint(pipelineElementDomId: string,
- options: any) {
+ addEndpoint(pipelineElementDomId: string, options: any) {
options.cssClass = 'sp-no-pan';
- return this.jsPlumbInstance.addEndpoint(document.getElementById(pipelineElementDomId), options);
+ return this.jsPlumbInstance.addEndpoint(
+ document.getElementById(pipelineElementDomId),
+ options,
+ );
}
connect(connection) {
@@ -104,7 +112,9 @@ export class JsplumbBridge {
}
removeAllEndpoints(element) {
- this.jsPlumbInstance.removeAllEndpoints(document.getElementById(element));
+ this.jsPlumbInstance.removeAllEndpoints(
+ document.getElementById(element),
+ );
}
registerEndpointTypes(typeInfo) {
diff --git a/ui/src/app/editor/services/jsplumb-config.service.ts b/ui/src/app/editor/services/jsplumb-config.service.ts
index 76d0f38d9..b86a44fcd 100644
--- a/ui/src/app/editor/services/jsplumb-config.service.ts
+++ b/ui/src/app/editor/services/jsplumb-config.service.ts
@@ -22,158 +22,166 @@ import { BezierConnector } from '@jsplumb/connector-bezier';
import { EndpointTypeDescriptor } from '@jsplumb/core';
import { ArrowOverlayOptions } from '@jsplumb/common';
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class JsplumbConfigService {
-
- constructor() {
- }
-
- getEditorConfig() {
- return this.makeConfig(this.makeSettings(12, 5, 30, 30, 2, 80));
- }
-
- getPreviewConfig() {
- return this.makeConfig(this.makeSettings(6, 2, 15, 15, 1, 40));
- }
-
- getEndpointTypeConfig(): Record<string, EndpointTypeDescriptor> {
- return {
- 'empty': {
- paintStyle: {
- fill: 'white',
- stroke: '#9E9E9E',
- strokeWidth: 1,
- }
- },
- 'token': {
- paintStyle: {
- fill: '#BDBDBD',
- stroke: '#9E9E9E',
- strokeWidth: 1
- },
- hoverPaintStyle: {
- fill: '#9E9E9E',
- stroke: '#9E9E9E',
- strokeWidth: 2,
- }
- },
- 'highlight': {
- paintStyle: {
- fill: 'white',
- stroke: '#4CAF50',
- strokeWidth: 2
- }
- }
- };
- }
-
- getConnectorStyleSuccess() {
- return {
- stroke: '#6ab26c',
- outlineStroke: '#6ab26c',
- strokeWidth: 5
- };
- }
-
- getConnectorStyleError() {
- return {
- stroke: '#b74e4e',
- outlineStroke: '#b74e4e',
- strokeWidth: 5
- };
- }
-
- getConnectorStyleWarning() {
- return {
- outlineStroke: '#d3c545',
- stroke: '#d3c545',
- strokeWidth: 5
- };
- }
-
- getDefaultConnectorStyle(settings) {
- return {stroke: '#BDBDBD', outlineStroke: '#BDBDBD', strokeWidth: settings.lineWidth};
- }
-
- getDefaultConnector(settings) {
- return {type: BezierConnector.type, options: {curviness: settings.curviness}};
- }
-
- getDefaultEndpoint(settings) {
- return {type: 'Dot', options: {radius: settings.dotRadius}};
- }
-
- makeConfig(settings: JsplumbSettings) {
- const config = {} as any;
- config.streamEndpointOptions = this.makeStreamEndpointOptions(settings);
- config.sepaEndpointOptions = this.makeSepaEndpointOptions(settings);
- config.leftTargetPointOptions = this.makeLeftTargetPointOptions(settings);
- return config;
- }
-
- makeSettings(dotRadius: number,
- lineWidth: number,
- arrowWidth: number,
- arrowLength: number,
- arrowLineWidth: number,
- curviness: number) {
- const settings = {} as JsplumbSettings;
- settings.dotRadius = dotRadius;
- settings.lineWidth = lineWidth;
- settings.arrowWidth = arrowWidth;
- settings.arrowLength = arrowLength;
- settings.arrowLineWidth = arrowLineWidth;
- settings.curviness = curviness;
- return settings;
- }
-
- makeStreamEndpointOptions(settings: JsplumbSettings) {
- return {
- ...this.makeDefaultOutputPortOptions(settings),
- type: 'token',
- };
- }
-
- makeSepaEndpointOptions(settings) {
- return {
- ...this.makeDefaultOutputPortOptions(settings),
- type: 'token',
- parameters: {
- endpointType: 'output'
- }
- };
- }
-
- makeDefaultOutputPortOptions(settings) {
- return {
- endpoint: this.getDefaultEndpoint(settings),
- connectorStyle: this.getDefaultConnectorStyle(settings),
- connector: this.getDefaultConnector(settings),
- source: true,
- maxConnections: -1,
- anchor: 'Right',
- connectorOverlays: [this.defaultConnectorOverlay(settings)],
- };
- }
-
- makeLeftTargetPointOptions(settings) {
- return {
- endpoint: {type: 'Dot', options: {radius: settings.dotRadius}},
- type: 'empty',
- anchor: 'Left',
- target: true
- };
- }
-
- defaultConnectorOverlay(settings): ArrowOverlayOptions {
- return {
- type: 'Arrow', options: {
- width: settings.arrowWidth,
- length: settings.arrowLength,
- location: 0.5,
- id: 'arrow'
- }
- };
- }
-
+ constructor() {}
+
+ getEditorConfig() {
+ return this.makeConfig(this.makeSettings(12, 5, 30, 30, 2, 80));
+ }
+
+ getPreviewConfig() {
+ return this.makeConfig(this.makeSettings(6, 2, 15, 15, 1, 40));
+ }
+
+ getEndpointTypeConfig(): Record<string, EndpointTypeDescriptor> {
+ return {
+ empty: {
+ paintStyle: {
+ fill: 'white',
+ stroke: '#9E9E9E',
+ strokeWidth: 1,
+ },
+ },
+ token: {
+ paintStyle: {
+ fill: '#BDBDBD',
+ stroke: '#9E9E9E',
+ strokeWidth: 1,
+ },
+ hoverPaintStyle: {
+ fill: '#9E9E9E',
+ stroke: '#9E9E9E',
+ strokeWidth: 2,
+ },
+ },
+ highlight: {
+ paintStyle: {
+ fill: 'white',
+ stroke: '#4CAF50',
+ strokeWidth: 2,
+ },
+ },
+ };
+ }
+
+ getConnectorStyleSuccess() {
+ return {
+ stroke: '#6ab26c',
+ outlineStroke: '#6ab26c',
+ strokeWidth: 5,
+ };
+ }
+
+ getConnectorStyleError() {
+ return {
+ stroke: '#b74e4e',
+ outlineStroke: '#b74e4e',
+ strokeWidth: 5,
+ };
+ }
+
+ getConnectorStyleWarning() {
+ return {
+ outlineStroke: '#d3c545',
+ stroke: '#d3c545',
+ strokeWidth: 5,
+ };
+ }
+
+ getDefaultConnectorStyle(settings) {
+ return {
+ stroke: '#BDBDBD',
+ outlineStroke: '#BDBDBD',
+ strokeWidth: settings.lineWidth,
+ };
+ }
+
+ getDefaultConnector(settings) {
+ return {
+ type: BezierConnector.type,
+ options: { curviness: settings.curviness },
+ };
+ }
+
+ getDefaultEndpoint(settings) {
+ return { type: 'Dot', options: { radius: settings.dotRadius } };
+ }
+
+ makeConfig(settings: JsplumbSettings) {
+ const config = {} as any;
+ config.streamEndpointOptions = this.makeStreamEndpointOptions(settings);
+ config.sepaEndpointOptions = this.makeSepaEndpointOptions(settings);
+ config.leftTargetPointOptions =
+ this.makeLeftTargetPointOptions(settings);
+ return config;
+ }
+
+ makeSettings(
+ dotRadius: number,
+ lineWidth: number,
+ arrowWidth: number,
+ arrowLength: number,
+ arrowLineWidth: number,
+ curviness: number,
+ ) {
+ const settings = {} as JsplumbSettings;
+ settings.dotRadius = dotRadius;
+ settings.lineWidth = lineWidth;
+ settings.arrowWidth = arrowWidth;
+ settings.arrowLength = arrowLength;
+ settings.arrowLineWidth = arrowLineWidth;
+ settings.curviness = curviness;
+ return settings;
+ }
+
+ makeStreamEndpointOptions(settings: JsplumbSettings) {
+ return {
+ ...this.makeDefaultOutputPortOptions(settings),
+ type: 'token',
+ };
+ }
+
+ makeSepaEndpointOptions(settings) {
+ return {
+ ...this.makeDefaultOutputPortOptions(settings),
+ type: 'token',
+ parameters: {
+ endpointType: 'output',
+ },
+ };
+ }
+
+ makeDefaultOutputPortOptions(settings) {
+ return {
+ endpoint: this.getDefaultEndpoint(settings),
+ connectorStyle: this.getDefaultConnectorStyle(settings),
+ connector: this.getDefaultConnector(settings),
+ source: true,
+ maxConnections: -1,
+ anchor: 'Right',
+ connectorOverlays: [this.defaultConnectorOverlay(settings)],
+ };
+ }
+
+ makeLeftTargetPointOptions(settings) {
+ return {
+ endpoint: { type: 'Dot', options: { radius: settings.dotRadius } },
+ type: 'empty',
+ anchor: 'Left',
+ target: true,
+ };
+ }
+
+ defaultConnectorOverlay(settings): ArrowOverlayOptions {
+ return {
+ type: 'Arrow',
+ options: {
+ width: settings.arrowWidth,
+ length: settings.arrowLength,
+ location: 0.5,
+ id: 'arrow',
+ },
+ };
+ }
}
diff --git a/ui/src/app/editor/services/jsplumb-endpoint.service.ts b/ui/src/app/editor/services/jsplumb-endpoint.service.ts
index e9786dd8c..01b3ac574 100644
--- a/ui/src/app/editor/services/jsplumb-endpoint.service.ts
+++ b/ui/src/app/editor/services/jsplumb-endpoint.service.ts
@@ -19,45 +19,47 @@
import { Injectable } from '@angular/core';
import { JsplumbConfigService } from './jsplumb-config.service';
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class JsplumbEndpointService {
+ constructor(private jsplumbConfigService: JsplumbConfigService) {}
- constructor(private jsplumbConfigService: JsplumbConfigService) {
-
- }
-
- getJsplumbConfig(preview): any {
- return preview ? this.jsplumbConfigService.getPreviewConfig() : this.jsplumbConfigService.getEditorConfig();
- }
-
- getStreamEndpoint(preview: boolean,
- pipelineElementDomId: string) {
- const jsplumbConfig = this.getJsplumbConfig(preview);
- const config = jsplumbConfig.streamEndpointOptions;
- config.uuid = 'out-' + pipelineElementDomId;
- return config;
- }
-
- getInputEndpoint(preview, pipelineElementDomId, index): any {
- const jsplumbConfig = this.getJsplumbConfig(preview);
- const inConfig = jsplumbConfig.leftTargetPointOptions;
- inConfig.uuid = 'in-' + index + '-' + pipelineElementDomId;
- return inConfig;
- }
-
- getOutputEndpoint(preview, pipelineElementDomId): any {
- const jsplumbConfig = this.getJsplumbConfig(preview);
- const outConfig = jsplumbConfig.sepaEndpointOptions;
- outConfig.uuid = 'out-' + pipelineElementDomId;
- return outConfig;
- }
-
- getNewTargetPoint(preview, x, y, pipelineElementDomId, index): any {
- const inConfig = this.getInputEndpoint(preview, pipelineElementDomId, index);
- inConfig.type = 'empty';
- inConfig.anchor = [x, y, -1, 0];
- inConfig.isTarget = true;
-
- return inConfig;
- }
+ getJsplumbConfig(preview): any {
+ return preview
+ ? this.jsplumbConfigService.getPreviewConfig()
+ : this.jsplumbConfigService.getEditorConfig();
+ }
+
+ getStreamEndpoint(preview: boolean, pipelineElementDomId: string) {
+ const jsplumbConfig = this.getJsplumbConfig(preview);
+ const config = jsplumbConfig.streamEndpointOptions;
+ config.uuid = 'out-' + pipelineElementDomId;
+ return config;
+ }
+
+ getInputEndpoint(preview, pipelineElementDomId, index): any {
+ const jsplumbConfig = this.getJsplumbConfig(preview);
+ const inConfig = jsplumbConfig.leftTargetPointOptions;
+ inConfig.uuid = 'in-' + index + '-' + pipelineElementDomId;
+ return inConfig;
+ }
+
+ getOutputEndpoint(preview, pipelineElementDomId): any {
+ const jsplumbConfig = this.getJsplumbConfig(preview);
+ const outConfig = jsplumbConfig.sepaEndpointOptions;
+ outConfig.uuid = 'out-' + pipelineElementDomId;
+ return outConfig;
+ }
+
+ getNewTargetPoint(preview, x, y, pipelineElementDomId, index): any {
+ const inConfig = this.getInputEndpoint(
+ preview,
+ pipelineElementDomId,
+ index,
+ );
+ inConfig.type = 'empty';
+ inConfig.anchor = [x, y, -1, 0];
+ inConfig.isTarget = true;
+
+ return inConfig;
+ }
}
diff --git a/ui/src/app/editor/services/jsplumb-factory.service.ts b/ui/src/app/editor/services/jsplumb-factory.service.ts
index a895e7215..a7bbef390 100644
--- a/ui/src/app/editor/services/jsplumb-factory.service.ts
+++ b/ui/src/app/editor/services/jsplumb-factory.service.ts
@@ -19,36 +19,45 @@
import { JsPlumbInstance } from '@jsplumb/core';
import { JsplumbBridge } from './jsplumb-bridge.service';
import { Injectable } from '@angular/core';
-import { BrowserJsPlumbInstance, ContainmentType, newInstance } from '@jsplumb/browser-ui';
+import {
+ BrowserJsPlumbInstance,
+ ContainmentType,
+ newInstance,
+} from '@jsplumb/browser-ui';
import { PipelineElementDraggedService } from './pipeline-element-dragged.service';
import { JsplumbConfigService } from './jsplumb-config.service';
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class JsplumbFactoryService {
-
pipelineEditorInstance: BrowserJsPlumbInstance;
pipelinePreviewInstance: BrowserJsPlumbInstance;
pipelineEditorBridge: JsplumbBridge;
pipelinePreviewBridge: JsplumbBridge;
- constructor(private pipelineElementDraggedService: PipelineElementDraggedService,
- private jsplumbConfigService: JsplumbConfigService) {
- }
+ constructor(
+ private pipelineElementDraggedService: PipelineElementDraggedService,
+ private jsplumbConfigService: JsplumbConfigService,
+ ) {}
getJsplumbBridge(previewConfig: boolean): JsplumbBridge {
if (!previewConfig) {
if (!this.pipelineEditorBridge) {
this.pipelineEditorInstance = this.makePipelineEditorInstance();
this.prepareJsplumb(this.pipelineEditorInstance);
- this.pipelineEditorBridge = new JsplumbBridge(this.pipelineEditorInstance);
+ this.pipelineEditorBridge = new JsplumbBridge(
+ this.pipelineEditorInstance,
+ );
}
return this.pipelineEditorBridge;
} else {
if (!this.pipelinePreviewBridge) {
- this.pipelinePreviewInstance = this.makePipelinePreviewInstance();
+ this.pipelinePreviewInstance =
+ this.makePipelinePreviewInstance();
this.prepareJsplumb(this.pipelinePreviewInstance);
- this.pipelinePreviewBridge = new JsplumbBridge(this.pipelinePreviewInstance);
+ this.pipelinePreviewBridge = new JsplumbBridge(
+ this.pipelinePreviewInstance,
+ );
}
return this.pipelinePreviewBridge;
}
@@ -56,13 +65,17 @@ export class JsplumbFactoryService {
makePipelineEditorInstance(): BrowserJsPlumbInstance {
return newInstance({
- container: document.getElementById('assembly'), dragOptions: {
+ container: document.getElementById('assembly'),
+ dragOptions: {
containment: ContainmentType.parent,
cursor: 'pointer',
zIndex: 2000,
drag: params => {
- this.pipelineElementDraggedService.notify({x: params.pos.x, y: params.pos.y});
- }
+ this.pipelineElementDraggedService.notify({
+ x: params.pos.x,
+ y: params.pos.y,
+ });
+ },
},
});
}
@@ -70,12 +83,14 @@ export class JsplumbFactoryService {
makePipelinePreviewInstance(): BrowserJsPlumbInstance {
return newInstance({
container: document.getElementById('assembly-preview'),
- elementsDraggable: false
+ elementsDraggable: false,
});
}
prepareJsplumb(jsplumbInstance: JsPlumbInstance) {
- jsplumbInstance.registerEndpointTypes(this.jsplumbConfigService.getEndpointTypeConfig());
+ jsplumbInstance.registerEndpointTypes(
+ this.jsplumbConfigService.getEndpointTypeConfig(),
+ );
}
destroy(preview: boolean) {
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index 127d608f8..719436d07 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -20,300 +20,485 @@ import { JsplumbConfigService } from './jsplumb-config.service';
import { JsplumbBridge } from './jsplumb-bridge.service';
import { Injectable } from '@angular/core';
import {
- InvocablePipelineElementUnion,
- PipelineElementConfig,
- PipelineElementConfigurationStatus,
- PipelineElementUnion
+ InvocablePipelineElementUnion,
+ PipelineElementConfig,
+ PipelineElementConfigurationStatus,
+ PipelineElementUnion,
} from '../model/editor.model';
import { PipelineElementTypeUtils } from '../utils/editor.utils';
import {
- DataProcessorInvocation,
- DataSinkInvocation,
- Pipeline,
- SpDataSet,
- SpDataStream,
- SpDataStreamUnion
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ Pipeline,
+ SpDataSet,
+ SpDataStream,
+ SpDataStreamUnion,
} from '@streampipes/platform-services';
import { JsplumbEndpointService } from './jsplumb-endpoint.service';
import { JsplumbFactoryService } from './jsplumb-factory.service';
import { EditorService } from './editor.service';
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class JsplumbService {
+ idCounter = 0;
+
+ constructor(
+ private jsplumbConfigService: JsplumbConfigService,
+ private jsplumbFactory: JsplumbFactoryService,
+ private jsplumbEndpointService: JsplumbEndpointService,
+ private editorService: EditorService,
+ ) {}
+
+ isFullyConnected(
+ pipelineElementConfig: PipelineElementConfig,
+ previewConfig: boolean,
+ ) {
+ const jsplumbBridge =
+ this.jsplumbFactory.getJsplumbBridge(previewConfig);
+ const payload =
+ pipelineElementConfig.payload as InvocablePipelineElementUnion;
+ return (
+ payload.inputStreams == null ||
+ jsplumbBridge.getConnections({
+ target: document.getElementById(payload.dom),
+ }).length == payload.inputStreams.length
+ );
+ }
- idCounter = 0;
-
- constructor(private jsplumbConfigService: JsplumbConfigService,
- private jsplumbFactory: JsplumbFactoryService,
- private jsplumbEndpointService: JsplumbEndpointService,
- private editorService: EditorService) {
- }
-
- isFullyConnected(pipelineElementConfig: PipelineElementConfig,
- previewConfig: boolean) {
- const jsplumbBridge = this.jsplumbFactory.getJsplumbBridge(previewConfig);
- const payload = pipelineElementConfig.payload as InvocablePipelineElementUnion;
- return payload.inputStreams == null ||
- jsplumbBridge.getConnections({target: document.getElementById(payload.dom)}).length == payload.inputStreams.length;
- }
-
- makeRawPipeline(pipelineModel: Pipeline,
- isPreview: boolean) {
- return pipelineModel
- .streams
- .map(s => this.toConfig(s, 'stream', isPreview))
- .concat(pipelineModel.sepas.map(s => this.toConfig(s, 'sepa', isPreview)))
- .concat(pipelineModel.actions.map(s => this.toConfig(s, 'action', isPreview)));
- }
-
- toConfig(pe: PipelineElementUnion,
- type: string,
- isPreview: boolean) {
- (pe as any).type = type;
- return this.createNewPipelineElementConfig(pe, {x: 100, y: 100}, isPreview, true);
- }
-
- createElementWithoutConnection(pipelineModel: PipelineElementConfig[],
- pipelineElement: PipelineElementUnion,
- x: number,
- y: number) {
- const pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false);
- pipelineModel.push(pipelineElementConfig);
-
- if (pipelineElementConfig.payload instanceof SpDataSet) {
- this.editorService.updateDataSet(pipelineElement).subscribe(data => {
- (pipelineElementConfig.payload as SpDataSet).eventGrounding = data.eventGrounding;
- (pipelineElementConfig.payload as SpDataSet).datasetInvocationId = data.invocationId;
+ makeRawPipeline(pipelineModel: Pipeline, isPreview: boolean) {
+ return pipelineModel.streams
+ .map(s => this.toConfig(s, 'stream', isPreview))
+ .concat(
+ pipelineModel.sepas.map(s =>
+ this.toConfig(s, 'sepa', isPreview),
+ ),
+ )
+ .concat(
+ pipelineModel.actions.map(s =>
+ this.toConfig(s, 'action', isPreview),
+ ),
+ );
+ }
- setTimeout(() => {
- this.elementDropped(pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload,
+ toConfig(pe: PipelineElementUnion, type: string, isPreview: boolean) {
+ (pe as any).type = type;
+ return this.createNewPipelineElementConfig(
+ pe,
+ { x: 100, y: 100 },
+ isPreview,
true,
- false);
- }, 1);
- });
- } else {
- setTimeout(() => {
- this.elementDropped(pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload,
- true,
- false);
- this.getBridge(false).repaintEverything();
- }, 10);
+ );
}
- }
+ createElementWithoutConnection(
+ pipelineModel: PipelineElementConfig[],
+ pipelineElement: PipelineElementUnion,
+ x: number,
+ y: number,
+ ) {
+ const pipelineElementConfig =
+ this.createNewPipelineElementConfigAtPosition(
+ x,
+ y,
+ pipelineElement,
+ false,
+ );
+ pipelineModel.push(pipelineElementConfig);
+
+ if (pipelineElementConfig.payload instanceof SpDataSet) {
+ this.editorService
+ .updateDataSet(pipelineElement)
+ .subscribe(data => {
+ (
+ pipelineElementConfig.payload as SpDataSet
+ ).eventGrounding = data.eventGrounding;
+ (
+ pipelineElementConfig.payload as SpDataSet
+ ).datasetInvocationId = data.invocationId;
+
+ setTimeout(() => {
+ this.elementDropped(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload,
+ true,
+ false,
+ );
+ }, 1);
+ });
+ } else {
+ setTimeout(() => {
+ this.elementDropped(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload,
+ true,
+ false,
+ );
+ this.getBridge(false).repaintEverything();
+ }, 10);
+ }
+ }
- createElement(pipelineModel: PipelineElementConfig[],
- pipelineElement: InvocablePipelineElementUnion,
- sourceElementDomId: string) {
- const sourceElement = $('#' + sourceElementDomId);
+ createElement(
+ pipelineModel: PipelineElementConfig[],
+ pipelineElement: InvocablePipelineElementUnion,
+ sourceElementDomId: string,
+ ) {
+ const sourceElement = $('#' + sourceElementDomId);
+
+ const pipelineElementConfig =
+ this.createNewPipelineElementConfigWithFixedCoordinates(
+ sourceElement,
+ pipelineElement,
+ false,
+ );
+ pipelineModel.push(pipelineElementConfig);
+ setTimeout(() => {
+ this.createAssemblyElement(
+ pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload as InvocablePipelineElementUnion,
+ sourceElement,
+ false,
+ );
+ });
+ }
- const pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(sourceElement, pipelineElement, false);
- pipelineModel.push(pipelineElementConfig);
- setTimeout(() => {
- this.createAssemblyElement(pipelineElementConfig.payload.dom,
- pipelineElementConfig.payload as InvocablePipelineElementUnion,
+ createAssemblyElement(
+ pipelineElementDomId: string,
+ pipelineElement: InvocablePipelineElementUnion,
sourceElement,
- false);
- });
- }
-
- createAssemblyElement(pipelineElementDomId: string,
- pipelineElement: InvocablePipelineElementUnion,
- sourceElement,
- previewConfig: boolean) {
- let targetElementId;
- if (pipelineElement instanceof DataProcessorInvocation) {
- targetElementId = this.dataProcessorDropped(pipelineElementDomId, pipelineElement as DataProcessorInvocation, true, false);
- this.connectNodes(sourceElement, targetElementId, previewConfig);
- } else {
- targetElementId = this.dataSinkDropped(pipelineElementDomId, pipelineElement, true, false);
- this.connectNodes(sourceElement, targetElementId, previewConfig);
+ previewConfig: boolean,
+ ) {
+ let targetElementId;
+ if (pipelineElement instanceof DataProcessorInvocation) {
+ targetElementId = this.dataProcessorDropped(
+ pipelineElementDomId,
+ pipelineElement as DataProcessorInvocation,
+ true,
+ false,
+ );
+ this.connectNodes(sourceElement, targetElementId, previewConfig);
+ } else {
+ targetElementId = this.dataSinkDropped(
+ pipelineElementDomId,
+ pipelineElement,
+ true,
+ false,
+ );
+ this.connectNodes(sourceElement, targetElementId, previewConfig);
+ }
}
- }
-
- connectNodes(sourceElementSelector,
- targetElementId,
- previewConfig: boolean) {
- let options;
- const sourceElement = sourceElementSelector.get()[0];
- const jsplumbBridge = this.getBridge(previewConfig);
- const jsplumbConfig = this.jsplumbEndpointService.getJsplumbConfig(true);
- options = sourceElementSelector.hasClass('stream') ?
- jsplumbConfig.streamEndpointOptions : jsplumbConfig.sepaEndpointOptions;
- let sourceEndPoint;
- const selectedEndpoints = jsplumbBridge.selectEndpoints({source: sourceElement});
- sourceEndPoint = selectedEndpoints.length > 0 ? !(selectedEndpoints.get(0).isFull()) ?
- jsplumbBridge.selectEndpoints({source: sourceElement}).get(0) :
- jsplumbBridge.addEndpoint(sourceElement, options) : jsplumbBridge.addEndpoint(sourceElement, options);
-
- const targetElement = document.getElementById(targetElementId);
- const targetEndPoint = jsplumbBridge.selectEndpoints({target: targetElement}).get(0);
- jsplumbBridge.connect({source: sourceEndPoint, target: targetEndPoint, detachable: true});
- jsplumbBridge.repaintEverything();
- }
+ connectNodes(
+ sourceElementSelector,
+ targetElementId,
+ previewConfig: boolean,
+ ) {
+ let options;
+ const sourceElement = sourceElementSelector.get()[0];
+ const jsplumbBridge = this.getBridge(previewConfig);
+ const jsplumbConfig =
+ this.jsplumbEndpointService.getJsplumbConfig(true);
+ options = sourceElementSelector.hasClass('stream')
+ ? jsplumbConfig.streamEndpointOptions
+ : jsplumbConfig.sepaEndpointOptions;
+ let sourceEndPoint;
+ const selectedEndpoints = jsplumbBridge.selectEndpoints({
+ source: sourceElement,
+ });
+ sourceEndPoint =
+ selectedEndpoints.length > 0
+ ? !selectedEndpoints.get(0).isFull()
+ ? jsplumbBridge
+ .selectEndpoints({ source: sourceElement })
+ .get(0)
+ : jsplumbBridge.addEndpoint(sourceElement, options)
+ : jsplumbBridge.addEndpoint(sourceElement, options);
+
+ const targetElement = document.getElementById(targetElementId);
+ const targetEndPoint = jsplumbBridge
+ .selectEndpoints({ target: targetElement })
+ .get(0);
+
+ jsplumbBridge.connect({
+ source: sourceEndPoint,
+ target: targetEndPoint,
+ detachable: true,
+ });
+ jsplumbBridge.repaintEverything();
+ }
- createNewPipelineElementConfigWithFixedCoordinates(sourceElement,
- pipelineElement: InvocablePipelineElementUnion,
- isPreview): PipelineElementConfig {
- const x = sourceElement.position().left;
- const y = sourceElement.position().top;
- return this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, isPreview);
- }
+ createNewPipelineElementConfigWithFixedCoordinates(
+ sourceElement,
+ pipelineElement: InvocablePipelineElementUnion,
+ isPreview,
+ ): PipelineElementConfig {
+ const x = sourceElement.position().left;
+ const y = sourceElement.position().top;
+ return this.createNewPipelineElementConfigAtPosition(
+ x,
+ y,
+ pipelineElement,
+ isPreview,
+ );
+ }
- createNewPipelineElementConfigAtPosition(x: number,
- y: number,
- json: any,
- isPreview: boolean): PipelineElementConfig {
- const coord = {'x': x + 200, 'y': y};
- return this.createNewPipelineElementConfig(json, coord, isPreview, false);
- }
+ createNewPipelineElementConfigAtPosition(
+ x: number,
+ y: number,
+ json: any,
+ isPreview: boolean,
+ ): PipelineElementConfig {
+ const coord = { x: x + 200, y: y };
+ return this.createNewPipelineElementConfig(
+ json,
+ coord,
+ isPreview,
+ false,
+ );
+ }
- createNewPipelineElementConfig(pipelineElement: PipelineElementUnion,
- coordinates,
- isPreview: boolean,
- isCompleted: boolean,
- newElementId?: string): PipelineElementConfig {
- const displaySettings = isPreview ? 'connectable-preview' : 'connectable-editor';
- const connectable = 'connectable';
- const pipelineElementConfig = {} as PipelineElementConfig;
- pipelineElementConfig.type = PipelineElementTypeUtils
- .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement));
- pipelineElementConfig.payload = this.clone(pipelineElement, newElementId);
- pipelineElementConfig.settings = {
- connectable,
- openCustomize: !(pipelineElement as any).configured,
- preview: isPreview,
- completed: (pipelineElement instanceof SpDataStream || pipelineElement instanceof SpDataSet ||
- isPreview || isCompleted) ? PipelineElementConfigurationStatus.OK : PipelineElementConfigurationStatus.INCOMPLETE,
- disabled: false,
- loadingStatus: false,
- displaySettings,
- position: {
- x: coordinates.x,
- y: coordinates.y
- }
- };
- if (!pipelineElementConfig.payload.dom) {
- pipelineElementConfig.payload.dom = 'jsplumb_' + this.idCounter + '_' + this.makeId(4);
- this.idCounter++;
+ createNewPipelineElementConfig(
+ pipelineElement: PipelineElementUnion,
+ coordinates,
+ isPreview: boolean,
+ isCompleted: boolean,
+ newElementId?: string,
+ ): PipelineElementConfig {
+ const displaySettings = isPreview
+ ? 'connectable-preview'
+ : 'connectable-editor';
+ const connectable = 'connectable';
+ const pipelineElementConfig = {} as PipelineElementConfig;
+ pipelineElementConfig.type = PipelineElementTypeUtils.toCssShortHand(
+ PipelineElementTypeUtils.fromType(pipelineElement),
+ );
+ pipelineElementConfig.payload = this.clone(
+ pipelineElement,
+ newElementId,
+ );
+ pipelineElementConfig.settings = {
+ connectable,
+ openCustomize: !(pipelineElement as any).configured,
+ preview: isPreview,
+ completed:
+ pipelineElement instanceof SpDataStream ||
+ pipelineElement instanceof SpDataSet ||
+ isPreview ||
+ isCompleted
+ ? PipelineElementConfigurationStatus.OK
+ : PipelineElementConfigurationStatus.INCOMPLETE,
+ disabled: false,
+ loadingStatus: false,
+ displaySettings,
+ position: {
+ x: coordinates.x,
+ y: coordinates.y,
+ },
+ };
+ if (!pipelineElementConfig.payload.dom) {
+ pipelineElementConfig.payload.dom =
+ 'jsplumb_' + this.idCounter + '_' + this.makeId(4);
+ this.idCounter++;
+ }
+
+ return pipelineElementConfig;
}
- return pipelineElementConfig;
- }
+ clone(pipelineElement: PipelineElementUnion, newElementId?: string) {
+ if (pipelineElement instanceof SpDataSet) {
+ return SpDataSet.fromData(pipelineElement, new SpDataSet());
+ } else if (pipelineElement instanceof SpDataStream) {
+ const cloned = SpDataStream.fromData(
+ pipelineElement,
+ new SpDataStream(),
+ );
+ return cloned;
+ } else if (pipelineElement instanceof DataProcessorInvocation) {
+ const clonedPe = DataProcessorInvocation.fromData(
+ pipelineElement,
+ new DataProcessorInvocation(),
+ );
+ if (newElementId) {
+ this.updateElementIds(clonedPe, newElementId);
+ }
+ return clonedPe;
+ } else if (pipelineElement instanceof DataSinkInvocation) {
+ const clonedPe = DataSinkInvocation.fromData(
+ pipelineElement as DataSinkInvocation,
+ new DataSinkInvocation(),
+ );
+ if (newElementId) {
+ this.updateElementIds(clonedPe, newElementId);
+ }
+ return clonedPe;
+ }
+ }
- clone(pipelineElement: PipelineElementUnion, newElementId?: string) {
- if (pipelineElement instanceof SpDataSet) {
- return SpDataSet.fromData(pipelineElement, new SpDataSet());
- } else if (pipelineElement instanceof SpDataStream) {
- const cloned = SpDataStream.fromData(pipelineElement, new SpDataStream());
- return cloned;
- } else if (pipelineElement instanceof DataProcessorInvocation) {
- const clonedPe = DataProcessorInvocation.fromData(pipelineElement, new DataProcessorInvocation());
- if (newElementId) {
- this.updateElementIds(clonedPe, newElementId);
- }
- return clonedPe;
- } else if (pipelineElement instanceof DataSinkInvocation) {
- const clonedPe = DataSinkInvocation.fromData(pipelineElement as DataSinkInvocation, new DataSinkInvocation());
- if (newElementId) {
- this.updateElementIds(clonedPe, newElementId);
- }
- return clonedPe;
+ updateElementIds(
+ pipelineElement: PipelineElementUnion,
+ newElementId: string,
+ ) {
+ pipelineElement.elementId = newElementId;
+ pipelineElement.uri = newElementId;
}
- }
- updateElementIds(pipelineElement: PipelineElementUnion, newElementId: string) {
- pipelineElement.elementId = newElementId;
- pipelineElement.uri = newElementId;
- }
+ makeId(count: number) {
+ let text = '';
+ const possible =
+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
- makeId(count: number) {
- let text = '';
- const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ for (let i = 0; i < count; i++) {
+ text += possible.charAt(
+ Math.floor(Math.random() * possible.length),
+ );
+ }
- for (let i = 0; i < count; i++) {
- text += possible.charAt(Math.floor(Math.random() * possible.length));
+ return text;
}
- return text;
- }
-
- elementDropped(pipelineElementDomId: string,
- pipelineElement: PipelineElementUnion,
- endpoints: boolean,
- preview: boolean): string {
- if (pipelineElement instanceof SpDataStream) {
- return this.dataStreamDropped(pipelineElementDomId, pipelineElement as SpDataStream, endpoints, preview);
- } else if (pipelineElement instanceof SpDataSet) {
- return this.dataSetDropped(pipelineElementDomId, pipelineElement as SpDataSet, endpoints, preview);
- } else if (pipelineElement instanceof DataProcessorInvocation) {
- return this.dataProcessorDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
- } else if (pipelineElement instanceof DataSinkInvocation) {
- return this.dataSinkDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
+ elementDropped(
+ pipelineElementDomId: string,
+ pipelineElement: PipelineElementUnion,
+ endpoints: boolean,
+ preview: boolean,
+ ): string {
+ if (pipelineElement instanceof SpDataStream) {
+ return this.dataStreamDropped(
+ pipelineElementDomId,
+ pipelineElement as SpDataStream,
+ endpoints,
+ preview,
+ );
+ } else if (pipelineElement instanceof SpDataSet) {
+ return this.dataSetDropped(
+ pipelineElementDomId,
+ pipelineElement as SpDataSet,
+ endpoints,
+ preview,
+ );
+ } else if (pipelineElement instanceof DataProcessorInvocation) {
+ return this.dataProcessorDropped(
+ pipelineElementDomId,
+ pipelineElement,
+ endpoints,
+ preview,
+ );
+ } else if (pipelineElement instanceof DataSinkInvocation) {
+ return this.dataSinkDropped(
+ pipelineElementDomId,
+ pipelineElement,
+ endpoints,
+ preview,
+ );
+ }
}
- }
- dataSetDropped(pipelineElementDomId: string,
- pipelineElement: SpDataSet,
- endpoints: boolean,
- preview: boolean) {
- const jsplumbBridge = this.getBridge(preview);
- if (endpoints) {
- const endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
- jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
+ dataSetDropped(
+ pipelineElementDomId: string,
+ pipelineElement: SpDataSet,
+ endpoints: boolean,
+ preview: boolean,
+ ) {
+ const jsplumbBridge = this.getBridge(preview);
+ if (endpoints) {
+ const endpointOptions =
+ this.jsplumbEndpointService.getStreamEndpoint(
+ preview,
+ pipelineElementDomId,
+ );
+ jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
+ }
+ return pipelineElementDomId;
}
- return pipelineElementDomId;
- }
-
- dataStreamDropped(pipelineElementDomId: string,
- pipelineElement: SpDataStreamUnion,
- endpoints: boolean,
- preview: boolean) {
- const jsplumbBridge = this.getBridge(preview);
- if (endpoints) {
- const endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
- jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
+ dataStreamDropped(
+ pipelineElementDomId: string,
+ pipelineElement: SpDataStreamUnion,
+ endpoints: boolean,
+ preview: boolean,
+ ) {
+ const jsplumbBridge = this.getBridge(preview);
+ if (endpoints) {
+ const endpointOptions =
+ this.jsplumbEndpointService.getStreamEndpoint(
+ preview,
+ pipelineElementDomId,
+ );
+ jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
+ }
+ return pipelineElementDomId;
}
- return pipelineElementDomId;
- }
- dataProcessorDropped(pipelineElementDomId: string,
- pipelineElement: DataProcessorInvocation,
- endpoints: boolean,
- preview: boolean): string {
- const jsplumbBridge = this.getBridge(preview);
- this.dataSinkDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
- if (endpoints) {
- jsplumbBridge.addEndpoint(pipelineElementDomId,
- this.jsplumbEndpointService.getOutputEndpoint(preview, pipelineElementDomId));
+ dataProcessorDropped(
+ pipelineElementDomId: string,
+ pipelineElement: DataProcessorInvocation,
+ endpoints: boolean,
+ preview: boolean,
+ ): string {
+ const jsplumbBridge = this.getBridge(preview);
+ this.dataSinkDropped(
+ pipelineElementDomId,
+ pipelineElement,
+ endpoints,
+ preview,
+ );
+ if (endpoints) {
+ jsplumbBridge.addEndpoint(
+ pipelineElementDomId,
+ this.jsplumbEndpointService.getOutputEndpoint(
+ preview,
+ pipelineElementDomId,
+ ),
+ );
+ }
+ return pipelineElementDomId;
}
- return pipelineElementDomId;
- }
- dataSinkDropped(pipelineElementDomId: string,
- pipelineElement: InvocablePipelineElementUnion,
- endpoints: boolean,
- preview: boolean): string {
- const jsplumbBridge = this.getBridge(preview);
- if (endpoints) {
- if (pipelineElement.inputStreams.length < 2) { // 1 InputNode
- jsplumbBridge.addEndpoint(pipelineElementDomId,
- this.jsplumbEndpointService.getInputEndpoint(preview, pipelineElementDomId, 0));
- } else {
- jsplumbBridge.addEndpoint(pipelineElementDomId,
- this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.3, pipelineElementDomId, 0));
- jsplumbBridge.addEndpoint(pipelineElementDomId,
- this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.7, pipelineElementDomId, 1));
- }
+ dataSinkDropped(
+ pipelineElementDomId: string,
+ pipelineElement: InvocablePipelineElementUnion,
+ endpoints: boolean,
+ preview: boolean,
+ ): string {
+ const jsplumbBridge = this.getBridge(preview);
+ if (endpoints) {
+ if (pipelineElement.inputStreams.length < 2) {
+ // 1 InputNode
+ jsplumbBridge.addEndpoint(
+ pipelineElementDomId,
+ this.jsplumbEndpointService.getInputEndpoint(
+ preview,
+ pipelineElementDomId,
+ 0,
+ ),
+ );
+ } else {
+ jsplumbBridge.addEndpoint(
+ pipelineElementDomId,
+ this.jsplumbEndpointService.getNewTargetPoint(
+ preview,
+ 0,
+ 0.3,
+ pipelineElementDomId,
+ 0,
+ ),
+ );
+ jsplumbBridge.addEndpoint(
+ pipelineElementDomId,
+ this.jsplumbEndpointService.getNewTargetPoint(
+ preview,
+ 0,
+ 0.7,
+ pipelineElementDomId,
+ 1,
+ ),
+ );
+ }
+ }
+ return pipelineElementDomId;
}
- return pipelineElementDomId;
- }
- getBridge(previewConfig: boolean): JsplumbBridge {
- return this.jsplumbFactory.getJsplumbBridge(previewConfig);
- }
+ getBridge(previewConfig: boolean): JsplumbBridge {
+ return this.jsplumbFactory.getJsplumbBridge(previewConfig);
+ }
}
diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts
index 95375edaf..0aad0827f 100644
--- a/ui/src/app/editor/services/object-provider.service.ts
+++ b/ui/src/app/editor/services/object-provider.service.ts
@@ -18,18 +18,21 @@
import { Injectable } from '@angular/core';
import { RestApi } from '../../services/rest-api.service';
-import { InvocablePipelineElementUnion, PipelineElementConfig } from '../model/editor.model';
+import {
+ InvocablePipelineElementUnion,
+ PipelineElementConfig,
+} from '../model/editor.model';
import { DataSinkInvocation, Pipeline } from '@streampipes/platform-services';
import { EditorService } from './editor.service';
import { JsplumbFactoryService } from './jsplumb-factory.service';
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
export class ObjectProvider {
-
- constructor(private restApi: RestApi,
- private editorService: EditorService,
- private jsplumbFactoryService: JsplumbFactoryService) {
- }
+ constructor(
+ private restApi: RestApi,
+ private editorService: EditorService,
+ private jsplumbFactoryService: JsplumbFactoryService,
+ ) {}
prepareElement(pipelineElement: InvocablePipelineElementUnion) {
pipelineElement.connectedTo = [];
@@ -57,38 +60,65 @@ export class ObjectProvider {
return pipeline;
}
- hasConnectedPipelineElement(pipelineElementDomId: string,
- rawPipelineModel: PipelineElementConfig[]) {
- const pipelineElement = this.findElement(pipelineElementDomId, rawPipelineModel);
+ hasConnectedPipelineElement(
+ pipelineElementDomId: string,
+ rawPipelineModel: PipelineElementConfig[],
+ ) {
+ const pipelineElement = this.findElement(
+ pipelineElementDomId,
+ rawPipelineModel,
+ );
if (pipelineElement.payload instanceof DataSinkInvocation) {
return false;
} else {
- return rawPipelineModel
- .filter(pe => !pe.settings.disabled && pe.payload.connectedTo)
- .find(pe => (pe.payload.connectedTo.indexOf(pipelineElementDomId) > -1))
- !== undefined;
+ return (
+ rawPipelineModel
+ .filter(
+ pe => !pe.settings.disabled && pe.payload.connectedTo,
+ )
+ .find(
+ pe =>
+ pe.payload.connectedTo.indexOf(
+ pipelineElementDomId,
+ ) > -1,
+ ) !== undefined
+ );
}
}
- findElement(elementId, rawPipelineModel: PipelineElementConfig[]): PipelineElementConfig {
- return rawPipelineModel.find(pe => pe.payload.dom === elementId) || {} as PipelineElementConfig;
+ findElement(
+ elementId,
+ rawPipelineModel: PipelineElementConfig[],
+ ): PipelineElementConfig {
+ return (
+ rawPipelineModel.find(pe => pe.payload.dom === elementId) ||
+ ({} as PipelineElementConfig)
+ );
}
- addElementNew(pipeline, currentPipelineElements: PipelineElementConfig[]): Pipeline {
- const JsplumbBridge = this.jsplumbFactoryService.getJsplumbBridge(false);
+ addElementNew(
+ pipeline,
+ currentPipelineElements: PipelineElementConfig[],
+ ): Pipeline {
+ const JsplumbBridge =
+ this.jsplumbFactoryService.getJsplumbBridge(false);
currentPipelineElements.forEach(pe => {
- if (pe.settings.disabled === undefined || !(pe.settings.disabled)) {
+ if (pe.settings.disabled === undefined || !pe.settings.disabled) {
if (pe.type === 'sepa' || pe.type === 'action') {
let payload = pe.payload;
- payload = this.prepareElement(payload as InvocablePipelineElementUnion);
+ payload = this.prepareElement(
+ payload as InvocablePipelineElementUnion,
+ );
const connections = JsplumbBridge.getConnections({
- target: document.getElementById(payload.dom)
+ target: document.getElementById(payload.dom),
});
for (let i = 0; i < connections.length; i++) {
payload.connectedTo.push(connections[i].sourceId);
}
if (payload.connectedTo && payload.connectedTo.length > 0) {
- pe.type === 'action' ? pipeline.actions.push(payload) : pipeline.sepas.push(payload);
+ pe.type === 'action'
+ ? pipeline.actions.push(payload)
+ : pipeline.sepas.push(payload);
}
} else {
pipeline.streams.push(pe.payload);
diff --git a/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts b/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts
index 764b1f7de..4c6d23db7 100644
--- a/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts
+++ b/ui/src/app/editor/services/pipeline-canvas-scrolling.service.ts
@@ -19,17 +19,16 @@
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
... 1212 lines suppressed ...