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

…upflow in the state and just load the info needed.

nifi-frontend/src/main/frontend/apps/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,

nifi-frontend/src/main/frontend/apps/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) => ({

nifi-frontend/src/main/frontend/apps/nifi/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(

nifi-frontend/src/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;

nifi-frontend/src/main/frontend/apps/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"

nifi-frontend/src/main/frontend/apps/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());
  }

nifi-frontend/src/main/frontend/apps/nifi/src/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"