Merge pull request #691 from veops/dev_ui_250409

feat(ui): CI Type[AD] - update snmp configuration style

cmdb-ui/src/modules/cmdb/components/attrMapTable/index.vue

@@ -132,6 +132,7 @@ export default {
       /deep/ .ant-select-selection {
         height: 28px;
         line-height: 28px;
+        border: none;
 
         .ant-select-selection__rendered {
           height: 28px;

cmdb-ui/src/modules/cmdb/lang/en.js

@@ -266,8 +266,13 @@ const cmdb_en = {
         recursiveOrNot: 'Recursive Or Not',
         recursiveTip: 'Scanning Configuration: When disabling recursion, the node list must be configured.',
         maximumDepth: 'Maximum Depth',
-        snmpFormTip1: 'Node list: need to be configured separately if it is not the default SNMP version and Community\nTimeout: timeout for establishing SNMP connection\nRetries: number of retries for establishing SNMP connection',
+        snmpFormTip1: 'If SNMP is not the default, Community and version need to be configured separately',
-        snmpFormTip2: 'Initial Node: the first node to start scanning, if not configured then the scanning starts recursively from the default gateway\nWhether recursive: on by default, it means that all the network devices and topology relationships are found as far as possible; if off, only the devices in the node list are scanned\nMaximum Depth: the depth of the topology of the network devices\nCIDR: the results of the scanning are filtered with CIDR, if not configured then it will not be filtered. Format: 192.168.1.0/24',
+        snmpFormTip2: 'Timeout for establishing SNMP connection',
+        snmpFormTip3: 'Number of retries to establish an SNMP connection',
+        snmpFormTip4: 'The first node to start scanning, or recursively from the default gateway if unconfigured',
+        snmpFormTip5: 'Enabled by default to discover all network devices and topology relationships as much as possible, and disabled to scan only the devices in the node list',
+        snmpFormTip6: 'Depth of network device topology',
+        snmpFormTip7: 'The results of the scan are filtered with CIDR, not filtered if not configured. Format: 192.168.1.0/24',
         nodeSettingIp: 'Network device IP address',
         nodeSettingIpTip: 'Please enter the ip address',
         nodeSettingIpTip1: 'ip address format error',

cmdb-ui/src/modules/cmdb/lang/zh.js

@@ -266,8 +266,13 @@ const cmdb_zh = {
         recursiveOrNot: '是否递归',
         recursiveTip: '扫描配置关闭递归时, 必须配置节点列表',
         maximumDepth: '最大深度',
-        snmpFormTip1: '节点列表：如果不是默认的SNMP版本和Community则需要单独配置\n超时时间：建立SNMP连接的超时时间\n重试次数：建立SNMP连接的重试次数',
+        snmpFormTip1: '如果不是默认的SNMP, Community和版本需要单独配置',
-        snmpFormTip2: '初始节点: 开始扫描的第一个节点，如果不配置则是从默认网关开始递归扫描\n是否递归: 默认开启，表示尽可能发现所有网络设备和拓扑关系；如果关闭，则仅扫描节点列表里的设备\n最大深度: 网络设备拓扑的深度\nCIDR：扫描的结果用CIDR进行过滤，不配置则不会过滤。格式: 192.168.1.0/24',
+        snmpFormTip2: '建立SNMP连接的超时时间',
+        snmpFormTip3: '建立SNMP连接的重试次数',
+        snmpFormTip4: '开始扫描的第一个节点，如果不配置则是从默认网关开始递归扫描',
+        snmpFormTip5: '默认开启，表示尽可能发现所有网络设备和拓扑关系, 如果关闭，则仅扫描节点列表里的设备',
+        snmpFormTip6: '网络设备拓扑的深度',
+        snmpFormTip7: '扫描的结果用CIDR进行过滤，不配置则不会过滤。格式: 192.168.1.0/24',
         nodeSettingIp: '网络设备IP地址',
         nodeSettingIpTip: '请输入 ip 地址',
         nodeSettingIpTip1: 'ip地址格式错误',

cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/SNMPConfig/index.vue

@@ -1,7 +1,6 @@
 <template>
   <a-form-model
     :model="formData"
-    labelAlign="right"
     :labelCol="labelCol"
     :wrapperCol="{ span: 6 }"
     class="attr-ad-form"
@@ -30,6 +29,7 @@
 
     <a-form-model-item
       :label="$t('cmdb.ciType.timeout')"
+      :extra="$t('cmdb.ciType.snmpFormTip2')"
     >
       <a-input-number
         v-model="formData.timeout"
@@ -40,6 +40,7 @@
 
     <a-form-model-item
       :label="$t('cmdb.ciType.retryCount')"
+      :extra="$t('cmdb.ciType.snmpFormTip3')"
     >
       <a-input-number
         v-model="formData.retries"

cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/SNMPScanningConfig/index.vue

@@ -1,13 +1,13 @@
 <template>
   <a-form-model
     :model="formData"
-    labelAlign="right"
     :labelCol="labelCol"
     :wrapperCol="{ span: 6 }"
     class="attr-ad-form"
   >
     <a-form-model-item
       :label="$t('cmdb.ciType.initialNode')"
+      :extra="$t('cmdb.ciType.snmpFormTip4')"
     >
       <a-input
         v-model="formData.initial_node"
@@ -17,12 +17,14 @@
 
     <a-form-model-item
       :label="$t('cmdb.ciType.recursiveOrNot')"
+      :extra="$t('cmdb.ciType.snmpFormTip5')"
     >
       <a-switch v-model="formData.recursive_scan" />
     </a-form-model-item>
 
     <a-form-model-item
       :label="$t('cmdb.ciType.maximumDepth')"
+      :extra="$t('cmdb.ciType.snmpFormTip6')"
     >
       <a-input-number
         v-model="formData.max_depth"

cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/cidrTags/index.vue

@@ -2,7 +2,8 @@
   <a-form-item
     label="CIDR"
     :labelCol="labelCol"
-    :wrapperCol="{ span: 18 }"
+    :wrapperCol="{ span: 6 }"
+    :extra="$t('cmdb.ciType.snmpFormTip7')"
   >
     <div class="cidr-tag">
       <div

cmdb-ui/src/modules/cmdb/views/ci_types/attrAD/nodeSetting/index.vue

@@ -1,9 +1,14 @@
 <template>
   <a-form-item
-    :label="$t('cmdb.ciType.nodeList')"
     :labelCol="labelCol"
     :wrapperCol="{ span: 18 }"
   >
+    <span slot="label">
+      {{ $t('cmdb.ciType.nodeList') }}
+      <a-tooltip :title="$t('cmdb.ciType.snmpFormTip1')">
+        <a-icon type="question-circle" />
+      </a-tooltip>
+    </span>
     <div class="node-setting-wrap">
       <ops-table
         :data="nodes"

cmdb-ui/src/modules/cmdb/views/ci_types/attrADTabpane.vue

@@ -58,30 +58,12 @@
       <div class="attr-ad-form attr-ad-snmp-form">
         <div class="attr-ad-snmp-form-title">
           {{ $t('cmdb.ciType.SNMPConfiguration') }}
-          <a-tooltip
-            :title="$t('cmdb.ciType.snmpFormTip1')"
-            :overlayStyle="{
-              whiteSpace: 'pre',
-              textWrap: 'wrap'
-            }"
-          >
-            <a-icon type="question-circle" />
-          </a-tooltip>
         </div>
         <NodeSetting ref="nodeSetting" />
         <SNMPConfig v-model="SNMPScanningConfigForm" />
 
         <div class="attr-ad-snmp-form-title">
           {{ $t('cmdb.ciType.scanningConfiguration') }}
-          <a-tooltip
-            :title="$t('cmdb.ciType.snmpFormTip2')"
-            :overlayStyle="{
-              whiteSpace: 'pre',
-              textWrap: 'wrap'
-            }"
-          >
-            <a-icon type="question-circle" />
-          </a-tooltip>
         </div>
         <SNMPScanningConfig v-model="SNMPScanningConfigForm" />
         <CIDRTags v-model="SNMPScanningConfigForm.cidr" />
@@ -310,7 +292,7 @@ export default {
         recursive_scan: true,
         max_depth: 5,
         cidr: []
-      }, // snmp scanning parameter form data
+      }, // snmp scanning config form data
     }
   },
   provide() {
@@ -442,7 +424,7 @@ export default {
           cidr = []
         } = extra_option
 
-        const InitializeNodes = nodes?.length ? nodes : [
+        const initializeNodes = nodes?.length ? nodes : [
           {
             id: uuidv4(),
             ip: '',
@@ -451,7 +433,7 @@ export default {
           },
         ]
         this.$nextTick(() => {
-          this.$refs.nodeSetting.initNodesFunc(InitializeNodes)
+          this.$refs.nodeSetting.initNodesFunc(initializeNodes)
         })
 
         let cidrList = []
@@ -825,14 +807,14 @@ export default {
     font-size: 16px;
     color: #000000;
     margin-bottom: 12px;
-
-    & > i {
-      font-size: 14px;
-    }
   }
 
   /deep/ .ant-input-number {
     width: 100%;
   }
+
+  /deep/ .ant-form-extra {
+    font-size: 12px;
+  }
 }
 </style>