You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/06/17 13:58:32 UTC
[incubator-streampipes] branch STREAMPIPES-380 updated: Add
pipeline element selection dialog
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-380
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-380 by this push:
new 2d29fd7 Add pipeline element selection dialog
2d29fd7 is described below
commit 2d29fd7648dfdd9e81fc163b2916cf73888c69d0
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Jun 17 15:58:18 2021 +0200
Add pipeline element selection dialog
---
.../pipeline-assembly.component.html | 4 ++
.../pipeline-assembly.component.ts | 13 +++++
.../compatible-elements.component.ts | 4 +-
.../pipeline-element-discovery.component.html | 43 ++++++++++++++++
.../pipeline-element-discovery.component.scss | 24 +++++++++
.../pipeline-element-discovery.component.ts} | 60 ++++++++++++----------
ui/src/app/editor/editor.module.ts | 2 +
.../app/editor/services/jsplumb-bridge.service.ts | 2 +
ui/src/app/editor/services/jsplumb.service.ts | 44 ++++++++++++++--
9 files changed, 163 insertions(+), 33 deletions(-)
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 6a616a4..097a85b 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
@@ -52,6 +52,10 @@
(click)="autoLayout()">
<i class="material-icons">settings_overscan</i>
</button>
+ <button mat-button mat-icon-button matTooltip="Add pipeline element" [matTooltipPosition]="'above'"
+ (click)="openDiscoverDialog()">
+ <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">
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 3e3dbf9..7052703 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
@@ -47,6 +47,7 @@ import {PipelineComponent} from "../pipeline/pipeline.component";
import {PipelineCanvasMetadata} from "../../../core-model/gen/streampipes-model";
import {forkJoin} from 'rxjs';
import {PipelineCanvasMetadataService} from "../../../platform-services/apis/pipeline-canvas-metadata.service";
+import {PipelineElementDiscoveryComponent} from "../../dialog/pipeline-element-discovery/pipeline-element-discovery.component";
@Component({
@@ -337,4 +338,16 @@ export class PipelineAssemblyComponent implements OnInit {
this.pipelineComponent.initiatePipelineElementPreview();
}
+ openDiscoverDialog() {
+ this.dialogService.open(PipelineElementDiscoveryComponent, {
+ panelType: PanelType.SLIDE_IN_PANEL,
+ title: "Discover pipeline elements",
+ width: "50vw",
+ data: {
+ "currentElements": this.allElements,
+ "rawPipelineModel": this.rawPipelineModel
+ }
+ });
+ }
+
}
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 bad9f95..6b5c23c 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,7 +20,7 @@ import {Component, Input} from "@angular/core";
import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
import {JsplumbService} from "../../services/jsplumb.service";
import {DataProcessorInvocation} from "../../../core-model/gen/streampipes-model";
-import {PipelineElementUnion} from "../../model/editor.model";
+import {PipelineElementConfig, PipelineElementUnion} from "../../model/editor.model";
@Component({
selector: 'compatible-elements',
@@ -30,7 +30,7 @@ import {PipelineElementUnion} from "../../model/editor.model";
export class CompatibleElementsComponent {
@Input()
- rawPipelineModel: any;
+ rawPipelineModel: PipelineElementConfig[];
@Input()
pipelineElementDomId: any;
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
new file mode 100644
index 0000000..56d5297
--- /dev/null
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.html
@@ -0,0 +1,43 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<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)" >
+ <div class="draggable-icon-preview {{currentElementStyle(currentElement)}}">
+ <pipeline-element [pipelineElement]="currentElement" [iconSize]="true"></pipeline-element>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="center start">
+ <div class="element-name">{{ currentElement.name }}</div>
+ <div class="element-description">{{ currentElement.description }}</div>
+ </div>
+ </div>
+ <mat-divider></mat-divider>
+ </div>
+ </div>
+ </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>
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
new file mode 100644
index 0000000..31ebd42
--- /dev/null
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.scss
@@ -0,0 +1,24 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+@import '../../../../scss/sp/sp-dialog.scss';
+
+.m-10 {
+ padding-top:10px;
+ padding-bottom:10px;
+}
diff --git a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
similarity index 53%
copy from ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
copy to ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
index bad9f95..b9bf352 100644
--- a/ui/src/app/editor/dialog/compatible-elements/compatible-elements.component.ts
+++ b/ui/src/app/editor/dialog/pipeline-element-discovery/pipeline-element-discovery.component.ts
@@ -16,59 +16,66 @@
*
*/
-import {Component, Input} from "@angular/core";
+import {Component, Input, OnInit} from "@angular/core";
import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
import {JsplumbService} from "../../services/jsplumb.service";
-import {DataProcessorInvocation} from "../../../core-model/gen/streampipes-model";
-import {PipelineElementUnion} from "../../model/editor.model";
+import {
+ DataProcessorInvocation,
+ DataSinkInvocation,
+ SpDataSet,
+ SpDataStream
+} from "../../../core-model/gen/streampipes-model";
+import {PipelineElementConfig, PipelineElementUnion} from "../../model/editor.model";
@Component({
- selector: 'compatible-elements',
- templateUrl: './compatible-elements.component.html',
- styleUrls: ['./compatible-elements.component.scss']
+ selector: 'sp-pipeline-element-discovery',
+ templateUrl: './pipeline-element-discovery.component.html',
+ styleUrls: ['./pipeline-element-discovery.component.scss']
})
-export class CompatibleElementsComponent {
+export class PipelineElementDiscoveryComponent implements OnInit {
@Input()
- rawPipelineModel: any;
+ rawPipelineModel: PipelineElementConfig[];
@Input()
- pipelineElementDomId: any;
-
- @Input()
- possibleElements: PipelineElementUnion[];
+ currentElements: PipelineElementUnion[];
styles: any[] = [];
-
- constructor(private dialogRef: DialogRef<CompatibleElementsComponent>,
+ constructor(private dialogRef: DialogRef<PipelineElementDiscoveryComponent>,
private JsPlumbService: JsplumbService) {
- //this.ElementIconText = ElementIconText;
+
}
ngOnInit() {
- this.possibleElements.sort((a, b) => a.name.localeCompare(b.name));
- this.possibleElements.forEach(pe => {
+ this.currentElements.sort((a, b) => a.name.localeCompare(b.name));
+ this.currentElements.forEach(pe => {
this.styles.push(this.makeStandardStyle());
})
}
- create(possibleElement) {
- this.JsPlumbService.createElement(this.rawPipelineModel, possibleElement, this.pipelineElementDomId);
+ create(selectedElement) {
+ this.JsPlumbService.createElementWithoutConnection(this.rawPipelineModel,
+ selectedElement,
+ 200,
+ 100);
this.hide();
}
- iconText(elementId) {
- //return this.ElementIconText.getElementIconText(elementId);
- }
-
hide() {
- //this.$mdDialog.hide();
this.dialogRef.close();
};
- isDataProcessor(possibleElement: PipelineElementUnion) {
- return possibleElement instanceof DataProcessorInvocation;
+ 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() {
@@ -88,5 +95,4 @@ export class CompatibleElementsComponent {
changeStyle(index: number, hover: boolean) {
hover ? this.styles[index] = this.makeHoverStyle() : this.styles[index] = this.makeStandardStyle();
}
-
}
diff --git a/ui/src/app/editor/editor.module.ts b/ui/src/app/editor/editor.module.ts
index da8f5e0..8c86840 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -66,6 +66,7 @@ import {PipelineCanvasScrollingService} from "./services/pipeline-canvas-scrolli
import {JsplumbEndpointService} from "./services/jsplumb-endpoint.service";
import {JsplumbFactoryService} from "./services/jsplumb-factory.service";
import {PipelineElementPreviewComponent} from "./components/pipeline-element-preview/pipeline-element-preview.component";
+import {PipelineElementDiscoveryComponent} from "./dialog/pipeline-element-discovery/pipeline-element-discovery.component";
@NgModule({
imports: [
@@ -97,6 +98,7 @@ import {PipelineElementPreviewComponent} from "./components/pipeline-element-pre
UserDefinedOutputStrategyComponent,
PipelineAssemblyComponent,
PipelineElementComponent,
+ PipelineElementDiscoveryComponent,
PipelineElementDocumentationComponent,
PipelineElementIconStandComponent,
PipelineElementOptionsComponent,
diff --git a/ui/src/app/editor/services/jsplumb-bridge.service.ts b/ui/src/app/editor/services/jsplumb-bridge.service.ts
index ca94753..e7655b1 100644
--- a/ui/src/app/editor/services/jsplumb-bridge.service.ts
+++ b/ui/src/app/editor/services/jsplumb-bridge.service.ts
@@ -106,6 +106,8 @@ export class JsplumbBridge {
}
addEndpoint(element, options) {
+ console.log(element);
+ console.log(options);
return this.jsPlumbInstance.addEndpoint(element, options);
}
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index 5114b18..fa0daf8 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -72,11 +72,26 @@ export class JsplumbService {
return this.createNewPipelineElementConfig(pe, {x: 100, y: 100}, isPreview, true);
}
+ createElementWithoutConnection(pipelineModel: PipelineElementConfig[],
+ pipelineElement: PipelineElementUnion,
+ x: number,
+ y: number) {
+ let pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false);
+ pipelineModel.push(pipelineElementConfig);
+ setTimeout(() => {
+ this.elementDropped(pipelineElementConfig.payload.dom,
+ pipelineElementConfig.payload,
+ true,
+ false);
+ }, 100);
+ }
+
createElement(pipelineModel: PipelineElementConfig[],
pipelineElement: InvocablePipelineElementUnion,
pipelineElementDomId: string) {
var pipelineElementDom = $("#" + pipelineElementDomId);
- var pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(pipelineElementDom, pipelineElement, false);
+
+ let pipelineElementConfig = this.createNewPipelineElementConfigWithFixedCoordinates(pipelineElementDom, pipelineElement, false);
pipelineModel.push(pipelineElementConfig);
setTimeout(() => {
this.createAssemblyElement(pipelineElementConfig.payload.dom,
@@ -100,7 +115,9 @@ export class JsplumbService {
}
}
- connectNodes($parentElement, $target, previewConfig: boolean) {
+ connectNodes($parentElement,
+ $target,
+ previewConfig: boolean) {
var options;
let jsplumbBridge = this.getBridge(previewConfig);
if ($parentElement.hasClass("stream")) {
@@ -130,7 +147,14 @@ export class JsplumbService {
createNewPipelineElementConfigWithFixedCoordinates($parentElement, json, isPreview): PipelineElementConfig {
var x = $parentElement.position().left;
var y = $parentElement.position().top;
- var coord = {'x': x + 200, 'y': y};
+ return this.createNewPipelineElementConfigAtPosition(x, y, json, isPreview);
+ }
+
+ createNewPipelineElementConfigAtPosition(x: number,
+ y: number,
+ json: any,
+ isPreview: boolean): PipelineElementConfig {
+ let coord = {'x': x + 200, 'y': y};
return this.createNewPipelineElementConfig(json, coord, isPreview, false);
}
@@ -199,6 +223,19 @@ export class JsplumbService {
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 DataProcessorInvocation) {
+ return this.dataProcessorDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
+ } else if (pipelineElement instanceof DataSinkInvocation) {
+ return this.dataSinkDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
+ };
+ }
+
dataStreamDropped(pipelineElementDomId: string,
pipelineElement: SpDataStreamUnion,
endpoints: boolean,
@@ -206,7 +243,6 @@ export class JsplumbService {
let jsplumbBridge = this.getBridge(preview);
if (endpoints) {
this.makeDraggableIfNotPreview(pipelineElementDomId, jsplumbBridge, preview);
-
let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
}