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/08 08:59:09 UTC
[incubator-streampipes] branch STREAMPIPES-145 updated (6e85d52 ->
d13546e)
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 6e85d52 [STREAMPIPES-145] Add dialog template
new 45df2ef [STREAMPIPES-145] Add customize option in pipeline-element-options
new d13546e [STREAMPIPES-145] Improve layout of customize 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:
.../pipeline-element-options.component.html | 2 +-
.../pipeline-element-options.component.ts | 8 +++-
.../components/pipeline/pipeline.component.html | 3 +-
.../components/pipeline/pipeline.component.ts | 2 +-
.../dialog/customize/customize.component.css | 39 +++++++++++++++++++
.../dialog/customize/customize.component.html | 44 ++++++++++++++++++++++
.../dialog/customize/customize.component.ts | 30 +++++++++++++++
.../dialog/panel/panel-dialog.component.html | 16 +++++---
.../dialog/panel/panel-dialog.component.scss | 32 +++++++++++-----
ui/src/app/editor-v2/editor.module.ts | 4 +-
10 files changed, 161 insertions(+), 19 deletions(-)
[incubator-streampipes] 02/02: [STREAMPIPES-145] Improve layout of
customize 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 d13546e591a48a0ffaf7f9244fc450839d5ab930
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 8 10:21:15 2020 +0200
[STREAMPIPES-145] Improve layout of customize dialog
---
.../components/pipeline/pipeline.component.html | 2 +-
.../components/pipeline/pipeline.component.ts | 2 +-
.../dialog/customize/customize.component.css | 39 +++++++++++++++++++
.../dialog/customize/customize.component.html | 44 ++++++++++++++++++++++
.../dialog/customize/customize.component.ts | 30 +++++++++++++++
.../dialog/panel/panel-dialog.component.html | 16 +++++---
.../dialog/panel/panel-dialog.component.scss | 32 +++++++++++-----
ui/src/app/editor-v2/editor.module.ts | 4 +-
8 files changed, 152 insertions(+), 17 deletions(-)
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.html b/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
index 5a7cdbc..ccf4572 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
@@ -23,7 +23,7 @@
<span style="z-index:5;"
[ngClass]="getElementCssClasses(pipelineElement)">
<div class="pipeline-element-progress-container sp-fade" *ngIf="pipelineElement.settings.loadingStatus">
-<!-- <md-progress-circular md-mode="indeterminate" class="pipeline-element-progress" md-diameter="40px"></md-progress-circular>-->
+ <mat-spinner [mode]="'indeterminate'" class="pipeline-element-progress" [diameter]="40"></mat-spinner>
</div>
<div class="pipeline-element-loading-container sp-fade-opacity" *ngIf="pipelineElement.settings.loadingStatus"></div>
<div class="pipeline-element-configuration-invalid {{pipelineElement.type === 'stream' ? 'pi-stream' : 'pi-processor'}}" *ngIf="pipelineElement.payload.uncompleted">
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 be53fe5..a795921 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
@@ -356,7 +356,7 @@ export class PipelineComponent implements OnInit {
inputMap["pipelineElement"] = pipelineElement;
const dialogRef = this.PanelDialogService.open(CustomizeComponent, {
- width: "400px",
+ width: "60vw",
title: "Customize " + pipelineElement.payload.name
}, inputMap);
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.css b/ui/src/app/editor-v2/dialog/customize/customize.component.css
index e69de29..916c3d1 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.css
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.css
@@ -0,0 +1,39 @@
+/*
+ * 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.
+ *
+ */
+
+.dialog-container {
+ display: flex;
+ flex-flow: column;
+ align-items: stretch;
+ flex: 1 1 100%;
+ height:100%;
+}
+
+.mat-dialog-content {
+ margin: 0px;
+ flex: 1 1 auto;
+}
+
+.mat-dialog-actions {
+ padding: 10px;
+}
+
+.customize-section {
+ display:flex;
+ flex: 1 1 auto;
+}
\ No newline at end of file
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 e40d375..0fa3757 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.html
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.html
@@ -16,3 +16,47 @@
~
-->
+<div class="dialog-container">
+ <div class="mat-dialog-content">
+ <div fxFlex="100" fxLayout="column">
+ <div style="height:100px;border-bottom:1px solid #ccc;padding-left:10px;padding-right:10px;background-color:#f6f6f6">
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="end end">
+ <mat-slide-toggle [(ngModel)]="showDocumentation" aria-label="Switch 1"
+ [disabled]="!pipelineElement.payload.includesAssets">
+ Show documentation
+ </mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="displayRecommended" aria-label="Switch 1">
+ Show only recommended settings
+ </mat-slide-toggle>
+ </div>
+ </div>
+ <div fxFlex="100" fxLayout="row">
+ <form name="customizeForm" flex="100">
+ <div fxFlex="100" fxLayout="column" *ngIf="restrictedEditMode">
+ <div fxLayout="column" class="customize-item-main-help" style="border: 2px solid #ffc400">
+ <div class="customize-item-title-help" style="background: #ffc400;" fxFlex="100"
+ fxLayout="row">
+ You can only modify things that don't affect your pipeline structure. To fully
+ modify this element, make sure that it doesn't connect to any successors (remove
+ outgoing connectors).
+ </div>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div fxFlex="100" fxLayout="column" class="customize-section">
+
+ </div>
+ </div>
+ </div>
+
+ <div class="mat-dialog-actions">
+ <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <button mat-button mat-raised-button color="primary" (click)="save()" style="margin-right:10px;">
+ Save
+ </button>
+ <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ Cancel
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.ts b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
index 9e9811b..1254a53 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
@@ -30,6 +30,28 @@ export class CustomizeComponent implements OnInit {
@Input()
pipelineElement: PipelineElementConfig;
+ displayRecommended: boolean;
+ showDocumentation: boolean = false;
+ customizeForm: any;
+ restrictedEditMode: boolean;
+
+ selectedElement: any;
+ selection: any;
+ matchingSelectionLeft: any;
+ matchingSelectionRight: any;
+ invalid: any;
+ helpDialogVisible: any;
+ currentStaticProperty: any;
+ validationErrors: any;
+ configVisible: any;
+
+ sourceEndpoint: any;
+ sepa: any;
+
+ //ShepherdService: ShepherdService;
+
+
+
constructor(private dialogRef: DialogRef<CustomizeComponent>) {
}
@@ -38,4 +60,12 @@ export class CustomizeComponent implements OnInit {
}
+ close() {
+
+ }
+
+ save() {
+
+ }
+
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
index 23c2f5f..90f2613 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.html
@@ -16,8 +16,14 @@
~
-->
-<div style="display:flex;justify-content:space-between;padding:0.5rem;width:100%">
- <span class="dialog-title">{{ dialogTitle }}</span>
- <button mat-button mat-icon-button (click)="closeDialog()"><i class="material-icons">clear</i></button>
-</div>
-<ng-template cdkPortalOutlet #portal></ng-template>
\ No newline at end of file
+<div fxFlex="100" fxLayout="column">
+ <div class="dialog-panel-header">
+ <span class="dialog-title">{{ dialogTitle }}</span>
+ <button mat-button mat-icon-button (click)="closeDialog()">
+ <i class="material-icons" style="font-size:30px;">clear</i>
+ </button>
+ </div>
+ <div class="dialog-panel-content">
+ <ng-template cdkPortalOutlet #portal></ng-template>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
index cdeec74..c7bfe60 100644
--- a/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
+++ b/ui/src/app/editor-v2/dialog/panel/panel-dialog.component.scss
@@ -19,16 +19,30 @@
@import '../../../../scss/sp/colors';
app-dialog-container {
- width: 100%;
- display: grid;
- grid-template-rows: 40px 1fr;
- padding: 0 10px;
- background-color: #fff
+ width: 100%;
+ background-color: #fff
+}
+
+.dialog-panel-header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ background: #f6f6f6;
+ padding: 10px 0.5rem 0.5rem;
+}
+
+.dialog-panel-content {
+ flex: 1 1 100%;
}
.dialog-title {
- font-weight: bold;
- background: $sp-color-primary;
- padding:20px;
- color:white;
+ font-weight: bold;
+ border-left: 10px solid $sp-color-primary;
+ padding: 5px;
+ font-size:30px;
+ color: $sp-color-accent;
+}
+
+#portal {
+ width:100%;
}
\ 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 936e1f2..b5e0b00 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -48,6 +48,7 @@ import {OverlayModule} from "@angular/cdk/overlay";
import {PanelDialogComponent} from "./dialog/panel/panel-dialog.component";
import {PanelDialogService} from "./dialog/panel/panel-dialog.service";
import {CustomizeComponent} from "./dialog/customize/customize.component";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
@NgModule({
imports: [
@@ -61,7 +62,8 @@ import {CustomizeComponent} from "./dialog/customize/customize.component";
FormsModule,
ConnectModule,
PortalModule,
- OverlayModule
+ OverlayModule,
+ MatProgressSpinnerModule
],
declarations: [
CustomizeComponent,
[incubator-streampipes] 01/02: [STREAMPIPES-145] Add customize
option in pipeline-element-options
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 45df2efc336390d50f651131cabe29e143a68705
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 7 23:10:57 2020 +0200
[STREAMPIPES-145] Add customize option in pipeline-element-options
---
.../pipeline-element-options.component.html | 2 +-
.../pipeline-element-options.component.ts | 8 +++++++-
ui/src/app/editor-v2/components/pipeline/pipeline.component.html | 1 +
3 files changed, 9 insertions(+), 2 deletions(-)
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 cc33aa9..c48a6a3 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
@@ -19,7 +19,7 @@
<div *ngIf="currentMouseOverElement==pipelineElement.payload.dom" class="sp-fade-options">
<span class="options-button customize-button" *ngIf="pipelineElement.type!='stream'" style="z-index:10">
<button mat-button mat-icon-button matTooltip="Configure Element" [matTooltipPosition]="'above'"
- (click)="openCustomizeDialog()">
+ (click)="customizeElement(pipelineElement)">
<i class="material-icons">settings</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 0c6ca01..876c58b 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
@@ -69,6 +69,9 @@ export class PipelineElementOptionsComponent implements OnInit{
@Output()
delete: EventEmitter<PipelineElementConfig> = new EventEmitter<PipelineElementConfig>();
+ @Output()
+ customize: EventEmitter<PipelineElementConfig> = new EventEmitter<PipelineElementConfig>();
+
constructor(private ObjectProvider: ObjectProvider,
private PipelineElementRecommendationService: PipelineElementRecommendationService,
//private InitTooltips: InitTooltips,
@@ -101,10 +104,13 @@ export class PipelineElementOptionsComponent implements OnInit{
}
}
- removeElement(pipelineElement) {
+ removeElement(pipelineElement: PipelineElementConfig) {
this.delete.emit(pipelineElement);
//this.$rootScope.$broadcast("pipeline.validate");
+ }
+ customizeElement(pipelineElement: PipelineElementConfig) {
+ this.customize.emit(pipelineElement);
}
openCustomizeDialog() {
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.html b/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
index 634fd82..5a7cdbc 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.html
@@ -34,6 +34,7 @@
<pipeline-element [pipelineElement]="pipelineElement.payload" [preview]="preview"></pipeline-element>
</span>
<pipeline-element-options *ngIf="!preview" (delete)="handleDeleteOption($event)"
+ (customize)="showCustomizeDialog($event)"
[currentMouseOverElement]="currentMouseOverElement"
[pipelineValid]="pipelineValid"
[allElements]="allElements"