This is an automated email from the ASF dual-hosted git repository. zehnder pushed a commit to branch refactor-connect-adapter-catalog in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 7d1104b2c4cccd42ca1beacb1f939b24a2cfd68d Author: Philipp Zehnder <[email protected]> AuthorDate: Tue Dec 2 13:59:47 2025 +0100 refactor: Rename adapter-description components to adapter-catalog-item and streamline code --- .../adapter-catalog/adapter-catalog.component.html | 14 ++---- .../adapter-catalog/adapter-catalog.component.scss | 28 ------------ .../adapter-catalog/adapter-catalog.component.ts | 32 ++++++-------- ...nt.html => adapter-catalog-item.component.html} | 9 +++- ...nt.scss => adapter-catalog-item.component.scss} | 27 +----------- ...ponent.ts => adapter-catalog-item.component.ts} | 40 ++++++++--------- .../create-adapter/create-adapter.component.ts | 50 ++++++++++++++++------ ui/src/app/connect/connect.module.ts | 4 +- 8 files changed, 82 insertions(+), 122 deletions(-) diff --git a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html index fc5368064a..4f601345a8 100644 --- a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html +++ b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.html @@ -66,28 +66,20 @@ } @if (!adaptersLoading && !adapterLoadingError && currentFilter) { <div class="container-fluid marketplace-container"> - <div - fxLayout="row wrap" - fxLayoutAlign="start stretch" - class="adapter-description-container" - > + <div fxLayout="row wrap" fxLayoutAlign="start stretch"> @for ( adapterDescription of adapterDescriptions | adapterFilter: currentFilter; track adapterDescription ) { - <sp-adapter-description + <sp-adapter-catalog-item attr.id="{{ adapterDescription.name.replaceAll(' ', '_') }}" class="adapter-description" fxFlex="33" - (createEmitter)="selectAdapter($event)" - (click)=" - selectAdapter(adapterDescription.appId) - " [adapter]="adapterDescription" - ></sp-adapter-description> + ></sp-adapter-catalog-item> } </div> </div> diff --git a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.scss b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.scss index 6c69ecf698..21faaff3a1 100644 --- a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.scss +++ b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.scss @@ -16,42 +16,14 @@ * */ -.adapter-description-container { - width: 100%; -} - .adapter-description { padding: 10px; } -.data-marketplace-container { - padding-bottom: 10px; -} .marketplace-container { width: 100%; } -.page-container-connect { - min-height: calc(100vh - 70px); -} - -.pl-5 { - padding-left: 5px; -} - -.box { - width: 200px; - height: 300px; - position: relative; - border: 1px solid #bbb; - background: #eee; -} - -.icon-style { - margin: 15px 4px 0px 0px; - color: var(--color-primary); -} - .filter-bar-margin { margin-left: 10px; padding-left: 10px; diff --git a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts index 0096d20403..28ab9882bc 100644 --- a/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts +++ b/ui/src/app/connect/components/adapter-catalog/adapter-catalog.component.ts @@ -16,14 +16,12 @@ * */ -import { Component, OnInit } from '@angular/core'; -import { ShepherdService } from '../../../services/tour/shepherd.service'; +import { Component, inject, OnInit } from '@angular/core'; import { AdapterDescription, AdapterService, } from '@streampipes/platform-services'; import { SpBreadcrumbService } from '@streampipes/shared-ui'; -import { Router } from '@angular/router'; import { AdapterFilterSettingsModel } from '../../model/adapter-filter-settings.model'; import { SpConnectRoutes } from '../../connect.routes'; @@ -34,6 +32,9 @@ import { SpConnectRoutes } from '../../connect.routes'; standalone: false, }) export class AdapterCatalogComponent implements OnInit { + private dataMarketplaceService = inject(AdapterService); + private breadcrumbService = inject(SpBreadcrumbService); + adapterDescriptions: AdapterDescription[]; adaptersLoading = true; @@ -41,18 +42,8 @@ export class AdapterCatalogComponent implements OnInit { currentFilter: AdapterFilterSettingsModel; - constructor( - private dataMarketplaceService: AdapterService, - private shepherdService: ShepherdService, - private router: Router, - private breadcrumbService: SpBreadcrumbService, - ) {} - ngOnInit() { - this.breadcrumbService.updateBreadcrumb([ - SpConnectRoutes.BASE, - this.breadcrumbService.removeLink(SpConnectRoutes.CREATE), - ]); + this.updateBreadcrumb(); this.getAdapterDescriptions(); } @@ -75,13 +66,14 @@ export class AdapterCatalogComponent implements OnInit { }); } - selectAdapter(appId: string) { - this.router.navigate(['connect', 'create', appId]).then(() => { - this.shepherdService.trigger('new-adapter-selected'); - }); - } - applyFilter(filter: AdapterFilterSettingsModel) { this.currentFilter = { ...filter }; } + + private updateBreadcrumb() { + this.breadcrumbService.updateBreadcrumb([ + SpConnectRoutes.BASE, + this.breadcrumbService.removeLink(SpConnectRoutes.CREATE), + ]); + } } diff --git a/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.html b/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.html similarity index 93% rename from ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.html rename to ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.html index d867a28ec1..637c2712bf 100644 --- a/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.html +++ b/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.html @@ -16,7 +16,12 @@ ~ --> -<div class="adapter-description-box" fxFlex="100" fxLayout="column"> +<div + class="adapter-catalog-item" + fxFlex="100" + fxLayout="column" + (click)="selectAdapter(adapter.appId)" +> <div fxLayout="column"> <div class="type" @@ -47,7 +52,7 @@ <button fxFlex mat-flat-button - (click)="createEmitter.emit(adapter.appId)" + (click)="selectAdapter(adapter.appId)" [matTooltip]="'Create adapter' | translate" > <span>{{ 'Create' | translate }}</span> diff --git a/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.scss b/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.scss similarity index 83% rename from ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.scss rename to ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.scss index ed17e3110c..e6d95a6b7e 100644 --- a/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.scss +++ b/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.scss @@ -16,7 +16,7 @@ * */ -.adapter-description-box { +.adapter-catalog-item { height: 100%; border: 1px solid var(--color-bg-2); background: var(--color-bg-0); @@ -24,7 +24,7 @@ border-radius: 5px; } -.adapter-description-box:hover { +.adapter-catalog-item:hover { border-color: var(--color-bg-3); background: var(--color-bg-1); } @@ -34,29 +34,6 @@ margin-top: 10px; } -.edit { - margin-right: 5px; -} - -.delete { - cursor: pointer; -} - -.type p { - padding: 4px; - margin: 0; -} - -.iconImg { - max-height: 50px; - max-width: 80%; -} - -.real-time { - cursor: pointer; - color: #ffeb3b; -} - .adapter-icon { background: var(--color-bg-0); border-right: 1px solid var(--color-bg-2); diff --git a/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.ts b/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.ts similarity index 70% rename from ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.ts rename to ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.ts index 2022d76e07..5a7cfaf7b3 100644 --- a/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-description.component.ts +++ b/ui/src/app/connect/components/adapter-catalog/adapter-description/adapter-catalog-item.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, inject, Input, OnInit } from '@angular/core'; import { AdapterDescription, PipelineElementAssetService, @@ -24,38 +24,32 @@ import { import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; import { DialogService, PanelType } from '@streampipes/shared-ui'; import { SpAdapterDocumentationDialogComponent } from '../../../dialog/adapter-documentation/adapter-documentation-dialog.component'; +import { Router } from '@angular/router'; +import { ShepherdService } from '../../../../services/tour/shepherd.service'; @Component({ - selector: 'sp-adapter-description', - templateUrl: './adapter-description.component.html', - styleUrls: ['./adapter-description.component.scss'], + selector: 'sp-adapter-catalog-item', + templateUrl: './adapter-catalog-item.component.html', + styleUrls: ['./adapter-catalog-item.component.scss'], standalone: false, }) -export class AdapterDescriptionComponent implements OnInit { +export class AdapterCatalogItemComponent implements OnInit { + private pipelineElementAssetService = inject(PipelineElementAssetService); + private sanitizer = inject(DomSanitizer); + private dialogService = inject(DialogService); + private router = inject(Router); + private shepherdService = inject(ShepherdService); + @Input() adapter: AdapterDescription; - @Output() - createEmitter = new EventEmitter<string>(); - - isRunningAdapter = false; - adapterLabel: string; iconUrl: SafeUrl; - constructor( - private pipelineElementAssetService: PipelineElementAssetService, - private sanitizer: DomSanitizer, - private dialogService: DialogService, - ) {} - ngOnInit() { if (this.adapter.name == null) { this.adapter.name = ''; } - this.isRunningAdapter = - this.adapter.elementId !== undefined && - !(this.adapter as any).isTemplate; - this.adapterLabel = this.adapter.name.split(' ').join('_'); + this.iconUrl = this.sanitizer.bypassSecurityTrustUrl( this.makeAssetIconUrl(), ); @@ -68,6 +62,12 @@ export class AdapterDescriptionComponent implements OnInit { ); } + selectAdapter(appId: string) { + this.router.navigate(['connect', 'create', appId]).then(() => { + this.shepherdService.trigger('new-adapter-selected'); + }); + } + openDocumentation(event: MouseEvent): void { event.stopPropagation(); this.dialogService.open(SpAdapterDocumentationDialogComponent, { diff --git a/ui/src/app/connect/components/create-adapter/create-adapter.component.ts b/ui/src/app/connect/components/create-adapter/create-adapter.component.ts index 214ea4087b..2e3fe83d40 100644 --- a/ui/src/app/connect/components/create-adapter/create-adapter.component.ts +++ b/ui/src/app/connect/components/create-adapter/create-adapter.component.ts @@ -44,21 +44,43 @@ export class CreateAdapterComponent implements OnInit { ngOnInit(): void { this.adapterService.getAdapterDescriptions().subscribe(adapters => { - const adapter = adapters.find( - a => a.appId === this.route.snapshot.params.appId, - ); - this.adapterTypeName = adapter.name; - this.adapter = AdapterDescription.fromData(adapter); + const adapter = this.findAdapterWithAppIdFromRoute(adapters); - this.breadcrumbService.updateBreadcrumb( - this.breadcrumbService.makeRoute( - [SpConnectRoutes.BASE, SpConnectRoutes.CREATE], - this.adapterTypeName, - ), - ); - this.adapter.name = ''; - this.adapter.description = ''; - this.initialized = true; + this.updateAdapterTypeAndBreadcrumb(adapter); + + this.initializeAdapterInstance(adapter); }); } + + private findAdapterWithAppIdFromRoute( + adapters: AdapterDescription[], + ): AdapterDescription { + const appId = this.route.snapshot.params.appId; + return adapters.find(a => a.appId === appId); + } + + private initializeAdapterInstance(adapter: AdapterDescription) { + this.adapter = this.copyAdapter(adapter); + this.adapter.name = ''; + this.adapter.description = ''; + this.initialized = true; + } + + /** + * Create a copy of the adapter description. + * Input is the adapter description with the app id and output is the new instance. + */ + private copyAdapter(adapter: AdapterDescription): AdapterDescription { + return AdapterDescription.fromData(adapter); + } + + private updateAdapterTypeAndBreadcrumb(adapter: AdapterDescription) { + this.adapterTypeName = adapter.name; + this.breadcrumbService.updateBreadcrumb( + this.breadcrumbService.makeRoute( + [SpConnectRoutes.BASE, SpConnectRoutes.CREATE], + this.adapterTypeName, + ), + ); + } } diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts index a6578da091..2b25844896 100644 --- a/ui/src/app/connect/connect.module.ts +++ b/ui/src/app/connect/connect.module.ts @@ -29,7 +29,7 @@ import { EventSchemaComponent } from './components/adapter-configuration/schema- import { MatInputModule } from '@angular/material/input'; import { AdapterStartedDialog } from './dialog/adapter-started/adapter-started-dialog.component'; -import { AdapterDescriptionComponent } from './components/adapter-catalog/adapter-description/adapter-description.component'; +import { AdapterCatalogItemComponent } from './components/adapter-catalog/adapter-description/adapter-catalog-item.component'; import { AdapterCatalogComponent } from './components/adapter-catalog/adapter-catalog.component'; import { AdapterFilterPipe } from './filter/adapter-filter.pipe'; @@ -206,7 +206,7 @@ import { ConfigurationGroupComponent } from './components/adapter-configuration/ declarations: [ AdapterCodePanelComponent, AdapterConfigurationComponent, - AdapterDescriptionComponent, + AdapterCatalogItemComponent, AdapterDetailsCodeComponent, AdapterDetailsDataComponent, AdapterStartedDialog,
