[monitor]feature:param yml support key-value map

web-app/src/app/shared/components/key-value-input/key-value-input.component.html

@@ -0,0 +1,12 @@
+<div *ngFor="let item of keyValues; let i = index" nz-row>
+  <div nz-col nzSpan="10">
+    <input nz-input [placeholder]="keyAlias" [(ngModel)]="item.key" (ngModelChange)="onChange()" />
+  </div>
+  <div nz-col nzSpan="11">
+    <input nz-input [placeholder]="valueAlias" [(ngModel)]="item.value" (ngModelChange)="onChange()" />
+  </div>
+  <div nz-col nzSpan="3">
+    <i nz-icon nzType="plus-circle" class="dynamic-button" *ngIf="i === 0" (click)="addNew($event)"></i>
+    <i nz-icon nzType="minus-circle" class="dynamic-button" (click)="removeCurrent(i, $event)"></i>
+  </div>
+</div>

web-app/src/app/shared/components/key-value-input/key-value-input.component.less

@@ -0,0 +1,12 @@
+.dynamic-button {
+  cursor: pointer;
+  position: relative;
+  top: 4px;
+  font-size: 15px;
+  transition: all 0.3s;
+  margin-left: 6%;
+}
+
+.dynamic-button:hover {
+  font-size: 26px;
+}

web-app/src/app/shared/components/key-value-input/key-value-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyValueInputComponent } from './key-value-input.component';
+
+describe('KeyValueInputComponent', () => {
+  let component: KeyValueInputComponent;
+  let fixture: ComponentFixture<KeyValueInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KeyValueInputComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KeyValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-app/src/app/shared/components/key-value-input/key-value-input.component.ts

@@ -0,0 +1,63 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-key-value-input',
+  templateUrl: './key-value-input.component.html',
+  styleUrls: ['./key-value-input.component.less']
+})
+export class KeyValueInputComponent implements OnInit {
+  constructor() {}
+
+  @Input() value!: any;
+  @Output() readonly valueChange = new EventEmitter<string>();
+
+  @Input()
+  keyAlias: string = 'Key';
+  @Input()
+  valueAlias: string = 'Value';
+
+  keyValues: any[] = [];
+
+  ngOnInit(): void {
+    if (this.value == undefined) {
+      this.value = {
+        '': ''
+      };
+    } else {
+      this.value = JSON.parse(this.value);
+    }
+    Object.keys(this.value).map(item => {
+      this.keyValues.push({
+        key: item,
+        value: this.value[item]
+      });
+    });
+  }
+
+  addNew(e?: MouseEvent) {
+    if (e) {
+      e.preventDefault();
+    }
+    this.keyValues.push({
+      key: '',
+      value: ''
+    });
+  }
+  removeCurrent(index: number, e?: MouseEvent) {
+    if (e) {
+      e.preventDefault();
+    }
+    if (this.keyValues.length > 1) {
+      this.keyValues.splice(index, 1);
+    }
+  }
+  onChange() {
+    this.value = {};
+    this.keyValues.forEach(item => {
+      if (item != null && item.key != null) {
+        this.value[item.key] = item.value;
+      }
+    });
+    this.valueChange.emit(JSON.stringify(this.value));
+  }
+}