From a1d6c530c711d17ae50a2499b99359fcd2164460 Mon Sep 17 00:00:00 2001
From: tomsun28 <tomsun28@outlook.com>
Date: Sat, 4 Dec 2021 20:20:36 +0800
Subject: [PATCH] =?UTF-8?q?[web-app]=20=E6=96=B0=E5=A2=9E=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E6=97=B6=E5=90=8D=E7=A7=B0=E8=87=AA=E5=8A=A8=E7=94=9F?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../monitor-edit/monitor-edit.component.html  | 20 +++++++--------
 .../monitor-new/monitor-new.component.html    | 25 ++++++++++---------
 .../monitor-new/monitor-new.component.ts      |  4 +++
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
index bf160e2..cea9cf0 100644
--- a/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
+++ b/web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html
@@ -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>
diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
index 9dda2fb..c6fae9f 100644
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html
@@ -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>
diff --git a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
index 98151fd..eb14b9b 100644
--- a/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts
@@ -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 => {