This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch modify-data-table-actions in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit be7540e694154744df4396983073fd4c6c328ae0 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Oct 6 10:10:16 2025 +0200 feat: Improve data table UX --- .../components/sp-table/sp-table.component.html | 62 ++--- .../components/sp-table/sp-table.component.scss | 5 + ui/src/app/assets/assets.module.ts | 4 + .../asset-overview/asset-overview.component.html | 80 +++--- .../asset-overview/asset-overview.component.ts | 2 +- .../existing-adapters.component.html | 179 +++++++++----- .../existing-adapters.component.scss | 2 +- .../existing-adapters.component.ts | 2 +- ui/src/app/connect/connect.module.ts | 2 + .../dashboard-overview-table.component.html | 36 +-- .../data-explorer-overview-table.component.html | 162 +++++------- .../pipeline-overview.component.html | 273 +++++++++++++-------- .../pipeline-overview.component.ts | 2 +- ui/src/app/pipelines/pipelines.module.ts | 2 + ui/src/scss/sp/main.scss | 6 + 15 files changed, 426 insertions(+), 393 deletions(-) diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html index 5f7ad2cabd..045643415b 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html @@ -22,48 +22,40 @@ @if (showActionsMenu) { <ng-container matColumnDef="actions"> - <th - fxFlex - fxLayoutAlign="center center" - mat-header-cell - *matHeaderCellDef - ></th> - <td - fxFlex - fxLayoutAlign="end center" - mat-cell - *matCellDef="let element" - > - <div - [matMenuTriggerFor]="menu" - #menuTrigger="matMenuTrigger" - (mouseenter)="mouseEnter(menuTrigger)" - (mouseleave)="mouseLeave(menuTrigger)" - > - <button - mat-icon-button + <th mat-header-cell *matHeaderCellDef></th> + <td mat-cell *matCellDef="let element"> + <div fxLayoutAlign="end center"> + <div [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" - (click)="$event.stopPropagation()" - [attr.data-cy]="'more-options'" - > - <mat-icon>more_vert</mat-icon> - </button> - </div> - <mat-menu #menu="matMenu" [hasBackdrop]="false"> - <div (mouseenter)="mouseEnter(menuTrigger)" (mouseleave)="mouseLeave(menuTrigger)" > - <ng-container - *ngTemplateOutlet=" - actionsTemplate; - context: { $implicit: element } - " + <button + mat-icon-button + [matMenuTriggerFor]="menu" + #menuTrigger="matMenuTrigger" + (click)="$event.stopPropagation()" + [attr.data-cy]="'more-options'" > - </ng-container> + <mat-icon>more_vert</mat-icon> + </button> </div> - </mat-menu> + <mat-menu #menu="matMenu" [hasBackdrop]="false"> + <div + (mouseenter)="mouseEnter(menuTrigger)" + (mouseleave)="mouseLeave(menuTrigger)" + > + <ng-container + *ngTemplateOutlet=" + actionsTemplate; + context: { $implicit: element } + " + > + </ng-container> + </div> + </mat-menu> + </div> </td> </ng-container> } diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss index bd8eea251f..4d0b280941 100644 --- a/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss +++ b/ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss @@ -32,3 +32,8 @@ .cursor-pointer { cursor: pointer; } + +.right-column { + text-align: right; /* align contents inside cell */ + margin-left: auto; /* push this column to the far right */ +} diff --git a/ui/src/app/assets/assets.module.ts b/ui/src/app/assets/assets.module.ts index 831273a1b9..3af98418a0 100644 --- a/ui/src/app/assets/assets.module.ts +++ b/ui/src/app/assets/assets.module.ts @@ -62,6 +62,8 @@ import { ViewAssetLabelsComponent } from './components/asset-details/view-asset/ import { ViewAssetBasicsComponent } from './components/asset-details/view-asset/view-asset-basics/view-assset-basics.component'; import { ViewAssetLinksComponent } from './components/asset-details/view-asset/view-asset-links/view-asset-links.component'; import { AssetLinkCardComponent } from './components/asset-details/view-asset/view-asset-links/asset-link-card/asset-link-card.component'; +import { MatMenuItem } from '@angular/material/menu'; +import { TranslatePipe } from '@ngx-translate/core'; @NgModule({ imports: [ @@ -116,6 +118,8 @@ import { AssetLinkCardComponent } from './components/asset-details/view-asset/vi SharedUiModule, MatTreeModule, MatSortModule, + MatMenuItem, + TranslatePipe, ], declarations: [ AssetDetailsBasicsComponent, diff --git a/ui/src/app/assets/components/asset-overview/asset-overview.component.html b/ui/src/app/assets/components/asset-overview/asset-overview.component.html index 98849fb525..6b7f059dd4 100644 --- a/ui/src/app/assets/components/asset-overview/asset-overview.component.html +++ b/ui/src/app/assets/components/asset-overview/asset-overview.component.html @@ -55,6 +55,9 @@ fxFlex="100" [columns]="displayedColumns" [dataSource]="dataSource" + [showActionsMenu]="true" + [rowsClickable]="true" + (rowClicked)="goToDetailsView($event)" matSort > <ng-container matColumnDef="name"> @@ -83,55 +86,36 @@ </div> </td> </ng-container> - <ng-container matColumnDef="action"> - <th - mat-header-cell - *matHeaderCellDef - style="justify-content: center" - ></th> - <td mat-cell *matCellDef="let asset"> - <div fxLayout="row" fxLayoutAlign="end center"> - <button - color="accent" - mat-icon-button - matTooltip="Show info" - matTooltipPosition="above" - (click)="goToDetailsView(asset)" - > - <i class="material-icons">search</i> - </button> - <button - *ngIf="hasWritePrivilege" - color="accent" - mat-icon-button - matTooltip="Edit asset" - matTooltipPosition="above" - data-cy="edit-asset-button" - [attr.data-cy]=" - 'edit-asset-' + asset.assetName - " - (click)="goToDetailsView(asset, true)" - > - <i class="material-icons">edit</i> - </button> + <ng-template spTableActions let-element> + <button + mat-menu-item + (click)="goToDetailsView(element)" + > + <mat-icon>search</mat-icon> + <span>{{ 'Show' | translate }}</span> + </button> + <button + *ngIf="hasWritePrivilege" + mat-menu-item + data-cy="edit-asset-button" + [attr.data-cy]="'edit-asset-' + element.assetName" + (click)="goToDetailsView(element, true)" + > + <mat-icon>edit</mat-icon> + <span>{{ 'Edit' | translate }}</span> + </button> - <button - *ngIf="hasWritePrivilege" - color="accent" - mat-icon-button - matTooltip="Delete asset" - data-cy="delete" - matTooltipPosition="above" - [attr.data-cy]=" - 'delete-asset-' + asset.assetName - " - (click)="deleteAsset(asset)" - > - <i class="material-icons">delete</i> - </button> - </div> - </td> - </ng-container> + <button + *ngIf="hasWritePrivilege" + mat-menu-item + data-cy="delete" + [attr.data-cy]="'delete-asset-' + element.assetName" + (click)="deleteAsset(element)" + > + <mat-icon>delete</mat-icon> + <span>{{ 'Delete' | translate }}</span> + </button> + </ng-template> </sp-table> </div> </div> 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 f7421f59f0..38fcfd5593 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 @@ -47,7 +47,7 @@ import { MatDialog } from '@angular/material/dialog'; export class SpAssetOverviewComponent implements OnInit { existingAssets: SpAssetModel[] = []; - displayedColumns: string[] = ['name', 'action']; + displayedColumns: string[] = ['name', 'actions']; dataSource: MatTableDataSource<SpAssetModel> = new MatTableDataSource<SpAssetModel>(); diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html index 3f441fe4ef..abd0e5d7be 100644 --- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html +++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html @@ -36,7 +36,9 @@ data-cy="connect-create-new-adapter-button" (click)="createNewAdapter()" > - <i class="material-icons">add</i> New adapter + <i class="material-icons">add</i> {{ + 'New adapter' | translate + }} </button> <button mat-flat-button @@ -46,7 +48,7 @@ (click)="startAllAdapters(true)" > <mat-icon>play_arrow</mat-icon> - <span>Start all adapters</span> + <span>{{ 'Start all adapters' | translate }}</span> </button> <button mat-flat-button @@ -56,7 +58,7 @@ (click)="startAllAdapters(false)" > <mat-icon>stop</mat-icon> - <span>Stop all adapters</span> + <span>{{ 'Stop all adapters' | translate }}</span> </button> <div fxFlex fxLayout="row" fxLayoutAlign="end center"> <sp-connect-filter-toolbar @@ -101,12 +103,15 @@ fxFlex="100" [columns]="displayedColumns" [dataSource]="dataSource" + [showActionsMenu]="true" + [rowsClickable]="true" + (rowClicked)="navigateToDetailsOverviewPage($event)" data-cy="all-adapters-table" matSort > <ng-container matColumnDef="status"> <th mat-header-cell mat-sort-header *matHeaderCellDef> - Status + {{ 'Status' | translate }} </th> <td mat-cell *matCellDef="let adapter"> <sp-adapter-status-light @@ -141,7 +146,10 @@ matTooltip="Start adapter" matTooltipPosition="above" data-cy="start-adapter" - (click)="startAdapter(adapter)" + (click)=" + startAdapter(adapter); + $event.stopPropagation() + " > <i class="material-icons">play_arrow</i> </button> @@ -152,7 +160,10 @@ matTooltip="Stop adapter" matTooltipPosition="above" data-cy="stop-adapter" - (click)="stopAdapter(adapter)" + (click)=" + stopAdapter(adapter); + $event.stopPropagation() + " > <i class="material-icons">stop</i> </button> @@ -162,13 +173,15 @@ <ng-container matColumnDef="name"> <th mat-header-cell mat-sort-header *matHeaderCellDef> - Name + {{ 'Name' | translate }} </th> <td mat-cell *matCellDef="let adapter"> - <div> + <div + fxLayout="column" + fxLayoutAlign="start start" + class="truncate" + > <b data-cy="adapter-name">{{ adapter.name }}</b> - </div> - <div> <small> {{ adapter.description }}</small> </div> </td> @@ -191,7 +204,9 @@ </td> </ng-container> <ng-container matColumnDef="lastModified"> - <th mat-header-cell *matHeaderCellDef>Created</th> + <th mat-header-cell *matHeaderCellDef> + {{ 'Created' | translate }} + </th> <td mat-cell *matCellDef="let adapter"> <h5> {{ @@ -207,7 +222,7 @@ *matHeaderCellDef matTooltip="Messages sent since last start" > - #Messages + #{{ 'Messages' | translate }} </th> <td mat-cell *matCellDef="let adapter"> <sp-label @@ -221,7 +236,9 @@ </ng-container> <ng-container matColumnDef="lastMessage"> - <th mat-header-cell *matHeaderCellDef>Last message</th> + <th mat-header-cell *matHeaderCellDef> + {{ 'Last message' | translate }} + </th> <td mat-cell *matCellDef="let adapter"> <h5> {{ @@ -237,57 +254,93 @@ </td> </ng-container> - <ng-container matColumnDef="action"> - <th mat-header-cell *matHeaderCellDef></th> - <td mat-cell *matCellDef="let adapter"> - <div fxLayout="row" fxLayoutAlign="end center"> - <button - color="accent" - mat-icon-button - matTooltip="Show details" - matTooltipPosition="above" - data-cy="details-adapter" - (click)=" - navigateToDetailsOverviewPage(adapter) - " - > - <i class="material-icons">search</i> - </button> + <ng-template spTableActions let-element> + <button + mat-menu-item + data-cy="details-adapter" + (click)="navigateToDetailsOverviewPage(element)" + > + <mat-icon>search</mat-icon> + <span>{{ 'Show' | translate }}</span> + </button> + <button + mat-menu-item + data-cy="edit-adapter" + (click)="editAdapter(element)" + > + <mat-icon>edit</mat-icon> + <span>{{ 'Edit' | translate }}</span> + </button> + <button + mat-menu-item + data-cy="open-manage-permissions" + *ngIf="isAdmin" + (click)="showPermissionsDialog(element)" + > + <mat-icon>share</mat-icon> + <span>{{ 'Manage permissions' | translate }}</span> + </button> + <button + mat-menu-item + data-cy="delete-adapter" + (click)="deleteAdapter(element)" + > + <mat-icon>delete</mat-icon> + <span>{{ 'Delete' | translate }}</span> + </button> + </ng-template> - <button - color="accent" - mat-icon-button - matTooltip="Edit adapter" - data-cy="edit-adapter" - matTooltipPosition="above" - (click)="editAdapter(adapter)" - > - <i class="material-icons">edit</i> - </button> - <button - color="accent" - mat-icon-button - matTooltip="Manage permissions" - matTooltipPosition="above" - data-cy="open-manage-permissions" - *ngIf="isAdmin" - (click)="showPermissionsDialog(adapter)" - > - <i class="material-icons">share</i> - </button> - <button - color="accent" - mat-icon-button - matTooltip="Delete adapter" - data-cy="delete-adapter" - matTooltipPosition="above" - (click)="deleteAdapter(adapter)" - > - <i class="material-icons">delete</i> - </button> - </div> - </td> - </ng-container> + <!-- <ng-container matColumnDef="action">--> + <!-- <th mat-header-cell *matHeaderCellDef></th>--> + <!-- <td mat-cell *matCellDef="let adapter">--> + <!-- <div fxLayout="row" fxLayoutAlign="end center">--> + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- matTooltip="Show details"--> + <!-- matTooltipPosition="above"--> + <!-- data-cy="details-adapter"--> + <!-- (click)="--> + <!-- navigateToDetailsOverviewPage(adapter)--> + <!-- "--> + <!-- >--> + <!-- <i class="material-icons">search</i>--> + <!-- </button>--> + + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- matTooltip="Edit adapter"--> + <!-- data-cy="edit-adapter"--> + <!-- matTooltipPosition="above"--> + <!-- (click)="editAdapter(adapter)"--> + <!-- >--> + <!-- <i class="material-icons">edit</i>--> + <!-- </button>--> + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- matTooltip="Manage permissions"--> + <!-- matTooltipPosition="above"--> + <!-- data-cy="open-manage-permissions"--> + <!-- *ngIf="isAdmin"--> + <!-- (click)="showPermissionsDialog(adapter)"--> + <!-- >--> + <!-- <i class="material-icons">share</i>--> + <!-- </button>--> + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- matTooltip="Delete adapter"--> + <!-- data-cy="delete-adapter"--> + <!-- matTooltipPosition="above"--> + <!-- (click)="deleteAdapter(adapter)"--> + <!-- >--> + <!-- <i class="material-icons">delete</i>--> + <!-- </button>--> + <!-- </div>--> + <!-- </td>--> + <!-- </ng-container>--> </sp-table> </div> </div> diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss index 52a48bdf92..f47cad0e28 100644 --- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss +++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss @@ -23,7 +23,7 @@ .adapter-icon { padding-top: 5px; padding-bottom: 5px; - max-height: 40px; + max-height: 35px; } .real-time { diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts index 34cc2adb65..1ca9ff7d61 100644 --- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts +++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts @@ -70,7 +70,7 @@ export class ExistingAdaptersComponent implements OnInit, OnDestroy { 'lastModified', 'messagesSent', 'lastMessage', - 'action', + 'actions', ]; dataSource: MatTableDataSource<AdapterDescription> = diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts index e973068aeb..ac73e6c8b1 100644 --- a/ui/src/app/connect/connect.module.ts +++ b/ui/src/app/connect/connect.module.ts @@ -105,6 +105,7 @@ import { AdapterDetailsDataComponent } from './components/adapter-details/adapte import { EditRegexTransformationComponent } from './dialog/edit-event-property/components/edit-regex-transformation/edit-regex-transformation.component'; import { AdapterCodePanelComponent } from './components/adapter-code-panel/adapter-code-panel.component'; import { AdapterDetailsCodeComponent } from './components/adapter-details/adapter-details-code/adapter-details-code.component'; +import { TranslatePipe } from '@ngx-translate/core'; @NgModule({ imports: [ @@ -195,6 +196,7 @@ import { AdapterDetailsCodeComponent } from './components/adapter-details/adapte }, ]), SharedUiModule, + TranslatePipe, ], exports: [ErrorMessageComponent], declarations: [ diff --git a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html index 72f7db226d..2814907bd6 100644 --- a/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html +++ b/ui/src/app/dashboard/components/overview/dashboard-overview-table/dashboard-overview-table.component.html @@ -30,21 +30,13 @@ (rowClicked)="onRowClicked($event)" > <ng-container matColumnDef="name"> - <th - fxFlex="40" - fxLayoutAlign="start center" - mat-header-cell - *matHeaderCellDef - > + <th mat-header-cell *matHeaderCellDef> {{ 'Dashboards' | translate }} </th> <td - fxFlex="40" - fxLayoutAlign="center start" mat-cell data-cy="dashboard-table-overview" *matCellDef="let element" - fxLayout="column" > <div> <b>{{ element.name }}</b> @@ -56,19 +48,10 @@ </ng-container> <ng-container matColumnDef="lastModified"> - <th - fxLayoutAlign="start center" - mat-header-cell - *matHeaderCellDef - > + <th mat-header-cell *matHeaderCellDef> {{ 'Last modified' | translate }} </th> - <td - fxLayoutAlign="center start" - mat-cell - *matCellDef="let element" - fxLayout="column" - > + <td mat-cell *matCellDef="let element"> <div *ngIf="element.metadata"> {{ this.formatDate( @@ -81,19 +64,10 @@ </ng-container> <ng-container matColumnDef="createdAt"> - <th - fxLayoutAlign="start center" - mat-header-cell - *matHeaderCellDef - > + <th mat-header-cell *matHeaderCellDef> {{ 'Created' | translate }} </th> - <td - fxLayoutAlign="center start" - mat-cell - *matCellDef="let element" - fxLayout="column" - > + <td mat-cell *matCellDef="let element"> <div *ngIf="element.metadata"> {{ this.formatDate(element.metadata.createdAtEpochMs) }} </div> diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.html index 6857516236..49dfcc98ab 100644 --- a/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.html +++ b/ui/src/app/data-explorer/components/overview/data-explorer-overview-table/data-explorer-overview-table.component.html @@ -25,19 +25,15 @@ fxFlex="100" [columns]="displayedColumns" [dataSource]="dataSource" + [showActionsMenu]="true" + [rowsClickable]="true" + (rowClicked)="openDataView($event, true)" > <ng-container matColumnDef="name"> - <th - fxFlex="60" - fxLayoutAlign="start center" - mat-header-cell - *matHeaderCellDef - > + <th mat-header-cell *matHeaderCellDef> {{ 'Chart' | translate }} </th> <td - fxFlex="60" - fxLayoutAlign="start center" mat-cell data-cy="data-views-table-overview" *matCellDef="let element" @@ -47,21 +43,10 @@ </ng-container> <ng-container matColumnDef="lastModified"> - <th - fxFlex="60" - fxLayoutAlign="start center" - mat-header-cell - *matHeaderCellDef - > + <th mat-header-cell *matHeaderCellDef> {{ 'Last modified' | translate }} </th> - <td - fxFlex="60" - fxLayoutAlign="center start" - mat-cell - *matCellDef="let element" - fxLayout="column" - > + <td mat-cell *matCellDef="let element"> <div *ngIf="element.metadata"> {{ this.formatDate( @@ -74,21 +59,10 @@ </ng-container> <ng-container matColumnDef="createdAt"> - <th - fxFlex="60" - fxLayoutAlign="start center" - mat-header-cell - *matHeaderCellDef - > + <th mat-header-cell *matHeaderCellDef> {{ 'Created' | translate }} </th> - <td - fxFlex="60" - fxLayoutAlign="center start" - mat-cell - *matCellDef="let element" - fxLayout="column" - > + <td mat-cell *matCellDef="let element"> <div *ngIf="element.metadata"> {{ this.formatDate(element.metadata.createdAtEpochMs) }} </div> @@ -96,78 +70,56 @@ </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" + <ng-template spTableActions let-element> + <button mat-menu-item (click)="openDataView(element, false)"> + <mat-icon>visibility</mat-icon> + <span>{{ 'Show' | translate }}</span> + </button> + <button + mat-menu-item + *ngIf="hasDataExplorerWritePrivileges" + [attr.data-cy]=" + 'edit-data-view-' + + element.baseAppearanceConfig.widgetTitle.replaceAll( + ' ', + '' + ) + " + (click)="openDataView(element, true)" > - <div fxLayout="row" fxFlex="100" fxLayoutAlign="end center"> - <button - mat-icon-button - color="accent" - [matTooltip]="'Show chart' | translate" - (click)="openDataView(element, false)" - > - <i class="material-icons">visibility</i> - </button> - <button - mat-icon-button - color="accent" - [matTooltip]="'Edit chart' | translate" - *ngIf="hasDataExplorerWritePrivileges" - [attr.data-cy]=" - 'edit-data-view-' + - element.baseAppearanceConfig.widgetTitle.replaceAll( - ' ', - '' - ) - " - (click)="openDataView(element, true)" - > - <i class="material-icons">edit</i> - </button> - <button - mat-icon-button - color="accent" - [matTooltip]="'Manage permissions' | translate" - *ngIf="isAdmin" - (click)="showPermissionsDialog(element)" - > - <i class="material-icons">share</i> - </button> - <button - mat-icon-button - color="accent" - [matTooltip]="'Clone chart' | translate" - *ngIf="hasDataExplorerWritePrivileges" - (click)="cloneDataView(element)" - > - <i class="material-icons">flip_to_front</i> - </button> - <button - mat-icon-button - color="accent" - [matTooltip]="'Delete chart' | translate" - *ngIf="hasDataExplorerWritePrivileges" - [attr.data-cy]=" - 'delete-data-view-' + - element.baseAppearanceConfig.widgetTitle - " - (click)="deleteDataView(element)" - > - <i class="material-icons">delete</i> - </button> - </div> - </td> - </ng-container> + <mat-icon>edit</mat-icon> + <span>{{ 'Edit chart' | translate }}</span> + </button> + <button + mat-menu-item + *ngIf="isAdmin" + (click)="showPermissionsDialog(element)" + > + <mat-icon>share</mat-icon> + <span>{{ 'Manage permissions' | translate }}</span> + </button> + <button + mat-menu-item + *ngIf="hasDataExplorerWritePrivileges" + (click)="cloneDataView(element)" + > + <mat-icon>flip_to_front</mat-icon> + <span>{{ 'Clone chart' | translate }}</span> + </button> + <button + mat-menu-item + [matTooltip]="" + *ngIf="hasDataExplorerWritePrivileges" + [attr.data-cy]=" + 'delete-data-view-' + + element.baseAppearanceConfig.widgetTitle + " + (click)="deleteDataView(element)" + > + <mat-icon>delete</mat-icon> + <span>{{ 'Delete chart' | translate }}</span> + </button> + </ng-template> </sp-table> </div> </div> diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html index 9af05bbb05..b8137d0644 100644 --- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html +++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html @@ -19,6 +19,11 @@ <sp-table [dataSource]="dataSource" [columns]="displayedColumns" + [showActionsMenu]="true" + [rowsClickable]="true" + (rowClicked)=" + pipelineOperationsService.showPipelineDetails($event.elementId) + " matSort data-cy="all-pipelines-table" > @@ -58,7 +63,10 @@ class="ml-10" mat-icon-button [disabled]="!hasPipelineWritePrivileges" - (click)="openPipelineNotificationsDialog(pipeline)" + (click)=" + openPipelineNotificationsDialog(pipeline); + $event.stopPropagation() + " *ngIf="pipeline.pipelineNotifications.length > 0" matTooltip="{{ pipeline.pipelineNotifications.length @@ -95,44 +103,50 @@ <ng-container matColumnDef="start"> <th mat-header-cell *matHeaderCellDef>{{ 'Start' | translate }}</th> <td mat-cell *matCellDef="let pipeline"> - <button - color="accent" - mat-icon-button - [matTooltip]="'Start pipeline' | translate" - matTooltipPosition="above" - data-cy="start-pipeline-button" - (click)=" - pipelineOperationsService.startPipeline( - pipeline._id, - refreshPipelinesEmitter, - toggleRunningOperation - ) - " - [disabled]=" - !hasPipelineWritePrivileges || starting || !pipeline.valid - " - *ngIf="!pipeline.running" - > - <i class="material-icons">play_arrow</i> - </button> - <button - color="accent" - mat-icon-button - [matTooltip]="'Stop pipeline' | translate" - matTooltipPosition="above" - data-cy="stop-pipeline-button" - (click)=" - pipelineOperationsService.stopPipeline( - pipeline._id, - refreshPipelinesEmitter, - toggleRunningOperation - ) - " - [disabled]="!hasPipelineWritePrivileges || stopping" - *ngIf="pipeline.running" - > - <i class="material-icons">stop</i> - </button> + <div fxLayoutAlign="start start"> + <button + color="accent" + mat-icon-button + [matTooltip]="'Start pipeline' | translate" + matTooltipPosition="above" + data-cy="start-pipeline-button" + (click)=" + pipelineOperationsService.startPipeline( + pipeline._id, + refreshPipelinesEmitter, + toggleRunningOperation + ); + $event.stopPropagation() + " + [disabled]=" + !hasPipelineWritePrivileges || + starting || + !pipeline.valid + " + *ngIf="!pipeline.running" + > + <i class="material-icons">play_arrow</i> + </button> + <button + color="accent" + mat-icon-button + [matTooltip]="'Stop pipeline' | translate" + matTooltipPosition="above" + data-cy="stop-pipeline-button" + (click)=" + pipelineOperationsService.stopPipeline( + pipeline._id, + refreshPipelinesEmitter, + toggleRunningOperation + ); + $event.stopPropagation() + " + [disabled]="!hasPipelineWritePrivileges || stopping" + *ngIf="pipeline.running" + > + <i class="material-icons">stop</i> + </button> + </div> </td> </ng-container> @@ -140,11 +154,9 @@ <th mat-header-cell mat-sort-header *matHeaderCellDef> {{ 'Name' | translate }} </th> - <td mat-cell *matCellDef="let pipeline"> - <div> + <td mat-cell *matCellDef="let pipeline" class="truncate"> + <div fxLayout="column" fxLayoutAlign="start start"> <b>{{ pipeline.name }}</b> - </div> - <div> <small> {{ pipeline.description }}</small> </div> </td> @@ -159,68 +171,115 @@ </td> </ng-container> - <ng-container matColumnDef="action"> - <th mat-header-cell *matHeaderCellDef></th> - <td mat-cell *matCellDef="let pipeline"> - <div fxLayout="row" fxLayoutAlign="end center"> - <button - mat-icon-button - [matTooltip]="'Show pipeline' | translate" - matTooltipPosition="above" - (click)=" - pipelineOperationsService.showPipelineDetails( - pipeline._id - ) - " - > - <i class="material-icons">search</i> - </button> - <button - color="accent" - mat-icon-button - [matTooltip]="'Modify pipeline' | translate" - matTooltipPosition="above" - *ngIf="hasPipelineWritePrivileges" - (click)=" - pipelineOperationsService.modifyPipeline(pipeline._id) - " - data-cy="modify-pipeline-btn" - > - <i class="material-icons">mode_edit</i> - </button> - <button - color="accent" - mat-icon-button - [matTooltip]="'Permissions' | translate" - matTooltipPosition="above" - *ngIf="isAdmin" - (click)=" - pipelineOperationsService.showPermissionsDialog( - pipeline, - refreshPipelinesEmitter - ) - " - data-cy="open-manage-permissions" - > - <i class="material-icons">share</i> - </button> - <button - color="accent" - mat-icon-button - [matTooltip]="'Delete pipeline' | translate" - matTooltipPosition="above" - *ngIf="hasPipelineWritePrivileges" - (click)=" - pipelineOperationsService.showDeleteDialog( - pipeline, - refreshPipelinesEmitter - ) - " - data-cy="delete-pipeline" - > - <i class="material-icons">delete</i> - </button> - </div> - </td> - </ng-container> + <ng-template spTableActions let-element> + <button + mat-menu-item + (click)="pipelineOperationsService.showPipelineDetails(element._id)" + > + <mat-icon>search</mat-icon> + <span>{{ 'Show' | translate }}</span> + </button> + <button + mat-menu-item + *ngIf="hasPipelineWritePrivileges" + (click)="pipelineOperationsService.modifyPipeline(element._id)" + data-cy="modify-pipeline-btn" + > + <mat-icon>mode_edit</mat-icon> + <span>{{ 'Edit' | translate }}</span> + </button> + <button + mat-menu-item + *ngIf="isAdmin" + (click)=" + pipelineOperationsService.showPermissionsDialog( + element, + refreshPipelinesEmitter + ) + " + data-cy="open-manage-permissions" + > + <mat-icon>share</mat-icon> + <span>{{ 'Manage permissions' | translate }}</span> + </button> + <button + mat-menu-item + *ngIf="hasPipelineWritePrivileges" + (click)=" + pipelineOperationsService.showDeleteDialog( + element, + refreshPipelinesEmitter + ) + " + data-cy="delete-pipeline" + > + <mat-icon>delete</mat-icon> + <span>{{ 'Delete' | translate }}</span> + </button> + </ng-template> + + <!-- <ng-container matColumnDef="action">--> + <!-- <th mat-header-cell *matHeaderCellDef></th>--> + <!-- <td mat-cell *matCellDef="let pipeline">--> + <!-- <div fxLayout="row" fxLayoutAlign="end center">--> + <!-- <button--> + <!-- mat-icon-button--> + <!-- [matTooltip]="'Show pipeline' | translate"--> + <!-- matTooltipPosition="above"--> + <!-- (click)="--> + <!-- pipelineOperationsService.showPipelineDetails(--> + <!-- pipeline._id--> + <!-- )--> + <!-- "--> + <!-- >--> + <!-- <i class="material-icons">search</i>--> + <!-- </button>--> + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- [matTooltip]="'Modify pipeline' | translate"--> + <!-- matTooltipPosition="above"--> + <!-- *ngIf="hasPipelineWritePrivileges"--> + <!-- (click)="--> + <!-- pipelineOperationsService.modifyPipeline(pipeline._id)--> + <!-- "--> + <!-- data-cy="modify-pipeline-btn"--> + <!-- >--> + <!-- <i class="material-icons">mode_edit</i>--> + <!-- </button>--> + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- [matTooltip]="'Permissions' | translate"--> + <!-- matTooltipPosition="above"--> + <!-- *ngIf="isAdmin"--> + <!-- (click)="--> + <!-- pipelineOperationsService.showPermissionsDialog(--> + <!-- pipeline,--> + <!-- refreshPipelinesEmitter--> + <!-- )--> + <!-- "--> + <!-- data-cy="open-manage-permissions"--> + <!-- >--> + <!-- <i class="material-icons">share</i>--> + <!-- </button>--> + <!-- <button--> + <!-- color="accent"--> + <!-- mat-icon-button--> + <!-- [matTooltip]="'Delete pipeline' | translate"--> + <!-- matTooltipPosition="above"--> + <!-- *ngIf="hasPipelineWritePrivileges"--> + <!-- (click)="--> + <!-- pipelineOperationsService.showDeleteDialog(--> + <!-- pipeline,--> + <!-- refreshPipelinesEmitter--> + <!-- )--> + <!-- "--> + <!-- data-cy="delete-pipeline"--> + <!-- >--> + <!-- <i class="material-icons">delete</i>--> + <!-- </button>--> + <!-- </div>--> + <!-- </td>--> + <!-- </ng-container>--> </sp-table> diff --git a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts index d99c1019ed..aadc7548eb 100644 --- a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts +++ b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.ts @@ -53,7 +53,7 @@ export class PipelineOverviewComponent implements OnInit, OnDestroy { 'start', 'name', 'lastModified', - 'action', + 'actions', ]; dataSource: MatTableDataSource<Pipeline>; diff --git a/ui/src/app/pipelines/pipelines.module.ts b/ui/src/app/pipelines/pipelines.module.ts index 6a5fc3223b..c3e263a273 100644 --- a/ui/src/app/pipelines/pipelines.module.ts +++ b/ui/src/app/pipelines/pipelines.module.ts @@ -48,6 +48,7 @@ import { MatDividerModule } from '@angular/material/divider'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatIconModule } from '@angular/material/icon'; import { TranslateModule } from '@ngx-translate/core'; +import { MatMenuItem } from '@angular/material/menu'; @NgModule({ imports: [ @@ -100,6 +101,7 @@ import { TranslateModule } from '@ngx-translate/core'; ], }, ]), + MatMenuItem, ], declarations: [ DeletePipelineDialogComponent, diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss index 652fc08018..474e00fce5 100644 --- a/ui/src/scss/sp/main.scss +++ b/ui/src/scss/sp/main.scss @@ -19,6 +19,12 @@ @use './variables' as spThemeVars; @use '../custom-theme/custom-variables' as customThemeVars; +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + md-progress-linear.md-accent .md-container { background-color: rgb(168, 168, 168); }
