This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new e7f147a2d3 refactor: Rename adapter-description components to
adapter-catalog-item and streamline code (#4008)
e7f147a2d3 is described below
commit e7f147a2d3ac6c5b234ed178221e9be7f061602c
Author: Philipp Zehnder <[email protected]>
AuthorDate: Tue Dec 2 15:09:35 2025 +0100
refactor: Rename adapter-description components to adapter-catalog-item and
streamline code (#4008)
---
.../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 ++++++++---------
.../adapter-configuration.component.ts | 2 +-
.../event-schema/event-schema.component.ts | 5 ++-
.../create-adapter/create-adapter.component.ts | 50 ++++++++++++++++------
.../edit-adapter/edit-adapter.component.html | 2 +-
.../edit-adapter/edit-adapter.component.ts | 30 ++++++-------
ui/src/app/connect/connect.module.ts | 4 +-
ui/src/app/connect/connect.routes.ts | 11 +++--
13 files changed, 110 insertions(+), 144 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/adapter-configuration/adapter-configuration.component.ts
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
index eb3cfae5d9..c204452b80 100644
---
a/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/adapter-configuration.component.ts
@@ -40,7 +40,7 @@ export class AdapterConfigurationComponent implements OnInit {
*/
@Input() displayName = '';
@Input() adapter: AdapterDescription;
- @Input() isEditMode;
+ @Input() isEditMode: boolean;
myStepper: MatStepper;
parentForm: UntypedFormGroup;
diff --git
a/ui/src/app/connect/components/adapter-configuration/schema-editor/event-schema/event-schema.component.ts
b/ui/src/app/connect/components/adapter-configuration/schema-editor/event-schema/event-schema.component.ts
index fdcfb41b82..b7600ba737 100644
---
a/ui/src/app/connect/components/adapter-configuration/schema-editor/event-schema/event-schema.component.ts
+++
b/ui/src/app/connect/components/adapter-configuration/schema-editor/event-schema/event-schema.component.ts
@@ -64,14 +64,15 @@ export class EventSchemaComponent implements OnChanges,
OnDestroy {
@Input()
adapterDescription: AdapterDescription;
+ @Input()
+ isEditMode: boolean;
+
isEditable = true;
originalSchema: EventSchema;
targetSchema: EventSchema = new EventSchema();
timestampPresent = false;
- @Input()
- isEditMode;
refreshedEventSchema = false;
@Output()
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/components/edit-adapter/edit-adapter.component.html
b/ui/src/app/connect/components/edit-adapter/edit-adapter.component.html
index 10a0e01a37..8b5dff7850 100644
--- a/ui/src/app/connect/components/edit-adapter/edit-adapter.component.html
+++ b/ui/src/app/connect/components/edit-adapter/edit-adapter.component.html
@@ -16,7 +16,7 @@
~
-->
-@if (initialized) {
+@if (adapter) {
<sp-adapter-configuration
[isEditMode]="true"
[displayName]="adapterName"
diff --git
a/ui/src/app/connect/components/edit-adapter/edit-adapter.component.ts
b/ui/src/app/connect/components/edit-adapter/edit-adapter.component.ts
index edc4196fca..9448ca0aaa 100644
--- a/ui/src/app/connect/components/edit-adapter/edit-adapter.component.ts
+++ b/ui/src/app/connect/components/edit-adapter/edit-adapter.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {
@@ -33,30 +33,30 @@ import { SpConnectRoutes } from '../../connect.routes';
standalone: false,
})
export class EditAdapterComponent implements OnInit {
- initialized = false;
+ private adapterService = inject(AdapterService);
+ private breadcrumbService = inject(SpBreadcrumbService);
+ private route = inject(ActivatedRoute);
+
adapterName = '';
adapter: AdapterDescription = undefined;
- constructor(
- private adapterService: AdapterService,
- private breadcrumbService: SpBreadcrumbService,
- private route: ActivatedRoute,
- ) {}
-
ngOnInit(): void {
this.adapterService
.getAdapter(this.route.snapshot.params.elementId)
.subscribe(adapter => {
this.adapter = adapter;
this.adapterName = adapter.name;
- this.initialized = true;
- this.breadcrumbService.updateBreadcrumb(
- this.breadcrumbService.makeRoute(
- [SpConnectRoutes.BASE, SpConnectRoutes.EDIT],
- this.adapterName,
- ),
- );
+ this.updateBreadcrumb();
});
}
+
+ private updateBreadcrumb(): void {
+ this.breadcrumbService.updateBreadcrumb(
+ this.breadcrumbService.makeRoute(
+ [SpConnectRoutes.BASE, SpConnectRoutes.EDIT],
+ this.adapterName,
+ ),
+ );
+ }
}
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,
diff --git a/ui/src/app/connect/connect.routes.ts
b/ui/src/app/connect/connect.routes.ts
index 83c3f4d7f5..d99a0becda 100644
--- a/ui/src/app/connect/connect.routes.ts
+++ b/ui/src/app/connect/connect.routes.ts
@@ -19,13 +19,18 @@
import { SpBreadcrumbItem } from '@streampipes/shared-ui';
export class SpConnectRoutes {
- static BASE: SpBreadcrumbItem = { label: 'Connect', link: ['connect'] };
+ static BASE: SpBreadcrumbItem = {
+ label: 'Connect',
+ link: ['connect'],
+ };
+
static CREATE: SpBreadcrumbItem = {
label: 'New Adapter',
- link: ['connect', 'create'],
+ link: ['connect', 'catalog'],
};
+
static EDIT: SpBreadcrumbItem = {
label: 'Edit Adapter',
- link: ['connect', 'edit'],
+ link: ['connect'],
};
}
