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/15 20:14:03 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-145] Add options to
tabs overview
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 2396bde21b58ffb7a968c86aaa7fa3f0f66e932f
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 15 20:41:30 2020 +0200
[STREAMPIPES-145] Add options to tabs overview
---
ui/src/app/editor-v2/editor.component.html | 18 ++++++-
...{editor.component.css => editor.component.scss} | 8 ++-
ui/src/app/editor-v2/editor.component.ts | 59 +++++++++++++++++++++-
3 files changed, 82 insertions(+), 3 deletions(-)
diff --git a/ui/src/app/editor-v2/editor.component.html b/ui/src/app/editor-v2/editor.component.html
index 3edf415..5b9b99d 100644
--- a/ui/src/app/editor-v2/editor.component.html
+++ b/ui/src/app/editor-v2/editor.component.html
@@ -25,13 +25,29 @@
<mat-tab *ngFor="let tab of tabs" label="{{tab.title}}"></mat-tab>
</mat-tab-group>
</div>
+ <div fxFlex="30" fxLayout="row" fxLayoutAlign="end center"
+ style="padding-left:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc">
+ <button mat-button class="md-icon-button" (click)="startCreatePipelineTour()" [matTooltip]="'Tutorial'">
+ <i class="material-icons text-color">
+ school
+ </i>
+ </button>
+ <button mat-button class="md-icon-button" *ngIf="!minimizedEditorStand"
+ (click)="toggleEditorStand()" [matTooltip]="'Hide'">
+ <i class="material-icons text-color">arrow_drop_up</i>
+ </button>
+ <button mat-button class="md-icon-button" *ngIf="minimizedEditorStand"
+ (click)="toggleEditorStand()" [matTooltip]="'Show'">
+ <i class="material-icons text-color">arrow_drop_down</i>
+ </button>
+ </div>
</div>
</div>
</div>
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
<div id="shepherd-test"
- style="background-color:#f6f6f6;padding:0px;border-bottom:1px solid #ffffff">
+ style="background-color:#f6f6f6;padding:0px;border-bottom:1px solid #ffffff" [hidden]="minimizedEditorStand">
<pipeline-element-icon-stand [activeType]="activeType"
[currentElements]="currentElements"
*ngIf="allElementsLoaded">
diff --git a/ui/src/app/editor-v2/editor.component.css b/ui/src/app/editor-v2/editor.component.scss
similarity index 90%
rename from ui/src/app/editor-v2/editor.component.css
rename to ui/src/app/editor-v2/editor.component.scss
index 41ecef0..48a7f25 100644
--- a/ui/src/app/editor-v2/editor.component.css
+++ b/ui/src/app/editor-v2/editor.component.scss
@@ -14,4 +14,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*
- */
\ No newline at end of file
+ */
+
+@import '../../scss/variables';
+
+.text-color {
+ color: $sp-color-accent;
+}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/editor.component.ts b/ui/src/app/editor-v2/editor.component.ts
index 21c9eed..ca2ecdb 100644
--- a/ui/src/app/editor-v2/editor.component.ts
+++ b/ui/src/app/editor-v2/editor.component.ts
@@ -37,7 +37,7 @@ import {PipelineElementTypeUtils} from "./utils/editor.utils";
@Component({
selector: 'editor',
templateUrl: './editor.component.html',
- styleUrls: ['./editor.component.css']
+ styleUrls: ['./editor.component.scss']
})
export class EditorComponent implements OnInit {
@@ -58,6 +58,13 @@ export class EditorComponent implements OnInit {
elementsLoaded = [false, false, false];
allElementsLoaded: boolean = false;
+ minimizedEditorStand: boolean = false;
+
+ requiredStreamForTutorialAppId: any = "org.apache.streampipes.sources.simulator.flowrate1";
+ requiredProcessorForTutorialAppId: any = "org.apache.streampipes.processors.filters.jvm.numericalfilter";
+ requiredSinkForTutorialAppId: any = "org.apache.streampipes.sinks.internal.jvm.dashboard";
+ missingElementsForTutorial: any = [];
+
tabs = [
{
title: 'Data Sets',
@@ -132,4 +139,54 @@ export class EditorComponent implements OnInit {
return a.name.localeCompare(b.name);
});
}
+
+ toggleEditorStand() {
+ this.minimizedEditorStand = !this.minimizedEditorStand;
+ }
+
+ startCreatePipelineTour() {
+ if (this.requiredPipelineElementsForTourPresent()) {
+ //this.ShepherdService.startCreatePipelineTour();
+ } else {
+ this.missingElementsForTutorial = [];
+ if (!this.requiredStreamForTourPresent()) {
+ this.missingElementsForTutorial.push({"name" : "Flow Rate 1", "appId" : this.requiredStreamForTutorialAppId });
+ }
+ if (!this.requiredProcessorForTourPresent()) {
+ this.missingElementsForTutorial.push({"name" : "Field Hasher", "appId" : this.requiredProcessorForTutorialAppId});
+ }
+ if (!this.requiredSinkForTourPresent()) {
+ this.missingElementsForTutorial.push({"name" : "Dashboard Sink", "appId" : this.requiredSinkForTutorialAppId});
+ }
+
+ //this.EditorDialogManager.showMissingElementsForTutorialDialog(this.missingElementsForTutorial);
+ }
+ }
+
+ requiredPipelineElementsForTourPresent() {
+ return this.requiredStreamForTourPresent() &&
+ this.requiredProcessorForTourPresent() &&
+ this.requiredSinkForTourPresent();
+ }
+
+ requiredStreamForTourPresent() {
+ return this.requiredPeForTourPresent(this.allElements["stream"],
+ this.requiredStreamForTutorialAppId);
+ }
+
+ requiredProcessorForTourPresent() {
+ return this.requiredPeForTourPresent(this.allElements["sepa"],
+ this.requiredProcessorForTutorialAppId);
+ }
+
+ requiredSinkForTourPresent() {
+ return this.requiredPeForTourPresent(this.allElements["action"],
+ this.requiredSinkForTutorialAppId);
+ }
+
+ requiredPeForTourPresent(list, appId) {
+ return list && list.some(el => {
+ return el.appId === appId;
+ });
+ }
}