Compare commits
1 Commits
feature#ke
...
fea#ssl
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1c0e0a5bc6 |
@@ -52,8 +52,8 @@ public class JdbcCommonCollect extends AbstractCollect {
|
|||||||
}
|
}
|
||||||
JdbcProtocol jdbcProtocol = metrics.getJdbc();
|
JdbcProtocol jdbcProtocol = metrics.getJdbc();
|
||||||
String databaseUrl = constructDatabaseUrl(jdbcProtocol);
|
String databaseUrl = constructDatabaseUrl(jdbcProtocol);
|
||||||
// 查询超时时间默认6000毫秒
|
// 查询超时时间默认3000毫秒
|
||||||
int timeout = 6000;
|
int timeout = 3000;
|
||||||
try {
|
try {
|
||||||
// 获取查询语句超时时间
|
// 获取查询语句超时时间
|
||||||
if (jdbcProtocol.getTimeout() != null) {
|
if (jdbcProtocol.getTimeout() != null) {
|
||||||
|
|||||||
@@ -37,8 +37,8 @@ public class IcmpCollectImpl extends AbstractCollect {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
IcmpProtocol icmp = metrics.getIcmp();
|
IcmpProtocol icmp = metrics.getIcmp();
|
||||||
// 超时时间默认6000毫秒
|
// 超时时间默认300毫秒
|
||||||
int timeout = 6000;
|
int timeout = 300;
|
||||||
try {
|
try {
|
||||||
timeout = Integer.parseInt(icmp.getTimeout());
|
timeout = Integer.parseInt(icmp.getTimeout());
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
|
|||||||
@@ -38,8 +38,8 @@ public class TelnetCollectImpl extends AbstractCollect {
|
|||||||
}
|
}
|
||||||
|
|
||||||
TelnetProtocol telnet = metrics.getTelnet();
|
TelnetProtocol telnet = metrics.getTelnet();
|
||||||
// 超时时间默认6000毫秒
|
// 超时时间默认300毫秒
|
||||||
int timeout = 6000;
|
int timeout = 300;
|
||||||
try {
|
try {
|
||||||
timeout = Integer.parseInt(telnet.getTimeout());
|
timeout = Integer.parseInt(telnet.getTimeout());
|
||||||
} catch (Exception e) {
|
} catch (Exception e) {
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ import com.usthe.common.entity.job.Job;
|
|||||||
import com.usthe.common.entity.job.Metrics;
|
import com.usthe.common.entity.job.Metrics;
|
||||||
import com.usthe.common.util.AesUtil;
|
import com.usthe.common.util.AesUtil;
|
||||||
import com.usthe.common.util.CommonConstants;
|
import com.usthe.common.util.CommonConstants;
|
||||||
import com.usthe.common.util.GsonUtil;
|
|
||||||
import lombok.extern.slf4j.Slf4j;
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
@@ -85,26 +84,6 @@ public class WheelTimerTask implements TimerTask {
|
|||||||
while (iterator.hasNext()) {
|
while (iterator.hasNext()) {
|
||||||
Map.Entry<String, JsonElement> entry = iterator.next();
|
Map.Entry<String, JsonElement> entry = iterator.next();
|
||||||
JsonElement element = entry.getValue();
|
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()) {
|
if (element.isJsonPrimitive()) {
|
||||||
// 判断是否含有特殊字符 替换
|
// 判断是否含有特殊字符 替换
|
||||||
String value = element.getAsString();
|
String value = element.getAsString();
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
package com.usthe.collector.util;
|
package com.usthe.collector.util;
|
||||||
|
|
||||||
import lombok.extern.slf4j.Slf4j;
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
import sun.misc.BASE64Decoder;
|
||||||
|
|
||||||
import java.security.KeyFactory;
|
import java.security.KeyFactory;
|
||||||
import java.security.KeyPair;
|
import java.security.KeyPair;
|
||||||
import java.security.PublicKey;
|
import java.security.PublicKey;
|
||||||
import java.security.spec.X509EncodedKeySpec;
|
import java.security.spec.X509EncodedKeySpec;
|
||||||
import java.util.Base64;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 密钥工具类
|
* 密钥工具类
|
||||||
@@ -35,7 +35,7 @@ public class KeyPairUtil {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
// todo fix 公钥解析
|
// todo fix 公钥解析
|
||||||
byte[] publicKeyBytes = Base64.getDecoder().decode(publicKeyStr);
|
byte[] publicKeyBytes = (new BASE64Decoder()).decodeBuffer(publicKeyStr);
|
||||||
X509EncodedKeySpec keySpec = new X509EncodedKeySpec(publicKeyBytes);
|
X509EncodedKeySpec keySpec = new X509EncodedKeySpec(publicKeyBytes);
|
||||||
PublicKey publicKey = keyFactory.generatePublic(keySpec);
|
PublicKey publicKey = keyFactory.generatePublic(keySpec);
|
||||||
return new KeyPair(publicKey, null);
|
return new KeyPair(publicKey, null);
|
||||||
|
|||||||
@@ -28,7 +28,7 @@ public class Configmap {
|
|||||||
private Object value;
|
private Object value;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 参数类型 0:数字 1:字符串 2:加密串 3:map映射的json串
|
* 参数类型 0:数字 1:字符串 2:加密串
|
||||||
* number,string,secret
|
* number,string,secret
|
||||||
* 数字,非加密字符串,加密字符串
|
* 数字,非加密字符串,加密字符串
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ public class SshProtocol {
|
|||||||
/**
|
/**
|
||||||
* 超时时间
|
* 超时时间
|
||||||
*/
|
*/
|
||||||
private String timeout;
|
private String timeout = "6000";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 用户名
|
* 用户名
|
||||||
|
|||||||
@@ -63,11 +63,11 @@ public class Param {
|
|||||||
private String value;
|
private String value;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 参数类型 0:数字 1:字符串 2:加密串 3:map映射的json串
|
* 参数类型 0:数字 1:字符串 2:加密串
|
||||||
*/
|
*/
|
||||||
@ApiModelProperty(value = "参数类型 0:数字 1:字符串 2:加密串 3:map映射的json串", accessMode = READ_WRITE, position = 4)
|
@ApiModelProperty(value = "参数类型 0:数字 1:字符串 2:加密串", accessMode = READ_WRITE, position = 4)
|
||||||
@Min(0)
|
@Min(0)
|
||||||
@Max(3)
|
@Max(2)
|
||||||
private byte type;
|
private byte type;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -110,41 +110,29 @@ public class ParamDefine {
|
|||||||
@Convert(converter = JsonOptionListAttributeConverter.class)
|
@Convert(converter = JsonOptionListAttributeConverter.class)
|
||||||
private List<Option> options;
|
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 = 11)
|
@ApiModelProperty(value = "此条记录创建者", example = "tom", accessMode = READ_ONLY, position = 9)
|
||||||
private String creator;
|
private String creator;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 此条记录最新修改者
|
* 此条记录最新修改者
|
||||||
*/
|
*/
|
||||||
@ApiModelProperty(value = "此条记录最新修改者", example = "tom", accessMode = READ_ONLY, position = 12)
|
@ApiModelProperty(value = "此条记录最新修改者", example = "tom", accessMode = READ_ONLY, position = 10)
|
||||||
private String modifier;
|
private String modifier;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 记录创建时间
|
* 记录创建时间
|
||||||
*/
|
*/
|
||||||
@ApiModelProperty(value = "记录创建时间(毫秒时间戳)", example = "1612198922000", accessMode = READ_ONLY, position = 13)
|
@ApiModelProperty(value = "记录创建时间(毫秒时间戳)", example = "1612198922000", accessMode = READ_ONLY, position = 11)
|
||||||
@Column(insertable = false, updatable = false)
|
@Column(insertable = false, updatable = false)
|
||||||
private LocalDateTime gmtCreate;
|
private LocalDateTime gmtCreate;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 记录最新修改时间
|
* 记录最新修改时间
|
||||||
*/
|
*/
|
||||||
@ApiModelProperty(value = "记录最新修改时间(毫秒时间戳)", example = "1612198444000", accessMode = READ_ONLY, position = 14)
|
@ApiModelProperty(value = "记录最新修改时间(毫秒时间戳)", example = "1612198444000", accessMode = READ_ONLY, position = 12)
|
||||||
@Column(insertable = false, updatable = false)
|
@Column(insertable = false, updatable = false)
|
||||||
private LocalDateTime gmtUpdate;
|
private LocalDateTime gmtUpdate;
|
||||||
|
|
||||||
|
|||||||
@@ -236,9 +236,6 @@ public class MonitorServiceImpl implements MonitorService {
|
|||||||
case "checkbox":
|
case "checkbox":
|
||||||
// todo checkbox校验
|
// todo checkbox校验
|
||||||
break;
|
break;
|
||||||
case "key-value":
|
|
||||||
// todo key-value校验
|
|
||||||
break;
|
|
||||||
// todo 更多参数定义与实际值格式校验
|
// todo 更多参数定义与实际值格式校验
|
||||||
default:
|
default:
|
||||||
throw new IllegalArgumentException("ParamDefine type " + paramDefine.getType() + " is invalid.");
|
throw new IllegalArgumentException("ParamDefine type " + paramDefine.getType() + " is invalid.");
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ app: example
|
|||||||
name:
|
name:
|
||||||
zh-CN: 模拟应用类型
|
zh-CN: 模拟应用类型
|
||||||
en-US: EXAMPLE APP
|
en-US: EXAMPLE APP
|
||||||
# 参数映射map. type是参数类型: 0-number数字, 1-string明文字符串, 2-secret加密字符串, 3-map映射的json串
|
# 参数映射map. type是参数类型: 0-number数字, 1-string明文字符串, 2-secret加密字符串
|
||||||
# 强制固定必须参数 - host
|
# 强制固定必须参数 - host
|
||||||
configmap:
|
configmap:
|
||||||
- key: host
|
- key: host
|
||||||
@@ -16,8 +16,6 @@ configmap:
|
|||||||
type: 1
|
type: 1
|
||||||
- key: password
|
- key: password
|
||||||
type: 2
|
type: 2
|
||||||
- key: headers
|
|
||||||
type: 3
|
|
||||||
# 指标组列表
|
# 指标组列表
|
||||||
metrics:
|
metrics:
|
||||||
# 第一个监控指标组 cpu
|
# 第一个监控指标组 cpu
|
||||||
@@ -71,7 +69,7 @@ metrics:
|
|||||||
ssl: false
|
ssl: false
|
||||||
# 请求头内容
|
# 请求头内容
|
||||||
headers:
|
headers:
|
||||||
^_^headers^_^: ^_^headers^_^
|
apiVersion: v1
|
||||||
# 请求参数内容
|
# 请求参数内容
|
||||||
params:
|
params:
|
||||||
param1: param1
|
param1: param1
|
||||||
|
|||||||
@@ -48,10 +48,4 @@ param:
|
|||||||
- label: PUT请求
|
- label: PUT请求
|
||||||
value: PUT
|
value: PUT
|
||||||
- label: DELETE请求
|
- label: DELETE请求
|
||||||
value: DELETE
|
value: DELETE
|
||||||
- field: headers
|
|
||||||
name: 请求头
|
|
||||||
type: key-value
|
|
||||||
required: false
|
|
||||||
keyAlias: Header Name
|
|
||||||
valueAlias: Header Value
|
|
||||||
@@ -15,7 +15,7 @@ param:
|
|||||||
name: 查询超时时间
|
name: 查询超时时间
|
||||||
type: number
|
type: number
|
||||||
required: false
|
required: false
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
placeholder: '查询超时时间'
|
placeholder: '查询超时时间'
|
||||||
- field: database
|
- field: database
|
||||||
name: 数据库名称
|
name: 数据库名称
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ param:
|
|||||||
name: 查询超时时间
|
name: 查询超时时间
|
||||||
type: number
|
type: number
|
||||||
required: false
|
required: false
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
placeholder: '查询超时时间'
|
placeholder: '查询超时时间'
|
||||||
- field: database
|
- field: database
|
||||||
name: 数据库名称
|
name: 数据库名称
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ param:
|
|||||||
name: 查询超时时间
|
name: 查询超时时间
|
||||||
type: number
|
type: number
|
||||||
required: false
|
required: false
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
placeholder: '查询超时时间'
|
placeholder: '查询超时时间'
|
||||||
- field: database
|
- field: database
|
||||||
name: 数据库名称
|
name: 数据库名称
|
||||||
|
|||||||
@@ -17,4 +17,4 @@ param:
|
|||||||
range: '[0,100000]'
|
range: '[0,100000]'
|
||||||
required: true
|
required: true
|
||||||
placeholder: '请输入超时时间,单位毫秒'
|
placeholder: '请输入超时时间,单位毫秒'
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
@@ -24,4 +24,4 @@ param:
|
|||||||
range: '[0,100000]'
|
range: '[0,100000]'
|
||||||
required: true
|
required: true
|
||||||
placeholder: '请输入超时时间,单位毫秒'
|
placeholder: '请输入超时时间,单位毫秒'
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
@@ -15,7 +15,7 @@ param:
|
|||||||
name: 查询超时时间
|
name: 查询超时时间
|
||||||
type: number
|
type: number
|
||||||
required: false
|
required: false
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
placeholder: '查询超时时间'
|
placeholder: '查询超时时间'
|
||||||
- field: database
|
- field: database
|
||||||
name: 数据库名称
|
name: 数据库名称
|
||||||
|
|||||||
@@ -15,7 +15,7 @@ param:
|
|||||||
name: 查询超时时间
|
name: 查询超时时间
|
||||||
type: number
|
type: number
|
||||||
required: false
|
required: false
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
placeholder: '查询超时时间'
|
placeholder: '查询超时时间'
|
||||||
- field: database
|
- field: database
|
||||||
name: 数据库名称
|
name: 数据库名称
|
||||||
|
|||||||
@@ -24,4 +24,4 @@ param:
|
|||||||
range: '[0,100000]'
|
range: '[0,100000]'
|
||||||
required: true
|
required: true
|
||||||
placeholder: '请输入超时时间,单位毫秒'
|
placeholder: '请输入超时时间,单位毫秒'
|
||||||
defaultValue: 6000
|
defaultValue: 3000
|
||||||
@@ -9,7 +9,4 @@ export class ParamDefine {
|
|||||||
limit: number | undefined;
|
limit: number | undefined;
|
||||||
//'[{"label":"GET请求","value":"GET"},{"label":"PUT请求","value":"PUT"}]'
|
//'[{"label":"GET请求","value":"GET"},{"label":"PUT请求","value":"PUT"}]'
|
||||||
options!: any[];
|
options!: any[];
|
||||||
// 当type为key-value时有效,表示别名描述
|
|
||||||
keyAlias!: string;
|
|
||||||
valueAlias!: string;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -86,7 +86,7 @@
|
|||||||
>{{ paramDefine.name }}
|
>{{ paramDefine.name }}
|
||||||
</nz-form-label>
|
</nz-form-label>
|
||||||
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
|
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
|
||||||
<nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
|
<nz-input-group [nzSuffix]="suffixTemplate">
|
||||||
<input
|
<input
|
||||||
[type]="passwordVisible ? 'text' : 'password'"
|
[type]="passwordVisible ? 'text' : 'password'"
|
||||||
nz-input
|
nz-input
|
||||||
@@ -147,18 +147,6 @@
|
|||||||
</label>
|
</label>
|
||||||
</nz-radio-group>
|
</nz-radio-group>
|
||||||
</nz-form-control>
|
</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-form-item>
|
||||||
|
|
||||||
<nz-divider></nz-divider>
|
<nz-divider></nz-divider>
|
||||||
|
|||||||
@@ -78,13 +78,7 @@ export class MonitorEditComponent implements OnInit {
|
|||||||
if (param === undefined) {
|
if (param === undefined) {
|
||||||
param = new Param();
|
param = new Param();
|
||||||
param.field = define.field;
|
param.field = define.field;
|
||||||
if (define.type === 'number') {
|
param.type = define.type === 'number' ? 0 : 1;
|
||||||
param.type = 0;
|
|
||||||
} else if (define.type === 'key-value') {
|
|
||||||
param.type = 3;
|
|
||||||
} else {
|
|
||||||
param.type = 1;
|
|
||||||
}
|
|
||||||
if (define.type === 'boolean') {
|
if (define.type === 'boolean') {
|
||||||
param.value = false;
|
param.value = false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -95,7 +95,7 @@
|
|||||||
>{{ paramDefine.name }}
|
>{{ paramDefine.name }}
|
||||||
</nz-form-label>
|
</nz-form-label>
|
||||||
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
|
<nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
|
||||||
<nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
|
<nz-input-group [nzSuffix]="suffixTemplate">
|
||||||
<input
|
<input
|
||||||
[type]="passwordVisible ? 'text' : 'password'"
|
[type]="passwordVisible ? 'text' : 'password'"
|
||||||
nz-input
|
nz-input
|
||||||
@@ -156,18 +156,6 @@
|
|||||||
</label>
|
</label>
|
||||||
</nz-radio-group>
|
</nz-radio-group>
|
||||||
</nz-form-control>
|
</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-form-item>
|
||||||
|
|
||||||
<nz-divider></nz-divider>
|
<nz-divider></nz-divider>
|
||||||
|
|||||||
@@ -58,13 +58,7 @@ export class MonitorNewComponent implements OnInit {
|
|||||||
this.paramDefines.forEach(define => {
|
this.paramDefines.forEach(define => {
|
||||||
let param = new Param();
|
let param = new Param();
|
||||||
param.field = define.field;
|
param.field = define.field;
|
||||||
if (define.type === 'number') {
|
param.type = define.type === 'number' ? 0 : 1;
|
||||||
param.type = 0;
|
|
||||||
} else if (define.type === 'key-value') {
|
|
||||||
param.type = 3;
|
|
||||||
} else {
|
|
||||||
param.type = 1;
|
|
||||||
}
|
|
||||||
if (define.type === 'boolean') {
|
if (define.type === 'boolean') {
|
||||||
param.value = false;
|
param.value = false;
|
||||||
}
|
}
|
||||||
|
|||||||
2
web-app/src/app/shared/components/README.md
Normal file
2
web-app/src/app/shared/components/README.md
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
### 公共通用小组件
|
||||||
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
.dynamic-button {
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
top: 4px;
|
|
||||||
font-size: 15px;
|
|
||||||
transition: all 0.3s;
|
|
||||||
margin-left: 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dynamic-button:hover {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -6,7 +6,6 @@ import { DelonACLModule } from '@delon/acl';
|
|||||||
import { DelonFormModule } from '@delon/form';
|
import { DelonFormModule } from '@delon/form';
|
||||||
import { AlainThemeModule } from '@delon/theme';
|
import { AlainThemeModule } from '@delon/theme';
|
||||||
|
|
||||||
import { KeyValueInputComponent } from './components/key-value-input/key-value-input.component';
|
|
||||||
import { TimezonePipe } from './pipe/timezone.pipe';
|
import { TimezonePipe } from './pipe/timezone.pipe';
|
||||||
import { SHARED_DELON_MODULES } from './shared-delon.module';
|
import { SHARED_DELON_MODULES } from './shared-delon.module';
|
||||||
import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
|
import { SHARED_ZORRO_MODULES } from './shared-zorro.module';
|
||||||
@@ -19,7 +18,7 @@ const THIRDMODULES: Array<Type<void>> = [];
|
|||||||
|
|
||||||
// #region your components & directives
|
// #region your components & directives
|
||||||
|
|
||||||
const COMPONENTS: Array<Type<void>> = [KeyValueInputComponent];
|
const COMPONENTS: Array<Type<void>> = [];
|
||||||
const DIRECTIVES: Array<Type<void>> = [TimezonePipe];
|
const DIRECTIVES: Array<Type<void>> = [TimezonePipe];
|
||||||
|
|
||||||
// #endregion
|
// #endregion
|
||||||
|
|||||||
Reference in New Issue
Block a user