NIFI-14485 Add Bounded Process Group Column to Parameter Context page

Signed-off-by: Maciej Bukalo <[email protected]>

Author: buczi

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>
 
+            <!-- Bounded Process Group Column -->
+            <ng-container matColumnDef="bounded process group">
+                <th mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header>Bounded Process Group</th>
+                <td mat-cell *matCellDef="let item" [title]="formatBoundedProcessGroups(item)">
+                    {{ formatBoundedProcessGroups(item) }}
+                </td>
+            </ng-container>
+
             <!-- Actions Column -->
             <ng-container matColumnDef="actions">
                 <th mat-header-cell *matHeaderCellDef></th>

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%;
         }
     }
 }

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' | 'bounded process group' = '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', 'bounded process group', '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 : '';
     }
 
+    formatBoundedProcessGroups(entity: ParameterContextEntity): string {
+        return this.canRead(entity) && entity.component ? this.getHighLevelParameterContexts(entity.component) : '';
+    }
+
+    private getHighLevelParameterContexts(component: ParameterContext) {
+        const componentIds: string[] = component.boundProcessGroups.map(group => group.component.id)
+        const boundedProcessGroupNames: string[] =  component.boundProcessGroups
+            .filter(group => !componentIds.includes(group.component.parentGroupId))
+            .map(group => group.component.name);
+
+        return boundedProcessGroupNames.length <= 1 ? boundedProcessGroupNames.toString() : '(shared)'
+    }
+
     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 'bounded process group':
+                    retVal = this.nifiCommon.compareString(this.formatBoundedProcessGroups(a), this.formatBoundedProcessGroups(b))
+                    break;
                 default:
                     return 0;
             }