195 lines
9.4 KiB
Vue
195 lines
9.4 KiB
Vue
<template>
|
|
<d2-container>
|
|
<template #header>
|
|
<div class="search-bar">
|
|
<el-form :inline="true" size="mini">
|
|
<el-form-item :label="$t(key('monitor_code'))">
|
|
<el-input v-model.trim="search.code" :placeholder="$t(key('enter_monitor_code'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
|
|
</el-form-item>
|
|
<el-form-item :label="$t(key('monitor_name'))">
|
|
<el-input v-model.trim="search.name" :placeholder="$t(key('enter_monitor_name'))" clearable style="width:200px" @keyup.enter.native="onSearch" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" @click="onSearch">{{ $t(key('search')) }}</el-button>
|
|
<el-button icon="el-icon-refresh" @click="onReset">{{ $t(key('reset')) }}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<page-table ref="pageTable" :columns="columns" :data="tableData" :loading="loading" :toolbar-buttons="toolbarButtons" :row-buttons="rowButtons" :pagination="pagination" auto-height @page-change="onPageChange" />
|
|
|
|
<page-dialog-form ref="dialogForm" :visible.sync="dialogVisible" :title="dialogTitle" width="42%" :form-cols="formCols" :form-data="formData" :rules="rules" label-width="150px" :submitting="submitting" :confirm-text="key('confirm')" :cancel-text="key('cancel')" @submit="onDialogSubmit" @close="onDialogClose" />
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { useTableColumns } from '@/composables/useTableColumns'
|
|
import { useTableButtons } from '@/composables/useTableButtons'
|
|
import { i18nMixin } from '@/composables/useI18n'
|
|
import { confirmMixin } from '@/composables/useConfirmHandle'
|
|
import PageTable from '@/components/page-table'
|
|
import PageDialogForm from '@/components/page-dialog-form'
|
|
import { getMonitoringConfigurationList, createMonitoringConfiguration, editMonitoringConfiguration, deleteMonitoringConfiguration } from '@/api/system-administration/monitoring-configuration'
|
|
|
|
export default {
|
|
name: 'system-administration-monitoring-configuration',
|
|
components: { PageTable, PageDialogForm },
|
|
mixins: [i18nMixin('page.system_administration.system_monitoring.monitoring_configuration'), confirmMixin],
|
|
data () {
|
|
return {
|
|
loading: false,
|
|
submitting: false,
|
|
tableData: [],
|
|
dialogVisible: false,
|
|
dialogTitle: '',
|
|
editId: '',
|
|
handleType: 'create',
|
|
search: { code: '', name: '' },
|
|
pagination: { current: 1, size: 10, total: 0 },
|
|
formData: this.defaultFormData(),
|
|
rules: {
|
|
code: [
|
|
{ required: true, message: this.key('please_enter_monitor_code'), trigger: 'blur' },
|
|
{ min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
|
|
],
|
|
name: [
|
|
{ required: true, message: this.key('please_enter_monitor_name'), trigger: 'blur' },
|
|
{ min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
|
|
],
|
|
ip: [
|
|
{ required: true, message: this.key('please_enter_ip_address'), trigger: 'blur' },
|
|
{ min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
|
|
],
|
|
port: [
|
|
{ required: true, message: this.key('please_enter_port'), trigger: 'blur' },
|
|
{ min: 1, max: 100, message: this.key('length_1_to_100'), trigger: 'blur' }
|
|
]
|
|
},
|
|
columns: [],
|
|
toolbarButtons: [],
|
|
rowButtons: [],
|
|
formCols: [
|
|
[{ type: 'input', prop: 'code', label: this.key('monitor_code'), placeholder: this.key('enter_monitor_code'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'name', label: this.key('monitor_name'), placeholder: this.key('enter_monitor_name'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'ip', label: this.key('ip_address'), placeholder: this.key('enter_ip_address'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'port', label: this.key('port'), placeholder: this.key('enter_port'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'refresh_interval', label: this.key('refresh_interval'), placeholder: this.key('enter_refresh_interval'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'disk_warning', label: this.key('disk_warning'), placeholder: this.key('enter_disk_warning'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'cpu_warning', label: this.key('cpu_warning'), placeholder: this.key('enter_cpu_warning'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'mem_warning', label: this.key('memory_swap_warning'), placeholder: this.key('enter_memory_swap_warning'), clearable: true, style: { width: '90%' } }],
|
|
[{ type: 'input', prop: 'version', label: this.key('python_version'), placeholder: this.key('enter_python_version'), clearable: true, style: { width: '90%' } }]
|
|
]
|
|
}
|
|
},
|
|
created () {
|
|
this.columns = useTableColumns([
|
|
{ prop: 'sort', label: this.key('serial_number'), width: 90 },
|
|
{ prop: 'code', label: this.key('monitor_code'), minWidth: 120 },
|
|
{ prop: 'name', label: this.key('monitor_name'), minWidth: 140 },
|
|
{ prop: 'ip', label: this.key('ip_address'), minWidth: 140 },
|
|
{ prop: 'port', label: this.key('port'), width: 100 },
|
|
{ prop: 'version', label: this.key('python_version'), minWidth: 120 },
|
|
{ prop: 'refresh_interval', label: this.key('refresh_interval'), minWidth: 130 },
|
|
{ prop: 'cpu_warning', label: this.key('cpu_warning'), minWidth: 120 },
|
|
{ prop: 'disk_warning', label: this.key('disk_warning'), minWidth: 120 },
|
|
{ prop: 'mem_warning', label: this.key('memory_swap_warning'), minWidth: 150 },
|
|
{ prop: '_actions', label: this.key('operation'), width: 160, fixed: 'right' }
|
|
])
|
|
const btns = useTableButtons({
|
|
toolbar: [
|
|
{ key: 'add', label: this.key('add'), icon: 'el-icon-plus', type: 'primary', auth: '/system_settings/system_monitor/setting/create', onClick: this.openAdd }
|
|
],
|
|
row: [
|
|
{ key: 'edit', label: this.key('edit'), icon: 'el-icon-edit', auth: '/system_settings/system_monitor/setting/edit', onClick: this.openEdit },
|
|
{ key: 'delete', label: this.key('delete'), icon: 'el-icon-delete', color: 'danger', auth: '/system_settings/system_monitor/setting/delete', onClick: this.handleDelete }
|
|
]
|
|
}, this.$permission)
|
|
this.toolbarButtons = btns.toolbarButtons
|
|
this.rowButtons = btns.rowButtons
|
|
this.fetchData()
|
|
},
|
|
methods: {
|
|
defaultFormData () {
|
|
return { code: '', name: '', ip: '', port: '', refresh_interval: 1000, disk_warning: 90, cpu_warning: 90, mem_warning: 90, version: 3 }
|
|
},
|
|
async fetchData () {
|
|
this.loading = true
|
|
try {
|
|
const res = await getMonitoringConfigurationList({ ...this.search, page_no: this.pagination.current, page_size: this.pagination.size })
|
|
const data = res && res.data ? res.data : res
|
|
this.tableData = (data && data.data) || data || []
|
|
this.pagination.total = Number((data && data.count) || 0)
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
onSearch () {
|
|
this.pagination.current = 1
|
|
this.fetchData()
|
|
},
|
|
onReset () {
|
|
this.search = { code: '', name: '' }
|
|
this.pagination.current = 1
|
|
this.fetchData()
|
|
},
|
|
onPageChange (page) {
|
|
this.pagination.current = page.current
|
|
this.pagination.size = page.size
|
|
this.fetchData()
|
|
},
|
|
resetForm () {
|
|
this.formData = this.defaultFormData()
|
|
this.editId = ''
|
|
},
|
|
openAdd () {
|
|
this.handleType = 'create'
|
|
this.dialogTitle = this.key('add_monitor_config')
|
|
this.$nextTick(() => {
|
|
this.$refs.dialogForm && this.$refs.dialogForm.reset()
|
|
this.resetForm()
|
|
this.dialogVisible = true
|
|
})
|
|
},
|
|
openEdit (row) {
|
|
this.handleType = 'edit'
|
|
this.dialogTitle = this.key('edit_monitor_config')
|
|
this.editId = row.id
|
|
this.formData = { code: row.code, name: row.name, ip: row.ip, port: row.port, refresh_interval: row.refresh_interval, disk_warning: row.disk_warning, cpu_warning: row.cpu_warning, mem_warning: row.mem_warning, version: row.version }
|
|
this.dialogVisible = true
|
|
},
|
|
async onDialogSubmit () {
|
|
this.submitting = true
|
|
try {
|
|
if (this.handleType === 'create') await createMonitoringConfiguration(this.formData)
|
|
else await editMonitoringConfiguration({ ...this.formData, id: this.editId })
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.dialogVisible = false
|
|
this.fetchData()
|
|
} finally {
|
|
this.submitting = false
|
|
}
|
|
},
|
|
onDialogClose () {
|
|
this.resetForm()
|
|
},
|
|
async handleDelete (row) {
|
|
const cancelled = await this.$confirmAction({ message: this.key('confirm_operation'), title: this.key('prompt'), confirmButtonText: this.key('confirm'), cancelButtonText: this.key('cancel') }, () => deleteMonitoringConfiguration({ id: [row.id] }))
|
|
if (cancelled) return
|
|
this.$message.success(this.$t(this.key('operation_success')))
|
|
this.pagination.current = Math.min(this.pagination.current, Math.ceil((this.pagination.total - 1) / this.pagination.size) || 1)
|
|
this.fetchData()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-bar {
|
|
padding: 10px 0;
|
|
}
|
|
/deep/ .el-form-item--mini.el-form-item {
|
|
margin-bottom: 4px;
|
|
}
|
|
</style>
|