This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 30e8df676e [NIFI-13589] improve loading and error handling for jolt UI
(#9155)
30e8df676e is described below
commit 30e8df676e24c9812e2fe7a7a9e81bc41ea9575b
Author: Scott Aslan <[email protected]>
AuthorDate: Thu Aug 15 09:05:56 2024 -0400
[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
---
.../feature/jolt-transform-json-ui.component.html | 16 +++++++++++-----
.../feature/jolt-transform-json-ui.component.ts | 4 ++++
.../feature/jolt-transform-json-ui.module.ts | 4 +++-
.../jolt-transform-json-processor-details/index.ts | 3 ++-
.../jolt-transform-json-processor-details.actions.ts | 2 +-
.../jolt-transform-json-processor-details.effects.ts | 12 +++++++++++-
.../jolt-transform-json-processor-details.reducer.ts | 18 ++++++++++++++----
.../jolt-transform-json-processor-details.selectors.ts | 9 +++++++--
.../state/jolt-transform-json-transform/index.ts | 2 +-
.../jolt-transform-json-transform.reducer.ts | 8 ++++----
.../jolt-transform-json-transform.selectors.ts | 5 -----
.../state/jolt-transform-json-validate/index.ts | 2 +-
.../jolt-transform-json-validate.reducer.ts | 10 +++++-----
.../jolt-transform-json-validate.selectors.ts | 5 -----
14 files changed, 64 insertions(+), 36 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
index 26e67c62b4..f3af0d5d2c 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
+++
b/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">
- <i class="fa fa-warning caution-color mr-2"></i>An error has
occurred loading the editor.
- </div>
+ @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>
</div>
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts
index 895cf95fe3..d7718d2602 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.ts
+++
b/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');
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.module.ts
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.module.ts
index 19fbaa2160..65ba5a1ebd 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.module.ts
+++
b/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 {}
diff --git
a/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
b/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
index 85c91f3bad..2f08f82b89 100644
---
a/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
+++
b/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;
}
diff --git
a/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
b/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
index 1ddc1ab425..9d20d7f089 100644
---
a/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
+++
b/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 }>()
);
diff --git
a/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
b/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
index fbd12b2281..61ada9f1c6 100644
---
a/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
+++
b/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
})
);
})
diff --git
a/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
b/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
index 8165d928bc..54bc547ed5 100644
---
a/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
+++
b/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
}))
);
diff --git
a/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
b/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
index 63e8a4a58f..5337a4b7ff 100644
---
a/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
+++
b/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) => {
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-transform/index.ts
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-transform/index.ts
index e3e2ea3865..eb2f0e3e78 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-transform/index.ts
+++
b/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;
}
diff --git
a/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
b/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
index 463b140dcc..62c3e5c22c 100644
---
a/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
+++
b/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
}))
diff --git
a/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
b/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
index fd42383f5a..f6f6a87056 100644
---
a/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
+++
b/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
-);
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-validate/index.ts
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-validate/index.ts
index 5084c00dcd..bddcf61185 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/state/jolt-transform-json-validate/index.ts
+++
b/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;
}
diff --git
a/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
b/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
index f6c4ccbb04..69fdc0351f 100644
---
a/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
+++
b/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
}))
diff --git
a/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
b/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
index 8363427535..9bd7c8e98a 100644
---
a/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
+++
b/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
-);
