NIFI-12663: Error Handling in CS Listing (#8305)

* NIFI-12663:
- Handling API error responses in the Management Controller Services page.

* NIFI-12679:
- Renaming components based on review feedback.
- Using ng-content in page-content component.
- Removing the problematic route when navigating to the error page.
- Fixing logic when handling service loading errors.
- Handling errors in the Property Table Helper service.

* NIFI-12679:
- Addressing review feedback.

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app-routing.module.ts

@@ -24,6 +24,10 @@ const routes: Routes = [
         path: 'login',
         loadChildren: () => import('./pages/login/feature/login.module').then((m) => m.LoginModule)
     },
+    {
+        path: 'error',
+        loadChildren: () => import('./pages/error/feature/error.module').then((m) => m.ErrorModule)
+    },
     {
         path: 'settings',
         canMatch: [authenticationGuard],

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.module.ts

@@ -42,6 +42,8 @@ import { ControllerServiceStateEffects } from './state/contoller-service-state/c
 import { SystemDiagnosticsEffects } from './state/system-diagnostics/system-diagnostics.effects';
 import { FlowConfigurationEffects } from './state/flow-configuration/flow-configuration.effects';
 import { ComponentStateEffects } from './state/component-state/component-state.effects';
+import { ErrorEffects } from './state/error/error.effects';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 @NgModule({
     declarations: [AppComponent],
@@ -60,6 +62,7 @@ import { ComponentStateEffects } from './state/component-state/component-state.e
             navigationActionTiming: NavigationActionTiming.PostActivation
         }),
         EffectsModule.forRoot(
+            ErrorEffects,
             CurrentUserEffects,
             ExtensionTypesEffects,
             AboutEffects,
@@ -76,7 +79,8 @@ import { ComponentStateEffects } from './state/component-state/component-state.e
         }),
         MatProgressSpinnerModule,
         MatNativeDateModule,
-        MatDialogModule
+        MatDialogModule,
+        MatSnackBarModule
     ],
     providers: [
         {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/error/feature/error-routing.module.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Error } from './error.component';
+
+const routes: Routes = [{ path: '', component: Error }];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class ErrorRoutingModule {}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/error/feature/error.component.html

@@ -15,4 +15,15 @@
   ~ limitations under the License.
   -->
 
-<div *ngIf="message" [ngClass]="{ error: severity == 'alert' }" class="p-2 text-center text-sm">{{ message }}</div>
+<div class="error-background pt-24 pl-24 h-screen">
+    <ng-container *ngIf="errorDetail$ | async; let errorDetail; else: noErrorDetails">
+        <page-content [title]="errorDetail.title">
+            <div class="text-sm">{{ errorDetail.message }}</div>
+        </page-content>
+    </ng-container>
+    <ng-template #noErrorDetails>
+        <page-content title="Error">
+            <div class="text-sm">Please check the logs or navigate home and try again.</div>
+        </page-content>
+    </ng-template>
+</div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/error/feature/error.component.scss

@@ -15,8 +15,6 @@
  * limitations under the License.
  */
 
-div {
+.error-background {
-    &.error {
+    background: #fff url(../../../../assets/icons/bg-error.png) left top no-repeat;
-        background-color: #ffcdd2;
-    }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/error/feature/error.component.spec.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { Error } from './error.component';
+import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../../state/current-user/current-user.reducer';
+import { Component } from '@angular/core';
+
+describe('Error', () => {
+    let component: Error;
+    let fixture: ComponentFixture<Error>;
+
+    @Component({
+        selector: 'page-content',
+        standalone: true,
+        template: ''
+    })
+    class MockPageContent {}
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [Error],
+            imports: [MockPageContent],
+            providers: [provideMockStore({ initialState })]
+        });
+        fixture = TestBed.createComponent(Error);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/error/feature/error.component.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { Component } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { selectFullScreenError } from '../../../state/error/error.selectors';
+import { NiFiState } from '../../../state';
+
+@Component({
+    selector: 'error',
+    templateUrl: './error.component.html',
+    styleUrls: ['./error.component.scss']
+})
+export class Error {
+    errorDetail$ = this.store.select(selectFullScreenError);
+
+    constructor(private store: Store<NiFiState>) {}
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/error/feature/error.module.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Error } from './error.component';
+import { ErrorRoutingModule } from './error-routing.module';
+import { PageContent } from '../../../ui/common/page-content/page-content.component';
+
+@NgModule({
+    declarations: [Error],
+    exports: [Error],
+    imports: [CommonModule, ErrorRoutingModule, PageContent]
+})
+export class ErrorModule {}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/flow.service.ts

@@ -18,7 +18,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { CanvasUtils } from './canvas-utils.service';
 import {
     ComponentRunStatusRequest,
     CreateComponentRequest,
@@ -48,7 +47,6 @@ export class FlowService implements PropertyDescriptorRetriever {
 
     constructor(
         private httpClient: HttpClient,
-        private canvasUtils: CanvasUtils,
         private client: Client,
         private nifiCommon: NiFiCommon
     ) {}
@@ -198,12 +196,10 @@ export class FlowService implements PropertyDescriptorRetriever {
     }
 
     updateComponent(updateComponent: UpdateComponentRequest): Observable<any> {
-        // return throwError('API Error');
         return this.httpClient.put(this.nifiCommon.stripProtocol(updateComponent.uri), updateComponent.payload);
     }
 
     deleteComponent(deleteComponent: DeleteComponentRequest): Observable<any> {
-        // return throwError('API Error');
         const revision: any = this.client.getRevision(deleteComponent.entity);
         return this.httpClient.delete(this.nifiCommon.stripProtocol(deleteComponent.uri), { params: revision });
     }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html

@@ -17,7 +17,7 @@
 
 <h2 mat-dialog-title>Create New {{ portTypeLabel }}</h2>
 <form class="create-port-form" [formGroup]="createPortForm">
-    <banner></banner>
+    <error-banner></error-banner>
     <mat-dialog-content>
         <mat-form-field>
             <mat-label>{{ portTypeLabel }} Name</mat-label>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.ts

@@ -28,7 +28,7 @@ import { ComponentType, SelectOption, TextTipInput } from '../../../../../../../
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Banner } from '../../../../common/banner/banner.component';
+import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { NifiSpinnerDirective } from '../../../../../../../ui/common/spinner/nifi-spinner.directive';
@@ -44,7 +44,7 @@ import { NifiTooltipDirective } from '../../../../../../../ui/common/tooltips/ni
         MatInputModule,
         MatSelectModule,
         MatTooltipModule,
-        Banner,
+        ErrorBanner,
         NgIf,
         NgForOf,
         MatButtonModule,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html

@@ -17,7 +17,7 @@
 
 <h2 mat-dialog-title>Edit {{ portTypeLabel }}</h2>
 <form class="edit-port-form" [formGroup]="editPortForm">
-    <banner></banner>
+    <error-banner></error-banner>
     <mat-dialog-content>
         <div>
             <mat-form-field>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.ts

@@ -24,7 +24,7 @@ import { updateComponent } from '../../../../../state/flow/flow.actions';
 import { Client } from '../../../../../../../service/client.service';
 import { EditComponentDialogRequest } from '../../../../../state/flow';
 import { ComponentType } from '../../../../../../../state/shared';
-import { Banner } from '../../../../common/banner/banner.component';
+import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
@@ -38,7 +38,7 @@ import { NifiSpinnerDirective } from '../../../../../../../ui/common/spinner/nif
     templateUrl: './edit-port.component.html',
     imports: [
         ReactiveFormsModule,
-        Banner,
+        ErrorBanner,
         MatDialogModule,
         MatInputModule,
         MatCheckboxModule,
@@ -68,10 +68,6 @@ export class EditPort {
             this.portTypeLabel = 'Output Port';
         }
 
-        // TODO - consider updating the request to only provide the id of the port and selecting that item
-        // from the store. this would also allow us to be informed when another client has submitted an
-        // update to the same port which this editing is happening
-
         // build the form
         this.editPortForm = this.formBuilder.group({
             name: new FormControl(request.entity.component.name, Validators.required),

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html

@@ -17,6 +17,7 @@
 
 <h2 mat-dialog-title>Create Process Group</h2>
 <form class="create-process-group-form" [formGroup]="createProcessGroupForm">
+    <error-banner></error-banner>
     <mat-dialog-content>
         <mat-form-field>
             <mat-label>Name</mat-label>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.ts

@@ -24,7 +24,7 @@ import { createProcessGroup, uploadProcessGroup } from '../../../../../state/flo
 import { SelectOption, TextTipInput } from '../../../../../../../state/shared';
 import { selectSaving } from '../../../../../state/flow/flow.selectors';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
-import { Banner } from '../../../../common/banner/banner.component';
+import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -42,7 +42,7 @@ import { NiFiCommon } from '../../../../../../../service/nifi-common.service';
     standalone: true,
     imports: [
         AsyncPipe,
-        Banner,
+        ErrorBanner,
         MatButtonModule,
         MatDialogModule,
         MatFormFieldModule,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.ts

@@ -24,7 +24,6 @@ import { groupComponents } from '../../../../../state/flow/flow.actions';
 import { ComponentType, SelectOption, TextTipInput } from '../../../../../../../state/shared';
 import { selectSaving } from '../../../../../state/flow/flow.selectors';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
-import { Banner } from '../../../../common/banner/banner.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -42,7 +41,6 @@ import { Client } from '../../../../../../../service/client.service';
     standalone: true,
     imports: [
         AsyncPipe,
-        Banner,
         MatButtonModule,
         MatDialogModule,
         MatFormFieldModule,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html

@@ -17,6 +17,7 @@
 
 <h2 mat-dialog-title>Edit Processor</h2>
 <form class="processor-edit-form" [formGroup]="editProcessorForm">
+    <error-banner></error-banner>
     <!-- TODO - Stop & Configure -->
     <mat-dialog-content>
         <mat-tab-group>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.spec.ts

@@ -22,6 +22,9 @@ import { EditComponentDialogRequest } from '../../../../../state/flow';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ComponentType } from '../../../../../../../state/shared';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Component } from '@angular/core';
+import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../../../../../../state/error/error.reducer';
 
 describe('EditProcessor', () => {
     let component: EditProcessor;
@@ -719,10 +722,22 @@ describe('EditProcessor', () => {
         }
     };
 
+    @Component({
+        selector: 'error-banner',
+        standalone: true,
+        template: ''
+    })
+    class MockErrorBanner {}
+
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [EditProcessor, BrowserAnimationsModule],
+            imports: [EditProcessor, MockErrorBanner, BrowserAnimationsModule],
-            providers: [{ provide: MAT_DIALOG_DATA, useValue: data }]
+            providers: [
+                { provide: MAT_DIALOG_DATA, useValue: data },
+                provideMockStore({
+                    initialState
+                })
+            ]
         });
         fixture = TestBed.createComponent(EditProcessor);
         component = fixture.componentInstance;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts

@@ -47,6 +47,7 @@ import {
     RelationshipConfiguration,
     RelationshipSettings
 } from './relationship-settings/relationship-settings.component';
+import { ErrorBanner } from '../../../../../../../ui/common/error-banner/error-banner.component';
 
 @Component({
     selector: 'edit-processor',
@@ -68,7 +69,8 @@ import {
         NifiSpinnerDirective,
         NifiTooltipDirective,
         RunDurationSlider,
-        RelationshipSettings
+        RelationshipSettings,
+        ErrorBanner
     ],
     styleUrls: ['./edit-processor.component.scss']
 })

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/login.component.html

@@ -23,12 +23,16 @@
 
         <ng-template #loaded>
             <ng-container *ngIf="access.error; else noErrors">
-                <login-message [title]="access.error.title" [message]="access.error.message"></login-message>
+                <page-content [title]="access.error.title">
+                    <div class="text-sm">{{ access.error.message }}</div>
+                </page-content>
             </ng-container>
 
             <ng-template #noErrors>
                 <ng-container *ngIf="access.accessStatus.status === 'ACTIVE'; else needsLogin">
-                    <login-message [title]="'Success'" [message]="access.accessStatus.message"></login-message>
+                    <page-content [title]="'Success'">
+                        <div class="text-sm">{{ access.accessStatus.message }}</div>
+                    </page-content>
                 </ng-container>
                 <ng-template #needsLogin>
                     <ng-container *ngIf="access.accessConfig.supportsLogin; else loginNotSupported">
@@ -36,11 +40,9 @@
                     </ng-container>
 
                     <ng-template #loginNotSupported>
-                        <login-message
+                        <page-content [title]="'Access Denied'">
-                            [title]="'Access Denied'"
+                            <div class="text-sm">This NiFi is not configured to support username/password logins.</div>
-                            [message]="
+                        </page-content>
-                                'This NiFi is not configured to support username/password logins.'
-                            "></login-message>
                     </ng-template>
                 </ng-template>
             </ng-template>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/login.module.ts

@@ -28,11 +28,11 @@ import { EffectsModule } from '@ngrx/effects';
 import { loginFeatureKey, reducers } from '../state';
 import { AccessEffects } from '../state/access/access.effects';
 import { LoginForm } from '../ui/login-form/login-form.component';
-import { LoginMessage } from '../ui/login-message/login-message.component';
+import { PageContent } from '../../../ui/common/page-content/page-content.component';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 @NgModule({
-    declarations: [Login, LoginForm, LoginMessage],
+    declarations: [Login, LoginForm],
     exports: [Login],
     imports: [
         CommonModule,
@@ -44,7 +44,8 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
         MatFormFieldModule,
         MatInputModule,
         MatButtonModule,
-        NgxSkeletonLoaderModule
+        NgxSkeletonLoaderModule,
+        PageContent
     ]
 })
 export class LoginModule {}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.html

@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="login-form w-96 flex flex-col gap-y-3">
+<div class="login-form w-96 flex flex-col gap-y-5">
     <div class="flex justify-between items-center">
         <div class="login-title">Log In</div>
         <div class="flex gap-x-2">

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/management-controller-services/index.ts

@@ -57,6 +57,5 @@ export interface ManagementControllerServicesState {
     controllerServices: ControllerServiceEntity[];
     saving: boolean;
     loadedTimestamp: string;
-    error: string | null;
+    status: 'pending' | 'loading' | 'success';
-    status: 'pending' | 'loading' | 'error' | 'success';
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/management-controller-services/management-controller-services.actions.ts

@@ -45,8 +45,8 @@ export const loadManagementControllerServicesSuccess = createAction(
     props<{ response: LoadManagementControllerServicesResponse }>()
 );
 
-export const managementControllerServicesApiError = createAction(
+export const managementControllerServicesBannerApiError = createAction(
-    '[Management Controller Services] Load Management Controller Services Error',
+    '[Management Controller Services] Management Controller Services Banner Api Error',
     props<{ error: string }>()
 );
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/management-controller-services/management-controller-services.effects.ts

@@ -18,7 +18,8 @@
 import { Injectable } from '@angular/core';
 import { Actions, concatLatestFrom, createEffect, ofType } from '@ngrx/effects';
 import * as ManagementControllerServicesActions from './management-controller-services.actions';
-import { catchError, from, map, NEVER, Observable, of, switchMap, take, takeUntil, tap } from 'rxjs';
+import * as ErrorActions from '../../../../state/error/error.actions';
+import { catchError, from, map, of, switchMap, take, takeUntil, tap } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { ManagementControllerServiceService } from '../../service/management-controller-service.service';
 import { Store } from '@ngrx/store';
@@ -31,17 +32,15 @@ import { EditControllerService } from '../../../../ui/common/controller-service/
 import {
     ComponentType,
     ControllerServiceReferencingComponent,
-    InlineServiceCreationRequest,
-    InlineServiceCreationResponse,
-    PropertyDescriptor,
     UpdateControllerServiceRequest
 } from '../../../../state/shared';
 import { Router } from '@angular/router';
-import { ExtensionTypesService } from '../../../../service/extension-types.service';
+import { selectSaving, selectStatus } from './management-controller-services.selectors';
-import { selectSaving } from './management-controller-services.selectors';
 import { EnableControllerService } from '../../../../ui/common/controller-service/enable-controller-service/enable-controller-service.component';
 import { DisableControllerService } from '../../../../ui/common/controller-service/disable-controller-service/disable-controller-service.component';
 import { PropertyTableHelperService } from '../../../../service/property-table-helper.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorHelper } from '../../../../service/error-helper.service';
 
 @Injectable()
 export class ManagementControllerServicesEffects {
@@ -50,7 +49,7 @@ export class ManagementControllerServicesEffects {
         private store: Store<NiFiState>,
         private client: Client,
         private managementControllerServiceService: ManagementControllerServiceService,
-        private extensionTypesService: ExtensionTypesService,
+        private errorHelper: ErrorHelper,
         private dialog: MatDialog,
         private router: Router,
         private propertyTableHelperService: PropertyTableHelperService
@@ -59,7 +58,8 @@ export class ManagementControllerServicesEffects {
     loadManagementControllerServices$ = createEffect(() =>
         this.actions$.pipe(
             ofType(ManagementControllerServicesActions.loadManagementControllerServices),
-            switchMap(() =>
+            concatLatestFrom(() => this.store.select(selectStatus)),
+            switchMap(([action, status]) =>
                 from(this.managementControllerServiceService.getControllerServices()).pipe(
                     map((response) =>
                         ManagementControllerServicesActions.loadManagementControllerServicesSuccess({
@@ -69,13 +69,17 @@ export class ManagementControllerServicesEffects {
                             }
                         })
                     ),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) => {
-                        of(
+                        if (status === 'success') {
-                            ManagementControllerServicesActions.managementControllerServicesApiError({
+                            if (this.errorHelper.showErrorInContext(errorResponse.status)) {
-                                error: error.error
+                                return of(ErrorActions.snackBarError({ error: errorResponse.error }));
-                            })
+                            } else {
-                        )
+                                return of(this.errorHelper.fullScreenError(errorResponse));
-                    )
+                            }
+                        } else {
+                            return of(this.errorHelper.fullScreenError(errorResponse));
+                        }
+                    })
                 )
             )
         )
@@ -130,13 +134,10 @@ export class ManagementControllerServicesEffects {
                             }
                         })
                     ),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) => {
-                        of(
+                        this.dialog.closeAll();
-                            ManagementControllerServicesActions.managementControllerServicesApiError({
+                        return of(ErrorActions.snackBarError({ error: errorResponse.error }));
-                                error: error.error
+                    })
-                            })
-                        )
-                    )
                 )
             )
         )
@@ -265,6 +266,8 @@ export class ManagementControllerServicesEffects {
                         });
 
                     editDialogReference.afterClosed().subscribe((response) => {
+                        this.store.dispatch(ErrorActions.clearBannerErrors());
+
                         if (response != 'ROUTED') {
                             this.store.dispatch(
                                 ManagementControllerServicesActions.selectControllerService({
@@ -295,18 +298,31 @@ export class ManagementControllerServicesEffects {
                             }
                         })
                     ),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) => {
-                        of(
+                        if (this.errorHelper.showErrorInContext(errorResponse.status)) {
-                            ManagementControllerServicesActions.managementControllerServicesApiError({
+                            return of(
-                                error: error.error
+                                ManagementControllerServicesActions.managementControllerServicesBannerApiError({
-                            })
+                                    error: errorResponse.error
-                        )
+                                })
-                    )
+                            );
+                        } else {
+                            this.dialog.getDialogById(request.id)?.close('ROUTED');
+                            return of(this.errorHelper.fullScreenError(errorResponse));
+                        }
+                    })
                 )
             )
         )
     );
 
