feat(ipam): add drag-and-drop subnet move in tree view

Author: pycook

cmdb-api/api/lib/cmdb/ipam/const.py

@@ -18,6 +18,7 @@ class OperateTypeEnum(BaseEnum):
     DELETE_SUBNET = "5"
     ASSIGN_ADDRESS = "6"
     REVOKE_ADDRESS = "7"
+    MOVE_SUBNET = "8"
 
 
 class SubnetBuiltinAttributes(BaseEnum):

cmdb-api/api/lib/cmdb/ipam/subnet.py

@@ -27,6 +27,8 @@ def __init__(self):
             404, ErrFormat.ipam_subnet_model_not_found.format(BuiltinModelEnum.IPAM_SUBNET))
 
         self.type_id = self.ci_type.id
+        self.scope_type = CITypeCache.get(BuiltinModelEnum.IPAM_SCOPE)
+        self.scope_type_id = self.scope_type.id if self.scope_type else None
 
     def scan_rules(self, oneagent_id, last_update_at=None):
         result = []
@@ -272,6 +274,66 @@ def update(self, _id, **kwargs):
 
         return _id
 
+    def move(self, _id, target_parent_id=None):
+        if target_parent_id in ('', 'null'):
+            target_parent_id = None
+        elif target_parent_id is not None:
+            target_parent_id = int(target_parent_id)
+
+        current_subnet = CIManager.get_ci_by_id(_id, need_children=False)
+        if current_subnet['ci_type'] != BuiltinModelEnum.IPAM_SUBNET:
+            abort(400, ErrFormat.ipam_subnet_not_found)
+
+        if target_parent_id == _id:
+            abort(400, 'Cannot move subnet under itself')
+
+        if target_parent_id is not None and target_parent_id in CIRelationManager.recursive_children(_id):
+            abort(400, 'Cannot move subnet under its descendant')
+
+        parent_type_ids = [self.type_id] + ([self.scope_type_id] if self.scope_type_id else [])
+        current_parent_relations = CIRelation.get_by(only_query=True).join(
+            CI, CI.id == CIRelation.first_ci_id).filter(
+            CIRelation.second_ci_id == _id).filter(
+            CIRelation.ancestor_ids.is_(None)).filter(CI.type_id.in_(parent_type_ids)).all()
+
+        if len(current_parent_relations) > 1:
+            abort(400, 'Subnet has multiple parents')
+
+        current_parent_relation = current_parent_relations[0] if current_parent_relations else None
+        current_parent_id = current_parent_relation.first_ci_id if current_parent_relation else None
+
+        if current_parent_id == target_parent_id:
+            return _id
+
+        target_parent = None
+        if target_parent_id is not None:
+            target_parent = CIManager.get_ci_by_id(target_parent_id, need_children=False)
+            if target_parent['ci_type'] != BuiltinModelEnum.IPAM_SCOPE:
+                abort(400, 'Target node must be a scope or root')
+
+        self.validate_cidr(target_parent_id, current_subnet.get(SubnetBuiltinAttributes.CIDR), _id)
+
+        if current_parent_relation is not None:
+            CIRelationManager.delete(current_parent_relation.id, apply_async=False, valid=False)
+
+        if target_parent_id is not None:
+            CIRelationManager.add(target_parent_id, _id, valid=False, apply_async=False)
+
+        current_parent_name = 'root'
+        if current_parent_id is not None:
+            current_parent = CIManager.get_ci_by_id(current_parent_id, need_children=False)
+            current_parent_name = current_parent.get('name') or current_parent.get(SubnetBuiltinAttributes.CIDR) or 'root'
+
+        target_parent_name = 'root'
+        if target_parent is not None:
+            target_parent_name = target_parent.get('name') or target_parent.get(SubnetBuiltinAttributes.CIDR) or 'root'
+
+        OperateHistoryManager().add(operate_type=OperateTypeEnum.MOVE_SUBNET,
+                                    cidr=current_subnet.get(SubnetBuiltinAttributes.CIDR),
+                                    description='{} -> {}'.format(current_parent_name, target_parent_name))
+
+        return _id
+
     @classmethod
     def delete(cls, _id):
         if CIRelation.get_by(only_query=True).filter(CIRelation.first_ci_id == _id).first():

cmdb-api/api/views/cmdb/ipam/subnet.py

@@ -51,6 +51,15 @@ def delete(self, _id):
         return self.jsonify(id=SubnetManager().delete(_id))
 
 
