7x31
/
cmdb
mirror of https://github.com/veops/cmdb.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dev UI (#186) 

* fix:add package

* fix:notice_info为null的情况

* fix:2 bugs
This commit is contained in:
wang-liang0615 2023-09-28 09:45:11 +08:00 committed by GitHub
parent 388134b38c
commit c0541b7e50
2 changed files with 1709 additions and 1696 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

766
cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
View File

@ -1,379 +1,387 @@
<template> <template>
<div :style="{ height: `${windowHeight - 156}px`, overflow: 'auto', position: 'relative' }"> <div :style="{ height: `${windowHeight - 156}px`, overflow: 'auto', position: 'relative' }">
<a <a
v-if="!adrIsInner" v-if="!adrIsInner"
:style="{ position: 'absolute', right: 0, top: 0 }" :style="{ position: 'absolute', right: 0, top: 0 }"
@click=" @click="
() => { () => {
$emit('openEditDrawer', currentAdr, 'edit', 'agent') $emit('openEditDrawer', currentAdr, 'edit', 'agent')
} }
" "
> >
<a-space> <a-space>
<ops-icon type="icon-xianxing-edit" /> <ops-icon type="icon-xianxing-edit" />
<span>编辑</span> <span>编辑</span>
</a-space> </a-space>
</a> </a>
<div class="attr-ad-header">字段映射</div> <div class="attr-ad-header">字段映射</div>
<vxe-table <vxe-table
v-if="adrType === 'agent'" v-if="adrType === 'agent'"
ref="xTable" ref="xTable"
:edit-config="{ trigger: 'click', mode: 'cell' }" :edit-config="{ trigger: 'click', mode: 'cell' }"
size="mini" size="mini"
stripe stripe
class="ops-stripe-table" class="ops-stripe-table"
:data="tableData" :data="tableData"
:style="{ width: '700px', marginBottom: '20px' }" :style="{ width: '700px', marginBottom: '20px' }"
> >
<vxe-colgroup title="自动发现"> <vxe-colgroup title="自动发现">
<vxe-column field="name" title="名称"> </vxe-column> <vxe-column field="name" title="名称"> </vxe-column>
<vxe-column field="type" title="类型"> </vxe-column> <vxe-column field="type" title="类型"> </vxe-column>
<vxe-column field="desc" title="描述"> </vxe-column> <vxe-column field="desc" title="描述"> </vxe-column>
</vxe-colgroup> </vxe-colgroup>
<vxe-colgroup title="模型属性"> <vxe-colgroup title="模型属性">
<vxe-column field="attr" title="名称" :edit-render="{}"> <vxe-column field="attr" title="名称" :edit-render="{}">
<template #default="{row}"> <template #default="{row}">
{{ row.attr }} {{ row.attr }}
</template> </template>
<template #edit="{ row }"> <template #edit="{ row }">
<vxe-select <vxe-select
filterable filterable
clearable clearable
v-model="row.attr" v-model="row.attr"
type="text" type="text"
:options="ciTypeAttributes" :options="ciTypeAttributes"
transfer transfer
></vxe-select> ></vxe-select>
</template> </template>
</vxe-column> </vxe-column>
</vxe-colgroup> </vxe-colgroup>
</vxe-table> </vxe-table>
<HttpSnmpAD <HttpSnmpAD
v-else v-else
:isEdit="true" :isEdit="true"
ref="httpSnmpAd" ref="httpSnmpAd"
:ruleType="adrType" :ruleType="adrType"
:ruleName="adrName" :ruleName="adrName"
:ciTypeAttributes="ciTypeAttributes" :ciTypeAttributes="ciTypeAttributes"
:adCITypeList="adCITypeList" :adCITypeList="adCITypeList"
:currentTab="currentTab" :currentTab="currentTab"
:style="{ marginBottom: '20px' }" :style="{ marginBottom: '20px' }"
/> />
<a-form-model <a-form-model
v-if="adrType === 'http'" v-if="adrType === 'http'"
:model="form2" :model="form2"
:labelCol="{ span: 2 }" :labelCol="{ span: 2 }"
:wrapperCol="{ span: 8 }" :wrapperCol="{ span: 8 }"
:style="{ margin: '20px 0' }" :style="{ margin: '20px 0' }"
> >
<a-form-model-item label="key"> <a-form-model-item label="key">
<a-input-password v-model="form2.key" /> <a-input-password v-model="form2.key" />
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="secret"> <a-form-model-item label="secret">
<a-input-password v-model="form2.secret" /> <a-input-password v-model="form2.secret" />
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
<a-form :form="form3" v-if="adrType === 'snmp'" class="attr-ad-snmp-form"> <a-form :form="form3" v-if="adrType === 'snmp'" class="attr-ad-snmp-form">
<a-col :span="24"> <a-col :span="24">
<a-form-item label="节点" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }"> <a-form-item label="节点" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
<MonitorNodeSetting ref="monitorNodeSetting" :initNodes="nodes" :form="form3" /> <MonitorNodeSetting ref="monitorNodeSetting" :initNodes="nodes" :form="form3" />
</a-form-item> </a-form-item>
</a-col> </a-col>
</a-form> </a-form>
<div class="attr-ad-header">执行配置</div> <div class="attr-ad-header">执行配置</div>
<a-form-model :model="form" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }"> <a-form-model :model="form" :labelCol="{ span: 2 }" :wrapperCol="{ span: 20 }">
<a-form-model-item label="执行机器"> <a-form-model-item label="执行机器">
<CustomRadio v-model="agent_type" :radioList="agentTypeRadioList"> <CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
<a-input <a-input
:style="{ width: '300px' }" :style="{ width: '300px' }"
placeholder="请输入以0x开头的16进制OneAgent ID" placeholder="请输入以0x开头的16进制OneAgent ID"
v-show="agent_type === 'agent_id'" v-show="agent_type === 'agent_id'"
slot="extra_agent_id" slot="extra_agent_id"
v-model="form.agent_id" v-model="form.agent_id"
/> />
<a-input <a-input
:style="{ width: '300px' }" :style="{ width: '300px' }"
v-show="agent_type === 'query_expr'" v-show="agent_type === 'query_expr'"
slot="extra_query_expr" slot="extra_query_expr"
placeholder="从CMDB选择" placeholder="从CMDB选择"
v-model="form.query_expr" v-model="form.query_expr"
> >
<a @click="handleOpenCmdb" slot="suffix"><a-icon type="menu"/></a> <a @click="handleOpenCmdb" slot="suffix"><a-icon type="menu"/></a>
</a-input> </a-input>
</CustomRadio> </CustomRadio>
</a-form-model-item> </a-form-model-item>
<a-form-model-item label="自动入库"> <a-form-model-item label="自动入库">
<a-switch v-model="form.auto_accept" /> <a-switch v-model="form.auto_accept" />
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
<div class="attr-ad-header">采集频率</div> <div class="attr-ad-header">采集频率</div>
<CustomRadio :radioList="radioList" v-model="interval"> <CustomRadio :radioList="radioList" v-model="interval">
<span v-show="interval === 'interval'" slot="extra_interval"> <span v-show="interval === 'interval'" slot="extra_interval">
<a-input-number v-model="intervalValue" :min="1" /> 秒 <a-input-number v-model="intervalValue" :min="1" /> 秒
</span> </span>
</CustomRadio> </CustomRadio>
<div class="attr-ad-footer"> <div class="attr-ad-footer">
<a-button type="primary" @click="handleSave">保存</a-button> <a-button type="primary" @click="handleSave">保存</a-button>
</div> </div>
<CMDBExprDrawer ref="cmdbDrawer" @copySuccess="copySuccess" /> <CMDBExprDrawer ref="cmdbDrawer" @copySuccess="copySuccess" />
</div> </div>
</template> </template>
<script> <script>
import { v4 as uuidv4 } from 'uuid' import { v4 as uuidv4 } from 'uuid'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import Vcrontab from '@/components/Crontab' import Vcrontab from '@/components/Crontab'
import { putCITypeDiscovery } from '../../api/discovery' import { putCITypeDiscovery } from '../../api/discovery'
import HttpSnmpAD from '../../components/httpSnmpAD' import HttpSnmpAD from '../../components/httpSnmpAD'
import CMDBExprDrawer from '@/components/CMDBExprDrawer' import CMDBExprDrawer from '@/components/CMDBExprDrawer'
import MonitorNodeSetting from '@/components/MonitorNodeSetting' import MonitorNodeSetting from '@/components/MonitorNodeSetting'
export default { export default {
name: 'AttrADTabpane', name: 'AttrADTabpane',
components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting }, components: { Vcrontab, HttpSnmpAD, CMDBExprDrawer, MonitorNodeSetting },
props: { props: {
currentTab: { currentTab: {
type: Number, type: Number,
default: 0, default: 0,
}, },
adrList: { adrList: {
type: Array, type: Array,
default: () => {}, default: () => {},
}, },
adCITypeList: { adCITypeList: {
type: Array, type: Array,
default: () => {}, default: () => {},
}, },
currentAdt: { currentAdt: {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
currentAdr: { currentAdr: {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
ciTypeAttributes: { ciTypeAttributes: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}, },
data() { data() {
const radioList = [ const radioList = [
{ value: 'interval', label: '按间隔' }, { value: 'interval', label: '按间隔' },
] ]
return { return {
radioList, radioList,
tableData: [], tableData: [],
form: { form: {
agent_id: '', agent_id: '',
auto_accept: false, auto_accept: false,
query_expr: '', query_expr: '',
}, },
form2: { form2: {
key: '', key: '',
secret: '', secret: '',
}, },
interval: 'interval', // interval cron interval: 'interval', // interval cron
cron: '', cron: '',
intervalValue: 3, intervalValue: 3,
agent_type: 'agent_id', agent_type: 'agent_id',
nodes: [ nodes: [
{ {
id: uuidv4(), id: uuidv4(),
ip: '', ip: '',
community: '', community: '',
version: '', version: '',
}, },
], ],
form3: this.$form.createForm(this, { name: 'snmp_form' }), form3: this.$form.createForm(this, { name: 'snmp_form' }),
} }
}, },
computed: { computed: {
...mapState({ ...mapState({
windowHeight: (state) => state.windowHeight, windowHeight: (state) => state.windowHeight,
userRoles: (state) => state.user.roles, userRoles: (state) => state.user.roles,
}), }),
adrType() { adrType() {
return this.currentAdr.type return this.currentAdr.type
}, },
adrName() { adrName() {
return this.currentAdr.name return this.currentAdr.name
}, },
adrIsInner() { adrIsInner() {
return this.currentAdr.is_inner return this.currentAdr.is_inner
}, },
agentTypeRadioList() { agentTypeRadioList() {
const { permissions = [] } = this.userRoles const { permissions = [] } = this.userRoles
if (permissions.includes('cmdb_admin') || permissions.includes('admin')) { if (permissions.includes('cmdb_admin') || permissions.includes('admin')) {
return [ return [
{ value: 'all', label: '所有节点' }, { value: 'all', label: '所有节点' },
{ value: 'agent_id', label: '指定节点' }, { value: 'agent_id', label: '指定节点' },
{ value: 'query_expr', label: '从CMDB中选择 ' }, { value: 'query_expr', label: '从CMDB中选择 ' },
] ]
} }
return [ return [
{ value: 'agent_id', label: '指定节点' }, { value: 'agent_id', label: '指定节点' },
{ value: 'query_expr', label: '从CMDB中选择 ' }, { value: 'query_expr', label: '从CMDB中选择 ' },
] ]
}, },
}, },
mounted() {}, mounted() {},
methods: { methods: {
init() { init() {
const _find = this.adrList.find((item) => Number(item.id) === Number(this.currentTab)) const _find = this.adrList.find((item) => Number(item.id) === Number(this.currentTab))
const _findADT = this.adCITypeList.find((item) => Number(item.adr_id) === Number(this.currentTab)) const _findADT = this.adCITypeList.find((item) => Number(item.adr_id) === Number(this.currentTab))
if (this.adrType === 'http') { if (this.adrType === 'http') {
const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {} const { category = undefined, key = '', secret = '' } = _findADT?.extra_option ?? {}
this.form2 = { this.form2 = {
key, key,
secret, secret,
} }
this.$refs.httpSnmpAd.setCurrentCate(category) this.$refs.httpSnmpAd.setCurrentCate(category)
} }
if (this.adrType === 'snmp') { if (this.adrType === 'snmp') {
this.nodes = _findADT?.extra_option?.nodes ?? [ this.nodes = _findADT?.extra_option?.nodes ?? [
{ {
id: uuidv4(), id: uuidv4(),
ip: '', ip: '',
community: '', community: '',
version: '', version: '',
}, },
] ]
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.monitorNodeSetting.initNodesFunc() this.$refs.monitorNodeSetting.initNodesFunc()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.monitorNodeSetting.setNodeField() this.$refs.monitorNodeSetting.setNodeField()
}) })
}) })
} }
if (this.adrType === 'agent') { if (this.adrType === 'agent') {
this.tableData = (_find?.attributes || []).map((item) => { this.tableData = (_find?.attributes || []).map((item) => {
if (_findADT.attributes) { if (_findADT.attributes) {
return { return {
...item, ...item,
attr: _findADT.attributes[`${item.name}`], attr: _findADT.attributes[`${item.name}`],
} }
} else { } else {
const _find = this.ciTypeAttributes.find((ele) => ele.name === item.name) const _find = this.ciTypeAttributes.find((ele) => ele.name === item.name)
if (_find) { if (_find) {
return { return {
...item, ...item,
attr: _find.name, attr: _find.name,
} }
} }
return item return item
} }
}) })
} }
this.form = { this.form = {
auto_accept: _findADT?.auto_accept || false, auto_accept: _findADT?.auto_accept || false,
agent_id: _findADT.agent_id || '', agent_id: _findADT.agent_id || '',
query_expr: _findADT.query_expr || '', query_expr: _findADT.query_expr || '',
} }
if (_findADT.query_expr) { if (_findADT.query_expr) {
this.agent_type = 'query_expr' this.agent_type = 'query_expr'
} else if (_findADT.agent_id) { } else if (_findADT.agent_id) {
this.agent_type = 'agent_id' this.agent_type = 'agent_id'
} else { } else {
this.agent_type = 'agent_id' this.agent_type = this.agentTypeRadioList[0].value
} }
if (_findADT.interval || (!_findADT.interval && !_findADT.cron)) { if (_findADT.interval || (!_findADT.interval && !_findADT.cron)) {
this.interval = 'interval' this.interval = 'interval'
this.intervalValue = _findADT.interval || '' this.intervalValue = _findADT.interval || ''
} else { } else {
this.interval = 'cron' this.interval = 'cron'
this.cron = `0 ${_findADT.cron}` this.cron = `0 ${_findADT.cron}`
} }
}, },
getAttrNameByAttrName(attrName) { getAttrNameByAttrName(attrName) {
const _find = this.ciTypeAttributes.find((item) => item.name === attrName) const _find = this.ciTypeAttributes.find((item) => item.name === attrName)
return _find?.alias || _find?.name || '' return _find?.alias || _find?.name || ''
}, },
crontabFill(cron) { crontabFill(cron) {
this.cron = cron this.cron = cron
}, },
handleSave() { handleSave() {
const { currentAdt } = this const { currentAdt } = this
let params let params
if (this.adrType === 'http') { if (this.adrType === 'http') {
params = { params = {
extra_option: { extra_option: {
...this.form2, ...this.form2,
category: this.$refs.httpSnmpAd.currentCate, category: this.$refs.httpSnmpAd.currentCate,
}, },
} }
} }
if (this.adrType === 'snmp') { if (this.adrType === 'snmp') {
params = { params = {
extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] }, extra_option: { nodes: this.$refs.monitorNodeSetting?.getNodeValue() ?? [] },
} }
} }
if (this.adrType === 'agent') { if (this.adrType === 'agent') {
const $table = this.$refs.xTable const $table = this.$refs.xTable
const { fullData: _tableData } = $table.getTableData() const { fullData: _tableData } = $table.getTableData()
const attributes = {} const attributes = {}
_tableData.forEach((td) => { _tableData.forEach((td) => {
if (td.attr) { if (td.attr) {
attributes[`${td.name}`] = td.attr attributes[`${td.name}`] = td.attr
} }
}) })
params = { params = {
...params, ...params,
attributes, attributes,
} }
} else { } else {
const _tableData = this.$refs.httpSnmpAd.getTableData() const _tableData = this.$refs.httpSnmpAd.getTableData()
const attributes = {} const attributes = {}
_tableData.forEach((td) => { _tableData.forEach((td) => {
if (td.attr) { if (td.attr) {
attributes[`${td.name}`] = td.attr attributes[`${td.name}`] = td.attr
} }
}) })
params = { params = {
...params, ...params,
attributes, attributes,
} }
} }
if (this.interval === 'cron') { if (this.interval === 'cron') {
this.$refs.cronTab.submitFill() this.$refs.cronTab.submitFill()
} }
params = { params = {
...params, ...params,
...this.form, ...this.form,
type_id: this.CITypeId, type_id: this.CITypeId,
adr_id: currentAdt.adr_id, adr_id: currentAdt.adr_id,
interval: this.interval === 'interval' ? this.intervalValue : null, interval: this.interval === 'interval' ? this.intervalValue : null,
cron: this.interval === 'cron' ? this.cron : null, cron: this.interval === 'cron' ? this.cron : null,
} }
if (this.agent_type === 'agent_id' || this.agent_type === 'all') { if (this.agent_type === 'agent_id' || this.agent_type === 'all') {
params.query_expr = '' params.query_expr = ''
} if (this.agent_type === 'agent_id' && !params.agent_id) {
if (this.agent_type === 'query_expr' || this.agent_type === 'all') { this.$message.error('请填写指定节点！')
params.agent_id = '' return
} }
}
putCITypeDiscovery(currentAdt.id, params).then((res) => { if (this.agent_type === 'query_expr' || this.agent_type === 'all') {
this.$message.success('保存成功') params.agent_id = ''
}) if (this.agent_type === 'query_expr' && !params.query_expr) {
}, this.$message.error('请从cmdb中选择！')
handleOpenCmdb() { return
this.$refs.cmdbDrawer.open() }
}, }
copySuccess(text) {
this.form = { putCITypeDiscovery(currentAdt.id, params).then((res) => {
...this.form, this.$message.success('保存成功')
query_expr: `${text}`, })
} },
}, handleOpenCmdb() {
}, this.$refs.cmdbDrawer.open()
} },
</script> copySuccess(text) {
this.form = {
<style lang="less"> ...this.form,
.attr-ad-snmp-form { query_expr: `${text}`,
.ant-form-item { }
margin-bottom: 0; },
} },
} }
</style> </script>
<style lang="less">
.attr-ad-snmp-form {
.ant-form-item {
margin-bottom: 0;
}
}
</style>

2639
cmdb-ui/src/modules/cmdb/views/relation_views/index.vue
View File

File diff suppressed because it is too large Load Diff