This is an automated email from the ASF dual-hosted git repository. mfholz pushed a commit to branch asset-filters-fix in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 97d70d3fb1d4ab007c5214b8a6f5879945aed5a4 Author: Marcelfrueh <[email protected]> AuthorDate: Mon Mar 31 17:49:32 2025 +0200 fix: fix asset filters and labels for assets --- .../asset-details-labels.component.html | 4 +- .../asset-details-labels.component.ts | 54 ++++++++++++++-------- .../dashboard-overview-table.component.ts | 14 +++--- .../data-explorer-overview-table.component.ts | 14 +++--- .../overview/data-explorer-overview.component.ts | 9 +++- 5 files changed, 60 insertions(+), 35 deletions(-) diff --git a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html index b1a955ee65..787b5e21a5 100644 --- a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html +++ b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.html @@ -63,7 +63,9 @@ (optionSelected)="selected($event)" > @for (label of filteredLabels | async; track label) { - <mat-option [value]="label">{{ label }}</mat-option> + <mat-option [value]="label.label">{{ + label.label + }}</mat-option> } </mat-autocomplete> </mat-form-field> diff --git a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts index db75fcfbcf..e7f79484a6 100644 --- a/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts +++ b/ui/src/app/assets/components/asset-details/edit-asset/asset-details-panel/asset-details-basics/asset-details-labels/asset-details-labels.component.ts @@ -33,9 +33,9 @@ import { import { MatChipInputEvent } from '@angular/material/chips'; import { FormControl } from '@angular/forms'; import { COMMA, ENTER } from '@angular/cdk/keycodes'; -import { Observable } from 'rxjs'; +import { Observable, of } from 'rxjs'; import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; -import { map, startWith } from 'rxjs/operators'; +import { filter, map, startWith } from 'rxjs/operators'; import { SpColorizationService } from '@streampipes/shared-ui'; @Component({ @@ -54,7 +54,7 @@ export class AssetDetailsLabelsComponent implements OnInit, OnChanges { separatorKeysCodes: number[] = [ENTER, COMMA]; labelCtrl = new FormControl(''); - filteredLabels: Observable<string[]>; + filteredLabels: Observable<SpLabel[]>; allLabels: SpLabel[] = []; labelsAvailable = false; @@ -67,7 +67,9 @@ export class AssetDetailsLabelsComponent implements OnInit, OnChanges { ngOnInit(): void { this.labelsService.getAllLabels().subscribe(labels => { - this.allLabels = labels; + this.allLabels = labels.sort((a, b) => + a.label.localeCompare(b.label), + ); labels.forEach( label => (this.labelTextColors[label._id] = @@ -76,19 +78,17 @@ export class AssetDetailsLabelsComponent implements OnInit, OnChanges { )), ); this.asset.labelIds = - this.asset.labelIds?.filter( - id => this.allLabels.find(l => l._id === id) !== undefined, + this.asset.labelIds?.filter(id => + this.allLabels.find(l => l._id === id), ) || []; this.refreshCurrentLabels(); this.labelsAvailable = true; + this.updateFilteredLabels(); }); + this.filteredLabels = this.labelCtrl.valueChanges.pipe( - startWith(null), - map((labelName: string | null) => - labelName - ? this._filter(labelName) - : this.allLabels.map(label => label.label).slice(), - ), + startWith(''), + map(value => this._filter(value as string)), ); } @@ -106,6 +106,15 @@ export class AssetDetailsLabelsComponent implements OnInit, OnChanges { } } + getAvailableLabels(): SpLabel[] { + return this.allLabels.filter( + label => + !this.labels.some( + selectedLabel => selectedLabel._id === label._id, + ), + ); + } + add(event: MatChipInputEvent): void { const value = (event.value || '').trim(); if (value) { @@ -126,6 +135,7 @@ export class AssetDetailsLabelsComponent implements OnInit, OnChanges { this.labels.splice(labelsIndex, 1); this.asset.labelIds.splice(index, 1); } + this.updateFilteredLabels(); } selected(event: MatAutocompleteSelectedEvent): void { @@ -136,15 +146,23 @@ export class AssetDetailsLabelsComponent implements OnInit, OnChanges { addLabelToSelection(textLabel: string): void { const label = this.findLabel(textLabel); - this.labels.push(label); - this.asset.labelIds.push(label._id); + if (label && !this.labels.some(l => l._id === label._id)) { + this.labels.push(label); + this.asset.labelIds.push(label._id); + } } - private _filter(value: string): string[] { + private _filter(value: string): SpLabel[] { const filterValue = value.toLowerCase(); + return this.getAvailableLabels().filter(label => + label.label.toLowerCase().includes(filterValue), + ); + } - return this.allLabels - .filter(label => label.label.toLowerCase().includes(filterValue)) - .map(label => label.label); + private updateFilteredLabels(): void { + this.filteredLabels = this.labelCtrl.valueChanges.pipe( + startWith(''), + map(value => this._filter(typeof value === 'string' ? value : '')), + ); } } diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts index cb353982cf..f508b63502 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts +++ b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.ts @@ -129,13 +129,13 @@ export class DashboardOverviewTableComponent extends SpDataExplorerOverviewDirec } applyDashboardFilters(elementIds: Set<string> = new Set<string>()): void { - this.filteredDashboards = this.dashboards.filter(a => { - if (elementIds.size === 0) { - return true; - } else { - return elementIds.has(a.elementId); - } - }); + if (elementIds.size == 0) { + this.filteredDashboards = this.dashboards; + } else { + this.filteredDashboards = this.dashboards.filter(a => + elementIds.has(a.elementId), + ); + } this.dataSource.data = this.filteredDashboards; } } diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.ts b/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.ts index 4180bb82cb..62b6cad499 100644 --- a/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.ts +++ b/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.ts @@ -125,13 +125,13 @@ export class SpDataExplorerDataViewOverviewComponent extends SpDataExplorerOverv } applyChartFilters(elementIds: Set<string> = new Set<string>()): void { - this.filteredCharts = this.charts.filter(a => { - if (elementIds.size === 0) { - return true; - } else { - return elementIds.has(a.elementId); - } - }); + if (elementIds.size == 0) { + this.filteredCharts = this.charts; + } else { + this.filteredCharts = this.charts.filter(a => + elementIds.has(a.elementId), + ); + } this.dataSource.data = this.filteredCharts; } } diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.ts b/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.ts index fa8e3976bc..1e661d8f33 100644 --- a/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.ts +++ b/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.ts @@ -16,7 +16,7 @@ * */ -import { Component } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { CurrentUserService, DialogService, @@ -26,6 +26,8 @@ import { AuthService } from '../../../services/auth.service'; import { SpDataExplorerRoutes } from '../../data-explorer.routes'; import { SpDataExplorerOverviewDirective } from './data-explorer-overview.directive'; import { DataExplorerRoutingService } from '../../../data-explorer-shared/services/data-explorer-routing.service'; +import { DashboardOverviewTableComponent } from '../../../dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component'; +import { SpDataExplorerDataViewOverviewComponent } from './data-explorer-overview-table/data-explorer-overview-table.component'; @Component({ selector: 'sp-data-explorer-overview', @@ -35,6 +37,9 @@ import { DataExplorerRoutingService } from '../../../data-explorer-shared/servic export class DataExplorerOverviewComponent extends SpDataExplorerOverviewDirective { resourceCount = 0; + @ViewChild(SpDataExplorerDataViewOverviewComponent) + chartsOverview: SpDataExplorerDataViewOverviewComponent; + constructor( public dialogService: DialogService, private breadcrumbService: SpBreadcrumbService, @@ -56,6 +61,6 @@ export class DataExplorerOverviewComponent extends SpDataExplorerOverviewDirecti } applyChartFilters(elementIds: Set<string> = new Set<string>()): void { - //this.da.applyDashboardFilters(elementIds); + this.chartsOverview.applyChartFilters(elementIds); } }
