METRON-1435 Management UI cannot save json objects in advanced config 
(merrimanr) closes apache/metron#917


Project: http://git-wip-us.apache.org/repos/asf/metron/repo
Commit: http://git-wip-us.apache.org/repos/asf/metron/commit/3d3c43c7
Tree: http://git-wip-us.apache.org/repos/asf/metron/tree/3d3c43c7
Diff: http://git-wip-us.apache.org/repos/asf/metron/diff/3d3c43c7

Branch: refs/heads/feature/METRON-1344-test-infrastructure
Commit: 3d3c43c716b0a6d58b57d6d5ba83109bc49661e4
Parents: 567d106
Author: merrimanr <merrim...@gmail.com>
Authored: Fri Feb 2 08:37:29 2018 -0600
Committer: merrimanr <merrim...@apache.org>
Committed: Fri Feb 2 08:37:29 2018 -0600

----------------------------------------------------------------------
 .../advanced-config-form.component.html         |  2 +-
 .../advanced-config-form.component.spec.ts      | 34 ++++++++++++++++++++
 .../advanced-config-form.component.ts           | 20 +++++++++++-
 3 files changed, 54 insertions(+), 2 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/metron/blob/3d3c43c7/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.html
----------------------------------------------------------------------
diff --git 
a/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.html
 
b/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.html
index 1a30ee7..945be5f 100644
--- 
a/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.html
+++ 
b/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.html
@@ -19,7 +19,7 @@
             </div>
         </div>
         <div class="row  mx-0">
-            <div class="col-md-10 advanced-input"><input type="text" 
class="form-control" formControlName="{{key}}" [(ngModel)]="config[key]"></div>
+            <div class="col-md-10 advanced-input"><input type="text" 
class="form-control" formControlName="{{key}}" [ngModel]="displayValue(key)" 
(ngModelChange)="saveValue(key, $event)"></div>
             <div class="col-md-2" (click)="removeConfig(key)">
                 <i class="fa fa-minus fa-4 icon-button" aria-hidden="true" 
></i>
             </div>

http://git-wip-us.apache.org/repos/asf/metron/blob/3d3c43c7/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.spec.ts
----------------------------------------------------------------------
diff --git 
a/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.spec.ts
 
b/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.spec.ts
index a8f0ed0..ed80c54 100644
--- 
a/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.spec.ts
+++ 
b/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.spec.ts
@@ -136,6 +136,18 @@ describe('Component: AdvancedConfigFormComponent', () => {
       expect(component.configForm.controls['field2'].value).toEqual('value2');
       expect(component.configForm.controls['field3'].value).toEqual('value3');
 
+      component.newConfigKey = 'field1';
+      component.newConfigValue = '["newValue1"]';
+      component.saveNewConfig();
+      expect(Object.keys(component.config).length).toEqual(3);
+      expect(component.config['field1']).toEqual(['newValue1']);
+
+      component.newConfigKey = 'field1';
+      component.newConfigValue = '{"key":"newValue1"}';
+      component.saveNewConfig();
+      expect(Object.keys(component.config).length).toEqual(3);
+      expect(component.config['field1']).toEqual({key: 'newValue1'});
+
       component.removeConfig('field1');
       expect(Object.keys(component.config).length).toEqual(2);
       expect(component.config['field2']).toEqual('value2');
@@ -146,6 +158,28 @@ describe('Component: AdvancedConfigFormComponent', () => {
       
expect(component.configForm.controls['newConfigValue'].value).toEqual('enter 
value');
       expect(component.configForm.controls['field2'].value).toEqual('value2');
       expect(component.configForm.controls['field3'].value).toEqual('value3');
+
+
   }));
 
+    it('verify display and save values',  async(() => {
+        let component: AdvancedConfigFormComponent =  
fixture.componentInstance;
+        component.config = {'field1': 'value1', 'field2': 'value2'};
+        component.ngOnInit();
+
+        expect(component.displayValue('field1')).toEqual('value1');
+
+        component.saveValue('field1', '["value1","value2"]');
+        expect(component.config['field1']).toEqual(['value1', 'value2']);
+        
expect(component.displayValue('field1')).toEqual('["value1","value2"]');
+
+        component.saveValue('field1', '["value1","value2"');
+        expect(component.config['field1']).toEqual('["value1","value2"');
+        expect(component.displayValue('field1')).toEqual('["value1","value2"');
+
+        component.saveValue('field1', '{"key1":"value1"}');
+        expect(component.config['field1']).toEqual({'key1': 'value1'});
+        expect(component.displayValue('field1')).toEqual('{"key1":"value1"}');
+    }));
+
 });

http://git-wip-us.apache.org/repos/asf/metron/blob/3d3c43c7/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.ts
----------------------------------------------------------------------
diff --git 
a/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.ts
 
b/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.ts
index f363391..5da9d48 100644
--- 
a/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.ts
+++ 
b/metron-interface/metron-config/src/app/shared/advanced-config-form/advanced-config-form.component.ts
@@ -83,7 +83,7 @@ export class AdvancedConfigFormComponent implements OnInit, 
OnChanges {
     }
     if (this.newConfigKey !== 'enter field' && this.newConfigValue !== 'enter 
value') {
       let keyExists = this.config[this.newConfigKey] !== undefined;
-      this.config[this.newConfigKey] = this.newConfigValue;
+      this.saveValue(this.newConfigKey, this.newConfigValue);
       if (keyExists) {
         this.newConfigKey = 'enter field';
         this.newConfigValue = 'enter value';
@@ -107,4 +107,22 @@ export class AdvancedConfigFormComponent implements 
OnInit, OnChanges {
     this.configForm.removeControl(key);
   }
 
+  displayValue(key: string): string {
+    let value = this.config[key];
+    if (Array.isArray(value) || value instanceof Object) {
+      return JSON.stringify(value);
+    } else {
+      return value;
+    }
+  }
+
+  saveValue(key: string, value: string) {
+    try {
+        this.config[key] = JSON.parse(value);
+    } catch (err) {
+        this.config[key] = value;
+    }
+
+  }
+
 }

Reply via email to