+    managementControllerServicesBannerApiError$ = createEffect(() =>
+        this.actions$.pipe(
+            ofType(ManagementControllerServicesActions.managementControllerServicesBannerApiError),
+            map((action) => action.error),
+            switchMap((error) => of(ErrorActions.addBannerError({ error })))
+        )
+    );
+
     configureControllerServiceSuccess$ = createEffect(
         () =>
             this.actions$.pipe(
@@ -425,13 +441,9 @@ export class ManagementControllerServicesEffects {
                             }
                         })
                     ),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) => {
-                        of(
+                        return of(ErrorActions.snackBarError({ error: errorResponse.error }));
-                            ManagementControllerServicesActions.managementControllerServicesApiError({
+                    })
-                                error: error.error
-                            })
-                        )
-                    )
                 )
             )
         )

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/management-controller-services/management-controller-services.reducer.ts

@@ -27,7 +27,7 @@ import {
     inlineCreateControllerServiceSuccess,
     loadManagementControllerServices,
     loadManagementControllerServicesSuccess,
-    managementControllerServicesApiError,
+    managementControllerServicesBannerApiError,
     resetManagementControllerServicesState
 } from './management-controller-services.actions';
 import { produce } from 'immer';
@@ -36,7 +36,6 @@ export const initialState: ManagementControllerServicesState = {
     controllerServices: [],
     saving: false,
     loadedTimestamp: '',
-    error: null,
     status: 'pending'
 };
 
