feat: refactored Asset Link Table

ui/cypress/support/utils/asset/AssetBtns.ts

@@ -84,7 +84,7 @@ export class AssetBtns {
     }
 
     public static adapterCheckbox(adapterName: string) {
-        return cy.dataCy('select-adapters-checkbox-' + adapterName, {
+        return cy.dataCy('select-adapter-checkbox-' + adapterName, {
             timeout: 10000,
         });
     }

ui/src/app/assets/dialog/base-asset-links.directive.ts

@@ -18,23 +18,24 @@
 
 import { Directive, inject } from '@angular/core';
 import {
-    AdapterDescription,
     AdapterService,
     ChartService,
-    Dashboard,
     DashboardService,
-    DataExplorerWidgetModel,
-    DataLakeMeasure,
     DatalakeRestService,
     FileMetadata,
     FilesService,
     GenericStorageService,
-    Pipeline,
     PipelineElementService,
     PipelineService,
     SpDataStream,
 } from '@streampipes/platform-services';
 import { zip } from 'rxjs';
+import { map } from 'rxjs/operators';
+import {
+    AssetLinkChartResource,
+    AssetLinkMeasurementResource,
+    AssetLinkNamedResource,
+} from './base-asset-links.model';
 
 @Directive()
 export abstract class BaseAssetLinksDirective {
@@ -48,12 +49,12 @@ export abstract class BaseAssetLinksDirective {
     protected filesService = inject(FilesService);
 
     // Resources
-    pipelines: Pipeline[];
-    charts: DataExplorerWidgetModel[];
-    dashboards: Dashboard[];
-    dataLakeMeasures: DataLakeMeasure[];
+    pipelines: AssetLinkNamedResource[];
+    charts: AssetLinkChartResource[];
+    dashboards: AssetLinkNamedResource[];
+    dataLakeMeasures: AssetLinkMeasurementResource[];
     dataSources: SpDataStream[];
-    adapters: AdapterDescription[];
+    adapters: AssetLinkNamedResource[];
     files: FileMetadata[];
 
     allResources: any[] = [];
@@ -64,13 +65,31 @@ export abstract class BaseAssetLinksDirective {
 
     getAllResources() {
         zip(
-            this.pipelineService.getPipelines(),
-            this.chartService.getAllCharts(),
-            this.dashboardService.getDashboards(),
+            this.pipelineService
+                .getPipelineSummary()
+                .pipe(map(summary => summary.resources)),
+            this.chartService.getChartSummary().pipe(
+                map(summary =>
+                    summary.resources.map(chart => ({
+                        elementId: chart.elementId,
+                        name: chart.name,
+                        baseAppearanceConfig: {
+                            widgetTitle: chart.name,
+                        },
+                    })),
+                ),
+            ),
+            this.dashboardService
+                .getDashboardSummary()
+                .pipe(map(summary => summary.resources)),
             this.pipelineElementService.getDataStreams(),
-            this.dataLakeService.getAllMeasurementSeries(),
+            this.dataLakeService
+                .getMeasurementSummary()
+                .pipe(map(summary => summary.resources)),
             this.filesService.getFileMetadata(),
-            this.adapterService.getAdapters(),
+            this.adapterService
+                .getAdapterSummary()
+                .pipe(map(summary => summary.resources)),
         ).subscribe(
             ([
                 pipelines,

ui/src/app/assets/dialog/base-asset-links.model.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+export interface AssetLinkNamedResource {
+    elementId: string;
+    name: string;
+}
+
+export interface AssetLinkChartResource extends AssetLinkNamedResource {
+    baseAppearanceConfig: {
+        widgetTitle: string;
+    };
+}
+
+export interface AssetLinkMeasurementResource {
+    elementId: string;
+    measureName: string;
+}

ui/src/app/assets/dialog/manage-asset-links/asset-link-table/asset-link-table.component.html

@@ -0,0 +1,225 @@
+<!--
+~ Licensed to the Apache Software Foundation (ASF) under one or more
+~ contributor license agreements.  See the NOTICE file distributed with
+~ this work for additional information regarding copyright ownership.
+~ The ASF licenses this file to You under the Apache License, Version 2.0
+~ (the "License"); you may not use this file except in compliance with
+~ the License.  You may obtain a copy of the License at
+~
+~    http://www.apache.org/licenses/LICENSE-2.0
+~
+~ Unless required by applicable law or agreed to in writing, software
+~ distributed under the License is distributed on an "AS IS" BASIS,
+~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+~ See the License for the specific language governing permissions and
+~ limitations under the License.
+~
+-->
+
+<div fxLayout="column" fxLayoutGap="8px">
+    <div
+        fxLayout="row wrap"
+        fxLayoutAlign="end center"
+        fxLayoutGap="8px"
+        class="asset-link-table-toolbar"
+    >
+        <button
+            mat-flat-button
+            class="mat-basic"
+            data-cy="asset-link-table-select-all"
+            [disabled]="!hasUnselectedFilteredResources()"
+            (click)="selectAll()"
+        >
+            <mat-icon>queue</mat-icon>
+            {{ 'Select all' | translate }}
+        </button>
+        <button
+            mat-flat-button
+            class="mat-basic"
+            data-cy="asset-link-table-deselect-all"
+            [disabled]="!hasSelectedFilteredResources()"
+            (click)="deselectAll()"
+        >
+            <mat-icon>filter_none</mat-icon>
+            {{ 'Deselect all' | translate }}
+        </button>
+
+        <mat-form-field class="form-field-small asset-link-table-search">
+            <mat-icon matPrefix>search</mat-icon>
+            <input
+                matInput
+                [placeholder]="'Search' | translate"
+                [value]="searchTerm"
+                (input)="updateSearch($any($event.target).value)"
+            />
+            @if (searchTerm) {
+                <button
+                    mat-icon-button
+                    matSuffix
+                    type="button"
+                    [attr.aria-label]="'Clear search' | translate"
+                    (click)="clearSearch()"
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+        </mat-form-field>
+
+        <mat-button-toggle-group
+            [value]="viewMode"
+            (change)="updateViewMode($event.value)"
+        >
+            <mat-button-toggle value="grouped">
+                {{ 'Grouped' | translate }}
+            </mat-button-toggle>
+            <mat-button-toggle value="list">
+                {{ 'List' | translate }}
+            </mat-button-toggle>
+        </mat-button-toggle-group>
+    </div>
+
+    <table
+        mat-table
+        matSort
+        [matSortActive]="sort.active"
+        [matSortDirection]="sort.direction"
+        class="sp-table"
+        [dataSource]="renderedRows"
+        [multiTemplateDataRows]="viewMode === 'grouped'"
+        (matSortChange)="updateSort($event)"
+    >
+        <ng-container matColumnDef="selected">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let resource">
+                <mat-checkbox
+                    color="accent"
+                    [checked]="isResourceSelected(resource.resourceId)"
+                    [attr.data-cy]="
+                        'select-' +
+                        resource.resourceType
+                            .toLowerCase()
+                            .replace(/\s+/g, '-') +
+                        '-checkbox-' +
+                        resource.resourceName
+                    "
+                    (change)="updateSelection($event.checked, resource)"
+                    (click)="$event.stopPropagation()"
+                >
+                </mat-checkbox>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="type">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                {{ 'Type' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let resource">
+                <div
+                    fxLayout="column"
+                    fxLayoutAlign="start start"
+                    class="truncate"
+                >
+                    <div
+                        class="chip mt-sm mb-sm"
+                        [ngStyle]="{ color: getLinkTypeColor(resource) }"
+                    >
+                        <mat-icon class="link-type-icon">
+                            {{ getLinkType(resource)?.linkIcon || 'link' }}
+                        </mat-icon>
+                        <span class="text-sm">
+                            {{
+                                getLinkType(resource)?.linkLabel ||
+                                    resource.resourceType
+                            }}
+                        </span>
+                    </div>
+                </div>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="linkLabel">
+            <th mat-header-cell mat-sort-header *matHeaderCellDef>
+                {{ 'Name' | translate }}
+            </th>
+            <td mat-cell *matCellDef="let resource">
+                <div
+                    fxLayout="column"
+                    fxLayoutAlign="start start"
+                    class="truncate"
+                >
+                    <span>{{ resource.resourceName }}</span>
+                </div>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="groupHeader">
+            <td
+                mat-cell
+                *matCellDef="let group"
+                class="asset-link-table-group-header-cell"
+                [attr.colspan]="displayedColumns.length"
+            >
+                <div
+                    fxLayout="row"
+                    fxLayoutAlign="start center"
+                    fxLayoutGap="8px"
+                    class="asset-link-table-group-header"
+                >
+                    <button
+                        mat-icon-button
+                        type="button"
+                        class="asset-link-table-group-toggle"
+                        (click)="toggleGroup(group.id)"
+                    >
+                        <mat-icon>
+                            {{
+                                group.collapsed
+                                    ? 'chevron_right'
+                                    : 'expand_more'
+                            }}
+                        </mat-icon>
+                    </button>
+                    <div
+                        class="chip asset-link-table-group-chip"
+                        [ngStyle]="{ color: group.color }"
+                    >
+                        <mat-icon class="link-type-icon">
+                            {{ group.icon }}
+                        </mat-icon>
+                        <span class="text-sm">
+                            {{ group.title | translate }}
+                        </span>
+                    </div>
+                    <span class="asset-link-table-group-count text-sm">
+                        {{ group.count }}
+                    </span>
+                </div>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr
+            mat-row
+            *matRowDef="
+                let row;
+                columns: groupHeaderColumns;
+                when: isGroupHeaderRow
+            "
+            class="asset-link-table-group-row"
+        ></tr>
+        <tr
+            mat-row
+            *matRowDef="let row; columns: displayedColumns; when: isDataRow"
+        ></tr>
+
+        <tr class="mat-row" *matNoDataRow>
+            <td
+                class="mat-cell"
+                data-cy="no-table-entries"
+                [colSpan]="displayedColumns.length"
+            >
+                {{ 'No entries available.' | translate }}
+            </td>
+        </tr>
+    </table>
+</div>