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 32e5d2d66b feat: Add asset browser to dashboard and data explorer
(#3194)
32e5d2d66b is described below
commit 32e5d2d66b423600abbfc2308b24cf48bb7081d3
Author: Dominik Riemer <[email protected]>
AuthorDate: Thu Aug 29 12:51:33 2024 +0200
feat: Add asset browser to dashboard and data explorer (#3194)
---
.../asset-overview/asset-overview.component.ts | 37 ++-
.../create-asset-dialog.component.html | 2 +-
.../create-asset/create-asset-dialog.component.ts | 19 +-
.../overview/dashboard-overview.component.html | 277 +++++++++++----------
.../overview/dashboard-overview.component.ts | 14 +-
.../data-explorer-dashboard-overview.component.ts | 21 +-
.../overview/data-explorer-overview.component.html | 83 +++---
.../overview/data-explorer-overview.component.ts | 6 +
8 files changed, 249 insertions(+), 210 deletions(-)
diff --git
a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
index 0afcbf7033..88a5b3f79f 100644
--- a/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
+++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.ts
@@ -72,21 +72,19 @@ export class SpAssetOverviewComponent implements OnInit {
});
}
- createNewAsset(assetModel?: SpAssetModel) {
- if (!assetModel) {
- assetModel = {
- assetName: 'New Asset',
- assetDescription: '',
- assetLinks: [],
- assetId: this.idGeneratorService.generate(6),
- _id: this.idGeneratorService.generate(24),
- appDocType: 'asset-management',
- removable: true,
- _rev: undefined,
- assets: [],
- assetType: undefined,
- };
- }
+ createNewAsset() {
+ const assetModel = {
+ assetName: 'New Asset',
+ assetDescription: '',
+ assetLinks: [],
+ assetId: this.idGeneratorService.generate(6),
+ _id: this.idGeneratorService.generate(24),
+ appDocType: 'asset-management',
+ removable: true,
+ _rev: undefined,
+ assets: [],
+ assetType: undefined,
+ };
const dialogRef = this.dialogService.open(
SpCreateAssetDialogComponent,
{
@@ -94,14 +92,15 @@ export class SpAssetOverviewComponent implements OnInit {
title: 'Create asset',
width: '50vw',
data: {
- createMode: true,
assetModel: assetModel,
},
},
);
- dialogRef.afterClosed().subscribe(() => {
- this.goToDetailsView(assetModel, true);
+ dialogRef.afterClosed().subscribe(ev => {
+ if (ev) {
+ this.goToDetailsView(assetModel, true);
+ }
});
}
@@ -117,7 +116,7 @@ export class SpAssetOverviewComponent implements OnInit {
asset._id,
asset._rev,
)
- .subscribe(result => {
+ .subscribe(() => {
this.loadAssets();
this.assetBrowserService.loadAssetData();
});
diff --git
a/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.html
b/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.html
index e4acc1423f..c1778d43af 100644
--- a/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.html
+++ b/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.html
@@ -57,7 +57,7 @@
data-cy="save-data-view"
(click)="onSave()"
>
- {{ createMode ? 'Create' : 'Save' }}
+ Create
</button>
</div>
</div>
diff --git
a/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.ts
b/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.ts
index e4a6aad67a..41c22f343c 100644
--- a/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.ts
+++ b/ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.ts
@@ -30,7 +30,6 @@ import { DialogRef } from '@streampipes/shared-ui';
styleUrls: ['./create-asset-dialog.component.scss'],
})
export class SpCreateAssetDialogComponent {
- @Input() createMode: boolean;
@Input() assetModel: SpAssetModel;
constructor(
@@ -43,18 +42,10 @@ export class SpCreateAssetDialogComponent {
}
onSave(): void {
- if (this.createMode) {
- this.assetManagementService
- .createAsset(this.assetModel)
- .subscribe(() => {
- this.dialogRef.close();
- });
- } else {
- this.assetManagementService
- .updateAsset(this.assetModel)
- .subscribe(() => {
- this.dialogRef.close();
- });
- }
+ this.assetManagementService
+ .createAsset(this.assetModel)
+ .subscribe(() => {
+ this.dialogRef.close(true);
+ });
}
}
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
index c58a094634..e51199a6cd 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.html
@@ -16,144 +16,151 @@
~
-->
-<sp-basic-view [showBackLink]="false" [padding]="true">
- <div
- nav
- fxFlex="100"
- fxLayoutAlign="start center"
- fxLayout="row"
- class="pl-10"
- >
- <button
- mat-button
- mat-raised-button
- color="accent"
- data-cy="new-dashboard-btn"
- (click)="openNewDashboardDialog()"
- *ngIf="hasDashboardWritePrivileges"
+<sp-asset-browser
+ filteredAssetLinkType="dashboard"
+ allResourcesAlias="Dashboards"
+ [resourceCount]="dashboards.length"
+ (filterIdsEmitter)="applyDashboardFilters($event)"
+>
+ <sp-basic-view [showBackLink]="false" [padding]="true">
+ <div
+ nav
+ fxFlex="100"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ class="pl-10"
>
- <i class="material-icons">add</i>
- <span>New Dashboard</span>
- </button>
- </div>
-
- <div fxFlex="100" fxLayout="column">
- <sp-basic-header-title-component
- title="Dashboards"
- ></sp-basic-header-title-component>
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
- <sp-table
- fxFlex="90"
- [columns]="displayedColumns"
- [dataSource]="dataSource"
- matSort
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ data-cy="new-dashboard-btn"
+ (click)="openNewDashboardDialog()"
+ *ngIf="hasDashboardWritePrivileges"
>
- <ng-container matColumnDef="name">
- <th
- fxFlex="60"
- fxLayoutAlign="start center"
- mat-header-cell
- *matHeaderCellDef
- >
- Dashboard
- </th>
- <td
- fxFlex="60"
- fxLayoutAlign="center start"
- fxLayout="column"
- mat-cell
- *matCellDef="let element"
- >
- <div>
- <b>{{ element.name }}</b>
- </div>
- <div>
- <small> {{ element.description }}</small>
- </div>
- </td>
- </ng-container>
+ <i class="material-icons">add</i>
+ <span>New Dashboard</span>
+ </button>
+ </div>
- <ng-container matColumnDef="actions">
- <th
- fxFlex="40"
- fxLayoutAlign="center center"
- mat-header-cell
- *matHeaderCellDef
- ></th>
- <td
- fxFlex="40"
- fxLayoutAlign="start center"
- mat-cell
- *matCellDef="let element"
- >
- <div
- fxLayout="row"
- fxFlex="100"
- fxLayoutAlign="end center"
+ <div fxFlex="100" fxLayout="column">
+ <sp-basic-header-title-component
+ title="Dashboards"
+ ></sp-basic-header-title-component>
+ <div fxFlex="100" fxLayout="row" fxLayoutAlign="center start">
+ <sp-table
+ fxFlex="90"
+ [columns]="displayedColumns"
+ [dataSource]="dataSource"
+ matSort
+ >
+ <ng-container matColumnDef="name">
+ <th
+ fxFlex="60"
+ fxLayoutAlign="start center"
+ mat-header-cell
+ *matHeaderCellDef
>
- <button
- mat-icon-button
- matTooltip="Open dashboard"
- color="accent"
- (click)="showDashboard(element)"
- [attr.data-cy]="
- 'show-dashboard-' + element.name
- "
- >
- <i class="material-icons">visibility</i>
- </button>
- <button
- mat-icon-button
- matTooltip="Open dashboard in new window"
- color="accent"
- (click)="openExternalDashboard(element)"
- >
- <i class="material-icons">open_in_new</i>
- </button>
- <button
- mat-icon-button
- matTooltip="Edit dashboard settings"
- color="accent"
- *ngIf="hasDashboardWritePrivileges"
- (click)="openEditDashboardDialog(element)"
- data-cy="change-dashboard-settings-button"
- >
- <i class="material-icons">settings</i>
- </button>
- <button
- mat-icon-button
- matTooltip="Edit dashboard"
- color="accent"
- (click)="editDashboard(element)"
- *ngIf="hasDashboardWritePrivileges"
- [attr.data-cy]="
- 'edit-dashboard-' + element.name
- "
- >
- <i class="material-icons">edit</i>
- </button>
- <button
- mat-icon-button
- matTooltip="Manage permissions"
- color="accent"
- *ngIf="isAdmin"
- (click)="showPermissionsDialog(element)"
- >
- <i class="material-icons">share</i>
- </button>
- <button
- mat-icon-button
- matTooltip="Delete dashboard"
- color="accent"
- *ngIf="hasDashboardWritePrivileges"
- (click)="openDeleteDashboardDialog(element)"
+ Dashboard
+ </th>
+ <td
+ fxFlex="60"
+ fxLayoutAlign="center start"
+ fxLayout="column"
+ mat-cell
+ *matCellDef="let element"
+ >
+ <div>
+ <b>{{ element.name }}</b>
+ </div>
+ <div>
+ <small> {{ element.description }}</small>
+ </div>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="actions">
+ <th
+ fxFlex="40"
+ fxLayoutAlign="center center"
+ mat-header-cell
+ *matHeaderCellDef
+ ></th>
+ <td
+ fxFlex="40"
+ fxLayoutAlign="start center"
+ mat-cell
+ *matCellDef="let element"
+ >
+ <div
+ fxLayout="row"
+ fxFlex="100"
+ fxLayoutAlign="end center"
>
- <i class="material-icons">delete</i>
- </button>
- </div>
- </td>
- </ng-container>
- </sp-table>
+ <button
+ mat-icon-button
+ matTooltip="Open dashboard"
+ color="accent"
+ (click)="showDashboard(element)"
+ [attr.data-cy]="
+ 'show-dashboard-' + element.name
+ "
+ >
+ <i class="material-icons">visibility</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Open dashboard in new window"
+ color="accent"
+ (click)="openExternalDashboard(element)"
+ >
+ <i class="material-icons">open_in_new</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Edit dashboard settings"
+ color="accent"
+ *ngIf="hasDashboardWritePrivileges"
+ (click)="openEditDashboardDialog(element)"
+ data-cy="change-dashboard-settings-button"
+ >
+ <i class="material-icons">settings</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Edit dashboard"
+ color="accent"
+ (click)="editDashboard(element)"
+ *ngIf="hasDashboardWritePrivileges"
+ [attr.data-cy]="
+ 'edit-dashboard-' + element.name
+ "
+ >
+ <i class="material-icons">edit</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Manage permissions"
+ color="accent"
+ *ngIf="isAdmin"
+ (click)="showPermissionsDialog(element)"
+ >
+ <i class="material-icons">share</i>
+ </button>
+ <button
+ mat-icon-button
+ matTooltip="Delete dashboard"
+ color="accent"
+ *ngIf="hasDashboardWritePrivileges"
+
(click)="openDeleteDashboardDialog(element)"
+ >
+ <i class="material-icons">delete</i>
+ </button>
+ </div>
+ </td>
+ </ng-container>
+ </sp-table>
+ </div>
</div>
- </div>
-</sp-basic-view>
+ </sp-basic-view>
+</sp-asset-browser>
diff --git
a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
index 946812af5c..d32eb11261 100644
--- a/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
+++ b/ui/src/app/dashboard/components/overview/dashboard-overview.component.ts
@@ -42,6 +42,7 @@ import { zip } from 'rxjs';
})
export class DashboardOverviewComponent implements OnInit {
dashboards: Dashboard[] = [];
+ filteredDashboards: Dashboard[] = [];
dataSource = new MatTableDataSource<Dashboard>();
displayedColumns: string[] = [];
@@ -76,7 +77,7 @@ export class DashboardOverviewComponent implements OnInit {
getDashboards() {
this.dashboardService.getDashboards().subscribe(data => {
this.dashboards = data.sort((a, b) =>
a.name.localeCompare(b.name));
- this.dataSource.data = this.dashboards;
+ this.applyDashboardFilters();
});
}
@@ -164,4 +165,15 @@ export class DashboardOverviewComponent implements OnInit {
}
});
}
+
+ 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);
+ }
+ });
+ this.dataSource.data = this.filteredDashboards;
+ }
}
diff --git
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.ts
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.ts
index 11dbce196c..bdd1775596 100644
---
a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.ts
+++
b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview/data-explorer-dashboard-overview.component.ts
@@ -16,13 +16,12 @@
*
*/
-import { Component } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import {
Dashboard,
DataViewDataExplorerService,
} from '@streampipes/platform-services';
-import { ObjectPermissionDialogComponent } from
'../../../../core-ui/object-permission-dialog/object-permission-dialog.component';
import {
CurrentUserService,
ConfirmDialogComponent,
@@ -43,6 +42,10 @@ export class SpDataExplorerDashboardOverviewComponent
extends SpDataExplorerOver
dataSource = new MatTableDataSource<Dashboard>();
displayedColumns: string[] = [];
dashboards: Dashboard[] = [];
+ filteredDashboards: Dashboard[] = [];
+
+ @Output()
+ resourceCountEmitter: EventEmitter<number> = new EventEmitter();
constructor(
private dataViewService: DataViewDataExplorerService,
@@ -121,7 +124,19 @@ export class SpDataExplorerDashboardOverviewComponent
extends SpDataExplorerOver
getDashboards() {
this.dataViewService.getDataViews().subscribe(data => {
this.dashboards = data.sort((a, b) =>
a.name.localeCompare(b.name));
- this.dataSource.data = this.dashboards;
+ this.resourceCountEmitter.emit(this.dashboards.length);
+ this.applyDashboardFilters();
+ });
+ }
+
+ 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);
+ }
});
+ this.dataSource.data = this.filteredDashboards;
}
}
diff --git
a/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.html
b/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.html
index 81b53324b8..ac0c0b090f 100644
---
a/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.html
+++
b/ui/src/app/data-explorer/components/overview/data-explorer-overview.component.html
@@ -16,41 +16,50 @@
~
-->
-<sp-basic-view [showBackLink]="false" [padding]="true">
- <div
- nav
- fxFlex="100"
- fxLayoutAlign="start center"
- fxLayout="row"
- class="pl-10"
- >
- <button
- mat-button
- mat-raised-button
- color="accent"
- data-cy="open-new-dashboard-dialog"
- (click)="openNewDashboardDialog()"
- class="mr-10"
- *ngIf="hasDataExplorerWritePrivileges"
+<sp-asset-browser
+ filteredAssetLinkType="data-view"
+ allResourcesAlias="Dashboards"
+ [resourceCount]="resourceCount"
+ (filterIdsEmitter)="applyDashboardFilters($event)"
+>
+ <sp-basic-view [showBackLink]="false" [padding]="true">
+ <div
+ nav
+ fxFlex="100"
+ fxLayoutAlign="start center"
+ fxLayout="row"
+ class="pl-10"
>
- <i class="material-icons">add</i>
- <span>New Dashboard</span>
- </button>
- <button
- mat-button
- mat-raised-button
- color="accent"
- data-cy="open-new-data-view"
- (click)="createNewDataView()"
- class="mr-10"
- *ngIf="hasDataExplorerWritePrivileges"
- >
- <i class="material-icons">add</i>
- <span>New Data View</span>
- </button>
- </div>
- <div fxFlex="100" fxLayout="column">
-
<sp-data-explorer-dashboard-overview></sp-data-explorer-dashboard-overview>
-
<sp-data-explorer-data-view-overview></sp-data-explorer-data-view-overview>
- </div>
-</sp-basic-view>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ data-cy="open-new-dashboard-dialog"
+ (click)="openNewDashboardDialog()"
+ class="mr-10"
+ *ngIf="hasDataExplorerWritePrivileges"
+ >
+ <i class="material-icons">add</i>
+ <span>New Dashboard</span>
+ </button>
+ <button
+ mat-button
+ mat-raised-button
+ color="accent"
+ data-cy="open-new-data-view"
+ (click)="createNewDataView()"
+ class="mr-10"
+ *ngIf="hasDataExplorerWritePrivileges"
+ >
+ <i class="material-icons">add</i>
+ <span>New Data View</span>
+ </button>
+ </div>
+ <div fxFlex="100" fxLayout="column">
+ <sp-data-explorer-dashboard-overview
+ (resourceCountEmitter)="resourceCount = $event"
+ ></sp-data-explorer-dashboard-overview>
+
<sp-data-explorer-data-view-overview></sp-data-explorer-data-view-overview>
+ </div>
+ </sp-basic-view>
+</sp-asset-browser>
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 176399a5fb..5c265b096e 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
@@ -39,6 +39,8 @@ export class DataExplorerOverviewComponent extends
SpDataExplorerOverviewDirecti
@ViewChild(SpDataExplorerDashboardOverviewComponent)
dashboardOverview: SpDataExplorerDashboardOverviewComponent;
+ resourceCount = 0;
+
constructor(
public dialogService: DialogService,
private breadcrumbService: SpBreadcrumbService,
@@ -86,4 +88,8 @@ export class DataExplorerOverviewComponent extends
SpDataExplorerOverviewDirecti
this.dashboardOverview.getDashboards();
});
}
+
+ applyDashboardFilters(elementIds: Set<string> = new Set<string>()): void {
+ this.dashboardOverview.applyDashboardFilters(elementIds);
+ }
}
