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

feat:asset-account配置增加telnet协议

Browse Source 
1.asset-account配置增加telnet协议
2.dashboard chart面板删除按钮删除逻辑调整
This commit is contained in:
wangwenrui
2020-03-09 08:41:21 +08:00
parent 45b2d580f5
commit de4bf4b9a0
7 changed files with 225 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -416,7 +416,7 @@ export default {
return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
},
// 删除图表
removeChart(chartId) {
removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
const chart = this.dataList.find(item => item.id === chartId);
if (chart) {
this.$emit('on-remove-chart', chart);

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

@@ -258,6 +258,12 @@ const en = {
loginType:'Login type',//'登录类型'
password:'Password',//'密码'
ssh:'SSH key',//'SSH-Key'
protocol:"Protocol",
sshProtocol:"SSH",
telnetProtocol:"Telnet",
userTip:"UserTip",
passwordTip:"PasswordTip",
reloginPasswordTip:"Relogin",
account:'User name',//'用户名'
port:'Port',//'端口'
upload:'Upload',//'上传'
@@ -475,7 +481,7 @@ const en = {
param: 'Parameter',//"参数"
path: 'Path',//"路径"
asset: 'Device',//"设备"
lastUpdate: 'Last update time',//"最后更新时间"
lastUpdate: 'Last Reply',//"最后更新时间"
moduleParameter: 'Module',//"组件参数"
addGraph: 'View Graph', //添加图标
element: 'Element',

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

@@ -386,7 +386,7 @@
</div>
<div class="line-100 asset-line"></div>
<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"></account-config-box>
<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"></account-config-box>
</template>
<template v-if="!pageObj.id">
@@ -438,9 +438,13 @@
accounts: [{
id: '',
authType: 1,
protocol:'SSH',
user: '',
pwd: '',
port: '',
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}],
exporter: 0
},
@@ -600,7 +604,8 @@
},
formData:null,
module:{},
accountValideResult:true
accountValideResult:true,
changeProtocolSwitch:true,
}
},
/*computed: {
@@ -635,9 +640,13 @@
id: '',
user:"",
authType:1,
protocol:'SSH',
pwd:"",
port:'',
privateKey:'',
userTip:"",
passwordTip:'',
reloginPasswordTip:''
});
}
}
@@ -645,6 +654,12 @@
'assetData.exporter':function(n,o){
if(parseInt(n) === 1){
this.accountSwitch=true;
this.changeProtocolSwitch=false;
for(let account of this.assetData.accounts){
account.protocol='SSH';
}
}else{
this.changeProtocolSwitch=true;
}
}
},
@@ -817,9 +832,13 @@
accounts: [{
id: '',
authType: 1,
protocol: 'SSH',
user: '',
pwd: '',
port: '',
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}]
};
this.assetType = '';

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

@@ -1,7 +1,7 @@
<template>
<div>
<el-form label-width="120px" class="" :model="account" :rules="rules" ref="accountForm">
<!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-if="isEdit">
<!--<div class="nz-btn-group float-left" style="padding-top: 4px;" v-show="isEdit">
<button type="button" @click="changeLoginType(1)" id="account-logintype-1"
class="nz-btn nz-btn-size-small float-left"
:class="{'nz-btn-disabled nz-btn-style-normal' : account.authType == 1, 'nz-btn-style-light' : account.authType == 2}">
@@ -13,32 +13,55 @@
<span>{{$t('asset.createAssetTab.ssh')}}</span>
</button>
</div>-->
<div class="nz-tab" v-if="isEdit">
<div class="nz-tab-item-box" @click="changeLoginType(1)" id="account-logintype-1">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 1}">{{$t('asset.createAssetTab.password')}}</div>
<div class="nz-tab" v-show="isEdit">
<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'}">{{$t('asset.createAssetTab.sshProtocol')}}</div>
</div>
<div @click="changeLoginType(2)" class="nz-tab-item-box">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.authType == 2}">{{$t('asset.createAssetTab.ssh')}}</div>
<div @click="changeProtocolType('TELNET')" class="nz-tab-item-box">
<div class="nz-tab-item" :class="{'nz-tab-item-active' : account.protocol == 'TELNET','unclickable':!isAllowedChangeProtocol&&account.protocol == 'SSH'}">{{$t('asset.createAssetTab.telnetProtocol')}}</div>
</div>
</div>
<el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-if="!isEdit">
<div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>
<el-form-item :label="$t('asset.createAssetTab.protocol')" size="mini" v-show="!isEdit">
<div class="right-box-form-content-txt" >{{account.protocol=='SSH'?$t('asset.createAssetTab.sshProtocol'):$t('asset.createAssetTab.telnetProtocol')}}</div>
</el-form-item>
<!-- <el-form-item :label="$t('asset.createAssetTab.loginType')" size="mini" v-show="!isEdit">-->
<!-- <div class="right-box-form-content-txt" >{{account.authType==1?$t('asset.createAssetTab.password'):$t('asset.createAssetTab.ssh')}}</div>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('asset.createAssetTab.account')" prop="user">
<el-input autocomplete="new-password" size="small" v-model="account.user" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.user}}</div>
<el-input autocomplete="new-password" size="small" v-model="account.user" v-show="isEdit"/>
<div class="right-box-form-content-txt" v-show="!isEdit">{{account.user}}</div>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="account.authType==1" v-if="isEdit">
<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-radio-group>
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.password')" v-show="isEdit&&(account.authType==1 || account.protocol == 'TELNET')" >
<el-input autocomplete="new-password" size="small" type="password" v-model="account.pwd"/>
</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" v-if="isEdit"/>
<div class="right-box-form-content-txt" v-if="!isEdit">{{account.port}}</div>
<el-input size="small" v-model.number="account.port" v-show="isEdit"/>
<div class="right-box-form-content-txt" v-show="!isEdit">{{account.port}}</div>
</el-form-item>
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="account.authType==2" prop="file" v-if="isEdit">
<el-form-item :label="this.$t('asset.createAssetTab.ssh')" v-show="isEdit&&(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>
</el-form>
<div class="telnet-option" v-show="isEdit && account.protocol=='TELNET'">
<div class="telnet-option_title clickable" @click="isShowTelnetOption">login option<i style="font-size: 12px;" :class="{'el-icon-arrow-left':!showTelnetOption,'el-icon-arrow-down':showTelnetOption}"></i></div>
<el-form-item :label="$t('asset.createAssetTab.userTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.userTip" />
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.passwordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.passwordTip" />
</el-form-item>
<el-form-item :label="$t('asset.createAssetTab.reloginPasswordTip')" v-show="isEdit && account.protocol=='TELNET' && showTelnetOption">
<el-input type="text" size="small" v-model="account.reloginPasswordTip" />
</el-form-item>
</div>
</div>
</template>
@@ -48,7 +71,8 @@ export default {
name: "accountConfig",
props:{
account:{type:Object},
isEdit:{type:Boolean,default:true}
isEdit:{type:Boolean,default:true},
isAllowedChangeProtocol:{type:Boolean,default:true}
},
created() {
},
@@ -63,7 +87,7 @@ export default {
{ validator: port, trigger: 'blur'}
],
},
uploadTip:''
showTelnetOption:false
}
},
methods:{
@@ -72,25 +96,43 @@ export default {
id:null,
user:"",
authType:1,
protocol:'SSH',
pwd:"",
port:null,
privateKey:null,
uploadFile:null
userTip:"",
passwordTip:'',
reloginPasswordTip:''
}
},
changeLoginType:function(loginType){
this.account.authType=loginType;
if(loginType == 1){//密码登录
this.clearPrivateKey();
isShowTelnetOption:function(){
this.showTelnetOption=!this.showTelnetOption;
if(!this.showTelnetOption){
this.account.userTip="";
this.account.passwordTip="";
this.account.reloginPasswordTip="";
}
if(loginType == 2){//公钥登录
this.account.pwd='';
},
telnetOptionState:function(){
if(this.account.userTip != ''|| this.account.passwordTip != '' || this.account.reloginPasswordTip != ''){
this.showTelnetOption=true;
}
},
changeProtocolType:function(protocolType){
if(this.isAllowedChangeProtocol){
this.account.protocol=protocolType;
}else{
return ;
}
},
clearPrivateKey:function(){
this.account.privateKey=null;
},
clearTelnetOptions:function(){
this.account.userTip='';
this.account.passwordTip='';
this.account.reloginPasswordTip='';
},
handleChange(file,fileList) {
if (fileList.length > 0) {
this.uploadFileList = [fileList[fileList.length - 1]]
@@ -111,11 +153,19 @@ export default {
immediate:true,
deep:true,
handler(n,o){
// if (n && n.id) {
// this.account=n;
// } else {
// this.resetData();
// }
if(n.authType == 1){//密码登录
this.clearPrivateKey();
}
if(n.authType == 2){//公钥登录
this.account.pwd='';
}
if(n.protocol == 'SSH'){
this.showTelnetOption=false;
this.clearTelnetOptions();
}else{
this.clearPrivateKey();
}
this.telnetOptionState();
}
}
}
@@ -143,4 +193,21 @@ export default {
height: 40px;
}
/*去除上传文件动画end*/
.telnet-option{
position: relative;
}
.telnet-option:before{
content: "";
display: inline-block;
width: 79.9%;
height: 1px;
background-color: lightgrey;
vertical-align: middle;
margin-bottom: 18px;
}
.telnet-option .telnet-option_title{
display: inline-block;
vertical-align: middle;
margin-bottom: 18px;
}
</style>

