[monitor]feature:api monitor support http headers

* [collector]feature 检测网站SSL证书是否过期

* [collector]fix cannot find symbol class BASE64Decoder

collector/src/main/java/com/usthe/collector/collect/common/http/CommonHttpClient.java

@@ -17,7 +17,9 @@ import javax.net.ssl.SSLContext;
 import javax.net.ssl.TrustManager;
 import javax.net.ssl.X509TrustManager;
 import java.security.cert.CertificateException;
+import java.security.cert.CertificateExpiredException;
 import java.security.cert.X509Certificate;
+import java.util.Date;
 import java.util.concurrent.TimeUnit;
 
 /**
@@ -75,7 +77,18 @@ public class CommonHttpClient {
                 @Override
                 public void checkClientTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException { }
                 @Override
-                public void checkServerTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException { }
+                public void checkServerTrusted(X509Certificate[] x509Certificates, String s) throws CertificateException {
+                    // 判断服务器证书有效期时间
+                    Date now = new Date();
+                    if (x509Certificates != null && x509Certificates.length > 0) {
+                        for (X509Certificate certificate : x509Certificates) {
+                            Date deadline = certificate.getNotAfter();
+                            if (deadline != null && now.after(deadline)) {
+                                throw new CertificateExpiredException();
+                            }
+                        }
+                    }
+                }
                 @Override
                 public X509Certificate[] getAcceptedIssuers() { return null; }
             };

collector/src/main/java/com/usthe/collector/collect/common/ssh/CommonSshClient.java

@@ -2,6 +2,9 @@ package com.usthe.collector.collect.common.ssh;
 
 import lombok.extern.slf4j.Slf4j;
 import org.apache.sshd.client.SshClient;
+import org.apache.sshd.client.keyverifier.AcceptAllServerKeyVerifier;
+import org.apache.sshd.common.PropertyResolverUtils;
+import org.apache.sshd.core.CoreModuleProperties;
 
 /**
  * ssh公共client
@@ -16,6 +19,14 @@ public class CommonSshClient {
 
     static {
         sshClient = SshClient.setUpDefaultClient();
+        // 接受所有服务端公钥校验，会打印warn日志 Server at {} presented unverified {} key: {}
+        AcceptAllServerKeyVerifier verifier = AcceptAllServerKeyVerifier.INSTANCE;
+        sshClient.setServerKeyVerifier(verifier);
+        // 设置链接保活心跳10000毫秒一次, 客户端等待保活心跳超时响应时间3000毫秒
+        PropertyResolverUtils.updateProperty(
+                sshClient, CoreModuleProperties.HEARTBEAT_INTERVAL.getName(), 10000);
+        PropertyResolverUtils.updateProperty(
+                sshClient, CoreModuleProperties.HEARTBEAT_REPLY_WAIT.getName(), 3000);
         sshClient.start();
     }
 

collector/src/main/java/com/usthe/collector/collect/database/JdbcCommonCollect.java

@@ -52,8 +52,8 @@ public class JdbcCommonCollect extends AbstractCollect {
         }
         JdbcProtocol jdbcProtocol = metrics.getJdbc();
         String databaseUrl = constructDatabaseUrl(jdbcProtocol);
-        // 查询超时时间默认3000毫秒
+        // 查询超时时间默认6000毫秒
-        int timeout = 3000;
+        int timeout = 6000;
         try {
             // 获取查询语句超时时间
             if (jdbcProtocol.getTimeout() != null) {

collector/src/main/java/com/usthe/collector/collect/icmp/IcmpCollectImpl.java

@@ -37,8 +37,8 @@ public class IcmpCollectImpl extends AbstractCollect {
             return;
         }
         IcmpProtocol icmp = metrics.getIcmp();
-        // 超时时间默认300毫秒
+        // 超时时间默认6000毫秒
-        int timeout = 300;
+        int timeout = 6000;
         try {
             timeout = Integer.parseInt(icmp.getTimeout());
         } catch (Exception e) {

collector/src/main/java/com/usthe/collector/collect/ssh/SshCollectImpl.java

@@ -5,6 +5,7 @@ import com.usthe.collector.collect.common.cache.CacheIdentifier;
 import com.usthe.collector.collect.common.cache.CommonCache;
 import com.usthe.collector.collect.common.ssh.CommonSshClient;
 import com.usthe.collector.util.CollectorConstants;
+import com.usthe.collector.util.KeyPairUtil;
 import com.usthe.common.entity.job.Metrics;
 import com.usthe.common.entity.job.protocol.SshProtocol;
 import com.usthe.common.entity.message.CollectRep;
@@ -19,6 +20,7 @@ import org.springframework.util.StringUtils;
 import java.io.ByteArrayOutputStream;
 import java.io.IOException;
 import java.net.ConnectException;
+import java.security.KeyPair;
 import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
@@ -56,8 +58,8 @@ public class SshCollectImpl extends AbstractCollect {
             return;
         }
         SshProtocol sshProtocol = metrics.getSsh();
-        // 超时时间默认300毫秒
+        // 超时时间默认6000毫秒
-        int timeout = 3000;
+        int timeout = 6000;
         try {
             timeout = Integer.parseInt(sshProtocol.getTimeout());
         } catch (Exception e) {
@@ -181,6 +183,13 @@ public class SshCollectImpl extends AbstractCollect {
                 .verify(timeout, TimeUnit.MILLISECONDS).getSession();
         if (StringUtils.hasText(sshProtocol.getPassword())) {
             clientSession.addPasswordIdentity(sshProtocol.getPassword());
+        } else if (StringUtils.hasText(sshProtocol.getPublicKey())) {
+            KeyPair keyPair = KeyPairUtil.getKeyPairFromPublicKey(sshProtocol.getPublicKey());
+            if (keyPair != null) {
+                clientSession.addPublicKeyIdentity(keyPair);
+            }
+        } else {
+            throw new IllegalArgumentException("需填写账户登陆密码或公钥");
         }
         // 进行认证
         if (!clientSession.auth().verify(timeout, TimeUnit.MILLISECONDS).isSuccess()) {

collector/src/main/java/com/usthe/collector/collect/telnet/TelnetCollectImpl.java

@@ -38,8 +38,8 @@ public class TelnetCollectImpl extends AbstractCollect {
         }
 
         TelnetProtocol telnet = metrics.getTelnet();
-        // 超时时间默认300毫秒
+        // 超时时间默认6000毫秒
-        int timeout = 300;
+        int timeout = 6000;
         try {
             timeout = Integer.parseInt(telnet.getTimeout());
         } catch (Exception e) {

collector/src/main/java/com/usthe/collector/dispatch/timer/WheelTimerTask.java

@@ -12,6 +12,7 @@ import com.usthe.common.entity.job.Job;
 import com.usthe.common.entity.job.Metrics;
 import com.usthe.common.util.AesUtil;
 import com.usthe.common.util.CommonConstants;
+import com.usthe.common.util.GsonUtil;
 import lombok.extern.slf4j.Slf4j;
 
 import java.util.ArrayList;
@@ -84,6 +85,26 @@ public class WheelTimerTask implements TimerTask {
             while (iterator.hasNext()) {
                 Map.Entry<String, JsonElement> entry = iterator.next();
                 JsonElement element = entry.getValue();
+                String key = entry.getKey();
+                // 替换KEY-VALUE情况的属性 比如http headers params
+                if (key != null && key.startsWith("^_^") && key.endsWith("^_^")) {
+                    key = key.replaceAll("\\^_\\^", "");
+                    Configmap param = configmap.get(key);
+                    if (param.getType() == (byte) 3) {
+                        String jsonValue = (String) param.getValue();
+                         Map<String, String> map = GsonUtil.fromJson(jsonValue, Map.class);
+                         if (map != null) {
+                             map.forEach((name, value) -> {
+                                 if (name != null && !"".equals(name.trim())) {
+                                     jsonObject.addProperty(name, value);
+                                 }
+                             });
+                         }
+                    }
+                    iterator.remove();
+                    continue;
+                }
+                // 替换正常的VALUE值
                 if (element.isJsonPrimitive()) {
                     // 判断是否含有特殊字符 替换
                     String value = element.getAsString();

collector/src/main/java/com/usthe/collector/util/KeyPairUtil.java

@@ -0,0 +1,48 @@
+package com.usthe.collector.util;
+
+import lombok.extern.slf4j.Slf4j;
+
+import java.security.KeyFactory;
+import java.security.KeyPair;
+import java.security.PublicKey;
+import java.security.spec.X509EncodedKeySpec;
+import java.util.Base64;
+
+/**
+ * 密钥工具类
+ * @author tom
+ * @date 2022/4/2 17:04
+ */
+@Slf4j
+public class KeyPairUtil {
+
+    private static KeyFactory keyFactory;
+
+    static {
+        try {
+            keyFactory = KeyFactory.getInstance("RSA");
+        } catch (Exception e) {
+            log.error(e.getMessage(), e);
+        }
+    }
+
+    /**
+     * 获取密钥对
+     */
+    public static KeyPair getKeyPairFromPublicKey(String publicKeyStr) {
+        try {
+            if (publicKeyStr == null || "".equals(publicKeyStr)) {
+                return null;
+            }
+            // todo fix 公钥解析
+            byte[] publicKeyBytes = Base64.getDecoder().decode(publicKeyStr);
+            X509EncodedKeySpec keySpec = new X509EncodedKeySpec(publicKeyBytes);
+            PublicKey publicKey = keyFactory.generatePublic(keySpec);
+            return new KeyPair(publicKey, null);
+        } catch (Exception e) {
+            log.info("[keyPair] parse failed, {}." + e.getMessage());
+            return null;
+        }
+    }
+
+}

