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
2022-02-09 20:35:18 +08:00
parent c3b1fde42a
commit b8ef36d28a
5 changed files with 106 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@@ -33,6 +33,7 @@
> `HertzBeat`的多类型支持，易扩展，低耦合，希望能帮助开发者和中小团队快速搭建自有监控系统。 > `HertzBeat`的多类型支持，易扩展，低耦合，希望能帮助开发者和中小团队快速搭建自有监控系统。
<iframe src="//player.bilibili.com/player.html?aid=551403148&bvid=BV1Vi4y1f7i8&cid=504787541&page=1" scrolling="no" width="800px" height="600px" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
## 🥐 模块 ## 🥐 模块

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

@@ -21,19 +21,19 @@
<nz-spin [nzSpinning]="isSpinning"> <nz-spin [nzSpinning]="isSpinning">
<div class="-inner-content"> <div class="-inner-content">
<form nz-form> <form nz-form #editForm="ngForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label> <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" placeholder="请输入域名或IP" /> <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required placeholder="请输入域名或IP" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性"> <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
监控名称 监控名称
</nz-form-label> </nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" /> <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
@@ -47,10 +47,15 @@
[nzFor]="paramDefine.field" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'" nzSpan="8"> <nz-form-control
*ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
nzSpan="8"
[nzErrorTip]="'validation.required' | i18n"
>
<input <input
nz-input nz-input
[(ngModel)]="params[i].value" [(ngModel)]="params[i].value"
[required]="paramDefine.required"
[name]="paramDefine.field" [name]="paramDefine.field"
[type]="paramDefine.type" [type]="paramDefine.type"
[id]="paramDefine.field" [id]="paramDefine.field"
@@ -61,12 +66,13 @@
<nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-input-group [nzSuffix]="suffixTemplate"> <nz-input-group [nzSuffix]="suffixTemplate">
<input <input
[type]="passwordVisible ? 'text' : 'password'" [type]="passwordVisible ? 'text' : 'password'"
nz-input nz-input
placeholder="input password" placeholder="input password"
[required]="paramDefine.required"
[(ngModel)]="params[i].value" [(ngModel)]="params[i].value"
[id]="paramDefine.field" [id]="paramDefine.field"
[name]="paramDefine.field" [name]="paramDefine.field"
@@ -81,9 +87,10 @@
<nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-input-number <nz-input-number
[(ngModel)]="params[i].value" [(ngModel)]="params[i].value"
[required]="paramDefine.required"
[nzMin]="-1000" [nzMin]="-1000"
[nzMax]="65535" [nzMax]="65535"
[nzStep]="1" [nzStep]="1"
@@ -96,15 +103,26 @@
<nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch> <nz-switch
[(ngModel)]="params[i].value"
[required]="paramDefine.required"
[name]="paramDefine.field"
[id]="paramDefine.field"
></nz-switch>
</nz-form-control> </nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-radio-group [(ngModel)]="params[i].value" nzButtonStyle="solid" [name]="paramDefine.field" [id]="paramDefine.field"> <nz-radio-group
[(ngModel)]="params[i].value"
[required]="paramDefine.required"
nzButtonStyle="solid"
[name]="paramDefine.field"
[id]="paramDefine.field"
>
<label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options"> <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
{{ optionItem.label }} {{ optionItem.label }}
</label> </label>
@@ -140,8 +158,8 @@
<div nz-row> <div nz-row>
<div nz-col nzSpan="8" nzOffset="9"> <div nz-col nzSpan="8" nzOffset="9">
<button nz-button nzType="primary" type="submit" (click)="onDetect()"> 探测 </button> <button nz-button nzType="primary" type="submit" (click)="onDetect(editForm.form)"> 探测 </button>
<button nz-button nzType="primary" type="submit" (click)="onSubmit()"> 确定 </button> <button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> 确定 </button>
<button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button> <button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
</div> </div>
</div> </div>

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

