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

2021-12-04 09:00:11 +08:00
parent 48428d4212
commit b2efef13ff
8 changed files with 82 additions and 14 deletions
--- a/manager/src/main/java/com/usthe/manager/pojo/entity/JsonMapAttributeConverter.java
+++ b/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);
+    }
+}
--- a/manager/src/main/java/com/usthe/manager/pojo/entity/ParamDefine.java
+++ b/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;
@@ -68,6 +70,18 @@ public class ParamDefine {
    @ApiModelProperty(value = "是否是必输项 true-必填 false-可选", example = "true", accessMode = READ_WRITE, position = 5)
    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
     */
@@ -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;

    /**
     * 此条记录创建者
--- a/manager/src/main/resources/define/param/A-example.yml
+++ b/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
--- a/manager/src/main/resources/define/param/website.yml
+++ b/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
--- a/web-app/src/app/pojo/ParamDefine.ts
+++ b/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;
 }
--- 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
@@ -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 >
--- 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
@@ -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 >
--- 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
@@ -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 {