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

fix(ui): auto discovery

This commit is contained in:
songlh 2024-06-25 17:35:29 +08:00
parent d5e60fab88
commit 5bff69a8a8
15 changed files with 167 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cmdb-ui/public/iconfont/demo_index.html
View File

@ -5196,9 +5196,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1719208046306') format('woff2'),
url('iconfont.woff?t=1719208046306') format('woff'),
url('iconfont.ttf?t=1719208046306') format('truetype');
src: url('iconfont.woff2?t=1719307117118') format('woff2'),
url('iconfont.woff?t=1719307117118') format('woff'),
url('iconfont.ttf?t=1719307117118') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>

6
cmdb-ui/public/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 3857903 */
src: url('iconfont.woff2?t=1719208046306') format('woff2'),
url('iconfont.woff?t=1719208046306') format('woff'),
url('iconfont.ttf?t=1719208046306') format('truetype');
src: url('iconfont.woff2?t=1719307117118') format('woff2'),
url('iconfont.woff?t=1719307117118') format('woff'),
url('iconfont.ttf?t=1719307117118') format('truetype');
}
.iconfont {

BIN
cmdb-ui/public/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
cmdb-ui/public/iconfont/iconfont.woff2
View File

Binary file not shown.

25
cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue
View File

@ -1,13 +1,22 @@
<template>
<div class="http-ad-category">
<div class="http-ad-category-preview" v-if="currentCate">
<div class="http-ad-category-preview" v-if="currentCate && isPreviewDetail">
<div class="category-side">
<div
v-for="(category, categoryIndex) in categories"
:key="category.category"
class="category-side-item"
>
<div class="category-side-title">{{ category.category }}</div>
<div class="category-side-title">
<div class="category-side-title">
<a-icon
v-if="categoryIndex === 0"
type="left"
@click="clickBack"
/>
{{ category.category }}
</div>
</div>
<div class="category-side-children">
<div
v-for="(item, itemIndex) in category.items"
@ -100,7 +109,8 @@ export default {
},
data() {
return {
searchValue: ''
searchValue: '',
isPreviewDetail: false,
}
},
computed: {
@ -121,6 +131,10 @@ export default {
},
clickCategory(item) {
this.$emit('clickCategory', item)
this.isPreviewDetail = true
},
clickBack() {
this.isPreviewDetail = false
}
}
}
@ -143,8 +157,8 @@ export default {
padding-right: 10px;
&-item {
&:not(:first-child) {
margin-top: 24px;
&:not(:last-child) {
margin-bottom: 24px;
}
.category-side-title {
@ -167,6 +181,7 @@ export default {
cursor: pointer;
position: relative;
margin-top: 5px;
display: flex;
align-items: center;

6
cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
View File

@ -9,7 +9,7 @@
@clickCategory="setCurrentCate"
/>
<template v-else>
<a-select v-if="isCloud" :style="{ marginBottom: '10px' }" v-model="currentCate">
<a-select v-if="isCloud" :style="{ marginBottom: '10px', minWidth: '120px' }" v-model="currentCate">
<a-select-option v-for="cate in categoriesSelect" :key="cate" :value="cate">{{ cate }}</a-select-option>
</a-select>
<AttrMapTable
@ -103,7 +103,7 @@ export default {
immediate: true,
handler(newVal) {
if (newVal) {
getHttpAttributes(this.httpMap[`${this.ruleName}`].name, { resource: newVal }).then((res) => {
getHttpAttributes(this.ruleName, { resource: newVal }).then((res) => {
if (this.isEdit) {
this.formatTableData(res)
} else {
@ -130,7 +130,7 @@ export default {
}
if (this.isCloud && ruleName) {
getHttpCategories(this.httpMap[`${this.ruleName}`].name).then((res) => {
getHttpCategories(this.ruleName).then((res) => {
this.categories = res
const categoriesSelect = []
res.forEach((category) => {

8
cmdb-ui/src/modules/cmdb/lang/en.js
View File

@ -244,6 +244,11 @@ const cmdb_en = {
relationADTip3: 'If the value of the auto-discovered attribute is a list, multiple relationships are established with the association model',
deleteRelationAdTip: 'Cannot be deleted again',
cronTips: 'The format is the same as crontab, for example: 0 15 * * 1-5',
privateCloud: 'vSphere API Configuration',
host: 'Host',
account: 'Account',
insecure: 'Certificate Validation',
vcenterName: 'Platform Name',
},
components: {
unselectAttributes: 'Unselected',
@ -651,7 +656,8 @@ if __name__ == "__main__":
confirmDeleteView: 'Are you sure you want to delete this view ?',
noInstancePerm: 'You do not have read permissions for this instance',
noPreferenceAttributes: 'This instance has no subscription attributes or no default displayed attributes',
topoViewSearchPlaceholder: 'Please enter the node name.'
topoViewSearchPlaceholder: 'Please enter the node name.',
moreBtn: 'Show more({count})'
},
}
export default cmdb_en

8
cmdb-ui/src/modules/cmdb/lang/zh.js
View File

@ -244,6 +244,11 @@ const cmdb_zh = {
relationADTip3: '如果自动发现的属性值是列表，则会和关联模型建立多个关系',
deleteRelationAdTip: '不可再删除',
cronTips: '格式同crontab, 例如：0 15 * * 1-5',
privateCloud: 'vSphere API配置',
host: '地址',
account: '账号',
insecure: '是否证书验证',
vcenterName: '虚拟平台名',
},
components: {
unselectAttributes: '未选属性',
@ -650,7 +655,8 @@ if __name__ == "__main__":
confirmDeleteView: '您确定要删除该视图吗?',
noInstancePerm: '您没有该实例的查看权限',
noPreferenceAttributes: '该实例没有订阅属性或者没有默认展示的属性',
topoViewSearchPlaceholder: '请输入节点名字'
topoViewSearchPlaceholder: '请输入节点名字',
moreBtn: '展示更多({count})'
},
}
export default cmdb_zh

4
cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
View File

@ -273,8 +273,12 @@ export default {
const adtIndex = this.clientCITypeList.findIndex((item) => item.id === id)
this.clientCITypeList[adtIndex].extra_option.alias = value
} else {
const adtIndex = this.adCITypeList.findIndex((item) => item.id === id)
const oldExtraOption = this.adCITypeList?.[adtIndex]?.extra_option
const params = {
extra_option: {
...(oldExtraOption || {}),
alias: value
}
}

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

@ -51,7 +51,7 @@
:wrapperCol="{ span: 14 }"
class="attr-ad-form"
>
<a-form-model-item :label="$t('cmdb.ciType.adExecTarget')">
<a-form-model-item :required="true" :label="$t('cmdb.ciType.adExecTarget')">
<CustomRadio v-model="agent_type" :radioList="agentTypeRadioList">
<a-input
:style="{ width: '300px' }"
@ -82,6 +82,7 @@
:labelCol="labelCol"
:wrapperCol="{ span: 6 }"
:label="$t('cmdb.ciType.adInterval')"
:required="true"
>
<el-popover v-model="cronVisible" trigger="click">
<template slot>
@ -104,31 +105,33 @@
</a-form-model-item>
</a-form-model>
<template v-if="adrType === 'http'">
<template v-if="isVCenter">
<div class="attr-ad-header">私有云</div>
<a-form-model
:model="privateCloudForm"
labelAlign="left"
:labelCol="labelCol"
:wrapperCol="{ span: 6 }"
class="attr-ad-form"
>
<a-form-model-item label="地址">
<a-input v-model="privateCloudForm.host" />
</a-form-model-item>
<a-form-model-item label="账号">
<a-input v-model="privateCloudForm.account" />
</a-form-model-item>
<a-form-model-item label="密码">
<a-input-password v-model="privateCloudForm.password" />
</a-form-model-item>
<a-form-model-item label="是否证书验证">
<a-switch v-model="privateCloudForm.insecure" />
</a-form-model-item>
<a-form-model-item label="虚拟平台名">
<a-input v-model="privateCloudForm.vcenterName" />
</a-form-model-item>
</a-form-model>
<template v-if="isPrivateCloud">
<template v-if="privateCloudName === PRIVATE_CLOUD_NAME.VCenter">
<div class="attr-ad-header">{{ $t('cmdb.ciType.privateCloud') }}</div>
<a-form-model
:model="privateCloudForm"
labelAlign="left"
:labelCol="labelCol"
:wrapperCol="{ span: 6 }"
class="attr-ad-form"
>
<a-form-model-item :required="true" :label="$t('cmdb.ciType.host')">
<a-input v-model="privateCloudForm.host" />
</a-form-model-item>
<a-form-model-item :required="true" :label="$t('cmdb.ciType.account')">
<a-input v-model="privateCloudForm.account" />
</a-form-model-item>
<a-form-model-item :required="true" :label="$t('cmdb.ciType.password')">
<a-input-password v-model="privateCloudForm.password" />
</a-form-model-item>
<a-form-model-item :label="$t('cmdb.ciType.insecure')">
<a-switch v-model="privateCloudForm.insecure" />
</a-form-model-item>
<a-form-model-item :label="$t('cmdb.ciType.vcenterName')">
<a-input v-model="privateCloudForm.vcenterName" />
</a-form-model-item>
</a-form-model>
</template>
</template>
<template v-else>
@ -141,10 +144,10 @@
:wrapperCol="{ span: 6 }"
class="attr-ad-form"
>
<a-form-model-item label="key">
<a-form-model-item :required="true" label="key">
<a-input-password v-model="form2.key" />
</a-form-model-item>
<a-form-model-item label="secret">
<a-form-model-item :required="true" label="secret">
<a-input-password v-model="form2.secret" />
</a-form-model-item>
</a-form-model>
@ -167,6 +170,7 @@ import { v4 as uuidv4 } from 'uuid'
import { mapState } from 'vuex'
import Vcrontab from '@/components/Crontab'
import { putCITypeDiscovery, postCITypeDiscovery } from '../../api/discovery'
import { PRIVATE_CLOUD_NAME } from '@/modules/cmdb/views/discovery/constants.js'
import HttpSnmpAD from '../../components/httpSnmpAD'
import AttrMapTable from '@/modules/cmdb/components/attrMapTable/index.vue'
@ -250,7 +254,9 @@ export default {
form3: this.$form.createForm(this, { name: 'snmp_form' }),
cronVisible: false,
uniqueKey: '',
isVCenter: false,
isPrivateCloud: false,
privateCloudName: '',
PRIVATE_CLOUD_NAME
}
},
computed: {
@ -262,7 +268,7 @@ export default {
return this.currentAdr?.type || ''
},
adrName() {
return this.currentAdr?.name || ''
return this?.currentAdr?.option?.en || this.currentAdr?.name || ''
},
adrIsInner() {
return this.currentAdr?.is_inner || ''
@ -287,7 +293,7 @@ export default {
]
},
labelCol() {
const span = this.$i18n.locale === 'en' ? 4 : 2
const span = this.$i18n.locale === 'en' ? 5 : 3
return {
span
}
@ -312,17 +318,21 @@ export default {
vcenterName = ''
} = _findADT?.extra_option ?? {}
if (_find?.name === 'VCenter') {
this.isVCenter = true
this.privateCloudForm = {
host,
account,
password,
insecure,
vcenterName,
if (_find?.option?.category === 'private_cloud') {
this.isPrivateCloud = true
this.privateCloudName = _find?.option?.en || ''
if (this.privateCloudName === PRIVATE_CLOUD_NAME.VCenter) {
this.privateCloudForm = {
host,
account,
password,
insecure,
vcenterName,
}
}
} else {
this.isVCenter = false
this.isPrivateCloud = false
this.form2 = {
key,
secret,
@ -389,10 +399,25 @@ export default {
handleSave() {
const { currentAdt } = this
let params
const isError = this.validateForm()
if (isError) {
return
}
if (this.adrType === 'http') {
let cloudOption = {}
if (this.isPrivateCloud) {
if (this.privateCloudName === PRIVATE_CLOUD_NAME.VCenter) {
cloudOption = this.privateCloudForm
}
} else {
cloudOption = this.form2
}
params = {
extra_option: {
...(this.isVCenter ? this.privateCloudForm : this.form2),
...cloudOption,
category: this.$refs.httpSnmpAd.currentCate,
},
}
@ -457,13 +482,14 @@ export default {
return
}
if (currentAdt?.isClient) {
if (currentAdt?.extra_option) {
params.extra_option = {
...(params?.extra_option || {}),
...(currentAdt?.extra_option || {})
}
if (currentAdt?.extra_option) {
params.extra_option = {
...(currentAdt?.extra_option || {}),
...(params?.extra_option || {})
}
}
if (currentAdt?.isClient) {
postCITypeDiscovery(this.CITypeId, params).then((res) => {
this.$message.success(this.$t('saveSuccess'))
this.$emit('handleSave', res.id)
@ -475,6 +501,40 @@ export default {
})
}
},
validateForm() {
let isError = false
if (this.adrType === 'http') {
if (this.isPrivateCloud) {
if (this.privateCloudName === PRIVATE_CLOUD_NAME.VCenter) {
const vcenterErros = {
'host': `${this.$t('placeholder1')} ${this.$t('cmdb.ciType.host')}`,
'account': `${this.$t('placeholder1')} ${this.$t('cmdb.ciType.account')}`,
'password': `${this.$t('placeholder1')} ${this.$t('cmdb.ciType.password')}`
}
const findError = Object.keys(this.privateCloudForm).find((key) => !this.privateCloudForm[key] && vcenterErros[key])
if (findError) {
isError = true
this.$message.error(this.$t(vcenterErros[findError]))
}
}
} else {
const publicCloudErros = {
'key': `${this.$t('placeholder1')} key`,
'secret': `${this.$t('placeholder1')} secret`
}
const findError = Object.keys(this.form2).find((key) => !this.form2[key] && publicCloudErros[key])
if (findError) {
isError = true
this.$message.error(this.$t(publicCloudErros[findError]))
}
}
}
return isError
},
handleOpenCmdb() {
this.$refs.cmdbDrawer.open()
},

4
cmdb-ui/src/modules/cmdb/views/discovery/constants.js
View File

@ -6,3 +6,7 @@ export const DISCOVERY_CATEGORY_TYPE = {
COMPONENT: 'components',
PRIVATE_CLOUD: 'private_cloud'
}
export const PRIVATE_CLOUD_NAME = {
VCenter: 'vcenter'
}

5
cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
View File

@ -112,7 +112,7 @@
</div>
</template>
<template v-else>
<HttpSnmpAD ref="httpSnmpAd" :ruleType="adType" :ruleName="ruleData.name" />
<HttpSnmpAD ref="httpSnmpAd" :ruleType="adType" :ruleName="ruleName" />
</template>
</CustomDrawer>
</template>
@ -179,6 +179,9 @@ export default {
}
return this.$t('new')
},
ruleName() {
return this?.ruleData?.option?.en || this?.ruleData?.name || ''
}
},
inject: {
getDiscovery: {

1
cmdb-ui/src/modules/cmdb/views/discovery/index.vue
View File

@ -299,7 +299,6 @@ export default {
align-items: center;
gap: 14px;
flex-shrink: 0;
margin-left: 20px;
&-btn {
display: flex;

8
cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
View File

@ -160,7 +160,9 @@
class="relation-graph-node-icon"
/>
</template>
<span class="relation-graph-node-text">{{ node.text }}</span>
<span class="relation-graph-node-text">
{{ node.data.btnType === 'more' ? $t('cmdb.topo.moreBtn', { count: node.text }) : node.text }}
</span>
</div>
</template>
<template #graph-plug>
@ -960,7 +962,7 @@ export default {
const id = uuidv4()
jsonData.nodes.set(id, {
id,
text: `展示更多(${childs.length - showNodeCount})`,
text: childs.length - showNodeCount,
data: {
btnType: 'more'
},
@ -1008,7 +1010,7 @@ export default {
if (showNodeCount === childs.length) {
moreBtnNode.isHide = true
} else {
moreBtnNode.text = `展示更多(${childs.length - showNodeCount})`
moreBtnNode.text = childs.length - showNodeCount
}
}