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

Merge branch 'codeCheck' of https://git.mesalab.cn/nezha/nezha-fronted into codeCheck

Browse Source
This commit is contained in:
zhangyu
2020-06-23 18:48:52 +08:00
parent 67c1f035f3 e839011059
commit 45a90a75a9
20 changed files with 395 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.

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

@@ -20,6 +20,9 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="move" unicode="&#58943;" d="M861.0304 605.184a32.3072 32.3072 0 0 0-23.2448 10.24l-73.5232 78.7968-73.5232-78.7456a31.9488 31.9488 0 1 0-46.4384 43.8784L742.4 763.904a32.3072 32.3072 0 0 0 23.2448 10.24 30.208 30.208 0 0 0 23.2448-10.24l98.048-104.4992A32.3072 32.3072 0 0 0 885.76 614.4a52.224 52.224 0 0 0-24.5248-9.0112zM762.88-15.360000000000014a30.208 30.208 0 0 0-23.2448 10.24l-98.048 104.4992a31.9488 31.9488 0 1 0 46.5408 43.9808l73.5232-78.6944L835.2256 143.36a31.9488 31.9488 0 0 0 46.4384-43.8784L783.616-5.1200000000000045c-2.56-6.4512-11.6224-10.24-20.48-10.24zM762.88 36.1472a31.9488 31.9488 0 0 0-32.256 32.256V695.5008a32.256 32.256 0 1 0 64.512 0v-627.0976a31.9488 31.9488 0 0 0-32.256-32.256zM510.0544 521.3184H170.7008a32.256 32.256 0 0 0 0 64.512h339.3536a31.9488 31.9488 0 0 0 32.256-32.256 32.768 32.768 0 0 0-32.256-32.256zM510.0544 358.70719999999994H170.7008a32.256 32.256 0 0 0 0 64.512h339.3536a31.9488 31.9488 0 0 0 32.256-32.256 32.768 32.768 0 0 0-32.256-32.256zM508.7744 172.90239999999994H169.4208a32.256 32.256 0 1 0 0 64.512h339.3536a31.9488 31.9488 0 0 0 32.256-32.256 32.768 32.768 0 0 0-32.256-32.256z" horiz-adv-x="1024" />
<glyph glyph-name="sync" unicode="&#60055;" d="M293.312 208a32 32 0 0 0-31.296 38.816C287.488 363.39200000000005 392.64 448 512 448a256.96 256.96 0 0 0 220.768-126.592 32 32 0 1 0-55.168-32.384A192.768 192.768 0 0 1 512 384c-89.504 0-168.352-63.424-187.456-150.816a32 32 0 0 0-31.232-25.184zM512-64a256.288 256.288 0 0 0-223.072 130.592 32 32 0 1 0 55.744 31.392A192.352 192.352 0 0 1 512 0c89.504 0 168.352 63.424 187.456 150.816a32 32 0 0 0 62.496-13.632C736.512 20.607999999999947 631.36-64 512-64zM288-32a32 32 0 0 0-32 32v96a32 32 0 0 0 32 32h96a32 32 0 1 0 0-64h-64v-64a32 32 0 0 0-32-32zM736 256h-96a32 32 0 1 0 0 64h64v64a32 32 0 1 0 64 0v-96a32 32 0 0 0-32-32zM860.448 87.64800000000002a32 32 0 0 0-15.424 60.032A160.256 160.256 0 0 1 928 288a159.552 159.552 0 0 1-58.912 123.968 32 32 0 0 0-10.56 33.472c3.744 13.184 5.472 24.16 5.472 34.56 0 70.592-57.408 128-128 128-6.912 0-14.24-0.736-23.104-2.368a31.872 31.872 0 0 0-34.592 17.536C635.104 712.512 546.848 768 448 768c-141.152 0-256-114.848-256-256l0.416-7.264a31.936 31.936 0 0 0-13.76-27.04A192.224 192.224 0 0 1 96 320c0-63.424 31.328-122.72 83.744-158.624a32 32 0 0 0-36.128-52.832A256.16 256.16 0 0 0 32 320a256.16 256.16 0 0 0 96.096 199.776C132.224 692.64 274.144 832 448 832a317.376 317.376 0 0 0 277.056-160.384C728.768 671.8720000000001 732.448 672 736 672c105.888 0 192-86.112 192-192 0-10.464-0.992-20.96-3.136-32.128A223.168 223.168 0 0 0 992 288a224.128 224.128 0 0 0-116.192-196.384 31.68 31.68 0 0 0-15.36-3.968zM64 288a32 32 0 0 0-32 32c0 141.152 114.848 256 256 256a32 32 0 1 0 0-64c-105.888 0-192-86.112-192-192a32 32 0 0 0-32-32zM736 480a32 32 0 0 0-32 32c0 141.152-114.848 256-256 256a32 32 0 1 0 0 64c176.448 0 320-143.552 320-320a32 32 0 0 0-32-32z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

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.

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

