feat(ui): add navigation buttons to the model configuration page and resource view page

Author: LHRUN

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

@@ -38,6 +38,7 @@ const cmdb_en = {
         attributeAD: 'Attributes AutoDiscovery',
         relationAD: 'Relation AutoDiscovery',
         grant: 'Grant',
+        resourceViewTip: 'Not subscribed yet. Please go to the Preference page to complete your subscription.',
         addGroup: 'New Group',
         editGroup: 'Edit Group',
         group: 'Group',

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

@@ -38,6 +38,7 @@ const cmdb_zh = {
         attributeAD: '属性自动发现',
         relationAD: '关系自动发现',
         grant: '权限配置',
+        resourceViewTip: '暂未订阅, 请先到我的订阅页面完成订阅',
         addGroup: '新增分组',
         editGroup: '修改分组',
         group: '分组',

cmdb-ui/src/modules/cmdb/views/ci/instanceList.vue

@@ -47,6 +47,13 @@
                 <a-icon type="star" />
                 {{ $t('cmdb.preference.cancelSub') }}
               </a-menu-item>
+              <a-menu-item
+                key="citypeConfig"
+                @click="handleCITypeConfig"
+              >
+                <ops-icon type="ops-cmdb-citype" />
+                {{ $t('cmdb.menu.citypeManage') }}
+              </a-menu-item>
             </a-menu>
           </a-dropdown>
         </a-space>
@@ -782,6 +789,28 @@ export default {
         },
       })
     },
+
+    handleCITypeConfig() {
+      const { id, name } = this.CIType || {}
+      if (id && name) {
+        roleHasPermissionToGrant({
+          app_id: 'cmdb',
+          resource_type_name: 'CIType',
+          perm: 'config',
+          resource_name: name,
+        }).then((res) => {
+          if (res?.result) {
+            const storageId = `null%${id}%${name}`
+            localStorage.setItem('ops_cityps_currentId', storageId)
+            localStorage.setItem('ops_model_config_tab_key', '1')
+            window.open('/cmdb/ci_types', '_blank')
+          } else {
+            this.$message.error(this.$t('noPermission'))
+          }
+        })
+      }
+    },
+
     handlePerm() {
       roleHasPermissionToGrant({
         app_id: 'cmdb',

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

@@ -20,6 +20,18 @@
           <RelationTable isInGrantComp :CITypeId="CITypeId" :CITypeName="CITypeName"></RelationTable>
         </div>
       </a-tab-pane>
+
+      <a-button
+        slot="tabBarExtraContent"
+        type="primary"
+        ghost
+        size="small"
+        class="ops-button-ghost ops-tab-button"
+        @click="jumpResourceView"
+      >
+        <ops-icon type="ops-cmdb-resource" />
+        {{ $t('cmdb.menu.ciTable') }}
+      </a-button>
     </a-tabs>
   </a-card>
 </template>
@@ -52,6 +64,10 @@ export default {
       type: String,
       default: '',
     },
+    preferenceData: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {
@@ -91,6 +107,16 @@ export default {
             break
         }
       })
+    },
+    jumpResourceView() {
+      const isSub = this?.preferenceData?.type_ids?.includes(this.CITypeId)
+
+      if (!isSub) {
+        this.$message.error(this.$t('cmdb.ciType.resourceViewTip'))
+        return
+      }
+      localStorage.setItem('ops_ci_typeid', this.CITypeId)
+      window.open('/cmdb/instances/types', '_blank')
     }
   },
 }

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

@@ -182,7 +182,12 @@
       </template>
       <template #two>
         <div class="ci-types-right">
-          <CITypeDetail v-if="currentCId" :CITypeId="currentCId" :CITypeName="currentCName" />
+          <CITypeDetail
+            v-if="currentCId"
+            :CITypeId="currentCId"
+            :CITypeName="currentCName"
+            :preferenceData="preferenceData"
+          />
           <div v-else class="ci-types-right-empty">
             <a-empty :image="emptyImage" description=""></a-empty>
             <a-button icon="plus" size="small" type="primary" @click="handleCreateCiFromEmpty">{{
@@ -413,6 +418,7 @@ import {
   exportCITypeGroups
 } from '@/modules/cmdb/api/ciTypeGroup'
 import { searchAttributes, getCITypeAttributesById } from '@/modules/cmdb/api/CITypeAttr'
+import { getPreference } from '@/modules/cmdb/api/preference'
 import CreateNewAttribute from './ceateNewAttribute.vue'
 import CITypeDetail from './ciTypedetail.vue'
 import emptyImage from '@/assets/data_empty.png'
@@ -489,7 +495,9 @@ export default {
 
       searchValue: '',
       modelExportVisible: false,
-      pageLoading: false
+      pageLoading: false,
+
+      preferenceData: {}
     }
   },
   computed: {
@@ -510,23 +518,29 @@ export default {
     },
     currentGId() {
       if (this.currentId) {
-        return Number(this.currentId.split('%')[0])
+        const id = this?.currentId?.split?.('%')?.[0]
+        if (id !== 'null') {
+          return Number(id)
+        }
+        return null
       }
       return null
     },
     currentCId() {
       if (this.currentId) {
-        if (this.currentId.split('%')[1] !== 'null') {
-          return Number(this.currentId.split('%')[1])
+        const id = this?.currentId?.split?.('%')?.[1]
+        if (id !== 'null') {
+          return Number(id)
         }
         return null
       }
       return null
     },
     currentCName() {
       if (this.currentId) {
-        if (this.currentId.split('%')[2] !== 'null') {
-          return this.currentId.split('%')[2]
+        const name = this?.currentId?.split?.('%')?.[2]
+        if (name !== 'null') {
+          return name
         }
         return null
       }
@@ -598,6 +612,7 @@ export default {
     this.pageLoading = false
 
     this.getAttributes()
+    this.getPreference()
   },
   methods: {
     getAllDepAndEmployee() {
@@ -608,6 +623,13 @@ export default {
     handleSearch(e) {
       this.searchValue = e.target.value
     },
+
+    getPreference() {
+      getPreference().then((res) => {
+        this.preferenceData = res || {}
+      })
+    },
+
     async loadCITypes(isResetCurrentId = false, isInit = false) {
       const groups = await getCITypeGroupsConfig({ need_other: true })
       let alreadyReset = false
@@ -632,8 +654,10 @@ export default {
         if (isInit) {
           const isMatch = groups.some((g) => {
             const matchGroup = `${g?.id}%null%null` === this.currentId
-            const matchCITypes = g?.ci_types?.some((item) => `${g?.id}%${item?.id}%${item?.name}` === this.currentId)
-            return matchGroup || matchCITypes
+            const matchCIType = g?.ci_types?.some((item) => {
+              return `${g?.id}%${item?.id}%${item?.name}` === this.currentId || `null%${item?.id}%${item?.name}` === this.currentId
+            })
+            return matchGroup || matchCIType
           })
 
           if (!isMatch) {