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-1416-upgrade-solr 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; + } + + } + }
