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/13 11:42:18 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-145] Migrate compatible
elements dialog
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 0e46ddd2d6384f4a7b475c7779c7deada14963e8
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Jun 12 23:06:12 2020 +0200
[STREAMPIPES-145] Migrate compatible elements dialog
---
.../panel-dialog/panel-dialog.component.html | 2 +-
.../panel-dialog/panel-dialog.component.scss | 9 ++-
.../pipeline-element-options.component.html | 2 +-
.../pipeline-element-options.component.ts | 25 +++++-
.../compatible-elements.component.html | 42 ++++++++++
.../compatible-elements.component.scss} | 23 +++++-
.../compatible-elements.component.ts | 90 ++++++++++++++++++++++
.../dialog/customize/customize.component.scss | 6 --
ui/src/app/editor-v2/editor.module.ts | 4 +
ui/src/app/editor-v2/services/jsplumb.service.ts | 1 +
ui/src/scss/sp/sp-dialog.scss | 14 ++--
11 files changed, 197 insertions(+), 21 deletions(-)
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html
index 5a1edd0..7da4171 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html
+++ b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.html
@@ -16,7 +16,7 @@
~
-->
-<div fxFlex="100" fxLayout="column">
+<div class="dialog-panel">
<div class="dialog-panel-header">
<span class="dialog-title">{{ dialogTitle }}</span>
<button mat-button mat-icon-button (click)="close()">
diff --git a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
index b19537d..e76c692 100644
--- a/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
+++ b/ui/src/app/core-ui/dialog/panel-dialog/panel-dialog.component.scss
@@ -24,6 +24,12 @@ app-dialog-container {
box-shadow: -7px 0px 5px -5px #5d5d5d;
}
+.dialog-panel {
+ height: 100vh;
+ display: grid;
+ grid-template-rows: 50px auto;
+}
+
.dialog-panel-header {
display: flex;
justify-content: space-between;
@@ -35,7 +41,8 @@ app-dialog-container {
}
.dialog-panel-content {
- flex: 1 1 100%;
+ height: 100%;
+ overflow-y:auto;
}
.dialog-title {
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 cca55f1..33581c2 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
@@ -40,7 +40,7 @@
<span class="options-button possible-button" *ngIf="pipelineElement.type!='action'" style="z-index:10">
<button mat-button mat-icon-button matTooltip="Compatible Elements" [matTooltipPosition]="'below'"
[disabled]="!possibleElements || possibleElements.length == 0 || !isConfigured()"
- (click)="EditorDialogManager.openPossibleElementsDialog(rawPipelineModel, possibleElements, pipelineElement.payload.dom)">
+ (click)="openPossibleElementsDialog()">
<i class="material-icons">visibility</i>
</button>
</span>
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
index ee8efa4..4c1709d 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -32,6 +32,9 @@ import {
import {SpDataStream, WildcardTopicDefinition} from "../../../core-model/gen/streampipes-model";
import {PipelineElementTypeUtils} from "../../utils/editor.utils";
import {EditorService} from "../../services/editor.service";
+import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
+import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+import {CompatibleElementsComponent} from "../../dialog/compatible-elements/compatible-elements.component";
@Component({
selector: 'pipeline-element-options',
@@ -41,8 +44,8 @@ import {EditorService} from "../../services/editor.service";
export class PipelineElementOptionsComponent implements OnInit{
recommendationsAvailable: any;
- possibleElements: any;
- recommendedElements: any;
+ possibleElements: PipelineElementUnion[];
+ recommendedElements: PipelineElementUnion[];
recommendationsShown: any;
pipelineElementCssType: string;
@@ -75,10 +78,10 @@ export class PipelineElementOptionsComponent implements OnInit{
constructor(private ObjectProvider: ObjectProvider,
private PipelineElementRecommendationService: PipelineElementRecommendationService,
+ private DialogService: DialogService,
private EditorService: EditorService,
//private InitTooltips: InitTooltips,
private JsplumbBridge: JsplumbBridge,
- //private EditorDialogManager: EditorDialogManager,
private JsplumbService: JsplumbService,
//private TransitionService: TransitionService,
private PipelineValidationService: PipelineValidationService,
@@ -145,6 +148,22 @@ export class PipelineElementOptionsComponent implements OnInit{
});
}
+ 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();
diff --git a/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html
new file mode 100644
index 0000000..f060cc2
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html
@@ -0,0 +1,42 @@
+<!--
+ ~ 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="dialog-container">
+ <div class="mat-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)" >
+ <div class="draggable-icon-preview {{isDataProcessor(possibleElement) ? 'sepa' : 'action'}}">
+ <pipeline-element [pipelineElement]="possibleElement" [iconSize]="true"></pipeline-element>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="center start">
+ <div class="element-name">{{ possibleElement.name }}</div>
+ <div class="element-description">{{ possibleElement.description }}</div>
+ </div>
+ </div>
+ <mat-divider></mat-divider>
+ </div>
+ </div>
+ </div>
+ <div class="mat-dialog-actions">
+ <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <button mat-button mat-raised-button class="mat-basic" (click)="hide()">
+ Cancel
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.scss b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.scss
similarity index 87%
copy from ui/src/app/editor-v2/dialog/customize/customize.component.scss
copy to ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.scss
index d043e55..8ef9d15 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.scss
+++ b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.scss
@@ -18,8 +18,23 @@
@import '../../../../scss/sp/sp-dialog.scss';
-.customize-section {
- display:flex;
- flex: 1 1 auto;
- padding: 20px;
+
+
+.element-name {
+
+}
+
+.element-description {
+
+}
+
+.m-10 {
+ padding-top:10px;
+ padding-bottom:10px;
+}
+
+
+
+.list-item {
+
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts
new file mode 100644
index 0000000..f11a969
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts
@@ -0,0 +1,90 @@
+/*
+ * 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 {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";
+
+@Component({
+ selector: 'compatible-elements',
+ templateUrl: './compatible-elements.component.html',
+ styleUrls: ['./compatible-elements.component.scss']
+})
+export class CompatibleElementsComponent {
+
+ @Input()
+ rawPipelineModel: any;
+
+ @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: "white"
+ }
+ }
+
+ makeHoverStyle() {
+ return {
+ background: "lightgrey"
+ }
+ }
+
+ changeStyle(index: number, hover: boolean) {
+ hover ? this.styles[index] = this.makeHoverStyle() : this.styles[index] = this.makeStandardStyle();
+ }
+
+}
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.scss b/ui/src/app/editor-v2/dialog/customize/customize.component.scss
index d043e55..fddade7 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.scss
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.scss
@@ -17,9 +17,3 @@
*/
@import '../../../../scss/sp/sp-dialog.scss';
-
-.customize-section {
- display:flex;
- flex: 1 1 auto;
- padding: 20px;
-}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/editor.module.ts b/ui/src/app/editor-v2/editor.module.ts
index 8845c91..f5c5a74 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -50,12 +50,15 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import {CoreUiModule} from "../core-ui/core-ui.module";
import {SavePipelineComponent} from "./dialog/save-pipeline/save-pipeline.component";
import {PipelineElementRecommendationComponent} from "./components/pipeline-element-recommendation/pipeline-element-recommendation.component";
+import {CompatibleElementsComponent} from "./dialog/compatible-elements/compatible-elements.component";
+import {MatListModule} from "@angular/material/list";
@NgModule({
imports: [
CoreUiModule,
CommonModule,
MatTabsModule,
+ MatListModule,
FlexLayoutModule,
GridsterModule,
CommonModule,
@@ -66,6 +69,7 @@ import {PipelineElementRecommendationComponent} from "./components/pipeline-elem
MatProgressSpinnerModule
],
declarations: [
+ CompatibleElementsComponent,
CustomizeComponent,
EditorComponent,
PipelineAssemblyComponent,
diff --git a/ui/src/app/editor-v2/services/jsplumb.service.ts b/ui/src/app/editor-v2/services/jsplumb.service.ts
index 4df54c5..fd19a19 100644
--- a/ui/src/app/editor-v2/services/jsplumb.service.ts
+++ b/ui/src/app/editor-v2/services/jsplumb.service.ts
@@ -150,6 +150,7 @@ 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/scss/sp/sp-dialog.scss b/ui/src/scss/sp/sp-dialog.scss
index 6ff62bf..b2c4357 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/scss/sp/sp-dialog.scss
@@ -17,18 +17,22 @@
*/
.dialog-container {
- display: flex;
- flex-flow: column;
- align-items: stretch;
- flex: 1 1 100%;
- height:100%;
+ display: grid;
+ height: 100%;
+ grid-template-rows: 1fr auto;
+
}
.mat-dialog-content {
margin: 0px;
+ overflow-y:auto;
flex: 1 1 auto;
}
.mat-dialog-actions {
padding: 10px;
+}
+
+.p-15 {
+ padding: 15px;
}
\ No newline at end of file