From 465420e7bb3837fefde756c8c6515a2e5d62a9fd Mon Sep 17 00:00:00 2001
From: Maciej Bukalo <bukalom98@gmail.com>
Date: Fri, 18 Apr 2025 15:36:59 +0200
Subject: [PATCH] NIFI-14485 Add Process Group Column to Parameter Context page

Signed-off-by: Maciej Bukalo <bukalom98@gmail.com>
---
 .../parameter-context-table.component.html    | 10 +++++++++
 .../parameter-context-table.component.scss    |  2 +-
 .../parameter-context-table.component.ts      | 22 ++++++++++++++++---
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
index 44dce74ab8f8..12c50c81c200 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.html
@@ -54,6 +54,16 @@
                 </td>
             </ng-container>
 
+            <!-- Process Group Column -->
+            <ng-container matColumnDef="process groups">
+                <th mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header>Process Groups</th>
+                <td mat-cell *matCellDef="let item" [title]="formatProcessGroups(item)">
+                    {{ formatProcessGroups(item) }}
+                </td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef></th>
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.scss
index 08d3256a74f3..5cf03d8d2fa7 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.scss
@@ -18,7 +18,7 @@
 .parameter-context-table {
     .listing-table {
         .mat-column-name {
-            width: 25%;
+            width: 20%;
         }
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.ts
index 1eb808858714..babd16015efa 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.ts
@@ -21,7 +21,7 @@ import { MatSortModule, Sort } from '@angular/material/sort';
 import { NiFiCommon } from '@nifi/shared';
 import { FlowConfiguration } from '../../../../../state/flow-configuration';
 import { CurrentUser } from '../../../../../state/current-user';
-import { ParameterContextEntity } from '../../../../../state/shared';
+import {ParameterContext, ParameterContextEntity} from '../../../../../state/shared';
 import { MatIconButton } from '@angular/material/button';
 import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 import { RouterLink } from '@angular/router';
@@ -34,7 +34,7 @@ import { NgClass } from '@angular/common';
     imports: [MatTableModule, MatSortModule, MatIconButton, MatMenuTrigger, MatMenu, MatMenuItem, RouterLink, NgClass]
 })
 export class ParameterContextTable {
-    @Input() initialSortColumn: 'name' | 'provider' | 'description' = 'name';
+    @Input() initialSortColumn: 'name' | 'provider' | 'description' | 'process groups' = 'name';
     @Input() initialSortDirection: 'asc' | 'desc' = 'asc';
     activeSort: Sort = {
         active: this.initialSortColumn,
@@ -54,7 +54,7 @@ export class ParameterContextTable {
     @Output() deleteParameterContext: EventEmitter<ParameterContextEntity> = new EventEmitter<ParameterContextEntity>();
     @Output() manageAccessPolicies: EventEmitter<ParameterContextEntity> = new EventEmitter<ParameterContextEntity>();
 
-    displayedColumns: string[] = ['name', 'provider', 'description', 'actions'];
+    displayedColumns: string[] = ['name', 'provider', 'description', 'process groups', 'actions'];
     dataSource: MatTableDataSource<ParameterContextEntity> = new MatTableDataSource<ParameterContextEntity>();
 
     constructor(private nifiCommon: NiFiCommon) {}
@@ -86,6 +86,19 @@ export class ParameterContextTable {
         return this.canRead(entity) && entity.component ? entity.component.description : '';
     }
 
+    formatProcessGroups(entity: ParameterContextEntity): string {
+        return this.canRead(entity) && entity.component ? this.getHighLevelProcessGroups(entity.component) : '';
+    }
+
+    private getHighLevelProcessGroups(component: ParameterContext) : string {
+        const componentIds: string[] = component.boundProcessGroups.map(group => group.component.id)
+        const boundProcessGroupNames: string[] =  component.boundProcessGroups
+            .filter(group => !componentIds.includes(group.component.parentGroupId))
+            .map(group => group.component.name);
+
+        return boundProcessGroupNames.length <= 1 ? boundProcessGroupNames.toString() : boundProcessGroupNames.length.toString()
+    }
+
     editClicked(entity: ParameterContextEntity): void {
         this.editParameterContext.next(entity);
     }
@@ -157,6 +170,9 @@ export class ParameterContextTable {
                 case 'description':
                     retVal = this.nifiCommon.compareString(this.formatDescription(a), this.formatDescription(b));
                     break;
+                case 'process groups':
+                    retVal = this.nifiCommon.compareString(this.formatProcessGroups(a), this.formatProcessGroups(b))
+                    break;
                 default:
                     return 0;
             }