[manager,web-app] 支持监控参数的输入框提示信息，默认值填充

manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java

@@ -0,0 +1,25 @@
+package com.usthe.manager.pojo.entity;
+
+import com.usthe.common.util.GsonUtil;
+
+import javax.persistence.AttributeConverter;
+import java.util.Map;
+
+/**
+ * json 互转map对象字段为数据String字段
+ * @author tom
+ * @date 2021/12/4 07:54
+ */
+public class JsonMapAttributeConverter implements AttributeConverter<Map<String,String>, String> {
+
+    @Override
+    public String convertToDatabaseColumn(Map<String,String> attribute) {
+        return GsonUtil.toJson(attribute);
+
+    }
+
+    @Override
+    public Map<String,String> convertToEntityAttribute(String dbData) {
+        return GsonUtil.fromJson(dbData, Map.class);
+    }
+}

manager/src/main/java/com/usthe/manager/pojo/entity/ParamDefine.java

@@ -8,12 +8,14 @@ import lombok.Data;
 import lombok.NoArgsConstructor;
 
 import javax.persistence.Column;
+import javax.persistence.Convert;
 import javax.persistence.Entity;
 import javax.persistence.GeneratedValue;
 import javax.persistence.GenerationType;
 import javax.persistence.Id;
 import javax.persistence.Table;
 import java.time.LocalDateTime;
+import java.util.Map;
 
 import static io.swagger.annotations.ApiModelProperty.AccessMode.READ_ONLY;
 import static io.swagger.annotations.ApiModelProperty.AccessMode.READ_WRITE;
