迁移监控设置功能
This commit is contained in:
sheng
15
docs/功能测试-监控设置.md
Normal file
15
docs/功能测试-监控设置.md
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
# 功能测试任务列表 - 监控设置
|
||||||
|
|
||||||
|
> 路由：`/system_settings/system_monitoring/setting`
|
||||||
|
|
||||||
|
| 序号 | 测试项 | 操作步骤 | 预期结果 | 结果 |
|
||||||
|
|---|---|---|---|---|
|
||||||
|
| 1 | 页面入口 | 从菜单进入“监控设置”，或直接访问路由 | 页面正常打开，表格展示监控编码、名称、IP、端口、版本和预警阈值字段 | ☐ |
|
||||||
|
| 2 | 条件查询 | 输入监控编码或监控名称后点击“查询” | 列表按条件刷新，分页回到第一页 | ☐ |
|
||||||
|
| 3 | 重置查询 | 输入查询条件后点击“重置” | 查询条件清空，列表恢复默认数据 | ☐ |
|
||||||
|
| 4 | 新增必填校验 | 点击“新增”，不填写编码、名称、IP 或端口直接确认 | 表单提示对应必填校验，不提交请求 | ☐ |
|
||||||
|
| 5 | 新增监控配置 | 填写编码、名称、IP、端口、刷新间隔、CPU/磁盘/内存阈值和 Python 版本后确认 | 弹窗关闭，提示操作成功，列表出现新增记录 | ☐ |
|
||||||
|
| 6 | 编辑监控配置 | 点击某条记录“编辑”，修改名称或阈值后确认 | 弹窗回显旧值，保存后列表展示新值 | ☐ |
|
||||||
|
| 7 | 删除取消 | 点击“删除”后在确认框选择取消 | 数据不删除，列表保持不变 | ☐ |
|
||||||
|
| 8 | 删除确认 | 点击“删除”后确认 | 提示操作成功，记录从列表移除，分页数量正确刷新 | ☐ |
|
||||||
|
| 9 | 权限按钮 | 使用无新增/编辑/删除权限的账号进入页面 | 对应按钮不显示或不可操作 | ☐ |
|
||||||
43
src/api/system-administration/monitoring-configuration.js
Normal file
43
src/api/system-administration/monitoring-configuration.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import { request } from '@/api/_service'
|
||||||
|
|
||||||
|
const BASE = 'system_settings/system_monitor/setting/'
|
||||||
|
|
||||||
|
function apiParams (method, data = {}) {
|
||||||
|
return {
|
||||||
|
method: `system_settings_system_monitoring_setting_${method}`,
|
||||||
|
platform: 'background',
|
||||||
|
...data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMonitoringConfigurationList (data) {
|
||||||
|
return request({
|
||||||
|
url: BASE + 'list',
|
||||||
|
method: 'get',
|
||||||
|
params: apiParams('list', data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createMonitoringConfiguration (data) {
|
||||||
|
return request({
|
||||||
|
url: BASE + 'create',
|
||||||
|
method: 'post',
|
||||||
|
data: apiParams('create', data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function editMonitoringConfiguration (data) {
|
||||||
|
return request({
|
||||||
|
url: BASE + 'edit',
|
||||||
|
method: 'post',
|
||||||
|
data: apiParams('edit', data)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function deleteMonitoringConfiguration (data) {
|
||||||
|
return request({
|
||||||
|
url: BASE + 'delete',
|
||||||
|
method: 'post',
|
||||||
|
data: apiParams('delete', data)
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -2151,6 +2151,47 @@
|
|||||||
"please_select": "Please select"
|
"please_select": "Please select"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"system_monitoring": {
|
||||||
|
"monitoring_configuration": {
|
||||||
|
"search": "Search",
|
||||||
|
"reset": "Reset",
|
||||||
|
"add": "Add",
|
||||||
|
"edit": "Edit",
|
||||||
|
"delete": "Delete",
|
||||||
|
"confirm": "Confirm",
|
||||||
|
"cancel": "Cancel",
|
||||||
|
"prompt": "Notice",
|
||||||
|
"operation": "Operation",
|
||||||
|
"operation_success": "Operation successful",
|
||||||
|
"confirm_operation": "Are you sure you want to perform this operation?",
|
||||||
|
"serial_number": "No.",
|
||||||
|
"monitor_code": "Monitor Code",
|
||||||
|
"monitor_name": "Monitor Name",
|
||||||
|
"ip_address": "IP Address",
|
||||||
|
"port": "Port",
|
||||||
|
"python_version": "Python Version",
|
||||||
|
"refresh_interval": "Refresh Interval",
|
||||||
|
"cpu_warning": "CPU Warning",
|
||||||
|
"disk_warning": "Disk Warning",
|
||||||
|
"memory_swap_warning": "Memory/Swap Warning",
|
||||||
|
"enter_monitor_code": "Please enter monitor code",
|
||||||
|
"enter_monitor_name": "Please enter monitor name",
|
||||||
|
"enter_ip_address": "Please enter IP address",
|
||||||
|
"enter_port": "Please enter port",
|
||||||
|
"enter_refresh_interval": "Please enter refresh interval",
|
||||||
|
"enter_disk_warning": "Please enter disk warning",
|
||||||
|
"enter_cpu_warning": "Please enter CPU warning",
|
||||||
|
"enter_memory_swap_warning": "Please enter memory/swap warning",
|
||||||
|
"enter_python_version": "Please enter Python version",
|
||||||
|
"please_enter_monitor_code": "Please enter monitor code",
|
||||||
|
"please_enter_monitor_name": "Please enter monitor name",
|
||||||
|
"please_enter_ip_address": "Please enter IP address",
|
||||||
|
"please_enter_port": "Please enter port",
|
||||||
|
"length_1_to_100": "Length must be 1-100 characters",
|
||||||
|
"add_monitor_config": "Add Monitoring Configuration",
|
||||||
|
"edit_monitor_config": "Edit Monitoring Configuration"
|
||||||
|
}
|
||||||
|
},
|
||||||
"system_utilities": {
|
"system_utilities": {
|
||||||
"api_logs": {
|
"api_logs": {
|
||||||
"id": "ID",
|
"id": "ID",
|
||||||
|
|||||||
@@ -2151,6 +2151,47 @@
|
|||||||
"please_select": "请选择"
|
"please_select": "请选择"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"system_monitoring": {
|
||||||
|
"monitoring_configuration": {
|
||||||
|
"search": "查询",
|
||||||
|
"reset": "重置",
|
||||||
|
"add": "新增",
|
||||||
|
"edit": "编辑",
|
||||||
|
"delete": "删除",
|
||||||
|
"confirm": "确定",
|
||||||
|
"cancel": "取消",
|
||||||
|
"prompt": "提示",
|
||||||
|
"operation": "操作",
|
||||||
|
"operation_success": "操作成功",
|
||||||
|
"confirm_operation": "确定要执行该操作吗?",
|
||||||
|
"serial_number": "序号",
|
||||||
|
"monitor_code": "监控编码",
|
||||||
|
"monitor_name": "监控名称",
|
||||||
|
"ip_address": "IP地址",
|
||||||
|
"port": "端口",
|
||||||
|
"python_version": "Python版本",
|
||||||
|
"refresh_interval": "刷新间隔",
|
||||||
|
"cpu_warning": "CPU预警值",
|
||||||
|
"disk_warning": "磁盘预警值",
|
||||||
|
"memory_swap_warning": "内存/交换区预警值",
|
||||||
|
"enter_monitor_code": "请输入监控编码",
|
||||||
|
"enter_monitor_name": "请输入监控名称",
|
||||||
|
"enter_ip_address": "请输入IP地址",
|
||||||
|
"enter_port": "请输入端口",
|
||||||
|
"enter_refresh_interval": "请输入刷新间隔",
|
||||||
|
"enter_disk_warning": "请输入磁盘预警值",
|
||||||
|
"enter_cpu_warning": "请输入CPU预警值",
|
||||||
|
"enter_memory_swap_warning": "请输入内存/交换区预警值",
|
||||||
|
"enter_python_version": "请输入Python版本",
|
||||||
|
"please_enter_monitor_code": "请输入监控编码",
|
||||||
|
"please_enter_monitor_name": "请输入监控名称",
|
||||||
|
"please_enter_ip_address": "请输入IP地址",
|
||||||
|
"please_enter_port": "请输入端口",
|
||||||
|
"length_1_to_100": "长度在 1 到 100 个字符",
|
||||||
|
"add_monitor_config": "新增监控配置",
|
||||||
|
"edit_monitor_config": "编辑监控配置"
|
||||||
|
}
|
||||||
|
},
|
||||||
"system_utilities": {
|
"system_utilities": {
|
||||||
"api_logs": {
|
"api_logs": {
|
||||||
"id": "ID",
|
"id": "ID",
|
||||||
|
|||||||
@@ -49,6 +49,12 @@ export default {
|
|||||||
name: `${pre}system_assistant-problem_help`,
|
name: `${pre}system_assistant-problem_help`,
|
||||||
meta: { ...meta, cache: true, title: '问题帮助' },
|
meta: { ...meta, cache: true, title: '问题帮助' },
|
||||||
component: _import('system-administration/system-utilities/problem-help')
|
component: _import('system-administration/system-utilities/problem-help')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'system_monitoring/setting',
|
||||||
|
name: `${pre}system_monitoring-setting`,
|
||||||
|
meta: { ...meta, cache: true, title: '监控设置' },
|
||||||
|
component: _import('system-administration/system-monitoring/monitoring-configuration')
|
||||||
}
|
}
|
||||||
])('system_settings-')
|
])('system_settings-')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,194 @@
|
|||||||
|
<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>
|
||||||
Reference in New Issue
Block a user