cluster summary dialogs

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html

@@ -25,11 +25,45 @@ <h2 mat-dialog-title>Cluster {{ componentType }} Summary</h2>
                 [name]="componentHelper.getName()"
                 [id]="componentId"></component-context>
             <div class="flex flex-1 flex-col cluster-summary-table-container">
-                @if (clusterStatusEntity?.processorStatus?.nodeSnapshots) {
-                    <processor-cluster-table
-                        [components]="clusterStatusEntity?.processorStatus?.nodeSnapshots || []"
-                        initialSortColumn="node"
-                        initialSortDirection="asc"></processor-cluster-table>
+                @switch (componentType) {
+                    @case (ComponentType.Processor) {
+                        <processor-cluster-table
+                            [components]="clusterStatusEntity?.processorStatus?.nodeSnapshots || []"
+                            initialSortColumn="node"
+                            initialSortDirection="asc"></processor-cluster-table>
+                    }
+                    @case (ComponentType.InputPort) {
+                        <port-cluster-table
+                            [components]="clusterStatusEntity?.portStatus?.nodeSnapshots || []"
+                            portType="input"
+                            initialSortColumn="node"
+                            initialSortDirection="asc"></port-cluster-table>
+                    }
+                    @case (ComponentType.OutputPort) {
+                        <port-cluster-table
+                            [components]="clusterStatusEntity?.portStatus?.nodeSnapshots || []"
+                            portType="output"
+                            initialSortColumn="node"
+                            initialSortDirection="asc"></port-cluster-table>
+                    }
+                    @case (ComponentType.RemoteProcessGroup) {
+                        <remote-process-group-cluster-table
+                            [components]="clusterStatusEntity?.remoteProcessGroupStatus?.nodeSnapshots || []"
+                            initialSortColumn="node"
+                            initialSortDirection="asc"></remote-process-group-cluster-table>
+                    }
+                    @case (ComponentType.Connection) {
+                        <connection-cluster-table
+                            [components]="clusterStatusEntity?.connectionStatus?.nodeSnapshots || []"
+                            initialSortColumn="node"
+                            initialSortDirection="asc"></connection-cluster-table>
+                    }
+                    @case (ComponentType.ProcessGroup) {
+                        <process-group-cluster-table
+                            [components]="clusterStatusEntity?.processGroupStatus?.nodeSnapshots || []"
+                            initialSortColumn="node"
+                            initialSortDirection="asc"></process-group-cluster-table>
+                    }
                 }
             </div>
         </div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.spec.ts

@@ -23,6 +23,7 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { initialComponentClusterStatusState } from '../../../state/component-cluster-status/component-cluster-status.reducer';
 import { ComponentClusterStatusRequest, ComponentClusterStatusState } from '../../../state/component-cluster-status';
 import { ComponentType } from '../../../../../state/shared';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ClusterSummaryDialog', () => {
     let component: ClusterSummaryDialog;
@@ -33,7 +34,7 @@ describe('ClusterSummaryDialog', () => {
     };
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [ClusterSummaryDialog, MatDialogModule],
+            imports: [ClusterSummaryDialog, MatDialogModule, NoopAnimationsModule],
             providers: [
                 {
                     provide: MAT_DIALOG_DATA,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.ts

@@ -43,6 +43,10 @@ import { Store } from '@ngrx/store';
 import * as ClusterStatusActions from '../../../state/component-cluster-status/component-cluster-status.actions';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ProcessorClusterTable } from './processor-cluster-table/processor-cluster-table.component';
+import { PortClusterTable } from './port-cluster-table/port-cluster-table.component';
+import { RemoteProcessGroupClusterTable } from './remote-process-group-cluster-table/remote-process-group-cluster-table.component';
+import { ConnectionClusterTable } from './connection-cluster-table/connection-cluster-table.component';
+import { ProcessGroupClusterTable } from './process-group-cluster-table/process-group-cluster-table.component';
 
 interface Helper {
     getName: () => string;
@@ -60,7 +64,11 @@ interface Helper {
         ComponentContext,
         MatPaginator,
         AsyncPipe,
-        ProcessorClusterTable
+        ProcessorClusterTable,
+        PortClusterTable,
+        RemoteProcessGroupClusterTable,
+        ConnectionClusterTable,
+        ProcessGroupClusterTable
     ],
     templateUrl: './cluster-summary-dialog.component.html',
     styleUrl: './cluster-summary-dialog.component.scss'
@@ -127,4 +135,6 @@ export class ClusterSummaryDialog {
             })
         );
     }
+
+    protected readonly ComponentType = ComponentType;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/component-cluster-table/component-cluster-table.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { MultiSort } from '../../index';
 import { MatSortModule, Sort, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -26,7 +26,7 @@ import { NodeStatusSnapshot } from '../../../../state';
     imports: [MatTableModule, MatSortModule],
     template: ''
 })
