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

[web-app] 新增监控时名称自动生成

Browse Source
This commit is contained in:
tomsun28
2021-12-04 20:20:36 +08:00
parent 2781e32a55
commit d99d12f654
3 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,13 +23,13 @@
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true">监控Host</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" placeholder="请输入域名或IP">
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">监控名称</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name">
</nz-form-control>
</nz-form-item >
@@ -42,7 +42,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="8">
<input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field"
[type]="paramDefine.type" [id]="paramDefine.field"
[placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''">
@@ -53,7 +53,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8">
<nz-input-group [nzSuffix]="suffixTemplate">
<input
[type]="passwordVisible ? 'text' : 'password'"
@@ -76,7 +76,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8">
<nz-input-number
[(ngModel)]="params[i].value"
[nzMin]="-1000"
@@ -92,7 +92,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8">
<nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch>
</nz-form-control>
@@ -101,7 +101,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8">
<nz-radio-group [(ngModel)]="params[i].value" nzButtonStyle="solid"
[name]="paramDefine.field" [id]="paramDefine.field">
<label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
@@ -117,7 +117,7 @@
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "intervals">采集间隔</nz-form-label>
<nz-form-control nzSpan="10">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="8"
name="intervals" id="intervals" nzPlaceHolder="监控周期性采集间隔时间,单位秒">
</nz-input-number>
</nz-form-control>
@@ -125,14 +125,14 @@
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "detect">启动探测</nz-form-label>
<nz-form-control nzSpan="10">
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'description'>描述备注</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea rows="3" nz-input name="description" id="description"></textarea>
</nz-textarea-count>

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

@@ -23,14 +23,15 @@
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'host' nzRequired="true">监控Host</nz-form-label>
<nz-form-control [nzSpan]="10">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" placeholder="请输入域名或IP">
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host"
placeholder="请输入域名或IP" (ngModelChange)="onHostChange($event)">
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'name' nzRequired="true">监控名称</nz-form-label>
<nz-form-control [nzSpan]="10">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name">
<nz-form-control [nzSpan]="8">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name" placeholder="监控名称需要保证唯一性">
</nz-form-control>
</nz-form-item >
@@ -42,7 +43,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="8">
<input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field"
[type]="paramDefine.type" [id]="paramDefine.field"
[placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''">
@@ -53,7 +54,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8">
<nz-input-group [nzSuffix]="suffixTemplate">
<input
[type]="passwordVisible ? 'text' : 'password'"
@@ -76,7 +77,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8">
<nz-input-number
[(ngModel)]="params[i].value"
[nzMin]="-1000"
@@ -92,7 +93,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8">
<nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch>
</nz-form-control>
@@ -101,7 +102,7 @@
[nzRequired]="paramDefine.required"
[nzFor]= "paramDefine.field">{{paramDefine.name}}
</nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="10">
<nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8">
<nz-radio-group [(ngModel)]="params[i].value" nzButtonStyle="solid"
[name]="paramDefine.field" [id]="paramDefine.field">
<label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
@@ -116,7 +117,7 @@
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "intervals">采集间隔</nz-form-label>
<nz-form-control nzSpan="10">
<nz-form-control nzSpan="8">
<nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="10000" [nzStep]="10"
name="intervals" id="intervals" nzPlaceHolder="监控周期性采集间隔时间,单位秒">
</nz-input-number>
@@ -125,14 +126,14 @@
<nz-form-item>
<nz-form-label nzSpan="7" nzFor= "detect">启动探测</nz-form-label>
<nz-form-control nzSpan="10">
<nz-form-control nzSpan="8">
<nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
</nz-form-control>
</nz-form-item >
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor= 'description'>描述备注</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-form-control [nzSpan]="8">
<nz-textarea-count [nzMaxCharacterCount]="100">
<textarea rows="3" nz-input name="description" id="description"></textarea>
</nz-textarea-count>

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

@@ -73,6 +73,10 @@ export class MonitorNewComponent implements OnInit {
});
}
onHostChange(hostValue: string) {
this.monitor.name = this.monitor.app.toUpperCase() + '_' + hostValue;
}
onSubmit() {
// todo 暂时单独设置host属性值
this.params.forEach(param => {