common/src/main/java/com/usthe/common/entity/job/Configmap.java

@@ -28,7 +28,7 @@ public class Configmap {
     private Object value;
 
     /**
-     * 参数类型 0:数字 1:字符串 2:加密串
+     * 参数类型 0:数字 1:字符串 2:加密串 3:map映射的json串
      * number,string,secret
      * 数字,非加密字符串,加密字符串
      */

common/src/main/java/com/usthe/common/entity/job/protocol/SshProtocol.java

@@ -29,7 +29,7 @@ public class SshProtocol {
     /**
      * 超时时间
      */
-    private String timeout = "3000";
+    private String timeout;
 
     /**
      * 用户名

common/src/main/java/com/usthe/common/entity/manager/Param.java

@@ -59,15 +59,15 @@ public class Param {
      * 参数值
      */
     @ApiModelProperty(value = "参数值", example = "8080", accessMode = READ_WRITE, position = 3)
-    @Length(max = 255)
+    @Length(max = 8126)
     private String value;
 
     /**
-     * 参数类型 0:数字 1:字符串 2:加密串
+     * 参数类型 0:数字 1:字符串 2:加密串 3:map映射的json串
      */
-    @ApiModelProperty(value = "参数类型 0:数字 1:字符串 2:加密串", accessMode = READ_WRITE, position = 4)
+    @ApiModelProperty(value = "参数类型 0:数字 1:字符串 2:加密串 3:map映射的json串", accessMode = READ_WRITE, position = 4)
     @Min(0)
-    @Max(2)
+    @Max(3)
     private byte type;
 
     /**

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

@@ -110,29 +110,41 @@ public class ParamDefine {
     @Convert(converter = JsonOptionListAttributeConverter.class)
     private List<Option> options;
 
+    /**
+     * 当type为key-value时有效,表示key的别名描述
+     */
+    @ApiModelProperty(value = "当type为key-value时有效,表示key的别名描述", example = "Name", accessMode = READ_WRITE, position = 9)
+    private String keyAlias;
+
+    /**
+     * 当type为key-value时有效,表示value的别名描述
+     */
+    @ApiModelProperty(value = "当type为key-value时有效,表示value的别名描述", example = "Value", accessMode = READ_WRITE, position = 10)
+    private String valueAlias;
+
     /**
      * 此条记录创建者
      */
-    @ApiModelProperty(value = "此条记录创建者", example = "tom", accessMode = READ_ONLY, position = 9)
+    @ApiModelProperty(value = "此条记录创建者", example = "tom", accessMode = READ_ONLY, position = 11)
     private String creator;
 
     /**
      * 此条记录最新修改者
      */
-    @ApiModelProperty(value = "此条记录最新修改者", example = "tom", accessMode = READ_ONLY, position = 10)
+    @ApiModelProperty(value = "此条记录最新修改者", example = "tom", accessMode = READ_ONLY, position = 12)
     private String modifier;
 
     /**
      * 记录创建时间
      */
-    @ApiModelProperty(value = "记录创建时间(毫秒时间戳)", example = "1612198922000", accessMode = READ_ONLY, position = 11)
+    @ApiModelProperty(value = "记录创建时间(毫秒时间戳)", example = "1612198922000", accessMode = READ_ONLY, position = 13)
     @Column(insertable = false, updatable = false)
     private LocalDateTime gmtCreate;
 
     /**
      * 记录最新修改时间
      */
-    @ApiModelProperty(value = "记录最新修改时间(毫秒时间戳)", example = "1612198444000", accessMode = READ_ONLY, position = 12)
+    @ApiModelProperty(value = "记录最新修改时间(毫秒时间戳)", example = "1612198444000", accessMode = READ_ONLY, position = 14)
     @Column(insertable = false, updatable = false)
     private LocalDateTime gmtUpdate;
 

manager/src/main/java/com/usthe/manager/service/impl/MonitorServiceImpl.java

@@ -236,6 +236,9 @@ public class MonitorServiceImpl implements MonitorService {
                         case "checkbox":
                             // todo checkbox校验
                             break;
+                        case "key-value":
+                            // todo key-value校验
+                            break;
                         // todo 更多参数定义与实际值格式校验
                         default:
                             throw new IllegalArgumentException("ParamDefine type " + paramDefine.getType() + " is invalid.");

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

@@ -5,7 +5,7 @@ app: example
 name:
   zh-CN: 模拟应用类型
   en-US: EXAMPLE APP
-# 参数映射map. type是参数类型: 0-number数字, 1-string明文字符串, 2-secret加密字符串
+# 参数映射map. type是参数类型: 0-number数字, 1-string明文字符串, 2-secret加密字符串, 3-map映射的json串
 # 强制固定必须参数 - host
 configmap:
   - key: host
@@ -16,6 +16,8 @@ configmap:
     type: 1
   - key: password
     type: 2
+  - key: headers
+    type: 3
 # 指标组列表
 metrics:
 # 第一个监控指标组 cpu
@@ -69,7 +71,7 @@ metrics:
       ssl: false
       # 请求头内容
       headers:
-        apiVersion: v1
+        ^_^headers^_^: ^_^headers^_^
       # 请求参数内容
       params:
         param1: param1

manager/src/main/resources/define/app/api.yml

@@ -26,6 +26,8 @@ configmap:
     type: 1
   - key: payload
     type: 1
+  - key: headers
+    type: 3
 # 指标组列表
 metrics:
   # 第一个监控指标组 cpu
@@ -58,6 +60,7 @@ metrics:
       # 请求头内容
       headers:
         content-type: ^_^contentType^_^
+        ^_^headers^_^: ^_^headers^_^
       # 认证
       authorization:
         # 认证方式: Basic Auth, Digest Auth, Bearer Token

manager/src/main/resources/define/app/linux.yml

@@ -16,6 +16,8 @@ configmap:
     type: 1
   - key: password
     type: 2
+  - key: timeout
+    type: 0
 # 指标组列表
 metrics:
 # 第一个监控指标组 basic
@@ -44,6 +46,7 @@ metrics:
       port: ^_^port^_^
       username: ^_^username^_^
       password: ^_^password^_^
+      timeout: ^_^timeout^_^
       script: (uname -r ; hostname ; uptime | awk -F "," '{print $1}' | sed  "s/ //g") | sed ":a;N;s/\n/^/g;ta" | awk -F '^' 'BEGIN{print "version hostname uptime"} {print $1, $2, $3}'
       # 响应数据解析方式：oneRow, multiRow
       parseType: multiRow
@@ -75,6 +78,7 @@ metrics:
       port: ^_^port^_^
       username: ^_^username^_^
       password: ^_^password^_^
+      timeout: ^_^timeout^_^
       script: "LANG=C lscpu | awk -F: '/Model name/ {print $2}';awk '/processor/{core++} END{print core}' /proc/cpuinfo;uptime | sed 's/,/ /g' | awk '{for(i=NF-2;i<=NF;i++)print $i }' | xargs;vmstat 1 1 | awk 'NR==3{print $11}';vmstat 1 1 | awk 'NR==3{print $12}'"
       parseType: oneRow
 
@@ -107,6 +111,7 @@ metrics:
       port: ^_^port^_^
       username: ^_^username^_^
       password: ^_^password^_^
+      timeout: ^_^timeout^_^
       script: free -m | grep Mem | awk 'BEGIN{print "total used free buff_cache available"} {print $2,$3,$4,$6,$7}'
       parseType: multiRow
 
@@ -139,6 +144,7 @@ metrics:
       port: ^_^port^_^
       username: ^_^username^_^
       password: ^_^password^_^
+      timeout: ^_^timeout^_^
       script: vmstat -D | awk 'NR==1{print $1}';vmstat -D | awk 'NR==2{print $1}';vmstat 1 1 | awk 'NR==3{print $10}';vmstat 1 1 | awk 'NR==3{print $9}';vmstat 1 1 | awk 'NR==3{print $16}'
       parseType: oneRow
 
@@ -164,5 +170,6 @@ metrics:
       port: ^_^port^_^
       username: ^_^username^_^
       password: ^_^password^_^
+      timeout: ^_^timeout^_^
       script: cat /proc/net/dev | tail -n +3 | awk 'BEGIN{ print "interface_name receive_bytes transmit_bytes"} {print $1,$2,$10}'
       parseType: multiRow

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

@@ -48,4 +48,10 @@ param:
       - label: PUT请求
         value: PUT
       - label: DELETE请求
-        value: DELETE
+        value: DELETE
+  - field: headers
+    name: 请求Headers
+    type: key-value
+    required: false
+    keyAlias: Header Name
+    valueAlias: Header Value

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

@@ -17,13 +17,6 @@ param:
     range: '[0,65535]'
     required: true
     defaultValue: 80
-  - field: uri
-    name: 相对路径
-    type: text
-    # 当type为text时,用limit表示字符串限制大小
-    limit: 200
-    required: false
-    placeholder: 'API地址除IP端口外的路径 例如:/v2/book/bar'
   - field: method
     name: 请求方式
     type: radio
@@ -38,21 +31,24 @@ param:
         value: PUT
       - label: DELETE请求
         value: DELETE
+  - field: uri
+    name: 相对路径
+    type: text
+    # 当type为text时,用limit表示字符串限制大小
+    limit: 200
+    required: false
+    placeholder: 'API地址除IP端口外的路径 例如:/v2/book/bar'
   - field: ssl
     name: 启用HTTPS
     # 当type为boolean时,前端用switch展示开关
     type: boolean
     required: true
-  - field: username
+  - field: headers
-    name: 用户名
+    name: 请求Headers
-    type: text
+    type: key-value
-    # 当type为text时,用limit表示字符串限制大小
-    limit: 20
-    required: false
-  - field: password
-    name: 密码
-    type: password
     required: false
+    keyAlias: Header Name
+    valueAlias: Header Value
   - field: contentType
     name: Content-Type
     type: text
@@ -63,3 +59,13 @@ param:
     type: textarea
     placeholder: 'POST PUT请求时有效'
     required: false
+  - field: username
+    name: 用户名
+    type: text
+    # 当type为text时,用limit表示字符串限制大小
+    limit: 20
+    required: false
+  - field: password
+    name: 密码
+    type: password
+    required: false

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

@@ -11,6 +11,12 @@ param:
     required: true
     defaultValue: 22
     placeholder: '请输入端口'
+  - field: timeout
+    name: 超时时间
+    type: number
+    required: false
+    defaultValue: 6000
+    placeholder: '超时时间'
   - field: username
     name: 用户名
     type: text
@@ -19,4 +25,4 @@ param:
   - field: password
     name: 密码
     type: password
-    required: true
+    required: false

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

@@ -15,7 +15,7 @@ param:
     name: 查询超时时间
     type: number
     required: false
-    defaultValue: 3000
+    defaultValue: 6000
     placeholder: '查询超时时间'
   - field: database
     name: 数据库名称

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

@@ -15,7 +15,7 @@ param:
     name: 查询超时时间
     type: number
     required: false
-    defaultValue: 3000
+    defaultValue: 6000
     placeholder: '查询超时时间'
   - field: database
     name: 数据库名称

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

@@ -15,7 +15,7 @@ param:
     name: 查询超时时间
     type: number
     required: false
-    defaultValue: 3000
+    defaultValue: 6000
     placeholder: '查询超时时间'
   - field: database
     name: 数据库名称

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

@@ -17,4 +17,4 @@ param:
     range: '[0,100000]'
     required: true
     placeholder: '请输入超时时间,单位毫秒'
-    defaultValue: 3000
+    defaultValue: 6000

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

@@ -24,4 +24,4 @@ param:
     range: '[0,100000]'
     required: true
     placeholder: '请输入超时时间,单位毫秒'
-    defaultValue: 3000
+    defaultValue: 6000

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

@@ -15,7 +15,7 @@ param:
     name: 查询超时时间
     type: number
     required: false
-    defaultValue: 3000
+    defaultValue: 6000
     placeholder: '查询超时时间'
   - field: database
     name: 数据库名称

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

@@ -15,7 +15,7 @@ param:
     name: 查询超时时间
     type: number
     required: false
-    defaultValue: 3000
+    defaultValue: 6000
     placeholder: '查询超时时间'
   - field: database
     name: 数据库名称

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

@@ -24,4 +24,4 @@ param:
     range: '[0,100000]'
     required: true
     placeholder: '请输入超时时间,单位毫秒'
-    defaultValue: 3000
+    defaultValue: 6000

script/docker-compose/conf/sql/schema.sql

@@ -34,7 +34,7 @@ CREATE TABLE  param
     id           bigint       not null auto_increment comment '参数ID',
     monitor_id   bigint       not null comment '监控ID',
     field        varchar(100) not null comment '参数标识符',
-    value        varchar(255) comment '参数值,最大字符长度255',
+    value        varchar(8126) comment '参数值,最大字符长度8126',
     type         tinyint      not null default 0 comment '参数类型 0:数字 1:字符串 2:加密串',
     gmt_create   timestamp    default current_timestamp comment 'create time',
     gmt_update   datetime     default current_timestamp on update current_timestamp comment 'update time',

script/docker-compose/conf/sureness.yml

@@ -36,10 +36,10 @@ excludedResource:
 # eg: lili 拥有[role1,role2],明文密码为lili, 加盐密码为1A676730B0C7F54654B0E09184448289
 account:
   - appId: admin
-    credential: admin@123.
+    credential: admin
     role: [role1,role2]
   - appId: tom
-    credential: tom@123.
+    credential: tom
     role: [role1,role2,role3]
   - appId: lili
     # 注意 Digest认证不支持加盐加密的密码账户

script/sql/schema.sql

@@ -34,7 +34,7 @@ CREATE TABLE  param
     id           bigint       not null auto_increment comment '参数ID',
     monitor_id   bigint       not null comment '监控ID',
     field        varchar(100) not null comment '参数标识符',
-    value        varchar(255) comment '参数值,最大字符长度255',
+    value        varchar(8126) comment '参数值,最大字符长度8126',
     type         tinyint      not null default 0 comment '参数类型 0:数字 1:字符串 2:加密串',
     gmt_create   timestamp    default current_timestamp comment 'create time',
     gmt_update   datetime     default current_timestamp on update current_timestamp comment 'update time',

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

@@ -9,4 +9,7 @@ export class ParamDefine {
   limit: number | undefined;
   //'[{"label":"GET请求","value":"GET"},{"label":"PUT请求","value":"PUT"}]'
   options!: any[];
+  // 当type为key-value时有效,表示别名描述
+  keyAlias!: string;
+  valueAlias!: string;
 }

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

@@ -86,7 +86,7 @@
           >{{ paramDefine.name }}
         </nz-form-label>
         <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-          <nz-input-group [nzSuffix]="suffixTemplate">
+          <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
             <input
               [type]="passwordVisible ? 'text' : 'password'"
               nz-input
@@ -147,6 +147,18 @@
             </label>
           </nz-radio-group>
         </nz-form-control>
+
+        <nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
+          >{{ paramDefine.name }}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+          <app-key-value-input
+            [(value)]="params[i].value"
+            [id]="paramDefine.field"
+            keyAlias="Header Name"
+            valueAlias="Header Value"
+          ></app-key-value-input>
+        </nz-form-control>
       </nz-form-item>
 
       <nz-divider></nz-divider>

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

@@ -78,7 +78,13 @@ export class MonitorEditComponent implements OnInit {
             if (param === undefined) {
               param = new Param();
               param.field = define.field;
-              param.type = define.type === 'number' ? 0 : 1;
+              if (define.type === 'number') {
+                param.type = 0;
+              } else if (define.type === 'key-value') {
+                param.type = 3;
+              } else {
+                param.type = 1;
+              }
               if (define.type === 'boolean') {
                 param.value = false;
               }

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

@@ -95,7 +95,7 @@
           >{{ paramDefine.name }}
         </nz-form-label>
         <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
-          <nz-input-group [nzSuffix]="suffixTemplate">
+          <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
             <input
               [type]="passwordVisible ? 'text' : 'password'"
               nz-input
@@ -156,6 +156,18 @@
             </label>
           </nz-radio-group>
         </nz-form-control>
+
+        <nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
+          >{{ paramDefine.name }}
+        </nz-form-label>
+        <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
+          <app-key-value-input
+            [(value)]="params[i].value"
+            [id]="paramDefine.field"
+            [keyAlias]="paramDefine.keyAlias ? paramDefine.keyAlias : 'Name'"
+            [valueAlias]="paramDefine.valueAlias ? paramDefine.valueAlias : 'Value'"
+          ></app-key-value-input>
+        </nz-form-control>
       </nz-form-item>
 
       <nz-divider></nz-divider>

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

@@ -58,7 +58,13 @@ export class MonitorNewComponent implements OnInit {
           this.paramDefines.forEach(define => {
             let param = new Param();
             param.field = define.field;
-            param.type = define.type === 'number' ? 0 : 1;
+            if (define.type === 'number') {
+              param.type = 0;
+            } else if (define.type === 'key-value') {
+              param.type = 3;
+            } else {
+              param.type = 1;
+            }
             if (define.type === 'boolean') {
               param.value = false;
             }

web-app/src/app/shared/components/README.md

@@ -1,2 +0,0 @@
-### 公共通用小组件
-

web-app/src/app/shared/components/key-value-input/key-value-input.component.html

@@ -0,0 +1,12 @@
+<div *ngFor="let item of keyValues; let i = index" nz-row>
+  <div nz-col nzSpan="10">
+    <input nz-input [placeholder]="keyAlias" [(ngModel)]="item.key" (ngModelChange)="onChange()" />
+  </div>
+  <div nz-col nzSpan="11">
+    <input nz-input [placeholder]="valueAlias" [(ngModel)]="item.value" (ngModelChange)="onChange()" />
+  </div>
+  <div nz-col nzSpan="3">
+    <i nz-icon nzType="plus-circle" class="dynamic-button" *ngIf="i === 0" (click)="addNew($event)"></i>
+    <i nz-icon nzType="minus-circle" class="dynamic-button" (click)="removeCurrent(i, $event)"></i>
+  </div>
+</div>

web-app/src/app/shared/components/key-value-input/key-value-input.component.less

@@ -0,0 +1,12 @@
+.dynamic-button {
+  cursor: pointer;
+  position: relative;
+  top: 20%;
+  font-size: 15px;
+  transition: all 0.3s;
+  margin-left: 12%;
+}
+
+.dynamic-button:hover {
+  font-size: 26px;
+}

web-app/src/app/shared/components/key-value-input/key-value-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeyValueInputComponent } from './key-value-input.component';
+
+describe('KeyValueInputComponent', () => {
+  let component: KeyValueInputComponent;
+  let fixture: ComponentFixture<KeyValueInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KeyValueInputComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KeyValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web-app/src/app/shared/components/key-value-input/key-value-input.component.ts

@@ -0,0 +1,63 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-key-value-input',
+  templateUrl: './key-value-input.component.html',
+  styleUrls: ['./key-value-input.component.less']
+})
+export class KeyValueInputComponent implements OnInit {
+  constructor() {}
+
+  @Input() value!: any;
+  @Output() readonly valueChange = new EventEmitter<string>();
+
+  @Input()
+  keyAlias: string = 'Key';
+  @Input()
+  valueAlias: string = 'Value';
+
+  keyValues: any[] = [];
+
+  ngOnInit(): void {
+    if (this.value == undefined) {
+      this.value = {
+        '': ''
+      };
+    } else {
+      this.value = JSON.parse(this.value);
+    }
+    Object.keys(this.value).map(item => {
+      this.keyValues.push({
+        key: item,
+        value: this.value[item]
+      });
+    });
+  }
+
+  addNew(e?: MouseEvent) {
+    if (e) {
+      e.preventDefault();
+    }
+    this.keyValues.push({
+      key: '',
+      value: ''
+    });
+  }
+  removeCurrent(index: number, e?: MouseEvent) {
+    if (e) {
+      e.preventDefault();
+    }
+    if (this.keyValues.length > 1) {
+      this.keyValues.splice(index, 1);
+    }
+  }
+  onChange() {
+    this.value = {};
+    this.keyValues.forEach(item => {
+      if (item != null && item.key != null) {
+        this.value[item.key] = item.value;
+      }
+    });
+    this.valueChange.emit(JSON.stringify(this.value));
+  }
+}

web-app/src/app/shared/shared.module.ts

@@ -6,6 +6,7 @@ import { DelonACLModule } from '@delon/acl';
 import { DelonFormModule } from '@delon/form';
 import { AlainThemeModule } from '@delon/theme';
 
+import { KeyValueInputComponent } from './components/key-value-input/key-value-input.component';
 import { TimezonePipe } from './pipe/timezone.pipe';
 import { SHARED_DELON_MODULES } from './shared-delon.module';
 import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
@@ -18,7 +19,7 @@ const THIRDMODULES: Array<Type<void>> = [];
 
 // #region your components & directives
 
-const COMPONENTS: Array<Type<void>> = [];
+const COMPONENTS: Array<Type<void>> = [KeyValueInputComponent];
 const DIRECTIVES: Array<Type<void>> = [TimezonePipe];
 
 // #endregion