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

NEZ-3486 fix: Collectors配置侧滑调整

Browse Source
This commit is contained in:
zyh
2024-06-05 14:01:25 +08:00
parent 0a707112df
commit 455210a61e
4 changed files with 133 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/css/components/page/config/agent.scss
View File

@@ -48,7 +48,7 @@
display: flex;
flex-direction: column;
background-color: $--background-color-empty;
.system-title {
&>.system-title {
font-family: Roboto-Medium;
font-size: 14px;
color: $--license-left-title-color;

2
nezha-fronted/src/assets/css/components/page/config/system.scss
View File

@@ -46,7 +46,7 @@
}
}
}
.system-config-form.basicForm {
.system-config-form.basicForm, .right-box-APMSettings{
.vue-tags-input {
max-width: unset !important;
}

131
nezha-fronted/src/components/common/rightBox/configurationBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-clickoutside="{obj: editBox, func: esc}" class="right-box">
<div v-clickoutside="{obj: editBox, func: esc}" class="right-box right-box-APMSettings">
<div class="right-box__header">
<div class="header__title">{{$t('config.edit_APM_settings')}}</div>
<div class="header__operation">
@@ -9,30 +9,121 @@
<div class="right-box__container">
<div class="container__form">
<el-form ref="form" :model="editBox" :rules="rules" label-position="top" label-width="120px">
<!-- asset_ping_interval -->
<el-form-item :label="$t('overall.name')" prop="asset_ping_interval">
<el-input v-model.number="editBox.asset_ping_interval" size="small">
<template slot="append"><span>{{$t('alert.config.second')}}</span></template>
</el-input>
<!-- prometheus_federation_enabled -->
<el-form-item :label="$t('setup.system.federation')" prop="prometheus_federation_enabled">
<el-checkbox v-model="editBox.prometheus_federation_enabled" true-label="1" false-label="0"></el-checkbox>
</el-form-item>
<!-- default_scrape_interval -->
<el-form-item :label="$t('config.default_scrape_interval')" prop="default_scrape_interval">
<el-form-item :label="$t('project.endpoint.scrape_interval')" prop="default_scrape_interval">
<el-input v-model.number="editBox.default_scrape_interval" size="small">
<template slot="append"><span>{{$t('alert.config.second')}}</span></template>
</el-input>
</el-form-item>
<!-- default_scrape_timeout -->
<el-form-item :label="$t('config.system.basic.scrapeTimeout')" prop="default_scrape_timeout">
<el-input v-model.number="editBox.default_scrape_timeout" size="small">
<template slot="append"><span >{{$t('alert.config.second')}}</span></template>
</el-input>
</el-form-item>
<!-- asset_ping_interval -->
<el-form-item :label="$t('config.system.basic.assetPingInterval')" prop="asset_ping_interval">
<el-input v-model.number="editBox.asset_ping_interval" size="small">
<template slot="append"><span>{{$t('alert.config.second')}}</span></template>
</el-input>
</el-form-item>
<!-- asset_ping_from -->
<el-form-item :label="$t('config.system.monitor.asset_ping_from')" prop="asset_ping_from">
<el-select v-model="editBox.asset_ping_from" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top" size="small">
<el-option label="Global" value="1"></el-option>
<el-option label="Per-datacenter" value="2"></el-option>
</el-select>
</el-form-item>
<!-- interface_name -->
<el-form-item :label="$t('config.system.monitor.interface_name')" prop="interface_name">
<vue-tags-input
v-model="tag"
:class="editBox.interface_name.length !== 0 ? 'interface-name' : ''"
:placeholder="$t('tagsInput.placeholder')"
:tags="editBox.interface_name"
@tags-changed="newTags=> editBox.interface_name = newTags"
/>
</el-form-item>
<!-- metrics -->
<div class="form__sub-title" >
<span>{{$t('config.system.monitor.metricsTitle')}}</span>
</div>
<!-- metrics_storage_retention -->
<el-form-item :label="$t('config.metric_retention_days')" prop="metrics_storage_retention">
<el-input v-model.number="editBox.metrics_storage_retention" size="small">
<template slot="append"><span>{{$t('config.system.basic.day')}}</span></template>
</el-input>
</el-form-item>
<!-- metrics_storage_type -->
<el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="metrics_storage_type">
<el-select v-model="editBox.metrics_storage_type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top" size="small">
<el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
<el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
</el-select>
</el-form-item>
<transition name="el-zoom-in-top">
<div v-show="editBox.metrics_storage_type == 2">
<el-form-item :label="$t('asset.endpoint')" prop="metrics_storage_s3_endpoint" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.metrics_storage_s3_endpoint" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.monitor.metrics_storage_s3_bucket')" prop="metrics_storage_s3_bucket" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.metrics_storage_s3_bucket" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.monitor.metrics_storage_s3_access_key')" prop="metrics_storage_s3_access_key" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.metrics_storage_s3_access_key" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.terminallog.key')" prop="metrics_storage_s3_secret_access_key" :rules=" [ { required: editBox.metrics_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.metrics_storage_s3_secret_access_key" type="password" auto-complete="new-password" size="small"></el-input>
</el-form-item>
</div>
</transition>
<!-- metrics_query_max_series -->
<el-form-item :label="$t('config.system.basic.maxSeries')" prop="metrics_query_max_series">
<el-input-number v-model="editBox.metrics_query_max_series" controls-position="right" :min="-1" :max="1000" :precision="0" size="small" style="width: 100%"></el-input-number>
</el-form-item>
<!-- logs -->
<div class="form__sub-title" >
<span>{{$t('config.system.monitor.logsTitle')}}</span>
</div>
<!-- logs_storage_retention -->
<el-form-item :label="$t('config.log_retention_days')" prop="logs_storage_retention">
<el-input v-model.number="editBox.logs_storage_retention" size="small">
<template slot="append"><span>{{$t('config.system.basic.day')}}</span></template>
</el-input>
</el-form-item>
<!-- logs_storage_type -->
<el-form-item :label="$t('config.system.monitor.metrics_storage_type')" prop="logs_storage_type">
<el-select v-model="editBox.logs_storage_type" class="right-box__select" popper-class="right-box-select-top right-public-box-dropdown-top" size="small">
<el-option :label="$t('config.system.monitor.local')" value="1"></el-option>
<el-option :label="$t('config.system.monitor.s3')" value="2"></el-option>
</el-select>
</el-form-item>
<transition name="el-zoom-in-top">
<div v-show="editBox.logs_storage_type == 2">
<el-form-item :label="$t('asset.endpoint')" prop="logs_storage_s3_endpoint" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.logs_storage_s3_endpoint" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.monitor.metrics_storage_s3_bucket')" prop="logs_storage_s3_bucket" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.logs_storage_s3_bucket" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.system.monitor.metrics_storage_s3_access_key')" prop="logs_storage_s3_access_key" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.logs_storage_s3_access_key" size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.terminallog.key')" prop="logs_storage_s3_secret_access_key" :rules=" [ { required: editBox.logs_storage_type == 2, message: this.$t('validate.required'), trigger: 'blur' }]">
<el-input v-model="editBox.logs_storage_s3_secret_access_key" type="password" auto-complete="new-password" size="small"></el-input>
</el-form-item>
</div>
</transition>
<!-- logs_query_range_default_limit -->
<el-form-item :label="$t('config.system.monitor.logs_query_range_default_limit')" prop="logs_query_range_default_limit">
<el-input-number v-model="editBox.logs_query_range_default_limit" controls-position="right" :min="-1" :max="1000" :precision="0" size="small" style="width: 100%"></el-input-number>
</el-form-item>
</el-form>
</div>
</div>
@@ -49,6 +140,7 @@
<script>
import editRigthBox from '../mixin/editRigthBox'
import VueTagsInput from '@johmun/vue-tags-input'
export default {
name: 'configurationBox',
props: {
@@ -57,21 +149,28 @@ export default {
}
},
mixins: [editRigthBox],
components: {
VueTagsInput
},
data () {
return {
url: '/sys/config/monitor',
editBox: {
asset_ping_interval: '',
default_scrape_interval: '',
metrics_storage_retention: '',
logs_storage_retention: ''
},
rules: {
asset_ping_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
prometheus_federation_enabled: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
default_scrape_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
default_scrape_timeout: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
asset_ping_interval: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
asset_ping_from: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
logs_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
logs_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
logs_query_range_default_limit: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
metrics_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
logs_storage_retention: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
}
metrics_storage_type: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
metrics_query_max_series: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
},
tag: ''
}
},
methods: {
@@ -93,6 +192,10 @@ export default {
const params = {
...this.editBox
}
const str = this.editBox.interface_name.map(item => {
return item.text
})
params.interface_name = str.join(',')
this.$put(this.url, params).then(res => {
this.prevent_opt.save = false
if (res.code === 200) {

21
nezha-fronted/src/components/page/config/collectors.vue
View File

@@ -473,18 +473,25 @@ export default {
this.configurationBox = false
},
configurationEdit () {
this.$get('/sys/config/monitor').then(res => {
if (res.code === 200) {
this.configurationObject = res.data
this.$get('/sys/config/monitor').then(response => {
if (response.code === 200) {
this.configurationObject = response.data
if (response.data.interface_name) {
const arr = response.data.interface_name.split(',')
this.configurationObject.interface_name = arr.map(item => {
return { text: item }
})
}
this.configurationBox = true
}
})
},
getConfiguration () {
this.$get('/sys/config/monitor').then((res) => {
if (res.code == 200) {
if (res.data) {
this.$set(this.configurationData, 0, res.data)
this.$get('/sys/config/monitor').then((response) => {
if (response.code == 200) {
if (response.data) {
this.$set(this.configurationData, 0, response.data)
localStorage.setItem('nz-prometheus-federation-enabled', response.data.prometheus_federation_enabled)
}
}
})