Nifi 12505 system diagnostics (apache#8190)

* [NIFI-12505] System Diagnostics * Refactor Status History dialog to use the load and open action pattern. * address review feedback This closes apache#8190
shubhluck · Dec 28, 2023 · e15aecc · e15aecc
1 parent a73d812
commit e15aecc
Show file tree

Hide file tree

Showing 31 changed files with 1,091 additions and 34 deletions.
diff --git a/...work-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.module.ts b/...work-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.module.ts
@@ -39,6 +39,7 @@ import { AboutEffects } from './state/about/about.effects';
 import { StatusHistoryEffects } from './state/status-history/status-history.effects';
 import { MatDialogModule } from '@angular/material/dialog';
 import { ControllerServiceStateEffects } from './state/contoller-service-state/controller-service-state.effects';
+import { SystemDiagnosticsEffects } from './state/system-diagnostics/system-diagnostics.effects';
 
 // @ts-ignore
 @NgModule({
@@ -62,7 +63,8 @@ import { ControllerServiceStateEffects } from './state/contoller-service-state/c
             ExtensionTypesEffects,
             AboutEffects,
             StatusHistoryEffects,
-            ControllerServiceStateEffects
+            ControllerServiceStateEffects,
+            SystemDiagnosticsEffects
         ),
         StoreDevtoolsModule.instrument({
             maxAge: 25,

diff --git a/...c/app/pages/summary/ui/connection-status-listing/connection-status-listing.component.html b/...c/app/pages/summary/ui/connection-status-listing/connection-status-listing.component.html
@@ -41,6 +41,9 @@
                     <div>Last updated:</div>
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
+                <div *ngIf="(currentUser$ | async)?.systemPermissions?.canRead">
+                    <a (click)="openSystemDiagnostics()">System Diagnostics</a>
+                </div>
             </div>
         </div>
     </ng-template>

diff --git a/...src/app/pages/summary/ui/connection-status-listing/connection-status-listing.component.ts b/...src/app/pages/summary/ui/connection-status-listing/connection-status-listing.component.ts
@@ -36,8 +36,12 @@ import {
 import { selectUser } from '../../../../state/user/user.selectors';
 import { filter, switchMap, take } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { openStatusHistoryDialog } from '../../../../state/status-history/status-history.actions';
+import {
+    getStatusHistoryAndOpenDialog,
+    openStatusHistoryDialog
+} from '../../../../state/status-history/status-history.actions';
 import { ComponentType } from '../../../../state/shared';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../../state/system-diagnostics/system-diagnostics.actions';
 
 @Component({
     selector: 'connection-status-listing',
@@ -67,7 +71,7 @@ export class ConnectionStatusListing {
             .subscribe((connection) => {
                 if (connection) {
                     this.store.dispatch(
-                        openStatusHistoryDialog({
+                        getStatusHistoryAndOpenDialog({
                             request: {
                                 source: 'summary',
                                 componentType: ComponentType.Connection,
@@ -104,4 +108,14 @@ export class ConnectionStatusListing {
             })
         );
     }
+
+    openSystemDiagnostics() {
+        this.store.dispatch(
+            getSystemDiagnosticsAndOpenDialog({
+                request: {
+                    nodewise: false
+                }
+            })
+        );
+    }
 }
diff --git a/...c/app/pages/summary/ui/input-port-status-listing/input-port-status-listing.component.html b/...c/app/pages/summary/ui/input-port-status-listing/input-port-status-listing.component.html
@@ -41,6 +41,9 @@
                     <div>Last updated:</div>
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
+                <div *ngIf="(currentUser$ | async)?.systemPermissions?.canRead">
+                    <a (click)="openSystemDiagnostics()">System Diagnostics</a>
+                </div>
             </div>
         </div>
     </ng-template>

diff --git a/...src/app/pages/summary/ui/input-port-status-listing/input-port-status-listing.component.ts b/...src/app/pages/summary/ui/input-port-status-listing/input-port-status-listing.component.ts
@@ -27,6 +27,7 @@ import { PortStatusSnapshotEntity, SummaryListingState } from '../../state/summa
 import { Store } from '@ngrx/store';
 import { initialState } from '../../state/summary-listing/summary-listing.reducer';
 import * as SummaryListingActions from '../../state/summary-listing/summary-listing.actions';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../../state/system-diagnostics/system-diagnostics.actions';
 
 @Component({
     selector: 'input-port-status-listing',
@@ -59,4 +60,14 @@ export class InputPortStatusListing {
             })
         );
     }
+
+    openSystemDiagnostics() {
+        this.store.dispatch(
+            getSystemDiagnosticsAndOpenDialog({
+                request: {
+                    nodewise: false
+                }
+            })
+        );
+    }
 }
diff --git a/...app/pages/summary/ui/output-port-status-listing/output-port-status-listing.component.html b/...app/pages/summary/ui/output-port-status-listing/output-port-status-listing.component.html
@@ -41,6 +41,9 @@
                     <div>Last updated:</div>
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
+                <div *ngIf="(currentUser$ | async)?.systemPermissions?.canRead">
+                    <a (click)="openSystemDiagnostics()">System Diagnostics</a>
+                </div>
             </div>
         </div>
     </ng-template>

diff --git a/...c/app/pages/summary/ui/output-port-status-listing/output-port-status-listing.component.ts b/...c/app/pages/summary/ui/output-port-status-listing/output-port-status-listing.component.ts
@@ -29,6 +29,7 @@ import { Store } from '@ngrx/store';
 import { PortStatusSnapshotEntity, SummaryListingState } from '../../state/summary-listing';
 import { initialState } from '../../state/summary-listing/summary-listing.reducer';
 import * as SummaryListingActions from '../../state/summary-listing/summary-listing.actions';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../../state/system-diagnostics/system-diagnostics.actions';
 
 @Component({
     selector: 'output-port-status-listing',
@@ -61,4 +62,14 @@ export class OutputPortStatusListing {
             })
         );
     }
+
+    openSystemDiagnostics() {
+        this.store.dispatch(
+            getSystemDiagnosticsAndOpenDialog({
+                request: {
+                    nodewise: false
+                }
+            })
+        );
+    }
 }
diff --git a/...pages/summary/ui/process-group-status-listing/process-group-status-listing.component.html b/...pages/summary/ui/process-group-status-listing/process-group-status-listing.component.html
@@ -42,6 +42,9 @@
                     <div>Last updated:</div>
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
+                <div *ngIf="(currentUser$ | async)?.systemPermissions?.canRead">
+                    <a (click)="openSystemDiagnostics()">System Diagnostics</a>
+                </div>
             </div>
         </div>
     </ng-template>

diff --git a/...p/pages/summary/ui/process-group-status-listing/process-group-status-listing.component.ts b/...p/pages/summary/ui/process-group-status-listing/process-group-status-listing.component.ts
@@ -37,9 +37,13 @@ import {
 } from '../../state/summary-listing/summary-listing.selectors';
 import { filter, switchMap, take } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { openStatusHistoryDialog } from '../../../../state/status-history/status-history.actions';
+import {
+    getStatusHistoryAndOpenDialog,
+    openStatusHistoryDialog
+} from '../../../../state/status-history/status-history.actions';
 import { ComponentType } from '../../../../state/shared';
 import { selectUser } from '../../../../state/user/user.selectors';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../../state/system-diagnostics/system-diagnostics.actions';
 
 @Component({
     selector: 'process-group-status-listing',
@@ -70,7 +74,7 @@ export class ProcessGroupStatusListing {
             .subscribe((pg) => {
                 if (pg) {
                     this.store.dispatch(
-                        openStatusHistoryDialog({
+                        getStatusHistoryAndOpenDialog({
                             request: {
                                 source: 'summary',
                                 componentType: ComponentType.ProcessGroup,
@@ -107,4 +111,14 @@ export class ProcessGroupStatusListing {
             })
         );
     }
+
+    openSystemDiagnostics() {
+        this.store.dispatch(
+            getSystemDiagnosticsAndOpenDialog({
+                request: {
+                    nodewise: false
+                }
+            })
+        );
+    }
 }
diff --git a/...src/app/pages/summary/ui/processor-status-listing/processor-status-listing.component.html b/...src/app/pages/summary/ui/processor-status-listing/processor-status-listing.component.html
@@ -40,6 +40,9 @@
                     <div>Last updated:</div>
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
+                <div *ngIf="(currentUser$ | async)?.systemPermissions?.canRead">
+                    <a (click)="openSystemDiagnostics()">System Diagnostics</a>
+                </div>
             </div>
         </div>
     </ng-template>

diff --git a/...i/src/app/pages/summary/ui/processor-status-listing/processor-status-listing.component.ts b/...i/src/app/pages/summary/ui/processor-status-listing/processor-status-listing.component.ts
@@ -28,11 +28,15 @@ import {
 import { ProcessorStatusSnapshotEntity, SummaryListingState } from '../../state/summary-listing';
 import { selectUser } from '../../../../state/user/user.selectors';
 import { initialState } from '../../state/summary-listing/summary-listing.reducer';
-import { openStatusHistoryDialog } from '../../../../state/status-history/status-history.actions';
+import {
+    getStatusHistoryAndOpenDialog,
+    openStatusHistoryDialog
+} from '../../../../state/status-history/status-history.actions';
 import { ComponentType } from '../../../../state/shared';
 import { filter, switchMap, take } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as SummaryListingActions from '../../state/summary-listing/summary-listing.actions';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../../state/system-diagnostics/system-diagnostics.actions';
 
 @Component({
     selector: 'processor-status-listing',
@@ -63,7 +67,7 @@ export class ProcessorStatusListing {
             .subscribe((processor) => {
                 if (processor) {
                     this.store.dispatch(
-                        openStatusHistoryDialog({
+                        getStatusHistoryAndOpenDialog({
                             request: {
                                 source: 'summary',
                                 componentType: ComponentType.Processor,
@@ -100,4 +104,14 @@ export class ProcessorStatusListing {
             })
         );
     }
+
+    openSystemDiagnostics() {
+        this.store.dispatch(
+            getSystemDiagnosticsAndOpenDialog({
+                request: {
+                    nodewise: false
+                }
+            })
+        );
+    }
 }
diff --git a/...ui/remote-process-group-status-listing/remote-process-group-status-listing.component.html b/...ui/remote-process-group-status-listing/remote-process-group-status-listing.component.html
@@ -41,6 +41,9 @@
                     <div>Last updated:</div>
                     <div class="refresh-timestamp">{{ loadedTimestamp$ | async }}</div>
                 </div>
+                <div *ngIf="(currentUser$ | async)?.systemPermissions?.canRead">
+                    <a (click)="openSystemDiagnostics()">System Diagnostics</a>
+                </div>
             </div>
         </div>
     </ng-template>

diff --git a/...y/ui/remote-process-group-status-listing/remote-process-group-status-listing.component.ts b/...y/ui/remote-process-group-status-listing/remote-process-group-status-listing.component.ts
@@ -29,10 +29,14 @@ import { Store } from '@ngrx/store';
 import { RemoteProcessGroupStatusSnapshotEntity, SummaryListingState } from '../../state/summary-listing';
 import { filter, switchMap, take } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { openStatusHistoryDialog } from '../../../../state/status-history/status-history.actions';
+import {
+    getStatusHistoryAndOpenDialog,
+    openStatusHistoryDialog
+} from '../../../../state/status-history/status-history.actions';
 import { ComponentType } from '../../../../state/shared';
 import { initialState } from '../../state/summary-listing/summary-listing.reducer';
 import * as SummaryListingActions from '../../state/summary-listing/summary-listing.actions';
+import { getSystemDiagnosticsAndOpenDialog } from '../../../../state/system-diagnostics/system-diagnostics.actions';
 
 @Component({
     selector: 'remote-process-group-status-listing',
@@ -62,7 +66,7 @@ export class RemoteProcessGroupStatusListing {
             .subscribe((rpg) => {
                 if (rpg) {
                     this.store.dispatch(
-                        openStatusHistoryDialog({
+                        getStatusHistoryAndOpenDialog({
                             request: {
                                 source: 'summary',
                                 componentType: ComponentType.RemoteProcessGroup,
@@ -99,4 +103,14 @@ export class RemoteProcessGroupStatusListing {
             })
         );
     }
+
+    openSystemDiagnostics() {
+        this.store.dispatch(
+            getSystemDiagnosticsAndOpenDialog({
+                request: {
+                    nodewise: false
+                }
+            })
+        );
+    }
 }
diff --git a/...rk/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/system-diagnostics.service.ts b/...rk/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/system-diagnostics.service.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 { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Client } from './client.service';
+
+@Injectable({ providedIn: 'root' })
+export class SystemDiagnosticsService {
+    private static readonly API: string = '../nifi-api';
+
+    constructor(
+        private httpClient: HttpClient,
+        private client: Client
+    ) {}
+
+    getSystemDiagnostics(nodewise?: boolean) {
+        if (nodewise) {
+            const params = {
+                nodewise: true
+            };
+            return this.httpClient.get(`${SystemDiagnosticsService.API}/system-diagnostics`, { params });
+        }
+        return this.httpClient.get(`${SystemDiagnosticsService.API}/system-diagnostics`);
+    }
+}
diff --git a/...ork-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/index.ts b/...ork-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/index.ts
@@ -27,6 +27,8 @@ import { statusHistoryFeatureKey, StatusHistoryState } from './status-history';
 import { statusHistoryReducer } from './status-history/status-history.reducer';
 import { controllerServiceStateFeatureKey, ControllerServiceState } from './contoller-service-state';
 import { controllerServiceStateReducer } from './contoller-service-state/controller-service-state.reducer';
+import { systemDiagnosticsFeatureKey, SystemDiagnosticsState } from './system-diagnostics';
+import { systemDiagnosticsReducer } from './system-diagnostics/system-diagnostics.reducer';
 
 export interface NiFiState {
     router: RouterReducerState;
@@ -35,6 +37,7 @@ export interface NiFiState {
     [aboutFeatureKey]: AboutState;
     [statusHistoryFeatureKey]: StatusHistoryState;
     [controllerServiceStateFeatureKey]: ControllerServiceState;
+    [systemDiagnosticsFeatureKey]: SystemDiagnosticsState;
 }
 
 export const rootReducers: ActionReducerMap<NiFiState> = {
@@ -43,5 +46,6 @@ export const rootReducers: ActionReducerMap<NiFiState> = {
     [extensionTypesFeatureKey]: extensionTypesReducer,
     [aboutFeatureKey]: aboutReducer,
     [statusHistoryFeatureKey]: statusHistoryReducer,
-    [controllerServiceStateFeatureKey]: controllerServiceStateReducer
+    [controllerServiceStateFeatureKey]: controllerServiceStateReducer,
+    [systemDiagnosticsFeatureKey]: systemDiagnosticsReducer
 };
diff --git a/...eb/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.actions.ts b/...eb/nifi-web-frontend/src/main/nifi/src/app/state/status-history/status-history.actions.ts
@@ -20,14 +20,24 @@ import { StatusHistoryRequest, StatusHistoryResponse } from './index';
 
 const STATUS_HISTORY_PREFIX: string = '[Status History]';
 
-export const loadStatusHistory = createAction(
-    `${STATUS_HISTORY_PREFIX} Load Status History`,
+export const reloadStatusHistory = createAction(
+    `${STATUS_HISTORY_PREFIX} Reload Status History`,
     props<{ request: StatusHistoryRequest }>()
 );
 
+export const getStatusHistoryAndOpenDialog = createAction(
+    `${STATUS_HISTORY_PREFIX} Get Status History and Open Dialog`,
+    props<{ request: StatusHistoryRequest }>()
+);
+
+export const reloadStatusHistorySuccess = createAction(
+    `${STATUS_HISTORY_PREFIX} Reload Status History Success`,
+    props<{ response: StatusHistoryResponse }>()
+);
+
 export const loadStatusHistorySuccess = createAction(
     `${STATUS_HISTORY_PREFIX} Load Status History Success`,
-    props<{ response: StatusHistoryResponse }>()
+    props<{ request: StatusHistoryRequest; response: StatusHistoryResponse }>()
 );
 
 export const openStatusHistoryDialog = createAction(