gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NEZ-2070 feat：ping页面增加package size配置参数

Browse Source
This commit is contained in:
zyh
2022-07-27 17:13:05 +08:00
parent 294b08217c
commit 44b82f9a62
16 changed files with 248 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -274,8 +274,9 @@
.mapping-iconPop{ .mapping-iconPop{
padding: 10px 5px 10px 8px;
.mapping-iconList{ .mapping-iconList{
width: 240px; width: 236px;
height: 130px; height: 130px;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;

46
nezha-fronted/src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "nz-icon"; /* Project id 2030432 */ font-family: "nz-icon"; /* Project id 2030432 */
src: url('iconfont.woff2?t=1654482769343') format('woff2'), src: url('iconfont.woff2?t=1658889956430') format('woff2'),
url('iconfont.woff?t=1654482769343') format('woff'), url('iconfont.woff?t=1658889956430') format('woff'),
url('iconfont.ttf?t=1654482769343') format('truetype'); url('iconfont.ttf?t=1658889956430') format('truetype');
} }
.nz-icon { .nz-icon {
@@ -13,6 +13,46 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.nz-icon-zhengfangxing:before {
content: "\e796";
}
.nz-icon-sort:before {
content: "\e797";
}
.nz-icon-mimakejian1:before {
content: "\e794";
}
.nz-icon-bukejian:before {
content: "\e795";
}
.nz-icon-zhixian:before {
content: "\e793";
}
.nz-icon-sanjiaoxing:before {
content: "\e790";
}
.nz-icon-xingxing:before {
content: "\e792";
}
.nz-icon-duobianxing:before {
content: "\e78f";
}
.nz-icon-diagnosis:before {
content: "\e78a";
}
.nz-icon-shengji:before {
content: "\e78b";
}
.nz-icon-moshiqiehuan:before { .nz-icon-moshiqiehuan:before {
content: "\e783"; content: "\e783";
} }

2
nezha-fronted/src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

70
nezha-fronted/src/assets/css/font/iconfont.json
View File

@@ -5,6 +5,76 @@
"css_prefix_text": "nz-icon-", "css_prefix_text": "nz-icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "30875641",
"name": "正方形",
"font_class": "zhengfangxing",
"unicode": "e796",
"unicode_decimal": 59286
},
{
"icon_id": "30875648",
"name": "sort",
"font_class": "sort",
"unicode": "e797",
"unicode_decimal": 59287
},
{
"icon_id": "30874541",
"name": "密码可见",
"font_class": "mimakejian1",
"unicode": "e794",
"unicode_decimal": 59284
},
{
"icon_id": "30874542",
"name": "不可见",
"font_class": "bukejian",
"unicode": "e795",
"unicode_decimal": 59285
},
{
"icon_id": "30874378",
"name": "直线",
"font_class": "zhixian",
"unicode": "e793",
"unicode_decimal": 59283
},
{
"icon_id": "30871091",
"name": "三角形",
"font_class": "sanjiaoxing",
"unicode": "e790",
"unicode_decimal": 59280
},
{
"icon_id": "30871092",
"name": "星形",
"font_class": "xingxing",
"unicode": "e792",
"unicode_decimal": 59282
},
{
"icon_id": "30871089",
"name": "多边形",
"font_class": "duobianxing",
"unicode": "e78f",
"unicode_decimal": 59279
},
{
"icon_id": "30664219",
"name": "diagnosis",
"font_class": "diagnosis",
"unicode": "e78a",
"unicode_decimal": 59274
},
{
"icon_id": "30664220",
"name": "升级",
"font_class": "shengji",
"unicode": "e78b",
"unicode_decimal": 59275
},
{ {
"icon_id": "30102525", "icon_id": "30102525",
"name": "模式切换", "name": "模式切换",

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

48
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

14
nezha-fronted/src/components/chart/chart/chartBubble.vue
View File

@@ -203,11 +203,11 @@ export default {
} }
if (str && valueStr) { if (str && valueStr) {
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;color:#000000">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.text};">
<span>${str}</span> <span>${str}</span>
</p> </p>
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.text};">
<i class="${node.data.mapping && node.data.mapping.icon}" style="color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.icon};font-size:1em;"></i> <i class="${node.data.mapping && node.data.mapping.icon}" style="color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.icon};font-size:1em;"></i>
<span>${valueStr}</span> <span>${valueStr}</span>
</p> </p>
@@ -215,8 +215,8 @@ export default {
` `
} else if (str) { } else if (str) {
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;color:#000000">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.text};">
<i class="${node.data.mapping && node.data.mapping.icon}" style="color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.icon};font-size:1em;"></i> <i class="${node.data.mapping && node.data.mapping.icon}" style="color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.icon};font-size:1em;"></i>
<span>${str}</span> <span>${str}</span>
</p> </p>
@@ -224,8 +224,8 @@ export default {
` `
} else if (valueStr) { } else if (valueStr) {
return ` return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;"> <div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;color:#000000">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center"> <p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center;color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.text};">
<i class="${node.data.mapping && node.data.mapping.icon}" style="color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.icon};font-size:1em;"></i> <i class="${node.data.mapping && node.data.mapping.icon}" style="color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.icon};font-size:1em;"></i>
<span>${valueStr}</span> <span>${valueStr}</span>
</p> </p>

3
nezha-fronted/src/components/common/js/validate.js
View File

@@ -127,7 +127,7 @@ export function positiveInteger (rule, value, callback) {
if (isNaN(Number(value))) { if (isNaN(Number(value))) {
callback(new Error(vm.$t('validate.number'))) callback(new Error(vm.$t('validate.number')))
} else { } else {
if (Number(value) >= 0) { if (Number(value) >= 0 && (parseInt(value) == parseFloat(value))) {
callback() callback()
} else { } else {
callback(new Error(vm.$t('validate.positiveInteger'))) callback(new Error(vm.$t('validate.positiveInteger')))
@@ -227,4 +227,3 @@ export function dataValidate () {
// const DMY = '/((^(3[01]|[12][0-9]|0[1-9])(\\/)(10|12|0[13578])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(30|[12][0-9]|0[1-9])(\\/)(11|0[469])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(2[0-8]|1[0-9]|0[1-9])(\\/)(02)(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(29)(\\/)(02)(\\/)([2468][048]00)$)|(^(29)(\\/)(02)(\\/)([3579][26]00)$)|(^(29)(\\/)(02)(\\/)([1][89][0][48])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][0][48])$)|(^(29)(\\/)(02)(\\/)([1][89][2468][048])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][2468][048])$)|(^(29)(\\/)(02)(\\/)([1][89][13579][26])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][13579][26])$))/' // const DMY = '/((^(3[01]|[12][0-9]|0[1-9])(\\/)(10|12|0[13578])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(30|[12][0-9]|0[1-9])(\\/)(11|0[469])(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(2[0-8]|1[0-9]|0[1-9])(\\/)(02)(\\/)((1[8-9]\\d{2})|([2-9]\\d{3}))$)|(^(29)(\\/)(02)(\\/)([2468][048]00)$)|(^(29)(\\/)(02)(\\/)([3579][26]00)$)|(^(29)(\\/)(02)(\\/)([1][89][0][48])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][0][48])$)|(^(29)(\\/)(02)(\\/)([1][89][2468][048])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][2468][048])$)|(^(29)(\\/)(02)(\\/)([1][89][13579][26])$)|(^(29)(\\/)(02)(\\/)([2-9][0-9][13579][26])$))/'
// const MDY = // const MDY =
} }

8
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -517,8 +517,8 @@
<span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')"> <span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i> <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span> </span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')"> <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i> <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span> </span>
</span> </span>
</div> </div>
@@ -637,8 +637,8 @@
<span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')"> <span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i> <i class="nz-icon nz-icon-minus"></i>
</span> </span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')"> <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i> <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span> </span>
</span> </span>
</div> </div>

12
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -198,6 +198,18 @@ export default {
value: 'el-icon-sort-down' value: 'el-icon-sort-down'
}, { }, {
value: 'el-icon-rank' value: 'el-icon-rank'
}, {
value: 'nz-icon nz-icon-zhengfangxing'
}, {
value: 'nz-icon nz-icon-zhixian'
}, {
value: 'nz-icon nz-icon-sanjiaoxing'
}, {
value: 'nz-icon nz-icon-xingxing'
}, {
value: 'nz-icon nz-icon-duobianxing'
}, {
value: 'nz-icon nz-icon-circle'
} }
], // 获取icon列表 ], // 获取icon列表
letter: [ letter: [

8
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -470,8 +470,8 @@
<span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')"> <span style="margin-right: 5px" class="nz-icon-minus-medium" :title="$t('overall.delete')">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i> <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span> </span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')"> <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i> <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span> </span>
</span> </span>
</div> </div>
@@ -590,8 +590,8 @@
<span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')"> <span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i> <i class="nz-icon nz-icon-minus"></i>
</span> </span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')"> <span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i> <i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span> </span>
</span> </span>
</div> </div>

18
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -144,8 +144,8 @@
v-model="item.multi" v-model="item.multi"
size="small" size="small"
> >
<el-option label="Enabled" :value="true"></el-option> <el-option :label="$t('overall.enabled')" :value="true"></el-option>
<el-option label="Disabled" :value="false"></el-option> <el-option :label="$t('overall.disabled')" :value="false"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- All option --> <!-- All option -->
@@ -163,8 +163,8 @@
v-model="item.allOption" v-model="item.allOption"
size="small" size="small"
> >
<el-option label="Enabled" :value="true"></el-option> <el-option :label="$t('overall.enabled')" :value="true"></el-option>
<el-option label="Disabled" :value="false"></el-option> <el-option :label="$t('overall.disabled')" :value="false"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
@@ -412,11 +412,11 @@ export default {
? localStorage.getItem('nz-default-dateFormat') ? localStorage.getItem('nz-default-dateFormat')
: 'YYYY-MM-DD HH:ss:mm', : 'YYYY-MM-DD HH:ss:mm',
queryVariableList: [ queryVariableList: [
{ name: 'label_names()', description: 'Returns a list of metric label names.' }, { name: 'label_names()', description: this.$t('dashboard.panel.label_names()') },
{ name: 'label_values(label)', description: 'Returns a list of label values for the label in every metric.' }, { name: 'label_values(label)', description: this.$t('dashboard.panel.label_values(label)') },
{ name: 'label_values(metric, label)', description: 'Returns a list of label values for the label in the specified metric.' }, { name: 'label_values(metric, label)', description: this.$t('dashboard.label_values(metric, label)') },
{ name: 'metrics(metric)', description: 'Returns a list of metrics matching the specified metric regex.' }, { name: 'metrics(metric)', description: this.$t('dashboard.panel.metrics(metric)') },
{ name: 'query_result(query)', description: 'Returns a list of metric query result for the query.' } { name: 'query_result(query)', description: this.$t('dashboard.panel.query_result(query)') }
] ]
} }
}, },

51
nezha-fronted/src/components/page/tool/ping.vue
View File

@@ -24,7 +24,8 @@
<div class="tools-header-center"> <div class="tools-header-center">
<el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px"> <el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
<el-form-item style="margin-bottom:10px" :label="$t('config.dc.dc')"> <!-- Data centers -->
<el-form-item style="margin-bottom:12px" :label="$t('config.dc.dc')">
<!-- <el-select v-model="checked" multiple @change="checkedChange" >--> <!-- <el-select v-model="checked" multiple @change="checkedChange" >-->
<!-- <el-option--> <!-- <el-option-->
<!-- :key="item.id"--> <!-- :key="item.id"-->
@@ -55,7 +56,7 @@
</ul> </ul>
</ul> </ul>
</el-form-item> </el-form-item>
<div slot="reference" class="choose-box" @click="triggerVisible"> <div slot="reference" class="choose-box" @click.stop="triggerVisible">
<div v-if="checkAll" style="flex: 1">All</div> <div v-if="checkAll" style="flex: 1">All</div>
<div v-else style="flex: 1"> <div v-else style="flex: 1">
<span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1"> <span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1">
@@ -66,13 +67,22 @@
</div> </div>
</el-popover> </el-popover>
</el-form-item> </el-form-item>
<el-form-item prop="timeout" style="margin-bottom:10px" :label="$t('ping.timeout')"> <!-- Timeout -->
<el-form-item prop="timeout" style="margin-bottom:12px" :label="$t('ping.timeout')">
<div class="wrap" style="height:32px"> <div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.timeout" placeholder="" > <el-input v-model.number="ruleForm.timeout" placeholder="" >
<template slot="append">{{$t('alert.config.second')}}</template> <template slot="append">{{$t('alert.config.second')}}</template>
</el-input> </el-input>
</div> </div>
</el-form-item> </el-form-item>
<!-- Package size -->
<el-form-item prop="packageSize" style="margin-bottom:12px" :label="$t('ping.packageSize')">
<div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.packageSize" placeholder="">
<template slot="append">{{$t('ping.bytes')}}</template>
</el-input>
</div>
</el-form-item>
</el-form> </el-form>
</div> </div>
<div class="tools-header-right"> <div class="tools-header-right">
@@ -103,17 +113,17 @@
</template> </template>
<template v-slot:default> <template v-slot:default>
<!-- 初始展示的内容 ip输入框聚焦后消失 --> <!-- 初始展示的内容 -->
<div class="empty" v-if="tid===undefined"> <div class="empty" v-if="tid===undefined">
<el-steps align-center> <el-steps align-center>
<el-step> <el-step>
<span class="nz-icon nz-icon-edit" slot="icon"></span> <span class="nz-icon nz-icon-edit" slot="icon"></span>
<p class="txt" slot="title">{{$t('overall.placeHolder')}} IP</p> <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP</p>
</el-step> </el-step>
<!-- <el-step>--> <!-- <el-step>
<!-- <span class="el-icon-more" slot="icon"></span>--> <span class="el-icon-more" slot="icon"></span>
<!-- <p class="txt" slot="title">{{$t('ping.filter')}}</p>--> <p class="txt" slot="title">{{$t('ping.filter')}}</p>
<!-- </el-step>--> </el-step> -->
<el-step> <el-step>
<span class="msg" slot="icon">Ping</span> <span class="msg" slot="icon">Ping</span>
<p class="txt" slot="title">Ping {{$t('config.terminallog.cmd.cmd')}}</p> <p class="txt" slot="title">Ping {{$t('config.terminallog.cmd.cmd')}}</p>
@@ -187,10 +197,13 @@ export default {
tableData: [], tableData: [],
ruleForm: { ruleForm: {
// 超时时间 // 超时时间
timeout: 30 timeout: 30,
// 包大小
packageSize: 64
}, },
formRules: { formRules: {
timeout: [{ validator: positiveInteger, trigger: 'blur' }] timeout: [{ validator: positiveInteger, trigger: 'blur' }],
packageSize: [{ validator: positiveInteger, trigger: 'blur' }]
} }
} }
}, },
@@ -235,11 +248,7 @@ export default {
return this.validateDuplicate() return this.validateDuplicate()
}, },
close () { close () {
this.$refs.ruleForm.validate((valid) => { this.visible = false
if (valid) {
this.visible = false
}
})
}, },
// 切换弹框显示隐藏 // 切换弹框显示隐藏
triggerVisible () { triggerVisible () {
@@ -291,8 +300,13 @@ export default {
} else if (!this.tags.length) { } else if (!this.tags.length) {
return this.validateHost() return this.validateHost()
} }
this.flag = false // 表单校验输入内容是否合法
this.getId() this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.flag = false
this.getId()
}
})
}) })
}, },
// 请求dataCenter // 请求dataCenter
@@ -312,7 +326,8 @@ export default {
const params = { const params = {
ips: ipArr.join(','), ips: ipArr.join(','),
dcIds: this.checked.join(','), dcIds: this.checked.join(','),
timeout: this.ruleForm.timeout timeout: this.ruleForm.timeout,
packageSize: this.ruleForm.packageSize
} }
this.$get('/tool/ping', params).then(response => { this.$get('/tool/ping', params).then(response => {
// 清空上一次任务的数据 // 清空上一次任务的数据

32
nezha-fronted/src/components/page/tool/trace.vue
View File

@@ -23,7 +23,8 @@
<div class="tools-header-center"> <div class="tools-header-center">
<el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px"> <el-form size="small" ref="ruleForm" :model="ruleForm" :rules="formRules" label-position="right" label-width="150px">
<el-form-item style="margin-bottom:10px" :label="$t('config.dc.dc')"> <!-- Data centers -->
<el-form-item style="margin-bottom:12px" :label="$t('config.dc.dc')">
<!-- <el-select v-model="checked" multiple @change="checkedChange" >--> <!-- <el-select v-model="checked" multiple @change="checkedChange" >-->
<!-- <el-option--> <!-- <el-option-->
<!-- :key="item.id"--> <!-- :key="item.id"-->
@@ -54,7 +55,7 @@
</ul> </ul>
</ul> </ul>
</el-form-item> </el-form-item>
<div slot="reference" class="choose-box" @click="triggerVisible"> <div slot="reference" class="choose-box" @click.stop="triggerVisible">
<div v-if="checkAll" style="flex: 1">All</div> <div v-if="checkAll" style="flex: 1">All</div>
<div v-else style="width: 100%;flex: 1"> <div v-else style="width: 100%;flex: 1">
<span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1"> <span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1">
@@ -65,14 +66,16 @@
</div> </div>
</el-popover> </el-popover>
</el-form-item> </el-form-item>
<el-form-item prop="maxHops" style="margin-bottom:10px" :label="$t('trace.maxHops')"> <!-- Maximum hops -->
<el-form-item prop="maxHops" style="margin-bottom:12px" :label="$t('trace.maxHops')">
<div class="wrap" style="height:32px"> <div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.maxHops" placeholder=""></el-input> <el-input v-model.number="ruleForm.maxHops" placeholder=""></el-input>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item prop="timeout" style="margin-bottom:10px" :label="$t('ping.timeout')"> <!-- Timeout -->
<el-form-item prop="timeout" style="margin-bottom:12px" :label="$t('ping.timeout')">
<div class="wrap" style="height:32px"> <div class="wrap" style="height:32px">
<el-input v-model.number="ruleForm.timeout" placeholder="" > <el-input v-model.number="ruleForm.timeout" placeholder="">
<template slot="append">{{$t('alert.config.second')}}</template> <template slot="append">{{$t('alert.config.second')}}</template>
</el-input> </el-input>
</div> </div>
@@ -106,7 +109,7 @@
</div> </div>
</template> </template>
<template v-slot:default> <template v-slot:default>
<!-- 初始展示的内容 ip输入框聚焦后消失 --> <!-- 初始展示的内容 -->
<div class="empty" v-if="tid===undefined"> <div class="empty" v-if="tid===undefined">
<el-steps align-center> <el-steps align-center>
<el-step> <el-step>
@@ -185,7 +188,7 @@ export default {
tableData: [], tableData: [],
ruleForm: { ruleForm: {
// 最大跃点数 // 最大跃点数
maxHops: '', maxHops: 30,
// 超时时间 // 超时时间
timeout: 30 timeout: 30
}, },
@@ -236,11 +239,7 @@ export default {
return this.validateDuplicate() return this.validateDuplicate()
}, },
close () { close () {
this.$refs.ruleForm.validate((valid) => { this.visible = false
if (valid) {
this.visible = false
}
})
}, },
// 切换弹框显示隐藏 // 切换弹框显示隐藏
triggerVisible () { triggerVisible () {
@@ -292,8 +291,13 @@ export default {
} else if (!this.tags.length) { } else if (!this.tags.length) {
return this.validateHost() return this.validateHost()
} }
this.flag = false // 表单校验输入内容是否合法
this.getId() this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.flag = false
this.getId()
}
})
}) })
}, },
// 请求dataCenter // 请求dataCenter