@@ -53,14 +52,11 @@ export const managementControllerServicesReducer = createReducer(
         ...state,
         controllerServices: response.controllerServices,
         loadedTimestamp: response.loadedTimestamp,
-        error: null,
         status: 'success' as const
     })),
-    on(managementControllerServicesApiError, (state, { error }) => ({
+    on(managementControllerServicesBannerApiError, (state, { error }) => ({
         ...state,
-        saving: false,
+        saving: false
-        error,
-        status: 'error' as const
     })),
     on(createControllerService, configureControllerService, deleteControllerService, (state, { request }) => ({
         ...state,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/state/management-controller-services/management-controller-services.selectors.ts

@@ -31,6 +31,11 @@ export const selectSaving = createSelector(
     (state: ManagementControllerServicesState) => state.saving
 );
 
+export const selectStatus = createSelector(
+    selectManagementControllerServicesState,
+    (state: ManagementControllerServicesState) => state.status
+);
+
 export const selectControllerServiceIdFromRoute = createSelector(selectCurrentRoute, (route) => {
     if (route) {
         // always select the controller service from the route

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/management-controller-services/management-controller-services.module.ts

@@ -20,10 +20,11 @@ import { CommonModule } from '@angular/common';
 import { ManagementControllerServices } from './management-controller-services.component';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { ControllerServiceTable } from '../../../../ui/common/controller-service/controller-service-table/controller-service-table.component';
+import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
 
 @NgModule({
     declarations: [ManagementControllerServices],
     exports: [ManagementControllerServices],
-    imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable]
+    imports: [CommonModule, NgxSkeletonLoaderModule, ControllerServiceTable, ErrorBanner]
 })
 export class ManagementControllerServicesModule {}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/error-helper.service.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { HttpErrorResponse } from '@angular/common/http';
+import * as ErrorDetailActions from '../state/error/error.actions';
+import { Action } from '@ngrx/store';
+import { NiFiCommon } from './nifi-common.service';
+
+@Injectable({ providedIn: 'root' })
+export class ErrorHelper {
+    constructor(private nifiCommon: NiFiCommon) {}
+
+    fullScreenError(errorResponse: HttpErrorResponse): Action {
+        let title: string;
+        let message: string;
+
+        switch (errorResponse.status) {
+            case 401:
+                title = 'Unauthorized';
+                break;
+            case 403:
+                title = 'Insufficient Permissions';
+                break;
+            case 409:
+                title = 'Invalid State';
+                break;
+            case 413:
+                title = 'Payload Too Large';
+                break;
+            case 503:
+            default:
+                title = 'An unexpected error has occurred';
+                break;
+        }
+
+        if (this.nifiCommon.isBlank(errorResponse.error)) {
+            message =
+                'An error occurred communicating with NiFi. Please check the logs and fix any configuration issues before restarting.';
+        } else {
+            message = errorResponse.error;
+        }
+
+        return ErrorDetailActions.fullScreenError({
+            errorDetail: {
+                title,
+                message
+            }
+        });
+    }
+
+    showErrorInContext(status: number): boolean {
+        return [400, 403, 404, 409, 413, 503].includes(status);
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/extension-types.service.ts

@@ -16,7 +16,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { Observable, throwError } from 'rxjs';
+import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { Bundle } from '../state/shared';
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/guard/authentication.guard.ts

@@ -80,7 +80,9 @@ export const authenticationGuard: CanMatchFn = (route, state) => {
                 .select(selectCurrentUserState)
                 .pipe(take(1))
                 .subscribe((userState) => {
-                    if (userState.status == 'pending') {
+                    if (userState.status == 'success') {
+                        resolve(true);
+                    } else {
                         userService
                             .getUser()
                             .pipe(take(1))
@@ -118,7 +120,7 @@ export const authenticationGuard: CanMatchFn = (route, state) => {
                                     }
                                 },
                                 error: (error) => {
-                                    // there is no anonymous access and we don't know this user - open the login page which handles login/registration/etc
+                                    // there is no anonymous access and we don't know this user - open the login page which handles login
                                     if (error.status === 401) {
                                         authStorage.removeToken();
                                         window.location.href = './login';
@@ -126,8 +128,6 @@ export const authenticationGuard: CanMatchFn = (route, state) => {
                                     resolve(false);
                                 }
                             });
-                    } else {
-                        resolve(true);
                     }
                 });
         });

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/interceptors/auth.interceptor.spec.ts

@@ -18,12 +18,20 @@
 import { TestBed } from '@angular/core/testing';
 
 import { AuthInterceptor } from './auth.interceptor';
+import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../state/error/error.reducer';
 
 describe('AuthInterceptor', () => {
     let service: AuthInterceptor;
 
     beforeEach(() => {
-        TestBed.configureTestingModule({});
+        TestBed.configureTestingModule({
+            providers: [
+                provideMockStore({
+                    initialState
+                })
+            ]
+        });
         service = TestBed.inject(AuthInterceptor);
     });
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/interceptors/auth.interceptor.ts

@@ -19,25 +19,54 @@ import { Injectable } from '@angular/core';
 import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Observable, tap } from 'rxjs';
 import { AuthStorage } from '../auth-storage.service';
+import { Store } from '@ngrx/store';
+import { NiFiState } from '../../state';
+import { fullScreenError } from '../../state/error/error.actions';
+import { NiFiCommon } from '../nifi-common.service';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AuthInterceptor implements HttpInterceptor {
-    constructor(private authStorage: AuthStorage) {}
+    routedToFullScreenError: boolean = false;
+
+    constructor(
+        private authStorage: AuthStorage,
+        private store: Store<NiFiState>,
+        private nifiCommon: NiFiCommon
+    ) {}
 
     intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
         return next.handle(request).pipe(
             tap({
-                error: (error) => {
+                error: (errorResponse) => {
-                    if (error instanceof HttpErrorResponse) {
+                    if (errorResponse instanceof HttpErrorResponse) {
-                        if (error.status === 401) {
+                        if (errorResponse.status === 401) {
-                            this.authStorage.removeToken();
+                            if (this.authStorage.hasToken()) {
+                                this.authStorage.removeToken();
 
-                            // navigate to the root of the app which will handle redirection to the
+                                let message: string = errorResponse.error;
-                            // login form if appropriate... TODO - replace with logout complete page?
+                                if (this.nifiCommon.isBlank(message)) {
-                            window.location.href = './login';
+                                    message = 'Your session has expired. Please navigate home to log in again.';
-                        } // TODO handle others (403)
+                                } else {
+                                    message += '. Please navigate home to log in again.';
+                                }
+
+                                this.routedToFullScreenError = true;
+
+                                this.store.dispatch(
+                                    fullScreenError({
+                                        errorDetail: {
+                                            title: 'Unauthorized',
+                                            message
+                                        }
+                                    })
+                                );
+                            } else if (!this.routedToFullScreenError) {
+                                // the user has never logged in, redirect them to do so
+                                window.location.href = './login';
+                            }
+                        }
                     }
                 }
             })

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/service/property-table-helper.service.ts

@@ -17,7 +17,7 @@
 
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { catchError, map, NEVER, Observable, switchMap, take } from 'rxjs';
+import { catchError, EMPTY, map, Observable, switchMap, take, takeUntil, tap } from 'rxjs';
 import {
     ControllerServiceCreator,
     ControllerServiceEntity,
@@ -32,9 +32,12 @@ import {
 } from '../state/shared';
 import { NewPropertyDialog } from '../ui/common/new-property-dialog/new-property-dialog.component';
 import { CreateControllerService } from '../ui/common/controller-service/create-controller-service/create-controller-service.component';
-import { ManagementControllerServiceService } from '../pages/settings/service/management-controller-service.service';
 import { ExtensionTypesService } from './extension-types.service';
 import { Client } from './client.service';
+import { NiFiState } from '../state';
+import { Store } from '@ngrx/store';
+import { snackBarError } from '../state/error/error.actions';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Injectable({
     providedIn: 'root'
@@ -42,6 +45,7 @@ import { Client } from './client.service';
 export class PropertyTableHelperService {
     constructor(
         private dialog: MatDialog,
+        private store: Store<NiFiState>,
         private extensionTypesService: ExtensionTypesService,
         private client: Client
     ) {}
@@ -63,12 +67,19 @@ export class PropertyTableHelperService {
             });
 
             return newPropertyDialogReference.componentInstance.newProperty.pipe(
-                take(1),
+                takeUntil(newPropertyDialogReference.afterClosed()),
                 switchMap((dialogResponse: NewPropertyDialogResponse) => {
                     return propertyDescriptorService
                         .getPropertyDescriptor(id, dialogResponse.name, dialogResponse.sensitive)
                         .pipe(
                             take(1),
+                            catchError((errorResponse: HttpErrorResponse) => {
+                                this.store.dispatch(snackBarError({ error: errorResponse.error }));
+
+                                // handle the error here to keep the observable alive so the
+                                // user can attempt to create the property again
+                                return EMPTY;
+                            }),
                             map((response) => {
                                 newPropertyDialogReference.close();
 
@@ -112,6 +123,11 @@ export class PropertyTableHelperService {
                 )
                 .pipe(
                     take(1),
+                    tap({
+                        error: (errorResponse: HttpErrorResponse) => {
+                            this.store.dispatch(snackBarError({ error: errorResponse.error }));
+                        }
+                    }),
                     switchMap((implementingTypesResponse) => {
                         // show the create controller service dialog with the types that implemented the interface
                         const createServiceDialogReference = this.dialog.open(CreateControllerService, {
@@ -122,7 +138,7 @@ export class PropertyTableHelperService {
                         });
 
                         return createServiceDialogReference.componentInstance.createControllerService.pipe(
-                            take(1),
+                            takeUntil(createServiceDialogReference.afterClosed()),
                             switchMap((controllerServiceType) => {
                                 // typically this sequence would be implemented with ngrx actions, however we are
                                 // currently in an edit session, and we need to return both the value (new service id)
@@ -142,6 +158,17 @@ export class PropertyTableHelperService {
 
                                 return controllerServiceCreator.createControllerService(payload).pipe(
                                     take(1),
+                                    catchError((errorResponse: HttpErrorResponse) => {
+                                        this.store.dispatch(
+                                            snackBarError({
+                                                error: `Unable to create new Service: ${errorResponse.error}`
+                                            })
+                                        );
+
+                                        // handle the error here to keep the observable alive so the
+                                        // user can attempt to create the service again
+                                        return EMPTY;
+                                    }),
                                     switchMap((createResponse) => {
                                         // if provided, call the callback function
                                         if (afterServiceCreated) {
@@ -153,6 +180,20 @@ export class PropertyTableHelperService {
                                             .getPropertyDescriptor(id, descriptor.name, false)
                                             .pipe(
                                                 take(1),
+                                                tap({
+                                                    error: (errorResponse: HttpErrorResponse) => {
+                                                        // we've errored getting the descriptor but since the service
+                                                        // was already created, we should close the create service dialog
+                                                        // so multiple service instances are not inadvertently created
+                                                        createServiceDialogReference.close();
+
+                                                        this.store.dispatch(
+                                                            snackBarError({
+                                                                error: `Service created but unable to reload Property Descriptor: ${errorResponse.error}`
+                                                            })
+                                                        );
+                                                    }
+                                                }),
                                                 map((descriptorResponse) => {
                                                     createServiceDialogReference.close();
 
@@ -162,10 +203,6 @@ export class PropertyTableHelperService {
                                                     };
                                                 })
                                             );
-                                    }),
-                                    catchError((error) => {
-                                        // TODO - show error
-                                        return NEVER;
                                     })
                                 );
                             })

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.actions.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { createAction, props } from '@ngrx/store';
+import { ErrorDetail } from './index';
+
+export const fullScreenError = createAction('[Error] Full Screen Error', props<{ errorDetail: ErrorDetail }>());
+
+export const snackBarError = createAction('[Error] Snackbar Error', props<{ error: string }>());
+
+export const addBannerError = createAction('[Error] Add Banner Error', props<{ error: string }>());
+
+export const clearBannerErrors = createAction('[Error] Clear Banner Errors');
+
+export const resetErrorState = createAction('[Error] Reset Error State');

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.effects.ts

@@ -0,0 +1,55 @@
+/*
+ * 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 { Actions, createEffect, ofType } from '@ngrx/effects';
+import * as ErrorActions from './error.actions';
+import { map, tap } from 'rxjs';
+import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+@Injectable()
+export class ErrorEffects {
+    constructor(
+        private actions$: Actions,
+        private router: Router,
+        private snackBar: MatSnackBar
+    ) {}
+
+    fullScreenError$ = createEffect(
+        () =>
+            this.actions$.pipe(
+                ofType(ErrorActions.fullScreenError),
+                tap(() => {
+                    this.router.navigate(['/error'], { replaceUrl: true });
+                })
+            ),
+        { dispatch: false }
+    );
+
+    snackBarError$ = createEffect(
+        () =>
+            this.actions$.pipe(
+                ofType(ErrorActions.snackBarError),
+                map((action) => action.error),
+                tap((error) => {
+                    this.snackBar.open(error, 'Dismiss', { duration: 30000 });
+                })
+            ),
+        { dispatch: false }
+    );
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.reducer.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { createReducer, on } from '@ngrx/store';
+import { ErrorState } from './index';
+import { resetErrorState, fullScreenError, addBannerError, clearBannerErrors } from './error.actions';
+import { produce } from 'immer';
+
+export const initialState: ErrorState = {
+    bannerErrors: null,
+    fullScreenError: null
+};
+
+export const errorReducer = createReducer(
+    initialState,
+    on(fullScreenError, (state, { errorDetail }) => ({
+        ...state,
+        fullScreenError: errorDetail
+    })),
+    on(addBannerError, (state, { error }) => {
+        return produce(state, (draftState) => {
+            if (draftState.bannerErrors === null) {
+                draftState.bannerErrors = [];
+            }
+
+            draftState.bannerErrors.push(error);
+        });
+    }),
+    on(clearBannerErrors, (state) => ({
+        ...state,
+        bannerErrors: null
+    })),
+    on(resetErrorState, (state) => ({
+        ...initialState
+    }))
+);

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/error.selectors.ts

@@ -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.
+ */
+
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { errorFeatureKey, ErrorState } from './index';
+
+export const selectErrorState = createFeatureSelector<ErrorState>(errorFeatureKey);
+
+export const selectFullScreenError = createSelector(selectErrorState, (state: ErrorState) => state.fullScreenError);
+
+export const selectBannerErrors = createSelector(selectErrorState, (state: ErrorState) => state.bannerErrors);

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/error/index.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export const errorFeatureKey = 'error';
+
+export interface ErrorDetail {
+    title: string;
+    message: string;
+}
+
+export interface ErrorState {
+    bannerErrors: string[] | null;
+    fullScreenError: ErrorDetail | null;
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/index.ts

@@ -33,9 +33,12 @@ import { flowConfigurationFeatureKey, FlowConfigurationState } from './flow-conf
 import { flowConfigurationReducer } from './flow-configuration/flow-configuration.reducer';
 import { componentStateFeatureKey, ComponentStateState } from './component-state';
 import { componentStateReducer } from './component-state/component-state.reducer';
+import { errorFeatureKey, ErrorState } from './error';
+import { errorReducer } from './error/error.reducer';
 
 export interface NiFiState {
     router: RouterReducerState;
+    [errorFeatureKey]: ErrorState;
     [currentUserFeatureKey]: CurrentUserState;
     [extensionTypesFeatureKey]: ExtensionTypesState;
     [aboutFeatureKey]: AboutState;
@@ -48,6 +51,7 @@ export interface NiFiState {
 
 export const rootReducers: ActionReducerMap<NiFiState> = {
     router: routerReducer,
+    [errorFeatureKey]: errorReducer,
     [currentUserFeatureKey]: currentUserReducer,
     [extensionTypesFeatureKey]: extensionTypesReducer,
     [aboutFeatureKey]: aboutReducer,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html

@@ -17,6 +17,7 @@
 
 <h2 mat-dialog-title>Edit Controller Service</h2>
 <form class="controller-service-edit-form" [formGroup]="editControllerServiceForm">
+    <error-banner></error-banner>
     <mat-dialog-content>
         <mat-tab-group>
             <mat-tab label="Settings">

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.spec.ts

@@ -21,6 +21,9 @@ import { EditControllerService } from './edit-controller-service.component';
 import { EditControllerServiceDialogRequest } from '../../../../state/shared';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Component } from '@angular/core';
+import { provideMockStore } from '@ngrx/store/testing';
+import { initialState } from '../../../../state/error/error.reducer';
 
 describe('EditControllerService', () => {
     let component: EditControllerService;
@@ -541,10 +544,22 @@ describe('EditControllerService', () => {
         }
     };
 
+    @Component({
+        selector: 'error-banner',
+        standalone: true,
+        template: ''
+    })
+    class MockErrorBanner {}
+
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [EditControllerService, BrowserAnimationsModule],
+            imports: [EditControllerService, MockErrorBanner, BrowserAnimationsModule],
-            providers: [{ provide: MAT_DIALOG_DATA, useValue: data }]
+            providers: [
+                { provide: MAT_DIALOG_DATA, useValue: data },
+                provideMockStore({
+                    initialState
+                })
+            ]
         });
         fixture = TestBed.createComponent(EditControllerService);
         component = fixture.componentInstance;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.ts

@@ -43,6 +43,7 @@ import { ControllerServiceApi } from '../controller-service-api/controller-servi
 import { Observable } from 'rxjs';
 import { ControllerServiceReferences } from '../controller-service-references/controller-service-references.component';
 import { NifiSpinnerDirective } from '../../spinner/nifi-spinner.directive';
+import { ErrorBanner } from '../../error-banner/error-banner.component';
 
 @Component({
     selector: 'edit-controller-service',
@@ -63,7 +64,8 @@ import { NifiSpinnerDirective } from '../../spinner/nifi-spinner.directive';
         ControllerServiceApi,
         ControllerServiceReferences,
         AsyncPipe,
-        NifiSpinnerDirective
+        NifiSpinnerDirective,
+        ErrorBanner
     ],
     styleUrls: ['./edit-controller-service.component.scss']
 })

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.html

@@ -0,0 +1,32 @@
+<!--
+  ~ 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.
+  -->
+
+<ng-container *ngIf="(messages$ | async)!; let messages">
+    <div class="banner-container border-t border-b px-6 py-3 flex justify-between items-center">
+        <ng-container *ngIf="messages.length === 1; else multipleMessages">
+            <div>{{ messages[0] }}</div>
+        </ng-container>
+        <ng-template #multipleMessages>
+            <ul>
+                <li *ngFor="let message of messages">{{ message }}</li>
+            </ul>
+        </ng-template>
+        <div class="flex flex-col mt-auto">
+            <button mat-stroked-button (click)="dismiss()">Dismiss</button>
+        </div>
+    </div>
+</ng-container>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.scss

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+.banner-container {
+    @include mat.button-density(-1);
+
+    ul {
+        list-style-type: disc;
+        list-style-position: inside;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.spec.ts

@@ -17,20 +17,20 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Banner } from './banner.component';
+import { ErrorBanner } from './error-banner.component';
 import { provideMockStore } from '@ngrx/store/testing';
-import { initialState } from '../../../state/flow/flow.reducer';
+import { initialState } from '../../../state/error/error.reducer';
 
-describe('Banner', () => {
+describe('ErrorBanner', () => {
-    let component: Banner;
+    let component: ErrorBanner;
-    let fixture: ComponentFixture<Banner>;
+    let fixture: ComponentFixture<ErrorBanner>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [Banner],
+            imports: [ErrorBanner],
             providers: [provideMockStore({ initialState })]
         });
-        fixture = TestBed.createComponent(Banner);
+        fixture = TestBed.createComponent(ErrorBanner);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/error-banner/error-banner.component.ts

@@ -17,28 +17,25 @@
 
 import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
-import { CanvasState } from '../../../state';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
-import { selectApiError } from '../../../state/flow/flow.selectors';
+import { MatButtonModule } from '@angular/material/button';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NiFiState } from '../../../state';
-import { NgClass, NgIf } from '@angular/common';
+import { selectBannerErrors } from '../../../state/error/error.selectors';
+import { clearBannerErrors } from '../../../state/error/error.actions';
 
 @Component({
-    selector: 'banner',
+    selector: 'error-banner',
     standalone: true,
-    imports: [NgClass, NgIf],
+    imports: [NgIf, NgForOf, MatButtonModule, AsyncPipe],
-    templateUrl: './banner.component.html',
+    templateUrl: './error-banner.component.html',
-    styleUrls: ['./banner.component.scss']
+    styleUrls: ['./error-banner.component.scss']
 })
-export class Banner {
+export class ErrorBanner {
-    message: string | null = '';
+    messages$ = this.store.select(selectBannerErrors);
-    severity: string = 'alert';
 
-    constructor(private store: Store<CanvasState>) {
+    constructor(private store: Store<NiFiState>) {}
-        this.store
+
-            .select(selectApiError)
+    dismiss(): void {
-            .pipe(takeUntilDestroyed())
+        this.store.dispatch(clearBannerErrors());
-            .subscribe((message) => {
-                this.message = message;
-            });
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.html

@@ -15,13 +15,13 @@
   ~ limitations under the License.
   -->
 
-<div class="login-message w-96 flex flex-col gap-y-3">
+<div class="page-content w-1/2 flex flex-col gap-y-5">
-    <div class="flex justify-between items-center">
+    <div class="flex justify-between items-center gap-x-3">
-        <div class="login-title">{{ title }}</div>
+        <div class="title whitespace-nowrap overflow-hidden text-ellipsis" [title]="title">{{ title }}</div>
         <div class="flex gap-x-3">
-            <a (click)="logout()" *ngIf="hasToken()">log out</a>
+            <a (click)="logout()" *ngIf="hasToken()" class="whitespace-nowrap">log out</a>
             <a [routerLink]="['/']">home</a>
         </div>
     </div>
-    <div class="text-sm">{{ message }}</div>
+    <ng-content></ng-content>
 </div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.scss

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-.login-message {
+.page-content {
-    .login-title {
+    .title {
         font-size: 18px;
         font-weight: 600;
         font-family: Roboto Slab;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.spec.ts

@@ -17,21 +17,20 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LoginMessage } from './login-message.component';
+import { PageContent } from './page-content.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterModule } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
-describe('LoginMessage', () => {
+describe('PageContent', () => {
-    let component: LoginMessage;
+    let component: PageContent;
-    let fixture: ComponentFixture<LoginMessage>;
+    let fixture: ComponentFixture<PageContent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [LoginMessage],
+            imports: [PageContent, HttpClientTestingModule, RouterModule, RouterTestingModule]
-            imports: [HttpClientTestingModule, RouterModule, RouterTestingModule]
         });
-        fixture = TestBed.createComponent(LoginMessage);
+        fixture = TestBed.createComponent(PageContent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/page-content/page-content.component.ts

@@ -16,17 +16,20 @@
  */
 
 import { Component, Input } from '@angular/core';
-import { AuthStorage } from '../../../../service/auth-storage.service';
+import { AuthStorage } from '../../../service/auth-storage.service';
-import { AuthService } from '../../../../service/auth.service';
+import { AuthService } from '../../../service/auth.service';
+import { RouterLink } from '@angular/router';
+import { NgIf } from '@angular/common';
 
 @Component({
-    selector: 'login-message',
+    selector: 'page-content',
-    templateUrl: './login-message.component.html',
+    standalone: true,
-    styleUrls: ['./login-message.component.scss']
+    templateUrl: './page-content.component.html',
+    imports: [RouterLink, NgIf],
+    styleUrls: ['./page-content.component.scss']
 })
-export class LoginMessage {
+export class PageContent {
     @Input() title: string = '';
-    @Input() message: string = '';
 
     constructor(
         private authStorage: AuthStorage,