This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch
3212-show-input-fields-in-pipeline-element-customization-dialog
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/3212-show-input-fields-in-pipeline-element-customization-dialog by
this push:
new 0bbe0f5d27 feat(#3212): Show input fields in customization dialog
0bbe0f5d27 is described below
commit 0bbe0f5d2784a2cf06effd7410b719fe18f3bc06
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Sep 3 22:55:16 2024 +0200
feat(#3212): Show input fields in customization dialog
---
.../pipeline-element-runtime-info.component.ts | 45 +++++-----------
.../pipeline-element-schema.service.ts | 61 ++++++++++++++++++++++
.../dialog/customize/customize.component.html | 4 ++
.../input-schema-panel.component.html | 48 +++++++++++++++++
.../input-schema-panel.component.scss | 31 +++++++++++
.../input-schema-panel.component.ts | 37 +++++++++++++
.../input-schema-property.component.html | 30 +++++++++++
.../input-schema-property.component.ts | 43 +++++++++++++++
ui/src/app/editor/editor.module.ts | 8 ++-
.../app/editor/pipes/sort-by-runtime-name.pipe.ts | 32 ++++++++++++
10 files changed, 306 insertions(+), 33 deletions(-)
diff --git
a/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts
b/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts
index a0d6591b62..e5b5e264e7 100644
---
a/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts
+++
b/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts
@@ -36,6 +36,7 @@ import { Subscription } from 'rxjs';
import { HttpDownloadProgressEvent, HttpEventType } from
'@angular/common/http';
import { LivePreviewService } from '../../services/live-preview.service';
import { RuntimeInfo } from './pipeline-element-runtime-info.model';
+import { PipelineElementSchemaService } from
'./pipeline-element-schema.service';
@Component({
selector: 'sp-pipeline-element-runtime-info',
@@ -58,6 +59,7 @@ export class PipelineElementRuntimeInfoComponent implements
OnInit, OnDestroy {
constructor(
private restService: RestService,
private livePreviewService: LivePreviewService,
+ private pipelineELementSchemaService: PipelineElementSchemaService,
) {}
ngOnInit(): void {
@@ -71,46 +73,25 @@ export class PipelineElementRuntimeInfoComponent implements
OnInit, OnDestroy {
return {
label: ep.label || 'n/a',
description: ep.description || 'n/a',
- runtimeType: this.getFriendlyRuntimeType(ep),
+ runtimeType:
+
this.pipelineELementSchemaService.getFriendlyRuntimeType(
+ ep,
+ ),
runtimeName: ep.runtimeName,
value: undefined,
- isTimestamp: this.isTimestamp(ep),
- isImage: this.isImage(ep),
- hasNoDomainProperty: this.hasNoDomainProperty(ep),
+ isTimestamp:
+ this.pipelineELementSchemaService.isTimestamp(ep),
+ isImage: this.pipelineELementSchemaService.isImage(ep),
+ hasNoDomainProperty:
+ this.pipelineELementSchemaService.hasNoDomainProperty(
+ ep,
+ ),
valueChanged: false,
};
})
.sort((a, b) => a.runtimeName.localeCompare(b.runtimeName));
}
- getFriendlyRuntimeType(ep: EventPropertyUnion) {
- if (ep instanceof EventPropertyPrimitive) {
- if (DataType.isNumberType(ep.runtimeType)) {
- return 'Number';
- } else if (DataType.isBooleanType(ep.runtimeType)) {
- return 'Boolean';
- } else {
- return 'Text';
- }
- } else if (ep instanceof EventPropertyList) {
- return 'List';
- } else {
- return 'Nested';
- }
- }
-
- private isImage(ep: EventPropertyUnion) {
- return SemanticType.isImage(ep);
- }
-
- private isTimestamp(ep: EventPropertyUnion) {
- return SemanticType.isTimestamp(ep);
- }
-
- private hasNoDomainProperty(ep: EventPropertyUnion) {
- return !(this.isTimestamp(ep) || this.isImage(ep));
- }
-
getLatestRuntimeInfo() {
this.runtimeSub = this.restService
.getRuntimeInfo(this.streamDescription)
diff --git
a/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts
b/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts
new file mode 100644
index 0000000000..710143fa00
--- /dev/null
+++
b/ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts
@@ -0,0 +1,61 @@
+/*
+ * 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 { Injectable } from '@angular/core';
+import {
+ DataType,
+ EventPropertyList,
+ EventPropertyPrimitive,
+ EventPropertyUnion,
+ SemanticType,
+} from '@streampipes/platform-services';
+
+@Injectable({ providedIn: 'root' })
+export class PipelineElementSchemaService {
+ getFriendlyRuntimeType(ep: EventPropertyUnion): string {
+ if (ep instanceof EventPropertyPrimitive) {
+ if (this.isTimestamp(ep)) {
+ return 'Timestamp';
+ } else if (this.isImage(ep)) {
+ return 'Image';
+ } else if (DataType.isNumberType(ep.runtimeType)) {
+ return 'Number';
+ } else if (DataType.isBooleanType(ep.runtimeType)) {
+ return 'Boolean';
+ } else {
+ return 'Text';
+ }
+ } else if (ep instanceof EventPropertyList) {
+ return 'List';
+ } else {
+ return 'Nested';
+ }
+ }
+
+ isImage(ep: EventPropertyUnion) {
+ return SemanticType.isImage(ep);
+ }
+
+ isTimestamp(ep: EventPropertyUnion) {
+ return SemanticType.isTimestamp(ep);
+ }
+
+ hasNoDomainProperty(ep: EventPropertyUnion) {
+ return !(this.isTimestamp(ep) || this.isImage(ep));
+ }
+}
diff --git a/ui/src/app/editor/dialog/customize/customize.component.html
b/ui/src/app/editor/dialog/customize/customize.component.html
index 70080ddde1..151d88217c 100644
--- a/ui/src/app/editor/dialog/customize/customize.component.html
+++ b/ui/src/app/editor/dialog/customize/customize.component.html
@@ -75,6 +75,10 @@
fxLayout="column"
class="customize-section p-15"
>
+ <sp-input-schema-panel
+ [pipelineElement]="cachedPipelineElement"
+ >
+ </sp-input-schema-panel>
<form [formGroup]="parentForm" fxFlex="100">
<sp-app-static-property
*ngFor="
diff --git
a/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.html
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.html
new file mode 100644
index 0000000000..9625b5d9ce
--- /dev/null
+++
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.html
@@ -0,0 +1,48 @@
+<!--
+ ~ 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 fxLayout="column" class="mb-10">
+ <mat-accordion>
+ <mat-expansion-panel class="mat-expansion-panel mat-elevation-z0">
+ <mat-expansion-panel-header>
+ <mat-panel-title
+ ><mat-icon color="accent">list</mat-icon
+ ><b> Show input fields</b></mat-panel-title
+ >
+ </mat-expansion-panel-header>
+ @for (
+ inputStream of pipelineElement.inputStreams;
+ track pipelineElement.elementId
+ ) {
+ <div fxLayout="column">
+ <b>{{ inputStream.name }}</b>
+ @for (
+ property of inputStream.eventSchema.eventProperties
+ | sortByRuntimeName;
+ track property.runtimeName
+ ) {
+ <sp-input-schema-property
+ [property]="property"
+ class="property-row"
+ ></sp-input-schema-property>
+ }
+ </div>
+ }
+ </mat-expansion-panel>
+ </mat-accordion>
+</div>
diff --git
a/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.scss
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.scss
new file mode 100644
index 0000000000..2cf8883b62
--- /dev/null
+++
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.scss
@@ -0,0 +1,31 @@
+/*!
+ * 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.
+ *
+ */
+
+.mat-expansion-panel {
+ box-shadow: none;
+ border: 1px solid var(--color-bg-3);
+}
+
+.property-row {
+ padding: 10px;
+ background-color: var(--color-bg-1);
+}
+
+.property-row:nth-child(even) {
+ background-color: var(--color-bg-2);
+}
diff --git
a/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.ts
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.ts
new file mode 100644
index 0000000000..c80aec7528
--- /dev/null
+++
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.ts
@@ -0,0 +1,37 @@
+/*
+ * 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, OnInit } from '@angular/core';
+import {
+ DataProcessorInvocation,
+ DataSinkInvocation,
+} from '@streampipes/platform-services';
+
+@Component({
+ selector: 'sp-input-schema-panel',
+ templateUrl: './input-schema-panel.component.html',
+ styleUrls: ['./input-schema-panel.component.scss'],
+})
+export class InputSchemaPanelComponent implements OnInit {
+ @Input()
+ pipelineElement: DataProcessorInvocation | DataSinkInvocation;
+
+ ngOnInit(): void {
+ console.log(this.pipelineElement);
+ }
+}
diff --git
a/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.html
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.html
new file mode 100644
index 0000000000..1730ed2f2f
--- /dev/null
+++
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.html
@@ -0,0 +1,30 @@
+<!--
+ ~ 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 fxLayout="row" fxFlex="100">
+ <div fxFlex="30">
+ <b>{{ property.runtimeName }}</b>
+ </div>
+ <div fxFlex="55" fxLayout="column">
+ {{ property.label }}
+ <small> {{ property.description }} </small>
+ </div>
+ <div fxFlex="15">
+ {{ runtimeType }}
+ </div>
+</div>
diff --git
a/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.ts
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.ts
new file mode 100644
index 0000000000..4f25a53293
--- /dev/null
+++
b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.ts
@@ -0,0 +1,43 @@
+/*
+ * 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, OnInit } from '@angular/core';
+import { EventPropertyUnion } from '@streampipes/platform-services';
+import { PipelineElementSchemaService } from
'../../../../../core-ui/pipeline-element-runtime-info/pipeline-element-schema.service';
+
+@Component({
+ selector: 'sp-input-schema-property',
+ templateUrl: './input-schema-property.component.html',
+})
+export class InputSchemaPropertyComponent implements OnInit {
+ @Input()
+ property: EventPropertyUnion;
+
+ runtimeType: string;
+
+ constructor(
+ private pipelineElementSchemaService: PipelineElementSchemaService,
+ ) {}
+
+ ngOnInit() {
+ this.runtimeType =
+ this.pipelineElementSchemaService.getFriendlyRuntimeType(
+ this.property,
+ );
+ }
+}
diff --git a/ui/src/app/editor/editor.module.ts
b/ui/src/app/editor/editor.module.ts
index 85bb98932a..0995cda75a 100644
--- a/ui/src/app/editor/editor.module.ts
+++ b/ui/src/app/editor/editor.module.ts
@@ -81,6 +81,9 @@ import { PipelineAssemblyOptionsPipelineCacheComponent } from
'./components/pipe
import { PipelineAssemblyDrawingAreaPanZoomComponent } from
'./components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area-pan-zoom/pipeline-assembly-drawing-area-pan-zoom.component';
import { PipelineAssemblyDrawingAreaComponent } from
'./components/pipeline-assembly/pipeline-assembly-drawing-area/pipeline-assembly-drawing-area.component';
import { DroppedPipelineElementComponent } from
'./components/pipeline/dropped-pipeline-element/dropped-pipeline-element.component';
+import { InputSchemaPanelComponent } from
'./dialog/customize/input-schema-panel/input-schema-panel.component';
+import { InputSchemaPropertyComponent } from
'./dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component';
+import { SortByRuntimeNamePipe } from './pipes/sort-by-runtime-name.pipe';
@NgModule({
imports: [
@@ -128,6 +131,8 @@ import { DroppedPipelineElementComponent } from
'./components/pipeline/dropped-p
DroppedPipelineElementComponent,
EditorComponent,
EnabledPipelineElementFilter,
+ InputSchemaPanelComponent,
+ InputSchemaPropertyComponent,
MatchingErrorComponent,
MissingElementsForTutorialComponent,
OutputStrategyComponent,
@@ -152,9 +157,10 @@ import { DroppedPipelineElementComponent } from
'./components/pipeline/dropped-p
PropertySelectionComponent,
SavePipelineComponent,
SavePipelineSettingsComponent,
+ SortByRuntimeNamePipe,
SafeCss,
],
- providers: [SafeCss],
+ providers: [SafeCss, SortByRuntimeNamePipe],
exports: [
EditorComponent,
PipelineComponent,
diff --git a/ui/src/app/editor/pipes/sort-by-runtime-name.pipe.ts
b/ui/src/app/editor/pipes/sort-by-runtime-name.pipe.ts
new file mode 100644
index 0000000000..25cdb90529
--- /dev/null
+++ b/ui/src/app/editor/pipes/sort-by-runtime-name.pipe.ts
@@ -0,0 +1,32 @@
+/*
+ * 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 { Pipe, PipeTransform } from '@angular/core';
+import { EventPropertyUnion } from '@streampipes/platform-services';
+
+@Pipe({
+ name: 'sortByRuntimeName',
+})
+export class SortByRuntimeNamePipe implements PipeTransform {
+ transform(value: EventPropertyUnion[]): any[] {
+ if (!Array.isArray(value)) {
+ return value;
+ }
+ return value.sort((a, b) =>
a.runtimeName.localeCompare(b.runtimeName));
+ }
+}
