You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2021/06/18 08:45:53 UTC

[incubator-streampipes] branch STREAMPIPES-380 updated: [STREAMPIPES-380] Fix add pipeline element for data sets

This is an automated email from the ASF dual-hosted git repository.

zehnder 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 b14e084  [STREAMPIPES-380] Fix add pipeline element for data sets
b14e084 is described below

commit b14e084882a312ab574493cd244bff81ac7a871e
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Jun 18 10:45:13 2021 +0200

    [STREAMPIPES-380] Fix add pipeline element for data sets
---
 .../adapter-started-dialog.component.html          |   2 +-
 .../pipeline-assembly.component.ts                 |   8 +-
 .../pipeline-element-options.component.ts          |  17 ++--
 .../components/pipeline/pipeline.component.html    |   2 +-
 .../pipeline-element-discovery.component.ts        |  34 +++----
 ui/src/app/editor/services/jsplumb.service.ts      | 106 ++++++++++++++-------
 6 files changed, 105 insertions(+), 64 deletions(-)

diff --git a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
index 4673930..098575b 100644
--- a/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
+++ b/ui/src/app/connect/dialog/adapter-started/adapter-started-dialog.component.html
@@ -36,7 +36,7 @@
                     </div>
                 </div>
                 <div *ngIf="isSetAdapter">
