NIFI-13098:

- Updating error handling in Global and Component Policy pages.
apache · Apr 25, 2024 · c437f9d · c437f9d
1 parent 7bb6eeb
commit c437f9d
Show file tree

Hide file tree

Showing 16 changed files with 65 additions and 69 deletions.
diff --git a/.../src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.actions.ts b/.../src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.actions.ts
@@ -97,8 +97,8 @@ export const resetAccessPolicy = createAction(
     props<{ response: ResetAccessPolicy }>()
 );
 
-export const accessPolicyApiError = createAction(
-    `${ACCESS_POLICY_PREFIX} Access Policy Api Error`,
+export const accessPolicyApiBannerError = createAction(
+    `${ACCESS_POLICY_PREFIX} Access Policy Api Banner Error`,
     props<{ response: LoadAccessPolicyError }>()
 );
 

diff --git a/.../src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.effects.ts b/.../src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.effects.ts
@@ -22,6 +22,7 @@ import { NiFiState } from '../../../../state';
 import { Store } from '@ngrx/store';
 import { Router } from '@angular/router';
 import * as AccessPolicyActions from './access-policy.actions';
+import * as ErrorActions from '../../../../state/error/error.actions';
 import { catchError, from, map, of, switchMap, take, tap } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { AccessPolicyService } from '../../service/access-policy.service';
@@ -34,6 +35,7 @@ import { AddTenantsToPolicyRequest } from './index';
 import { selectUserGroups, selectUsers } from '../tenants/tenants.selectors';
 import { OverridePolicyDialog } from '../../ui/common/override-policy-dialog/override-policy-dialog.component';
 import { MEDIUM_DIALOG, SMALL_DIALOG } from '../../../../index';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Injectable()
 export class AccessPolicyEffects {
@@ -105,11 +107,11 @@ export class AccessPolicyEffects {
                             }
                         });
                     }),
-                    catchError((error) => {
+                    catchError((errorResponse: HttpErrorResponse) => {
                         let policyStatus: PolicyStatus | undefined;
-                        if (error.status === 404) {
+                        if (errorResponse.status === 404) {
                             policyStatus = PolicyStatus.NotFound;
-                        } else if (error.status === 403) {
+                        } else if (errorResponse.status === 403) {
                             policyStatus = PolicyStatus.Forbidden;
                         }
 
@@ -123,9 +125,9 @@ export class AccessPolicyEffects {
                             );
                         } else {
                             return of(
-                                AccessPolicyActions.accessPolicyApiError({
+                                AccessPolicyActions.accessPolicyApiBannerError({
                                     response: {
-                                        error: error.error
+                                        error: errorResponse.error
                                     }
                                 })
                             );
@@ -153,11 +155,11 @@ export class AccessPolicyEffects {
                             }
                         });
                     }),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) =>
                         of(
-                            AccessPolicyActions.accessPolicyApiError({
+                            AccessPolicyActions.accessPolicyApiBannerError({
                                 response: {
-                                    error: error.error
+                                    error: errorResponse.error
                                 }
                             })
                         )
@@ -227,11 +229,11 @@ export class AccessPolicyEffects {
                             }
                         });
                     }),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) =>
                         of(
-                            AccessPolicyActions.accessPolicyApiError({
+                            AccessPolicyActions.accessPolicyApiBannerError({
                                 response: {
-                                    error: error.error
+                                    error: errorResponse.error
                                 }
                             })
                         )
@@ -331,11 +333,11 @@ export class AccessPolicyEffects {
                             }
                         });
                     }),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) =>
                         of(
-                            AccessPolicyActions.accessPolicyApiError({
+                            AccessPolicyActions.accessPolicyApiBannerError({
                                 response: {
-                                    error: error.error
+                                    error: errorResponse.error
                                 }
                             })
                         )
@@ -401,11 +403,11 @@ export class AccessPolicyEffects {
                             }
                         });
                     }),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) =>
                         of(
-                            AccessPolicyActions.accessPolicyApiError({
+                            AccessPolicyActions.accessPolicyApiBannerError({
                                 response: {
-                                    error: error.error
+                                    error: errorResponse.error
                                 }
                             })
                         )
@@ -455,11 +457,11 @@ export class AccessPolicyEffects {
                             }
                         });
                     }),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) =>
                         of(
-                            AccessPolicyActions.accessPolicyApiError({
+                            AccessPolicyActions.accessPolicyApiBannerError({
                                 response: {
-                                    error: error.error
+                                    error: errorResponse.error
                                 }
                             })
                         )
@@ -468,4 +470,13 @@ export class AccessPolicyEffects {
             )
         )
     );
