Fix source controller service database ui rendering

chandrasaripaka · Nov 29, 2018 · f54589c · f54589c
1 parent 2e12c77
commit f54589c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/...urces/static/js/plugin/processor-templates/sqoop-table-data/table-properties.component.ts b/...urces/static/js/plugin/processor-templates/sqoop-table-data/table-properties.component.ts
@@ -155,6 +155,8 @@ export class TablePropertiesComponent implements OnChanges, OnInit {
      */
     tableSchema: any = null;
 
+    catalogNiFiControllerServiceIds:string[] = null;
+
     constructor(private http: HttpClient, private dialog: MatDialog, @Inject("FeedService") private feedService: any, @Inject("DBCPTableSchemaService") private tableSchemaService: any) {
         // Handle connection service changes
         this.form.valueChanges.pipe(
@@ -189,6 +191,19 @@ export class TablePropertiesComponent implements OnChanges, OnInit {
                 return this.queryTablesSearch(value)
             })
         );
+
+        this.fetchCatalogJbdcSources();
+    }
+
+    updateDbConnectionPropertyOptions(){
+        if(this.dbConnectionProperty && this.catalogNiFiControllerServiceIds != null){
+            (this.dbConnectionProperty.propertyDescriptor.allowableValues as any[])
+                .filter((allowableValue: any) => allowableValue.displayName.indexOf("**") == -1 && this.catalogNiFiControllerServiceIds.indexOf(allowableValue.value) >=0)
+                .forEach((allowableValue:any) =>  {allowableValue.displayName +="**";
+                            allowableValue.catalogSource = true;
+                });
+              }
+
     }
 
     ngOnInit() {
@@ -213,6 +228,19 @@ export class TablePropertiesComponent implements OnChanges, OnInit {
         }
         this.dbConnectionProperty = this.findProperty(this.connectionServiceKey, false);
 
+        //update the hint only when editing
+        const hintSuffix = ".  ** indicates an existing catalog data source";
+        if(this.dbConnectionProperty) {
+            let desc = this.dbConnectionProperty.propertyDescriptor.origDescription || this.dbConnectionProperty.propertyDescriptor.description;
+            if (!this.processor.form.disabled) {
+                if(desc.indexOf(hintSuffix) == -1){
+                    this.dbConnectionProperty.propertyDescriptor.origDescription = desc;
+                    this.dbConnectionProperty.propertyDescriptor.description = desc+hintSuffix;
+                }
+            } else {
+                this.dbConnectionProperty.propertyDescriptor.description = desc;
+            }
+        }
         /**
          * Autocomplete objected used in the UI html page
          */
@@ -239,10 +267,20 @@ export class TablePropertiesComponent implements OnChanges, OnInit {
                 this.editIncrementalLoadDescribeTable()
             }
         }
+        this.updateDbConnectionPropertyOptions();
 
         this.initializing = false;
     }
 
+    fetchCatalogJbdcSources(){
+        let url = "/proxy/v1/catalog/datasource/plugin-id?pluginIds=jdbc";
+        this.http.get(url).subscribe((responses:any[]) => {
+            this.catalogNiFiControllerServiceIds = responses.map((source:any) => source.nifiControllerServiceId);
+            this.updateDbConnectionPropertyOptions();
+        });
+
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.processor) {
             if (this.processor != null) {

diff --git a/ui/ui-app/src/main/resources/static/lib/dynamic-form/dynamic-form-field.component.html b/ui/ui-app/src/main/resources/static/lib/dynamic-form/dynamic-form-field.component.html
@@ -17,7 +17,7 @@ <h3  class="subheading-2">{{field.placeholder}}</h3>
       <div fxLayout="row">
         <span fxFlex="30%">{{field.placeholder}}</span>
         <span fxFlex="5%"></span>
-        <span fxFlex *ngIf="field.controlType != 'section-header'">{{field.model[field['modelValueProperty']]}}</span>
+        <span fxFlex *ngIf="field.controlType != 'section-header'">{{field.readonlyValue}}</span>
       </div>
       <mat-hint class="hint">{{field.hint}}</mat-hint>
     </div>

diff --git a/ui/ui-app/src/main/resources/static/lib/dynamic-form/model/FieldConfig.ts b/ui/ui-app/src/main/resources/static/lib/dynamic-form/model/FieldConfig.ts
@@ -59,7 +59,7 @@ export class FieldConfig<T> {
         this.placeholder = options.placeholder || '';
         this.model = (options.model && options.model.hasOwnProperty(this.modelValueProperty)) ? options.model : this;
         this.hint = options.hint || '';
-        this.readonlyValue = options.readonlyValue || this.model.value;
+        this.readonlyValue = options.readonlyValue || this.model[this.modelValueProperty];
         this.pattern = options.pattern;
         this.disabled = options.disabled || false;
         this.styleClass = options.styleClass || '';

diff --git a/ui/ui-app/src/main/resources/static/lib/feed/processor/processor-form.component.ts b/ui/ui-app/src/main/resources/static/lib/feed/processor/processor-form.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
 import {FormGroup} from "@angular/forms";
 import * as _ from "underscore"
 
@@ -104,6 +104,9 @@ export class FieldConfigurationBuilder {
         //build the generic options to be used by all fields
         let label = property.propertyDescriptor.displayName || property.propertyDescriptor.name;
         let configBuilder = new ConfigurationFieldBuilder().setKey(property.nameKey).setOrder(this.state.getAndIncrementFieldOrder()).setPlaceholder(label).setRequired(property.required).setValue(property.value).setModel(property).setHint(property.propertyDescriptor.description);
+        if(property.displayValue){
+            configBuilder.setReadonlyValue(property.displayValue)
+        }
 
         if (this.isInputText(property)) {
             //get the correct input type
@@ -207,7 +210,7 @@ export class FieldConfigurationBuilder {
       <dynamic-form [form]="form" [fieldGroups]="fieldGroups" [readonly]="readonly"></dynamic-form>
     `
 })
-export class ProcessorFormComponent implements OnChanges {
+export class ProcessorFormComponent implements OnChanges, OnInit {
 
     @Input()
     addSectionHeader: boolean | string;
@@ -231,6 +234,10 @@ export class ProcessorFormComponent implements OnChanges {
     constructor(private dynamicFormService: DynamicFormService) {
     }
 
+    ngOnInit(): void {
+
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if ((changes.processor || changes.properties)) {
             if (this.processor != null) {