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 2020/06/14 22:04:34 UTC
[incubator-streampipes] branch STREAMPIPES-145 updated (4bb7253 ->
af46865)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
from 4bb7253 [STREAMPIPES-145] Migrate pipeline element documentation module
new 8f53927 [STREAMPIPES-145] Use migrated editor module as default
new dbcca29 [STREAMPIPES-145] Migrate pipeline element filter
new 1879d46 [STREAMPIPES-145] Sort pipeline elements by name
new af46865 [STREAMPIPES-145] Fix bug in pipeline element recommender
The 4 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.
Summary of changes:
ui/deployment/dev/config.yml | 1 -
ui/deployment/modules.yml | 36 +++------
ui/deployment/state.config.mst | 1 +
.../pipeline-element-icon-stand.component.css | 17 ----
.../pipeline-element-icon-stand.component.html | 59 ++++----------
.../pipeline-element-icon-stand.component.scss | 9 ++-
.../pipeline-element-icon-stand.component.ts | 94 ++++++++++++++--------
.../pipeline-element-options.component.css | 17 ++++
.../pipeline-element-options.component.html | 1 -
.../pipeline-element-recommendation.component.html | 14 ++--
.../pipeline-element-recommendation.component.scss | 17 ++++
.../pipeline-element-recommendation.component.ts | 63 ++++++++-------
ui/src/app/editor-v2/editor.component.html | 2 +-
ui/src/app/editor-v2/editor.component.ts | 9 +--
ui/src/app/editor-v2/editor.module.ts | 7 +-
ui/src/app/editor-v2/services/editor.service.ts | 12 +++
.../editor-v2/services/jsplumb-bridge.service.ts | 2 -
ui/src/app/editor-v2/services/jsplumb.service.ts | 1 -
.../pipeline-element-recommendation.service.ts | 15 ++--
.../src/app/editor-v2/utils/style-sanitizer.ts | 20 ++---
20 files changed, 205 insertions(+), 192 deletions(-)
delete mode 100644 ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.css
copy streampipes-commons/src/main/java/org/apache/streampipes/commons/exceptions/NoMatchingJsonSchemaException.java => ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss (85%)
copy streampipes-sdk/src/main/java/org/apache/streampipes/sdk/helpers/Locales.java => ui/src/app/editor-v2/utils/style-sanitizer.ts (70%)
[incubator-streampipes] 02/04: [STREAMPIPES-145] Migrate pipeline
element filter
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit dbcca294a090d3f1097268ce27697d73edd72d62
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 22:07:34 2020 +0200
[STREAMPIPES-145] Migrate pipeline element filter
---
.../pipeline-element-icon-stand.component.html | 59 ++++----------
... => pipeline-element-icon-stand.component.scss} | 10 ++-
.../pipeline-element-icon-stand.component.ts | 94 ++++++++++++++--------
ui/src/app/editor-v2/editor.component.html | 2 +-
ui/src/app/editor-v2/editor.component.ts | 3 -
ui/src/app/editor-v2/services/editor.service.ts | 12 +++
6 files changed, 99 insertions(+), 81 deletions(-)
diff --git a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
index 046042e..794d17f 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.html
@@ -22,61 +22,36 @@
<div fxLayoutAlign="start center" fxLayout="row">
<div fxLayout="row" style="margin-right: 5px">
<i class="material-icons">search</i>
- <input type="text" ng-model="elementFilter" placeholder="Find Element"
+ <input type="text" (keyup)="applyFilter()" [(ngModel)]="elementFilter" placeholder="Find Element"
style="background-color:#f6f6f6;border: none;border-bottom: solid 2px rgb(27, 20, 100);">
</div>
<div fxLayout="row">
- <button mat-button [matMenuTriggerFor]="menu"><i class="material-icons">list</i>Filter by category</button>
+ <button mat-button [matMenuTriggerFor]="menu"><div class="menu-text-color"><i class="material-icons">list</i> Filter by category</div></button>
<mat-menu #menu="matMenu">
- <button mat-menu-item>
- <i class="material-icons">done</i> Select all
+ <button mat-menu-item (click)="selectAllOptions()">
+ <div class="menu-text-color"><i class="material-icons">done</i> Select all</div>
</button>
- <button mat-menu-item>
- <i class="material-icons">clear</i> Deselect all
+ <button mat-menu-item (click)="deselectAllOptions()">
+ <div class="menu-text-color"><i class="material-icons">clear</i> Deselect all</div>
+ </button>
+ <mat-divider></mat-divider>
+ <button (click)="toggleOption(option)" mat-menu-item *ngFor="let option of currentCategories">
+ <div class="menu-text-color" *ngIf="optionSelected(option)">
+ <i class="material-icons">visibility</i> {{option.label}}
+ </div>
+ <div class="menu-text-color" *ngIf="!optionSelected(option)">
+ <i class="material-icons">visibility_off</i> {{option.label}}
+ </div>
</button>
</mat-menu>
-<!-- <md-menu-bar>-->
-<!-- <md-menu>-->
-<!-- <button ng-click="$mdOpenMenu()" class="sp-accent">-->
-<!-- <md-icon md-svg-icon="action:ic_view_list_24px"-->
-<!-- class="sp-accent"></md-icon>-->
-<!-- Filter by category-->
-<!-- </button>-->
-<!-- <md-menu-content>-->
-<!-- <md-menu-item class="md-indent">-->
-<!-- <md-icon md-svg-icon="action:ic_done_24px"-->
-<!-- class="sp-accent"></md-icon>-->
-<!-- <md-button ng-click="ctrl.selectAllOptions()"> Select all</md-button>-->
-<!-- </md-menu-item>-->
-<!-- <md-menu-item class="md-indent">-->
-<!-- <md-icon md-svg-icon="content:ic_clear_24px"-->
-<!-- class="sp-accent"></md-icon>-->
-<!-- <md-button ng-click="ctrl.deselectAllOptions()"> Deselect all</md-button>-->
-<!-- </md-menu-item>-->
-<!-- <md-menu-divider></md-menu-divider>-->
-<!-- <div ng-repeat="option in ctrl.availableOptions[ctrl.activeType] | orderBy: 'label'">-->
-<!-- <md-menu-item class="md-indent">-->
-<!-- <md-icon md-svg-icon="action:ic_visibility_24px"-->
-<!-- class="sp-accent"-->
-<!-- ng-if="ctrl.optionSelected(option)"></md-icon>-->
-<!-- <md-icon md-svg-icon="action:ic_visibility_off_24px"-->
-<!-- class="sp-accent"-->
-<!-- ng-if="!ctrl.optionSelected(option)"></md-icon>-->
-<!-- <md-button ng-click="ctrl.toggleFilter(option)"> {{option.label}}-->
-<!-- </md-button>-->
-<!-- </md-menu-item>-->
-<!-- </div>-->
-<!-- </md-menu-content>-->
-<!-- </md-menu>-->
-<!-- </md-menu-bar>-->
</div>
</div>
</div>
</div>
-<div flex id="editor-icon-stand" class="icon-stand" *ngIf="currentElements">
+<div flex id="editor-icon-stand" class="icon-stand" *ngIf="currentlyFilteredElements">
<span id="{{ element.appId }}" (mouseenter)="updateMouseOver(element.name)"
(mouseleave)="updateMouseOver('')"
- *ngFor="let element of currentElements"
+ *ngFor="let element of currentlyFilteredElements"
class="draggable-icon tt"
[attr.data-pe]="element.elementId"
[ngClass]="activeCssClass">
diff --git a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.css b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
similarity index 84%
rename from ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.css
rename to ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
index 41ecef0..a2714f7 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.css
+++ b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.scss
@@ -14,4 +14,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*
- */
\ No newline at end of file
+ */
+
+@import '../../../../scss/_variables.scss';
+
+.menu-text-color {
+ color: $sp-color-accent;
+ display: flex;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
index 2b1f788..5e74d7b 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-icon-stand/pipeline-element-icon-stand.component.ts
@@ -17,25 +17,28 @@
*/
import {Component, Input, OnInit,} from "@angular/core";
-import * as angular from "angular";
import {RestApi} from "../../../services/rest-api.service";
import {PipelineElementType, PipelineElementUnion} from "../../model/editor.model";
import {PipelineElementTypeUtils} from "../../utils/editor.utils";
import {EditorService} from "../../services/editor.service";
+import {zip} from "rxjs";
@Component({
selector: 'pipeline-element-icon-stand',
templateUrl: './pipeline-element-icon-stand.component.html',
- styleUrls: ['./pipeline-element-icon-stand.component.css']
+ styleUrls: ['./pipeline-element-icon-stand.component.scss']
})
export class PipelineElementIconStandComponent implements OnInit {
- @Input()
- currentElements: PipelineElementUnion[];
- elementFilter: string;
- availableOptions: any = [];
+ _currentElements: PipelineElementUnion[];
+
+ currentlyFilteredElements: PipelineElementUnion[];
+
+ elementFilter: string = "";
+ allCategories: any = [];
+ currentCategories: any = [];
selectedOptions: any = [];
_activeType: PipelineElementType;
@@ -49,7 +52,7 @@ export class PipelineElementIconStandComponent implements OnInit {
}
ngOnInit(): void {
- this.loadOptions(this.activeType);
+ this.loadOptions();
}
ngAfterViewInit() {
@@ -64,62 +67,85 @@ export class PipelineElementIconStandComponent implements OnInit {
this.currentElementName = elementAppId;
}
- loadOptions(type?) {
- this.RestApi.getEpCategories()
- .then(msg => {
- let s = msg;
- this.handleCategoriesSuccess("stream", s);
- this.handleCategoriesSuccess("set", s);
+ loadOptions() {
+ zip(this.EditorService.getEpCategories(),
+ this.EditorService.getEpaCategories(),
+ this.EditorService.getEcCategories()).subscribe((results) => {
+ this.allCategories[PipelineElementType.DataStream] = results[0];
+ this.allCategories[PipelineElementType.DataSet] = results[0];
+ this.allCategories[PipelineElementType.DataProcessor] = results[1];
+ this.allCategories[PipelineElementType.DataSink] = results[2];
+ this.currentCategories = this.allCategories[0];
+ this.selectedOptions = [...this.currentCategories];
});
-
- this.RestApi.getEpaCategories()
- .then(s => this.handleCategoriesSuccess("sepa", s));
-
- this.RestApi.getEcCategories()
- .then(s => this.handleCategoriesSuccess("action", s));
-
};
- getOptions(type) {
- this.selectAllOptions();
- //return this.availableOptions[type];
+ applyFilter() {
+ this.currentlyFilteredElements = this.currentElements.filter(el => {
+ return this.matchesText(el) && this.matchesCategory(el);
+ })
}
+ matchesText(el: PipelineElementUnion): boolean {
+ return this.elementFilter === "" || el.name.includes(this.elementFilter);
+ }
- handleCategoriesSuccess(type, result) {
- this.availableOptions[type] = result.data;
- this.selectAllOptions();
+ matchesCategory(el: PipelineElementUnion): boolean {
+ return this._activeType === PipelineElementType.DataStream ||
+ this._activeType === PipelineElementType.DataSet ?
+ this.selectedOptions.some(c => el.category.some(cg => c.type === cg)) :
+ this.selectedOptions.some(c => el.category.some(cg => c.code === cg));
}
- toggleFilter(option) {
- this.selectedOptions = [];
- this.selectedOptions.push(option.type);
+ toggleOption(option) {
+ if (this.optionSelected(option)) {
+ this.selectedOptions.splice(option, 1);
+ } else {
+ this.selectedOptions.push(option);
+ }
+ this.applyFilter();
}
optionSelected(option) {
- return this.selectedOptions.indexOf(option.type) > -1;
+ return this._activeType === PipelineElementType.DataStream ||
+ this._activeType === PipelineElementType.DataSet ?
+ this.selectedOptions.map(o => o.type).indexOf(option.type) > -1 :
+ this.selectedOptions.map(o => o.code).indexOf(option.code) > -1;
}
selectAllOptions() {
- this.selectedOptions = [];
- angular.forEach(this.availableOptions[this.activeType], o => {
- this.selectedOptions.push(o.type);
- });
+ this.selectedOptions = [...this.currentCategories];
+ this.applyFilter();
}
deselectAllOptions() {
this.selectedOptions = [];
+ this.applyFilter();
}
@Input()
set activeType(value: PipelineElementType) {
this._activeType = value;
+ if (this.allCategories.length > 0) {
+ this.currentCategories = this.allCategories[this._activeType];
+ this.selectedOptions = [...this.currentCategories];
+ }
this.activeCssClass = this.makeActiveCssClass(value);
setTimeout(() => {
this.makeDraggable();
})
};
+ @Input()
+ set currentElements(value: PipelineElementUnion[]) {
+ this._currentElements = value;
+ this.currentlyFilteredElements = this._currentElements;
+ }
+
+ get currentElements() {
+ return this._currentElements;
+ }
+
makeActiveCssClass(elementType: PipelineElementType): string {
return PipelineElementTypeUtils.toCssShortHand(elementType);
}
diff --git a/ui/src/app/editor-v2/editor.component.html b/ui/src/app/editor-v2/editor.component.html
index 23f9e22..3edf415 100644
--- a/ui/src/app/editor-v2/editor.component.html
+++ b/ui/src/app/editor-v2/editor.component.html
@@ -34,7 +34,7 @@
style="background-color:#f6f6f6;padding:0px;border-bottom:1px solid #ffffff">
<pipeline-element-icon-stand [activeType]="activeType"
[currentElements]="currentElements"
- element-filter="ctrl.elementFilter" *ngIf="allElementsLoaded">
+ *ngIf="allElementsLoaded">
</pipeline-element-icon-stand>
</div>
<pipeline-assembly [rawPipelineModel]="rawPipelineModel" [allElements]="allElements"
diff --git a/ui/src/app/editor-v2/editor.component.ts b/ui/src/app/editor-v2/editor.component.ts
index 790fb1f..2251161 100644
--- a/ui/src/app/editor-v2/editor.component.ts
+++ b/ui/src/app/editor-v2/editor.component.ts
@@ -129,8 +129,5 @@ export class EditorComponent implements OnInit {
this.activeType = this.tabs[index].type;
this.currentElements = this.allElements
.filter(pe => pe instanceof PipelineElementTypeUtils.toType(this.activeType));
- console.log(this.currentElements);
}
-
-
}
diff --git a/ui/src/app/editor-v2/services/editor.service.ts b/ui/src/app/editor-v2/services/editor.service.ts
index c6be960..7df13b7 100644
--- a/ui/src/app/editor-v2/services/editor.service.ts
+++ b/ui/src/app/editor-v2/services/editor.service.ts
@@ -59,6 +59,18 @@ export class EditorService {
return this.http.get(this.platformServicesCommons.authUserBasePath() + "/pipeline-cache");
}
+ getEpCategories() {
+ return this.http.get(this.platformServicesCommons.unauthenticatedBasePath + "/categories/ep");
+ }
+
+ getEpaCategories() {
+ return this.http.get(this.platformServicesCommons.unauthenticatedBasePath + "/categories/epa");
+ }
+
+ getEcCategories() {
+ return this.http.get(this.platformServicesCommons.unauthenticatedBasePath + "/categories/ec");
+ }
+
updateCachedPipeline(rawPipelineModel: any) {
return this.http.post(this.platformServicesCommons.authUserBasePath() + "/pipeline-cache", rawPipelineModel);
}
[incubator-streampipes] 03/04: [STREAMPIPES-145] Sort pipeline
elements by name
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 1879d4620865ed86ee1c42a7e9e0e54b1a05897a
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 22:12:46 2020 +0200
[STREAMPIPES-145] Sort pipeline elements by name
---
ui/src/app/editor-v2/editor.component.ts | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/ui/src/app/editor-v2/editor.component.ts b/ui/src/app/editor-v2/editor.component.ts
index 2251161..f57e555 100644
--- a/ui/src/app/editor-v2/editor.component.ts
+++ b/ui/src/app/editor-v2/editor.component.ts
@@ -128,6 +128,9 @@ export class EditorComponent implements OnInit {
this.selectedIndex = index;
this.activeType = this.tabs[index].type;
this.currentElements = this.allElements
- .filter(pe => pe instanceof PipelineElementTypeUtils.toType(this.activeType));
+ .filter(pe => pe instanceof PipelineElementTypeUtils.toType(this.activeType))
+ .sort((a, b) => {
+ return a.name.localeCompare(b.name);
+ });
}
}
[incubator-streampipes] 04/04: [STREAMPIPES-145] Fix bug in
pipeline element recommender
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit af46865607959627a69985387649393f4ad00a33
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 15 00:04:22 2020 +0200
[STREAMPIPES-145] Fix bug in pipeline element recommender
---
.../pipeline-element-options.component.css | 17 ++++++
.../pipeline-element-options.component.html | 1 -
.../pipeline-element-recommendation.component.html | 14 +++--
.../pipeline-element-recommendation.component.scss | 17 ++++++
.../pipeline-element-recommendation.component.ts | 63 +++++++++++-----------
ui/src/app/editor-v2/editor.component.ts | 1 -
ui/src/app/editor-v2/editor.module.ts | 7 ++-
.../editor-v2/services/jsplumb-bridge.service.ts | 2 -
ui/src/app/editor-v2/services/jsplumb.service.ts | 1 -
.../pipeline-element-recommendation.service.ts | 15 +++---
ui/src/app/editor-v2/utils/style-sanitizer.ts | 32 +++++++++++
11 files changed, 117 insertions(+), 53 deletions(-)
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css
index e69de29..13cbc4a 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css
@@ -0,0 +1,17 @@
+/*
+ * 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.
+ *
+ */
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
index 3f346a2..8dd2bb7 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
@@ -66,4 +66,3 @@
[pipelineElementDomId]="pipelineElement.payload.dom"
[recommendedElements]="recommendedElements"
[recommendationsShown]="recommendationsShown" *ngIf="recommendationsAvailable"></pipeline-element-recommendation>
-
diff --git a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
index 8bc34a1..10a883c 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
@@ -16,16 +16,14 @@
~
-->
-<div class="cv-wrapper" [ngClass]="recommendationsShown ? 'opened-nav' : ''"
- *ngIf="recommendedElements.length > 0">
+<div *ngIf="recommendationsPrepared && recommendedElements.length > 0" class="cv-wrapper" [ngClass]="recommendationsShown ? 'opened-nav' : ''">
<ul>
- <li *ngFor="let recommendedElement of recommendedElements; index as i"
- [style]="DomSanitizer.bypassSecurityTrustStyle(recommendationLayout[i].skewStyle)">
- {{recommendedElement}}
- <a [style]="DomSanitizer.bypassSecurityTrustStyle(recommendationLayout[i].unskewStyle)" [ngClass]="recommendationLayout[i].type" (click)="create(recommendedElement)" *ngIf="recommendedElement.name">
+ <li *ngFor="let recommendedElement of recommendedElements"
+ [style]="recommendedElement.layoutSettings.skewStyle | safeCss">
+ <a [style]="recommendedElement.layoutSettings.unskewStyle | safeCss" [ngClass]="recommendedElement.layoutSettings.type" (click)="create(recommendedElement)" *ngIf="recommendedElement.name">
</a>
- <div (click)="create(recommendedElement)" [style]="DomSanitizer.bypassSecurityTrustStyle(recommendationLayout[i].unskewStyleLabel)"
- class="{{recommendationLayout[i].type}}">
+ <div (click)="create(recommendedElement)" [style]="recommendedElement.layoutSettings.unskewStyleLabel | safeCss"
+ class="{{recommendedElement.layoutSettings.type}}">
<pipeline-element [iconSize]="'small'" [pipelineElement]="recommendedElement" *ngIf="recommendedElement.name">
</pipeline-element>
</div>
diff --git a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss
index e69de29..13cbc4a 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss
+++ b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss
@@ -0,0 +1,17 @@
+/*
+ * 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.
+ *
+ */
diff --git a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
index 2cd25ff..ff3cec0 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
@@ -21,6 +21,7 @@ import {Component, Input, OnInit} from "@angular/core";
import {PipelineElementConfig, PipelineElementRecommendationLayout} from "../../model/editor.model";
import {DataProcessorInvocation} from "../../../core-model/gen/streampipes-model";
import {DomSanitizer} from "@angular/platform-browser";
+import {SafeCss} from "../../utils/style-sanitizer";
@Component({
selector: 'pipeline-element-recommendation',
@@ -41,10 +42,10 @@ export class PipelineElementRecommendationComponent implements OnInit {
@Input()
recommendedElements: any;
- recommendationLayout: PipelineElementRecommendationLayout[] = [];
+ recommendationsPrepared: boolean = false;
constructor(private JsplumbService: JsplumbService,
- public DomSanitizer: DomSanitizer) {
+ public safeCss: SafeCss) {
}
@@ -54,14 +55,18 @@ export class PipelineElementRecommendationComponent implements OnInit {
prepareStyles() {
this.recommendedElements.forEach((element, index) => {
- let layoutSettings: PipelineElementRecommendationLayout = {
- skewStyle: element.name ? this.getSkewStyle(index) : {'opacity':0},
- unskewStyle: this.getUnskewStyle(element, index),
- unskewStyleLabel: this.getUnskewStyleLabel(index),
- type: element instanceof DataProcessorInvocation ? "sepa" : "action"
- };
- this.recommendationLayout.push(layoutSettings);
+ this.setLayoutSettings(element, index);
});
+ this.recommendationsPrepared = true;
+ }
+
+ setLayoutSettings(element, index) {
+ element.layoutSettings = {
+ skewStyle: element.name ? this.getSkewStyle(index) : {'opacity': 0},
+ unskewStyle: this.getUnskewStyle(element, index),
+ unskewStyleLabel: this.getUnskewStyleLabel(index),
+ type: element instanceof DataProcessorInvocation ? "sepa" : "action"
+ };
}
create(recommendedElement) {
@@ -73,10 +78,8 @@ export class PipelineElementRecommendationComponent implements OnInit {
var unskew = -(this.getSkew());
var rotate = -(90 - (this.getSkew() / 2));
- return {
- "transform": "skew(" + unskew + "deg)" + " rotate(" + rotate + "deg)" + " scale(1)",
- "background-color": this.getBackgroundColor(recommendedElement, index)
- };
+ return "transform: skew(" + unskew + "deg)" + " rotate(" + rotate + "deg)" + " scale(1);"
+ +"background-color: " +this.getBackgroundColor(recommendedElement, index);
}
getBackgroundColor(recommendedElement, index) {
@@ -100,9 +103,7 @@ export class PipelineElementRecommendationComponent implements OnInit {
var skew = this.getSkew();
var rotate = (index + 1) * this.getAngle();
- return {
- "transform": "rotate(" + rotate + "deg) skew(" + skew + "deg)"
- };
+ return "transform: rotate(" + rotate + "deg) skew(" + skew + "deg);";
}
getUnskewStyleLabel(index) {
@@ -110,20 +111,18 @@ export class PipelineElementRecommendationComponent implements OnInit {
var rotate = (index + 1) * this.getAngle();
var 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"
- };
+ 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() {
@@ -137,7 +136,9 @@ export class PipelineElementRecommendationComponent implements OnInit {
fillRemainingItems() {
if (this.recommendedElements.length < 6) {
for (var i = this.recommendedElements.length; i < 6; i++) {
- this.recommendedElements.push({fakeElement: true});
+ let element = {fakeElement: true};
+ this.setLayoutSettings(element, i);
+ this.recommendedElements.push(element);
}
}
}
diff --git a/ui/src/app/editor-v2/editor.component.ts b/ui/src/app/editor-v2/editor.component.ts
index f57e555..21c9eed 100644
--- a/ui/src/app/editor-v2/editor.component.ts
+++ b/ui/src/app/editor-v2/editor.component.ts
@@ -89,7 +89,6 @@ export class EditorComponent implements OnInit {
});
this.pipelineElementService.getDataSources().subscribe(sources => {
let allStreams = this.collectStreams(sources);
- console.log(allStreams);
this.availableDataStreams = allStreams.filter(s => !(s instanceof SpDataSet));
this.availableDataSets = allStreams
.filter(s => s instanceof SpDataSet)
diff --git a/ui/src/app/editor-v2/editor.module.ts b/ui/src/app/editor-v2/editor.module.ts
index 522b7b2..d363f43 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -55,6 +55,7 @@ import {MatListModule} from "@angular/material/list";
import {HelpComponent} from "./dialog/help/help.component";
import {PipelineElementDocumentationComponent} from "./components/pipeline-element-documentation/pipeline-element-documentation.component";
import { ShowdownModule } from 'ngx-showdown';
+import {SafeCss} from "./utils/style-sanitizer";
@NgModule({
imports: [
@@ -84,7 +85,8 @@ import { ShowdownModule } from 'ngx-showdown';
PipelineElementOptionsComponent,
PipelineElementRecommendationComponent,
PipelineComponent,
- SavePipelineComponent
+ SavePipelineComponent,
+ SafeCss
],
providers: [
EditorService,
@@ -113,7 +115,8 @@ import { ShowdownModule } from 'ngx-showdown';
provide: '$timeout',
useFactory: ($injector: any) => $injector.get('$timeout'),
deps: ['$injector']
- }
+ },
+ SafeCss
],
exports: [
EditorComponent
diff --git a/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts b/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts
index 3b64e88..82631d1 100644
--- a/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts
+++ b/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts
@@ -39,8 +39,6 @@ export class JsplumbBridge {
}
setContainer(container) {
- console.log("container");
- console.log(container);
jsPlumb.setContainer(container);
}
diff --git a/ui/src/app/editor-v2/services/jsplumb.service.ts b/ui/src/app/editor-v2/services/jsplumb.service.ts
index fd19a19..4df54c5 100644
--- a/ui/src/app/editor-v2/services/jsplumb.service.ts
+++ b/ui/src/app/editor-v2/services/jsplumb.service.ts
@@ -150,7 +150,6 @@ export class JsplumbService {
let pipelineElementConfig = {} as PipelineElementConfig;
pipelineElementConfig.type = PipelineElementTypeUtils
.toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement))
- console.log(pipelineElementConfig.type);
pipelineElementConfig.payload = this.clone(pipelineElement);
pipelineElementConfig.settings = {connectable: connectable,
openCustomize: !(pipelineElement as any).configured,
diff --git a/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts b/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts
index 8e16eba..4738fad 100644
--- a/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts
+++ b/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts
@@ -41,15 +41,15 @@ export class PipelineElementRecommendationService {
}
populateRecommendedList(allElements, recs) {
- var elementRecommendations = [];
+ let elementRecommendations: any = [];
recs.sort(function (a, b) {
return (a.count > b.count) ? -1 : ((b.count > a.count) ? 1 : 0);
});
- var maxRecs = recs.length > 7 ? 7 : recs.length;
- var el;
- for (var i = 0; i < maxRecs; i++) {
- el = recs[i];
- var element = this.getPipelineElementContents(allElements, el.elementId)[0];
+ let maxRecs = recs.length > 7 ? 7 : recs.length;
+ for (let i = 0; i < maxRecs; i++) {
+ let el = recs[i];
+ let elements = this.getPipelineElementContents(allElements, el.elementId);
+ let element = elements[0];
(element as any).weight = el.weight;
elementRecommendations.push(element);
}
@@ -59,6 +59,7 @@ export class PipelineElementRecommendationService {
getPipelineElementContents(allElements: PipelineElementUnion[], belongsTo: string) {
return allElements
- .filter(pe => (pe instanceof SpDataStream && pe.elementId === belongsTo) || (pe instanceof InvocableStreamPipesEntity && pe.belongsTo === belongsTo));
+ .filter(pe => (pe instanceof SpDataStream && pe.elementId === belongsTo)
+ || (pe instanceof InvocableStreamPipesEntity && pe.belongsTo === belongsTo));
}
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/utils/style-sanitizer.ts b/ui/src/app/editor-v2/utils/style-sanitizer.ts
new file mode 100644
index 0000000..a1c530d
--- /dev/null
+++ b/ui/src/app/editor-v2/utils/style-sanitizer.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { Pipe, PipeTransform } from '@angular/core';
+import {DomSanitizer, SafeStyle} from "@angular/platform-browser";
+
+@Pipe({name: 'safeCss'})
+export class SafeCss implements PipeTransform {
+
+ constructor(private DomSanitizer: DomSanitizer) {
+
+ }
+
+ transform(value: any): SafeStyle {
+ return this.DomSanitizer.bypassSecurityTrustStyle(value);
+ }
+}
\ No newline at end of file
[incubator-streampipes] 01/04: [STREAMPIPES-145] Use migrated
editor module as default
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 8f539278395b378fc5a714519b66591f02b2c348
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 18:22:25 2020 +0200
[STREAMPIPES-145] Use migrated editor module as default
---
ui/deployment/dev/config.yml | 1 -
ui/deployment/modules.yml | 36 +++++++++++-------------------------
ui/deployment/state.config.mst | 1 +
3 files changed, 12 insertions(+), 26 deletions(-)
diff --git a/ui/deployment/dev/config.yml b/ui/deployment/dev/config.yml
index 3efb6ec..568a8c6 100644
--- a/ui/deployment/dev/config.yml
+++ b/ui/deployment/dev/config.yml
@@ -28,4 +28,3 @@ modules:
- spDataExplorer
- spConfiguration
- spDataExplorer2
- - spEditor2
diff --git a/ui/deployment/modules.yml b/ui/deployment/modules.yml
index 515ecde..02e92fa 100644
--- a/ui/deployment/modules.yml
+++ b/ui/deployment/modules.yml
@@ -14,19 +14,20 @@
# limitations under the License.
spEditor:
- ng5: False
- ng1_templateUrl: '../editor/editor.html'
- ng5_moduleName: ''
- ng5_component: ''
- ng5_componentPath: ''
- path: './editor/editor.module'
+ ng5: True
+ ng1_templateUrl: ''
+ ng1_controller: ''
+ ng5_moduleName: 'EditorModule'
+ ng5_component: 'EditorComponent'
+ ng5_componentPath: '../editor-v2/editor.component'
+ path: './editor-v2/editor.module'
link: 'streampipes.editor'
url: '/editor/:pipeline'
- title: 'Pipeline Editor'
- description: 'The editor can be used to model new pipelines'
+ title: 'Editor'
+ description: 'editor-v2'
icon: 'action:ic_dashboard_24px'
- homeImage: '/assets/img/home/editor.png'
- admin: False
+ homeImage: '/assets/img/home/configuration.png'
+ admin: false
spConnect:
ng5: True
ng1_templateUrl: ''
@@ -170,19 +171,4 @@ spDataExplorer2:
description: 'data-explorer-v2'
icon: 'navigation:ic_apps_24px'
homeImage: '/assets/img/home/configuration.png'
- admin: false
-spEditor2:
- ng5: True
- ng1_templateUrl: ''
- ng1_controller: ''
- ng5_moduleName: 'EditorModule'
- ng5_component: 'EditorComponent'
- ng5_componentPath: '../editor-v2/editor.component'
- path: './editor-v2/editor.module'
- link: 'streampipes.editor2'
- url: '/editor2'
- title: 'Editor'
- description: 'editor-v2'
- icon: 'action:ic_dashboard_24px'
- homeImage: '/assets/img/home/configuration.png'
admin: false
\ No newline at end of file
diff --git a/ui/deployment/state.config.mst b/ui/deployment/state.config.mst
index 330e598..cbd9462 100644
--- a/ui/deployment/state.config.mst
+++ b/ui/deployment/state.config.mst
@@ -170,6 +170,7 @@ export default function stateConfig($stateProvider, $urlRouterProvider) {
{{#ng5}}
.state('{{{link}}}', {
url: '{{{url}}}',
+ {{#containsPipeline}}{{ng1_templateUrl}}{{/containsPipeline}}
views: {
"spMain@streampipes": {
component: {{{ng5_component}}}