4
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -350,10 +350,12 @@
}).then(() => {
this.$delete("panel/"+this.panelId+"/charts?ids="+cloneChart.id).then(response => {
if (response.code === 200) {
if(this.$refs.chartForm){
this.$refs.chartForm.resetFields();//清空表单
}
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
//this.getTableData();//删除相关图表后，刷新面板数据---调用panel的方法刷新
this.$refs.chartForm.resetFields();//清空表单
this.chart.id='';//不清除，再次打开创建图表，会显示删除按钮
this.$emit('on-delete-success');
} else {

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

@@ -352,7 +352,7 @@
this.$refs.addChartModal.editData(data, this.showPanel.id);
},
// 移除图表:弹出确认框询问
removeData(data) {
removeData(data,from) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -361,11 +361,18 @@
this.$delete("panel/" + data.panelId + "/charts?ids=" + data.id).then(response => {
if (response.code === 200) {
this.$message({
duration: 1000,
duration: 2000,
type: 'success',
message: this.$t("tip.deleteSuccess")
});
this.getTableData(); //删除相关图表后，刷新面板数据
let chartList=this.$refs.chartList.dataList;
for (let i =0;i< chartList.length;i++){
if(chartList[i].id === data.id){
chartList.splice(i,1);
break;
}
}
// this.getTableData(); //删除相关图表后，刷新面板数据
} else {
this.$message.error(response.msg);
}

58
nezha-fronted/src/components/page/project/project.vue
View File

@@ -145,7 +145,7 @@
&nbsp;
<span :title="$t('overall.edit')" @click="toEditEndpoint(scope.row)" class="content-right-option" :id="'edp-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
</div>
<!-- <span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>-->
<span v-else-if="item.prop == 'lastUpdate'">{{dateFormat(scope.row.lastUpdate)}}</span>
<span v-else-if="item.prop == 'state'" >
<el-popover placement="right" width="50" trigger="hover" :content="(scope.row.state == '1'?'up':'down')+'['+(scope.row.lastUpdate&&scope.row.lastUpdate!=''?(new Date(scope.row.lastUpdate).getHours()+':'+new Date(scope.row.lastUpdate).getMinutes()):'--')+']'">
<div slot="reference" style="width: 20px">
@@ -222,7 +222,7 @@
<!-- </button>-->
</div>
</div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i class="nz-icon nz-icon-duoxuan " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
<el-table
v-loading="queryEdpLoading"
:data="showTableData"
@@ -257,7 +257,8 @@
</div>
<span slot="reference"><i class="nz-icon nz-icon-info-normal metric-tip-icon"></i></span>
</el-popover>
<span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>
<span v-html="hideSameLabels?scope.row.colorSimpleElement: scope.row.colorElement"></span>
<!-- <span>{{hideSameLabels?scope.row.simpleElement: scope.row.element}}</span>-->
</template>
</el-table-column>
<el-table-column
@@ -373,11 +374,13 @@
label: this.$t("alert.list.state"),
prop: 'state',
show: true,
},{
},
{
label: this.$t("project.endpoint.lastUpdate"),
prop: 'lastUpdate',
show: false,
}, {
show: true,
},
{
label: this.$t('config.account.option'),
prop: 'option',
show: true,
@@ -1135,8 +1138,15 @@
this.endpointQueryTabData=JSON.parse(JSON.stringify(results));
for (let result of results){
// {"metric":{"instance":"192.168.40.126:9100","__name__":"scrape_duration_seconds","module":"node_exporter","project":"kafka","asset":"192.168.40.126","job":"ed_1","dc":"dc5"},"value":[1580782176.522,"0.000560761"]}
let temp=result.metric.__name__;
let simpleTemp=result.metric.__name__;//显示简略信息：隐藏same labels后的结果
let metricName=result.metric.__name__;
let temp=metricName;
let simpleTemp=metricName;//显示简略信息：隐藏same labels后的结果
let metricColor="";
let bracketsColor="#eb7b18";//#eb7b18
let labelColor="#65bbd1";//#66d9ef
let valueColor="#61c261";//#74e680
let colorTemp=`<span style="${metricColor}">${metricName}</span>`;
let colorSimpleTemp=`<span>${metricName}</span>`;
let metricTip={};
let queryInfos=(this.elementMetricDatas.filter((item)=>{
return item.metric===temp;
@@ -1149,20 +1159,37 @@
delete result.metric.__name__;
temp+="{";
simpleTemp+="{";
for (let key in result.metric){
colorTemp+=`<span style="color: ${bracketsColor}">{</span>`;
colorSimpleTemp+=`<span style="color: ${bracketsColor}">{</span>`;
let keys=Object.keys(result.metric);
for (let index in keys){
let key=keys[index];
temp+=key +"='"+result.metric[key]+"',";
colorTemp +=`<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
if(!this.sameLabels.some((i)=>{return i == key})){
simpleTemp+=key +"='"+result.metric[key]+"',";
colorSimpleTemp+=`<span style="color: ${labelColor}">${key}</span>=<span style="color: ${valueColor}">'${result.metric[key]}'</span>,`;
}
}
temp=temp.charAt(temp.length-1) == ","?temp.substr(0,temp.length-1):temp;
simpleTemp=simpleTemp.charAt(simpleTemp.length-1) == ","?simpleTemp.substr(0,simpleTemp.length-1):simpleTemp;
temp=temp.substr(0,temp.length-1);
simpleTemp=simpleTemp.substr(0,simpleTemp.length-1);
colorTemp=colorTemp.substr(0,colorTemp.length-1);
colorSimpleTemp=colorSimpleTemp.substr(0,colorSimpleTemp.length-1);
temp+="}";
simpleTemp+="}";
colorTemp+=`<span style="color: ${bracketsColor}">}</span>`;
colorSimpleTemp+=`<span style="color: ${bracketsColor}">}</span>`;
if(!/.+\{.+\}/.test(simpleTemp)){
simpleTemp=simpleTemp.substr(0,simpleTemp.length-2);
}
let edpQueryData={element:temp,simpleElement:simpleTemp,value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
if(!/.+\{<\/span><span.+?>.+?\}/.test(colorSimpleTemp)){
let metricReg=new RegExp("<span.*?>"+metricName+"<\/span>")
colorSimpleTemp=metricReg.exec(colorSimpleTemp)[0];
}
let edpQueryData={element:temp,simpleElement:simpleTemp,colorElement:colorTemp,colorSimpleElement:colorSimpleTemp, value:result.value[1],type:(result.metric.type?result.metric.type:'2'),metricTip:metricTip};
this.showTableData.push(edpQueryData);
}
this.showTableDataCopy=JSON.stringify(this.showTableData);
@@ -1301,6 +1328,7 @@
axios.all(axiosArr).then(res =>{
res.forEach((response,promIndex)=>{
if (response.status == 200) {
if(response.data.status == 'success'){
let queryData=response.data.data.result[0];
if(queryData){
let chartData={
@@ -1340,14 +1368,20 @@
});
this.chartDatas.push(chartData);
}
}else{
this.$message.error(response.data.error)
console.error(response.data)
}
}
})
this.$nextTick(()=>{
if(this.graphChart){
this.graphChart.clear();
this.chartOptions.color=this.bgColorList;
this.chartOptions.series=this.chartDatas;
this.graphChart.setOption(this.chartOptions);//创建图表
this.$refs.chartScrollbar.update();
}
});
})
},