-export abstract class ComponentClusterTable<T extends NodeStatusSnapshot> {
+export abstract class ComponentClusterTable<T extends NodeStatusSnapshot> implements OnChanges {
     private _initialSortColumn!: string;
     private _initialSortDirection: SortDirection = 'asc';
 
@@ -62,12 +62,21 @@ export abstract class ComponentClusterTable<T extends NodeStatusSnapshot> {
 
     abstract supportsMultiValuedSort(sort: Sort): boolean;
 
-    @Input({}) set components(components: T[]) {
+    @Input() components: T[] = [];
+    private setComponents(components: T[]) {
         if (components) {
             this.dataSource.data = this.sortEntities(components, this.multiSort);
         }
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        // Due to the generic nature of the component, handle the changes to the components in ngOnChanges
+        // rather than in a setter. This avoids IDE reporting @Input types cannot be converted to T[].
+        if (changes['components'].currentValue !== changes['components'].previousValue) {
+            this.setComponents(changes['components'].currentValue);
+        }
+    }
+
     sortData(sort: Sort) {
         this.setMultiSort(sort);
         this.dataSource.data = this.sortEntities(this.dataSource.data, sort);

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html

@@ -0,0 +1,130 @@
+<!--
+  ~ 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.
+  -->
+
+<div class="connection-cluster-table flex flex-1 h-full">
+    <div class="listing-table overflow-y-auto border flex-1">
+        <table
+            mat-table
+            [dataSource]="dataSource"
+            matSort
+            matSortDisableClear
+            (matSortChange)="sortData($event)"
+            [matSortActive]="initialSortColumn"
+            [matSortDirection]="initialSortDirection">
+            <!-- Node Column -->
+            <ng-container matColumnDef="node">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header>
+                    <div class="flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap">Node</div>
+                </th>
+                <td mat-cell *matCellDef="let item" [title]="formatNode(item)">
+                    <div>{{ formatNode(item) }}</div>
+                </td>
+            </ng-container>
+
+            <!-- Queue column -->
+            <ng-container matColumnDef="queue">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header title="Count / data size in the last 5 minutes">
+                    <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1">
+                        <span [ngClass]="{ underline: multiSort.active === 'queue' && multiSort.sortValueIndex === 0 }"
+                            >Queue</span
+                        >
+                        <span [ngClass]="{ underline: multiSort.active === 'queue' && multiSort.sortValueIndex === 1 }"
+                            >(Size)</span
+                        >
+                        <span class="font-light">5 min</span>
+                    </div>
+                </th>
+                <td mat-cell *matCellDef="let item" [title]="formatQueue(item)">
+                    {{ formatQueue(item) }}
+                </td>
+            </ng-container>
+
+            <!-- Threshold column -->
+            <ng-container matColumnDef="threshold">
+                <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    title="Percent of threshold used for count and data size">
+                    <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1">
+                        <span>Threshold %:</span>
+                        <span
+                            [ngClass]="{
+                                underline: multiSort.active === 'threshold' && multiSort.sortValueIndex === 0
+                            }"
+                            >Queue</span
+                        >
+                        <span>|</span>
+                        <span
+                            [ngClass]="{
+                                underline: multiSort.active === 'threshold' && multiSort.sortValueIndex === 1
+                            }"
+                            >Size</span
+                        >
+                    </div>
+                </th>
+                <td mat-cell *matCellDef="let item" [title]="formatThreshold(item)">
+                    {{ formatThreshold(item) }}
+                </td>
+            </ng-container>
+
+            <!-- Input column -->
+            <ng-container matColumnDef="in">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header title="Count / data size in the last 5 minutes">
+                    <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1">
+                        <span [ngClass]="{ underline: multiSort.active === 'in' && multiSort.sortValueIndex === 0 }"
+                            >In</span
+                        >
+                        <span [ngClass]="{ underline: multiSort.active === 'in' && multiSort.sortValueIndex === 1 }"
+                            >(Size)</span
+                        >
+                        <span class="font-light">5 min</span>
+                    </div>
+                </th>
+                <td mat-cell *matCellDef="let item" [title]="formatIn(item)">
+                    {{ formatIn(item) }}
+                </td>
+            </ng-container>
+
+            <!-- Output column -->
+            <ng-container matColumnDef="out">
+                <th mat-header-cell *matHeaderCellDef mat-sort-header title="Count / data size in the last 5 minutes">
+                    <div class="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap space-x-1">
+                        <span [ngClass]="{ underline: multiSort.active === 'out' && multiSort.sortValueIndex === 0 }"
+                            >Out</span
+                        >
+                        <span [ngClass]="{ underline: multiSort.active === 'out' && multiSort.sortValueIndex === 1 }"
+                            >(Size)</span
+                        >
+                        <span class="font-light">5 min</span>
+                    </div>
+                </th>
+                <td mat-cell *matCellDef="let item" [title]="formatOut(item)">
+                    {{ formatOut(item) }}
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+            <tr
+                mat-row
+                *matRowDef="let row; let even = even; columns: displayedColumns"
+                [class.even]="even"
+                (click)="select(row)"
+                [class.selected]="isSelected(row)"></tr>
+        </table>
+    </div>
+</div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.scss

@@ -0,0 +1,25 @@
+/*!
+ * 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.
+ */
+
+.connection-cluster-table {
+    .listing-table {
+        .mat-column-node {
+            min-width: 200px;
+            width: 30%;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.spec.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConnectionClusterTable } from './connection-cluster-table.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('ConnectionClusterTable', () => {
+    let component: ConnectionClusterTable;
+    let fixture: ComponentFixture<ConnectionClusterTable>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ConnectionClusterTable, NoopAnimationsModule]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ConnectionClusterTable);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});