From bf2266c2e06647e1b2f9e95c43857788311edadb Mon Sep 17 00:00:00 2001 From: Dominik Riemer Date: Wed, 4 Sep 2024 14:41:51 +0200 Subject: [PATCH] feat(#3212): Show input fields in customization dialog (#3213) * feat(#3212): Show input fields in customization dialog * Cleanup * Cleanup --- ...pipeline-element-runtime-info.component.ts | 45 ++++---------- .../pipeline-element-schema.service.ts | 61 +++++++++++++++++++ .../custom-output-strategy.component.html | 1 + .../dialog/customize/customize.component.html | 4 ++ .../input-schema-panel.component.html | 48 +++++++++++++++ .../input-schema-panel.component.scss | 31 ++++++++++ .../input-schema-panel.component.ts | 33 ++++++++++ .../input-schema-property.component.html | 30 +++++++++ .../input-schema-property.component.ts | 43 +++++++++++++ ui/src/app/editor/editor.module.ts | 8 ++- .../editor/pipes/sort-by-runtime-name.pipe.ts | 32 ++++++++++ 11 files changed, 303 insertions(+), 33 deletions(-) create mode 100644 ui/src/app/core-ui/pipeline-element-runtime-info/pipeline-element-schema.service.ts create mode 100644 ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.html create mode 100644 ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.scss create mode 100644 ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.ts create mode 100644 ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.html create mode 100644 ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-property/input-schema-property.component.ts create mode 100644 ui/src/app/editor/pipes/sort-by-runtime-name.pipe.ts 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/components/output-strategy/custom-output/custom-output-strategy.component.html b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html index c2321fe8e6..0e1fe9ca24 100644 --- a/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html +++ b/ui/src/app/editor/components/output-strategy/custom-output/custom-output-strategy.component.html @@ -53,6 +53,7 @@
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" > + +
+ +
+ + + + list Show input fields + + @for ( + inputStream of pipelineElement.inputStreams; + track pipelineElement.elementId + ) { +
+ {{ inputStream.name }} + @for ( + property of inputStream.eventSchema.eventProperties + | sortByRuntimeName; + track property.runtimeName + ) { + + } +
+ } + + +
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..4ae5cf9e15 --- /dev/null +++ b/ui/src/app/editor/dialog/customize/input-schema-panel/input-schema-panel.component.ts @@ -0,0 +1,33 @@ +/* + * 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 { + 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 { + @Input() + pipelineElement: DataProcessorInvocation | DataSinkInvocation; +} 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 @@ + + +
+
+ {{ property.runtimeName }} +
+
+ {{ property.label }} + {{ property.description }} +
+
+ {{ runtimeType }} +
+
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)); + } +}