+
+    accessPolicyApiBannerError$ = createEffect(() =>
+        this.actions$.pipe(
+            ofType(AccessPolicyActions.accessPolicyApiBannerError),
+            map((action) => action.response),
+            tap(() => this.dialog.closeAll()),
+            switchMap((response) => of(ErrorActions.addBannerError({ error: response.error })))
+        )
+    );
 }
diff --git a/.../src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.reducer.ts b/.../src/main/nifi/src/app/pages/access-policies/state/access-policy/access-policy.reducer.ts
@@ -20,7 +20,7 @@ import { createReducer, on } from '@ngrx/store';
 import {
     addTenantsToPolicy,
     createAccessPolicySuccess,
-    accessPolicyApiError,
+    accessPolicyApiBannerError,
     loadAccessPolicy,
     loadAccessPolicySuccess,
     removeTenantFromPolicy,
@@ -32,7 +32,6 @@ import {
 export const initialState: AccessPolicyState = {
     saving: false,
     loadedTimestamp: '',
-    error: null,
     status: 'pending'
 };
 
@@ -69,11 +68,10 @@ export const accessPolicyReducer = createReducer(
         loadedTimestamp: 'N/A',
         status: 'success' as const
     })),
-    on(accessPolicyApiError, (state, { response }) => ({
+    on(accessPolicyApiBannerError, (state) => ({
         ...state,
-        error: response.error,
-        accessPolicy: undefined,
-        policyStatus: undefined,
+        loadedTimestamp: state.loadedTimestamp == initialState.loadedTimestamp ? 'N/A' : state.loadedTimestamp,
+        saving: false,
         status: 'error' as const
     })),
     on(resetAccessPolicyState, () => ({

diff --git a/...ifi-web-frontend/src/main/nifi/src/app/pages/access-policies/state/access-policy/index.ts b/...ifi-web-frontend/src/main/nifi/src/app/pages/access-policies/state/access-policy/index.ts
@@ -69,6 +69,5 @@ export interface AccessPolicyState {
     accessPolicy?: AccessPolicyEntity;
     saving: boolean;
     loadedTimestamp: string;
-    error: string | null;
     status: 'pending' | 'loading' | 'error' | 'success';
 }
diff --git a/...-web-frontend/src/main/nifi/src/app/pages/access-policies/state/policy-component/index.ts b/...-web-frontend/src/main/nifi/src/app/pages/access-policies/state/policy-component/index.ts
@@ -34,6 +34,5 @@ export interface PolicyComponentState {
     allowRemoteAccess: boolean;
     resource: string;
     loadedTimestamp: string;
-    error: string | null;
-    status: 'pending' | 'loading' | 'error' | 'success';
+    status: 'pending' | 'loading' | 'success';
 }
diff --git a/...ain/nifi/src/app/pages/access-policies/state/policy-component/policy-component.actions.ts b/...ain/nifi/src/app/pages/access-policies/state/policy-component/policy-component.actions.ts
@@ -30,9 +30,4 @@ export const loadPolicyComponentSuccess = createAction(
     props<{ response: LoadPolicyComponentSuccess }>()
 );
 
-export const policyComponentApiError = createAction(
-    `${POLICY_COMPONENT_PREFIX} Policy Component Api Error`,
-    props<{ error: string }>()
-);
-
 export const resetPolicyComponentState = createAction(`${POLICY_COMPONENT_PREFIX} Reset Policy Component State`);
diff --git a/...ain/nifi/src/app/pages/access-policies/state/policy-component/policy-component.effects.ts b/...ain/nifi/src/app/pages/access-policies/state/policy-component/policy-component.effects.ts
@@ -18,8 +18,10 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as PolicyComponentActions from './policy-component.actions';
+import * as ErrorActions from '../../../../state/error/error.actions';
 import { catchError, from, map, of, switchMap } from 'rxjs';
 import { AccessPolicyService } from '../../service/access-policy.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Injectable()
 export class PolicyComponentEffects {
@@ -47,8 +49,8 @@ export class PolicyComponentEffects {
                             }
                         })
                     ),
-                    catchError((error) => {
-                        if (error.status === 403) {
+                    catchError((errorResponse: HttpErrorResponse) => {
+                        if (errorResponse.status === 403) {
                             return of(
                                 PolicyComponentActions.loadPolicyComponentSuccess({
                                     response: {
@@ -60,8 +62,8 @@ export class PolicyComponentEffects {
                             );
                         } else {
                             return of(
-                                PolicyComponentActions.policyComponentApiError({
-                                    error: error.error
+                                ErrorActions.snackBarError({
+                                    error: errorResponse.error
                                 })
                             );
                         }

diff --git a/...ain/nifi/src/app/pages/access-policies/state/policy-component/policy-component.reducer.ts b/...ain/nifi/src/app/pages/access-policies/state/policy-component/policy-component.reducer.ts
@@ -17,19 +17,13 @@
 
 import { PolicyComponentState } from './index';
 import { createReducer, on } from '@ngrx/store';
-import {
-    loadPolicyComponent,
-    loadPolicyComponentSuccess,
-    resetPolicyComponentState,
-    policyComponentApiError
-} from './policy-component.actions';
+import { loadPolicyComponent, loadPolicyComponentSuccess, resetPolicyComponentState } from './policy-component.actions';
 
 export const initialState: PolicyComponentState = {
     label: '',
     resource: '',
     allowRemoteAccess: false,
     loadedTimestamp: '',
-    error: null,
     status: 'pending'
 };
 
@@ -46,11 +40,6 @@ export const policyComponentReducer = createReducer(
         allowRemoteAccess: response.allowRemoteAccess,
         status: 'success' as const
     })),
-    on(policyComponentApiError, (state, { error }) => ({
-        ...state,
-        error: error,
-        status: 'error' as const
-    })),
     on(resetPolicyComponentState, () => ({
         ...initialState
     }))

diff --git a/...-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/index.ts b/...-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/index.ts
@@ -28,6 +28,5 @@ export interface TenantsState {
     users: UserEntity[];
     userGroups: UserGroupEntity[];
     loadedTimestamp: string;
-    error: string | null;
-    status: 'pending' | 'loading' | 'error' | 'success';
+    status: 'pending' | 'loading' | 'success';
 }
diff --git a/...web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/tenants.actions.ts b/...web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/tenants.actions.ts
@@ -27,6 +27,4 @@ export const loadTenantsSuccess = createAction(
     props<{ response: LoadTenantsSuccess }>()
 );
 
-export const tenantsApiError = createAction(`${TENANTS_PREFIX} Tenants Api Error`, props<{ error: string }>());
-
 export const resetTenantsState = createAction(`${TENANTS_PREFIX} Reset Tenants State`);
diff --git a/...web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/tenants.effects.ts b/...web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/tenants.effects.ts
@@ -18,8 +18,10 @@
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as TenantsActions from './tenants.actions';
+import * as ErrorActions from '../../../../state/error/error.actions';
 import { catchError, combineLatest, map, of, switchMap } from 'rxjs';
 import { AccessPolicyService } from '../../service/access-policy.service';
+import { HttpErrorResponse } from '@angular/common/http';
 
 @Injectable()
 export class TenantsEffects {
@@ -41,10 +43,10 @@ export class TenantsEffects {
                             }
                         })
                     ),
-                    catchError((error) =>
+                    catchError((errorResponse: HttpErrorResponse) =>
                         of(
-                            TenantsActions.tenantsApiError({
-                                error: error.error
+                            ErrorActions.snackBarError({
+                                error: errorResponse.error
                             })
                         )
                     )

diff --git a/...web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/tenants.reducer.ts b/...web-frontend/src/main/nifi/src/app/pages/access-policies/state/tenants/tenants.reducer.ts
@@ -17,13 +17,12 @@
 
 import { TenantsState } from './index';
 import { createReducer, on } from '@ngrx/store';
-import { loadTenants, loadTenantsSuccess, resetTenantsState, tenantsApiError } from './tenants.actions';
+import { loadTenants, loadTenantsSuccess, resetTenantsState } from './tenants.actions';
 
 export const initialState: TenantsState = {
     users: [],
     userGroups: [],
     loadedTimestamp: '',
-    error: null,
     status: 'pending'
 };
 
@@ -39,11 +38,6 @@ export const tenantsReducer = createReducer(
         userGroups: response.userGroups,
         status: 'success' as const
     })),
-    on(tenantsApiError, (state, { error }) => ({
-        ...state,
-        error: error,
-        status: 'error' as const
-    })),
     on(resetTenantsState, () => ({
         ...initialState
     }))

diff --git a/...ges/access-policies/ui/component-access-policies/component-access-policies.component.html b/...ges/access-policies/ui/component-access-policies/component-access-policies.component.html
@@ -24,6 +24,7 @@
         @if (policyComponentState$ | async; as policyComponentState) {
             @if (flowConfiguration$ | async; as flowConfiguration) {
                 <div class="component-access-policies flex flex-col h-full gap-y-2">
+                    <error-banner></error-banner>
                     <div class="accent-color font-medium">
                         <div class="mb-2">
                             @switch (accessPolicyState.policyStatus) {
@@ -61,7 +62,11 @@
                                     </div>
                                     <div class="flex flex-col">
                                         <div class="operation-context-name">
-                                            {{ policyComponentState.label }}
+                                            {{
+                                                policyComponentState.label
+                                                    ? policyComponentState.label
+                                                    : resourceIdentifier
+                                            }}
                                         </div>
                                         <div class="operation-context-type primary-color">
                                             {{ getContextType() }}

diff --git a/...pp/pages/access-policies/ui/component-access-policies/component-access-policies.module.ts b/...pp/pages/access-policies/ui/component-access-policies/component-access-policies.module.ts
@@ -28,6 +28,7 @@ import { ComponentAccessPoliciesRoutingModule } from './component-access-policie
 import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { PolicyTable } from '../common/policy-table/policy-table.component';
 import { MatButtonModule } from '@angular/material/button';
+import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
 
 @NgModule({
     declarations: [ComponentAccessPolicies],
@@ -43,7 +44,8 @@ import { MatButtonModule } from '@angular/material/button';
         MatSelectModule,
         NifiTooltipDirective,
         PolicyTable,
-        MatButtonModule
+        MatButtonModule,
+        ErrorBanner
     ]
 })
 export class ComponentAccessPoliciesModule {}
diff --git a/...app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html b/...app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html
@@ -23,6 +23,7 @@
     } @else {
         @if (flowConfiguration$ | async; as flowConfiguration) {
             <div class="global-access-policies flex flex-col h-full gap-y-2">
+                <error-banner></error-banner>
                 <div class="accent-color font-medium">
                     <div class="mb-2">
                         @switch (accessPolicyState.policyStatus) {

diff --git a/.../src/app/pages/access-policies/ui/global-access-policies/global-access-policies.module.ts b/.../src/app/pages/access-policies/ui/global-access-policies/global-access-policies.module.ts
@@ -28,6 +28,7 @@ import { GlobalAccessPoliciesRoutingModule } from './global-access-policies-rout
 import { NifiTooltipDirective } from '../../../../ui/common/tooltips/nifi-tooltip.directive';
 import { PolicyTable } from '../common/policy-table/policy-table.component';
 import { MatButtonModule } from '@angular/material/button';
+import { ErrorBanner } from '../../../../ui/common/error-banner/error-banner.component';
 
 @NgModule({
     declarations: [GlobalAccessPolicies],
@@ -43,7 +44,8 @@ import { MatButtonModule } from '@angular/material/button';
         MatSelectModule,
         NifiTooltipDirective,
         PolicyTable,
-        MatButtonModule
+        MatButtonModule,
+        ErrorBanner
     ]
 })
 export class GlobalAccessPoliciesModule {}