NIFI-11078: Adds Component UUID to Flow Configuration History Table (#8909)

This closes #8909

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

@@ -41,7 +41,7 @@
                 </td>
             </ng-container>
 
-            <!-- Name Column -->
+            <!-- Date/Time Column -->
             <ng-container matColumnDef="timestamp">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>
                     <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Date/Time</div>
@@ -51,6 +51,16 @@
                 </td>
             </ng-container>
 
+            <!-- Id Column -->
+            <ng-container matColumnDef="sourceId">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Id</div>
+                </th>
+                <td mat-cell *matCellDef="let item" [title]="formatID(item)">
+                    {{ formatID(item) }}
+                </td>
+            </ng-container>
+
             <!-- Name Column -->
             <ng-container matColumnDef="sourceName">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>
@@ -63,6 +73,7 @@
                 </td>
             </ng-container>
 
+            <!-- Type Column -->
             <ng-container matColumnDef="sourceType">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>
                     <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Type</div>
@@ -72,6 +83,7 @@
                 </td>
             </ng-container>
 
+            <!-- Operation Column -->
             <ng-container matColumnDef="operation">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>
                     <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Operation</div>
@@ -81,6 +93,7 @@
                 </td>
             </ng-container>
 
+            <!-- User Column -->
             <ng-container matColumnDef="userIdentity">
                 <th mat-header-cell *matHeaderCellDef mat-sort-header>
                     <div class="overflow-ellipsis overflow-hidden whitespace-nowrap">User</div>

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

@@ -30,7 +30,8 @@ import { ActionEntity } from '../../../state/flow-configuration-history-listing'
 })
 export class FlowConfigurationHistoryTable {
     @Input() selectedHistoryActionId: number | null = null;
-    @Input() initialSortColumn: 'timestamp' | 'sourceName' | 'sourceType' | 'operation' | 'userIdentity' = 'timestamp';
+    @Input() initialSortColumn: 'timestamp' | 'sourceId' | 'sourceName' | 'sourceType' | 'operation' | 'userIdentity' =
+        'timestamp';
     @Input() initialSortDirection: 'asc' | 'desc' = 'desc';
 
     @Input() set historyActions(historyActions: ActionEntity[]) {
@@ -48,7 +49,15 @@ export class FlowConfigurationHistoryTable {
         direction: this.initialSortDirection
     };
 
-    displayedColumns: string[] = ['moreDetails', 'timestamp', 'sourceName', 'sourceType', 'operation', 'userIdentity'];
+    displayedColumns: string[] = [
+        'moreDetails',
+        'timestamp',
+        'sourceId',
+        'sourceName',
+        'sourceType',
+        'operation',
+        'userIdentity'
+    ];
     dataSource: MatTableDataSource<ActionEntity> = new MatTableDataSource<ActionEntity>();
 
     constructor() {}
@@ -76,6 +85,10 @@ export class FlowConfigurationHistoryTable {
         return this.format(item, 'timestamp');
     }
 
+    formatID(item: ActionEntity): string {
+        return this.format(item, 'sourceId');
+    }
+
     formatName(item: ActionEntity): string {
         return this.format(item, 'sourceName');
     }

nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/history/nf-history-table.js

@@ -333,6 +333,14 @@
                 resizable: true,
                 formatter: valueFormatter
             },
+            {
+                id: 'id',
+                name: 'Id',
+                field: 'sourceId',
+                sortable: true,
+                resizable: true,
+                formatter: valueFormatter
+            },
             {
                 id: 'sourceName',
                 name: 'Name',