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 13:14:43 UTC
[incubator-streampipes] 01/03: [STREAMPIPES-145] Migrate help 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 6ae26c108c3627a5218b79d8971b5704b03a307b
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sun Jun 14 13:51:19 2020 +0200
[STREAMPIPES-145] Migrate help dialog
---
ui/deployment/app.module.mst | 7 +-
ui/src/app/connect/connect.module.ts | 7 +-
.../component/adapter-started-dialog.component.ts | 35 ------
.../component/dialog-adapter-started.html | 31 +-----
.../pipeline-element-runtime-info.component.html | 47 ++++++++
.../pipeline-element-runtime-info.component.scss | 0
.../pipeline-element-runtime-info.component.ts | 101 ++++++++++++++++++
.../pipeline-assembly.component.ts | 2 +-
.../pipeline-element-icon-stand.component.html | 2 +-
.../pipeline-element-icon-stand.component.ts | 6 +-
.../pipeline-element-options.component.html | 2 +-
.../pipeline-element-options.component.ts | 2 +-
.../app/editor-v2/dialog/help/help.component.html | 70 ++++++++++++
.../app/editor-v2/dialog/help/help.component.scss | 19 ++++
ui/src/app/editor-v2/dialog/help/help.component.ts | 118 +++++++++++++++++++++
ui/src/app/editor-v2/editor.module.ts | 2 +
ui/src/app/editor-v2/services/editor.service.ts | 24 +++--
17 files changed, 392 insertions(+), 83 deletions(-)
diff --git a/ui/deployment/app.module.mst b/ui/deployment/app.module.mst
index e407f60..ce11ee8 100644
--- a/ui/deployment/app.module.mst
+++ b/ui/deployment/app.module.mst
@@ -63,14 +63,11 @@ export const Ng1AppModule = angular
])
.decorator('$rootScope', rootScopeDelegate)
.config(['$urlServiceProvider', ($urlService) => $urlService.deferIntercept()])
- .run(["$rootScope", "$transitions", "TransitionService", "RouteTransitionInterceptorService",
- function ($rootScope, $transitions, TransitionService, RouteTransitionInterceptorService) {
+ .run(["$rootScope", "$transitions", "RouteTransitionInterceptorService",
+ function ($rootScope, $transitions, RouteTransitionInterceptorService) {
$transitions.onBefore({}, transition => {
return RouteTransitionInterceptorService.onTransitionStarted(transition);
});
- $transitions.onStart({}, transition => {
- return TransitionService.onTransitionStarted(transition);
- });
//window['loading_screen'].finish();
}])
.config(mdThemingProviderConfig)
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index c9c1b97..57aa9fd 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -94,6 +94,7 @@ import {EventPropertyRowComponent} from "./schema-editor/event-property-row/even
import {PropertySelectorService} from "../services/property-selector.service";
import {StaticColorPickerComponent} from "./static-properties/static-color-picker/static-color-picker.component";
import {ColorPickerModule} from "ngx-color-picker";
+import {PipelineElementRuntimeInfoComponent} from "./new-adapter/component/runtime-info/pipeline-element-runtime-info.component";
@NgModule({
@@ -115,7 +116,8 @@ import {ColorPickerModule} from "ngx-color-picker";
],
exports: [
StaticPropertyComponent,
- SelectStaticPropertiesComponent
+ SelectStaticPropertiesComponent,
+ PipelineElementRuntimeInfoComponent
],
declarations: [
NewAdapterComponent,
@@ -157,7 +159,8 @@ import {ColorPickerModule} from "ngx-color-picker";
StaticGroupComponent,
StaticAlternativesComponent,
StaticCollectionComponent,
- StaticColorPickerComponent
+ StaticColorPickerComponent,
+ PipelineElementRuntimeInfoComponent
],
providers: [
RestService,
diff --git a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
index 9fd4a3c..a25f0cf 100644
--- a/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
+++ b/ui/src/app/connect/new-adapter/component/adapter-started-dialog.component.ts
@@ -22,7 +22,6 @@ import {ShepherdService} from '../../../services/tour/shepherd.service';
import {RestService} from "../../rest.service";
import {PipelineTemplateService} from '../../../platform-services/apis/pipeline-template.service';
import {
- EventPropertyUnion,
FreeTextStaticProperty,
GenericAdapterSetDescription,
MappingPropertyUnary,
@@ -83,7 +82,6 @@ export class AdapterStartedDialog {
this.restService.getSourceDetails(x.notifications[0].title).subscribe(x => {
this.streamDescription = x.spDataStreams[0];
this.pollingActive = true;
- this.getLatestRuntimeInfo();
});
}
@@ -114,40 +112,7 @@ export class AdapterStartedDialog {
}
}
- getLatestRuntimeInfo() {
- this.restService.getRuntimeInfo(this.streamDescription).subscribe(data => {
- if (!(Object.keys(data).length === 0 && data.constructor === Object)) {
- this.runtimeData = data;
- }
-
- if (this.pollingActive) {
- setTimeout(() => {
- this.getLatestRuntimeInfo();
- }, 1000);
- }
- });
- }
-
- isPropertyType(property: EventPropertyUnion, type) {
- return property.domainProperties !== undefined && property.domainProperties.length === 1 &&
- property.domainProperties[0] === type;
- }
-
- isImage(property) {
- return this.isPropertyType(property, 'https://image.com');
- }
- isTimestamp(property) {
- return this.isPropertyType(property, 'http://schema.org/DateTime');
- }
-
- hasNoDomainProperty(property) {
- if (this.isTimestamp(property) || this.isImage(property)) {
- return false;
- } else {
- return true;
- }
- }
onCloseConfirm() {
this.pollingActive = false;
diff --git a/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html b/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
index 9c1bced..e15927b 100644
--- a/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
+++ b/ui/src/app/connect/new-adapter/component/dialog-adapter-started.html
@@ -57,35 +57,10 @@
</div>
</div>
- <div *ngIf="runtimeData === undefined && !isSetAdapter && !isTemplate">
- <div fxLayout="column">
- <div fxLayoutAlign="center" >
- <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin: 10px 0 5px 0" >Loading</mat-spinner>
- </div>
- <div fxLayoutAlign="center">
- <h3>Gathering data for live preview...</h3>
- </div>
- </div>
- </div>
- <div *ngIf="runtimeData !== undefined">
- <p>Here is a preview of your data:</p>
- <table class="dataTable row-border hover">
- <thead>
- <tr>
- <th>Runtime Name</th>
- <th>Value</th>
- </tr>
- </thead>
- <tbody id="preview-data-rows-id">
- <tr *ngFor="let property of streamDescription.eventSchema.eventProperties">
- <td>{{property.runtimeName}}</td>
- <td *ngIf="isImage(property)"> <img src="data:image/png;base64,{{runtimeData[property.properties.runtimeName]}}" style="max-width: 150px;" /> </td>
- <td *ngIf="isTimestamp(property)">{{runtimeData[property.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>
- <td *ngIf="hasNoDomainProperty(property)">{{runtimeData[property.runtimeName]}}</td>
- </tr>
- </tbody>
- </table>
+ <div *ngIf="!isSetAdapter && !isTemplate">
+ <pipeline-element-runtime-info [streamDescription]="streamDescription" [pollingActive]="pollingActive"></pipeline-element-runtime-info>
</div>
+
</div>
<div *ngIf="!adapterStatus.success">
Something went wrong during the adapter installation.
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html
new file mode 100644
index 0000000..074bc0a
--- /dev/null
+++ b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.html
@@ -0,0 +1,47 @@
+<!--
+ ~ 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 *ngIf="!runtimeData">
+ <div fxLayout="column">
+ <div fxLayoutAlign="center" >
+ <mat-spinner [diameter]="40" fxLayoutAlign="center" style="margin: 10px 0 5px 0" >Loading</mat-spinner>
+ </div>
+ <div fxLayoutAlign="center">
+ <h3>Gathering data for live preview...</h3>
+ </div>
+ </div>
+</div>
+<div *ngIf="runtimeData">
+ <p>Here is a preview of your data:</p>
+ <table class="dataTable row-border hover">
+ <thead>
+ <tr>
+ <th>Runtime Name</th>
+ <th>Value</th>
+ </tr>
+ </thead>
+ <tbody id="preview-data-rows-id">
+ <tr *ngFor="let property of streamDescription.eventSchema.eventProperties">
+ <td>{{property.runtimeName}}</td>
+ <td *ngIf="isImage(property)"> <img src="data:image/png;base64,{{runtimeData[property.properties.runtimeName]}}" style="max-width: 150px;" /> </td>
+ <td *ngIf="isTimestamp(property)">{{runtimeData[property.runtimeName] | date:'yyyy-MM-dd HH:mm:ss '}}</td>
+ <td *ngIf="hasNoDomainProperty(property)">{{runtimeData[property.runtimeName]}}</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
new file mode 100644
index 0000000..80093a4
--- /dev/null
+++ b/ui/src/app/connect/new-adapter/component/runtime-info/pipeline-element-runtime-info.component.ts
@@ -0,0 +1,101 @@
+/*
+ * 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, OnDestroy, OnInit} from '@angular/core';
+import {EventPropertyUnion, SpDataStream} from "../../../../core-model/gen/streampipes-model";
+import {RestService} from "../../../rest.service";
+
+@Component({
+ selector: 'pipeline-element-runtime-info',
+ templateUrl: './pipeline-element-runtime-info.component.html',
+ styleUrls: ['./pipeline-element-runtime-info.component.scss'],
+})
+export class PipelineElementRuntimeInfoComponent implements OnInit, OnDestroy {
+
+ @Input()
+ streamDescription: SpDataStream;
+
+ _pollingActive: boolean;
+
+ runtimeData: any;
+ timer: any;
+
+ constructor(private RestService: RestService) {
+
+ }
+
+ ngOnInit(): void {
+ this.checkPollingStart();
+ }
+
+ checkPollingStart() {
+ if (this._pollingActive) {
+ this.getLatestRuntimeInfo();
+ }
+ }
+
+ getLatestRuntimeInfo() {
+ this.RestService.getRuntimeInfo(this.streamDescription).subscribe(data => {
+ if (!(Object.keys(data).length === 0 && data.constructor === Object)) {
+ this.runtimeData = data;
+ }
+
+ if (this._pollingActive) {
+ this.timer = setTimeout(() => {
+ this.getLatestRuntimeInfo();
+ }, 1000);
+ }
+ });
+ }
+
+ isPropertyType(property: EventPropertyUnion, type) {
+ return property.domainProperties !== undefined && property.domainProperties.length === 1 &&
+ property.domainProperties[0] === type;
+ }
+
+ isImage(property) {
+ return this.isPropertyType(property, 'https://image.com');
+ }
+
+ isTimestamp(property) {
+ return this.isPropertyType(property, 'http://schema.org/DateTime');
+ }
+
+ hasNoDomainProperty(property) {
+ if (this.isTimestamp(property) || this.isImage(property)) {
+ return false;
+ } else {
+ return true;
+ }
+ }
+
+ @Input()
+ set pollingActive(pollingActive: boolean) {
+ this._pollingActive = pollingActive;
+ this.checkPollingStart();
+ }
+
+ get pollingActive(): boolean {
+ return this._pollingActive;
+ }
+
+ ngOnDestroy(): void {
+ this.pollingActive = false;
+ clearTimeout(this.timer);
+ }
+}
\ No newline at end of file
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 4559321..384b7ec 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
@@ -71,7 +71,7 @@ export class PipelineAssemblyComponent implements OnInit {
constructor(private JsplumbBridge: JsplumbBridge,
private PipelinePositioningService: PipelinePositioningService,
private ObjectProvider: ObjectProvider,
- private EditorService: EditorService,
+ public EditorService: EditorService,
public PipelineValidationService: PipelineValidationService,
private RestApi: RestApi,
private JsplumbService: JsplumbService,
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 bdfac01..046042e 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
@@ -86,7 +86,7 @@
<span style="display:block;width:100%;height:100%;position:absolute; top:0; left:0;"
*ngIf="currentElementName===element.name">
<span class="help-button-icon-stand" style="z-index:10"><md-button
- ng-click="openHelpDialog(element)"
+ (click)="openHelpDialog(element)"
class="md-icon-button"
style="margin:0px;font-size:20px;">?</md-button>
</span>
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 b18627b..2b1f788 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
@@ -21,6 +21,7 @@ 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";
@Component({
@@ -42,7 +43,8 @@ export class PipelineElementIconStandComponent implements OnInit {
currentElementName: string;
- constructor(private RestApi: RestApi) {
+ constructor(private RestApi: RestApi,
+ private EditorService: EditorService) {
}
@@ -55,7 +57,7 @@ export class PipelineElementIconStandComponent implements OnInit {
}
openHelpDialog(pipelineElement) {
- //this.EditorDialogManager.openHelpDialog(pipelineElement);
+ this.EditorService.openHelpDialog(pipelineElement);
}
updateMouseOver(elementAppId: string) {
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 33581c2..3f346a2 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
@@ -55,7 +55,7 @@
</span>
<span class="options-button help-button" style="z-index:10">
<button matTooltip="Help" [matTooltipPosition]="'below'"
- mat-button mat-icon-button ng-click="openHelpDialog()">?
+ mat-button mat-icon-button (click)="openHelpDialog()">?
</button>
</span>
<div class="editor-pe-info" [ngClass]="'pe-info-' + pipelineElementCssType">
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 4c1709d..21c32e9 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
@@ -129,7 +129,7 @@ export class PipelineElementOptionsComponent implements OnInit{
}
openHelpDialog() {
- //this.EditorDialogManager.openHelpDialog(this.pipelineElement.payload);
+ this.EditorService.openHelpDialog(this.pipelineElement.payload);
}
openCustomizeStreamDialog() {
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.html b/ui/src/app/editor-v2/dialog/help/help.component.html
new file mode 100644
index 0000000..8c3db13
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/help/help.component.html
@@ -0,0 +1,70 @@
+<!--
+ ~ 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="sp-dialog-container">
+ <div class="sp-dialog-content p-15">
+ <h4>{{pipelineElement.name}}</h4>
+ <p>
+ {{pipelineElement.description}}
+ </p>
+
+ <mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectedIndex=$event">
+ <mat-tab *ngFor="let tab of tabs" label="{{tab.title}}">
+ </mat-tab>
+ </mat-tab-group>
+
+ <div *ngIf="selectedIndex == 0 && streamMode">
+ <h5>Field Names</h5>
+
+ <div>
+ <table class="dataTable row-border hover">
+ <thead>
+ <tr>
+ <th>Field Name</th>
+ <th>Description</th>
+ <th>Runtime Name</th>
+ <th>Type</th>
+ </tr>
+ </thead>
+ <tbody id="preview-data-rows-id">
+ <tr *ngFor="let property of pipelineElement.eventSchema.eventProperties">
+ <td>{{property.label ? property.label : "(n/a)"}}</td>
+ <td>{{property.description ? property.description : "(n/a)"}}</td>
+ <td>{{property.runtimeName}}</td>
+ <td>{{getFriendlyRuntimeType(property.runtimeType)}}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div *ngIf="selectedIndex == 1 && streamMode">
+ <div>
+ <pipeline-element-runtime-info [streamDescription]="pipelineElement" [pollingActive]="pollingActive"></pipeline-element-runtime-info>
+ </div>
+ </div>
+<!-- <div *ngIf="selectedTab == 'documentation'">-->
+<!-- <pipeline-element-documentation use-styling="false" app-id="ctrl.pipelineElement.appId"></pipeline-element-documentation>-->
+<!-- </div>-->
+ </div>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
+ <button mat-button mat-raised-button class="mat-basic" (click)="close()">
+ Close
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.scss b/ui/src/app/editor-v2/dialog/help/help.component.scss
new file mode 100644
index 0000000..0a776e5
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/help/help.component.scss
@@ -0,0 +1,19 @@
+/*
+ * 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 '../../../../scss/sp/sp-dialog.scss';
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/help/help.component.ts b/ui/src/app/editor-v2/dialog/help/help.component.ts
new file mode 100644
index 0000000..1a77f95
--- /dev/null
+++ b/ui/src/app/editor-v2/dialog/help/help.component.ts
@@ -0,0 +1,118 @@
+/*
+ * 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 {PipelineElementUnion} from "../../model/editor.model";
+import {PipelineElementService} from "../../../platform-services/apis/pipeline-element.service";
+import {
+ DataProcessorInvocation,
+ SpDataSet,
+ SpDataStream
+} from "../../../core-model/gen/streampipes-model";
+import {DialogRef} from "../../../core-ui/dialog/base-dialog/dialog-ref";
+import {PipelineElementTypeUtils} from "../../utils/editor.utils";
+
+@Component({
+ selector: 'pipeline-element-help',
+ templateUrl: './help.component.html',
+ styleUrls: ['./help.component.scss']
+})
+export class HelpComponent {
+
+ selectedTab = 0;
+ pollingActive: boolean;
+
+ selectedIndex: number = 0;
+
+ nsPrefix = "http://www.w3.org/2001/XMLSchema#";
+ availableTabs = [
+ {
+ title: 'Fields',
+ type: 'fields',
+ targets: ['set', 'stream']
+ },
+ {
+ title: 'Values',
+ type: 'values',
+ targets: ['set', 'stream']
+ },
+ {
+ title: 'Documentation',
+ type: 'documentation',
+ targets: ['set', 'stream', 'sepa', 'action']
+ }
+ ];
+
+ tabs: any[] = [];
+ streamMode: boolean;
+
+ @Input()
+ pipelineElement: PipelineElementUnion;
+
+ constructor(private PipelineElementService: PipelineElementService,
+ private DialogRef: DialogRef<HelpComponent>) {
+ this.pollingActive = true;
+ }
+
+ ngOnInit() {
+ if (this.pipelineElement instanceof SpDataStream) {
+ this.tabs = this.availableTabs;
+ this.streamMode = true;
+ } else {
+ this.tabs.push(this.availableTabs[2]);
+ this.streamMode = false;
+ }
+ }
+
+ getFriendlyRuntimeType(runtimeType) {
+ if (this.isNumber(runtimeType)) {
+ return "Number";
+ } else if (this.isBoolean(runtimeType)) {
+ return "Boolean";
+ } else {
+ return "Text";
+ }
+ }
+
+ isNumber(runtimeType) {
+ return (runtimeType == (this.nsPrefix + "float")) ||
+ (runtimeType == (this.nsPrefix + "integer")) ||
+ (runtimeType == (this.nsPrefix + "long")) ||
+ (runtimeType == (this.nsPrefix + "double"));
+ }
+
+ isBoolean(runtimeType) {
+ return runtimeType == this.nsPrefix + "boolean";
+ }
+
+ close() {
+ this.pollingActive = false;
+ setTimeout(() => {
+ this.DialogRef.close();
+ });
+ }
+
+
+ filterTab(tab) {
+ let type = PipelineElementTypeUtils.fromType(this.pipelineElement);
+ let cssShortHand = PipelineElementTypeUtils.toCssShortHand(type);
+ return tab.targets.indexOf(cssShortHand) != -1;
+ }
+
+
+}
\ 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 f5c5a74..fc7844f 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -52,6 +52,7 @@ import {SavePipelineComponent} from "./dialog/save-pipeline/save-pipeline.compon
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";
+import {HelpComponent} from "./dialog/help/help.component";
@NgModule({
imports: [
@@ -72,6 +73,7 @@ import {MatListModule} from "@angular/material/list";
CompatibleElementsComponent,
CustomizeComponent,
EditorComponent,
+ HelpComponent,
PipelineAssemblyComponent,
PipelineElementIconStandComponent,
PipelineElementComponent,
diff --git a/ui/src/app/editor-v2/services/editor.service.ts b/ui/src/app/editor-v2/services/editor.service.ts
index ab054b5..c6be960 100644
--- a/ui/src/app/editor-v2/services/editor.service.ts
+++ b/ui/src/app/editor-v2/services/editor.service.ts
@@ -18,14 +18,16 @@
import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
-import {AuthStatusService} from "../../services/auth-status.service";
-import {TsonLdSerializerService} from "../../platform-services/tsonld-serializer.service";
import {
- DataProcessorInvocation, PipelineElementRecommendationMessage,
+ PipelineElementRecommendationMessage,
PipelineModificationMessage
} from "../../core-model/gen/streampipes-model";
import {Observable, Subject} from "rxjs";
import {PlatformServicesCommons} from "../../platform-services/apis/commons.service";
+import {PipelineElementUnion} from "../model/editor.model";
+import {PanelType} from "../../core-ui/dialog/base-dialog/base-dialog.model";
+import {DialogService} from "../../core-ui/dialog/base-dialog/base-dialog.service";
+import {HelpComponent} from "../dialog/help/help.component";
@Injectable()
export class EditorService {
@@ -37,7 +39,8 @@ export class EditorService {
pipelineAssemblyEmpty: boolean = true;
constructor(private http: HttpClient,
- private platformServicesCommons: PlatformServicesCommons) {
+ private platformServicesCommons: PlatformServicesCommons,
+ private DialogService: DialogService) {
}
recommendPipelineElement(pipeline): Observable<PipelineElementRecommendationMessage> {
@@ -76,7 +79,14 @@ export class EditorService {
this.pipelineAssemblyEmpty = status;
}
-
-
-
+ openHelpDialog(pipelineElement: PipelineElementUnion) {
+ this.DialogService.open(HelpComponent,{
+ panelType: PanelType.STANDARD_PANEL,
+ title: pipelineElement.name,
+ width: "70vw",
+ data: {
+ "pipelineElement": pipelineElement
+ }
+ });
+ }
}
\ No newline at end of file