+ ++diff --git a/ui/src/app/core-ui/topics/topics.component.scss b/ui/src/app/core-ui/topics/topics.component.scss new file mode 100644 index 0000000000..c077f68f35 --- /dev/null +++ b/ui/src/app/core-ui/topics/topics.component.scss @@ -0,0 +1,29 @@ +/* + * 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'; + +.element-id { + border-radius: 5px; + margin-right: 10px; + margin-top: 5px; + margin-bottom: 5px; + font-size: small; + display: inline-block; + padding: 5px; +} diff --git a/ui/src/app/core-ui/topics/topics.component.ts b/ui/src/app/core-ui/topics/topics.component.ts new file mode 100644 index 0000000000..2ce28d6dc7 --- /dev/null +++ b/ui/src/app/core-ui/topics/topics.component.ts @@ -0,0 +1,77 @@ +/* + * 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, + SpDataStream, +} from '@streampipes/platform-services'; +import { DialogRef } from '@streampipes/shared-ui'; +import { PipelineElementUnion } from '../../editor/model/editor.model'; + +@Component({ + selector: 'sp-pipeline-element-topics', + templateUrl: './topics.component.html', + styleUrls: ['./topics.component.scss'], +}) +export class TopicsComponent implements OnInit { + selectedTabIndex = 0; + + availableTabs = ['Topics', 'Code']; + tabs: string[] = []; + + @Input() + pipelineElement: PipelineElementUnion; + isDataStream: boolean; + + constructor(private dialogRef: DialogRef++ +++ +++{{ pipelineElement?.name }}
+ {{ pipelineElement?.description }} ++ ID + {{ + isDataStream + ? pipelineElement?.elementId + : pipelineElement?.appId + }} +++ + ++ +++ + ++
++ ++ Output Topics + ++ ++ {{ + element?.topicDefinition?.actualTopicName + }} + +++ + + + ++
+ ++ ++ Input Topics + ++ ++ {{ + element?.eventGrounding + ?.transportProtocols?.[0] + ?.topicDefinition?.actualTopicName + }} + +++ + +
++ ++ Output Topics + ++ ++ {{ + element?.topicDefinition?.actualTopicName + }} + +++ + + ++
++ ++ Input Topics + ++ ++ {{ + element?.eventGrounding + ?.transportProtocols?.[0] + ?.topicDefinition?.actualTopicName + }} + +++ + + + + ++) {} + + ngOnInit() { + if ( + this.pipelineElement instanceof SpDataStream || + this.pipelineElement instanceof DataProcessorInvocation || + this.pipelineElement instanceof DataSinkInvocation + ) { + this.tabs = this.availableTabs; + } else { + this.tabs = [this.availableTabs[1]]; + this.selectedTabIndex = 1; + } + } + + isSpDataStream(): boolean { + return this.pipelineElement instanceof SpDataStream; + } + + isDataProcessorInvocation(): boolean { + return this.pipelineElement instanceof DataProcessorInvocation; + } + + isDataSinkInvocation(): boolean { + return this.pipelineElement instanceof DataSinkInvocation; + } + + close() { + setTimeout(() => { + this.dialogRef.close(); + }); + } + + protected readonly SpDataStream = SpDataStream; +} diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.html b/ui/src/app/editor/components/pipeline/pipeline.component.html index 20b984a570..8b77b5b017 100644 --- a/ui/src/app/editor/components/pipeline/pipeline.component.html +++ b/ui/src/app/editor/components/pipeline/pipeline.component.html @@ -26,6 +26,7 @@ *ngFor=" let pipelineElementConfig of rawPipelineModel | enabledPipelineElement " + style="position: relative" > +