@@ -69,6 +71,18 @@ public class ParamDefine {
     private boolean required = false;
 
     /**
+     * 参数默认值
+     */
+    @ApiModelProperty(value = "参数默认值", example = "12", accessMode = READ_WRITE, position = 6)
+    private String defaultValue;
+
+    /**
+     * 参数输入框提示信息
+     */
+    @ApiModelProperty(value = "参数输入框提示信息", example = "请输入密码", accessMode = READ_WRITE, position = 7)
+    private String placeholder;
+
+    /**
      * 当type为number时,用range表示范围 eg: 0-233
      */
     @ApiModelProperty(value = "当type为number时,用range区间表示范围", example = "[0,233]", accessMode = READ_WRITE, position = 6)
@@ -83,12 +97,18 @@ public class ParamDefine {
     private Short limit;
 
     /**
-     * 当type为radio单选框,checkbox复选框时,option表示可选项值列表
-     * eg: param3,param4,param5
+     * 当type为radio单选框,checkbox复选框时,options表示可选项值列表
+     * eg: {
+     *     "key1":"value1",
+     *     "key2":"value2"
+     * }
+     * key-值显示标签
+     * value-真正值
      */
-    @ApiModelProperty(value = "当type为radio单选框,checkbox复选框时,option表示可选项值列表", example = "10,20,30", accessMode = READ_WRITE, position = 8)
-    @Column(name = "param_option")
-    private String option;
+    @ApiModelProperty(value = "当type为radio单选框,checkbox复选框时,option表示可选项值列表", example = "{key1,value1}", accessMode = READ_WRITE, position = 8)
+    @Column(name = "param_options")
+    @Convert(converter = JsonMapAttributeConverter.class)
+    private Map<String,String> options;
 
     /**
      * 此条记录创建者

manager/src/main/resources/define/param/A-example.yml

@@ -16,6 +16,10 @@ param:
     # 当type为number时,用range表示范围
     range: '[0,65535]'
     required: true
+    # 端口默认值
+    defaultValue: 80
+    # 参数输入框提示信息
+    placeholder: '请输入端口'
   - field: username
     name: 用户名
     type: text

manager/src/main/resources/define/param/website.yml

@@ -16,12 +16,14 @@ param:
     # 当type为number时,用range表示范围
     range: '[0,65535]'
     required: true
+    defaultValue: 80
   - field: uri
     name: URI路径
     type: text
     # 当type为text时,用limit表示字符串限制大小
     limit: 100
     required: true
+    placeholder: 'eg:/index.html'
   - field: method
     name: 请求方式
     type: text

web-app/src/app/pojo/ParamDefine.ts

@@ -3,7 +3,9 @@ export class ParamDefine {
   field!: string;
   type!: string;
   required: boolean | undefined;
+  defaultValue: string | undefined;
+  placeholder!: string;
   range: string | undefined;
   limit: number | undefined;
-  option: string | undefined;
+  options: string | undefined;
 }

web-app/src/app/routes/monitor/monitor-edit/monitor-edit.component.html

@@ -24,7 +24,7 @@
       <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">
+          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" placeholder="请输入域名或IP">
         </nz-form-control>
       </nz-form-item >
       <nz-form-item>
@@ -43,7 +43,9 @@
                        [nzFor]= "paramDefine.field">{{paramDefine.name}}
         </nz-form-label>
         <nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="10">
-          <input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field" [type]="paramDefine.type" [id]="paramDefine.field">
+          <input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field"
+                 [type]="paramDefine.type" [id]="paramDefine.field"
+                 [placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''">
         </nz-form-control>
 
         <nz-form-label *ngIf="paramDefine.type === 'password'"
@@ -60,6 +62,7 @@
               [(ngModel)]="params[i].value"
               [id]="paramDefine.field"
               [name]="paramDefine.field"
+              [placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''"
             />
           </nz-input-group>
           <ng-template #suffixTemplate>
@@ -79,7 +82,7 @@
             [nzMin]="-1000"
             [nzMax]="65535"
             [nzStep]="1"
-            [nzPlaceHolder]="paramDefine.name"
+            [nzPlaceHolder]="paramDefine.placeholder? paramDefine.placeholder : ''"
             [name]="paramDefine.field" [id]="paramDefine.field"
           ></nz-input-number>
         </nz-form-control>
@@ -101,7 +104,7 @@
         <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"
-                           name="intervals" id="intervals">
+                           name="intervals" id="intervals" nzPlaceHolder="监控周期性采集间隔时间,单位秒">
           </nz-input-number>
         </nz-form-control>
       </nz-form-item >

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.html

@@ -24,7 +24,7 @@
       <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">
+          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" placeholder="请输入域名或IP">
         </nz-form-control>
       </nz-form-item >
       <nz-form-item>
@@ -43,7 +43,9 @@
                        [nzFor]= "paramDefine.field">{{paramDefine.name}}
         </nz-form-label>
         <nz-form-control *ngIf="paramDefine.field !== 'host' && paramDefine.type ==='text'" nzSpan="10">
-          <input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field" [type]="paramDefine.type" [id]="paramDefine.field">
+          <input nz-input [(ngModel)]="params[i].value" [name]="paramDefine.field"
+                 [type]="paramDefine.type" [id]="paramDefine.field"
+                 [placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''">
         </nz-form-control>
 
         <nz-form-label *ngIf="paramDefine.type === 'password'"
@@ -60,6 +62,7 @@
               [(ngModel)]="params[i].value"
               [id]="paramDefine.field"
               [name]="paramDefine.field"
+              [placeholder]="paramDefine.placeholder? paramDefine.placeholder : ''"
             />
           </nz-input-group>
           <ng-template #suffixTemplate>
@@ -79,7 +82,7 @@
             [nzMin]="-1000"
             [nzMax]="65535"
             [nzStep]="1"
-            [nzPlaceHolder]="paramDefine.name"
+            [nzPlaceHolder]="paramDefine.placeholder? paramDefine.placeholder : ''"
             [name]="paramDefine.field" [id]="paramDefine.field"
           ></nz-input-number>
         </nz-form-control>
@@ -101,7 +104,7 @@
         <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"
-                           name="intervals" id="intervals">
+                           name="intervals" id="intervals" nzPlaceHolder="监控周期性采集间隔时间,单位秒">
           </nz-input-number>
         </nz-form-control>
       </nz-form-item >

web-app/src/app/routes/monitor/monitor-new/monitor-new.component.ts

@@ -55,6 +55,15 @@ export class MonitorNewComponent implements OnInit {
           if (define.type === "boolean") {
             param.value = false;
           }
+          if (define.defaultValue != undefined) {
+            if (define.type === "number") {
+              param.value = Number(define.defaultValue);
+            } else if (define.type === "boolean") {
+              param.value = define.defaultValue.toLowerCase() == 'true'
+            } else {
+              param.value = define.defaultValue;
+            }
+          }
           this.params.push(param);
         })
       } else {