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:17 UTC
[incubator-streampipes] branch STREAMPIPES-145 updated (2bcad07 ->
2335c84)
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 2bcad07 [STREAMPIPES-145] Migrate pipeline element recommender
new 0e46ddd [STREAMPIPES-145] Migrate compatible elements dialog
new 2335c84 [STREAMPIPES-145] Migrate delete dialog
The 2 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/src/app/core-ui/core-ui.module.ts | 5 +-
.../confirm-dialog/confirm-dialog.component.html | 10 +++
.../confirm-dialog/confirm-dialog.component.scss} | 4 +-
.../confirm-dialog/confirm-dialog.component.ts} | 26 +++---
.../panel-dialog/panel-dialog.component.html | 2 +-
.../panel-dialog/panel-dialog.component.scss | 9 ++-
.../pipeline-assembly.component.html | 2 +-
.../pipeline-assembly.component.ts | 36 +++++----
.../pipeline-element-options.component.html | 2 +-
.../pipeline-element-options.component.ts | 25 +++++-
.../components/pipeline/pipeline.component.ts | 4 +-
.../compatible-elements.component.html | 43 ++++++++++
.../compatible-elements.component.scss} | 23 ++++--
.../compatible-elements.component.ts | 92 ++++++++++++++++++++++
.../dialog/customize/customize.component.html | 9 +--
.../dialog/customize/customize.component.scss | 6 --
.../save-pipeline/save-pipeline.component.html | 8 +-
.../save-pipeline/save-pipeline.component.ts | 2 +-
ui/src/app/editor-v2/editor.module.ts | 4 +
ui/src/app/editor-v2/services/editor.service.ts | 6 ++
ui/src/app/editor-v2/services/jsplumb.service.ts | 1 +
.../pipeline-element-options.controller.ts | 3 -
ui/src/app/services/services.module.ts | 2 -
ui/src/app/services/transition.service.ts | 61 --------------
ui/src/scss/sp/sp-dialog.scss | 20 +++--
25 files changed, 270 insertions(+), 135 deletions(-)
create mode 100644 ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html
copy ui/src/app/{app-transport-monitoring/model/parcel-metrics-event.model.ts => core-ui/dialog/confirm-dialog/confirm-dialog.component.scss} (91%)
copy ui/src/app/core-ui/{image/image.component.ts => dialog/confirm-dialog/confirm-dialog.component.ts} (63%)
create mode 100644 ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html
copy ui/src/app/editor-v2/dialog/{save-pipeline/save-pipeline.component.scss => compatible-elements/compatible-elements.component.scss} (87%)
create mode 100644 ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts
delete mode 100644 ui/src/app/services/transition.service.ts
[incubator-streampipes] 01/02: [STREAMPIPES-145] Migrate compatible
elements dialog
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 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
[incubator-streampipes] 02/02: [STREAMPIPES-145] Migrate delete
dialog
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 2335c84f13d50db9f0b39b8f3e9b3c8793f7234f
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Jun 13 13:42:02 2020 +0200
[STREAMPIPES-145] Migrate delete dialog
---
ui/src/app/core-ui/core-ui.module.ts | 5 +-
.../confirm-dialog/confirm-dialog.component.html | 10 ++++
.../confirm-dialog/confirm-dialog.component.scss} | 23 ++------
.../confirm-dialog/confirm-dialog.component.ts} | 33 ++++++------
.../pipeline-assembly.component.html | 2 +-
.../pipeline-assembly.component.ts | 36 ++++++++-----
.../components/pipeline/pipeline.component.ts | 4 +-
.../compatible-elements.component.html | 17 +++---
.../compatible-elements.component.ts | 6 ++-
.../dialog/customize/customize.component.html | 9 ++--
.../save-pipeline/save-pipeline.component.html | 8 +--
.../save-pipeline/save-pipeline.component.ts | 2 +-
ui/src/app/editor-v2/services/editor.service.ts | 6 +++
.../pipeline-element-options.controller.ts | 3 --
ui/src/app/services/services.module.ts | 2 -
ui/src/app/services/transition.service.ts | 61 ----------------------
ui/src/scss/sp/sp-dialog.scss | 8 +--
17 files changed, 91 insertions(+), 144 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 070e01b..0517366 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -51,6 +51,7 @@ import {PanelDialogComponent} from "./dialog/panel-dialog/panel-dialog.component
import {DialogService} from "./dialog/base-dialog/base-dialog.service";
import {PortalModule} from "@angular/cdk/portal";
import {OverlayModule} from "@angular/cdk/overlay";
+import {ConfirmDialogComponent} from "./dialog/confirm-dialog/confirm-dialog.component";
// PlotlyViaCDNModule.plotlyjs = PlotlyJS;
@NgModule({
@@ -72,6 +73,7 @@ import {OverlayModule} from "@angular/cdk/overlay";
OverlayModule,
],
declarations: [
+ ConfirmDialogComponent,
ImageComponent,
ImageContainerComponent,
ImageLabelingComponent,
@@ -99,7 +101,8 @@ import {OverlayModule} from "@angular/cdk/overlay";
ImageComponent,
ImageLabelingComponent,
StandardDialogComponent,
- PanelDialogComponent
+ PanelDialogComponent,
+ ConfirmDialogComponent
]
})
export class CoreUiModule {
diff --git a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html
new file mode 100644
index 0000000..47aac1c
--- /dev/null
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +1,10 @@
+<div fxFlex="100" fxLayout="column">
+ <div>
+ <h4>{{data.title}}</h4>
+ <h5>{{data.subtitle}}</h5>
+ </div>
+ <div fxFlex="100" fxLayoutAlign="end center" class="footer">
+ <button mat-button (click)="onCancel()">No</button>
+ <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Yes</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
similarity index 77%
copy from ui/src/scss/sp/sp-dialog.scss
copy to ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
index b2c4357..43a8279 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
@@ -1,4 +1,4 @@
-/*!
+/*
* 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.
@@ -16,23 +16,8 @@
*
*/
-.dialog-container {
- display: grid;
- height: 100%;
- grid-template-rows: 1fr auto;
+@import '../../../../scss/sp/sp-dialog';
-}
-
-.mat-dialog-content {
- margin: 0px;
- overflow-y:auto;
- flex: 1 1 auto;
-}
-
-.mat-dialog-actions {
- padding: 10px;
-}
-
-.p-15 {
- padding: 15px;
+.footer {
+ margin-top:20px;
}
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
similarity index 61%
copy from ui/src/scss/sp/sp-dialog.scss
copy to ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
index b2c4357..ccd85bd 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
@@ -1,4 +1,4 @@
-/*!
+/*
* 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.
@@ -16,23 +16,22 @@
*
*/
-.dialog-container {
- display: grid;
- height: 100%;
- grid-template-rows: 1fr auto;
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-}
-.mat-dialog-content {
- margin: 0px;
- overflow-y:auto;
- flex: 1 1 auto;
-}
+@Component({
+ selector: 'confirmation-dialog',
+ templateUrl: './confirm-dialog.component.html',
+ styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent {
+ constructor(
+ public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
+ }
-.mat-dialog-actions {
- padding: 10px;
+ onCancel(): void {
+ this.dialogRef.close();
+ }
}
-
-.p-15 {
- padding: 15px;
-}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html
index a3fa2b6..0a2898d 100644
--- a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html
@@ -87,7 +87,7 @@
</div>
</div>
</div>
- <button mat-button matTooltip="Clear Assembly Area" [matTooltipPosition]="'above'"
+ <button mat-button matTooltip="Clear Assembly Area" [matTooltipPosition]="'above'" [disabled]="EditorService.pipelineAssemblyEmpty"
class="md-icon-button" (click)="showClearAssemblyConfirmDialog($event)">
<i class="material-icons">clear</i>
</button>
diff --git a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
index 0fbedce..91accc6 100644
--- a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -28,6 +28,9 @@ import {ObjectProvider} from "../../services/object-provider.service";
import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
import {SavePipelineComponent} from "../../dialog/save-pipeline/save-pipeline.component";
import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+import {ConfirmDialogComponent} from "../../../core-ui/dialog/confirm-dialog/confirm-dialog.component";
+import {MatDialog} from "@angular/material/dialog";
+import {EditorService} from "../../services/editor.service";
@Component({
@@ -64,23 +67,21 @@ export class PipelineAssemblyComponent implements OnInit {
// Remove later
EditorDialogManager: any;
- TransitionService: any;
constructor(private JsplumbBridge: JsplumbBridge,
private PipelinePositioningService: PipelinePositioningService,
private ObjectProvider: ObjectProvider,
- //private EditorDialogManager: EditorDialogManager,
+ private EditorService: EditorService,
public PipelineValidationService: PipelineValidationService,
private RestApi: RestApi,
private JsplumbService: JsplumbService,
- //private TransitionService: TransitionService,
private ShepherdService: ShepherdService,
- private dialogService: DialogService) {
+ private dialogService: DialogService,
+ private dialog: MatDialog) {
this.selectMode = true;
this.currentZoomLevel = 1;
-
}
ngOnInit(): void {
@@ -141,15 +142,22 @@ export class PipelineAssemblyComponent implements OnInit {
($("#assembly") as any).panzoom("zoom", zoomOut);
}
- showClearAssemblyConfirmDialog(ev) {
- this.EditorDialogManager.showClearAssemblyDialog(ev).then(() => {
- if (this.currentModifiedPipelineId) {
- this.currentModifiedPipelineId = undefined;
+ showClearAssemblyConfirmDialog(event: any) {
+ let dialogRef = this.dialog.open(ConfirmDialogComponent, {
+ width: '500px',
+ data: {
+ "title": "Do you really want to delete the current pipeline?",
+ "subtitle": "This cannot be undone."
+ },
+ });
+ dialogRef.afterClosed().subscribe(ev => {
+ if (ev) {
+ if (this.currentModifiedPipelineId) {
+ this.currentModifiedPipelineId = undefined;
+ }
+ this.clearAssembly();
+ this.EditorService.makePipelineAssemblyEmpty(true);
}
- this.clearAssembly();
- this.TransitionService.makePipelineAssemblyEmpty(true);
-
- }, function () {
});
};
@@ -225,7 +233,7 @@ export class PipelineAssemblyComponent implements OnInit {
displayPipelineInEditor(autoLayout) {
this.PipelinePositioningService.displayPipeline(this.rawPipelineModel, "#assembly", false, autoLayout);
- this.TransitionService.makePipelineAssemblyEmpty(false);
+ this.EditorService.makePipelineAssemblyEmpty(false);
this.pipelineValid = this.PipelineValidationService.isValidPipeline(this.rawPipelineModel);
}
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
index 29e0c16..bd14563 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
@@ -176,7 +176,7 @@ export class PipelineComponent implements OnInit {
let pipelineElementId = ui.draggable.data("pe");
let pipelineElement: PipelineElementUnion = this.findPipelineElementByElementId(pipelineElementId);
if (ui.draggable.hasClass('draggable-icon')) {
- //this.TransitionService.makePipelineAssemblyEmpty(false);
+ this.EditorService.makePipelineAssemblyEmpty(false);
var pipelineElementConfig = this.JsplumbService.createNewPipelineElementConfig(pipelineElement, this.PipelineEditorService.getCoordinates(ui, this.currentZoomLevel), false);
if ((this.isStreamInPipeline() && pipelineElementConfig.type == 'set') ||
this.isSetInPipeline() && pipelineElementConfig.type == 'stream') {
@@ -243,7 +243,7 @@ export class PipelineComponent implements OnInit {
}
});
if (this.rawPipelineModel.every(pe => pe.settings.disabled)) {
- this.TransitionService.makePipelineAssemblyEmpty(true);
+ this.EditorService.makePipelineAssemblyEmpty(true);
}
this.JsplumbBridge.repaintEverything();
this.RestApi.updateCachedPipeline(this.rawPipelineModel);
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
index f060cc2..26e1f8e 100644
--- 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
@@ -16,8 +16,8 @@
~
-->
-<div class="dialog-container">
- <div class="mat-dialog-content p-15">
+<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)" >
@@ -33,10 +33,11 @@
</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>
+ <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
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
index f11a969..bad9f95 100644
--- 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
@@ -73,13 +73,15 @@ export class CompatibleElementsComponent {
makeStandardStyle() {
return {
- background: "white"
+ background: "white",
+ cursor: "auto"
}
}
makeHoverStyle() {
return {
- background: "lightgrey"
+ background: "lightgrey",
+ cursor: "pointer"
}
}
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.html b/ui/src/app/editor-v2/dialog/customize/customize.component.html
index 63726f1..21224a7 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.html
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.html
@@ -16,8 +16,8 @@
~
-->
-<div class="dialog-container">
- <div class="mat-dialog-content">
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content">
<div fxFlex="100" fxLayout="column">
<div style="border-bottom:1px solid #ccc;padding:10px;background-color:#f6f6f6">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end end">
@@ -53,9 +53,8 @@
</div>
</div>
</div>
-
- <div class="mat-dialog-actions">
- <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
<button mat-button mat-raised-button color="primary" (click)="save()" style="margin-right:10px;">
Save
</button>
diff --git a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html
index 0c1aaf4..1ab2b87 100644
--- a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html
+++ b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html
@@ -16,8 +16,8 @@
~
-->
-<div class="dialog-container">
- <div class="mat-dialog-content padding-20">
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content padding-20">
<div fxFlex="100" fxLayout="column">
<form name="submitPipelineForm">
@@ -50,8 +50,8 @@
</form>
</div>
</div>
- <div class="mat-dialog-actions">
- <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
<button mat-button mat-raised-button color="primary" (click)="savePipelineName(false)" style="margin-right:10px;">
Save
</button>
diff --git a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts
index 836ada2..6f4660c 100644
--- a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts
+++ b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts
@@ -117,7 +117,7 @@ export class SavePipelineComponent implements OnInit {
afterStorage(data: Message, switchTab) {
this.displaySuccess(data);
this.hide();
- //this.TransitionService.makePipelineAssemblyEmpty(true);
+ this.editorService.makePipelineAssemblyEmpty(true);
this.editorService.removePipelineFromCache();
if (this.ShepherdService.isTourActive()) {
this.ShepherdService.hideCurrentStep();
diff --git a/ui/src/app/editor-v2/services/editor.service.ts b/ui/src/app/editor-v2/services/editor.service.ts
index ed44cd5..ab054b5 100644
--- a/ui/src/app/editor-v2/services/editor.service.ts
+++ b/ui/src/app/editor-v2/services/editor.service.ts
@@ -34,6 +34,8 @@ export class EditorService {
public pipelineElementConfigured$ = this.pipelineElementConfigured.asObservable();
+ pipelineAssemblyEmpty: boolean = true;
+
constructor(private http: HttpClient,
private platformServicesCommons: PlatformServicesCommons) {
}
@@ -70,6 +72,10 @@ export class EditorService {
this.pipelineElementConfigured.next(pipelineElementDomId);
}
+ makePipelineAssemblyEmpty(status) {
+ this.pipelineAssemblyEmpty = status;
+ }
+
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts
index d6a0f2e..a193dbc 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts
@@ -20,7 +20,6 @@ import * as angular from 'angular';
import {JsplumbBridge} from "../../../editor-v2/services/jsplumb-bridge.service";
import {JsplumbService} from "../../../editor-v2/services/jsplumb.service";
import {PipelineValidationService} from "../../../editor-v2/services/pipeline-validation.service";
-import {TransitionService} from "../../../services/transition.service";
import {RestApi} from "../../../services/rest-api.service";
export class PipelineElementOptionsController {
@@ -40,7 +39,6 @@ export class PipelineElementOptionsController {
rawPipelineModel: any;
allElements: any;
deleteFunction: any;
- TransitionService: TransitionService;
$rootScope: any;
$timeout: any;
RestApi: RestApi;
@@ -56,7 +54,6 @@ export class PipelineElementOptionsController {
this.JsplumbBridge = JsplumbBridge;
this.EditorDialogManager = EditorDialogManager;
this.JsplumbService = JsplumbService;
- this.TransitionService = TransitionService;
this.PipelineValidationService = PipelineValidationService;
this.RestApi = RestApi;
diff --git a/ui/src/app/services/services.module.ts b/ui/src/app/services/services.module.ts
index ed30f67..4ef9ac5 100644
--- a/ui/src/app/services/services.module.ts
+++ b/ui/src/app/services/services.module.ts
@@ -39,7 +39,6 @@ import {JsplumbConfigService} from '../editor-v2/services/jsplumb-config.service
import {PipelineElementIconService} from './pipeline-icon.service'
import {ObjectProvider} from '../editor-v2/services/object-provider.service'
import {downgradeInjectable} from '@angular/upgrade/static';
-import {TransitionService} from "./transition.service";
import {ShepherdService} from "./tour/shepherd.service";
import {TourProviderService} from "./tour/tour-provider.service";
import {PropertySelectorService} from "./property-selector.service";
@@ -72,7 +71,6 @@ export default angular.module('sp.services', [spConstants])
.service('JsplumbConfigService', JsplumbConfigService)
.service('PipelineElementIconService', PipelineElementIconService)
.service('RouteTransitionInterceptorService', RouteTransitionInterceptorService)
- .service('TransitionService', TransitionService)
.service('ShepherdService', ShepherdService)
.service('TourProviderService', TourProviderService)
.service('PropertySelectorService', PropertySelectorService)
diff --git a/ui/src/app/services/transition.service.ts b/ui/src/app/services/transition.service.ts
deleted file mode 100644
index f4bbe6e..0000000
--- a/ui/src/app/services/transition.service.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * 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 {Inject, Injectable} from "@angular/core";
-
-@Injectable()
-export class TransitionService {
-
- AuthService: any;
- $mdDialog: any;
- isPipelineAssemblyEmpty: boolean = true;
-
- constructor(AuthService, $mdDialog) {
- this.AuthService = AuthService;
- this.$mdDialog = $mdDialog;
- }
-
- onTransitionStarted(transitionInfo) {
- if (transitionInfo.$from().name === 'streampipes.editor' && !(this.isPipelineAssemblyEmpty)) {
- return this.showDiscardPipelineDialog().then(() => {
- this.isPipelineAssemblyEmpty = true;
- return true;
- }, function () {
- return false;
- });
- }
- }
-
- makePipelineAssemblyEmpty(status) {
- this.isPipelineAssemblyEmpty = status;
- }
-
- getPipelineAssemblyEmpty() {
- return this.isPipelineAssemblyEmpty;
- }
-
- showDiscardPipelineDialog() {
- var confirm = this.$mdDialog.confirm()
- .title('Discard changes?')
- .textContent('Your current pipeline will be discarded.')
- .ok('Discard Changes')
- .cancel('Cancel');
- return this.$mdDialog.show(confirm);
- }
-}
-TransitionService.$inject = ['AuthService', '$mdDialog'];
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/scss/sp/sp-dialog.scss
index b2c4357..dab562b 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/scss/sp/sp-dialog.scss
@@ -16,20 +16,20 @@
*
*/
-.dialog-container {
+.sp-dialog-container {
display: grid;
height: 100%;
- grid-template-rows: 1fr auto;
+ grid-template-rows: auto 10px 60px;
}
-.mat-dialog-content {
+.sp-dialog-content {
margin: 0px;
overflow-y:auto;
flex: 1 1 auto;
}
-.mat-dialog-actions {
+.sp-dialog-actions {
padding: 10px;
}