This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch add-asset-browser-to-dashboard-data-view in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 9f53397019560def4590ed5cc68eea5867f34423 Author: Dominik Riemer <[email protected]> AuthorDate: Wed Aug 28 21:59:41 2024 +0200 feat: Add asset browser to dashboard and data explorer --- .../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 676577c3c4..3be39fc4a8 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="hasDashboardDeletePrivileges" - (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="hasDashboardDeletePrivileges" + (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 919e2621f1..0ab7cbc676 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[] = []; @@ -80,7 +81,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(); }); } @@ -168,4 +169,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); + } }
