Skip to content

Commit

Permalink
feat: Add asset browser to dashboard and data explorer (#3194)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dominikriemer
dominikriemer authored Aug 29, 2024
1 parent 2c997f0 commit 32e5d2d
Show file tree
Hide file tree
Showing 8 changed files with 249 additions and 210 deletions.
37 changes: 18 additions & 19 deletions ui/src/app/assets/components/asset-overview/asset-overview.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,36 +72,35 @@ 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,
{
panelType: PanelType.SLIDE_IN_PANEL,
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);
}
});
}

Expand All @@ -117,7 +116,7 @@ export class SpAssetOverviewComponent implements OnInit {
asset._id,
asset._rev,
)
.subscribe(result => {
.subscribe(() => {
this.loadAssets();
this.assetBrowserService.loadAssetData();
});
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
data-cy="save-data-view"
(click)="onSave()"
>
{{ createMode ? 'Create' : 'Save' }}
Create
</button>
</div>
</div>
19 changes: 5 additions & 14 deletions ui/src/app/assets/dialog/create-asset/create-asset-dialog.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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);
});
}
}
277 changes: 142 additions & 135 deletions ui/src/app/dashboard/components/overview/dashboard-overview.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading

0 comments on commit 32e5d2d

Please sign in to comment.