This is an automated email from the ASF dual-hosted git repository. zehnder pushed a commit to branch 4287-migrate-angular-ui-from-constructor-injection-to-inject in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 2b4c21f150aaf44df8bad2caed901895bb8c7322 Author: Philipp Zehnder <[email protected]> AuthorDate: Tue Mar 24 11:13:05 2026 +0100 migrate shared UI components to inject() --- .../asset-browser-filter-type.component.ts | 6 +++--- .../asset-browser-filter.component.ts | 5 +++-- .../asset-link-configuration.component.ts | 13 +++++++++++-- .../basic-nav-tabs/basic-nav-tabs.component.ts | 6 +++--- .../components/basic-view/basic-view.component.ts | 6 +++--- .../input-schema-property.component.ts | 8 +++----- .../pipeline-element-documentation.component.ts | 6 +++--- .../pipeline-element-runtime-info.component.ts | 11 +++++------ .../exception-details-dialog.component.ts | 9 ++++----- .../sp-exception-message.component.ts | 4 ++-- .../lib/components/sp-label/sp-label.component.ts | 5 +++-- .../sp-table/sp-paginator/sp-paginator.service.ts | 6 ++++-- .../time-selector/time-range-selector.component.ts | 5 +++-- .../custom-time-range-selection.component.ts | 21 +++++++++++++++------ .../time-selector-menu.component.ts | 5 +++-- 15 files changed, 68 insertions(+), 48 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.ts index 8e2a518828..e264958ad4 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter-type/asset-browser-filter-type.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { Isa95TypeDesc, Isa95TypeService, @@ -40,13 +40,13 @@ import { FormsModule } from '@angular/forms'; ], }) export class AssetBrowserFilterTypeComponent implements OnInit { + private typeService = inject(Isa95TypeService); + allAssetTypes: Isa95TypeDesc[] = []; @Input() activeFilters: AssetFilter; - constructor(private typeService: Isa95TypeService) {} - ngOnInit() { this.allAssetTypes = this.typeService .getTypeDescriptions() diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.ts index 7dfabc9a53..59658c0e29 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-browser/asset-browser-toolbar/asset-browser-filter/asset-browser-filter.component.ts @@ -23,6 +23,7 @@ import { OnDestroy, OnInit, Output, + inject, } from '@angular/core'; import { AssetBrowserData, AssetFilter } from '../../asset-browser.model'; import { Subscription } from 'rxjs'; @@ -58,6 +59,8 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class AssetBrowserFilterComponent implements OnInit, OnDestroy { + private assetBrowserService = inject(SpAssetBrowserService); + @Input() assetBrowserData: AssetBrowserData; @@ -68,8 +71,6 @@ export class AssetBrowserFilterComponent implements OnInit, OnDestroy { @Output() closeMenu: EventEmitter<void> = new EventEmitter(); - constructor(private assetBrowserService: SpAssetBrowserService) {} - ngOnInit() { this.filter$ = this.assetBrowserService.filter$.subscribe( activeFilters => { diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/asset-link-configuration/asset-link-configuration.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/asset-link-configuration/asset-link-configuration.component.ts index 502fb840f1..cde0c9e4d5 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/asset-link-configuration/asset-link-configuration.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/asset-link-configuration/asset-link-configuration.component.ts @@ -16,7 +16,14 @@ * */ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnInit, + Output, + inject, +} from '@angular/core'; import { NestedTreeControl } from '@angular/cdk/tree'; import { MatNestedTreeNode, @@ -56,6 +63,8 @@ import { LayoutAlignDirective } from '@ngbracket/ngx-layout/flex'; ], }) export class AssetLinkConfigurationComponent implements OnInit { + private assetService = inject(AssetManagementService); + @Input() linkageData: LinkageData[] = []; @Input() stepper: MatStepper; @Input() isEdit: boolean; @@ -79,7 +88,7 @@ export class AssetLinkConfigurationComponent implements OnInit { deselectedAssets: SpAssetTreeNode[] = []; originalAssets: SpAssetTreeNode[] = []; - constructor(private assetService: AssetManagementService) { + constructor() { this.treeControl = new NestedTreeControl<SpAssetTreeNode>( node => node.assets, ); diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts index d0134c4446..6f745e3310 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-nav-tabs/basic-nav-tabs.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { Router } from '@angular/router'; import { SpNavigationItem } from '../../models/sp-navigation.model'; import { @@ -52,6 +52,8 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class SpBasicNavTabsComponent { + private router = inject(Router); + @Input() spNavigationItems: SpNavigationItem[]; @@ -67,8 +69,6 @@ export class SpBasicNavTabsComponent { @Input() padding = '10px'; - constructor(private router: Router) {} - navigateTo(spNavigationItem: SpNavigationItem) { this.router.navigate(spNavigationItem.itemLink); } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts index fb15c9430f..abaa5ce612 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input } from '@angular/core'; +import { Component, Input, inject } from '@angular/core'; import { Router } from '@angular/router'; import { FlexDirective, @@ -47,6 +47,8 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class SpBasicViewComponent { + private router = inject(Router); + @Input() padding = false; @@ -62,8 +64,6 @@ export class SpBasicViewComponent { @Input() margin = '10px'; - constructor(private router: Router) {} - navigateBack() { this.router.navigate(this.backLinkTarget); } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-property/input-schema-property.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-property/input-schema-property.component.ts index 6b9ef026e3..41de4b1302 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-property/input-schema-property.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/input-schema-panel/input-schema-property/input-schema-property.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { EventPropertyUnion } from '@streampipes/platform-services'; import { PipelineElementSchemaService } from '../../../services/pipeline-element-schema.service'; import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout/flex'; @@ -27,15 +27,13 @@ import { FlexDirective, LayoutDirective } from '@ngbracket/ngx-layout/flex'; imports: [LayoutDirective, FlexDirective], }) export class InputSchemaPropertyComponent implements OnInit { + private pipelineElementSchemaService = inject(PipelineElementSchemaService); + @Input() property: EventPropertyUnion; runtimeType: string; - constructor( - private pipelineElementSchemaService: PipelineElementSchemaService, - ) {} - ngOnInit() { this.runtimeType = this.pipelineElementSchemaService.getFriendlyRuntimeType( diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-documentation/pipeline-element-documentation.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-documentation/pipeline-element-documentation.component.ts index 8f044f1bf2..613d49c9cd 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-documentation/pipeline-element-documentation.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-documentation/pipeline-element-documentation.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { PipelineElementService } from '@streampipes/platform-services'; import { Lexer, Parser } from 'marked'; import { MarkdownComponent } from 'ngx-markdown'; @@ -31,6 +31,8 @@ import { TranslatePipe } from '@ngx-translate/core'; imports: [MarkdownComponent, NgClass, ClassDirective, TranslatePipe], }) export class PipelineElementDocumentationComponent implements OnInit { + private pipelineElementService = inject(PipelineElementService); + @Input() appId: string; @@ -40,8 +42,6 @@ export class PipelineElementDocumentationComponent implements OnInit { documentationMarkdown: any; error: any; - constructor(private pipelineElementService: PipelineElementService) {} - ngOnInit(): void { this.pipelineElementService.getDocumentation(this.appId).subscribe({ next: msg => { diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts index 8acab3c382..99ad69f956 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/pipeline-element-runtime-info/pipeline-element-runtime-info.component.ts @@ -22,6 +22,7 @@ import { Input, OnDestroy, OnInit, + inject, } from '@angular/core'; import { LivePreviewService, @@ -41,6 +42,10 @@ import { LivePreviewErrorComponent } from './live-preview-error/live-preview-err imports: [LivePreviewTableComponent, LivePreviewErrorComponent], }) export class PipelineElementRuntimeInfoComponent implements OnInit, OnDestroy { + private restService = inject(PipelineElementRuntimeInfoService); + private livePreviewService = inject(LivePreviewService); + private pipelineELementSchemaService = inject(PipelineElementSchemaService); + @Input() streamDescription: SpDataStream; @@ -56,12 +61,6 @@ export class PipelineElementRuntimeInfoComponent implements OnInit, OnDestroy { runtimeDataError = false; runtimeSub: Subscription; - constructor( - private restService: PipelineElementRuntimeInfoService, - private livePreviewService: LivePreviewService, - private pipelineELementSchemaService: PipelineElementSchemaService, - ) {} - ngOnInit(): void { this.runtimeInfo = this.makeRuntimeInfo(); this.getLatestRuntimeInfo(); diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts index 4bea5c5714..a9ac9ea239 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/exception-details-dialog/exception-details-dialog.component.ts @@ -16,7 +16,7 @@ * */ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, inject } from '@angular/core'; import { SpLogMessage } from '@streampipes/platform-services'; import { DialogRef } from '../../../dialog/base-dialog/dialog-ref'; import { SpExceptionDetailsComponent } from '../exception-details/exception-details.component'; @@ -41,6 +41,9 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class SpExceptionDetailsDialogComponent implements OnInit { + private dialogRef = + inject<DialogRef<SpExceptionDetailsDialogComponent>>(DialogRef); + @Input() message: SpLogMessage; @@ -53,10 +56,6 @@ export class SpExceptionDetailsDialogComponent implements OnInit { @Input() additionalButtonText = 'Button'; - constructor( - private dialogRef: DialogRef<SpExceptionDetailsDialogComponent>, - ) {} - close(additionalButtonClicked = false) { this.dialogRef.close(additionalButtonClicked); } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts index 314236f153..5d29ea4714 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-exception-message/sp-exception-message.component.ts @@ -38,6 +38,8 @@ import { DatePipe } from '@angular/common'; ], }) export class SpExceptionMessageComponent { + private dialogService = inject(DialogService); + translateService = inject(TranslateService); @Input() @@ -52,8 +54,6 @@ export class SpExceptionMessageComponent { @Input() messageTimestamp: number; - constructor(private dialogService: DialogService) {} - openDetailsDialog() { this.dialogService.open(SpExceptionDetailsDialogComponent, { panelType: PanelType.STANDARD_PANEL, diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts index ee7b2ffdb4..86c0c16c7e 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-label/sp-label.component.ts @@ -22,6 +22,7 @@ import { Input, OnChanges, SimpleChanges, + inject, } from '@angular/core'; import { SpColorizationService } from '../../services/colorization.service'; @@ -31,6 +32,8 @@ import { SpColorizationService } from '../../services/colorization.service'; styleUrls: ['./sp-label.component.scss'], }) export class SpLabelComponent implements OnChanges { + private colorizationService = inject(SpColorizationService); + @Input() labelText: string | number; @@ -86,8 +89,6 @@ export class SpLabelComponent implements OnChanges { neutral: 'var(--color-neutral)', }; - constructor(private colorizationService: SpColorizationService) {} - ngOnChanges(changes: SimpleChanges) { this.hostVariant = this.variant; this.hostSize = this.size; diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-paginator/sp-paginator.service.ts b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-paginator/sp-paginator.service.ts index 6cfcb9a00c..db12a37eb4 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-paginator/sp-paginator.service.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-paginator/sp-paginator.service.ts @@ -15,13 +15,15 @@ * limitations under the License. * */ -import { Injectable } from '@angular/core'; +import { Injectable, inject } from '@angular/core'; import { MatPaginatorIntl } from '@angular/material/paginator'; import { TranslateService } from '@ngx-translate/core'; @Injectable({ providedIn: 'root' }) export class PaginatorService extends MatPaginatorIntl { - constructor(private translateService: TranslateService) { + private translateService = inject(TranslateService); + + constructor() { super(); this.itemsPerPageLabel = this.translateService.instant('Items per page'); diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts index b7c4f8679b..080b9e623b 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-range-selector.component.ts @@ -27,6 +27,7 @@ import { SimpleChanges, ViewChild, ViewEncapsulation, + inject, } from '@angular/core'; import { DashboardLiveSettings, @@ -75,6 +76,8 @@ import { TranslatePipe } from '@ngx-translate/core'; export class TimeRangeSelectorComponent implements OnInit, OnChanges, AfterViewInit { + private timeSelectionService = inject(TimeSelectionService); + @ViewChild('menuTrigger') menu: MatMenuTrigger; @ViewChild('timeSelectorMenu') timeSelectorMenu: TimeRangeSelectorMenuComponent; @@ -123,8 +126,6 @@ export class TimeRangeSelectorComponent day: 'numeric', }; - constructor(private timeSelectionService: TimeSelectionService) {} - ngOnInit() { this.quickSelections ??= this.timeSelectionService.defaultQuickTimeSelections; diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts index 555a7554a1..d35976062e 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/custom-time-range-selection/custom-time-range-selection.component.ts @@ -16,7 +16,14 @@ * */ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnInit, + Output, + inject, +} from '@angular/core'; import { TimeSelectionConstants, TimeSettings, @@ -59,6 +66,13 @@ import { TranslatePipe } from '@ngx-translate/core'; ], }) export class CustomTimeRangeSelectionComponent implements OnInit { + private readonly selectionModel = inject<MatRangeDateSelectionModel<Date>>( + MatRangeDateSelectionModel, + ); + private readonly selectionStrategy = inject< + DefaultMatCalendarRangeStrategy<Date> + >(DefaultMatCalendarRangeStrategy); + @Input() timeSettings: TimeSettings; @Input() labels: TimeSelectorLabel; @@ -81,11 +95,6 @@ export class CustomTimeRangeSelectionComponent implements OnInit { maxDateRangeError = false; - constructor( - private readonly selectionModel: MatRangeDateSelectionModel<Date>, - private readonly selectionStrategy: DefaultMatCalendarRangeStrategy<Date>, - ) {} - ngOnInit(): void { this.initializeDateRange(); this.triggerDisplayUpdate(); diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts index 21c11b53b9..2dbc7b06e2 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts +++ b/ui/projects/streampipes/shared-ui/src/lib/components/time-selector/time-selector-menu/time-selector-menu.component.ts @@ -23,6 +23,7 @@ import { OnInit, Output, ViewChild, + inject, } from '@angular/core'; import { ExtendedTimeSettings, @@ -56,6 +57,8 @@ import { MatDivider } from '@angular/material/divider'; ], }) export class TimeRangeSelectorMenuComponent implements OnInit { + private timeSelectionService = inject(TimeSelectionService); + @Input() timeSettings: TimeSettings; @@ -78,8 +81,6 @@ export class TimeRangeSelectorMenuComponent implements OnInit { @ViewChild('timeRangeSelection') timeRangeSelection: CustomTimeRangeSelectionComponent; - constructor(private timeSelectionService: TimeSelectionService) {} - ngOnInit(): void {} applyQuickSelection(quickSelection: QuickTimeSelection): void {
