show errors in center of page

apache · Aug 13, 2024 · b080098 · b080098
1 parent f09db72
commit b080098
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 47 deletions.
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.module.ts
@@ -17,7 +17,6 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {
@@ -59,8 +58,7 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
             maxAge: 25,
             logOnly: environment.production,
             autoPause: true
-        }),
-        MatSnackBarModule
+        })
     ],
     providers: [
         disableAnimations === 'true' ? provideNoopAnimations() : provideAnimations(),

diff --git a/...orm-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html b/...orm-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
@@ -381,10 +381,14 @@ <h3 class="primary-color">Advanced</h3>
                 </div>
             </form>
         } @else {
-            @if (processorDetailsLoading$ | async; as processorDetailsLoading) {
+            @if (processorDetailsLoading$ | async) {
                 <div class="h-full flex items-center justify-center">
                     <mat-spinner color="primary"></mat-spinner>
                 </div>
+            } @else if (processorDetailsError()) {
+                <div class="flex flex-1 justify-center items-center">
+                    <i class="fa fa-warning caution-color mr-2"></i>{{ processorDetailsError() }}
+                </div>
             }
         }
     </div>

diff --git a/...sform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts b/...sform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts
@@ -26,6 +26,7 @@ import {
     selectEditableFromRoute,
     selectJoltTransformJsonProcessorDetailsState,
     selectProcessorDetails,
+    selectProcessorDetailsError,
     selectProcessorDetailsLoading,
     selectProcessorIdFromRoute,
     selectRevisionFromRoute
@@ -86,6 +87,7 @@ export class JoltTransformJsonUi implements OnDestroy {
     };
     processorDetails$ = this.store.select(selectProcessorDetails);
     processorDetailsLoading$ = this.store.select(selectProcessorDetailsLoading);
+    processorDetailsError = this.store.selectSignal(selectProcessorDetailsError);
     editable: boolean = false;
     createNew: (existingEntries: string[]) => Observable<MapTableEntry> =
         this.mapTableHelperService.createNewEntry('Attribute');

diff --git a/...src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/index.ts b/...src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/index.ts
@@ -17,6 +17,7 @@
 
 export interface JoltTransformJsonProcessorDetailsState {
     loading: boolean;
+    error: string | null;
     processorDetails: ProcessorDetails | null;
 }
 

diff --git a/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.actions.ts b/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.actions.ts
@@ -37,10 +37,5 @@ export const loadProcessorDetailsSuccess = createAction(
 
 export const loadProcessorDetailsFailure = createAction(
     `${JOLT_TRANSFORM_JSON_PROCESSOR_DETAILS_PREFIX} Load Processor Details Failure`,
-    props<{ response: HttpErrorResponse }>()
-);
-
-export const snackbarError = createAction(
-    `${JOLT_TRANSFORM_JSON_PROCESSOR_DETAILS_PREFIX} Snackbar Error`,
-    props<{ error: string }>()
+    props<{ response: string }>()
 );
diff --git a/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.effects.ts b/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.effects.ts
@@ -20,17 +20,15 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import * as JoltTransformJsonUiActions from './jolt-transform-json-processor-details.actions';
 import { JoltTransformJsonUiService } from '../../service/jolt-transform-json-ui.service';
 import { HttpErrorResponse } from '@angular/common/http';
-import { catchError, from, map, of, switchMap, tap } from 'rxjs';
+import { catchError, from, map, of, switchMap } from 'rxjs';
 import { loadProcessorDetailsFailure } from './jolt-transform-json-processor-details.actions';
 import { ProcessorDetails } from './index';
-import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable()
 export class JoltTransformJsonProcessorDetailsEffects {
     constructor(
         private actions$: Actions,
-        private joltTransformJsonUiService: JoltTransformJsonUiService,
-        private snackBar: MatSnackBar
+        private joltTransformJsonUiService: JoltTransformJsonUiService
     ) {}
 
     loadProcessorDetails$ = createEffect(() =>
@@ -45,45 +43,24 @@ export class JoltTransformJsonProcessorDetailsEffects {
                         })
                     ),
                     catchError((errorResponse: HttpErrorResponse) => {
+                        let errorMessage = 'An unspecified error occurred.';
+
+                        if (errorResponse.status !== 0) {
+                            if (typeof errorResponse.error === 'string') {
+                                errorMessage = errorResponse.error;
+                            } else {
+                                errorMessage = errorResponse.message || `${errorResponse.status}`;
+                            }
+                        }
+
                         return of(
                             loadProcessorDetailsFailure({
-                                response: errorResponse
+                                response: errorMessage
                             })
                         );
                     })
                 )
             )
         )
     );
-
-    loadProcessorDetailsFailure$ = createEffect(() =>
-        this.actions$.pipe(
-            ofType(JoltTransformJsonUiActions.loadProcessorDetailsFailure),
-            map((action) => action.response),
-            switchMap((errorResponse) => {
-                let errorMessage = 'An unspecified error occurred.';
-                if (errorResponse.status !== 0) {
-                    if (typeof errorResponse.error === 'string') {
-                        errorMessage = errorResponse.error;
-                    } else {
-                        errorMessage = errorResponse.message || `${errorResponse.status}`;
-                    }
-                }
-
-                return of(JoltTransformJsonUiActions.snackbarError({ error: errorMessage }));
-            })
-        )
-    );
-
-    snackBarError$ = createEffect(
-        () =>
-            this.actions$.pipe(
-                ofType(JoltTransformJsonUiActions.snackbarError),
-                map((action) => action.error),
-                tap((error) => {
-                    this.snackBar.open(error, 'Dismiss', { duration: 30000 });
-                })
-            ),
-        { dispatch: false }
-    );
 }
diff --git a/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.reducer.ts b/...te/jolt-transform-json-processor-details/jolt-transform-json-processor-details.reducer.ts
@@ -26,6 +26,7 @@ import {
 
 export const initialState: JoltTransformJsonProcessorDetailsState = {
     loading: false,
+    error: null,
     processorDetails: null
 };
 
@@ -36,16 +37,18 @@ export const joltTransformJsonProcessorDetailsReducer = createReducer(
     })),
     on(loadProcessorDetails, (state) => ({
         ...state,
+        error: null,
         loading: true
     })),
     on(loadProcessorDetailsSuccess, (state, { response }) => ({
         ...state,
         processorDetails: response,
         loading: false
     })),
-    on(loadProcessorDetailsFailure, (state) => ({
+    on(loadProcessorDetailsFailure, (state, { response }) => ({
         ...state,
         processorDetails: null,
+        error: response,
         loading: false
     }))
 );
diff --git a/.../jolt-transform-json-processor-details/jolt-transform-json-processor-details.selectors.ts b/.../jolt-transform-json-processor-details/jolt-transform-json-processor-details.selectors.ts
@@ -39,6 +39,11 @@ export const selectProcessorDetailsLoading = createSelector(
     (state: JoltTransformJsonProcessorDetailsState) => state.loading
 );
 
+export const selectProcessorDetailsError = createSelector(
+    selectJoltTransformJsonProcessorDetailsState,
+    (state: JoltTransformJsonProcessorDetailsState) => state.error
+);
+
 export const selectProcessorIdFromRoute = createSelector(selectCurrentRoute, (route) => {
     if (route) {
         return route.queryParams.id;