[NIFI-13589] improve loading and error handling for jolt UI (#9155)

* [NIFI-13589] improve loading and error handling for jolt UI

* remove unused state

* cleanup more state

* show errors in center of page

This closes #9155

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html

@@ -97,7 +97,7 @@
                                         (codeMirrorLoaded)="initSpecEditor($event)"></ngx-codemirror>
                                 </div>
                                 <div class="w-full overflow-ellipsis overflow-hidden whitespace-nowrap">
-                                    @if (joltState.validate().saving) {
+                                    @if (joltState.validate().loading) {
                                         <i
                                             class="fa fa-refresh fa-spin mr-2"
                                             nifiTooltip
@@ -293,7 +293,7 @@
                                 </div>
                                 <div class="flex flex-1 mt-2 justify-start">
                                     <div class="w-full overflow-ellipsis overflow-hidden whitespace-nowrap">
-                                        @if (joltState.transform().saving) {
+                                        @if (joltState.transform().loading) {
                                             <i
                                                 class="fa fa-refresh fa-spin mr-2"
                                                 nifiTooltip
@@ -381,9 +381,15 @@
                 </div>
             </form>
         } @else {
-            <div class="flex flex-1 justify-center items-center">
+            @if (processorDetailsLoading$ | async) {
-                <i class="fa fa-warning caution-color mr-2"></i>An error has occurred loading the editor.
+                <div class="h-full flex items-center justify-center">
-            </div>
+                    <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>
 </div>

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts

@@ -26,6 +26,8 @@ import {
     selectEditableFromRoute,
     selectJoltTransformJsonProcessorDetailsState,
     selectProcessorDetails,
+    selectProcessorDetailsError,
+    selectProcessorDetailsLoading,
     selectProcessorIdFromRoute,
     selectRevisionFromRoute
 } from '../state/jolt-transform-json-processor-details/jolt-transform-json-processor-details.selectors';
@@ -84,6 +86,8 @@ export class JoltTransformJsonUi implements OnDestroy {
         transform: this.store.selectSignal(selectJoltTransformJsonTransformState)
     };
     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');

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.module.ts

@@ -39,6 +39,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { JoltTransformJsonTransformEffects } from '../state/jolt-transform-json-transform/jolt-transform-json-transform.effects';
 import { JoltTransformJsonValidateEffects } from '../state/jolt-transform-json-validate/jolt-transform-json-validate.effects';
 import { JoltTransformJsonPropertyEffects } from '../state/jolt-transform-json-property/jolt-transform-json-property.effects';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @NgModule({
     declarations: [JoltTransformJsonUi],
@@ -70,7 +71,8 @@ import { JoltTransformJsonPropertyEffects } from '../state/jolt-transform-json-p
         ComponentContext,
         MatExpansionModule,
         FormsModule,
-        MapTable
+        MapTable,
+        MatProgressSpinnerModule
     ]
 })
 export class JoltTransformJsonUiModule {}

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/index.ts

@@ -16,7 +16,8 @@
  */
 
 export interface JoltTransformJsonProcessorDetailsState {
-    saving: boolean;
+    loading: boolean;
+    error: string | null;
     processorDetails: ProcessorDetails | null;
 }
 

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/jolt-transform-json-processor-details.actions.ts

@@ -37,5 +37,5 @@ export const loadProcessorDetailsSuccess = createAction(
 
 export const loadProcessorDetailsFailure = createAction(
     `${JOLT_TRANSFORM_JSON_PROCESSOR_DETAILS_PREFIX} Load Processor Details Failure`,
-    props<{ response: HttpErrorResponse }>()
+    props<{ response: string }>()
 );

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/jolt-transform-json-processor-details.effects.ts

@@ -43,9 +43,19 @@ 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
                             })
                         );
                     })

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/jolt-transform-json-processor-details.reducer.ts

@@ -18,13 +18,15 @@
 import { JoltTransformJsonProcessorDetailsState } from './index';
 import { createReducer, on } from '@ngrx/store';
 import {
+    loadProcessorDetails,
     loadProcessorDetailsFailure,
     loadProcessorDetailsSuccess,
     resetJoltTransformJsonProcessorDetailsState
 } from './jolt-transform-json-processor-details.actions';
 
 export const initialState: JoltTransformJsonProcessorDetailsState = {
-    saving: false,
+    loading: false,
+    error: null,
     processorDetails: null
 };
 
@@ -33,12 +35,20 @@ export const joltTransformJsonProcessorDetailsReducer = createReducer(
     on(resetJoltTransformJsonProcessorDetailsState, () => ({
         ...initialState
     })),
+    on(loadProcessorDetails, (state) => ({
+        ...state,
+        error: null,
+        loading: true
+    })),
     on(loadProcessorDetailsSuccess, (state, { response }) => ({
         ...state,
-        processorDetails: response
+        processorDetails: response,
+        loading: false
     })),
-    on(loadProcessorDetailsFailure, (state) => ({
+    on(loadProcessorDetailsFailure, (state, { response }) => ({
         ...state,
-        processorDetails: null
+        processorDetails: null,
+        error: response,
+        loading: false
     }))
 );

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-processor-details/jolt-transform-json-processor-details.selectors.ts

@@ -34,9 +34,14 @@ export const selectProcessorDetails = createSelector(
     (state: JoltTransformJsonProcessorDetailsState) => state.processorDetails
 );
 
-export const selectSaving = createSelector(
+export const selectProcessorDetailsLoading = createSelector(
     selectJoltTransformJsonProcessorDetailsState,
-    (state: JoltTransformJsonProcessorDetailsState) => state.saving
+    (state: JoltTransformJsonProcessorDetailsState) => state.loading
+);
+
+export const selectProcessorDetailsError = createSelector(
+    selectJoltTransformJsonProcessorDetailsState,
+    (state: JoltTransformJsonProcessorDetailsState) => state.error
 );
 
 export const selectProcessorIdFromRoute = createSelector(selectCurrentRoute, (route) => {

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-transform/index.ts

@@ -18,7 +18,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 
 export interface JoltTransformJsonTransformState {
-    saving: boolean;
+    loading: boolean;
     transformationResponse?: TransformJoltSpecSuccess | null;
     transformationFailureResponse?: HttpErrorResponse | null;
 }

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-transform/jolt-transform-json-transform.reducer.ts

@@ -25,7 +25,7 @@ import {
 } from './jolt-transform-json-transform.actions';
 
 export const initialState: JoltTransformJsonTransformState = {
-    saving: false,
+    loading: false,
     transformationResponse: null,
     transformationFailureResponse: null
 };
@@ -37,16 +37,16 @@ export const joltTransformJsonTransformReducer = createReducer(
     })),
     on(transformJoltSpec, (state) => ({
         ...state,
-        saving: true
+        loading: true
     })),
     on(transformJoltSpecSuccess, (state, { response }) => ({
         ...state,
-        saving: false,
+        loading: false,
         transformationResponse: response
     })),
     on(transformJoltSpecFailure, (state, { response }) => ({
         ...state,
-        saving: false,
+        loading: false,
         transformationResponse: null,
         transformationFailureResponse: response
     }))

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-transform/jolt-transform-json-transform.selectors.ts

@@ -27,8 +27,3 @@ export const selectJoltTransformJsonTransformState = createSelector(
     selectJoltTransformJsonUiState,
     (state: JoltTransformJsonUiState) => state[joltTransformJsonTransformFeatureKey]
 );
-
-export const selectSaving = createSelector(
-    selectJoltTransformJsonTransformState,
-    (state: JoltTransformJsonTransformState) => state.saving
-);

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-validate/index.ts

@@ -18,7 +18,7 @@
 import { HttpErrorResponse } from '@angular/common/http';
 
 export interface JoltTransformJsonValidateState {
-    saving: boolean | null;
+    loading: boolean | null;
     validationResponse?: ValidateJoltSpecSuccess | null;
     validationFailureResponse?: HttpErrorResponse | null;
 }

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-validate/jolt-transform-json-validate.reducer.ts

@@ -26,7 +26,7 @@ import {
 } from './jolt-transform-json-validate.actions';
 
 export const initialState: JoltTransformJsonValidateState = {
-    saving: false,
+    loading: false,
     validationResponse: null,
     validationFailureResponse: null
 };
@@ -38,21 +38,21 @@ export const joltTransformJsonValidateReducer = createReducer(
     })),
     on(validateJoltSpec, (state) => ({
         ...state,
-        saving: true
+        loading: true
     })),
     on(validateJoltSpecSuccess, (state, { response }) => ({
         ...state,
-        saving: false,
+        loading: false,
         validationResponse: response
     })),
     on(validateJoltSpecFailure, (state, { response }) => ({
         ...state,
-        saving: false,
+        loading: false,
         validationFailureResponse: response
     })),
     on(resetValidateJoltSpecState, (state) => ({
         ...state,
-        saving: null,
+        loading: null,
         validationResponse: null,
         validationFailureResponse: null
     }))

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-validate/jolt-transform-json-validate.selectors.ts

@@ -27,8 +27,3 @@ export const selectJoltTransformJsonValidateState = createSelector(
     selectJoltTransformJsonUiState,
     (state: JoltTransformJsonUiState) => state[joltTransformJsonValidateFeatureKey]
 );
-
-export const selectSaving = createSelector(
-    selectJoltTransformJsonValidateState,
-    (state: JoltTransformJsonValidateState) => state.saving
-);