NIFI-3785: Fixed dropdown width. Stopped storing the whole processgro…

…upflow in the state and just load the info needed.
apache · Jul 3, 2024 · 9392904 · 9392904
1 parent bb9e03d
commit 9392904
Show file tree

Hide file tree

Showing 12 changed files with 150 additions and 428 deletions.
diff --git a/...nifi/src/app/pages/flow-designer/state/controller-services/controller-services.effects.ts b/...nifi/src/app/pages/flow-designer/state/controller-services/controller-services.effects.ts
@@ -36,12 +36,13 @@ import {
 } from '../../../../state/shared';
 import { Router } from '@angular/router';
 import {
-    selectProcessGroupFlow,
+    selectChildProcessGroupOptions,
     selectCurrentProcessGroupId,
     selectParameterContext,
     selectSaving,
     selectStatus,
-    selectServices
+    selectServices,
+    selectBreadcrumb
 } from './controller-services.selectors';
 import { ControllerServiceService } from '../../service/controller-service.service';
 import { EnableControllerService } from '../../../../ui/common/controller-service/enable-controller-service/enable-controller-service.component';
@@ -52,7 +53,6 @@ import * as ErrorActions from '../../../../state/error/error.actions';
 import { ErrorHelper } from '../../../../service/error-helper.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { ParameterHelperService } from '../../service/parameter-helper.service';
