feat(#3810): Support cloning of dashboards (#3811)

Co-authored-by: Philipp Zehnder <tenthe@users.noreply.github.com>

Author: dominikriemer

streampipes-model/src/main/java/org/apache/streampipes/model/dashboard/DashboardModel.java

@@ -45,6 +45,7 @@ public class DashboardModel implements Storable, SpResource {
   private String name;
   private String description;
   private boolean displayHeader;
+  private int gridColumns = 8;
 
   private Map<String, Object> dashboardTimeSettings;
   private Map<String, Object> dashboardGeneralSettings;
@@ -148,6 +149,10 @@ public void setDashboardLiveSettings(Map<String, Object> dashboardLiveSettings)
     this.dashboardLiveSettings = dashboardLiveSettings;
   }
 
+  public int getGridColumns() {
+    return gridColumns;
+  }
+
   @Override
   public ResourceMetadata getMetadata() {
     return metadata;

ui/cypress/support/utils/GeneralUtils.ts

@@ -20,4 +20,20 @@ export class GeneralUtils {
     public static tab(identifier: string) {
         return cy.dataCy(`tab-${identifier}`).click();
     }
+
+    public static openMenuForRow(rowText: string) {
+        cy.contains('[role="row"], tr, mat-row', rowText) // be flexible on row element
+            .scrollIntoView()
+            .within(() => {
+                // Hover the trigger to open the menu
+                cy.dataCy('more-options').trigger('mouseenter', {
+                    force: true,
+                });
+            });
+
+        // Wait for the CDK overlay panel to become visible
+        cy.get('.cdk-overlay-container .mat-mdc-menu-panel:visible').should(
+            'exist',
+        );
+    }
 }

ui/cypress/support/utils/datalake/DataLakeUtils.ts

@@ -25,6 +25,7 @@ import { ConnectUtils } from '../connect/ConnectUtils';
 import { ConnectBtns } from '../connect/ConnectBtns';
 import { AdapterBuilder } from '../../builder/AdapterBuilder';
 import { differenceInMonths } from 'date-fns';
+import { GeneralUtils } from '../GeneralUtils';
 
 export class DataLakeUtils {
     public static goToDatalake() {
@@ -174,8 +175,7 @@ export class DataLakeUtils {
     }
 
     public static editDashboard(dashboardName: string) {
-        // Click edit button
-        // following only works if single view is available
+        GeneralUtils.openMenuForRow(dashboardName);
         cy.dataCy('edit-dashboard-' + dashboardName).click();
     }
 
@@ -200,6 +200,7 @@ export class DataLakeUtils {
     }
 
     public static deleteDashboard(dashboardName: string) {
+        GeneralUtils.openMenuForRow(dashboardName);
         cy.dataCy('delete-dashboard-' + dashboardName, {
             timeout: 10000,
         }).click();
@@ -214,6 +215,7 @@ export class DataLakeUtils {
     }
 
     public static cancelDeleteDashboard(dashboardName: string) {
+        GeneralUtils.openMenuForRow(dashboardName);
         cy.dataCy('delete-dashboard-' + dashboardName, {
             timeout: 10000,
         }).click();
@@ -364,7 +366,7 @@ export class DataLakeUtils {
             .click();
     }
 
-    public static clickOrderBy(order: String) {
+    public static clickOrderBy(order: string) {
         if (order == 'ascending') {
             cy.dataCy('ascending-radio-button').click();
         } else {

ui/projects/streampipes/platform-services/src/lib/model/dashboard/dashboard.model.ts

@@ -52,6 +52,7 @@ export interface Dashboard {
     dashboardLiveSettings: DashboardLiveSettings;
     elementId?: string;
     metadata: ResourceMetadata;
+    gridColumns: number;
     rev?: string;
 }
 

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table-actions.directive.ts

@@ -0,0 +1,21 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Directive } from '@angular/core';
+@Directive({ selector: 'ng-template[spTableActions]', standalone: false })
+export class SpTableActionsDirective {}

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.html

@@ -20,8 +20,61 @@
     <table mat-table class="sp-table" [dataSource]="dataSource">
         <ng-content></ng-content>
 
+        @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
+                            [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 }
+                                "
+                            >
+                            </ng-container>
+                        </div>
+                    </mat-menu>
+                </td>
+            </ng-container>
+        }
+
         <tr mat-header-row *matHeaderRowDef="columns"></tr>
-        <tr mat-row *matRowDef="let row; columns: columns"></tr>
+        <tr
+            mat-row
+            *matRowDef="let row; columns: columns"
+            (click)="rowClicked.emit(row)"
+            [ngClass]="rowsClickable ? 'cursor-pointer' : ''"
+        ></tr>
 
         <tr class="mat-row" *matNoDataRow>
             <td

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.scss

@@ -28,3 +28,7 @@
     height: var(--mat-table-row-item-container-height, 52px);
     text-align: center;
 }
+
+.cursor-pointer {
+    cursor: pointer;
+}

ui/projects/streampipes/shared-ui/src/lib/components/sp-table/sp-table.component.ts

@@ -22,8 +22,11 @@ import {
     Component,
     ContentChild,
     ContentChildren,
+    EventEmitter,
     Input,
+    Output,
     QueryList,
+    TemplateRef,
     ViewChild,
 } from '@angular/core';
 import {
@@ -35,6 +38,8 @@ import {
     MatTableDataSource,
 } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
+import { SpTableActionsDirective } from './sp-table-actions.directive';
+import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
     selector: 'sp-table',
@@ -51,12 +56,20 @@ export class SpTableComponent<T> implements AfterViewInit, AfterContentInit {
     @ViewChild(MatTable, { static: true }) table: MatTable<T>;
 
     @Input() columns: string[];
+    @Input() rowsClickable = false;
+    @Input() showActionsMenu = false;
 
     @Input() dataSource: MatTableDataSource<T>;
 
+    @Output() rowClicked = new EventEmitter<T>();
+
     @ViewChild('paginator') paginator: MatPaginator;
+    @ContentChild(SpTableActionsDirective, { read: TemplateRef })
+    actionsTemplate?: TemplateRef<any>;
 
     pageSize = 1;
+    timedOutCloser: any;
+    trigger: MatMenuTrigger | undefined = undefined;
 
     ngAfterViewInit() {
         this.dataSource.paginator = this.paginator;
@@ -72,4 +85,22 @@ export class SpTableComponent<T> implements AfterViewInit, AfterContentInit {
         );
         this.table.setNoDataRow(this.noDataRow);
     }
+
+    mouseEnter(trigger) {
+        if (this.timedOutCloser) {
+            clearTimeout(this.timedOutCloser);
+        }
+        if (this.trigger !== undefined) {
+            this.trigger.closeMenu();
+        }
+        trigger.openMenu();
+        this.trigger = trigger;
+    }
+
+    mouseLeave(trigger) {
+        this.timedOutCloser = setTimeout(() => {
+            trigger.closeMenu();
+            this.trigger = undefined;
+        }, 50);
+    }
 }

ui/projects/streampipes/shared-ui/src/lib/shared-ui.module.ts

@@ -98,6 +98,7 @@ import { InputSchemaPropertyComponent } from './components/input-schema-panel/in
 import { MatExpansionModule } from '@angular/material/expansion';
 import { SortByRuntimeNamePipe } from './pipes/sort-by-runtime-name.pipe';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { SpTableActionsDirective } from './components/sp-table/sp-table-actions.directive';
 
 @NgModule({
     declarations: [
@@ -149,6 +150,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
         InputSchemaPanelComponent,
         InputSchemaPropertyComponent,
         SortByRuntimeNamePipe,
+        SpTableActionsDirective,
     ],
     imports: [
         CommonModule,
@@ -216,6 +218,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
         PipelineElementComponent,
         InputSchemaPanelComponent,
         SidebarResizeComponent,
+        SpTableActionsDirective,
     ],
 })
 export class SharedUiModule {}

ui/projects/streampipes/shared-ui/src/public-api.ts

@@ -42,6 +42,7 @@ export * from './lib/components/sp-exception-message/exception-details-dialog/ex
 export * from './lib/components/sp-exception-message/exception-details/exception-details.component';
 export * from './lib/components/sp-label/sp-label.component';
 export * from './lib/components/sp-table/sp-table.component';
+export * from './lib/components/sp-table/sp-table-actions.directive';
 export * from './lib/components/warning-box/warning-box.component';
 export * from './lib/components/time-selector/time-selector.model';
 export * from './lib/components/time-selector/time-range-selector.component';