[NIFI-12437] - Summary (#8143)

* [NIFI-12437] - Summary * Processors Status Snapshot Listing * initial processors status snapshot table * sorting * goto processor * multi-valued sort for processors status listing summary * add filtering to the processors status snapshot tab of the summary * created a re-usable summary-table-filter componennt * moved status history to common location * status history * status history chart * resize * display insufficient data message if there isn't enough data to render the history * moved status history chart into its own component * update missing licenses * review feedback * removing use of <label> for non-form elements in status-history component, also updated vertical spacing * review feedback * remove unused items from processor-status-listing.component.ts * fixed tests. added npm script * fixed routing to processor after initial load of the processors summary table * turn of debug route tracing This closes #8143
apache · Dec 15, 2023 · 5e3239f · 5e3239f
1 parent 231dbde
commit 5e3239f
Show file tree

Hide file tree

Showing 83 changed files with 4,580 additions and 13 deletions.
diff --git a/...ifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json b/...ifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
@@ -7,6 +7,7 @@
         "build": "ng build --verbose",
         "watch": "ng build --watch --configuration development",
         "test": "ng test --karma-config=karma.conf.js --watch=false",
+        "test:dev": "ng test --karma-config=karma.conf.js --watch=true --browsers=Chrome",
         "prettier": "prettier --config .prettierrc . --check",
         "prettier-format": "prettier --config .prettierrc . --write",
         "ci": "npm ci --ignore-scripts"

diff --git a/...dle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app-routing.module.ts b/...dle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app-routing.module.ts
@@ -47,6 +47,11 @@ const routes: Routes = [
         canMatch: [authenticationGuard],
         loadChildren: () => import('./pages/counters/feature/counters.module').then((m) => m.CountersModule)
     },
+    {
+        path: 'summary',
+        canMatch: [authenticationGuard],
+        loadChildren: () => import('./pages/summary/feature/summary.module').then((m) => m.SummaryModule)
+    },
     {
         path: '',
         canMatch: [authenticationGuard],

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
@@ -36,6 +36,8 @@ import { PollingInterceptor } from './service/interceptors/polling.interceptor';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { MatNativeDateModule } from '@angular/material/core';
 import { AboutEffects } from './state/about/about.effects';
+import { StatusHistoryEffects } from './state/status-history/status-history.effects';
+import { MatDialogModule } from '@angular/material/dialog';
 
 // @ts-ignore
 @NgModule({
@@ -54,14 +56,15 @@ import { AboutEffects } from './state/about/about.effects';
             routerState: RouterState.Minimal,
             navigationActionTiming: NavigationActionTiming.PostActivation
         }),
-        EffectsModule.forRoot(UserEffects, ExtensionTypesEffects, AboutEffects),
+        EffectsModule.forRoot(UserEffects, ExtensionTypesEffects, AboutEffects, StatusHistoryEffects),
         StoreDevtoolsModule.instrument({
             maxAge: 25,
             logOnly: environment.production,
             autoPause: true
         }),
         MatProgressSpinnerModule,
-        MatNativeDateModule
+        MatNativeDateModule,
+        MatDialogModule
     ],
     providers: [
         {

diff --git a/...i/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.spec.ts b/...i/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.spec.ts
@@ -25,7 +25,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
-describe('CounterTableComponent', () => {
+describe('CounterTable', () => {
     let component: CounterTable;
     let fixture: ComponentFixture<CounterTable>;
 

diff --git a/.../main/nifi/src/app/pages/flow-designer/service/behavior/editable-behavior.service.spec.ts b/.../main/nifi/src/app/pages/flow-designer/service/behavior/editable-behavior.service.spec.ts
@@ -28,6 +28,8 @@ import * as fromTransform from '../../state/transform/transform.reducer';
 import { selectTransform } from '../../state/transform/transform.selectors';
 import { controllerServicesFeatureKey } from '../../state/controller-services';
 import * as fromControllerServices from '../../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../../state/user/user.selectors';
+import * as fromUser from '../../../../state/user/user.reducer';
 
 describe('EditableBehaviorService', () => {
     let service: EditableBehavior;
@@ -51,6 +53,10 @@ describe('EditableBehaviorService', () => {
                         {
                             selector: selectTransform,
                             value: initialState[transformFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...ain/nifi/src/app/pages/flow-designer/service/behavior/selectable-behavior.service.spec.ts b/...ain/nifi/src/app/pages/flow-designer/service/behavior/selectable-behavior.service.spec.ts
@@ -26,6 +26,8 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { selectFlowState } from '../../state/flow/flow.selectors';
 import { controllerServicesFeatureKey } from '../../state/controller-services';
 import * as fromControllerServices from '../../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../../state/user/user.selectors';
+import * as fromUser from '../../../../state/user/user.reducer';
 
 describe('SelectableBehavior', () => {
     let service: SelectableBehavior;
@@ -45,6 +47,10 @@ describe('SelectableBehavior', () => {
                         {
                             selector: selectFlowState,
                             value: initialState[flowFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...b-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.spec.ts b/...b-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.spec.ts
@@ -27,6 +27,8 @@ import { provideMockStore } from '@ngrx/store/testing';
 import { selectFlowState } from '../state/flow/flow.selectors';
 import { controllerServicesFeatureKey } from '../state/controller-services';
 import * as fromControllerServices from '../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../state/user/user.selectors';
+import * as fromUser from '../../../state/user/user.reducer';
 
 describe('CanvasUtils', () => {
     let service: CanvasUtils;
@@ -46,6 +48,10 @@ describe('CanvasUtils', () => {
                         {
                             selector: selectFlowState,
                             value: initialState[flowFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.spec.ts b/...d/src/main/nifi/src/app/pages/flow-designer/service/manager/label-manager.service.spec.ts
@@ -28,6 +28,8 @@ import { selectFlowState } from '../../state/flow/flow.selectors';
 import { selectTransform } from '../../state/transform/transform.selectors';
 import { controllerServicesFeatureKey } from '../../state/controller-services';
 import * as fromControllerServices from '../../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../../state/user/user.selectors';
+import * as fromUser from '../../../../state/user/user.reducer';
 
 describe('LabelManager', () => {
     let service: LabelManager;
@@ -51,6 +53,10 @@ describe('LabelManager', () => {
                         {
                             selector: selectTransform,
                             value: initialState[transformFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...nd/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.spec.ts b/...nd/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.spec.ts
@@ -28,6 +28,8 @@ import { selectFlowState } from '../../state/flow/flow.selectors';
 import { selectTransform } from '../../state/transform/transform.selectors';
 import { controllerServicesFeatureKey } from '../../state/controller-services';
 import * as fromControllerServices from '../../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../../state/user/user.selectors';
+import * as fromUser from '../../../../state/user/user.reducer';
 
 describe('PortManager', () => {
     let service: PortManager;
@@ -51,6 +53,10 @@ describe('PortManager', () => {
                         {
                             selector: selectTransform,
                             value: initialState[transformFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...in/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.spec.ts b/...in/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.spec.ts
@@ -28,6 +28,8 @@ import { selectFlowState } from '../../state/flow/flow.selectors';
 import { selectTransform } from '../../state/transform/transform.selectors';
 import { controllerServicesFeatureKey } from '../../state/controller-services';
 import * as fromControllerServices from '../../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../../state/user/user.selectors';
+import * as fromUser from '../../../../state/user/user.reducer';
 
 describe('ProcessGroupManager', () => {
     let service: ProcessGroupManager;
@@ -51,6 +53,10 @@ describe('ProcessGroupManager', () => {
                         {
                             selector: selectTransform,
                             value: initialState[transformFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...c/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.spec.ts b/...c/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.spec.ts
@@ -28,6 +28,8 @@ import { selectFlowState } from '../../state/flow/flow.selectors';
 import { selectTransform } from '../../state/transform/transform.selectors';
 import { controllerServicesFeatureKey } from '../../state/controller-services';
 import * as fromControllerServices from '../../state/controller-services/controller-services.reducer';
+import { selectUser } from '../../../../state/user/user.selectors';
+import * as fromUser from '../../../../state/user/user.reducer';
 
 describe('ProcessorManager', () => {
     let service: ProcessorManager;
@@ -51,6 +53,10 @@ describe('ProcessorManager', () => {
                         {
                             selector: selectTransform,
                             value: initialState[transformFeatureKey]
+                        },
+                        {
+                            selector: selectUser,
+                            value: fromUser.initialState.user
                         }
                     ]
                 })

diff --git a/...frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html b/...frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/header.component.html
@@ -64,7 +64,7 @@
                     <i class="fa fa-navicon"></i>
                 </button>
                 <mat-menu #globalMenu="matMenu" xPosition="before">
-                    <button mat-menu-item class="global-menu-item">
+                    <button mat-menu-item class="global-menu-item" [routerLink]="['/summary']">
                         <i class="fa fa-fw fa-table mr-2"></i>
                         Summary
                     </button>

diff --git a/...b/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary-routing.module.ts b/...b/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary-routing.module.ts
@@ -0,0 +1,78 @@
+/*
+ *  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 { RouterModule, Routes } from '@angular/router';
+import { Summary } from './summary.component';
+import { NgModule } from '@angular/core';
+import { ProcessorStatusListing } from '../ui/processor-status-listing/processor-status-listing.component';
+import { InputPortStatusListing } from '../ui/input-port-status-listing/input-port-status-listing.component';
+import { OutputPortStatusListing } from '../ui/output-port-status-listing/output-port-status-listing.component';
+import { RemoteProcessGroupStatusListing } from '../ui/remote-process-group-status-listing/remote-process-group-status-listing.component';
+import { ConnectionStatusListing } from '../ui/connection-status-listing/connection-status-listing.component';
+import { ProcessGroupStatusListing } from '../ui/process-group-status-listing/process-group-status-listing.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: Summary,
+        children: [
+            { path: '', pathMatch: 'full', redirectTo: 'processors' },
+            {
+                path: 'processors',
+                component: ProcessorStatusListing,
+                children: [
+                    {
+                        path: ':id',
+                        component: ProcessorStatusListing,
+                        children: [
+                            {
+                                path: 'history',
+                                component: ProcessorStatusListing
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                path: 'input-ports',
+                component: InputPortStatusListing
+            },
+            {
+                path: 'output-ports',
+                component: OutputPortStatusListing
+            },
+            {
+                path: 'remote-process-groups',
+                component: RemoteProcessGroupStatusListing
+            },
+            {
+                path: 'connections',
+                component: ConnectionStatusListing
+            },
+            {
+                path: 'process-groups',
+                component: ProcessGroupStatusListing
+            }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class SummaryRoutingModule {}
diff --git a/...-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html b/...-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.html
@@ -0,0 +1,45 @@
+<!--
+  ~  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="p-4 flex flex-col h-screen justify-between gap-y-5">
+    <div class="flex justify-between">
+        <h3 class="text-xl bold summary-header">NiFi Summary</h3>
+        <button class="nifi-button" [routerLink]="['/']">
+            <i class="fa fa-times"></i>
+        </button>
+    </div>
+    <div class="flex-1 flex flex-col">
+        <div class="summary-tabs">
+            <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
+                <a
+                    mat-tab-link
+                    *ngFor="let tab of tabLinks"
+                    [routerLink]="[tab.link]"
+                    routerLinkActive
+                    #rla="routerLinkActive"
+                    [active]="rla.isActive">
+                    {{ tab.label }}
+                </a>
+            </nav>
+        </div>
+        <div class="pt-4 flex-1">
+            <mat-tab-nav-panel #tabPanel>
+                <router-outlet></router-outlet>
+            </mat-tab-nav-panel>
+        </div>
+    </div>
+</div>
diff --git a/...-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.scss b/...-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/summary.component.scss
@@ -0,0 +1,24 @@
+/*!
+ *  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.
+ */
+
+.summary-header {
+    color: #728e9b;
+}
+
+.summary-tabs {
+    border-bottom-width: 1px;
+}