@@ -102,7 +102,16 @@ export class MonitorEditComponent implements OnInit {
}); });
} }
onSubmit() { onSubmit(formGroup: FormGroup) {
if (formGroup.invalid) {
Object.values(formGroup.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
return;
}
// todo 暂时单独设置host属性值 // todo 暂时单独设置host属性值
this.params.forEach(param => { this.params.forEach(param => {
if (param.field === 'host') { if (param.field === 'host') {
@@ -132,7 +141,16 @@ export class MonitorEditComponent implements OnInit {
); );
} }
onDetect() { onDetect(formGroup: FormGroup) {
if (formGroup.invalid) {
Object.values(formGroup.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
return;
}
// todo 暂时单独设置host属性值 // todo 暂时单独设置host属性值
this.params.forEach(param => { this.params.forEach(param => {
if (param.field === 'host') { if (param.field === 'host') {

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

@@ -21,16 +21,17 @@
<nz-spin [nzSpinning]="isSpinning"> <nz-spin [nzSpinning]="isSpinning">
<div class="-inner-content"> <div class="-inner-content">
<form nz-form> <form nz-form #newForm="ngForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label> <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" nzTooltipTitle="被监控的对端IP或域名"> 监控Host </nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input <input
[(ngModel)]="monitor.host" [(ngModel)]="monitor.host"
nz-input nz-input
name="host" name="host"
type="text" type="text"
id="host" id="host"
required
placeholder="请输入域名或IP" placeholder="请输入域名或IP"
(ngModelChange)="onHostChange($event)" (ngModelChange)="onHostChange($event)"
/> />
@@ -40,8 +41,8 @@
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性"> <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" nzTooltipTitle="标识此监控的名称,名称需要保证唯一性">
监控名称 监控名称
</nz-form-label> </nz-form-label>
<nz-form-control [nzSpan]="8"> <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
<input [(ngModel)]="monitor.name" nz-input name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" /> <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" placeholder="监控名称需要保证唯一性" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
@@ -55,9 +56,14 @@
[nzFor]="paramDefine.field" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'" nzSpan="8"> <nz-form-control
*ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
nzSpan="8"
[nzErrorTip]="'validation.required' | i18n"
>
<input <input
nz-input nz-input
[required]="paramDefine.required"
[(ngModel)]="params[i].value" [(ngModel)]="params[i].value"
[name]="paramDefine.field" [name]="paramDefine.field"
[type]="paramDefine.type" [type]="paramDefine.type"
@@ -69,11 +75,12 @@
<nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-input-group [nzSuffix]="suffixTemplate"> <nz-input-group [nzSuffix]="suffixTemplate">
<input <input
[type]="passwordVisible ? 'text' : 'password'" [type]="passwordVisible ? 'text' : 'password'"
nz-input nz-input
[required]="paramDefine.required"
placeholder="input password" placeholder="input password"
[(ngModel)]="params[i].value" [(ngModel)]="params[i].value"
[id]="paramDefine.field" [id]="paramDefine.field"
@@ -89,9 +96,10 @@
<nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-input-number <nz-input-number
[(ngModel)]="params[i].value" [(ngModel)]="params[i].value"
[required]="paramDefine.required"
[nzMin]="-1000" [nzMin]="-1000"
[nzMax]="65535" [nzMax]="65535"
[nzStep]="1" [nzStep]="1"
@@ -104,15 +112,26 @@
<nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-switch [(ngModel)]="params[i].value" [name]="paramDefine.field" [id]="paramDefine.field"></nz-switch> <nz-switch
[(ngModel)]="params[i].value"
[required]="paramDefine.required"
[name]="paramDefine.field"
[id]="paramDefine.field"
></nz-switch>
</nz-form-control> </nz-form-control>
<nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field" <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
>{{ paramDefine.name }} >{{ paramDefine.name }}
</nz-form-label> </nz-form-label>
<nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8"> <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
<nz-radio-group [(ngModel)]="params[i].value" nzButtonStyle="solid" [name]="paramDefine.field" [id]="paramDefine.field"> <nz-radio-group
[(ngModel)]="params[i].value"
nzButtonStyle="solid"
[required]="paramDefine.required"
[name]="paramDefine.field"
[id]="paramDefine.field"
>
<label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options"> <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
{{ optionItem.label }} {{ optionItem.label }}
</label> </label>
@@ -148,8 +167,8 @@
<div nz-row> <div nz-row>
<div nz-col nzSpan="8" nzOffset="9"> <div nz-col nzSpan="8" nzOffset="9">
<button nz-button nzType="primary" type="submit" (click)="onDetect()"> 探测 </button> <button nz-button nzType="primary" type="submit" (click)="onDetect(newForm.form)"> 探测 </button>
<button nz-button nzType="primary" type="submit" (click)="onSubmit()"> 确定 </button> <button nz-button nzType="primary" type="submit" (click)="onSubmit(newForm.form)"> 确定 </button>
<button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button> <button nz-button nzType="primary" type="reset" (click)="onCancel()"> 取消 </button>
</div> </div>
</div> </div>

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

@@ -1,5 +1,5 @@
import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, ParamMap, Router } from '@angular/router'; import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { I18NService } from '@core'; import { I18NService } from '@core';
import { TitleService } from '@delon/theme'; import { TitleService } from '@delon/theme';
@@ -21,7 +21,6 @@ export class MonitorNewComponent implements OnInit {
paramDefines!: ParamDefine[]; paramDefines!: ParamDefine[];
params!: Param[]; params!: Param[];
monitor!: Monitor; monitor!: Monitor;
profileForm: FormGroup = new FormGroup({});
detected: boolean = false; detected: boolean = false;
passwordVisible: boolean = false; passwordVisible: boolean = false;
// 是否显示加载中 // 是否显示加载中
@@ -84,7 +83,16 @@ export class MonitorNewComponent implements OnInit {
this.monitor.name = `${this.monitor.app.toUpperCase()}_${hostValue}`; this.monitor.name = `${this.monitor.app.toUpperCase()}_${hostValue}`;
} }
onSubmit() { onSubmit(formGroup: FormGroup) {
if (formGroup.invalid) {
Object.values(formGroup.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
return;
}
// todo 暂时单独设置host属性值 // todo 暂时单独设置host属性值
this.params.forEach(param => { this.params.forEach(param => {
if (param.field === 'host') { if (param.field === 'host') {
@@ -114,7 +122,16 @@ export class MonitorNewComponent implements OnInit {
); );
} }
onDetect() { onDetect(formGroup: FormGroup) {
if (formGroup.invalid) {
Object.values(formGroup.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
return;
}
// todo 暂时单独设置host属性值 // todo 暂时单独设置host属性值
this.params.forEach(param => { this.params.forEach(param => {
if (param.field === 'host') { if (param.field === 'host') {