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{
padding: 10px 5px 10px 8px;
.mapping-iconList{
width: 240px;
width: 236px;
height: 130px;
overflow-y: auto;
display: flex;

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

@@ -1,8 +1,8 @@
@font-face {
font-family: "nz-icon"; /* Project id 2030432 */
src: url('iconfont.woff2?t=1654482769343') format('woff2'),
url('iconfont.woff?t=1654482769343') format('woff'),
url('iconfont.ttf?t=1654482769343') format('truetype');
src: url('iconfont.woff2?t=1658889956430') format('woff2'),
url('iconfont.woff?t=1658889956430') format('woff'),
url('iconfont.ttf?t=1658889956430') format('truetype');
}
.nz-icon {
@@ -13,6 +13,46 @@
-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 {
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-",
"description": "",
"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",
"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) {
return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center">
<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;color: ${node.data.mapping && node.data.mapping.color && node.data.mapping.color.text};">
<span>${str}</span>
</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>
<span>${valueStr}</span>
</p>
@@ -215,8 +215,8 @@ export default {
`
} else if (str) {
return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center">
<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;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>
<span>${str}</span>
</p>
@@ -224,8 +224,8 @@ export default {
`
} else if (valueStr) {
return `
<div style="width:100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;cursor: pointer;">
<p style="width: 80%;text-overflow: ellipsis;white-space: nowrap;overflow:hidden;text-align:center">
<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;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>
<span>${valueStr}</span>
</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))) {
callback(new Error(vm.$t('validate.number')))
} else {
if (Number(value) >= 0) {
if (Number(value) >= 0 && (parseInt(value) == parseFloat(value))) {
callback()
} else {
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 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')">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
@@ -637,8 +637,8 @@
<span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</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-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列表
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')">
<i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>
@@ -590,8 +590,8 @@
<span @click="removeMapping(index)" style="margin-right: 5px" :title="$t('overall.delete')">
<i class="nz-icon nz-icon-minus"></i>
</span>
<span style="margin-right: 5px;fontSize:17px;cursor: pointer;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="el-icon-sort"></i>
<span style="margin-right: 5px;fontSize:17px;cursor: grab;" class="drag-sort" :title="$t('dashboard.panel.chartForm.sort')">
<i class="nz-icon nz-icon-sort" style="cursor: grab;"></i>
</span>
</span>
</div>

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

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

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

@@ -24,7 +24,8 @@
<div class="tools-header-center">
<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-option-->
<!-- :key="item.id"-->
@@ -55,7 +56,7 @@
</ul>
</ul>
</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-else style="flex: 1">
<span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1">
@@ -66,13 +67,22 @@
</div>
</el-popover>
</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">
<el-input v-model.number="ruleForm.timeout" placeholder="" >
<template slot="append">{{$t('alert.config.second')}}</template>
</el-input>
</div>
</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>
</div>
<div class="tools-header-right">
@@ -103,17 +113,17 @@
</template>
<template v-slot:default>
<!-- 初始展示的内容 ip输入框聚焦后消失 -->
<!-- 初始展示的内容 -->
<div class="empty" v-if="tid===undefined">
<el-steps align-center>
<el-step>
<span class="nz-icon nz-icon-edit" slot="icon"></span>
<p class="txt" slot="title">{{$t('overall.placeHolder')}} IP</p>
</el-step>
<!-- <el-step>-->
<!-- <span class="el-icon-more" slot="icon"></span>-->
<!-- <p class="txt" slot="title">{{$t('ping.filter')}}</p>-->
<!-- </el-step>-->
<!-- <el-step>
<span class="el-icon-more" slot="icon"></span>
<p class="txt" slot="title">{{$t('ping.filter')}}</p>
</el-step> -->
<el-step>
<span class="msg" slot="icon">Ping</span>
<p class="txt" slot="title">Ping {{$t('config.terminallog.cmd.cmd')}}</p>
@@ -187,10 +197,13 @@ export default {
tableData: [],
ruleForm: {
// 超时时间
timeout: 30
timeout: 30,
// 包大小
packageSize: 64
},
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()
},
close () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.visible = false
}
})
},
// 切换弹框显示隐藏
triggerVisible () {
@@ -291,8 +300,13 @@ export default {
} else if (!this.tags.length) {
return this.validateHost()
}
// 表单校验输入内容是否合法
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.flag = false
this.getId()
}
})
})
},
// 请求dataCenter
@@ -312,7 +326,8 @@ export default {
const params = {
ips: ipArr.join(','),
dcIds: this.checked.join(','),
timeout: this.ruleForm.timeout
timeout: this.ruleForm.timeout,
packageSize: this.ruleForm.packageSize
}
this.$get('/tool/ping', params).then(response => {
// 清空上一次任务的数据

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

@@ -23,7 +23,8 @@
<div class="tools-header-center">
<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-option-->
<!-- :key="item.id"-->
@@ -54,7 +55,7 @@
</ul>
</ul>
</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-else style="width: 100%;flex: 1">
<span class="choose" v-for="item in dataCenter" :key="item.id" v-if="checked.indexOf(item.id) !== -1">
@@ -65,14 +66,16 @@
</div>
</el-popover>
</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">
<el-input v-model.number="ruleForm.maxHops" placeholder=""></el-input>
</div>
</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">
<el-input v-model.number="ruleForm.timeout" placeholder="" >
<el-input v-model.number="ruleForm.timeout" placeholder="">
<template slot="append">{{$t('alert.config.second')}}</template>
</el-input>
</div>
@@ -106,7 +109,7 @@
</div>
</template>
<template v-slot:default>
<!-- 初始展示的内容 ip输入框聚焦后消失 -->
<!-- 初始展示的内容 -->
<div class="empty" v-if="tid===undefined">
<el-steps align-center>
<el-step>
@@ -185,7 +188,7 @@ export default {
tableData: [],
ruleForm: {
// 最大跃点数
maxHops: '',
maxHops: 30,
// 超时时间
timeout: 30
},
@@ -236,11 +239,7 @@ export default {
return this.validateDuplicate()
},
close () {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.visible = false
}
})
},
// 切换弹框显示隐藏
triggerVisible () {
@@ -292,8 +291,13 @@ export default {
} else if (!this.tags.length) {
return this.validateHost()
}
// 表单校验输入内容是否合法
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.flag = false
this.getId()
}
})
})
},
// 请求dataCenter