File diff suppressed because one or more lines are too long

20
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -277,6 +277,9 @@ li{
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.gray-filter {
filter: opacity(50%);
}
.nz-btn-group .nz-btn:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
@@ -394,6 +397,7 @@ li{
padding-bottom: 10px;
color: #999;
cursor: pointer;
display: inline-block;
}
.nz-tab-item-active {
border-bottom: 3px solid $global-text-color-active;
@@ -401,7 +405,16 @@ li{
cursor: default;
font-weight: bold;
}
.nz-tab-item-close {
color: rgba(245, 108, 108, 0.6);
cursor: pointer;
}
.nz-tab-item-close:hover {
color: rgba(245, 108, 108, 1);
}
.nz-tab-error {
font-weight: normal;
}
/* end--nz-tab组件*/
/* begin--二级页面tab*/
@@ -1071,6 +1084,11 @@ li{
.right-box-add-endpoint.right-box-add-endpoint-snmp {
width: 850px;
}
.snmp-form {
.el-form-item__content {
margin-left: 10px !important;
}
}
/* begin--右侧弹框--顶部按钮*/
.right-box-top-btns {
text-align: center;

2
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -481,6 +481,8 @@ export default {
immediate:true,
handler(n,o){
this.data=Object.assign({},n)
this.data.resizable=true;
this.data.editable=true;
}
},
panelId:{

4
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -28,8 +28,8 @@
z-index: 2000;
}
.vue-resizable-handle:after {
border-right: 2px solid #555;
border-bottom: 2px solid #555;
border-right: 2px solid #acb6bf;
border-bottom: 2px solid #acb6bf;
content: "";
position: absolute;
right: 3px;

16
nezha-fronted/src/components/common/language/en.js
View File

@@ -253,7 +253,7 @@ const en = {
contentTitle:'Nezha Management System',
traffic: 'Traffic',
asset:{
title:'Asset',
title:'Assets',
assetType:'Asset type',
modelStat:'Model',
dcStat:'Data center',
@@ -275,16 +275,16 @@ const en = {
},
},
project:{
project:'Project',
project:'Projects',
name:'Name',
module:'Module',
endpoint:'Endpoint',
},
module: {
module: "Module",
module: "Modules",
},
endpoint: {
endpoint: "Endpoint",
endpoint: "Endpoints",
},
dataCenter:{
dataCenter:'Data center',
@@ -292,7 +292,7 @@ const en = {
promServer:'Prom server',
},
alert:{
alertMessage: 'Alert message',
alertMessage: 'Alert messages',
level:'Level',
alertRule:'Alert rule',
ruleNum:'Rule num',
@@ -453,9 +453,9 @@ const en = {
protocol:"Protocol",
sshProtocol:"SSH",
telnetProtocol:"Telnet",
userTip:"UserTip",//用户名提示
passwordTip:"PasswordTip",//密码提示
reloginPasswordTip:"Relogin",//密码提示
userTip:"User tip",//用户名提示
passwordTip:"Password tip",//密码提示
reloginPasswordTip:"Relogin tip",//密码提示
userPwdIntroduce:'Please specify a user name and password so that the telenet login process can automatically log in',
reLoginPwdIntroduce:'Please specify the password prompt so that the login process can run automatically',
account:'User name',//'用户名'

1
nezha-fronted/src/components/common/pagination.vue
View File

@@ -182,6 +182,7 @@ export default {
.pagination .el-pagination {
max-height: 42px;
padding-right: 0;
overflow-x: hidden;
}
.pagination-size-select .el-input--mini .el-input__inner{
height: 20px;

166
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -21,7 +21,7 @@
{{tabView == false && !pageObj.id ? $t('asset.createAssetTab.title') : ''}}
</div>
<el-scrollbar class="right-box-form-box">
<el-scrollbar class="right-box-form-box" ref="scrollbar">
<el-form ref="assetEditForm" :model="assetData" label-width="120px" class="right-box-form right-box-form-left" :rules="rules">
<el-form-item :label="$t('asset.createAssetTab.sn')" prop="sn">
<el-input size="small" v-if="!tabView" v-model="assetData.sn"/>
@@ -151,7 +151,7 @@
<el-form-item class="tag-edit tag-edit-value" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}" :prop="'tags.' + index + '.value'">
<el-input placeholder="value" size="mini" v-model="item.value"></el-input>
</el-form-item>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
<div class="param-box-row-symbol" :id="'asset-tag-remove-'+index" @click.stop="removeTag(index)"><i class="nz-icon nz-icon-minus-square"></i></div>
</div>
</el-scrollbar>
</div>
@@ -176,22 +176,39 @@
<location-cascader :disabled="assetData.modelId !=''?false:true" :default-model-u-size="modelSize" @change="setLocationData" :init-data="initLocationData" ref="locationCascader" :idc-option="IDCOptionData"></location-cascader>
</el-form-item>
<!--cli-->
<div class="right-box-sub-title">{{$t('asset.createAssetTab.cli')}}
<el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>
<div class="right-box-sub-title">{{$t('config.account.account')}}
<!--<el-switch v-if="!tabView" style="float: right;" v-model="accountSwitch" active-color="#ee9d3f" :disabled="parseInt(assetData.exporter)===1"></el-switch>-->
</div>
<div class="line-100 right-box-line"></div>
<template v-if="accountSwitch">
<!--<template v-if="accountSwitch">
<account-config-box v-for="(item,index) in assetData.accounts" :is-edit="!tabView" :account="item" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult" :is-allowed-change-protocol="changeProtocolSwitch" @protocol-type-change="protocolTypeChange"></account-config-box>
</template>
</template>-->
<div class="nz-tab" style="padding-left: 30px;">
<div class="nz-tab-item-box" v-for="(account, index) in assetData.accounts" :key="index" @click="changeProtocolType(account.protocol)" :id="`account-login-type-${index}`">
<div class="nz-tab-item" :class="{'nz-tab-item-active': accountType == account.protocol}" style="position: relative;">
<span>{{account.protocol}}</span>
<transition name="el-zoom-in-top">
<div v-if="errorProtocol.indexOf(account.protocol) > -1" class="nz-tab-error el-form-item__error">Required</div>
</transition>
</div>&nbsp;
<span class="nz-tab-item-close" @click.stop="removeAccount(index)"><i class="el-icon-circle-close"></i></span>
</div>
<el-popover placement="right" width="70" trigger="click" :disabled="assetData.accounts.length == 3" v-model.sync="showAccountOp" popper-class="no-style-class">
<button slot="reference" id="add-type" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" :class="{'nz-btn-disabled': assetData.accounts.length == 3}">
<span><i style="font-size: 12px;" class="nz-icon nz-icon-create-square"></i></span>
</button>
<ul class="el-select-dropdown__list">
<li @click="addAccount(type)" v-for="(type, index) in selectableAccountTypes" :key="index" class="el-select-dropdown__item"><span>{{type}}</span></li>
</ul>
</el-popover>
</div>
<account-config-box v-for="(account,index) in assetData.accounts" :account="account" v-show="account.protocol == accountType" :key="index" ref="accountConfigBox" @setValidateResult="setAccountValideResult" @protocol-type-change="protocolTypeChange"></account-config-box>
<template v-if="!pageObj.id && !exporterDisableSwitch">
<template v-if="accountType == 'SSH'">
<el-form-item :label="$t('asset.createAssetTab.exporter')" class="exporter-label">
<el-switch class="exporter-switch" v-model="assetData.exporter" active-color="#ee9d3f" active-value="1" inactive-value="0" :show="!exporterDisableSwitch"></el-switch>
</el-form-item>
</template>
<template v-else>
<div style="height: 52px;"></div>
</template>
</el-form>
</el-scrollbar>
@@ -227,6 +244,8 @@
firstShowModel: false,
visible: '',
vendorModelData: '',
showAccountOp: false,
errorProtocol: [], //校验不通过的account
assetData: {
id: '',
sn: '',
@@ -241,7 +260,8 @@
host:'',
port:'',
},
accounts: [{
accounts: [],
/*accounts: [{
id: '',
authType: 1,
protocol:'SSH',
@@ -251,14 +271,15 @@
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}],
}],*/
tags: [],
exporter: 0
},
selectableAccountTypes: ["SSH", "TELNET", "SNMP"],
modelSize:1,
initLocationData:null,
locationInfo:null,
accountSwitch:false,//true 开启，false 关闭
//accountSwitch:false,//true 开启，false 关闭
accountData: '',
assetViewData: {
assetType: '',
@@ -459,7 +480,20 @@
'assetData.idcId': function(n, o) {
this.addCabinetData.idcId = n;
},
accountSwitch(n) {
'assetData.accounts': {
deep: true,
handler(n) {
let temp = ["SSH", "TELNET", "SNMP"];
n.forEach(item => {
let i = temp.indexOf(item.protocol);
if (i > -1) {
temp.splice(i, 1);
}
});
this.selectableAccountTypes = temp;
}
},
/*accountSwitch(n) {
if (n) {
if (!this.assetData.accounts[0]) {
!this.assetData.accounts.push({
@@ -487,7 +521,7 @@
}else{
this.changeProtocolSwitch=true;
}
},
},*/
locationInfo:{
deep:true,
handler(n,o){
@@ -509,6 +543,64 @@
this.$refs.tagEditBoxScrollbar.update();
});
},
addAccount(type) {
if (type == "SSH") {
this.assetData.accounts.push({
authType: 1,
protocol: "SSH",
port: 22,
params: {
user: "",
method: "password",
password: "",
key: "",
passwordKey: ""
}
});
} else if (type == "TELNET") {
this.assetData.accounts.push({
protocol: "TELNET",
port: 23,
params: {
user: "",
password: "",
userTip: "",
passwordTip: "",
reloginTip: ""
}
});
} else if (type == "SNMP") {
this.assetData.accounts.push({
protocol: "SNMP",
port: 161,
params: {
version:2,
community:"public",
security_name:"",
security_level:"",
auth_password:"",
priv_password:"",
auth_protocol:"",
priv_protocol:"",
context_name:""
}
});
}
this.accountType = type;
this.showAccountOp = false;
this.$nextTick(() => {
let sbWrap = this.$refs.scrollbar.$refs.wrap;
sbWrap.scrollTop = sbWrap.scrollHeight;
});
},
removeAccount(index) {
this.assetData.accounts.splice(index, 1);
if (this.assetData.accounts.length > 0) {
this.accountType = this.assetData.accounts[0].protocol;
} else {
this.accountType = "";
}
},
removeTag: function(index) {
this.assetData.tags.splice(index, 1);
this.$nextTick(() => {
@@ -525,6 +617,7 @@
this.getIDCOptionData();
this.getVendorOptionData();
this.getAssetTypeOptionData();
this.showAccountOp = false;
},
editQuit() {
for (let i of this.assetTypeOptionData) {
@@ -595,8 +688,12 @@
this.assetData.state = this.obj.state
this.assetData.idcId = this.obj.idc.id;
this.assetData.tags = this.obj.tags;
this.assetData.accounts = this.obj.accounts;
this.assetData.cabinetId = this.obj.cabinet == null ? '' : this.obj.cabinet.id
this.assetData.purchaseDate = this.obj.purchaseDate;
if (this.assetData.accounts && this.assetData.accounts.length > 0) {
this.accountType = this.assetData.accounts[0].protocol.toUpperCase();
}
// this.assetData.accounts[0].id = this.obj.accounts[0].id
// this.assetData.accounts[0].authType = this.obj.accounts[0].authType
// this.assetData.accounts[0].user = this.obj.accounts[0].user
@@ -604,12 +701,12 @@
// this.assetData.accounts[0].port = this.obj.accounts[0].port
// this.assetData.accounts[0].cert = this.obj.accounts[0].privateKey
this.assetData.accounts=this.obj.accounts[0]?this.obj.accounts:[];
this.accountSwitch=this.assetData.accounts.length>0;
//this.accountSwitch=this.assetData.accounts.length>0;
this.idcSelectedData.location = this.obj.idc.location
this.idcSelectedData.principal = this.obj.idc.principal
this.idcSelectedData.tel = this.obj.idc.tel
this.cabinetSelectedData.uSize = this.obj.cabinet == null ? '' : this.obj.cabinet.uSize
this.cabinetSelectedData.remark = this.obj.cabinet == null ? '' : this.obj.cabinet.remark
this.cabinetSelectedData.remark = this.obj.cabinet == null ? '' : this.obj.cabinet.remark;
this.getAllModelOptionData(this.assetType);
} else {
this.resetAsset();
@@ -739,17 +836,7 @@
port:'',
},
locationInfo:null,
accounts: [{
id: '',
authType: 1,
protocol: 'SSH',
user: '',
pwd: '',
port: '',
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}],
accounts: [],
tags: []
};
this.assetType = '';
@@ -790,12 +877,14 @@
}
}
if (!this.accountSwitch) {
/*if (!this.accountSwitch) {
this.assetData.accounts = [];
}
}*/
if(this.$refs.accountConfigBox && this.$refs.accountConfigBox.length > 0) {
this.$refs.accountConfigBox[0].validateAccount();
this.$refs.accountConfigBox.forEach(box => {
box.validateAccount();
});
}
this.$refs.assetEditForm.validate((valid) => {
@@ -896,8 +985,14 @@
})
}
},
setAccountValideResult:function(result){
setAccountValideResult(result, protocol) {
this.accountValideResult = result;
let index = this.errorProtocol.indexOf(protocol);
if (result) {
index != -1 ? this.errorProtocol.splice(index, 1) : "";
} else {
index == -1 ? this.errorProtocol.push(protocol) : "";
}
},
//新增型号弹框关闭后重置弹框内容
resetVendor() {
@@ -982,6 +1077,13 @@
}
},
changeProtocolType(type) {
this.accountType = type;
this.$nextTick(() => {
let sbWrap = this.$refs.scrollbar.$refs.wrap;
sbWrap.scrollTop = sbWrap.scrollHeight;
});
},
deleteData(data, item) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),

4
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -42,7 +42,7 @@
</div>
<!-- snmp表单 -->
<template v-if="currentModule.type && currentModule.type == 'snmp'">
<span class="snmp-form" v-if="currentModule.type && currentModule.type == 'snmp'">
<div class="right-box-sub-title">SNMP settings</div>
<div class="line-100 right-box-line"></div>
@@ -232,7 +232,7 @@
</el-form-item>
</el-col>
</el-row>
</template>
</span>
<div class="right-box-form-tip" v-if="rightBox.isEdit">
{{$t('project.module.tip.defaultEndpointSet')}}

118
nezha-fronted/src/components/page/asset/accountConfig.vue
View File

@@ -1,46 +1,94 @@
<template>
<div>
<el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
<div class="nz-tab">
<div class="nz-tab-item-box" @click="changeProtocolType('SSH')" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SSH', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'TELNET' || account.protocol == 'SNMP')}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
</div>
<div @click="changeProtocolType('TELNET')" class="nz-tab-item-box" id="account-logintype-2">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'SSH' || account.protocol == 'SNMP')}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
</div>
<div @click="changeProtocolType('SNMP')" class="nz-tab-item-box" id="account-logintype-3">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'SNMP', 'unclickable' : !isAllowedChangeProtocol && (account.protocol == 'TELNET' || account.protocol == 'SSH')}">SNMP</div>
</div>
</div>
<el-form label-width="120px" :model="account" :rules="rules" ref="accountForm" style="margin-top: 20px;">
<template v-if="account.protocol == 'SSH'">
</template>
<template v-if="account.protocol == 'TELNET'">
</template>
<template v-if="account.protocol == 'SNMP'">
</template>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input autocomplete="new-password" size="small" v-model="account.user"/>
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="loginType" v-show="account.protocol == 'SSH'">
<el-radio-group v-model="account.authType" size="small">
<el-radio-button label="1">{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label="2">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
<el-form-item :label="$t('asset.createAssetTab.loginType')" prop="params.method">
<el-radio-group v-model="account.params.method" size="small">
<el-radio-button label="password">{{$t('asset.createAssetTab.password')}}</el-radio-button>
<el-radio-button label="key">{{$t('asset.createAssetTab.ssh')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="(account.authType==1 || account.protocol == 'TELNET')" >
<el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
<el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'password'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="(account.authType==2 && account.protocol == 'SSH')" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.privateKey" size="small"></el-input>
<el-form-item :label="$t('asset.createAssetTab.ssh')" v-if="account.params.method == 'key'" prop="file">
<el-input rows="4" type="textarea" placeholder="" v-model="account.params.key" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-if="account.params.method == 'key'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.passwordKey"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</template>
<template v-if="account.protocol == 'TELNET'">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-input autocomplete="new-password" size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.userTip')" prop="userTip">
<el-input autocomplete="new-password" size="small" v-model="account.params.userTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.passwordTip')">
<el-input size="small" v-model="account.params.passwordTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" prop="reloginTip">
<el-input size="small" v-model="account.params.reloginTip"/>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port" style="display: inline-block">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
</template>
<template v-if="account.protocol == 'SNMP'">
<el-form-item :label="$t('asset.createAssetTab.port')" prop="port">
<el-input size="small" v-model.number="account.port"/>
</el-form-item>
<el-form-item :label="$t('project.module.community')" prop="params.community">
<el-input size="small" v-model="account.params.community"/>
</el-form-item>
<el-form-item :label="$t('project.module.version')" prop="params.version">
<el-radio-group v-model.number="account.params.version" size="small">
<el-radio-button :label="2"></el-radio-button>
<el-radio-button :label="3"></el-radio-button>
</el-radio-group>
</el-form-item>
<!--SNMP V3 setting-->
<template v-if="account.params.version == 3">
<el-form-item :label="$t('asset.createAssetTab.account')" prop="params.user">
<el-input size="small" v-model="account.params.user"/>
</el-form-item>
<el-form-item :label="$t('project.module.securityLevel')" prop="params.securityLevel">
<el-radio-group v-model="account.params.securityLevel" size="small">
<el-radio-button label="noAuthNoPriv"></el-radio-button>
<el-radio-button label="authNoPriv"></el-radio-button>
<el-radio-button label="authPriv"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('login.password')" prop="params.password" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.password"/>
</el-form-item>
<el-form-item :label="$t('project.module.authProtocol')" prop="params.authProtocol" v-if="account.params.securityLevel == 'authNoPriv' || account.params.securityLevel == 'authPriv'">
<el-radio-group v-model="account.params.authProtocol" size="small">
<el-radio-button label="MD5"></el-radio-button>
<el-radio-button label="SHA"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('project.module.privProtocol')" prop="params.privProtocol" v-if="account.params.securityLevel == 'authPriv'">
<el-radio-group v-model="account.params.privProtocol" size="small">
<el-radio-button label="DES"></el-radio-button>
<el-radio-button label="AES"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('project.module.privPassword')" prop="params.privPassword" v-if="account.params.securityLevel == 'authPriv'">
<el-input autocomplete="new-password" size="small" type="password" v-model="account.params.privPassword"/>
</el-form-item>
</template>
</template>
</el-form>
</div>
</template>
<script>
@@ -51,12 +99,10 @@ export default {
account:{type:Object},
isAllowedChangeProtocol:{type:Boolean,default:true}
},
created() {
},
data(){
return {
rules:{
user:[
"params.user": [
{ required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
port: [
@@ -121,7 +167,7 @@ export default {
validateAccount:function(){
this.validateResult=false;
this.$refs.accountForm.validate((valid) => {
this.$emit("setValidateResult",valid);
this.$emit("setValidateResult", valid, this.account.protocol);
});
},

52
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -74,9 +74,6 @@
<template slot="optionZone">
<button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
<i class="nz-icon nz-icon-create-square"></i></button>
<!--<div class="export-left-btn" @click.stop="tagShow('showAdd')">
<i class="nz-icon nz-icon-create-square" :title="$t('overall.createAsset')" ></i>
</div>-->
</template>
</export-excel>
</div>
@@ -122,7 +119,6 @@
<div v-if="item.prop=='state'">
<span>{{scope.row.state==1 ? $t('asset.createAssetTab.inStock') : $t('asset.createAssetTab.notInStock')}}</span>
</div>
<!-- :content="scope.row.pingRtt ? (scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'['+ scope.row.pingRtt+'ms'+']':(scope.row.pingLastUpdate&&scope.row.pingLastUpdate!=''?(new Date(scope.row.pingLastUpdate).getHours()+':'+new Date(scope.row.pingLastUpdate).getMinutes()):'&#45;&#45;')+'[unreachable]'"-->
<div v-if="item.prop == 'pingStatus'">
<el-popover
placement="right"
@@ -136,41 +132,15 @@
</div>
<template v-if="item.prop=='Module'">
<span class="link" @click="showEndpoint(scope.row)">{{scope.row.endpointNum}}</span>
<!--<template v-if="scope.row.moduleNum > 0" >
<endpoint-status-pop :asset-id="scope.row.id" :ref="'endpointPop' + scope.row.id">
<template v-slot:optionZone>
<span class="clickable">{{scope.row.endpointNum}}</span>
</template>
</endpoint-status-pop>
<module-list-pop :asset-id="scope.row.id + ''" @openModuleBox="openModuleBox" placement="left" :ref="'moduleListPop' + scope.row.id">
<template v-slot:optionZone>
&lt;!&ndash; <button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75">{{scope.row.moduleNum}}</button>&ndash;&gt;
<span class="clickable">{{scope.row.moduleNum}}</span>
</template>
</module-list-pop>
</template>
&lt;!&ndash; <button type="button" v-else class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-75 nz-btn-disabled">{{scope.row.moduleNum}}</button>&ndash;&gt;
<span v-else class="unclickable">{{scope.row.endpointNum}}</span>-->
</template>
<template v-if="item.prop=='Alert'">
<span :id="'asset-alerts-'+scope.row.id" @click="jumpToAlertMsg(scope.row)" class="link">{{scope.row.alertNum + ' ' + $t('overall.active')}}</span>
</template>
<div v-if="item.prop=='dataCenter'">
<!-- <idc-config-box :post-idc="JSON.parse(JSON.stringify(scope.row.idc))" ref="idcConfigBox" :is-edit="false" placement="left" @after="getAssetData(null, true)" :button-class="'checkbox-edit'" :user-data="idcUserData">-->
<!-- <template v-slot:optionZone>-->
<!--&lt;!&ndash; <span class="link" @click="closeAllPop">{{scope.row.idc.name}}</span>&ndash;&gt;-->
<!-- <span class="clickable" @click="closeAllPop">{{scope.row.idc.name}}</span>-->
<!-- </template>-->
<!-- </idc-config-box>-->
<span >{{scope.row.idc.name}}</span>
</div>
<template v-if="item.prop=='cabinet'">
<!-- <cabinet-config-box v-if="scope.row.cabinet&&scope.row.cabinet!='&#45;&#45;'" ref="cabinetConfigBox" placement="left" :is-edit="false" :post-cabinet="JSON.parse(JSON.stringify(scope.row.cabinet))" @after="getAssetData(null, true)" :post-idc-datas="IDCOptionData">-->
<!--&lt;!&ndash; <span slot="optionZone" @click="closeAllPop" class="link">{{returnData(scope.row.cabinet)}}</span>&ndash;&gt;-->
<!-- <span class="clickable" slot="optionZone" @click="closeAllPop" >{{returnData(scope.row.cabinet).name}}</span>-->
<!-- </cabinet-config-box>-->
<span v-if="scope.row.cabinet&&scope.row.cabinet!='--'">{{returnData(scope.row.cabinet).name}}</span>
<!-- <span v-else class="unclickable">{{returnData(scope.row.cabinet)}}</span>-->
<span v-else >{{returnData(scope.row.cabinet)}}</span>
</template>
<div v-if="item.prop=='model'">
@@ -201,9 +171,15 @@
class="el-icon-delete"></i>
</span>
&nbsp;
<span title="CLI" @click="cli(scope.row.id ,scope.row.host,scope.row.accounts)" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
class="nz-icon nz-icon-cli"></i>
<el-dropdown trigger="hover" @command="cli">
<span title="CLI" class="content-right-option" :id="'asset-ssh-'+scope.row.id"><i
class="nz-icon nz-icon-cli" :class="{'gray-filter': !scope.row.accounts || scope.row.accounts.length == 0}"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(account, index) in scope.row.accounts" :key="index" :command="[scope.row.id ,scope.row.host, account]">{{account.protocol}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</template>
</el-table-column>
@@ -584,18 +560,12 @@
this.$store.commit('setHeaderTable', data);
this.tablelable = data;
},
cli(id,host,accounts){
let port = '';
let accountId = '';
if(accounts && accounts.length>0 && accounts[0].port){
port = accounts[0].port;
accountId = accounts[0].id;
}
cli([id,host,account]){
const consoleParam = {
id: id,
host: host,
accountId:accountId,
port:port,
accountId: account.id,
port: account.port,
}
this.$store.commit('addConsole', consoleParam);
//this.$refs.webSsh.show(id,host,accountId,port);

41
nezha-fronted/src/components/page/dashboard/explore/editor.vue
View File

@@ -4,7 +4,7 @@
<span class="nz-input-append editor-clear" style="padding-top:8px;display: none" @click="clearContent"><i class="el-icon-circle-close"></i></span>
<div class="metric-editor-popper" :style="{left:popperPos.left+'px'}">
<div class="metric-popper-main" v-show="showType&&Object.keys(showSuggestions).length>0">
<el-scrollbar style="height: 100%" class="ps-scroll-small" ref="scroll">
<el-scrollbar style="height: 100%;width:100%" class="el-scrollbar-small" ref="scroll">
<div v-for="(key, index) in orders" >
<div v-html="key" class="popper-group" v-show="showSuggestions[key]"></div>
<div class="popper-item" v-for="(item,i) in showSuggestions[key]" v-html="item.label" :key="item.insertText" :type="key" :value="item.insertText" @click.stop="handleItemClick(key,item,$event)" @mouseover="itemHover(item)" @mouseout="itemOut(item)"></div>
@@ -163,9 +163,31 @@
this.matchMetric()
}
},
matchFuncBody:function(){
let functionReg=/[a-zA-Z_]\w*?\(.*\)/g
formatContent:function(){
let punctuationReg=/[\{\}\(\)\[\]]/g;
this.formatText(punctuationReg,{'color':'#ff7941'})
let labelKeyReg=/[a-z_]\w*(?=\s*(=|!=|=~|!~))/g
this.formatText(labelKeyReg,{'color':'#3274d9'})
let labelValueReg= /"(?:\\.|[^\\"])*"/g
this.formatText(labelValueReg,{'color':'#3eb15b'})
let metricReg= /([A-Za-z:][\w:]*)\b(?![\(\]{=!",])/g;
this.formatText(metricReg,{'color':'#52545c'})
let rangeReg=/(?<=\[)\b\d+[smdwy]\b(?=\])/ig
this.formatText(rangeReg,{'color':'#9954bb'})
},
formatText:function(pattern,style){
if(pattern.test(this.content)){
let matchs=this.globalMatch(pattern,this.content);
matchs.forEach(item=>{
this.quill.formatText(item.index,item[0].length,style,'silent')
})
}
},
matchMetric:function(){
let metricReg=/[a-zA-Z_]\w*?\b\{.*?\}/g
@@ -215,7 +237,7 @@
queryTypeInfos:function(){
this.noStyleSuggestions={};
this.$set(this.noStyleSuggestions,'metrics',this.tempStoreMetric)
this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
// this.$set(this.noStyleSuggestions,'operators',suggestions.getOperators())
this.$set(this.noStyleSuggestions,'functions',suggestions.getFunctions())
this.showSuggestions=this.deepClone(this.noStyleSuggestions)
},
@@ -670,6 +692,7 @@
queryMetrics:function(){
if(this.metricList&&this.metricList.length>0){
this.tempStoreMetric=this.deepClone(this.metricList)
this.queryTypeInfos();
}else{
this.$get('/prom/api/v1/label/__name__/values').then(response=>{
if(response.status == 'success'){
@@ -699,10 +722,14 @@
enter:{
key:13,
handler:function(range,content){
if(!$temp.showType){
$temp.showType=false;
$temp.quill.blur();
$temp.$emit('on-enter')
return false;
}else{
$temp.pickItem();
}
}
}
};
@@ -713,6 +740,7 @@
console.log('quill blur')
})
this.quill.on('text-change',function(delta, oldDelta, source){
if(source != 'silent'){
console.log('delta',delta,'oldDelta',oldDelta,'source',source)
let char='',operation='';
let oldContent=oldDelta.ops[0].insert.substring(0,oldDelta.ops[0].insert.length-1);
@@ -748,6 +776,8 @@
$temp.content=$temp.getContent();
console.log('current content-->',$temp.content)
$temp.getPosition();
$temp.formatContent();
}
})
this.registerKeydown();
},
@@ -790,7 +820,7 @@
box-sizing: border-box;
border: 1px solid lightgrey;
height: 100%;
max-width: 66%;
/*max-width: 66%;*/
min-width: 200px;
float: left;
border-radius: 3px;
@@ -798,6 +828,7 @@
color: #52545c;
padding: 5px;
background-color: white;
overflow-x: hidden;
}
.metric-editor-popper .metric-popper-desc{
display: inline-block;

15
nezha-fronted/src/components/page/dashboard/explore/explore.vue
View File

@@ -286,7 +286,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
promqlInputIndexs.push(index);
queryExpression.push(item)
requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step='+step))
requestArr.push(this.$get('/prom/api/v1/query_range?query=' + item + '&start=' + this.$stringTimeParseToUnix(this.filterTime[0]) + '&end=' + this.$stringTimeParseToUnix(this.filterTime[1]) + '&step='+step))
}
})
if (requestArr.length > 0) {
@@ -299,8 +299,8 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
if (res.length > 0) {
res.forEach((response, index) => {
let promqlIndex=promqlInputIndexs[index];
if (response.data.status == 'success') {
let data = response.data.data.result;
if (response.data&&response.status == 'success') {
let data = response.data.result;
data.forEach((result, i) => {
let seriesItem = {
name: '',
@@ -338,7 +338,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
this.$refs['promql-'+promqlIndex][0].setError('')
}else{
console.log(response)
this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
this.$refs['promql-'+promqlIndex][0].setError(response.error)
}
})
@@ -360,7 +360,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
let requestArr = [];
this.expressions.forEach((item, index) => {
if (item != '') {
requestArr.push(axios.get('/prom/api/v1/query?query=' + item))
requestArr.push(this.$get('/prom/api/v1/query?query=' + item))
}
})
if (requestArr.length > 0) {
@@ -372,9 +372,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
if (res.length > 0) {
this.tableData = [];
this.tableLabels = [];
console.log(111111111111111111111,res)
res.forEach((response, index) => {
if (response.data.status == 'success') {
let data = response.data.data.result;
if (response.data&&response.status == 'success') {
let data = response.data.result;
if (data) {
data.forEach((result, i) => {
let metrics = Object.assign({}, result.metric);

2
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -9,7 +9,7 @@
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
</div>
<div class="inputBox">
<div class="inputBox" @click="dropDownVisible=false">
<!-- <el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>-->
<editor :metric-list="metricStore" v-model="expressionList[index]" ref="editor" @on-enter="expressionChange" @on-blur="expressionChange" ></editor>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>

1
nezha-fronted/src/components/page/dashboard/explore/suggestions.vue
View File

@@ -57,6 +57,7 @@
},
];
const funcs=[
...operators,
{
insertText: 'abs',
label: 'abs',

13
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -40,11 +40,12 @@
<el-dropdown-item v-for="item in panelData" :key="item.id+1"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
<!--{{item.name}}-->
<el-row :gutter="10" class="panel-list-width panelContent" >
<el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
<el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
<el-row :gutter="10" class="panel-list-width" >
<el-col :span="2" class="panelContent move-area"><i class="nz-icon nz-icon-move"></i></el-col>
<el-col :span="17" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
<el-col :span="1"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
<el-col :span="1"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="nz-icon nz-icon-edit"></i></span></el-col>
</el-row>
</el-dropdown-item>
</draggable>
@@ -940,7 +941,9 @@
.nz-dashboard-picker {
}
.move-area:hover{
cursor: move;
}
</style>
<style lang="scss">
.panel .top-tools input {