OpenSource/hertzbeat
Public Access
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[monitor]feature:param yml support key-value map (#57)

Browse Source
This commit is contained in:
tomsun28
2022-04-03 21:35:56 +08:00
committed by GitHub
parent 0cf66f32ff
commit 636303021f
18 changed files with 210 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web-app/src/app/pojo/ParamDefine.ts
View File

@@ -9,4 +9,7 @@ export class ParamDefine {
limit: number | undefined;
//'[{"label":"GET请求","value":"GET"},{"label":"PUT请求","value":"PUT"}]'
options!: any[];
// 当type为key-value时有效,表示别名描述
keyAlias!: string;
valueAlias!: string;
}

12
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
View File

@@ -147,6 +147,18 @@
</label>
</nz-radio-group>
</nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<app-key-value-input
[(value)]="params[i].value"
[id]="paramDefine.field"
keyAlias="Header Name"
valueAlias="Header Value"
></app-key-value-input>
</nz-form-control>
</nz-form-item>
<nz-divider></nz-divider>

8
web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.ts
View File

@@ -78,7 +78,13 @@ export class MonitorEditComponent implements OnInit {
if (param === undefined) {
param = new Param();
param.field = define.field;
param.type = define.type === 'number' ? 0 : 1;
if (define.type === 'number') {
param.type = 0;
} else if (define.type === 'key-value') {
param.type = 3;
} else {
param.type = 1;
}
if (define.type === 'boolean') {
param.value = false;
}

12
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
View File

@@ -156,6 +156,18 @@
</label>
</nz-radio-group>
</nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<app-key-value-input
[(value)]="params[i].value"
[id]="paramDefine.field"
[keyAlias]="paramDefine.keyAlias ? paramDefine.keyAlias : 'Name'"
[valueAlias]="paramDefine.valueAlias ? paramDefine.valueAlias : 'Value'"
></app-key-value-input>
</nz-form-control>
</nz-form-item>
<nz-divider></nz-divider>

8
web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
View File

@@ -58,7 +58,13 @@ export class MonitorNewComponent implements OnInit {
this.paramDefines.forEach(define => {
let param = new Param();
param.field = define.field;
param.type = define.type === 'number' ? 0 : 1;
if (define.type === 'number') {
param.type = 0;
} else if (define.type === 'key-value') {
param.type = 3;
} else {
param.type = 1;
}
if (define.type === 'boolean') {
param.value = false;
}

2
web-app/src/app/shared/components/README.md
View File

@@ -1,2 +0,0 @@
### 公共通用小组件

12
web-app/src/app/shared/components/key-value-input/key-value-input.component.html Normal file
View File

@@ -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>

12
web-app/src/app/shared/components/key-value-input/key-value-input.component.less Normal file
View File

@@ -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;
}

25
web-app/src/app/shared/components/key-value-input/key-value-input.component.spec.ts Normal file
View File

@@ -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();
});
});

63
web-app/src/app/shared/components/key-value-input/key-value-input.component.ts Normal file
View File

@@ -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));
}
}

3
web-app/src/app/shared/shared.module.ts
View File

@@ -6,6 +6,7 @@ import { DelonACLModule } from '@delon/acl';
import { DelonFormModule } from '@delon/form';
import { AlainThemeModule } from '@delon/theme';
import { KeyValueInputComponent } from './components/key-value-input/key-value-input.component';
import { TimezonePipe } from './pipe/timezone.pipe';
import { SHARED_DELON_MODULES } from './shared-delon.module';
import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
@@ -18,7 +19,7 @@ const THIRDMODULES: Array<Type<void>> = [];
// #region your components & directives
const COMPONENTS: Array<Type<void>> = [];
const COMPONENTS: Array<Type<void>> = [KeyValueInputComponent];
const DIRECTIVES: Array<Type<void>> = [TimezonePipe];
// #endregion