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

fix:系统设置页面调整 & overview地图图表数据使用接口数据

Browse Source 
1.系统设置页面校验调整
2.overview  地图图表使用接口数据
3.mib 列表调整
This commit is contained in:
wangwenrui
2020-03-31 20:08:33 +08:00
parent e3809a11dc
commit 203e977b87
7 changed files with 255 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
nezha-fronted/src/components/page/config/system.vue
View File

@@ -25,22 +25,19 @@
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab">
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
<div class="system-config-form">
<el-form :model="basic" label-width="180px" size="small" ref="basicForm" :rules="basicRules">
<el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
<el-input v-model="basic.system_name"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.curUrl')" prop="current_site_url">
<el-input v-model="basic.current_site_url"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.alertApi')" prop="alert_api">
<el-form :model="basic" label-width="180px" size="small" ref="basicForm" :rules="basic.asset_ping_switch == 'on'?basicRules:basicRules2" :validate-on-rule-change="false">
<!-- <el-form-item :label="$t('config.system.basic.curUrl')" prop="current_site_url">-->
<!-- <el-input v-model="basic.current_site_url"></el-input>-->
<!-- </el-form-item>-->
<el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
<el-input v-model="basic.alert_api"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch">
<el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)" :active-value='1' :inactive-value='0'>
<el-switch v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off'>
</el-switch>
</el-form-item>
<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
<el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 0"></el-input><span class="nz-input-append">s</span>
<el-input v-model.number="basic.asset_ping_interval" :disabled="basic.asset_ping_switch == 'off'"></el-input><span class="nz-input-append">s</span>
</el-form-item>
<el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path">
<el-input v-model="basic.node_exporter_target_path"></el-input>
@@ -60,43 +57,46 @@
</el-tab-pane>
<el-tab-pane :label="$t('config.system.email.email')" name="email">
<div class="system-config-form">
<el-form :model="email" label-width="180px" size="small" ref="emailForm" :rules="emailRules">
<el-form :model="email" label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false">
<el-form-item :label="$t('config.system.email.enable')" prop="email_enable">
<el-checkbox v-model="email.email_enable" true-label="on" false-label="off"></el-checkbox>
</el-form-item>
<el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host">
<el-input v-model="email.email_smtp_host"></el-input>
<el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port">
<el-input v-model="email.email_smtp_port"></el-input>
<el-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account">
<el-input v-model="email.email_smtp_account"></el-input>
<el-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.email.smtpPwd')" prop="email_smtp_password">
<el-input v-model="email.email_smtp_password" type="password" :show-password="false"></el-input>
<el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'"></el-input>
<div><span>{{$t('config.system.email.pwdTip')}}</span></div>
</el-form-item>
<el-form-item :label="$t('config.system.email.sendAccount')" prop="email_send_account">
<el-input v-model="email.email_send_account"></el-input>
<el-input v-model="email.email_send_account" :disabled="email.email_enable == 'off'"></el-input>
<div><span>{{$t('config.system.email.sendAccountTip')}}</span></div>
</el-form-item>
<el-form-item :label="$t('config.system.email.testAccount')" prop="email_test_reciver">
<el-input v-model="email.email_test_reciver"></el-input>
<el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'"></el-input>
<div><span>{{$t('config.system.email.testAccountTip')}}</span></div>
</el-form-item>
<el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag">
<el-row :gutter="10">
<el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" :true-label="1" :false-label="0"></el-checkbox></el-col>
<el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
<el-col :span="15"><div><span>{{$t('config.system.email.sslTip')}}</span></div></el-col>
</el-row>
</el-form-item>
<el-form-item :label="$t('config.system.email.useTLS')" prop="email_tls_flag">
<el-row :gutter="10">
<el-col :span="5"><el-checkbox v-model="email.email_tls_flag" :true-label="1" :false-label="0"></el-checkbox></el-col>
<el-col :span="5"><el-checkbox v-model="email.email_tls_flag" true-label='on' false-label='off' :disabled="email.email_enable == 'off'"></el-checkbox></el-col>
<el-col :span="16"><span>{{$t('config.system.email.tlsTip')}}</span></el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('emailForm')" style="top:2px">{{$t('overall.reset')}}</el-button>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('email','emailForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
<el-button type="primary" @click="saveSetInfo('email','emailForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
</el-form-item>
</el-form>
@@ -106,7 +106,7 @@
<div class="system-config-form">
<el-form :model="terminal" label-width="180px" size="small" ref="terminalForm" :rules="terminalRules">
<el-form-item :label="$t('config.system.terminal.terminalNum')" prop="max_terminal_num">
<el-input v-model="terminal.max_terminal_num"></el-input>
<el-input v-model.number="terminal.max_terminal_num"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
@@ -116,7 +116,7 @@
</el-tab-pane>
<el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
<div class="system-config-form">
<el-form :model="ldap" label-width="180px" size="small" ref="ldapForm" :rules="ldapRules">
<el-form :model="ldap" label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false">
<el-form-item :label="$t('config.system.ldap.address')" prop="ldap_address">
<el-input v-model="ldap.ldap_address"></el-input>
</el-form-item>
@@ -136,11 +136,11 @@
<el-input v-model="ldap.ldap_mapping"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
<el-checkbox v-model="ldap.ldap_enable" :true-label="1" :false-label="0"></el-checkbox>
<el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off'></el-checkbox>
</el-form-item>
<el-form-item>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="resetForm('ldapForm')" style="top:2px">{{$t('overall.reset')}}</el-button>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100" @click="testSetInfo('ldap','ldapForm')" style="top:2px">{{$t('config.system.email.testConnection')}}</el-button>
<el-button type="primary" @click="saveSetInfo('ldap','ldapForm')" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">{{$t('overall.submit')}}</el-button>
</el-form-item>
</el-form>
@@ -148,14 +148,14 @@
</el-tab-pane>
<el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
<div class="system-config-form">
<el-form :model="reset" label-width="180px" size="small" ref="resetForm" :rules="resetRules">
<el-form :model="reset" label-width="180px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false">
<el-form-item :label="$t('config.system.reset.type')" prop="type">
<el-select v-model="reset.type" size="small">
<el-option v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-option>
</el-select>
</el-form-item>
<el-form-item :label="$t('config.system.reset.pwd')" prop="password">
<el-input v-model="reset.password" type="password"></el-input>
<!-- <el-select v-model="reset.type" size="small">-->
<!-- <el-option v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-option>-->
<!-- </el-select>-->
<el-checkbox-group v-model="reset.type">
<el-checkbox v-for="(item,index) in resetOptions" :label="item.label" :value="item.value" :key="item.value+index"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100" @click="resetSys()" style="top:2px">{{$t('overall.reset')}}</el-button>
@@ -170,16 +170,18 @@
<script>
import {positiveInteger} from '../../common/js/validate'
import {url} from '../../common/js/validate'
import {port} from '../../common/js/validate'
import {domain} from '../../common/js/validate'
import {host} from '../../common/js/validate'
export default {
name: "system",
data(){
return {
basic:{
alert_api:'',
asset_ping_switch:1,//主机连通性检查开关，1：开启，0：关闭
asset_ping_switch:'on',//主机连通性检查开关，'on'：开启，off：关闭
asset_ping_interval:null,//检查周期，单位：s
node_exporter_target_path:'',
scrape_interval:15,
@@ -188,16 +190,20 @@
current_site_url:'',
},
basicRules:{
system_name:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:host,trigger: 'blur'}],
asset_ping_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
scrape_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
storage_local_retention:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
current_site_url:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:url,trigger:'blur'}],
},
basicRules2:{
node_exporter_target_path:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
alert_api:[{required:true,message:this.$t('validate.required'),trigger:'blur'},,{validator:host,trigger: 'blur'}],
scrape_interval:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
storage_local_retention:[{required:true,message:this.$t('validate.required'),trigger:'blur'},{validator:positiveInteger,trigger:'blur'}],
},
email:{
email_enable: 1,
email_enable: 'on',
email_smtp_host: '',
email_smtp_port: 25,
email_smtp_account: "",
@@ -210,6 +216,7 @@
emailRules:{
email_smtp_host: [
{required:true,message:this.$t('validate.required'),trigger:'blur'},
{validator:domain,trigger: 'blur'}
],
email_smtp_port: [
{required:true,message:this.$t('validate.required'),trigger:'blur'},
@@ -238,16 +245,15 @@
ldap_ou:'',
ldap_user_filter:'',
ldap_mapping:'',
ldap_enable:0,
ldap_enable:'off',
},
ldapRules:{
ldap_address:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
ldap_user_filter:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
ldap_mapping:[{required:true,message:this.$t('validate.required'),trigger:'blur'},],
},
reset:{
type:'',
type:[],
password:'',
},
resetRules:{
@@ -297,6 +303,25 @@
if (valid) {
let param={};
param[type]=this[type];
this.$put('/sysConfig',param).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.resetForm(formName);
setTimeout(()=>{
this.querySetInfo(type);
},200)
}else{
this.$message.error(response.msg);
}
})
}
});
},
testSetInfo:function(type,formName){
this.$refs[formName].validate((valid) => {
if (valid) {
let param={test:true};
param[type]=this[type];
this.$put('/sysConfig',param).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
@@ -312,29 +337,38 @@
});
},
resetSys:function(){
this.$refs['resetForm'].validate(valid=>{
if(valid){
this.$delete('/sysConfig/reset',this.reset).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
}else{
this.$message.error(response.msg);
}
})
}
})
this.$prompt(this.$t('config.system.reset.pwdTip'), this.$t('config.system.reset.promptTitle'), {
confirmButtonText: this.$t('config.system.reset.yes'),
cancelButtonText: this.$t('config.system.reset.no'),
inputType:'password',
}).then(({ value }) => {
this.reset.password=value
this.$refs['resetForm'].validate(valid=>{
if(valid){
this.$delete('/sysConfig/reset',this.reset).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
}else{
this.$message.error(response.msg);
}
})
}
})
}).catch(() => {
});
},
resetForm(formName){
this.$refs[formName].resetFields();
switch (formName) {
case 'basic':
case 'basicForm':
this.basic.scrape_interval=15;
this.basic.storage_local_retention=15*24;
break;
case 'email':
case 'emailForm':
this.email.email_smtp_port=25;
break;
case 'terminal':
case 'terminalForm':
this.terminal.max_terminal_num=10;
break;
}