Merge pull request #647 from veops/dev_ui_241205

Dev UI 241205

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

@@ -207,6 +207,13 @@ export function deleteTrigger(type_id, id) {
   })
 }
 
+export function testTrigger(type_id, id) {
+  return axios({
+    url: `/v0.1/ci_types/${type_id}/triggers/${id}/test_notify`,
+    method: 'post',
+  })
+}
+
 // CMDB的模型和实例的授权接口
 export function grantCiType(type_id, rid, data) {
   return axios({

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

@@ -186,6 +186,9 @@ const cmdb_en = {
         botSelect: 'Please select a robot',
         refAttributeTips: 'The title and content can reference the attribute value of the CIType. The reference method is: {{ attr_name }}',
         webhookRefAttributeTips: 'Request parameters can reference the attribute value of the model. The reference method is: {{ attr_name }}',
+        testSend: 'Test Send',
+        testSendTip: 'Please save the trigger first',
+        testSendSuccess: 'Send Success',
         newTrigger: 'Add trigger',
         editTriggerTitle: 'Edit trigger {name}',
         newTriggerTitle: 'Add trigger {name}',

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

@@ -186,6 +186,9 @@ const cmdb_zh = {
         botSelect: '请选择机器人',
         refAttributeTips: '标题、内容可以引用该模型的属性值，引用方法为: {{ attr_name }}',
         webhookRefAttributeTips: '请求参数可以引用该模型的属性值，引用方法为: {{ attr_name }}',
+        testSend: '测试发送',
+        testSendTip: '请先保存触发器',
+        testSendSuccess: '发送成功',
         newTrigger: '新增触发器',
         editTriggerTitle: '编辑触发器 {name}',
         newTriggerTitle: '新增触发器 {name}',

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

@@ -242,6 +242,18 @@
             </a-col>
           </a-row>
         </a-checkbox-group>
+
+        <a-row v-if="category === 2">
+          <a-button
+            @click="clickTestSend"
+            :disabled="!dateForm.attr_id"
+            type="primary"
+            ghost
+            class="ops-button-ghost"
+          >
+            {{ $t('cmdb.ciType.testSend') }}
+          </a-button>
+        </a-row>
       </a-form-model-item>
     </a-form-model>
     <div class="auto-complete-wrapper" v-if="triggerAction === '3'">
@@ -273,7 +285,7 @@
 
 <script>
 import _ from 'lodash'
-import { addTrigger, updateTrigger, deleteTrigger } from '../../api/CIType'
+import { addTrigger, updateTrigger, deleteTrigger, testTrigger } from '../../api/CIType'
 import FilterComp from '@/components/CMDBFilterComp'
 import EmployeeTreeSelect from '@/views/setting/components/employeeTreeSelect.vue'
 import Webhook from '../../components/webhook'
@@ -569,10 +581,13 @@ export default {
           }
           if (this.triggerId) {
             await updateTrigger(this.CITypeId, this.triggerId, params)
+            this.$message.success(this.$t('editSuccess'))
           } else {
-            await addTrigger(this.CITypeId, params)
+            const res = await addTrigger(this.CITypeId, params)
+            this.triggerId = res.id
+            this.$message.success(this.$t('createSuccess'))
           }
-          this.handleCancel()
+
           if (this.refresh) {
             this.refresh()
           }
@@ -614,6 +629,15 @@ export default {
       this.searchValue = item.label
       this.dag_id = item.id
     },
+    async clickTestSend() {
+      if (!this.triggerId) {
+        this.$message.warning(this.$t('cmdb.ciType.testSendTip'))
+        return
+      }
+
+      await testTrigger(this.CITypeId, this.triggerId)
+      this.$message.success(this.$t('cmdb.ciType.testSendSuccess'))
+    }
   },
 }
 </script>

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

@@ -115,6 +115,7 @@
           :referenceShowAttrNameMap="referenceShowAttrNameMap"
           :referenceCIIdMap="referenceCIIdMap"
           :columnWidth="columnWidth"
+          :addressCITypeId="addressCITypeId"
           @openAssign="openAssign"
           @recycle="handleRecycle"
           @selectChange="handleTableSelectChange"
@@ -182,6 +183,7 @@ export default {
       currentSelectScope: '',
       columns: [],
       attrList: [],
+      attributes: {},
       subnetData: {},
       referenceShowAttrNameMap: {},
       referenceCIIdMap: {},
@@ -212,6 +214,17 @@ export default {
       ],
     }
   },
+  provide() {
+    return {
+      handleSearch: this.getIPList,
+      attrList: () => {
+        return this.attrList
+      },
+      attributes: () => {
+        return this.attributes
+      }
+    }
+  },
   computed: {
     addressNullTip() {
       if (
@@ -314,8 +327,10 @@ export default {
 
     async getColumns() {
       const getAttrRes = await getCITypeAttributesById(this.addressCITypeId)
+      this.attributes = _.cloneDeep(getAttrRes)
+      this.attrList = _.cloneDeep(getAttrRes.attributes)
+
       const attrList = getAttrRes.attributes
-      this.attrList = _.cloneDeep(attrList)
 
       const filterAttrList = _.remove(attrList, (item) => {
         return ['ip', 'subnet_mask', 'assign_status', 'is_used', '_updated_by', '_updated_at'].includes(item.name)
@@ -489,9 +504,14 @@ export default {
       const totalWidth = Object.values(columnWidth).reduce((acc, cur) => acc + cur, 0)
 
       if (totalWidth < wrapWidth) {
-        this.columnWidth = {}
+        this.columnWidth = {
+          ip: 130
+        }
       } else {
-        this.columnWidth = columnWidth
+        this.columnWidth = {
+          ...columnWidth,
+          ip: 130
+        }
       }
     },
 

cmdb-ui/src/modules/cmdb/views/ipam/modules/address/tableIP.vue

@@ -111,6 +111,12 @@
             <a-tooltip v-else :title="$t('cmdb.ipam.assign')">
               <a @click="assignAddress(row)"><ops-icon type="monitor-add2" /></a>
             </a-tooltip>
+
+            <a-tooltip v-if="row._ip_status !== ADDRESS_STATUS.OFFLINE_UNASSIGNED" :title="$t('cmdb.ci.viewRelation')">
+              <a @click="openRelation(row)">
+                <a-icon type="retweet" />
+              </a>
+            </a-tooltip>
           </div>
         </template>
       </vxe-table-column>
@@ -141,6 +147,8 @@
         </template>
       </a-pagination>
     </div>
+
+    <CIDetailDrawer ref="detail" :typeId="addressCITypeId" />
   </div>
 </template>
 
@@ -149,8 +157,13 @@ import _ from 'lodash'
 import { mapState } from 'vuex'
 import { STATUS_COLOR, STATUS_LABEL, ADDRESS_STATUS } from './constants.js'
 
+import CIDetailDrawer from '@/modules/cmdb/views/ci/modules/ciDetailDrawer.vue'
+
 export default {
   name: 'TableIP',
+  components: {
+    CIDetailDrawer
+  },
   props: {
     columns: {
       type: Array,
@@ -171,6 +184,10 @@ export default {
     columnWidth: {
       type: Object,
       default: () => {}
+    },
+    addressCITypeId: {
+      type: Number,
+      default: 0
     }
   },
   data() {
@@ -284,6 +301,12 @@ export default {
       const ips = records?.map?.((item) => item.ip) || []
       this.$emit('selectChange', ips)
     },
+
+    openRelation(row) {
+      if (row._id) {
+        this.$refs.detail.create(row._id, 'tab_2', '2')
+      }
+    }
   }
 }
 </script>