From 89f153aad81104b4b523ef9cdfcfe0a8df6b0f4b Mon Sep 17 00:00:00 2001
From: Scott Aslan <scottyaslan@users.noreply.github.com>
Date: Tue, 4 Jun 2024 08:58:32 -0400
Subject: [PATCH] [NIFI-13355] move view cluster details and view flow
 configuration details into action kebab menus (#8921)

This closes #8921
---
 .../cluster-node-table.component.html         | 17 ++------
 .../cluster-node-table.component.scss         |  4 --
 .../cluster-node-table.component.ts           | 10 +----
 ...configuration-history-table.component.html | 40 +++++++++++--------
 ...configuration-history-table.component.scss |  4 --
 ...w-configuration-history-table.component.ts |  8 ++--
 6 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
index c4dc19d1d6..ee2f4079ea 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
@@ -36,19 +36,6 @@
                             (matSortChange)="sortData($event)"
                             [matSortActive]="initialSortColumn"
                             [matSortDirection]="initialSortDirection">
-                            <!-- More Details Column -->
-                            <ng-container matColumnDef="moreDetails">
-                                <th mat-header-cell *matHeaderCellDef></th>
-                                <td mat-cell *matCellDef="let item">
-                                    <div class="flex items-center gap-x-2">
-                                        <div
-                                            class="pointer fa fa-info-circle primary-color"
-                                            (click)="moreDetail(item)"
-                                            title="Detail"></div>
-                                    </div>
-                                </td>
-                            </ng-container>
-
                             <!-- Node Address -->
                             <ng-container matColumnDef="address">
                                 <th mat-header-cell *matHeaderCellDef mat-sort-header title="Node Address">
@@ -161,6 +148,10 @@
                                             </button>
                                         }
                                         <mat-menu #actionMenu="matMenu" xPosition="before">
+                                            <button mat-menu-item (click)="moreDetail(item)">
+                                                <i class="fa fa-info-circle primary-color mr-2"></i>
+                                                Detail
+                                            </button>
                                             @if (item.status === 'CONNECTED' || item.status === 'CONNECTING') {
                                                 <button mat-menu-item (click)="disconnect(item)">
                                                     <i class="fa fa-power-off primary-color mr-2"></i>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.scss
index 96d3c4cc62..86b5033e82 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.scss
@@ -18,10 +18,6 @@
 .cluster-node-table {
     .listing-table {
         table {
-            .mat-column-moreDetails {
-                width: 32px;
-            }
-
             .mat-column-address {
                 width: 25%;
             }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.ts
index 75ecc500f4..1a6ea0965b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.ts
@@ -80,15 +80,7 @@ export class ClusterNodeTable extends ClusterTable<ClusterNode> {
         { key: 'status', label: 'Status' }
     ];
 
-    displayedColumns: string[] = [
-        'moreDetails',
-        'address',
-        'activeThreadCount',
-        'queued',
-        'status',
-        'nodeStartTime',
-        'heartbeat'
-    ];
+    displayedColumns: string[] = ['address', 'activeThreadCount', 'queued', 'status', 'nodeStartTime', 'heartbeat'];
 
     constructor(private nifiCommon: NiFiCommon) {
         super();
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
index ebb3623dcf..ab3165762b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
@@ -25,22 +25,6 @@
             (matSortChange)="sortData($event)"
             [matSortActive]="initialSortColumn"
             [matSortDirection]="initialSortDirection">
-            <ng-container matColumnDef="moreDetails">
-                <th mat-header-cell *matHeaderCellDef></th>
-                <td mat-cell *matCellDef="let item">
-                    <ng-container>
-                        <div class="flex items-center gap-x-2">
-                            @if (canRead(item)) {
-                                <div
-                                    class="pointer fa fa-info-circle primary-color"
-                                    title="View Details"
-                                    (click)="moreDetails(item)"></div>
-                            }
-                        </div>
-                    </ng-container>
-                </td>
-            </ng-container>
-
             <!-- Date/Time Column -->
             <ng-container matColumnDef="timestamp">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>
@@ -103,6 +87,30 @@
                 </td>
             </ng-container>
 
+            <!-- Actions Column -->
+            <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let item">
+                    <div class="flex items-center justify-end gap-x-2">
+                        <button
+                            mat-icon-button
+                            type="button"
+                            [matMenuTriggerFor]="actionMenu"
+                            class="h-16 w-16 flex items-center justify-center icon global-menu">
+                            <i class="fa fa-ellipsis-v"></i>
+                        </button>
+                        <mat-menu #actionMenu="matMenu" xPosition="before">
+                            @if (canRead(item)) {
+                                <button mat-menu-item (click)="moreDetails(item)">
+                                    <i class="fa fa-info-circle primary-color mr-2"></i>
+                                    View Details
+                                </button>
+                            }
+                        </mat-menu>
+                    </div>
+                </td>
+            </ng-container>
+
             <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
             <tr
                 mat-row
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.scss
index e72e6524cb..f91022dade 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.scss
@@ -17,10 +17,6 @@
 
 .flow-configuration-history-table {
     .listing-table {
-        .mat-column-moreDetails {
-            width: 32px;
-        }
-
         .mat-column-sourceName {
             width: 25%;
         }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.ts
index fc57b4149e..389ed26b0d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.ts
@@ -20,11 +20,13 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSortModule, Sort } from '@angular/material/sort';
 import { ActionEntity } from '../../../state/flow-configuration-history-listing';
+import { MatIconButton } from '@angular/material/button';
+import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
     selector: 'flow-configuration-history-table',
     standalone: true,
-    imports: [MatTableModule, MatSortModule],
+    imports: [MatTableModule, MatSortModule, MatIconButton, MatMenu, MatMenuTrigger, MatMenuItem],
     templateUrl: './flow-configuration-history-table.component.html',
     styleUrls: ['./flow-configuration-history-table.component.scss']
 })
@@ -50,13 +52,13 @@ export class FlowConfigurationHistoryTable {
     };
 
     displayedColumns: string[] = [
-        'moreDetails',
         'timestamp',
         'sourceId',
         'sourceName',
         'sourceType',
         'operation',
-        'userIdentity'
+        'userIdentity',
+        'actions'
     ];
     dataSource: MatTableDataSource<ActionEntity> = new MatTableDataSource<ActionEntity>();