-import { ComponentType, LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from 'libs/shared/src';
 import { ExtensionTypesService } from '../../../../service/extension-types.service';
 import { ChangeComponentVersionDialog } from '../../../../ui/common/change-component-version-dialog/change-component-version-dialog';
 import { FlowService } from '../../service/flow.service';
@@ -66,7 +66,8 @@ import {
 } from '../../../../state/property-verification/property-verification.selectors';
 import { VerifyPropertiesRequestContext } from '../../../../state/property-verification';
 import { BackNavigation } from '../../../../state/navigation';
-import { NiFiCommon, Storage } from '@nifi/shared';
+import { NiFiCommon, Storage, SelectOption, ComponentType, LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from '@nifi/shared';
+import { ComponentEntity } from './../flow/index';
 
 @Injectable()
 export class ControllerServicesEffects {
@@ -95,18 +96,28 @@ export class ControllerServicesEffects {
                     this.controllerServiceService.getControllerServices(request.processGroupId),
                     this.controllerServiceService.getFlow(request.processGroupId)
                 ]).pipe(
-                    map(([controllerServicesResponse, flowResponse]) =>
-                        ControllerServicesActions.loadControllerServicesSuccess({
+                    map(([controllerServicesResponse, flowResponse]) => {
+                        const childProcessGroupOptions: SelectOption[] = [];
+                        flowResponse.processGroupFlow.flow.processGroups.forEach((child: ComponentEntity) => {
+                            if (child.permissions.canRead && child.permissions.canWrite) {
+                                childProcessGroupOptions.push({
+                                    text: child.component.name,
+                                    value: child.component.id
+                                });
+                            }
+                        });
+
+                        return ControllerServicesActions.loadControllerServicesSuccess({
                             response: {
                                 processGroupId: flowResponse.processGroupFlow.id,
                                 controllerServices: controllerServicesResponse.controllerServices,
                                 loadedTimestamp: controllerServicesResponse.currentTime,
                                 breadcrumb: flowResponse.processGroupFlow.breadcrumb,
                                 parameterContext: flowResponse.processGroupFlow.parameterContext ?? null,
-                                processGroupFlow: flowResponse.processGroupFlow
+                                childProcessGroupOptions: childProcessGroupOptions
                             }
-                        })
-                    ),
+                        });
+                    }),
                     catchError((errorResponse: HttpErrorResponse) =>
                         of(this.errorHelper.handleLoadingError(status, errorResponse))
                     )
@@ -644,27 +655,31 @@ export class ControllerServicesEffects {
                 map((action) => action.request),
                 concatLatestFrom(() => [
                     this.store.select(selectCurrentProcessGroupId),
-                    this.store.select(selectProcessGroupFlow),
-                    this.store.select(selectServices)
+                    this.store.select(selectChildProcessGroupOptions),
+                    this.store.select(selectServices),
+                    this.store.select(selectBreadcrumb)
                 ]),
-                concatMap(([request, currentProcessGroupId, processGroupFlow, controllerServices]) =>
-                    combineLatest([this.flowService.getProcessGroupWithContent(currentProcessGroupId)]).pipe(
-                        map(([processGroupEntity]) => {
-                            return {
-                                request,
-                                currentProcessGroupId,
-                                processGroupFlow,
-                                processGroupEntity,
-                                controllerServices
-                            };
-                        })
-                    )
+                concatMap(
+                    ([request, currentProcessGroupId, childProcessGroupOptions, controllerServices, breadcrumb]) =>
+                        combineLatest([this.flowService.getProcessGroupWithContent(currentProcessGroupId)]).pipe(
+                            map(([processGroupEntity]) => {
+                                return {
+                                    request,
+                                    currentProcessGroupId,
+                                    childProcessGroupOptions,
+                                    processGroupEntity,
+                                    controllerServices,
+                                    breadcrumb
+                                };
+                            })
+                        )
                 ),
                 tap((request) => {
                     const clone = Object.assign({}, request.request);
                     clone.processGroupEntity = request.processGroupEntity;
-                    clone.processGroupFlow = request.processGroupFlow;
+                    clone.childProcessGroupOptions = request.childProcessGroupOptions;
                     clone.parentControllerServices = request.controllerServices;
+                    clone.breadcrumb = request.breadcrumb;
                     const serviceId: string = request.request.id;
                     const moveDialogReference = this.dialog.open(MoveControllerService, {
                         ...LARGE_DIALOG,

diff --git a/...nifi/src/app/pages/flow-designer/state/controller-services/controller-services.reducer.ts b/...nifi/src/app/pages/flow-designer/state/controller-services/controller-services.reducer.ts
@@ -35,6 +35,7 @@ import { ControllerServicesState } from './index';
 
 export const initialState: ControllerServicesState = {
     processGroupId: 'root',
+    childProcessGroupOptions: [],
     controllerServices: [],
     breadcrumb: {
         id: '',
@@ -70,7 +71,7 @@ export const controllerServicesReducer = createReducer(
         breadcrumb: response.breadcrumb,
         parameterContext: response.parameterContext,
         loadedTimestamp: response.loadedTimestamp,
-        processGroupFlow: response.processGroupFlow,
+        childProcessGroupOptions: response.childProcessGroupOptions,
         status: 'success' as const
     })),
     on(controllerServicesBannerApiError, (state) => ({

diff --git a/...fi/src/app/pages/flow-designer/state/controller-services/controller-services.selectors.ts b/...fi/src/app/pages/flow-designer/state/controller-services/controller-services.selectors.ts
@@ -41,9 +41,14 @@ export const selectCurrentProcessGroupId = createSelector(
     (state: ControllerServicesState) => state.processGroupId
 );
 
-export const selectProcessGroupFlow = createSelector(
+export const selectChildProcessGroupOptions = createSelector(
     selectControllerServicesState,
-    (state: ControllerServicesState) => state.processGroupFlow
+    (state: ControllerServicesState) => state.childProcessGroupOptions
+);
+
+export const selectBreadcrumb = createSelector(
+    selectControllerServicesState,
+    (state: ControllerServicesState) => state.breadcrumb
 );
 
 export const selectParameterContext = createSelector(

diff --git a/...rc/main/frontend/apps/nifi/src/app/pages/flow-designer/state/controller-services/index.ts b/...rc/main/frontend/apps/nifi/src/app/pages/flow-designer/state/controller-services/index.ts
@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
+import { SelectOption } from '@nifi/shared';
 import { ControllerServiceEntity, ParameterContextReferenceEntity } from '../../../../state/shared';
-import { ProcessGroupFlow } from '../flow';
 import { BreadcrumbEntity } from '../shared';
 import { Revision } from './../../../../state/shared/index';
 
@@ -32,7 +32,7 @@ export interface LoadControllerServicesResponse {
     controllerServices: ControllerServiceEntity[];
     parameterContext: ParameterContextReferenceEntity | null;
     loadedTimestamp: string;
-    processGroupFlow: ProcessGroupFlow;
+    childProcessGroupOptions: SelectOption[];
 }
 
 export interface CreateControllerServiceSuccess {
@@ -57,9 +57,10 @@ export interface ConfigureControllerServiceSuccess {
 export interface MoveControllerServiceDialogRequest {
     id: string;
     controllerService: ControllerServiceEntity;
-    processGroupFlow?: ProcessGroupFlow;
+    childProcessGroupOptions: SelectOption[];
     processGroupEntity?: any;
     parentControllerServices: ControllerServiceEntity[];
+    breadcrumb?: BreadcrumbEntity;
 }
 
 export interface MoveControllerServiceRequest {
@@ -91,7 +92,7 @@ export interface SelectControllerServiceRequest {
 
 export interface ControllerServicesState {
     processGroupId: string;
-    processGroupFlow?: ProcessGroupFlow;
+    childProcessGroupOptions: SelectOption[];
     breadcrumb: BreadcrumbEntity;
     controllerServices: ControllerServiceEntity[];
     parameterContext: ParameterContextReferenceEntity | null;

diff --git a/...nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html b/...nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.html
@@ -42,7 +42,7 @@ <h3 class="primary-color">Controller Services</h3>
                                 [selectedServiceId]="selectedServiceId$ | async"
                                 [controllerServices]="serviceState.controllerServices"
                                 [formatScope]="formatScope(serviceState.breadcrumb)"
-                                [isManagementControllerService]="isManagementControllerService"
+                                [showMoveOption]="true"
                                 [definedByCurrentGroup]="definedByCurrentGroup(serviceState.breadcrumb)"
                                 [currentUser]="(currentUser$ | async)!"
                                 [flowConfiguration]="flowConfiguration"

diff --git a/...s/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.ts b/...s/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.ts
@@ -245,7 +245,8 @@ export class ControllerServices implements OnDestroy {
                 request: {
                     id: entity.id,
                     controllerService: entity,
-                    parentControllerServices: []
+                    parentControllerServices: [],
+                    childProcessGroupOptions: []
                 }
             })
         );
@@ -334,10 +335,6 @@ export class ControllerServices implements OnDestroy {
         );
     }
 
-    isManagementControllerService(): boolean {
-        return false;
-    }
-
     ngOnDestroy(): void {
         this.store.dispatch(resetControllerServicesState());
     }

diff --git a/...app/pages/flow-designer/ui/move-controller-service/move-controller-service.component.html b/...app/pages/flow-designer/ui/move-controller-service/move-controller-service.component.html
@@ -16,11 +16,11 @@
   -->
 
 <h2 mat-dialog-title>Move Controller Service</h2>
-<form class="controller-service-enable-form" [formGroup]="moveControllerServiceForm">
+<form class="controller-service-move-form" [formGroup]="moveControllerServiceForm">
     <mat-dialog-content>
-        <div class="py-4 flex gap-x-4">
+        <div class="py-4 flex gap-x-3">
             <div class="flex basis-2/3 flex-col gap-y-4 pr-4 overflow-hidden">
-                <div class="flex flex-col">
+                <div>
                     <div>Service</div>
                     <div
                         class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"