This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch 3960-make-datasets-a-first-class-ui-view in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 5db87db6a131967c79e475dde7d961ad368ca499 Author: Dominik Riemer <[email protected]> AuthorDate: Tue Nov 25 09:50:52 2025 +0100 Use sp-table in dataset configuration --- .../basic-header-title/header-title.component.scss | 2 +- .../split-section/split-section.component.scss | 1 - .../datalake-configuration.component.html | 439 +++++++++------------ .../datalake-configuration.component.ts | 10 +- ui/src/app/dataset/dataset.module.ts | 2 + .../delete-datalake-index-dialog.component.html | 1 + ui/src/scss/sp/_variables.scss | 1 + 7 files changed, 189 insertions(+), 267 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss index 05d774f767..50f3c6a8e3 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-header-title/header-title.component.scss @@ -17,7 +17,7 @@ */ .header-title { - font-size: 1.7rem; + font-size: 1.5rem; font-weight: 700; display: inline-block; padding-left: 12px; /* space so text doesn't overlap border */ diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss index c7820057d2..79a351b11f 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/split-section/split-section.component.scss @@ -20,7 +20,6 @@ width: 100%; display: block; --accent: hsl(221 83% 53%); - --fg-muted: color-mix(in oklab, currentColor 60%, transparent); --divider: color-mix(in oklab, currentColor 18%, transparent); } diff --git a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html index 63eff78102..8b75f4bc4a 100644 --- a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html +++ b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.html @@ -18,27 +18,33 @@ <sp-basic-view [showBackLink]="false" [padding]="true"> <div fxLayout="column" fxLayoutAlign="start start"> - <sp-basic-header-title-component - [title]="'Datasets' | translate" - ></sp-basic-header-title-component> - <button - section-actions - color="accent" - mat-icon-button - [matTooltip]="'Refresh' | translate" - data-cy="refresh-data-lake-measures" - (click)="loadAvailableMeasurements()" + <div + fxLayout="row" + fxLayoutAlign="start center" + fxFlex="100" + class="w-100" > - <mat-icon>refresh</mat-icon> - </button> - <div fxFlex="100" fxLayout="column"> - <table - fxFlex="100" - mat-table - data-cy="datalake-settings" + <sp-basic-header-title-component + [title]="'Datasets' | translate" + ></sp-basic-header-title-component> + <span fxFlex></span> + <button + color="accent" + mat-icon-button + [matTooltip]="'Refresh' | translate" + data-cy="refresh-data-lake-measures" + (click)="loadAvailableMeasurements()" + > + <mat-icon>refresh</mat-icon> + </button> + </div> + <div fxLayout="column" class="w-100"> + <sp-table [dataSource]="dataSource" - style="width: 100%" + [columns]="displayedColumns" + [showActionsMenu]="true" matSort + data-cy="datalake-settings" > <ng-container matColumnDef="name"> <th mat-header-cell mat-sort-header *matHeaderCellDef> @@ -84,107 +90,6 @@ </td> </ng-container> - <ng-container matColumnDef="download"> - <th mat-header-cell *matHeaderCellDef>Download</th> - <td mat-cell *matCellDef="let configurationEntry"> - <div fxLayout="row"> - <span - fxFlex - fxFlexOrder="3" - fxLayout="row" - fxLayoutAlign="start center" - > - <button - color="accent" - mat-icon-button - [matTooltip]=" - 'Download data from index' | translate - " - matTooltipPosition="above" - data-cy="datalake-download-btn" - (click)=" - openDownloadDialog( - configurationEntry.name - ) - " - > - <i class="material-icons">download</i> - </button> - </span> - </div> - </td> - </ng-container> - - <ng-container matColumnDef="truncate"> - <th mat-header-cell *matHeaderCellDef> - {{ 'Truncate' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - <div fxLayout="row"> - <span - fxFlex - fxFlexOrder="3" - fxLayout="row" - fxLayoutAlign="start center" - > - <button - color="accent" - mat-icon-button - [matTooltip]=" - 'Truncate all data from index' - | translate - " - matTooltipPosition="above" - data-cy="datalake-truncate-btn" - (click)=" - cleanDatalakeIndex( - configurationEntry.name - ) - " - > - <i class="material-icons" - >local_fire_department</i - > - </button> - </span> - </div> - </td> - </ng-container> - - <ng-container matColumnDef="remove"> - <th mat-header-cell *matHeaderCellDef> - {{ 'Remove' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - <div fxLayout="row"> - <span - fxFlex - fxFlexOrder="3" - fxLayout="row" - fxLayoutAlign="start center" - > - <button - color="accent" - mat-icon-button - [matTooltip]=" - 'Remove index from database' | translate - " - data-cy="datalake-delete-btn" - matTooltipPosition="above" - [disabled]="!configurationEntry.remove" - (click)=" - deleteDatalakeIndex( - configurationEntry.name - ) - " - > - <i class="material-icons">delete</i> - </button> - </span> - </div> - </td> - </ng-container> - <ng-container matColumnDef="retention"> <th mat-header-cell *matHeaderCellDef> {{ 'Retention Rate' | translate }} @@ -226,34 +131,60 @@ </td> </ng-container> - <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> - <tr - mat-row - *matRowDef="let row; columns: displayedColumns" - ></tr> - </table> - </div> - <div fxFlex="100" fxLayoutAlign="end end"> - <mat-paginator - [pageSizeOptions]="[pageSize]" - [pageSize]="pageSize" - (page)="onPageChange($event)" - ></mat-paginator> + <ng-template spTableActions let-element> + <button + mat-menu-item + data-cy="datalake-download-btn" + (click)="openDownloadDialog(element.name)" + > + <mat-icon>download</mat-icon> + <span>{{ + 'Download data from index' | translate + }}</span> + </button> + <button + mat-menu-item + data-cy="datalake-truncate-btn" + (click)="cleanDatalakeIndex(element.name)" + > + <mat-icon>local_fire_department</mat-icon> + <span>{{ + 'Truncate all data from index' | translate + }}</span> + </button> + <button + mat-menu-item + data-cy="datalake-delete-btn" + [disabled]="!element.remove" + (click)="deleteDatalakeIndex(element.name)" + > + <mat-icon>delete</mat-icon> + <span>{{ + 'Remove index from database' | translate + }}</span> + </button> + </ng-template> + </sp-table> </div> - @if (availableMeasurements.length === 0) { - <h5>{{ '(no stored measurements)' | translate }}</h5> - } - <sp-split-section - [title]="'Export Providers' | translate" - [subtitle]=" - 'Add, Edit, and Delete export providers used for backing up data lakes.' - | translate - " + + <div + fxLayout="row" + fxFlex="100" + class="mt-10 w-100" + fxLayoutAlign="start center" > + <sp-basic-header-title-component + [title]="'Export Providers' | translate" + [description]=" + 'Add, Edit, and Delete export providers used for backing up data lakes.' + | translate + " + ></sp-basic-header-title-component> + <span fxFlex></span> <div + fxFlex fxLayout="row" fxLayoutAlign="end center" - section-actions fxLayoutGap="5px" > <button @@ -274,130 +205,124 @@ <mat-icon>refresh</mat-icon> </button> </div> - <table - fxFlex="100" - mat-table - data-cy="exportproviders-settings" - [dataSource]="dataSourceExport" - style="width: 100%" - matSort - > - <ng-container matColumnDef="providertype"> - <th mat-header-cell mat-sort-header *matHeaderCellDef> - {{ 'Provider Type' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - {{ configurationEntry.providerType }} - </td> - </ng-container> + </div> + <table + fxFlex="100" + mat-table + data-cy="exportproviders-settings" + [dataSource]="dataSourceExport" + style="width: 100%" + matSort + > + <ng-container matColumnDef="providertype"> + <th mat-header-cell mat-sort-header *matHeaderCellDef> + {{ 'Provider Type' | translate }} + </th> + <td mat-cell *matCellDef="let configurationEntry"> + {{ configurationEntry.providerType }} + </td> + </ng-container> - <ng-container matColumnDef="endpoint"> - <th mat-header-cell mat-sort-header *matHeaderCellDef> - {{ 'Endpoint' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - {{ configurationEntry.endPoint }} - </td> - </ng-container> + <ng-container matColumnDef="endpoint"> + <th mat-header-cell mat-sort-header *matHeaderCellDef> + {{ 'Endpoint' | translate }} + </th> + <td mat-cell *matCellDef="let configurationEntry"> + {{ configurationEntry.endPoint }} + </td> + </ng-container> - <ng-container matColumnDef="bucket"> - <th mat-header-cell mat-sort-header *matHeaderCellDef> - {{ 'Bucket' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - {{ configurationEntry.bucketName }} - </td> - </ng-container> + <ng-container matColumnDef="bucket"> + <th mat-header-cell mat-sort-header *matHeaderCellDef> + {{ 'Bucket' | translate }} + </th> + <td mat-cell *matCellDef="let configurationEntry"> + {{ configurationEntry.bucketName }} + </td> + </ng-container> - <ng-container matColumnDef="editExportProvider"> - <th mat-header-cell *matHeaderCellDef> - {{ 'Edit' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - <div *ngIf="configurationEntry.providerId !== 'FOLDER'"> - <div fxLayout="row"> - <span - fxFlex - fxFlexOrder="3" - fxLayout="row" - fxLayoutAlign="start center" + <ng-container matColumnDef="editExportProvider"> + <th mat-header-cell *matHeaderCellDef> + {{ 'Edit' | translate }} + </th> + <td mat-cell *matCellDef="let configurationEntry"> + <div *ngIf="configurationEntry.providerId !== 'FOLDER'"> + <div fxLayout="row"> + <span + fxFlex + fxFlexOrder="3" + fxLayout="row" + fxLayoutAlign="start center" + > + <button + color="accent" + mat-icon-button + matTooltip="{{ + 'Edit Export Provider' | translate + }}" + matTooltipPosition="above" + data-cy="exportProvider-edit-btn" + (click)=" + createExportProvider(configurationEntry) + " > - <button - color="accent" - mat-icon-button - matTooltip="{{ - 'Edit Export Provider' | translate - }}" - matTooltipPosition="above" - data-cy="exportProvider-edit-btn" - (click)=" - createExportProvider( - configurationEntry - ) - " - > - <i class="material-icons">edit</i> - </button> - </span> - </div> + <i class="material-icons">edit</i> + </button> + </span> </div> - </td> - </ng-container> + </div> + </td> + </ng-container> - <ng-container matColumnDef="delete"> - <th mat-header-cell *matHeaderCellDef> - {{ 'Remove' | translate }} - </th> - <td mat-cell *matCellDef="let configurationEntry"> - <div *ngIf="configurationEntry.providerId !== 'FOLDER'"> - <div fxLayout="row"> - <span - fxFlex - fxFlexOrder="3" - fxLayout="row" - fxLayoutAlign="start center" + <ng-container matColumnDef="delete"> + <th mat-header-cell *matHeaderCellDef> + {{ 'Remove' | translate }} + </th> + <td mat-cell *matCellDef="let configurationEntry"> + <div *ngIf="configurationEntry.providerId !== 'FOLDER'"> + <div fxLayout="row"> + <span + fxFlex + fxFlexOrder="3" + fxLayout="row" + fxLayoutAlign="start center" + > + <button + color="accent" + mat-icon-button + matTooltip="{{ + 'Remove export provider configuration' + | translate + }}" + data-cy="exportProvider-delete-btn" + matTooltipPosition="above" + (click)=" + deleteExportProvider( + configurationEntry.providerId + ) + " > - <button - color="accent" - mat-icon-button - matTooltip="{{ - 'Remove export provider configuration' - | translate - }}" - data-cy="exportProvider-delete-btn" - matTooltipPosition="above" - (click)=" - deleteExportProvider( - configurationEntry.providerId - ) - " - > - <i class="material-icons">delete</i> - </button> - </span> - </div> + <i class="material-icons">delete</i> + </button> + </span> </div> - </td> - </ng-container> + </div> + </td> + </ng-container> - <tr - mat-header-row - *matHeaderRowDef="displayedColumnsExport" - ></tr> - <tr - mat-row - *matRowDef="let row; columns: displayedColumnsExport" - ></tr> - </table> + <tr mat-header-row *matHeaderRowDef="displayedColumnsExport"></tr> + <tr + mat-row + *matRowDef="let row; columns: displayedColumnsExport" + ></tr> + </table> - <div - *ngIf=" - !availableExportProvider || - availableExportProvider.length === 0 - " - > - <h5>{{ 'no stored export providers' | translate }}</h5> - </div> - </sp-split-section> + <div + *ngIf=" + !availableExportProvider || availableExportProvider.length === 0 + " + > + <h5>{{ 'no stored export providers' | translate }}</h5> + </div> </div> </sp-basic-view> diff --git a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts index a2be2d06ce..5115c5da29 100644 --- a/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts +++ b/ui/src/app/dataset/components/datalake-configuration/datalake-configuration.component.ts @@ -56,8 +56,6 @@ import { TranslateService } from '@ngx-translate/core'; standalone: false, }) export class DatalakeConfigurationComponent implements OnInit { - tabs: SpNavigationItem[] = []; - @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; @@ -65,7 +63,6 @@ export class DatalakeConfigurationComponent implements OnInit { private dataViewDataExplorerService = inject(ChartService); private dialogService = inject(DialogService); private breadcrumbService = inject(SpBreadcrumbService); - private tabService = inject(SpConfigurationTabsService); private exportProviderRestService = inject(ExportProviderService); private translateService = inject(TranslateService); private cdr = inject(ChangeDetectorRef); @@ -82,10 +79,8 @@ export class DatalakeConfigurationComponent implements OnInit { 'name', 'pipeline', 'events', - 'download', - 'truncate', - 'remove', 'retention', + 'actions', ]; displayedColumnsExport: string[] = [ @@ -100,10 +95,9 @@ export class DatalakeConfigurationComponent implements OnInit { pageIndex = 0; ngOnInit(): void { - this.tabs = this.tabService.getTabs(); this.breadcrumbService.updateBreadcrumb([ SpConfigurationRoutes.BASE, - { label: this.tabService.getTabTitle('datalake') }, + { label: 'Datasets' }, ]); this.loadAvailableMeasurements(); this.loadAvailableExportProvider(); diff --git a/ui/src/app/dataset/dataset.module.ts b/ui/src/app/dataset/dataset.module.ts index f38f8b14ef..0fdad9b66e 100644 --- a/ui/src/app/dataset/dataset.module.ts +++ b/ui/src/app/dataset/dataset.module.ts @@ -49,6 +49,7 @@ import { MatRadioModule } from '@angular/material/radio'; import { MatSelectModule } from '@angular/material/select'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatInputModule } from '@angular/material/input'; +import { MatMenuModule } from '@angular/material/menu'; @NgModule({ imports: [ @@ -83,6 +84,7 @@ import { MatInputModule } from '@angular/material/input'; MatSelectModule, MatPaginatorModule, MatInputModule, + MatMenuModule, ], declarations: [ DeleteDatalakeIndexComponent, diff --git a/ui/src/app/dataset/dialog/delete-datalake-index/delete-datalake-index-dialog.component.html b/ui/src/app/dataset/dialog/delete-datalake-index/delete-datalake-index-dialog.component.html index e5c1c21eb6..87d9e52db7 100644 --- a/ui/src/app/dataset/dialog/delete-datalake-index/delete-datalake-index-dialog.component.html +++ b/ui/src/app/dataset/dialog/delete-datalake-index/delete-datalake-index-dialog.component.html @@ -75,6 +75,7 @@ > <div fxLayout="row" fxLayoutAlign="space-around"> <mat-spinner + [diameter]="25" [mode]="'indeterminate'" color="accent" ></mat-spinner> diff --git a/ui/src/scss/sp/_variables.scss b/ui/src/scss/sp/_variables.scss index ca9cd8a27a..d63946748e 100644 --- a/ui/src/scss/sp/_variables.scss +++ b/ui/src/scss/sp/_variables.scss @@ -27,6 +27,7 @@ $sp-color-error: #b71c1c; :root { --mat-sys-body-medium-size: 10pt; + --fg-muted: color-mix(in oklab, currentColor 60%, transparent); --color-data-view: rgb(122, 206, 227); --color-dashboard: rgb(76, 115, 164);