+class SubnetMoveView(APIView):
+    url_prefix = "/ipam/subnet/<int:_id>/move"
+
+    @perms_role_required(app_cli.app_name, app_cli.resource_type_name, app_cli.op.IPAM,
+                         app_cli.op.read, app_cli.admin_name)
+    def put(self, _id):
+        return self.jsonify(id=SubnetManager().move(_id, request.values.get('target_parent_id')))
+
+
 class SubnetScopeView(APIView):
     url_prefix = ("/ipam/scope", "/ipam/scope/<int:_id>")
 

cmdb-ui/src/modules/cmdb/api/ipam.js

@@ -37,6 +37,14 @@ export function deleteIPAMSubnet(id) {
   })
 }
 
+export function moveIPAMSubnet(id, data) {
+  return axios({
+    url: `/v0.1/ipam/subnet/${id}/move`,
+    method: 'PUT',
+    data
+  })
+}
+
 export function postIPAMScope(data) {
   return axios({
     url: '/v0.1/ipam/scope',

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

@@ -1069,6 +1069,7 @@ if __name__ == "__main__":
         deleteCatalog: 'Delete Catalog',
         updateSubnet: 'Update Subnet',
         deleteSubnet: 'Delete Subnet',
+        moveSubnet: 'Move Subnet',
         revokeAddress: 'Revoke Address',
         operateTime: 'Operate Time',
         operateUser: 'Operate User',

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

@@ -1065,6 +1065,7 @@ if __name__ == "__main__":
         deleteCatalog: '删除目录',
         updateSubnet: '修改子网',
         deleteSubnet: '删除子网',
+        moveSubnet: '移动子网',
         revokeAddress: '地址回收',
         operateTime: '操作时间',
         operateUser: '操作人',

cmdb-ui/src/modules/cmdb/views/ipam/components/ipamTree.vue

@@ -13,12 +13,23 @@
         :treeData="filterTreeData"
         :selectedKeys="treeKey ? [treeKey] : []"
         :defaultExpandedKeys="treeKey ? [treeKey] : []"
+        :draggable="!searchValue"
+        :allowDrop="allowDrop"
+        @dragstart="handleDragStart"
+        @drop="handleDrop"
       >
         <template #title="treeNodeData">
           <div
-            class="ipam-tree-node"
+            :class="[
+              'ipam-tree-node',
+              treeNodeData.isSubnet && !searchValue ? 'ipam-tree-node-draggable' : ''
+            ]"
             @click="clickTreeNode(treeNodeData)"
           >
+            <OpsMoveIcon
+              v-if="treeNodeData.isSubnet && !searchValue"
+              class="ipam-tree-node-drag-icon"
+            />
             <ops-icon
               :type="treeNodeData.icon"
               class="ipam-tree-node-icon"
@@ -102,14 +113,16 @@
 
 <script>
 import _ from 'lodash'
-import { deleteIPAMSubnet, deleteIPAMScope } from '@/modules/cmdb/api/ipam.js'
+import { deleteIPAMSubnet, deleteIPAMScope, moveIPAMSubnet } from '@/modules/cmdb/api/ipam.js'
+import { ops_move_icon as OpsMoveIcon } from '@/core/icons'
 
 import SubnetForm from './subnetForm.vue'
 import CatalogForm from './catalogForm.vue'
 
 export default {
   name: 'IPAMTree',
   components: {
+    OpsMoveIcon,
     SubnetForm,
     CatalogForm
   },
@@ -146,6 +159,21 @@ export default {
     }
   },
   methods: {
+    findNodeByKey(nodes, key) {
+      for (const node of nodes) {
+        if (String(node.key) === String(key)) {
+          return node
+        }
+        if (node.children) {
+          const foundNode = this.findNodeByKey(node.children, key)
+          if (foundNode) {
+            return foundNode
+          }
+        }
+      }
+      return null
+    },
+
     handleTreeDataBySearch(data) {
       const isMatch = data?.title?.indexOf?.(this.searchValue) !== -1
       if (!data?.children?.length) {
@@ -203,6 +231,50 @@ export default {
 
     clickTreeNode(node) {
       this.$emit('updateTreeKey', node.key)
+    },
+
+    allowDrop({ dropNode, dropPosition }) {
+      if (this.searchValue || dropPosition !== 0) {
+        return false
+      }
+
+      const targetNode = this.findNodeByKey(this.treeData, dropNode?.eventKey)
+      return targetNode?.key === 'all' || !targetNode?.isSubnet
+    },
+
+    handleDragStart(info) {
+      const dragNode = this.findNodeByKey(this.treeData, info?.node?.eventKey)
+      if (!dragNode?.isSubnet) {
+        const event = info && info.event
+        if (event && event.preventDefault) {
+          event.preventDefault()
+        }
+        if (event && event.stopPropagation) {
+          event.stopPropagation()
+        }
+        return false
+      }
+    },
+
+    async handleDrop(info) {
+      const dragNode = this.findNodeByKey(this.treeData, info?.dragNode?.eventKey)
+      const targetNode = this.findNodeByKey(this.treeData, info?.node?.eventKey)
+
+      if (!dragNode?.isSubnet || !targetNode) {
+        return
+      }
+
+      const targetParentId = targetNode.key === 'all' ? null : targetNode.key
+      if (`${dragNode.parentId || ''}` === `${targetParentId || ''}`) {
+        return
+      }
+
+      await moveIPAMSubnet(dragNode.key, {
+        target_parent_id: targetParentId
+      })
+
+      this.$message.success(this.$t('editSuccess'))
+      this.refreshData()
     }
   }
 }
@@ -223,16 +295,25 @@ export default {
     height: 100%;
 
     /deep/ .ant-tree {
+      .ant-tree-switcher {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 32px;
+        line-height: 32px;
+      }
+
       .ant-tree-node-content-wrapper {
-        width: calc(100% - 24px);
+        width: calc(100% - 18px);
         padding: 0px;
         display: inline-block;
         height: fit-content;
 
         .ant-tree-title {
           display: inline-block;
           width: 100%;
-          padding: 0 6px;
+          padding: 0 4px 0 2px;
         }
       }
 
@@ -263,6 +344,16 @@ export default {
       flex-shrink: 0;
     }
 
+    &-drag-icon {
+      width: 12px;
+      height: 12px;
+      margin-right: 1px;
+      flex-shrink: 0;
+      color: #A5A9BC;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
     &-title {
       margin-left: 6px;
       font-size: 14px;
@@ -306,10 +397,22 @@ export default {
     }
 
     &:hover {
+      .ipam-tree-node-drag-icon {
+        opacity: 1;
+      }
+
       .ipam-tree-node-action {
         display: inline-block;
       }
     }
+
+    &-draggable {
+      cursor: grab;
+
+      &:active {
+        cursor: grabbing;
+      }
+    }
   }
 }
 </style>

cmdb-ui/src/modules/cmdb/views/ipam/index.vue

@@ -173,17 +173,14 @@ export default {
       }
 
       const allCount = treeData.reduce((acc, cur) => acc + cur.count, 0)
-      const rootShowSubnetBtn = treeData.every((item) => item.ci_type === SUB_NET_CITYPE_NAME)
-      const rootShowCatalogBtn = treeData.every((item) => item.ci_type === SCOPE_CITYPE_NAME)
-
       treeData.unshift({
         key: 'all',
         title: this.$t('all'),
         count: allCount,
         icon: 'veops-entire_network_',
         iconColor: '#2F54EB',
-        showCatalogBtn: rootShowCatalogBtn,
-        showSubnetBtn: rootShowSubnetBtn,
+        showCatalogBtn: true,
+        showSubnetBtn: true,
         parentId: '',
         class: 'ipam-tree-node-all'
       })
@@ -217,14 +214,13 @@ export default {
         return this.handleTreeData(item, type2name, key)
       })
 
-      const showSubnetBtn = children.every((item) => item.ci_type === SUB_NET_CITYPE_NAME)
       return {
         key,
         title,
         icon,
         iconColor,
-        showCatalogBtn: !isSubnet && !showSubnetBtn,
-        showSubnetBtn: showSubnetBtn,
+        showCatalogBtn: !isSubnet,
+        showSubnetBtn: true,
         isSubnet,
         parentId,
         ...data,

cmdb-ui/src/modules/cmdb/views/ipam/modules/history/operation/constants.js

@@ -7,6 +7,7 @@ export const OPERATE_TYPE = {
   DELETE_SUBNET: '5',
   ASSIGN_ADDRESS: '6',
   REVOKE_ADDRESS: '7',
+  MOVE_SUBNET: '8',
 }
 
 export const OPERATE_TYPE_TEXT = {
@@ -18,6 +19,7 @@ export const OPERATE_TYPE_TEXT = {
   [OPERATE_TYPE.DELETE_SUBNET]: 'cmdb.ipam.deleteSubnet',
   [OPERATE_TYPE.ASSIGN_ADDRESS]: 'cmdb.ipam.addressAssign',
   [OPERATE_TYPE.REVOKE_ADDRESS]: 'cmdb.ipam.revokeAddress',
+  [OPERATE_TYPE.MOVE_SUBNET]: 'cmdb.ipam.moveSubnet',
 }
 
 export const OPERATE_TYPE_COLOR = {
@@ -53,4 +55,8 @@ export const OPERATE_TYPE_COLOR = {
     color: '#0AA5A8',
     backgroundColor: '#E8FFFB'
   },
+  [OPERATE_TYPE.MOVE_SUBNET]: {
+    color: '#722ED1',
+    backgroundColor: '#F9F0FF'
+  },
 }