-                    <div class="success-message" fxFlex="100" fxLayoutAlign="center center" fxLayout="row">
+                    <div class="success-message" fxFlex="100" fxLayoutAlign="center center" fxLayout="row" data-cy="sp-connect-adapter-set-success">
                         <i class="material-icons">done</i>
                         <span>&nbsp;Your new data set is now available in the pipeline editor.</span>
                     </div>
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 7052703..41e3db0 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
@@ -341,11 +341,11 @@ export class PipelineAssemblyComponent implements OnInit {
     openDiscoverDialog() {
         this.dialogService.open(PipelineElementDiscoveryComponent, {
             panelType: PanelType.SLIDE_IN_PANEL,
-            title: "Discover pipeline elements",
-            width: "50vw",
+            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-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
index 4c89316..9de810a 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
@@ -50,6 +50,7 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
   recommendedElements: PipelineElementUnion[];
   recommendationsShown: any = false;
   pipelineElementCssType: string;
+  isDataSource: boolean;
 
   @Input()
   currentMouseOverElement: string;
@@ -107,7 +108,9 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
     });
     this.pipelineElementCssType = this.pipelineElement.type;
 
-    if (this.pipelineElement.type === 'stream' || this.pipelineElement.settings.completed) {
+    this.isDataSource = this.pipelineElement.type === 'stream' || this.pipelineElement.type === 'set';
+
+    if (this.isDataSource || this.pipelineElement.settings.completed) {
       this.initRecs(this.pipelineElement.payload.dom);
     }
   }
@@ -133,7 +136,7 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
   initRecs(pipelineElementDomId) {
     let clonedModel: PipelineElementConfig[] = cloneDeep(this.rawPipelineModel);
     clonedModel.forEach(pe => {
-      if (pe.payload.dom === pipelineElementDomId && (pe.type !== 'stream')) {
+      if (pe.payload.dom === pipelineElementDomId && (pe.type !== 'stream'  && pe.type !== 'set')) {
         pe.settings.completed = false;
         (pe.payload as InvocablePipelineElementUnion).configured = false;
       }
@@ -151,11 +154,11 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
   openPossibleElementsDialog() {
     const dialogRef = this.DialogService.open(CompatibleElementsComponent,{
       panelType: PanelType.SLIDE_IN_PANEL,
-      title: "Compatible Elements",
+      title: 'Compatible Elements',
       data: {
-        "rawPipelineModel": this.rawPipelineModel,
-        "possibleElements": this.possibleElements,
-        "pipelineElementDomId": this.pipelineElement.payload.dom
+        'rawPipelineModel': this.rawPipelineModel,
+        'possibleElements': this.possibleElements,
+        'pipelineElementDomId': this.pipelineElement.payload.dom
       }
     });
 
@@ -174,7 +177,7 @@ export class PipelineElementOptionsComponent implements OnInit, OnDestroy {
   }
 
   isConfigured() {
-    if (this.pipelineElement.type == 'stream') return true;
+    if (this.isDataSource) return true;
     else {
       return (this.pipelineElement.payload as InvocablePipelineElementUnion).configured;
     }
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html b/ui/src/app/editor/components/pipeline/pipeline.component.html
index dba44c7..d9687c5 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.html
@@ -44,7 +44,7 @@
                                    [allElements]="allElements"
                                    [pipelineElement]="pipelineElement"
                                    [rawPipelineModel]="rawPipelineModel"
-                                   [pipelineElementId]="pipelineElement.type == 'stream' ? pipelineElement.payload.elementId : pipelineElement.payload.belongsTo"
+                                   [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>
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 b9bf352..c1f2f0f 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
@@ -16,16 +16,16 @@
  *
  */
 
-import {Component, Input, OnInit} from "@angular/core";
-import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
-import {JsplumbService} from "../../services/jsplumb.service";
+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,
   DataSinkInvocation,
   SpDataSet,
   SpDataStream
-} from "../../../core-model/gen/streampipes-model";
-import {PipelineElementConfig, PipelineElementUnion} from "../../model/editor.model";
+} from '../../../core-model/gen/streampipes-model';
+import { PipelineElementConfig, PipelineElementUnion } from '../../model/editor.model';
 
 @Component({
   selector: 'sp-pipeline-element-discovery',
@@ -51,7 +51,7 @@ export class PipelineElementDiscoveryComponent implements OnInit {
     this.currentElements.sort((a, b) => a.name.localeCompare(b.name));
     this.currentElements.forEach(pe => {
       this.styles.push(this.makeStandardStyle());
-    })
+    });
   }
 
   create(selectedElement) {
@@ -64,32 +64,32 @@ export class PipelineElementDiscoveryComponent implements OnInit {
 
   hide() {
     this.dialogRef.close();
-  };
+  }
 
   currentElementStyle(possibleElement: PipelineElementUnion) {
     if (possibleElement instanceof DataProcessorInvocation) {
-      return "sepa";
+      return 'sepa';
     } else if (possibleElement instanceof DataSinkInvocation) {
-      return "action";
+      return 'action';
     } else if (possibleElement instanceof SpDataSet) {
-      return "set";
+      return 'set';
     } else if (possibleElement instanceof SpDataStream) {
-      return "stream";
+      return 'stream';
     }
   }
 
   makeStandardStyle() {
     return {
-      background: "white",
-      cursor: "auto"
-    }
+      background: 'white',
+      cursor: 'auto'
+    };
   }
 
   makeHoverStyle() {
     return {
-      background: "lightgrey",
-      cursor: "pointer"
-    }
+      background: 'lightgrey',
+      cursor: 'pointer'
+    };
   }
 
   changeStyle(index: number, hover: boolean) {
diff --git a/ui/src/app/editor/services/jsplumb.service.ts b/ui/src/app/editor/services/jsplumb.service.ts
index fa0daf8..fe944c2 100644
--- a/ui/src/app/editor/services/jsplumb.service.ts
+++ b/ui/src/app/editor/services/jsplumb.service.ts
@@ -36,6 +36,7 @@ import {
 import {PipelineElementDraggedService} from "./pipeline-element-dragged.service";
 import {JsplumbEndpointService} from "./jsplumb-endpoint.service";
 import {JsplumbFactoryService} from "./jsplumb-factory.service";
+import { EditorService } from './editor.service';
 
 @Injectable()
 export class JsplumbService {
@@ -45,6 +46,7 @@ export class JsplumbService {
     constructor(private JsplumbConfigService: JsplumbConfigService,
                 private JsplumbFactory: JsplumbFactoryService,
                 private jsplumbEndpointService: JsplumbEndpointService,
+                private editorService: EditorService,
                 private pipelineElementDraggedService: PipelineElementDraggedService) {
     }
 
@@ -53,16 +55,16 @@ export class JsplumbService {
         let jsplumbBridge = this.JsplumbFactory.getJsplumbBridge(previewConfig);
         let payload = pipelineElementConfig.payload as InvocablePipelineElementUnion;
         return payload.inputStreams == null ||
-            jsplumbBridge.getConnections({target: $("#" +payload.dom)}).length == payload.inputStreams.length;
+          jsplumbBridge.getConnections({target: $("#" +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)));
+          .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,
@@ -78,12 +80,28 @@ export class JsplumbService {
                                    y: number) {
         let pipelineElementConfig = this.createNewPipelineElementConfigAtPosition(x, y, pipelineElement, false);
         pipelineModel.push(pipelineElementConfig);
-        setTimeout(() => {
-            this.elementDropped(pipelineElementConfig.payload.dom,
-                pipelineElementConfig.payload,
-                true,
-                false);
-        }, 100);
+
+        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);
+            }, 100);
+        }
+
     }
 
     createElement(pipelineModel: PipelineElementConfig[],
@@ -95,9 +113,9 @@ export class JsplumbService {
         pipelineModel.push(pipelineElementConfig);
         setTimeout(() => {
             this.createAssemblyElement(pipelineElementConfig.payload.dom,
-                pipelineElementConfig.payload as InvocablePipelineElementUnion,
-                pipelineElementDom,
-                false);
+              pipelineElementConfig.payload as InvocablePipelineElementUnion,
+              pipelineElementDom,
+              false);
         });
     }
 
@@ -167,12 +185,12 @@ export class JsplumbService {
         let connectable = "connectable";
         let pipelineElementConfig = {} as PipelineElementConfig;
         pipelineElementConfig.type = PipelineElementTypeUtils
-            .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement))
+          .toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement))
         pipelineElementConfig.payload = this.clone(pipelineElement, newElementId);
         pipelineElementConfig.settings = {connectable: connectable,
             openCustomize: !(pipelineElement as any).configured,
             preview: isPreview,
-            completed: (pipelineElement instanceof SpDataStream || isPreview || isCompleted),
+            completed: (pipelineElement instanceof SpDataStream || pipelineElement instanceof SpDataSet || isPreview || isCompleted),
             disabled: false,
             loadingStatus: false,
             displaySettings: displaySettings,
@@ -224,11 +242,13 @@ export class JsplumbService {
     }
 
     elementDropped(pipelineElementDomId: string,
-                    pipelineElement: PipelineElementUnion,
-                    endpoints: boolean,
-                    preview: boolean): 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) {
@@ -236,10 +256,28 @@ export class JsplumbService {
         };
     }
 
+    dataSetDropped(pipelineElementDomId: string,
+                   pipelineElement: SpDataSet,
+                   endpoints: boolean,
+                   preview: boolean) {
+
+
+
+        let jsplumbBridge = this.getBridge(preview);
+
+        if (endpoints) {
+            this.makeDraggableIfNotPreview(pipelineElementDomId, jsplumbBridge, preview);
+            let endpointOptions = this.jsplumbEndpointService.getStreamEndpoint(preview, pipelineElementDomId);
+            jsplumbBridge.addEndpoint(pipelineElementDomId, endpointOptions);
+        }
+        return pipelineElementDomId;
+    };
+
+
     dataStreamDropped(pipelineElementDomId: string,
-                  pipelineElement: SpDataStreamUnion,
-                  endpoints: boolean,
-                  preview: boolean) {
+                      pipelineElement: SpDataStreamUnion,
+                      endpoints: boolean,
+                      preview: boolean) {
         let jsplumbBridge = this.getBridge(preview);
         if (endpoints) {
             this.makeDraggableIfNotPreview(pipelineElementDomId, jsplumbBridge, preview);
@@ -250,34 +288,34 @@ export class JsplumbService {
     };
 
     dataProcessorDropped(pipelineElementDomId: string,
-                pipelineElement: DataProcessorInvocation,
-                endpoints: boolean,
-                preview: boolean): string {
+                         pipelineElement: DataProcessorInvocation,
+                         endpoints: boolean,
+                         preview: boolean): string {
         let jsplumbBridge = this.getBridge(preview);
         this.dataSinkDropped(pipelineElementDomId, pipelineElement, endpoints, preview);
         if (endpoints) {
             jsplumbBridge.addEndpoint(pipelineElementDomId,
-                this.jsplumbEndpointService.getOutputEndpoint(preview, pipelineElementDomId));
+              this.jsplumbEndpointService.getOutputEndpoint(preview, pipelineElementDomId));
         }
         return pipelineElementDomId;
     };
 
     dataSinkDropped(pipelineElementDomId: string,
-                  pipelineElement: InvocablePipelineElementUnion,
-                  endpoints: boolean,
-                  preview: boolean): string {
+                    pipelineElement: InvocablePipelineElementUnion,
+                    endpoints: boolean,
+                    preview: boolean): string {
         let jsplumbBridge = this.getBridge(preview);
         this.makeDraggableIfNotPreview(pipelineElementDomId, jsplumbBridge, preview);
 
         if (endpoints) {
             if (pipelineElement.inputStreams.length < 2) { //1 InputNode
                 jsplumbBridge.addEndpoint(pipelineElementDomId,
-                    this.jsplumbEndpointService.getInputEndpoint(preview, pipelineElementDomId, 0));
+                  this.jsplumbEndpointService.getInputEndpoint(preview, pipelineElementDomId, 0));
             } else {
                 jsplumbBridge.addEndpoint(pipelineElementDomId,
-                    this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.25, pipelineElementDomId, 0));
+                  this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.25, pipelineElementDomId, 0));
                 jsplumbBridge.addEndpoint(pipelineElementDomId,
-                    this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.75, pipelineElementDomId, 1));
+                  this.jsplumbEndpointService.getNewTargetPoint(preview, 0, 0.75, pipelineElementDomId, 1));
             }
         }
         return pipelineElementDomId;
@@ -288,8 +326,8 @@ export class JsplumbService {
     }
 
     makeDraggableIfNotPreview(pipelineElementDomId: string,
-                  jsplumbBridge: JsplumbBridge,
-                  previewConfig: boolean) {
+                              jsplumbBridge: JsplumbBridge,
+                              previewConfig: boolean) {
         if (!previewConfig) {
             jsplumbBridge.draggable(pipelineElementDomId, {containment: 'parent',
                 drag: (e => {