[NIFI-13247] - Property Verification (apache#8857)

* [NIFI-13247] - Property Verification * Added map-table providing a property-table-like component for simple key/value pairs. * add missing license headers * address review feedback * update to leverage themed code-mirror styles This closes apache#8857
krisztina-zsihovszki · May 22, 2024 · 7951b4b · 7951b4b
1 parent 05d0d36
commit 7951b4b
Show file tree

Hide file tree

Showing 66 changed files with 2,807 additions and 90 deletions.
diff --git a/...work-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.module.ts b/...work-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.module.ts
@@ -46,6 +46,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { PipesModule } from './pipes/pipes.module';
 import { DocumentationEffects } from './state/documentation/documentation.effects';
 import { ClusterSummaryEffects } from './state/cluster-summary/cluster-summary.effects';
+import { PropertyVerificationEffects } from './state/property-verification/property-verification.effects';
 import { loadingInterceptor } from './service/interceptors/loading.interceptor';
 import { LoginConfigurationEffects } from './state/login-configuration/login-configuration.effects';
 
@@ -77,7 +78,8 @@ import { LoginConfigurationEffects } from './state/login-configuration/login-con
             SystemDiagnosticsEffects,
             ComponentStateEffects,
             DocumentationEffects,
-            ClusterSummaryEffects
+            ClusterSummaryEffects,
+            PropertyVerificationEffects
         ),
         StoreDevtoolsModule.instrument({
             maxAge: 25,

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
@@ -54,6 +54,15 @@ import { LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from '../../../../index';
 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';
+import {
+    resetPropertyVerificationState,
+    verifyProperties
+} from '../../../../state/property-verification/property-verification.actions';
+import {
+    selectPropertyVerificationResults,
+    selectPropertyVerificationStatus
+} from '../../../../state/property-verification/property-verification.selectors';
+import { VerifyPropertiesRequestContext } from '../../../../state/property-verification';
 
 @Injectable()
 export class ControllerServicesEffects {
@@ -270,7 +279,7 @@ export class ControllerServicesEffects {
                     const serviceId: string = request.id;
 
                     const editDialogReference = this.dialog.open(EditControllerService, {
-                        ...LARGE_DIALOG,
+                        ...XL_DIALOG,
                         data: request,
                         id: serviceId
                     });
@@ -280,6 +289,23 @@ export class ControllerServicesEffects {
                     editDialogReference.componentInstance.createNewProperty =
                         this.propertyTableHelperService.createNewProperty(request.id, this.controllerServiceService);
 
+                    editDialogReference.componentInstance.verify
+                        .pipe(takeUntil(editDialogReference.afterClosed()))
+                        .subscribe((verificationRequest: VerifyPropertiesRequestContext) => {
+                            this.store.dispatch(
+                                verifyProperties({
+                                    request: verificationRequest
+                                })
+                            );
+                        });
+
+                    editDialogReference.componentInstance.propertyVerificationResults$ = this.store.select(
+                        selectPropertyVerificationResults
+                    );
+                    editDialogReference.componentInstance.propertyVerificationStatus$ = this.store.select(
+                        selectPropertyVerificationStatus
+                    );
+
                     const goTo = (commands: string[], destination: string): void => {
                         if (editDialogReference.componentInstance.editControllerServiceForm.dirty) {
                             const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
@@ -375,6 +401,9 @@ export class ControllerServicesEffects {
                         });
 
                     editDialogReference.afterClosed().subscribe((response) => {
+                        this.store.dispatch(ErrorActions.clearBannerErrors());
+                        this.store.dispatch(resetPropertyVerificationState());
+
                         if (response != 'ROUTED') {
                             this.store.dispatch(
                                 ControllerServicesActions.selectControllerService({

diff --git a/...eb/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts b/...eb/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/state/flow/flow.effects.ts
@@ -136,6 +136,15 @@ import { ErrorHelper } from '../../../../service/error-helper.service';
 import { selectConnectedStateChanged } from '../../../../state/cluster-summary/cluster-summary.selectors';
 import { resetConnectedStateChanged } from '../../../../state/cluster-summary/cluster-summary.actions';
 import { ChangeColorDialog } from '../../ui/canvas/change-color-dialog/change-color-dialog.component';
+import {
+    resetPropertyVerificationState,
+    verifyProperties
+} from '../../../../state/property-verification/property-verification.actions';
+import {
+    selectPropertyVerificationResults,
+    selectPropertyVerificationStatus
+} from '../../../../state/property-verification/property-verification.selectors';
+import { VerifyPropertiesRequestContext } from '../../../../state/property-verification';
 
 @Injectable()
 export class FlowEffects {
@@ -1291,7 +1300,7 @@ export class FlowEffects {
                     const processorId: string = request.entity.id;
 
                     const editDialogReference = this.dialog.open(EditProcessor, {
-                        ...LARGE_DIALOG,
+                        ...XL_DIALOG,
                         data: request,
                         id: processorId
                     });
@@ -1301,6 +1310,23 @@ export class FlowEffects {
                     editDialogReference.componentInstance.createNewProperty =
                         this.propertyTableHelperService.createNewProperty(processorId, this.flowService);
 
+                    editDialogReference.componentInstance.verify
+                        .pipe(takeUntil(editDialogReference.afterClosed()))
+                        .subscribe((verificationRequest: VerifyPropertiesRequestContext) => {
+                            this.store.dispatch(
+                                verifyProperties({
+                                    request: verificationRequest
+                                })
+                            );
+                        });
+
+                    editDialogReference.componentInstance.propertyVerificationResults$ = this.store.select(
+                        selectPropertyVerificationResults
+                    );
+                    editDialogReference.componentInstance.propertyVerificationStatus$ = this.store.select(
+                        selectPropertyVerificationStatus
+                    );
+
                     const goTo = (commands: string[], destination: string): void => {
                         if (editDialogReference.componentInstance.editProcessorForm.dirty) {
                             const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
@@ -1380,7 +1406,7 @@ export class FlowEffects {
 
                     editDialogReference.afterClosed().subscribe((response) => {
                         this.store.dispatch(ErrorActions.clearBannerErrors());
-
+                        this.store.dispatch(resetPropertyVerificationState());
                         if (response != 'ROUTED') {
                             this.store.dispatch(
                                 FlowActions.selectComponents({

diff --git a/...src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.spec.ts b/...src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.spec.ts
@@ -80,10 +80,7 @@ describe('EditLabel', () => {
                         isDisconnectionAcknowledged: jest.fn()
                     }
                 },
-                {
-                    provide: MatDialogRef,
-                    useValue: null
-                }
+                { provide: MatDialogRef, useValue: null }
             ]
         });
         fixture = TestBed.createComponent(EditLabel);

diff --git a/...rc/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.spec.ts b/...rc/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.spec.ts
@@ -47,10 +47,7 @@ describe('CreatePort', () => {
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: data },
                 provideMockStore({ initialState }),
-                {
-                    provide: MatDialogRef,
-                    useValue: null
-                }
+                { provide: MatDialogRef, useValue: null }
             ]
         });
         fixture = TestBed.createComponent(CreatePort);

diff --git a/...fi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.spec.ts b/...fi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.spec.ts
@@ -106,10 +106,7 @@ describe('EditPort', () => {
                         isDisconnectionAcknowledged: jest.fn()
                     }
                 },
-                {
-                    provide: MatDialogRef,
-                    useValue: null
-                }
+                { provide: MatDialogRef, useValue: null }
             ]
         });
         fixture = TestBed.createComponent(EditPort);

diff --git a/...ui/canvas/items/process-group/create-process-group/create-process-group.component.spec.ts b/...ui/canvas/items/process-group/create-process-group/create-process-group.component.spec.ts
@@ -159,10 +159,7 @@ describe('CreateProcessGroup', () => {
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: data },
                 provideMockStore({ initialState }),
-                {
-                    provide: MatDialogRef,
-                    useValue: null
-                }
+                { provide: MatDialogRef, useValue: null }
             ]
         });
         fixture = TestBed.createComponent(CreateProcessGroup);

diff --git a/...ow-designer/ui/canvas/items/processor/create-processor/create-processor.component.spec.ts b/...ow-designer/ui/canvas/items/processor/create-processor/create-processor.component.spec.ts
@@ -63,10 +63,7 @@ describe('CreateProcessor', () => {
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: data },
                 provideMockStore({ initialState }),
-                {
-                    provide: MatDialogRef,
-                    useValue: null
-                }
+                { provide: MatDialogRef, useValue: null }
             ]
         });
         fixture = TestBed.createComponent(CreateProcessor);

diff --git a/...ages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html b/...ages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html
@@ -236,8 +236,9 @@ <h2 mat-dialog-title>
         </mat-tab>
         <mat-tab label="Properties">
             <mat-dialog-content>
-                <div class="dialog-tab-content">
+                <div class="dialog-tab-content flex gap-x-3">
                     <property-table
+                        class="w-2/3"
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
                         [createNewService]="createNewService"
@@ -249,6 +250,12 @@ <h2 mat-dialog-title>
                         [supportsSensitiveDynamicProperties]="
                             request.entity.component.supportsSensitiveDynamicProperties
                         "></property-table>
+                    <property-verification
+                        class="w-1/3"
+                        [disabled]="readonly"
+                        [isVerifying]="(propertyVerificationStatus$ | async) === 'loading'"
+                        [results]="propertyVerificationResults$ | async"
+                        (verify)="verifyClicked(request.entity)"></property-verification>
                 </div>
             </mat-dialog-content>
         </mat-tab>

diff --git a/.../pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts b/.../pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.ts
@@ -25,7 +25,7 @@ import { AsyncPipe } from '@angular/common';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import {
     InlineServiceCreationRequest,
     InlineServiceCreationResponse,
@@ -50,6 +50,12 @@ import { ClusterConnectionService } from '../../../../../../../service/cluster-c
 import { CanvasUtils } from '../../../../../service/canvas-utils.service';
 import { ConvertToParameterResponse } from '../../../../../service/parameter-helper.service';
 import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-escape-dialog/close-on-escape-dialog.component';
+import { PropertyVerification } from '../../../../../../../ui/common/property-verification/property-verification.component';
+import {
+    ConfigVerificationResult,
+    ModifiedProperties,
+    VerifyPropertiesRequestContext
+} from '../../../../../../../state/property-verification';
 
 @Component({
     selector: 'edit-processor',
@@ -70,7 +76,8 @@ import { CloseOnEscapeDialog } from '../../../../../../../ui/common/close-on-esc
         NifiTooltipDirective,
         RunDurationSlider,
         RelationshipSettings,
-        ErrorBanner
+        ErrorBanner,
+        PropertyVerification
     ],
     styleUrls: ['./edit-processor.component.scss']
 })
@@ -86,6 +93,11 @@ export class EditProcessor extends CloseOnEscapeDialog {
     ) => Observable<ConvertToParameterResponse>;
     @Input() goToService!: (serviceId: string) => void;
     @Input() saving$!: Observable<boolean>;
+
+    @Input() propertyVerificationResults$!: Observable<ConfigVerificationResult[]>;
+    @Input() propertyVerificationStatus$: Observable<'pending' | 'loading' | 'success'> = of('pending');
+
+    @Output() verify: EventEmitter<VerifyPropertiesRequestContext> = new EventEmitter<VerifyPropertiesRequestContext>();
     @Output() editProcessor: EventEmitter<UpdateProcessorRequest> = new EventEmitter<UpdateProcessorRequest>();
 
     protected readonly TextTip = TextTip;
@@ -321,9 +333,7 @@ export class EditProcessor extends CloseOnEscapeDialog {
         const propertyControl: AbstractControl | null = this.editProcessorForm.get('properties');
         if (propertyControl && propertyControl.dirty) {
             const properties: Property[] = propertyControl.value;
-            const values: { [key: string]: string | null } = {};
-            properties.forEach((property) => (values[property.property] = property.value));
-            payload.component.config.properties = values;
+            payload.component.config.properties = this.getModifiedProperties();
             payload.component.config.sensitiveDynamicPropertyNames = properties
                 .filter((property) => property.descriptor.dynamic && property.descriptor.sensitive)
                 .map((property) => property.descriptor.name);
@@ -345,7 +355,25 @@ export class EditProcessor extends CloseOnEscapeDialog {
         });
     }
 
+    private getModifiedProperties(): ModifiedProperties {
+        const propertyControl: AbstractControl | null = this.editProcessorForm.get('properties');
+        if (propertyControl && propertyControl.dirty) {
+            const properties: Property[] = propertyControl.value;
+            const values: { [key: string]: string | null } = {};
+            properties.forEach((property) => (values[property.property] = property.value));
+            return values;
+        }
+        return {};
+    }
+
     override isDirty(): boolean {
         return this.editProcessorForm.dirty;
     }
+
+    verifyClicked(entity: any): void {
+        this.verify.next({
+            entity,
+            properties: this.getModifiedProperties()
+        });
+    }
 }
diff --git a/...e-process-group/create-remote-process-group/create-remote-process-group.component.spec.ts b/...e-process-group/create-remote-process-group/create-remote-process-group.component.spec.ts
@@ -47,10 +47,7 @@ describe('CreateRemoteProcessGroup', () => {
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: data },
                 provideMockStore({ initialState }),
-                {
-                    provide: MatDialogRef,
-                    useValue: null
-                }
+                { provide: MatDialogRef, useValue: null }
             ]
         });
         fixture = TestBed.createComponent(CreateRemoteProcessGroup);

diff --git a/...main/nifi/src/app/pages/settings/state/flow-analysis-rules/flow-analysis-rules.effects.ts b/...main/nifi/src/app/pages/settings/state/flow-analysis-rules/flow-analysis-rules.effects.ts
@@ -38,9 +38,18 @@ import * as ErrorActions from '../../../../state/error/error.actions';
 import { ErrorHelper } from '../../../../service/error-helper.service';
 import { selectStatus } from './flow-analysis-rules.selectors';
 import { HttpErrorResponse } from '@angular/common/http';
-import { LARGE_DIALOG, SMALL_DIALOG } from '../../../../index';
+import { LARGE_DIALOG, SMALL_DIALOG, XL_DIALOG } from '../../../../index';
 import { ChangeComponentVersionDialog } from '../../../../ui/common/change-component-version-dialog/change-component-version-dialog';
 import { ExtensionTypesService } from '../../../../service/extension-types.service';
+import {
+    resetPropertyVerificationState,
+    verifyProperties
+} from '../../../../state/property-verification/property-verification.actions';
+import {
+    selectPropertyVerificationResults,
+    selectPropertyVerificationStatus
+} from '../../../../state/property-verification/property-verification.selectors';
+import { VerifyPropertiesRequestContext } from '../../../../state/property-verification';
 
 @Injectable()
 export class FlowAnalysisRulesEffects {
@@ -254,7 +263,7 @@ export class FlowAnalysisRulesEffects {
                     const ruleId: string = request.id;
 
                     const editDialogReference = this.dialog.open(EditFlowAnalysisRule, {
-                        ...LARGE_DIALOG,
+                        ...XL_DIALOG,
                         data: request,
                         id: ruleId
                     });
@@ -264,6 +273,23 @@ export class FlowAnalysisRulesEffects {
                     editDialogReference.componentInstance.createNewProperty =
                         this.propertyTableHelperService.createNewProperty(request.id, this.flowAnalysisRuleService);
 
+                    editDialogReference.componentInstance.verify
+                        .pipe(takeUntil(editDialogReference.afterClosed()))
+                        .subscribe((verificationRequest: VerifyPropertiesRequestContext) => {
+                            this.store.dispatch(
+                                verifyProperties({
+                                    request: verificationRequest
+                                })
+                            );
+                        });
+
+                    editDialogReference.componentInstance.propertyVerificationResults$ = this.store.select(
+                        selectPropertyVerificationResults
+                    );
+                    editDialogReference.componentInstance.propertyVerificationStatus$ = this.store.select(
+                        selectPropertyVerificationStatus
+                    );
+
                     const goTo = (commands: string[], destination: string): void => {
                         if (editDialogReference.componentInstance.editFlowAnalysisRuleForm.dirty) {
                             const saveChangesDialogReference = this.dialog.open(YesNoDialog, {
@@ -317,6 +343,7 @@ export class FlowAnalysisRulesEffects {
 
                     editDialogReference.afterClosed().subscribe((response) => {
                         this.store.dispatch(ErrorActions.clearBannerErrors());
+                        this.store.dispatch(resetPropertyVerificationState());
 
                         if (response != 'ROUTED') {
                             this.store.dispatch(