diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html index 803f38493339..92098b107c76 100644 --- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html +++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html @@ -20,6 +20,7 @@
+ private store: Store, + private errorHelper: ErrorHelper ) { this.searchForm = this.formBuilder.group({ searchBar: '' }); @@ -122,27 +126,38 @@ export class Search implements OnInit { takeUntilDestroyed(this.destroyRef), filter((data) => data?.trim().length > 0), debounceTime(500), - tap(() => (this.searching = true)), - switchMap((query: string) => this.searchService.search(query, this.currentProcessGroupId)) + tap(() => (this.searching = true)) ) - .subscribe((response) => { - const results = response.searchResultsDTO; - - this.processorResults = results.processorResults; - this.connectionResults = results.connectionResults; - this.processGroupResults = results.processGroupResults; - this.inputPortResults = results.inputPortResults; - this.outputPortResults = results.outputPortResults; - this.remoteProcessGroupResults = results.remoteProcessGroupResults; - this.funnelResults = results.funnelResults; - this.labelResults = results.labelResults; - this.controllerServiceNodeResults = results.controllerServiceNodeResults; - this.parameterContextResults = results.parameterContextResults; - this.parameterProviderNodeResults = results.parameterProviderNodeResults; - this.parameterResults = results.parameterResults; - - this.searchingResultsVisible = true; - this.searching = false; + .subscribe((query) => { + this.searchService + .search(query, this.currentProcessGroupId) + .pipe(take(1)) + .subscribe({ + next: (response) => { + const results = response.searchResultsDTO; + + this.processorResults = results.processorResults; + this.connectionResults = results.connectionResults; + this.processGroupResults = results.processGroupResults; + this.inputPortResults = results.inputPortResults; + this.outputPortResults = results.outputPortResults; + this.remoteProcessGroupResults = results.remoteProcessGroupResults; + this.funnelResults = results.funnelResults; + this.labelResults = results.labelResults; + this.controllerServiceNodeResults = results.controllerServiceNodeResults; + this.parameterContextResults = results.parameterContextResults; + this.parameterProviderNodeResults = results.parameterProviderNodeResults; + this.parameterResults = results.parameterResults; + + this.searchingResultsVisible = true; + this.searching = false; + }, + error: (errorResponse: HttpErrorResponse) => { + this.searchingResultsVisible = false; + this.searching = false; + this.snackBarOrFullScreenError(errorResponse); + } + }); }); } @@ -207,4 +222,20 @@ export class Search implements OnInit { this.store.dispatch(setAllowTransition({ allowTransition: true })); } } + + onKeydown(event: KeyboardEvent): void { + if (event.key === 'Escape') { + this.searchingResultsVisible = false; + } + } + + private snackBarOrFullScreenError(errorResponse: HttpErrorResponse) { + if (this.errorHelper.showErrorInContext(errorResponse.status)) { + this.store.dispatch( + FlowActions.flowSnackbarError({ error: this.errorHelper.getErrorString(errorResponse) }) + ); + } else { + this.store.dispatch(this.errorHelper.fullScreenError(errorResponse)); + } + } }