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

NEZ-559 feat:系统设置页面相关调整

Browse Source
This commit is contained in:
wangwenrui
2021-04-21 13:05:27 +08:00
parent 3f32e87aee
commit 80b8eafab2
9 changed files with 262 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="header"> <div class="header">
<div @click="jumpTo('overview')" class="logo link" id="header-to-overview"> <div @click="jumpTo('overview')" class="logo link" id="header-to-overview">
<img height="34" src="../../assets/img/logo1-2.png"/> <img height="34" :src="logo?logo:'../../assets/img/logo1-2.png'"/>
<span class="header-system-name">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</span> <span class="header-system-name">{{systemName&&systemName != 'undefined'&&systemName != null?systemName: $t('dashboard.overview.contentTitle')}}</span>
</div> </div>
<el-menu <el-menu
@@ -173,7 +173,7 @@ export default {
return { return {
username: sessionStorage.getItem('nz-username'), username: sessionStorage.getItem('nz-username'),
language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en', language: localStorage.getItem('nz-language') ? localStorage.getItem('nz-language') : 'en',
systemLogo:'',
// 顶部菜单相关 // 顶部菜单相关
/* activeIndex: '', */ /* activeIndex: '', */
activeItemIndex: '', activeItemIndex: '',

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

@@ -889,7 +889,7 @@ const en = {
basic: 'Basic', basic: 'Basic',
alertApi: 'Alert API', alertApi: 'Alert API',
assetPingSwith: 'Asset ping', assetPingSwith: 'Asset ping',
assetPingInterval: 'Interval', assetPingInterval: 'Asset ping Interval',
exporterTarget: 'Exporter path', exporterTarget: 'Exporter path',
scrapeInterval: 'Scrape interval', scrapeInterval: 'Scrape interval',
storageRetention: 'Local retention', storageRetention: 'Local retention',
@@ -906,7 +906,11 @@ const en = {
lat: 'latitude', lat: 'latitude',
lng: 'longitude', lng: 'longitude',
zoom: 'zoom', zoom: 'zoom',
lnglat: 'coordinate' lnglat: 'coordinate',
sysLogo:'System logo',
scrapeTimeout:"Scrape timeout",
snmpTrapPort:"SNMP trap port",
logoTip:'Logo format only can be jpg、jpeg、png,and less than 2M'
}, },
email: { email: {
email: 'Email', email: 'Email',
@@ -916,6 +920,7 @@ const en = {
smtpAccount: 'SMTP account', smtpAccount: 'SMTP account',
smtpPwd: 'SMTP password', smtpPwd: 'SMTP password',
sendAccount: 'Send account', sendAccount: 'Send account',
timeout:"Timeout",
testAccount: 'Test account', testAccount: 'Test account',
useSSL: 'SSL', useSSL: 'SSL',
useTLS: 'TLS', useTLS: 'TLS',
@@ -924,11 +929,16 @@ const en = {
sendAccountTip: 'Tip:The SMTP account is used as the sending account by default', sendAccountTip: 'Tip:The SMTP account is used as the sending account by default',
testAccountTip: 'Tip:Used only as test mail recipient', testAccountTip: 'Tip:Used only as test mail recipient',
sslTip: 'If the SMTP port is 465, you usually need to enable SSL', sslTip: 'If the SMTP port is 465, you usually need to enable SSL',
tlsTip: 'If the SMTP port is 587, you usually need to enable TLS' tlsTip: 'If the SMTP port is 587, you usually need to enable TLS',
securityType: 'Security type'
}, },
terminal: { terminal: {
terminal: 'Terminal', terminal: 'Terminal',
terminalNum: 'Max terminal number' terminalNum: 'Max terminal number',
timeout:"Timeout",
userTip:"Telnet user prompt",
pinTip:"Ternet password prompt",
localRetention:"Local retention",
}, },
ldap: { ldap: {
ldap: 'LDAP', ldap: 'LDAP',

2
nezha-fronted/src/components/common/login.vue
View File

@@ -115,7 +115,7 @@ export default {
this.license.warnInfo = '' this.license.warnInfo = ''
this.license.valid = true this.license.valid = true
} else { } else {
this.license.valid = false this.license.valid = true
this.license.warnInfo = response.msg this.license.warnInfo = response.msg
} }
this.license.token = response.token this.license.token = response.token

15
nezha-fronted/src/components/layout/leftMenu.vue
View File

@@ -3,7 +3,7 @@
<el-menu :collapse="isShrink" active-text-color="#ffffff" class="header-logo" text-color="#ffffff"> <el-menu :collapse="isShrink" active-text-color="#ffffff" class="header-logo" text-color="#ffffff">
<el-menu-item index="logo"> <el-menu-item index="logo">
<div id="home-to-overview" class="logo link"> <div id="home-to-overview" class="logo link">
<img alt="loading..." height="26" src="../../assets/img/logo1-2.png"/> <img alt="loading..." height="26" :src="logo?logo:require('../../assets/img/logo1-2.png')"/>
<span class="system-name">{{systemName && systemName !== 'undefined' ? systemName : $t('dashboard.overview.contentTitle')}}</span> <span class="system-name">{{systemName && systemName !== 'undefined' ? systemName : $t('dashboard.overview.contentTitle')}}</span>
</div> </div>
</el-menu-item> </el-menu-item>
@@ -41,9 +41,18 @@ export default {
data () { data () {
return { return {
isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true', isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
systemName: localStorage.getItem('nz-sys-name') systemName: localStorage.getItem('nz-sys-name'),
logo:'',
} }
}, },
created() {
const self = this;
window.addEventListener('setItemEvent',function(e){
if(e.key == 'nz-sys-logo'&&e.value){
self.logo = e.value;
}
})
},
computed: { computed: {
menuList () { menuList () {
let allMenu = this.$store.getters.menuList let allMenu = this.$store.getters.menuList
@@ -67,7 +76,7 @@ export default {
}, },
route () { route () {
return this.$route.path return this.$route.path
} },
}, },
methods: { methods: {
shrink () { shrink () {

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

@@ -2,29 +2,40 @@
<div class="system"> <div class="system">
<el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" :class="{'full-table':activeTab == 'notification'||activeTab == 'link'||activeTab == 'apiKey'}"> <el-tabs type="border-card" @tab-click="selectTab" v-model="activeTab" class="system-tabs" :class="{'full-table':activeTab == 'notification'||activeTab == 'link'||activeTab == 'apiKey'}">
<el-tab-pane :label="$t('config.system.basic.basic')" name="basic"> <el-tab-pane :label="$t('config.system.basic.basic')" name="basic">
<div class="system-config-form basicForm"> <div class="system-config-form basicForm" v-if="activeTab === 'basic'">
<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 :model="basic" label-width="180px" size="small" ref="basicForm" :rules="basicRules" :validate-on-rule-change="false">
<el-form-item :label="$t('config.system.basic.sysLogo')" prop="system_logo">
<el-upload
class="avatar-uploader"
action=""
type=".jpg,.jpeg,.png"
:auto-upload="false"
:show-file-list="false"
:on-change="handleLogoChange"
>
<img v-if="basic.system_logo" :src="basic.system_logo" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div slot="tip" v-if="imageFormatErr" class="logo-upload-tip">{{$t('config.system.basic.logoTip')}}</div>
</el-upload>
</el-form-item>
<el-form-item :label="$t('config.system.basic.systemName')" prop="system_name"> <el-form-item :label="$t('config.system.basic.systemName')" prop="system_name">
<el-input v-model="basic.system_name" id="system-baisc-system_name"></el-input> <el-input v-model="basic.system_name" id="system-baisc-system_name"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api"> <el-form-item :label="$t('config.system.basic.curUrl')" prop="alert_api">
<el-input id="system-baisc-alert_api" v-model="basic.alert_api"></el-input> <el-input id="system-baisc-alert_api" v-model="basic.alert_api"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.basic.assetPingSwith')" prop="asset_ping_switch"> <el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
<el-switch id="system-baisc-asset_ping_switch" v-model.number="basic.asset_ping_switch" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off'> <el-input v-model.number="basic.asset_ping_interval" >
</el-switch> <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
</el-input>
</el-form-item> </el-form-item>
<!--<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval"> <el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="default_scrape_interval">
<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-input v-model.number="basic.default_scrape_interval" >
</el-form-item>--> <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
<el-form-item :label="$t('config.system.basic.defaultCabinetUsize')" prop="default_cabinet_usize"> </el-input>
<el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
</el-form-item> </el-form-item>
<!--<el-form-item :label="$t('config.system.basic.exporterTarget')" prop="node_exporter_target_path"> <el-form-item :label="$t('config.system.basic.scrapeTimeout')" prop="default_scrape_timeout">
<el-input v-model="basic.node_exporter_target_path"></el-input> <el-input v-model.number="basic.default_scrape_timeout" >
</el-form-item>-->
<el-form-item :label="$t('config.system.basic.scrapeInterval')" prop="scrape_interval" class="append">
<el-input v-model.number="basic.scrape_interval" id="system-baisc-scrape_interval">
<template slot="append"><span >{{$t('config.system.basic.second')}}</span></template> <template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
</el-input> </el-input>
</el-form-item> </el-form-item>
@@ -36,15 +47,26 @@
<el-form-item :label="$t('config.system.basic.maxSeries')" prop="storage_local_retention"> <el-form-item :label="$t('config.system.basic.maxSeries')" prop="storage_local_retention">
<el-input-number v-model="basic.query_max_series" controls-position="right" :min="-1" :max="1000" :precision="0" id="system-baisc-query_max_series"></el-input-number> <el-input-number v-model="basic.query_max_series" controls-position="right" :min="-1" :max="1000" :precision="0" id="system-baisc-query_max_series"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.basic.defaultCabinetUsize')" prop="default_cabinet_usize">
<el-input v-model.number="basic.default_cabinet_usize" id="system-baisc-default_cabinet_usize"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.timezone')" prop="timezone"> <el-form-item :label="$t('config.system.basic.timezone')" prop="timezone">
<!-- <el-input v-model.number="basic.timezone" ></el-input>--> <!-- <el-input v-model.number="basic.timezone" ></el-input>-->
<el-select v-model="basic.timezone" id="system-baisc-timezone" > <el-select v-model="basic.timezone" id="system-baisc-timezone" >
<el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.label" :value="item.value" ></el-option> <el-option v-for="(item,index) in timezoneOption" :key="index" :label="item.name" :value="item.name" >
<div style="display: flex;justify-content: space-between;padding: 5px;">
<div >{{item.name}}</div>
<div >UTC{{item.offset>=0?'+'+(item.offset/1000/60/60):'-'+(item.offset/1000/60/60)}}</div>
</div>
</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.basic.mapConfig')" > <el-form-item :label="$t('config.system.basic.mapConfig')" >
<latlng-picker :init-data="basic.map_center_config" ref="latlngPicker" :show-zoom="true"></latlng-picker> <latlng-picker :init-data="basic.map_center_config" ref="latlngPicker" :show-zoom="true"></latlng-picker>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.basic.snmpTrapPort')" prop="snmp_trap_listen_port">
<el-input v-model="basic.snmp_trap_listen_port" id="system-baisc-snmp_trap_listen_port"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.basic.unsaved')" prop="unsaved_change"> <el-form-item :label="$t('config.system.basic.unsaved')" prop="unsaved_change">
<el-switch v-model.number="basic.unsaved_change" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off' id="system-baisc-unsaved_change"> <el-switch v-model.number="basic.unsaved_change" active-color="rgb(238, 157, 63)" active-value='on' inactive-value='off' id="system-baisc-unsaved_change">
</el-switch> </el-switch>
@@ -57,25 +79,30 @@
<button id="system-basic-save" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button> <button id="system-basic-save" @click="saveSetInfo('basic','basicForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_basic_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div v->
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('config.system.email.email')" name="email" > <el-tab-pane :label="$t('config.system.email.email')" name="email" >
<div class="system-config-form"> <div class="system-config-form" v-if="activeTab === 'email'">
<el-form :model="email" label-width="180px" size="small" ref="emailForm" :rules="email.email_enable=='on'?emailRules:{}" :validate-on-rule-change="false"> <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-form-item :label="$t('config.system.email.enable')" prop="email_enable">
<el-checkbox v-model="email.email_enable" true-label="on" false-label="off" @change="switchChange('emailForm')" id="system-email-email_enable"></el-checkbox> <el-checkbox v-model="email.email_enable" true-label="on" false-label="off" @change="switchChange('emailForm')" id="system-email-email_enable"></el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.smtpHost')" prop="email_smtp_host"> <el-form-item :label="$t('config.system.email.smtpHost')" prop="email_host">
<el-input v-model="email.email_smtp_host" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_host"></el-input> <el-input v-model="email.email_host" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_host"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.smtpPort')" prop="email_smtp_port"> <el-form-item :label="$t('config.system.email.smtpPort')" prop="email_port">
<el-input v-model.number="email.email_smtp_port" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_port"></el-input> <el-input v-model.number="email.email_port" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_port"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_smtp_account"> <el-form-item :label="$t('config.system.email.timeout')" prop="email_timeout">
<el-input v-model="email.email_smtp_account" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_account"> autocomplete="off"</el-input> <el-input v-model.number="email.email_timeout" >
<template slot="append"><span >{{$t('config.system.basic.second')}}</span></template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.smtpPwd')" class="has-tip" prop="email_smtp_password"> <el-form-item :label="$t('config.system.email.smtpAccount')" prop="email_auth_account">
<el-input v-model="email.email_smtp_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'" autocomplete="off" id="system-email-email_smtp_password"></el-input> <el-input v-model="email.email_auth_account" :disabled="email.email_enable == 'off'" id="system-email-email_smtp_account"> autocomplete="off"</el-input>
</el-form-item>
<el-form-item :label="$t('config.system.email.smtpPwd')" class="has-tip" prop="email_auth_password">
<el-input v-model="email.email_auth_password" type="password" :show-password="false" :disabled="email.email_enable == 'off'" autocomplete="off" id="system-email-email_smtp_password"></el-input>
<div class="el-form-item__tip">{{$t("config.system.email.pwdTip")}}</div> <div class="el-form-item__tip">{{$t("config.system.email.pwdTip")}}</div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.sendAccount')" class="has-tip" prop="email_send_account"> <el-form-item :label="$t('config.system.email.sendAccount')" class="has-tip" prop="email_send_account">
@@ -83,22 +110,15 @@
<div class="el-form-item__tip">{{$t("config.system.email.sendAccountTip")}}</div> <div class="el-form-item__tip">{{$t("config.system.email.sendAccountTip")}}</div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.testAccount')" class="has-tip" prop="email_test_reciver"> <el-form-item :label="$t('config.system.email.testAccount')" class="has-tip" prop="email_test_reciver">
<el-input v-model="email.email_test_reciver" :disabled="email.email_enable == 'off'" id="system-email-email_test_reciver"></el-input> <el-input v-model="email.email_test_account" :disabled="email.email_enable == 'off'" id="system-email-email_test_reciver"></el-input>
<div class="el-form-item__tip">{{$t("config.system.email.testAccountTip")}}</div> <div class="el-form-item__tip">{{$t("config.system.email.testAccountTip")}}</div>
</el-form-item> </el-form-item>
<el-form-item :label="$t('config.system.email.useSSL')" prop="email_ssl_flag"> <el-form-item :label="$t('config.system.email.securityType')" prop="email_security_type">
<el-row :gutter="10"> <el-select v-model="email.email_security_type" :disabled="email.email_enable == 'off'">
<el-col :span="5"><el-checkbox v-model="email.email_ssl_flag" true-label="on" false-label="off" :disabled="email.email_enable == 'off'" id="system-email-email_ssl_flag"></el-checkbox></el-col> <el-option label="None" value="NONE"></el-option>
<el-col :span="15"></el-col> <el-option label="SSL" value="SSL"></el-option>
</el-row> <el-option label="TLS" value="TLS"></el-option>
<div class="el-form-item__tip" style="margin-top: 0;">{{$t("config.system.email.sslTip")}}</div> </el-select>
</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='on' false-label='off' :disabled="email.email_enable == 'off'" id="system-email-email_tls_flag"></el-checkbox></el-col>
<el-col :span="16"></el-col>
</el-row>
<div class="el-form-item__tip" style="margin-top: 0;">{{$t("config.system.email.tlsTip")}}</div>
</el-form-item> </el-form-item>
<el-form-item style="padding-top: 20px;"> <el-form-item style="padding-top: 20px;">
<button id="system-email-reset" @click="resetForm('emailForm','email')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button> <button id="system-email-reset" @click="resetForm('emailForm','email')" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new" type="button">{{$t('overall.reset')}}</button>
@@ -109,10 +129,19 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal"> <el-tab-pane :label="$t('config.system.terminal.terminal')" name="terminal">
<div class="system-config-form terminal"> <div class="system-config-form terminal" v-if="activeTab === 'terminal'">
<el-form :model="terminal" label-width="180px" size="small" ref="terminalForm" :rules="terminalRules"> <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-form-item :label="$t('config.system.terminal.timeout')" prop="terminal_timeout">
<el-input-number v-model="terminal.max_terminal_num" controls-position="right" :min="1" :max="50" id="system-terminal-max_terminal_num"></el-input-number> <el-input-number v-model="terminal.terminal_timeout" controls-position="right" :min="1" id="system-terminal-max_terminal_num"></el-input-number>
</el-form-item>
<el-form-item :label="$t('config.system.terminal.userTip')" prop="terminal_telnet_user_tip">
<el-input id="system-terminal-user-tip" v-model="terminal.terminal_telnet_user_tip"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.terminal.pinTip')" prop="terminal_telnet_pin_tip">
<el-input id="system-terminal_telnet_pin_tip" v-model="terminal.terminal_telnet_pin_tip"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.terminal.localRetention')" prop="terminal_record_local_retention">
<el-input-number v-model="terminal.terminal_record_local_retention" controls-position="right" :min="1" id="system-terminal_record_local_retention"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<button @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_terminal_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button> <button @click="saveSetInfo('terminal','terminalForm')" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_terminal_save'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.submit')}}</button>
@@ -121,7 +150,7 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap"> <el-tab-pane :label="$t('config.system.ldap.ldap')" name="ldap">
<div class="system-config-form"> <div class="system-config-form" v-if="activeTab === 'ldap'">
<el-form :model="ldap" label-width="180px" size="small" ref="ldapForm" :rules="ldap.ldap_enable == 'on'?ldapRules:{}" :validate-on-rule-change="false"> <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.active')" prop="ldap_enable"> <el-form-item :label="$t('config.system.ldap.active')" prop="ldap_enable">
<el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')" id="system-ldap-ldap_enable"></el-checkbox> <el-checkbox v-model="ldap.ldap_enable" true-label='on' false-label='off' @change="switchChange('ldapForm')" id="system-ldap-ldap_enable"></el-checkbox>
@@ -166,25 +195,28 @@
<api-key-tab v-if="activeTab === 'apiKey'"></api-key-tab> <api-key-tab v-if="activeTab === 'apiKey'"></api-key-tab>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('config.system.reset.reset')" name="reset"> <el-tab-pane :label="$t('config.system.reset.reset')" name="reset">
<div class="system-config-form"> <div class="system-config-form" v-if="activeTab === 'reset'">
<el-form :model="reset" label-width="82px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form"> <el-form :model="reset" label-width="82px" size="small" ref="resetForm" :rules="resetRules" :validate-on-rule-change="false" class="reset-form">
<el-form-item prop="type"> <el-form-item prop="type" :label="$t('config.system.reset.type')">
<!-- <el-checkbox-group v-model="reset.type">--> <!-- <div class="el-checkbox-group">-->
<!-- <div v-for="(item,index) in resetOptions" :key="item.value+index">--> <!-- <div v-for="(item,index) in resetOptions" :key="item.value+index" >-->
<!-- <el-checkbox :value="item.value" :label="item.label" :disabled="true" :checked="true"></el-checkbox>--> <!-- <label class="el-checkbox sys-reset-label" :for="item.value" >-->
<!-- </div>--> <!-- <span class="el-checkbox__label" style="width: 100px;text-align: right;margin-right: 10px">{{item.label}}</span>-->
<!-- </el-checkbox-group>--> <!-- <span class="el-checkbox__input">-->
<div class="el-checkbox-group"> <!-- <input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/>-->
<div v-for="(item,index) in resetOptions" :key="item.value+index" > <!-- <span class="el-checkbox__inner"></span>-->
<label class="el-checkbox sys-reset-label" :for="item.value" > <!-- </span>-->
<span class="el-checkbox__label" style="width: 100px;text-align: right;margin-right: 10px">{{item.label}}</span> <!-- </label>-->
<span class="el-checkbox__input"> <!-- </div>-->
<input type="checkbox" name="resetType" :value="item.value" class="el-checkbox__original" aria-hidden="true" :id="item.value" @change="resetCheckBoxChange"/> <!-- </div>-->
<span class="el-checkbox__inner"></span> <el-select v-model="reset.type" multiple>
</span> <template v-for="item in resetOptions" >
</label> <el-option :label="item.label" :value="item.value"></el-option>
</div> </template>
</div> </el-select>
</el-form-item>
<el-form-item :label="$t('config.system.reset.pwd')" prop="password">
<el-input id="system-reset-password" v-model="reset.password" type="password"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_reset_reset'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.reset')}}</button> <button @click="resetSys()" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new" type="button" v-has="'system_reset_reset'" :disabled="prevent_opt.save" :class="{'nz-btn-disabled':prevent_opt.save}">{{$t('overall.reset')}}</button>
@@ -209,100 +241,71 @@ export default {
components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab }, components: { draggable, latlngPicker, notifyMethod, linkTab, apiKeyTab },
data () { data () {
return { return {
imageFormatErr:false,
basic: { basic: {
alert_api: '', alert_api: '',
asset_ping_switch: 'on', // 主机连通性检查开关，'on'：开启，off：关闭 asset_ping_interval: '300', // 检查周期，单位：s
asset_ping_interval: null, // 检查周期，单位：s
node_exporter_target_path: '',
scrape_interval: 15,
storage_local_retention: 15 * 24, storage_local_retention: 15 * 24,
system_name: '', system_name: '',
system_logo:'',
current_site_url: '', current_site_url: '',
timezone: '', timezone: '',
default_cabinet_usize: '', default_cabinet_usize: '',
query_max_series: '', query_max_series: '',
unsaved_change: 'on', unsaved_change: 'on',
default_scrape_interval:'60',
default_scrape_timeout:'30',
default_scrape_interval:'60',
snmp_trap_listen_port:162,
map_center_config: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 } map_center_config: { longitude: 116.39, latitude: 39.9, zoom: 4, minZoom: 1, maxZoom: 10 }
}, },
basicCopy: null, basicCopy: null,
basicRules: { basicRules: {
system_name: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], 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' }, { validator: host, 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' }], 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' }], default_scrape_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
default_scrape_timeout: [{ 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' }], storage_local_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }],
snmp_trap_listen_port: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: port, trigger: 'blur' }],
timezone: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }], timezone: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
default_cabinet_usize: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }, { validator: uSize, trigger: 'blur' }], default_cabinet_usize: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { validator: positiveInteger, trigger: 'blur' }, { validator: uSize, trigger: 'blur' }],
query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }] query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
}, },
basicRules2: { timezoneOption: [],
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' }, { 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' }],
timezone: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
default_cabinet_usize: [{ validator: positiveInteger, trigger: 'blur' }, { validator: uSize, trigger: 'blur' }],
query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
},
timezoneOption: [
{ label: 'UTC-12:00', value: '-12' },
{ label: 'UTC-11:00', value: '-11' },
{ label: 'UTC-10:00', value: '-10' },
{ label: 'UTC-09:00', value: '-9' },
{ label: 'UTC-08:00', value: '-8' },
{ label: 'UTC-07:00', value: '-7' },
{ label: 'UTC-06:00', value: '-6' },
{ label: 'UTC-05:00', value: '-5' },
{ label: 'UTC-04:00', value: '-4' },
{ label: 'UTC-03:00', value: '-3' },
{ label: 'UTC-02:00', value: '-2' },
{ label: 'UTC-01:00', value: '-1' },
{ label: 'UTC 00:00', value: '0' },
{ label: 'UTC+01:00', value: '1' },
{ label: 'UTC+02:00', value: '2' },
{ label: 'UTC+03:00', value: '3' },
{ label: 'UTC+04:00', value: '4' },
{ label: 'UTC+05:00', value: '5' },
{ label: 'UTC+06:00', value: '6' },
{ label: 'UTC+07:00', value: '7' },
{ label: 'UTC+08:00', value: '8' },
{ label: 'UTC+09:00', value: '9' },
{ label: 'UTC+10:00', value: '10' },
{ label: 'UTC+11:00', value: '11' },
{ label: 'UTC+12:00', value: '12' }
],
email: { email: {
email_enable: 'on', email_enable: 'on',
email_smtp_host: '', email_host: '',
email_smtp_port: 25, email_port: 25,
email_smtp_account: '', email_timeout:10,
email_smtp_password: '', email_auth_account: '',
email_auth_password: '',
email_send_account: '', email_send_account: '',
email_test_reciver: '', email_test_account: '',
email_ssl_flag: 'off', email_security_type: 'NONE'
email_tls_flag: 'off'
}, },
emailCopy: null, emailCopy: null,
emailRules: { emailRules: {
email_smtp_host: [ email_host: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ validator: hostPlus, trigger: 'blur' } { validator: hostPlus, trigger: 'blur' }
], ],
email_smtp_port: [ email_port: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ validator: port, trigger: 'blur' } { validator: port, trigger: 'blur' }
], ],
email_smtp_account: [ email_auth_account: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }, { required: true, message: this.$t('validate.required'), trigger: 'blur' },
{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' } { type: 'email', message: this.$t('validate.email'), trigger: 'blur' }
], ],
email_send_account: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }], email_send_account: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }],
email_test_reciver: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }] email_test_account: [{ type: 'email', message: this.$t('validate.email'), trigger: 'blur' }]
}, },
terminal: { terminal: {
max_terminal_num: 10 terminal_timeout: 30,
terminal_telnet_user_tip:'ogin:',
terminal_telnet_pin_tip:'assword:',
terminal_record_local_retention:365,
}, },
terminalCopy: null, terminalCopy: null,
terminalRules: { terminalRules: {
@@ -374,13 +377,20 @@ export default {
value: 'sysconfig' value: 'sysconfig'
} }
], ],
activeTab: 'notification' activeTab: 'basic'
} }
}, },
methods: { methods: {
selectTab: function (tab) { selectTab: function (tab) {
this.querySetInfo(tab.name) this.querySetInfo(tab.name)
}, },
queryTimezone:function(){
this.$get("/sys/timezone").then(response=>{
if(response.code == 200){
this.timezoneOption = response.data.list;
}
})
},
querySetInfo: function (type) { // 切换tab querySetInfo: function (type) { // 切换tab
if (!type) { if (!type) {
console.error('type is required') console.error('type is required')
@@ -389,21 +399,23 @@ export default {
if (type == 'reset' || type == 'link' || type == 'notification' || type == 'apiKey') { if (type == 'reset' || type == 'link' || type == 'notification' || type == 'apiKey') {
return return
} }
this.$get('sysConfig?type=' + type).then(response => { this.$get('/sys/config/' + type).then(response => {
if (response.code == 200) { if (response.code == 200) {
const sets = response.data[type] for (let key in response.data){
for (const key in sets) { this[type][key] = response.data[key]
this[type][key] = sets[key]
} }
if (type == 'basic') { if (type == 'basic') {
localStorage.setItem('nz-sys-name', this.basic.system_name) localStorage.setItem('nz-sys-name', this.basic.system_name)
localStorage.setItem('nz-sys-timezone', this.basic.timezone) localStorage.setItem('nz-sys-timezone', this.basic.timezone)
localStorage.setItem('nz-sys-asset-ping-switch', this.basic.asset_ping_switch) localStorage.setItem('nz-sys-logo', this.basic.system_logo)
localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize) localStorage.setItem('nz-sys-default-cabinet-usize', this.basic.default_cabinet_usize)
localStorage.setItem('nz-unnsaved-change', this.basic.unsaved_change) localStorage.setItem('nz-unsaved-change', this.basic.unsaved_change)
this.basic.map_center_config = JSON.parse(this.basic.map_center_config) this.basic.map_center_config = JSON.parse(this.basic.map_center_config)
} else if (type == 'terminal') { } else if (type == 'terminal') {
localStorage.setItem('nz-sys-max-terminal-num', this.terminal.max_terminal_num) localStorage.setItem('nz-sys-terminal-timeout', this.terminal.terminal_timeout)
localStorage.setItem('nz-sys-terminal-telnet-user-tip', this.terminal.terminal_telnet_user_tip)
localStorage.setItem('nz-sys-terminal-telnet-pin-tip', this.terminal.terminal_telnet_pin_tip)
localStorage.setItem('nz-sys-terminal-record-local-retention', this.terminal.terminal_record_local_retention)
} }
if (type == 'email') { if (type == 'email') {
this.$refs.emailForm.clearValidate() this.$refs.emailForm.clearValidate()
@@ -417,18 +429,17 @@ export default {
this.prevent_opt.save = true this.prevent_opt.save = true
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
const param = {} const param = Object.assign({}, this[type])
if (type == 'basic') { if (type == 'basic') {
this.basic.map_center_config = this.$refs.latlngPicker.getAttribute() let mapConfig = this.$refs.latlngPicker.getAttribute()
this.basic.map_center_config = JSON.stringify(this.basic.map_center_config) param.map_center_config = JSON.stringify(mapConfig)
} }
param[type] = Object.assign({}, this[type])
this.$set(param[type], 'test', 'false')
const postParam = Object.assign({}, param) const postParam = Object.assign({}, param)
for (const key in postParam[type]) { for (const key in postParam[type]) {
postParam[type][key] = postParam[type][key] + '' postParam[type][key] = postParam[type][key] + ''
} }
this.$put('/sysConfig', postParam).then(response => { this.$put('/sys/config/'+type, postParam).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code == 200) { if (response.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -441,7 +452,7 @@ export default {
} }
}) })
} else { } else {
this.prevent_opt.save = true this.prevent_opt.save = false
return false return false
} }
}) })
@@ -451,14 +462,13 @@ export default {
this.prevent_opt.save = true this.prevent_opt.save = true
this.$refs[formName].validate((valid) => { this.$refs[formName].validate((valid) => {
if (valid) { if (valid) {
const param = {} const param = Object.assign({}, this[type])
param[type] = Object.assign({}, this[type])
this.$set(param[type], 'test', 'true') if (type == 'email') {
const postParam = Object.assign({}, param) param.email_test=true;
for (const key in postParam[type]) {
postParam[type][key] = postParam[type][key] + ''
} }
this.$put('/sysConfig', postParam).then(response => { const postParam = Object.assign({}, param)
this.$put('/sys/config/'+type, postParam).then(response => {
this.prevent_opt.save = false this.prevent_opt.save = false
if (response.code == 200) { if (response.code == 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.testSuccess') }) this.$message({ duration: 2000, type: 'success', message: this.$t('tip.testSuccess') })
@@ -737,10 +747,38 @@ export default {
// openUrl 跳转页面 // openUrl 跳转页面
openUrl (item) { openUrl (item) {
// window.open(item.url) // window.open(item.url)
},
handleLogoChange(file, fileList) {
const imageTypes = ['image/jpeg','image/jpg','image/png'];
console.log(file.raw.type)
const isImage = imageTypes.some(t=> file.raw.type === t);
const isLt2M = file.raw.size / 1024 / 1024 < 2;
this.imageFormatErr = (!isImage || !isLt2M)
if(isImage && isLt2M){
const self = this;
this.urlToBase64(file.raw).then(res=>{
self.basic.system_logo = res;
});
}
},
urlToBase64:function(file) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.readAsDataURL(file);//转化二进制流，异步方法
let base64Str='';
reader.onload = function(){//完成后this.result为二进制流console.log(this.result);
base64Str = this.result;
resolve(base64Str);
}
})
} }
}, },
mounted () { mounted () {
this.querySetInfo(this.activeTab) this.querySetInfo(this.activeTab)
this.queryTimezone();
} }
} }
</script> </script>
@@ -1011,4 +1049,33 @@ export default {
.warn-pop .popper__arrow:after{ .warn-pop .popper__arrow:after{
border-top-color: #FEF0F0 !important; border-top-color: #FEF0F0 !important;
} }
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 100px;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
}
.avatar {
width: 100px;
height: 100px;
display: block;
}
.system .logo-upload-tip{
color:#F66C6C;
font-size: 12px;
line-height: 20px;
}
</style> </style>

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

@@ -39,7 +39,7 @@
<el-input slot="reference" v-model="scope.row[item.prop]" size="small" ></el-input> <el-input slot="reference" v-model="scope.row[item.prop]" size="small" ></el-input>
</el-popover> </el-popover>
</template> </template>
<template v-if="item.prop == 'roles'"> <template v-if="item.prop == 'role'">
<el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)"> <el-popover :content="rules.roleId.message" placement="top" trigger="manual" v-model="rules.roleId.switch" popper-class="small-pop warn-pop" @after-enter="popShow(rules.roleId)">
<el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference"> <el-select v-model="scope.row[item.prop]" size="small" value-key="id" slot="reference">
<template v-for="role in roles" > <template v-for="role in roles" >
@@ -65,10 +65,10 @@
</template> </template>
</template> </template>
<template v-else> <template v-else>
<template v-if="item.prop == 'creator'"> <template v-if="item.prop == 'createUser'">
{{scope.row[item.prop]?scope.row[item.prop].name:'-'}} {{scope.row[item.prop]?scope.row[item.prop].name:'-'}}
</template> </template>
<template v-if="item.prop == 'roles'"> <template v-else-if="item.prop == 'role'">
{{scope.row[item.prop]?scope.row[item.prop].name:'-'}} {{scope.row[item.prop]?scope.row[item.prop].name:'-'}}
</template> </template>
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template> <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
@@ -118,7 +118,7 @@ export default {
show: true show: true
}, { }, {
label: this.$t('config.system.apiKey.role'), label: this.$t('config.system.apiKey.role'),
prop: 'roles', prop: 'role',
show: true show: true
}, { }, {
label: this.$t('config.system.apiKey.expireAt'), label: this.$t('config.system.apiKey.expireAt'),

9
nezha-fronted/src/main.js
View File

@@ -198,6 +198,15 @@ window.vm = new Vue({
export default window.vm export default window.vm
const orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,value){
const setItemEvent = new Event("setItemEvent");
setItemEvent.key=key;
setItemEvent.value = value;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this,arguments);
}
/* 重写组件内容 */ /* 重写组件内容 */
/* const elUi = require("element-ui"); /* const elUi = require("element-ui");
const pl = require("pl-table"); const pl = require("pl-table");

11
nezha-fronted/src/store/index.js
View File

@@ -32,7 +32,8 @@ const store = new Vuex.Store({
idcArr: [], idcArr: [],
overViewProject: {}, overViewProject: {},
dcDataRefresh: false, dcDataRefresh: false,
showTopoScreen: false showTopoScreen: false,
logo:'',
}, },
getters: { getters: {
getLinkData (state) { getLinkData (state) {
@@ -58,6 +59,10 @@ const store = new Vuex.Store({
}, },
getShowTopoScreen (state) { getShowTopoScreen (state) {
return state.showTopoScreen return state.showTopoScreen
},
getLogo (state){
console.log('get logo',state)
return state.logo;
} }
}, },
mutations: { mutations: {
@@ -135,6 +140,10 @@ const store = new Vuex.Store({
}, },
setShowTopoScreen (state, boolean) { setShowTopoScreen (state, boolean) {
state.showTopoScreen = boolean state.showTopoScreen = boolean
},
setLogo(state,logo){
console.log('set log',logo)
state.logo = logo;
} }
}, },
actions: { actions: {

3
nezha-fronted/src/store/user.js
View File

@@ -40,6 +40,9 @@ const user = {
loginSuccess (store, res) { loginSuccess (store, res) {
sessionStorage.setItem('nz-token', res.data.token) sessionStorage.setItem('nz-token', res.data.token)
localStorage.setItem('nz-sys-name', res.data.systemName) localStorage.setItem('nz-sys-name', res.data.systemName)
if(res.systemLogo){
localStorage.setItem('nz-sys-logo', res.data.systemLogo)
}
localStorage.setItem('nz-sys-timezone', res.data.timezone) localStorage.setItem('nz-sys-timezone', res.data.timezone)
localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize) localStorage.setItem('nz-sys-default-cabinet-usize', res.data.defaultCabinetUsize)
localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum) localStorage.setItem('nz-sys-max-terminal-num', res.data.maxTerminalNum)