Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[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
This commit is contained in:
Scott Aslan 2024-08-15 09:05:56 -04:00 committed by GitHub
parent e46c7db1ec
commit 30e8df676e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 64 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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');

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

@ -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 {}

3
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
View File

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

2
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
View File

@ -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 }>()
);

12
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
View File

@ -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
})
);
})

18
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
View File

@ -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
}))
);

9
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
View File

@ -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) => {

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

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

8
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
View File

@ -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
}))

5
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
View File

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

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

@ -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;
}

10
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
View File

@ -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
}))

5
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
View File

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