fix(ui): auto discovery

2025-11-04 05:36:17 +08:00 · 2024-06-25 17:35:29 +08:00
parent d5e60fab88
commit 5bff69a8a8
15 changed files with 167 additions and 68 deletions
--- a/cmdb-ui/public/iconfont/demo_index.html
+++ b/cmdb-ui/public/iconfont/demo_index.html
@@ -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>
--- a/cmdb-ui/public/iconfont/iconfont.css
+++ b/cmdb-ui/public/iconfont/iconfont.css
@@ -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 {
--- a/cmdb-ui/public/iconfont/iconfont.ttf
+++ b/cmdb-ui/public/iconfont/iconfont.ttf
--- a/cmdb-ui/public/iconfont/iconfont.woff
+++ b/cmdb-ui/public/iconfont/iconfont.woff
--- a/cmdb-ui/public/iconfont/iconfont.woff2
+++ b/cmdb-ui/public/iconfont/iconfont.woff2
--- a/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue
+++ b/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/httpADCategory.vue
@@ -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;
--- a/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
+++ b/cmdb-ui/src/modules/cmdb/components/httpSnmpAD/index.vue
@@ -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) => {
--- a/cmdb-ui/src/modules/cmdb/lang/en.js
+++ b/cmdb-ui/src/modules/cmdb/lang/en.js
@@ -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
--- a/cmdb-ui/src/modules/cmdb/lang/zh.js
+++ b/cmdb-ui/src/modules/cmdb/lang/zh.js
@@ -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
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrAD.vue
@@ -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
          }
        }
--- a/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
+++ b/cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue
@@ -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,8 +105,9 @@
      </a-form-model-item>
    </a-form-model>
    <template v-if="adrType === 'http'">
-      <template v-if="isVCenter">
-        <div class="attr-ad-header">私有云</div>
+      <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"
@@ -113,23 +115,24 @@
            :wrapperCol="{ span: 6 }"
            class="attr-ad-form"
          >
-          <a-form-model-item label="地址">
+            <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 label="账号">
+            <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 label="密码">
+            <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="是否证书验证">
+            <a-form-model-item :label="$t('cmdb.ciType.insecure')">
              <a-switch v-model="privateCloudForm.insecure" />
            </a-form-model-item>
-          <a-form-model-item label="虚拟平台名">
+            <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>
        <div class="attr-ad-header">{{ $t('cmdb.ciType.cloudAccessKey') }}</div>
@@ -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,8 +318,11 @@ export default {
          vcenterName = ''
        } = _findADT?.extra_option ?? {}

-        if (_find?.name === 'VCenter') {
-          this.isVCenter = true
+        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,
@@ -321,8 +330,9 @@ export default {
              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 || {})
+          ...(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()
    },
--- a/cmdb-ui/src/modules/cmdb/views/discovery/constants.js
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/constants.js
@@ -6,3 +6,7 @@ export const DISCOVERY_CATEGORY_TYPE = {
  COMPONENT: 'components',
  PRIVATE_CLOUD: 'private_cloud'
 }
+
+export const PRIVATE_CLOUD_NAME = {
+  VCenter: 'vcenter'
+}
--- a/cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/editDrawer.vue
@@ -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: {
--- a/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/discovery/index.vue
@@ -299,7 +299,6 @@ export default {
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
-      margin-left: 20px;

      &-btn {
        display: flex;
--- a/cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
+++ b/cmdb-ui/src/modules/cmdb/views/topology_view/index.vue
@@ -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
          }
        }