This is an automated email from the ASF dual-hosted git repository.
riemer 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 f9fe105fb7 fix: asset filters and labels for assets (#3550)
f9fe105fb7 is described below
commit f9fe105fb7eca5846bde862b46230597760945cb
Author: Marcel Früholz <[email protected]>
AuthorDate: Tue Apr 22 08:28:28 2025 +0200
fix: asset filters and labels for assets (#3550)
* fix: fix asset filters and labels for assets
* use label._id instead of label.label
---
.../asset-details-labels.component.html | 4 +-
.../asset-details-labels.component.ts | 58 ++++++++++++++--------
.../dashboard-overview-table.component.ts | 14 +++---
.../data-explorer-overview-table.component.ts | 14 +++---
.../overview/data-explorer-overview.component.ts | 9 +++-
5 files changed, 62 insertions(+), 37 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..2c33ad5d90 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._id">{{
+ 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..970f586df3 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) {
@@ -116,7 +125,7 @@ export class AssetDetailsLabelsComponent implements OnInit,
OnChanges {
}
findLabel(value: string): SpLabel {
- return this.allLabels.find(l => l.label === value);
+ return this.allLabels.find(l => l._id === value);
}
remove(label: SpLabel): void {
@@ -126,25 +135,34 @@ export class AssetDetailsLabelsComponent implements
OnInit, OnChanges {
this.labels.splice(labelsIndex, 1);
this.asset.labelIds.splice(index, 1);
}
+ this.updateFilteredLabels();
}
selected(event: MatAutocompleteSelectedEvent): void {
- this.addLabelToSelection(event.option.viewValue);
+ this.addLabelToSelection(event.option.value);
this.labelInput.nativeElement.value = '';
this.labelCtrl.setValue(null);
}
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 f6dc780c73..d30057d1fa 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
@@ -137,13 +137,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);
}
}
