diff --git a/src/components/ActionsGroup/index.vue b/src/components/ActionsGroup/index.vue
index fa3f50c05..d9f11442d 100644
--- a/src/components/ActionsGroup/index.vue
+++ b/src/components/ActionsGroup/index.vue
@@ -119,6 +119,11 @@ export default {
         if (!has) {
           continue
         }
+        // 是否有分割线
+        const divided = this.checkItem(action, 'divided', false)
+        delete action['divided']
+        action.divided = divided
+
         // 是否是disabled
         const can = this.checkItem(action, 'can')
         delete action['can']
diff --git a/src/components/AutoDataForm/index.vue b/src/components/AutoDataForm/index.vue
index 2c9211331..8d443ed63 100644
--- a/src/components/AutoDataForm/index.vue
+++ b/src/components/AutoDataForm/index.vue
@@ -131,7 +131,8 @@ export default {
     },
     generateField(name) {
       let field = { id: name, prop: name, el: {}, attrs: {}}
-      const fieldMeta = this.meta[name] || {}
+      // const fieldMeta = this.meta[name] || this.meta['attrs']['children'][name] || {}
+      const fieldMeta = this.meta[name] || ((this.meta['attrs']) ? (this.meta['attrs']['children'][name]) : {})
       field.label = fieldMeta.label
       field = this.generateFieldByType(fieldMeta.type, field, fieldMeta)
       field = this.generateFieldByName(name, field)
@@ -149,12 +150,26 @@ export default {
       })
       return this.generateFields(fields)
     },
+    genreateFieldAttrs(name) {
+      const fields = []
+      Object.keys(this.meta[name]['children']).forEach((key, i) => {
+        const filed = this.generateField(key)
+        fields.push(filed)
+      })
+
+      return fields
+    },
     generateFields(data) {
       let fields = []
       for (let field of data) {
         if (field instanceof Array) {
           const items = this.generateFieldGroup(field)
           fields = [...fields, ...items]
+        } else if (field === 'attrs') {
+          const items = this.genreateFieldAttrs(field)
+          fields = [...fields, ...items]
+          // 修改title插入ID
+          this.groups[this.groups.length - 1].name = items[0].id
         } else if (typeof field === 'string') {
           field = this.generateField(field)
           fields.push(field)
diff --git a/src/i18n/langs/cn.json b/src/i18n/langs/cn.json
index d46d0347e..cfb77958d 100644
--- a/src/i18n/langs/cn.json
+++ b/src/i18n/langs/cn.json
@@ -2,6 +2,22 @@
   "": "",
   "applications": {
     "": "",
+    "applicationsType": {
+      "chrome": "Chrome",
+      "mysql_workbench": "MySQL Workbench",
+      "vmware_client":"Vmware Client",
+      "custom":"Custom",
+      "mysql": "MySQL",
+      "oracle": "Oracle",
+      "postgresql": "PostgreSQL",
+      "mariadb": "MariaDB",
+      "k8s": "Kubernetes"
+    },
+    "applicationsCategory": {
+      "remote_app": "远程应用",
+      "db": "数据库应用",
+      "cloud": "云应用"
+    },
     "appPath": "应用路径",
     "appType": "应用类型",
     "asset": "资产",
@@ -32,7 +48,8 @@
     "Custom": "自定义",
     "cluster": "集群",
     "kubernetes":"Kubernetes",
-    "clusterHelpTextMessage": "例如：https://172.16.8.8:8443"
+    "clusterHelpTextMessage": "例如：https://172.16.8.8:8443",
+    "DBInfo": "数据库信息"
   },
   "assets": {
     "Action": "动作",
@@ -113,6 +130,7 @@
     "RefreshHardware": "更新硬件信息",
     "RemoteAppListHelpMessage": "使用此功能前，请确保已将应用加载器上传到应用服务器并成功发布为一个 RemoteApp 应用 <b><a href='https://github.com/jumpserver/Jmservisor/releases'>下载应用加载器</a></b>",
     "RemoteApps": "远程应用",
+    "Applications": "应用",
     "RemoteType": "应用类型",
     "RemoveFromCurrentNode": "从节点移除",
     "ReplaceNodeAssetsAdminUserWithThis": "替换资产的管理员",
@@ -415,6 +433,8 @@
     "refreshSuccess": "刷新成功",
     "remoteApp": "远程应用",
     "remoteAppCount": "远程应用数量",
+    "appsCount": "应用数量",
+    "appsList":"应用列表",
     "DatabaseAppCount": "数据库应用数量",
     "KubernetesAppCount": "Kubernetes应用数量",
     "systemUserCount": "系统用户数量",
@@ -506,6 +526,11 @@
     "RemoteAppPermissionCreate": "创建远程应用授权规则",
     "RemoteAppPermissionDetail": "远程应用授权详情",
     "RemoteAppPermissionUpdate": "更新远程应用授权规则",
+    "ApplicationDetail": "应用详情",
+    "ApplicationPermission": "应用授权",
+    "ApplicationPermissionCreate": "创建应用授权规则",
+    "ApplicationPermissionDetail": "应用授权详情",
+    "ApplicationPermissionUpdate": "更新应用授权规则",
     "RemoteAppUpdate": "更新远程应用",
     "ReplayStorageUpdate": "更新录像存储",
     "SessionDetail": "会话详情",
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index 030217c19..6ecfb4330 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -2,6 +2,22 @@
   "": "",
   "applications": {
     "": "",
+    "applicationsType": {
+      "chrome": "Chrome",
+      "mysql_workbench": "MySQL Workbench",
+      "vmware_client":"Vmware Client",
+      "custom":"Custom",
+      "mysql": "MySQL",
+      "oracle": "Oracle",
+      "postgresql": "PostgreSQL",
+      "mariadb": "MariaDB",
+      "k8s": "kubernetes"
+    },
+    "applicationsCategory": {
+      "remote_app": "Remote app",
+      "db": "Database app",
+      "cloud": "Cloud app"
+    },
     "appPath": "App path",
     "appType": "App type",
     "asset": "Asset",
@@ -32,7 +48,8 @@
     "Custom": "Custom",
     "cluster": "Cluster",
     "kubernetes":"Kubernetes",
-    "clusterHelpTextMessage": "Tips: https://172.16.8.8:8443"
+    "clusterHelpTextMessage": "Tips: https://172.16.8.8:8443",
+    "DBInfo": "Database Info"
   },
   "assets": {
     "Action": "Action",
@@ -113,6 +130,7 @@
     "RefreshHardware": "Refresh hardware",
     "RemoteAppListHelpMessage": "Before using this feature, make sure that the application loader has been uploaded to the application server and successfully published as a RemoteApp application <b><a href='https://github.com/jumpserver/Jmservisor/releases'> Download application loader</a></b>",
     "RemoteApps": "Remote apps",
+    "Applications": "Applications",
     "RemoteType": "Remote type",
     "RemoveFromCurrentNode": "Remove from node",
     "ReplaceNodeAssetsAdminUserWithThis": "Replace node assets admin user with this",
@@ -414,6 +432,8 @@
     "refreshSuccess": "Refresh success",
     "remoteApp": "RemoteApp",
     "remoteAppCount": "RemoteApp count",
+    "appsCount": "App count",
+    "appsList":"App list",
     "DatabaseAppCount": "DatabaseApp count",
     "KubernetesAppCount": "KubernetesApp count",
     "systemUserCount": "System user count",
diff --git a/src/layout/components/GenericCreateUpdateForm/index.vue b/src/layout/components/GenericCreateUpdateForm/index.vue
index 491ecda72..198e0947d 100644
--- a/src/layout/components/GenericCreateUpdateForm/index.vue
+++ b/src/layout/components/GenericCreateUpdateForm/index.vue
@@ -13,6 +13,7 @@
 </template>
 <script>
 import AutoDataForm from '@/components/AutoDataForm'
+import deepmerge from 'deepmerge'
 export default {
   name: 'GenericCreateUpdateForm',
   components: {
@@ -172,6 +173,9 @@ export default {
       let object = this.object
       if (object === null) {
         object = await this.getObjectDetail()
+        if (object['attrs']) {
+          object = deepmerge(object, object['attrs'])
+        }
         this.$emit('update:object', object)
       }
       return object
diff --git a/src/layout/components/Page/LicenseExpireTip.vue b/src/layout/components/Page/LicenseExpireTip.vue
index 9353eb100..aaa170158 100644
--- a/src/layout/components/Page/LicenseExpireTip.vue
+++ b/src/layout/components/Page/LicenseExpireTip.vue
@@ -38,15 +38,15 @@ export default {
     }
   },
   mounted() {
-    if (this.publicSettings.XPACK_ENABLED && this.currentUser.role === 'Admin') {
-      this.$axios.get('/api/v1/xpack/license/detail').then(res => {
-        this.licenseData = res
-      }).finally(() => {
-        this.loading = false
-      })
-    } else {
-      this.loading = false
-    }
+    // if (this.publicSettings.XPACK_ENABLED && this.currentUser.role === 'Admin') {
+    //   this.$axios.get('/api/v1/xpack/license/detail').then(res => {
+    //     this.licenseData = res
+    //   }).finally(() => {
+    //     this.loading = false
+    //   })
+    // } else {
+    //   this.loading = false
+    // }
   },
   methods: {
     getIntervalDays(date) {
diff --git a/src/router/perms.js b/src/router/perms.js
index f17b53706..799546400 100644
--- a/src/router/perms.js
+++ b/src/router/perms.js
@@ -31,107 +31,45 @@ const assetPermissionRoutes = [
   }
 ]
 
-const remoteAppPermissionRoutes = [
+const ApplicationPermissionRoutes = [
   {
-    path: 'remote-app-permissions',
+    path: 'app-permissions',
     component: empty,
-    meta: { title: i18n.t('route.RemoteAppPermission'), licenseRequired: true },
+    meta: { title: i18n.t('route.ApplicationPermission'), licenseRequired: true },
     redirect: '',
     children: [
       {
         path: '',
-        name: 'RemoteAppPermissionList',
-        component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionList'),
-        meta: { title: i18n.t('route.RemoteApp'), activeMenu: '/perms/remote-app-permissions' }
-
+        name: 'ApplicationPermissionList',
+        component: () => import('@/views/perms/ApplicationPermission/ApplicationPermissionList'),
+        meta: { title: i18n.t('route.ApplicationPermission'), activeMenu: '/perms/app-permissions' }
       },
       {
         path: 'create',
-        component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate'),
-        name: 'RemoteAppPermissionCreate',
+        component: () => import('@/views/perms/ApplicationPermission/ApplicationPermissionCreateUpdate'),
+        name: 'ApplicationPermissionCreate',
         hidden: true,
-        meta: { title: i18n.t('route.RemoteAppPermissionCreate'), activeMenu: '/perms/remote-app-permissions', action: 'create' }
-      },
-      {
-        path: 'update',
-        component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate'),
-        name: 'RemoteAppPermissionUpdate',
-        hidden: true,
-        meta: { title: i18n.t('route.RemoteAppPermissionUpdate'), activeMenu: '/perms/remote-app-permissions', action: 'update' }
+        meta: { title: i18n.t('route.ApplicationPermissionCreate'), activeMenu: '/perms/app-permissions', action: 'create' }
       },
       {
         path: ':id',
-        component: () => import('@/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index'),
-        name: 'RemoteAppPermissionDetail',
+        component: () => import('@/views/perms/ApplicationPermission/ApplicationPermissionDetail/index'),
+        name: 'ApplicationPermissionDetail',
         hidden: true,
-        meta: { title: i18n.t('route.RemoteAppPermissionDetail'), activeMenu: '/perms/remote-app-permissions' }
+        meta: { title: i18n.t('route.ApplicationPermissionDetail'), activeMenu: '/perms/remote-app-permissions' }
+      },
+      {
+        path: ':id/update',
+        component: () => import('@/views/perms/ApplicationPermission/ApplicationPermissionCreateUpdate'),
+        name: 'ApplicationPermissionUpdate',
+        hidden: true,
+        meta: { title: i18n.t('route.ApplicationPermissionUpdate'), activeMenu: '/perms/app-permissions', action: 'update' }
       }]
   }
 
 ]
 
-const databasePermissionRoutes = [
-  {
-    path: 'database-app-permissions',
-    name: 'DatabaseAppPermissionList',
-    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionList'),
-    meta: { title: i18n.t('route.DatabaseApp') }
-  },
-  {
-    path: 'database-app-permissions/create',
-    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate'), // Parent router-view
-    name: 'DatabaseAppPermissionCreate',
-    hidden: true,
-    meta: { title: i18n.t('route.DatabaseAppPermissionCreate'), activeMenu: '/perms/database-app-permissions' }
-  },
-  {
-    path: 'database-app-permissions/update',
-    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate'), // Parent router-view
-    name: 'DatabaseAppPermissionUpdate',
-    hidden: true,
-    meta: { title: i18n.t('route.DatabaseAppPermissionUpdate'), activeMenu: '/perms/database-app-permissions', action: 'update' }
-  },
-  {
-    path: 'database-app-permissions/:id',
-    component: () => import('@/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index'),
-    name: 'DatabaseAppPermissionDetail',
-    hidden: true,
-    meta: { title: i18n.t('route.DatabaseAppPermissionDetail'), activeMenu: '/perms/database-app-permissions' }
-  }
-]
-
-const kubernetesPermissionRoutes = [
-  {
-    path: 'kubernetes-app-permissions',
-    name: 'KubernetesAppPermissionList',
-    component: () => import('@/views/perms/KubernetesAppPermission/KubernetesAppPermissionList'),
-    meta: { title: i18n.t('route.KubernetesApp') }
-  },
-  {
-    path: 'kubernetes-app-permissions/create',
-    component: () => import('@/views/perms/KubernetesAppPermission/KubernetesAppPermissionCreateUpdate'), // Parent router-view
-    name: 'KubernetesAppPermissionCreate',
-    hidden: true,
-    meta: { title: i18n.t('route.KubernetesAppPermissionCreate'), activeMenu: '/perms/kubernetes-app-permissions' }
-  },
-  {
-    path: 'kubernetes-app-permissions/update',
-    component: () => import('@/views/perms/KubernetesAppPermission/KubernetesAppPermissionCreateUpdate'), // Parent router-view
-    name: 'KubernetesAppPermissionUpdate',
-    hidden: true,
-    meta: { title: i18n.t('route.KubernetesAppPermissionUpdate'), activeMenu: '/perms/kubernetes-app-permissions', action: 'update' }
-  },
-  {
-    path: 'kubernetes-app-permissions/:id',
-    component: () => import('@/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/index'),
-    name: 'KubernetesAppPermissionDetail',
-    hidden: true,
-    meta: { title: i18n.t('route.KubernetesAppPermissionDetail'), activeMenu: '/perms/kubernetes-app-permissions' }
-  }
-]
 export default [
   ... assetPermissionRoutes,
-  ... remoteAppPermissionRoutes,
-  ... databasePermissionRoutes,
-  ... kubernetesPermissionRoutes
+  ... ApplicationPermissionRoutes
 ]
diff --git a/src/userviews/apps/DatabaseApp.vue b/src/userviews/apps/DatabaseApp.vue
index 6d1b6b4d6..e8143747d 100644
--- a/src/userviews/apps/DatabaseApp.vue
+++ b/src/userviews/apps/DatabaseApp.vue
@@ -21,7 +21,7 @@ export default {
   data() {
     return {
       tableConfig: {
-        url: `/api/v1/perms/users/database-apps/`,
+        url: `/api/v1/perms/users/applications/?category=db`,
         columns: [
           {
             prop: 'name',
@@ -30,7 +30,7 @@ export default {
             sortable: true
           },
           {
-            prop: 'get_type_display',
+            prop: 'type_display',
             align: 'center',
             label: this.$t('assets.Type')
           },
diff --git a/src/userviews/apps/KubernetesApp.vue b/src/userviews/apps/KubernetesApp.vue
index a735de3a2..64df73e56 100644
--- a/src/userviews/apps/KubernetesApp.vue
+++ b/src/userviews/apps/KubernetesApp.vue
@@ -21,7 +21,7 @@ export default {
   data() {
     return {
       tableConfig: {
-        url: `/api/v1/perms/users/k8s-apps/`,
+        url: `/api/v1/perms/users/applications/?category=cloud`,
         columns: [
           {
             prop: 'name',
diff --git a/src/userviews/apps/RemoteApp.vue b/src/userviews/apps/RemoteApp.vue
index 684a2918a..0bc831ae0 100644
--- a/src/userviews/apps/RemoteApp.vue
+++ b/src/userviews/apps/RemoteApp.vue
@@ -20,7 +20,7 @@ export default {
   data() {
     return {
       tableConfig: {
-        url: `/api/v1/perms/users/remote-apps/`,
+        url: `/api/v1/perms/users/applications/?category=remote_app`,
         columns: [
           {
             prop: 'name',
@@ -29,9 +29,9 @@ export default {
             sortable: true
           },
           {
-            prop: 'get_type_display',
+            prop: 'type_display',
             align: 'center',
-            label: this.$t('assets.RemoteType')
+            label: this.$t('assets.Type')
           },
           {
             prop: 'asset_info.hostname',
diff --git a/src/views/applications/DatabaseApp/DatabaseAppCreateUpdate.vue b/src/views/applications/DatabaseApp/DatabaseAppCreateUpdate.vue
index f70cf0fb0..1e9c3e666 100644
--- a/src/views/applications/DatabaseApp/DatabaseAppCreateUpdate.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppCreateUpdate.vue
@@ -10,9 +10,10 @@ export default {
   },
   data() {
     return {
+
       fields: [
-        [this.$t('common.Basic'), ['name', 'type']],
-        [this.$t('applications.mysql'), ['host', 'port', 'database']],
+        [this.$t('common.Basic'), ['name', 'type', 'domain']],
+        [this.$t('applications.DBInfo'), ['attrs']],
         [this.$t('common.Other'), ['comment']]
       ],
       fieldsMeta: {
@@ -23,14 +24,57 @@ export default {
             value: 'mysql'
           }],
           disabled: true
+        },
+        host: {
+          type: 'input'
+        },
+        domain: {
+          el: {
+            multiple: false,
+            clearable: true,
+            ajax: {
+              url: '/api/v1/assets/domains/'
+            }
+          }
         }
       },
-      url: '/api/v1/applications/database-apps/'
+      url: '/api/v1/applications/applications/',
+      getUrl() {
+        const params = this.$route.params
+        console.log(params)
+        let url = `/api/v1/applications/applications/`
+        const method = this.getMethod()
+        if (params.id) {
+          url = `${url}${params.id}/`
+        }
+        return method === 'post' ? `${url}?type=${this.$route.query.type}` : `${url}?category=db`
+      },
+      performSubmit(validValues) {
+        const params = this.$route.params
+        const baseUrl = `/api/v1/applications/applications/`
+        const url = (params.id) ? `${baseUrl}${params.id}/` : baseUrl
+        const method = this.getMethod()
+        validValues.attrs = {
+          host: validValues.host,
+          port: validValues.port,
+          database: validValues.database
+        }
+        validValues.category = 'db'
+        return this.$axios[method](`${url}?type=${validValues.type}`, validValues)
+      }
     }
   },
   computed: {
     initial() {
       return this.$route.query
+    },
+    getMethod() {
+      const params = this.$route.params
+      if (params.id) {
+        return 'put'
+      } else {
+        return 'post'
+      }
     }
   }
 }
diff --git a/src/views/applications/DatabaseApp/DatabaseAppDetail/DatabaseAppDetail.vue b/src/views/applications/DatabaseApp/DatabaseAppDetail/DatabaseAppDetail.vue
index 29c94010f..42ca85300 100644
--- a/src/views/applications/DatabaseApp/DatabaseAppDetail/DatabaseAppDetail.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppDetail/DatabaseAppDetail.vue
@@ -33,19 +33,19 @@ export default {
         },
         {
           key: this.$t('applications.type'),
-          value: this.object.get_type_display
+          value: this.object.type_display
         },
         {
           key: this.$t('applications.host'),
-          value: this.object.host
+          value: this.object.attrs.host
         },
         {
           key: this.$t('applications.port'),
-          value: JSON.stringify(this.object.port)
+          value: JSON.stringify(this.object.attrs.port)
         },
         {
           key: this.$t('applications.database'),
-          value: this.object.database
+          value: this.object.attrs.database
         },
         {
           key: this.$t('common.dateCreated'),
diff --git a/src/views/applications/DatabaseApp/DatabaseAppDetail/index.vue b/src/views/applications/DatabaseApp/DatabaseAppDetail/index.vue
index 625e1d318..4b5e9a7ef 100644
--- a/src/views/applications/DatabaseApp/DatabaseAppDetail/index.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppDetail/index.vue
@@ -19,7 +19,7 @@ export default {
   data() {
     return {
       DatabaseApp: {
-        name: '', get_type_display: '', host: '', port: '', database: '', date_created: '', created_by: '', comment: ''
+        name: '', get_type_display: '', host: '', port: '', database: '', date_created: '', created_by: '', comment: '', attrs: ''
       },
       config: {
         activeMenu: 'DatabaseAppDetail',
@@ -28,7 +28,11 @@ export default {
             title: this.$t('route.DatabaseAppDetail'),
             name: 'DatabaseAppDetail'
           }
-        ]
+        ],
+        actions: {
+          detailApiUrl: `/api/v1/applications/applications/${this.$route.params.id}/`,
+          deleteApiUrl: `/api/v1/applications/applications/${this.$route.params.id}/`
+        }
       }
     }
   }
diff --git a/src/views/applications/DatabaseApp/DatabaseAppList.vue b/src/views/applications/DatabaseApp/DatabaseAppList.vue
index e037c3954..fbe19a4a3 100644
--- a/src/views/applications/DatabaseApp/DatabaseAppList.vue
+++ b/src/views/applications/DatabaseApp/DatabaseAppList.vue
@@ -1,9 +1,10 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListPage ref="GenericListTable" :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
 import { GenericListPage } from '@/layout/components'
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
@@ -12,23 +13,41 @@ export default {
   data() {
     return {
       tableConfig: {
-        url: '/api/v1/applications/database-apps/',
+        url: '/api/v1/applications/applications/?category=db',
         columns: [
-          'name', 'get_type_display', 'host', 'port', 'database', 'comment', 'actions'
+          'name', 'type_display', 'attrs.host', 'attrs.port', 'attrs.database', 'comment', 'actions'
         ],
         columnsMeta: {
-          get_type_display: {
+          type_display: {
             label: this.$t('applications.type'),
-            width: '80px'
+            width: '120px'
           },
-          host: {
+          'attrs.host': {
+            label: this.$t('applications.host'),
             width: '140px'
           },
-          port: {
-            width: '70px'
+          'attrs.port': {
+            label: this.$t('applications.port'),
+            width: '60px'
           },
-          database: {
+          'attrs.database': {
+            label: this.$t('applications.database'),
             showOverflowTooltip: true
+          },
+          actions: {
+            prop: '',
+            formatterArgs: {
+              onDelete: function({ row, col, cellValue, reload }) {
+                this.$axios.delete(
+                  `/api/v1/applications/applications/${row.id}/`
+                ).then(res => {
+                  this.$refs.GenericListTable.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$t('common.deleteSuccessMsg'))
+                }).catch(error => {
+                  this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+                })
+              }.bind(this)
+            }
           }
         }
       },
@@ -45,14 +64,53 @@ export default {
             type: 'primary',
             can: true,
             callback: this.createMysql.bind(this)
+          },
+          {
+            name: 'PostgreSQL',
+            title: 'PostgreSQL',
+            type: 'primary',
+            can: this.isValidateLicense,
+            callback: this.createPostgreSQL.bind(this)
+          },
+          {
+            name: 'MariaDB',
+            title: 'MariaDB',
+            type: 'primary',
+            can: this.isValidateLicense,
+            callback: this.createMariaDB.bind(this)
+          },
+          {
+            name: 'Oracle',
+            title: 'Oracle',
+            type: 'primary',
+            can: this.isValidateLicense,
+            callback: this.createOracle.bind(this)
           }
         ]
       }
     }
   },
+  computed: {
+    ...mapGetters(['publicSettings', 'currentOrg']),
+    isValidateLicense() {
+      if (this.publicSettings.XPACK_ENABLED) {
+        return this.publicSettings.XPACK_LICENSE_IS_VALID
+      }
+      return true
+    }
+  },
   methods: {
     createMysql() {
       this.$router.push({ name: 'DatabaseAppCreate', query: { type: 'mysql' }})
+    },
+    createPostgreSQL() {
+      this.$router.push({ name: 'DatabaseAppCreate', query: { type: 'postgresql' }})
+    },
+    createMariaDB() {
+      this.$router.push({ name: 'DatabaseAppCreate', query: { type: 'mariadb' }})
+    },
+    createOracle() {
+      this.$router.push({ name: 'DatabaseAppCreate', query: { type: 'oracle' }})
     }
   }
 }
diff --git a/src/views/applications/KubernetesApp/KubernetesAppCreateUpdate.vue b/src/views/applications/KubernetesApp/KubernetesAppCreateUpdate.vue
index 915880c96..6e58fba92 100644
--- a/src/views/applications/KubernetesApp/KubernetesAppCreateUpdate.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppCreateUpdate.vue
@@ -4,6 +4,7 @@
 
 <script>
 import { GenericCreateUpdatePage } from '@/layout/components'
+
 export default {
   components: {
     GenericCreateUpdatePage
@@ -14,8 +15,8 @@ export default {
         type: 'k8s'
       },
       fields: [
-        [this.$t('common.Basic'), ['name', 'type']],
-        [this.$t('applications.kubernetes'), ['cluster']],
+        [this.$t('common.Basic'), ['name', 'type', 'domain']],
+        [this.$t('applications.kubernetes'), ['attrs']],
         [this.$t('common.Other'), ['comment']]
       ],
       fieldsMeta: {
@@ -24,13 +25,48 @@ export default {
         },
         cluster: {
           helpText: this.$t('applications.clusterHelpTextMessage')
+        },
+        domain: {
+          el: {
+            multiple: false,
+            clearable: true,
+            ajax: {
+              url: '/api/v1/assets/domains/'
+            }
+          }
         }
       },
-      url: '/api/v1/applications/k8s-apps/'
+      url: '/api/v1/applications/applications/',
+      getUrl() {
+        const params = this.$route.params
+        let url = `/api/v1/applications/applications/`
+        if (params.id) {
+          url = `${url}${params.id}/`
+        }
+        return `${url}?type=k8s`
+      },
+      performSubmit(validValues) {
+        const params = this.$route.params
+        const baseUrl = `/api/v1/applications/applications/`
+        const url = (params.id) ? `${baseUrl}${params.id}/` : baseUrl
+        const method = this.getMethod()
+        validValues.attrs = {
+          cluster: validValues.cluster
+        }
+        validValues.category = 'cloud'
+        return this.$axios[method](`${url}?type=${validValues.type}`, validValues)
+      }
     }
   },
   computed: {
-
+    getMethod() {
+      const params = this.$route.params
+      if (params.id) {
+        return 'put'
+      } else {
+        return 'post'
+      }
+    }
   }
 }
 </script>
diff --git a/src/views/applications/KubernetesApp/KubernetesAppDetail/KubernetesAppDetail.vue b/src/views/applications/KubernetesApp/KubernetesAppDetail/KubernetesAppDetail.vue
index b5a603ebd..4eaaf8376 100644
--- a/src/views/applications/KubernetesApp/KubernetesAppDetail/KubernetesAppDetail.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppDetail/KubernetesAppDetail.vue
@@ -37,7 +37,7 @@ export default {
         },
         {
           key: this.$t('applications.cluster'),
-          value: this.object.cluster
+          value: this.object.attrs.cluster
         },
         {
           key: this.$t('common.dateCreated'),
diff --git a/src/views/applications/KubernetesApp/KubernetesAppDetail/index.vue b/src/views/applications/KubernetesApp/KubernetesAppDetail/index.vue
index f3b893608..39cbc7c3c 100644
--- a/src/views/applications/KubernetesApp/KubernetesAppDetail/index.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppDetail/index.vue
@@ -19,7 +19,7 @@ export default {
   data() {
     return {
       KubernetesApp: {
-        name: '', type_display: '', cluster: '', date_created: '', created_by: '', comment: ''
+        name: '', type_display: '', cluster: '', date_created: '', created_by: '', comment: '', attrs: ''
       },
       config: {
         activeMenu: 'KubernetesAppDetail',
@@ -30,8 +30,8 @@ export default {
           }
         ],
         actions: {
-          detailApiUrl: `/api/v1/applications/k8s-apps/${this.$route.params.id}/`,
-          deleteApiUrl: `/api/v1/applications/k8s-apps/${this.$route.params.id}/`
+          detailApiUrl: `/api/v1/applications/applications/${this.$route.params.id}/`,
+          deleteApiUrl: `/api/v1/applications/applications/${this.$route.params.id}/`
         }
       }
     }
diff --git a/src/views/applications/KubernetesApp/KubernetesAppList.vue b/src/views/applications/KubernetesApp/KubernetesAppList.vue
index f32674925..bd123b552 100644
--- a/src/views/applications/KubernetesApp/KubernetesAppList.vue
+++ b/src/views/applications/KubernetesApp/KubernetesAppList.vue
@@ -1,5 +1,5 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <GenericListPage ref="GenericListTable" :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
@@ -12,16 +12,34 @@ export default {
   data() {
     return {
       tableConfig: {
-        url: '/api/v1/applications/k8s-apps/',
+        url: '/api/v1/applications/applications/?category=cloud',
         columns: [
-          'name', 'type', 'cluster', 'comment', 'actions'
+          'name', 'type', 'attrs.cluster', 'comment', 'actions'
         ],
         columnsMeta: {
+          'attrs.cluster': {
+            label: this.$t('applications.cluster')
+          },
           comment: {
             width: '340px'
           },
           type: {
             width: '140px'
+          },
+          actions: {
+            prop: '',
+            formatterArgs: {
+              onDelete: function({ row, col, cellValue, reload }) {
+                this.$axios.delete(
+                  `/api/v1/applications/applications/${row.id}/`
+                ).then(res => {
+                  this.$refs.GenericListTable.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$t('common.deleteSuccessMsg'))
+                }).catch(error => {
+                  this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+                })
+              }.bind(this)
+            }
           }
         }
       },
diff --git a/src/views/applications/RemoteApp/RemoteAppCreateUpdate.vue b/src/views/applications/RemoteApp/RemoteAppCreateUpdate.vue
index a0f8451ab..ddcb631b0 100644
--- a/src/views/applications/RemoteApp/RemoteAppCreateUpdate.vue
+++ b/src/views/applications/RemoteApp/RemoteAppCreateUpdate.vue
@@ -22,14 +22,76 @@ export default {
         path: pathInitial
       },
       fields: [
-        [this.$t('common.Basic'), ['name', 'asset', 'type', 'path']],
-        [appTypeMeta.title, ['params']],
+        [this.$t('common.Basic'), ['name', 'type', 'domain']],
+        [appTypeMeta.title, ['attrs']],
         [this.$t('common.Other'), ['comment']]
       ],
-      url: '/api/v1/applications/remote-apps/',
+      url: '/api/v1/applications/applications/',
+      getUrl() {
+        const params = this.$route.params
+        let url = `/api/v1/applications/applications/`
+        if (params.id) {
+          url = `${url}${params.id}/`
+        }
+        return `${url}?type=${this.$route.query.type}`
+      },
+      performSubmit(validValues) {
+        const params = this.$route.params
+        const baseUrl = `/api/v1/applications/applications/`
+        const url = (params.id) ? `${baseUrl}${params.id}/` : baseUrl
+        const method = this.getMethod()
+        switch (validValues.type) {
+          case 'chrome': {
+            validValues.attrs = {
+              chrome_target: validValues.chrome_target,
+              chrome_username: validValues.chrome_username,
+              chrome_password: validValues.chrome_password,
+              asset: validValues.asset,
+              path: validValues.path
+            }
+            break
+          }
+          case 'mysql_workbench': {
+            validValues.attrs = {
+              mysql_workbench_ip: validValues.mysql_workbench_ip,
+              mysql_workbench_port: validValues.mysql_workbench_port,
+              mysql_workbench_name: validValues.mysql_workbench_name,
+              mysql_workbench_username: validValues.mysql_workbench_username,
+              mysql_workbench_password: validValues.mysql_workbench_password,
+              asset: validValues.asset,
+              path: validValues.path
+            }
+            break
+          }
+          case 'vmware_client': {
+            validValues.attrs = {
+              vmware_password: validValues.vmware_password,
+              vmware_username: validValues.vmware_username,
+              vmware_target: validValues.vmware_target,
+              asset: validValues.asset,
+              path: validValues.path
+            }
+            break
+          }
+          case 'custom': {
+            validValues.attrs = {
+              custom_cmdline: validValues.custom_cmdline,
+              custom_target: validValues.custom_target,
+              custom_username: validValues.custom_username,
+              custom_password: validValues.custom_password,
+              asset: validValues.asset,
+              path: validValues.path
+            }
+            break
+          }
+        }
+        validValues.category = 'remote_app'
+        console.log(validValues)
+        return this.$axios[method](`${url}?type=${validValues.type}`, validValues)
+      },
       fieldsMeta: {
         asset: {
-          rules: [{ required: false }],
+          rules: [{ required: true }],
           el: {
             multiple: false,
             ajax: {
@@ -50,10 +112,30 @@ export default {
           ],
           disabled: true
         },
-        params: {
-          type: 'group',
-          items: fieldsMap
-        }
+        asset_info: {
+          type: 'input',
+          hidden: () => true
+        },
+        domain: {
+          el: {
+            multiple: false,
+            clearable: true,
+            ajax: {
+              url: '/api/v1/assets/domains/'
+            }
+          }
+        },
+        ...fieldsMap
+      }
+    }
+  },
+  computed: {
+    getMethod() {
+      const params = this.$route.params
+      if (params.id) {
+        return 'put'
+      } else {
+        return 'post'
       }
     }
   }
diff --git a/src/views/applications/RemoteApp/RemoteAppDetail/RemoteAppDetail.vue b/src/views/applications/RemoteApp/RemoteAppDetail/RemoteAppDetail.vue
index 5b46c785d..db084b8c3 100644
--- a/src/views/applications/RemoteApp/RemoteAppDetail/RemoteAppDetail.vue
+++ b/src/views/applications/RemoteApp/RemoteAppDetail/RemoteAppDetail.vue
@@ -32,17 +32,17 @@ export default {
           key: this.$t('common.Name'),
           value: this.object.name
         },
-        {
-          key: this.$t('applications.asset'),
-          value: this.object.asset_info.hostname
-        },
+        // {
+        //   key: this.$t('applications.asset'),
+        //   value: this.object.attrs.asset_info.hostname
+        // },
         {
           key: this.$t('applications.appType'),
-          value: this.object.get_type_display
+          value: this.object.type_display
         },
         {
           key: this.$t('applications.appPath'),
-          value: this.object.path
+          value: this.object.attrs.path
         },
         {
           key: this.$t('common.dateCreated'),
diff --git a/src/views/applications/RemoteApp/RemoteAppDetail/index.vue b/src/views/applications/RemoteApp/RemoteAppDetail/index.vue
index 51d80054d..21f46e212 100644
--- a/src/views/applications/RemoteApp/RemoteAppDetail/index.vue
+++ b/src/views/applications/RemoteApp/RemoteAppDetail/index.vue
@@ -19,7 +19,7 @@ export default {
   data() {
     return {
       RemoteApp: {
-        name: '', asset: '', get_type_display: '', path: '', date_created: '', created_by: '', comment: ''
+        name: '', asset: '', get_type_display: '', path: '', date_created: '', created_by: '', comment: '', attrs: ''
       },
       config: {
         activeMenu: 'RemoteAppDetail',
@@ -28,7 +28,11 @@ export default {
             title: this.$t('route.RemoteAppDetail'),
             name: 'RemoteAppDetail'
           }
-        ]
+        ],
+        actions: {
+          detailApiUrl: `/api/v1/applications/applications/${this.$route.params.id}/`,
+          deleteApiUrl: `/api/v1/applications/applications/${this.$route.params.id}/`
+        }
       }
     }
   }
diff --git a/src/views/applications/RemoteApp/RemoteAppList.vue b/src/views/applications/RemoteApp/RemoteAppList.vue
index 578f703e1..976547662 100644
--- a/src/views/applications/RemoteApp/RemoteAppList.vue
+++ b/src/views/applications/RemoteApp/RemoteAppList.vue
@@ -15,27 +15,39 @@ export default {
     return {
       helpMessage: this.$t('assets.RemoteAppListHelpMessage'),
       tableConfig: {
-        url: '/api/v1/applications/remote-apps/',
+        url: '/api/v1/applications/applications/?category=remote_app',
         columns: [
-          'name', 'type', 'asset', 'comment', 'actions'
+          'name', 'type', 'attrs.asset', 'comment', 'actions'
         ],
         columnsMeta: {
           type: {
             displayKey: 'get_type_display',
             width: '140px'
           },
-          asset: {
+          'attrs.asset': {
+            label: this.$t('assets.Assets'),
             showOverflowTooltip: true,
             formatter: function(row, column, cellValue, index) {
+              console.log(row, column, cellValue)
               const route = { to: { name: 'AssetDetail', params: { id: cellValue }}}
-              return <router-link{...{ attrs: route }} >{ row.asset_info.hostname }</router-link>
+              return <router-link{...{ attrs: route }} >{ row.attrs.asset_info.hostname }</router-link>
             }
           },
           actions: {
             formatterArgs: {
               onUpdate: ({ row }) => {
                 vm.$router.push({ name: 'RemoteAppUpdate', params: { id: row.id }, query: { type: row.type }})
-              }
+              },
+              onDelete: function({ row, col, cellValue, reload }) {
+                this.$axios.delete(
+                  `/api/v1/applications/applications/${row.id}/`
+                ).then(res => {
+                  this.$refs.GenericListTable.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$t('common.deleteSuccessMsg'))
+                }).catch(error => {
+                  this.$message.error(this.$t('common.deleteErrorMsg' + ' ' + error))
+                })
+              }.bind(this)
             }
           }
         }
diff --git a/src/views/applications/RemoteApp/const.js b/src/views/applications/RemoteApp/const.js
index 6bc222a41..d462e4e40 100644
--- a/src/views/applications/RemoteApp/const.js
+++ b/src/views/applications/RemoteApp/const.js
@@ -18,7 +18,7 @@ export const REMOTE_APP_TYPE_FIELDS_MAP = {
       label: i18n.t('applications.chrome_username')
     },
     {
-      id: 'chrome_password', el: { 'show-password': true }, attrs: {}, type: 'input', prop: 'chrome_password',
+      id: 'chrome_password', el: { 'show-password': true }, attrs: {}, type: 'password', prop: 'chrome_password',
       label: i18n.t('applications.chrome_password')
     }
   ],
@@ -40,7 +40,7 @@ export const REMOTE_APP_TYPE_FIELDS_MAP = {
       label: i18n.t('applications.mysql_workbench_username')
     },
     {
-      id: 'mysql_workbench_password', el: { 'show-password': true }, attrs: {}, type: 'input', prop: 'mysql_workbench_password',
+      id: 'mysql_workbench_password', el: { 'show-password': true }, attrs: {}, type: 'password', prop: 'mysql_workbench_password',
       label: i18n.t('applications.mysql_workbench_password')
     }
   ],
@@ -54,7 +54,7 @@ export const REMOTE_APP_TYPE_FIELDS_MAP = {
       label: i18n.t('applications.vmware_username')
     },
     {
-      id: 'vmware_password', el: { 'show-password': true }, attrs: {}, type: 'input', prop: 'vmware_password',
+      id: 'vmware_password', el: { 'show-password': true }, attrs: {}, type: 'password', prop: 'vmware_password',
       label: i18n.t('applications.vmware_password')
     }
   ],
@@ -72,7 +72,7 @@ export const REMOTE_APP_TYPE_FIELDS_MAP = {
       label: i18n.t('applications.custom_username')
     },
     {
-      id: 'custom_password', el: { 'show-password': true }, attrs: {}, type: 'input', prop: 'custom_password',
+      id: 'custom_password', el: { 'show-password': true }, attrs: {}, type: 'password', prop: 'custom_password',
       label: i18n.t('applications.custom_password')
     }
   ]
diff --git a/src/views/assets/Domain/DomainDetail/Detail.vue b/src/views/assets/Domain/DomainDetail/Detail.vue
index 8d6db4634..33aee722e 100644
--- a/src/views/assets/Domain/DomainDetail/Detail.vue
+++ b/src/views/assets/Domain/DomainDetail/Detail.vue
@@ -37,6 +37,10 @@ export default {
           key: this.$t('assets.Assets'),
           value: `${this.object.asset_count}`
         },
+        {
+          key: this.$t('assets.Applications'),
+          value: `${this.object.application_count}`
+        },
         {
           key: this.$t('assets.Gateway'),
           value: `${this.object.gateway_count}`
diff --git a/src/views/assets/Domain/DomainList.vue b/src/views/assets/Domain/DomainList.vue
index 4c0d82263..7f9c240ce 100644
--- a/src/views/assets/Domain/DomainList.vue
+++ b/src/views/assets/Domain/DomainList.vue
@@ -15,12 +15,15 @@ export default {
       tableConfig: {
         url: '/api/v1/assets/domains/',
         columns: [
-          'name', 'asset_count', 'gateway_count', 'comment', 'actions'
+          'name', 'asset_count', 'application_count', 'gateway_count', 'comment', 'actions'
         ],
         columnsMeta: {
           asset_count: {
             label: this.$t('assets.Assets')
           },
+          application_count: {
+            label: this.$t('assets.Applications')
+          },
           gateway_count: {
             label: this.$t('assets.Gateway'),
             formatter: DetailFormatter,
diff --git a/src/views/perms/ApplicationPermission/ApplicationPermissionCreateUpdate.vue b/src/views/perms/ApplicationPermission/ApplicationPermissionCreateUpdate.vue
new file mode 100644
index 000000000..d2b34613d
--- /dev/null
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionCreateUpdate.vue
@@ -0,0 +1,124 @@
+<template>
+  <GenericCreateUpdatePage ref="createUpdatePage" :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+import { getDayFuture } from '@/utils/common'
+
+export default {
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      initial: {
+        is_active: true,
+        date_start: new Date().toISOString(),
+        date_expired: getDayFuture(36500, new Date()).toISOString(),
+        type: this.$route.query.type,
+        category: this.$route.query.category
+      },
+      fields: [
+        [this.$t('common.Basic'), ['name']],
+        [this.$t('perms.User'), ['users', 'user_groups']],
+        [this.$t('assets.Applications'), ['category', 'type', 'applications', 'system_users']],
+        [this.$t('common.Other'), ['is_active', 'date_start', 'date_expired', 'comment']]
+      ],
+      url: '/api/v1/perms/application-permissions/',
+      fieldsMeta: {
+        users: {
+          el: {
+            value: [],
+            ajax: {
+              url: '/api/v1/users/users/?fields_size=mini',
+              transformOption: (item) => {
+                return { label: item.name + '(' + item.username + ')', value: item.id }
+              }
+            }
+          }
+        },
+        user_groups: {
+          el: {
+            value: [],
+            url: '/api/v1/users/groups/'
+          }
+        },
+        category: {
+          type: 'select',
+          // options: [
+          //   {
+          //     label: this.$t(`applications.applicationsCategory.${this.$route.query.category}`),
+          //     value: this.$route.query.category
+          //   }
+          // ],
+          disabled: true
+        },
+        type: {
+          type: 'select',
+          // options: [
+          //   {
+          //     label: this.$t(`applications.applicationsType.${this.$route.query.type}`),
+          //     value: this.$route.query.type
+          //   }
+          // ],
+          disabled: true
+        },
+        applications: {
+          label: this.$t('assets.Applications'),
+          el: {
+            value: [],
+            ajax: {
+              url: `/api/v1/applications/applications/?category=${this.$route.query.category}&type=${this.$route.query.type}`,
+              transformOption: (item) => {
+                return { label: item.name + ' (' + item.type_display + ')', value: item.id }
+              }
+            }
+          }
+        },
+        system_users: {
+          el: {
+            value: [],
+            ajax: {
+              // const form = await this.$refs.createUpdatePage.$refs.createUpdateForm.getFormValue()
+              url: this.$route.query.category === 'remote_app' ? `/api/v1/assets/system-users/?protocol=rdp` : `/api/v1/assets/system-users/?protocol=${this.$route.query.type}`,
+              transformOption: (item) => {
+                return { label: item.name + '(' + item.username + ')', value: item.id }
+              }
+            }
+          }
+        },
+        date_start: {
+          label: this.$t('common.dateStart')
+        },
+        date_expired: {
+          label: this.$t('common.dateExpired')
+        },
+        actions: {
+          label: this.$t('perms.Actions')
+        },
+        is_active: {
+          type: 'checkbox'
+        }
+      }
+
+    }
+  },
+  computed: {
+
+  },
+  async mounted() {
+    const params = this.$route.params
+    // 更新获取链接
+    if (params.id) {
+      const form = await this.$refs.createUpdatePage.$refs.createUpdateForm.getFormValue()
+      this.fieldsMeta.applications.el.ajax.url = `/api/v1/applications/applications/?category=${form.category}&type=${form.type}`
+      this.fieldsMeta.system_users.el.ajax.url = form.category === 'remote_app' ? `/api/v1/assets/system-users/?protocol=rdp` : `/api/v1/assets/system-users/?protocol=${form.type}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionDetail.vue b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/AppliactionPermissionDetail.vue
similarity index 89%
rename from src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionDetail.vue
rename to src/views/perms/ApplicationPermission/ApplicationPermissionDetail/AppliactionPermissionDetail.vue
index 33a4a6fcb..00766a837 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionDetail.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/AppliactionPermissionDetail.vue
@@ -38,7 +38,7 @@ export default {
           callbacks: {
             change: function(val) {
               this.$axios.patch(
-                `/api/v1/perms/remote-app-permissions/${this.object.id}/`,
+                `/api/v1/perms/application-permissions/${this.object.id}/`,
                 { is_active: val }
               ).then(res => {
                 this.$message.success(this.$t('common.updateSuccessMsg'))
@@ -58,6 +58,10 @@ export default {
           key: this.$t('common.Name'),
           value: this.object.name
         },
+        {
+          key: this.$t('assets.Applications'),
+          value: this.object.category_display
+        },
         {
           key: this.$t('perms.userCount'),
           value: this.object.users_amount
@@ -67,8 +71,8 @@ export default {
           value: this.object.user_groups_amount
         },
         {
-          key: this.$t('perms.remoteAppCount'),
-          value: this.object.remote_apps_amount
+          key: this.$t('perms.appsCount'),
+          value: this.object.applications_amount
         },
         {
           key: this.$t('perms.systemUserCount'),
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationPermissionUser.vue
similarity index 87%
rename from src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue
rename to src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationPermissionUser.vue
index 770ad0a15..a405a51ec 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionUser.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationPermissionUser.vue
@@ -30,7 +30,7 @@ export default {
   data() {
     return {
       tableConfig: {
-        url: `/api/v1/perms/remote-app-permissions/${this.object.id}/users/all/`,
+        url: `/api/v1/perms/application-permissions/${this.object.id}/users/all/`,
         columns: [
           'user_display', 'delete_action'
         ],
@@ -46,7 +46,7 @@ export default {
             width: 150,
             objects: this.object.users,
             formatter: DeleteActionFormatter,
-            deleteUrl: `/api/v1/perms/remote-app-permissions-users-relations/?remoteapppermission=${this.object.id}&user=`
+            deleteUrl: `/api/v1/perms/application-permissions-users-relations/?applicationpermission=${this.object.id}&user=`
           }
         },
         tableAttrs: {
@@ -77,10 +77,13 @@ export default {
         showHasObjects: false,
         performAdd: (items) => {
           const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/users/add/`
+          const relationUrl = `/api/v1/perms/application-permissions-users-relations/`
           const usersId = items.map(v => v.value)
-          const data = { users: usersId }
-          return this.$axios.patch(relationUrl, data)
+          const data = []
+          for (const user of usersId) {
+            data.push({ applicationpermission: objectId, user: user })
+          }
+          return this.$axios.post(relationUrl, data)
         },
         onAddSuccess: (objects, that) => {
           this.$log.debug('Select value', that.select2.value)
@@ -99,7 +102,7 @@ export default {
         hasObjectsId: this.object.user_groups,
         performAdd: (items) => {
           const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/`
+          const relationUrl = `/api/v1/perms/application-permissions/${objectId}/`
           const objectRelationUserGroups = this.object.user_groups
           items.map(v => objectRelationUserGroups.push(v.value))
           const data = { user_groups: objectRelationUserGroups }
@@ -114,7 +117,7 @@ export default {
         },
         performDelete: (item) => {
           const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/`
+          const relationUrl = `/api/v1/perms/application-permissions/${objectId}/`
           const objectOldRelationUserGroups = this.object.user_groups
           const objectNewRelationUserGroups = objectOldRelationUserGroups.filter(v => v !== item.value)
           const data = { user_groups: objectNewRelationUserGroups }
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationsPermission.vue
similarity index 76%
rename from src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue
rename to src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationsPermission.vue
index 2a6e1412f..22d331040 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/RemoteAppPermissionRemoteApp.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/ApplicationsPermission.vue
@@ -27,26 +27,28 @@ export default {
       default: () => ({})
     }
   },
+
   data() {
+    const vm = this
     return {
       tableConfig: {
-        url: `/api/v1/perms/remote-app-permissions/${this.object.id}/remote-apps/all/`,
+        url: `/api/v1/perms/application-permissions/${this.object.id}/applications/all/`,
         columns: [
-          'remoteapp_display', 'delete_action'
+          'application_display', 'delete_action'
         ],
         columnsMeta: {
-          remoteapp_display: {
-            label: this.$t('perms.remoteApp'),
+          application_display: {
+            label: this.$t('assets.Applications'),
             align: 'center'
           },
           delete_action: {
-            prop: 'remoteapp',
+            prop: 'application',
             label: this.$t('common.Actions'),
             align: 'center',
             width: 150,
-            objects: this.object.remote_apps,
+            objects: this.object.applications,
             formatter: DeleteActionFormatter,
-            deleteUrl: `/api/v1/perms/remote-app-permissions-remote-apps-relations/?remoteapppermission=${this.$route.params.id}&remoteapp=`
+            deleteUrl: `/api/v1/perms/application-permissions-applications-relations/?remoteapppermission=${this.$route.params.id}&application=`
           }
         },
         tableAttrs: {
@@ -68,16 +70,22 @@ export default {
         icon: 'fa-edit',
         title: this.$t('perms.addRemoteAppToThisPermission'),
         objectsAjax: {
-          url: '/api/v1/applications/remote-apps/'
+          url: `/api/v1/applications/applications/?category=${this.object.category}&type=${this.object.type}`,
+          transformOption: (item) => {
+            return { label: item.name + ' (' + item.type_display + ')', value: item.id }
+          }
         },
-        hasObjectsId: this.object.remote_apps,
+        hasObjectsId: this.object.application,
         showHasObjects: false,
         performAdd: (items) => {
           const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/remote-apps/add/`
+          const relationUrl = `/api/v1/perms/application-permissions-applications-relations/`
           const remoteAppId = items.map(v => v.value)
-          const data = { remote_apps: remoteAppId }
-          return this.$axios.patch(relationUrl, data)
+          const data = []
+          for (const app of remoteAppId) {
+            data.push({ applicationpermission: objectId, application: app })
+          }
+          return this.$axios.post(relationUrl, data)
         },
         onAddSuccess: (objects, that) => {
           this.$log.debug('Select value', that.select2.value)
@@ -94,7 +102,8 @@ export default {
           url: '/api/v1/assets/system-users/',
           processResults(data) {
             let results = data.results
-            results = results.filter((item) => item.protocol === 'rdp').map((item) => {
+            const protocol = vm.object.category === 'remote_app' ? `rdp` : vm.object.type
+            results = results.filter((item) => item.protocol === protocol).map((item) => {
               return { label: item.name + '(' + item.username + ')', value: item.id }
             })
             const more = !!data.next
@@ -104,7 +113,7 @@ export default {
         hasObjectsId: this.object.system_users,
         performAdd: (items) => {
           const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/`
+          const relationUrl = `/api/v1/perms/application-permissions/${objectId}/`
           const objectRelationSystemUsers = this.object.system_users
           items.map(v => objectRelationSystemUsers.push(v.value))
           const data = { system_users: objectRelationSystemUsers }
@@ -119,9 +128,8 @@ export default {
         },
         performDelete: (item) => {
           const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/remote-app-permissions/${objectId}/`
+          const relationUrl = `/api/v1/perms/application-permissions/${objectId}/`
           const objectOldRelationSystemUsers = this.object.system_users
-          // console.log(1, objectOldRelationSystemUsers, item)
           const objectNewRelationSystemUsers = objectOldRelationSystemUsers.filter(v => v !== item.value)
           const data = { system_users: objectNewRelationSystemUsers }
           return this.$axios.patch(relationUrl, data)
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/index.vue
similarity index 53%
rename from src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue
rename to src/views/perms/ApplicationPermission/ApplicationPermissionDetail/index.vue
index b91a7d8e7..6b74069be 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionDetail/index.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionDetail/index.vue
@@ -8,15 +8,15 @@
 
 <script>
 import { GenericDetailPage, TabPage } from '@/layout/components'
-import RemoteAppPermissionRemoteApp from './RemoteAppPermissionRemoteApp'
-import RemoteAppPermissionDetail from './RemoteAppPermissionDetail'
-import RemoteAppPermissionUser from './RemoteAppPermissionUser'
+import ApplicationPermissionRemoteApp from './ApplicationsPermission'
+import ApplicationPermissionDetail from './AppliactionPermissionDetail'
+import ApplicationPermissionUser from './ApplicationPermissionUser'
 
 export default {
   components: {
-    RemoteAppPermissionRemoteApp,
-    RemoteAppPermissionDetail,
-    RemoteAppPermissionUser,
+    ApplicationPermissionRemoteApp,
+    ApplicationPermissionDetail,
+    ApplicationPermissionUser,
     GenericDetailPage,
     TabPage
   },
@@ -24,27 +24,31 @@ export default {
     return {
       RemoteAppPermission: {},
       config: {
-        activeMenu: 'RemoteAppPermissionDetail',
+        activeMenu: 'ApplicationPermissionDetail',
         submenu: [
           {
             title: this.$t('common.BasicInfo'),
-            name: 'RemoteAppPermissionDetail'
+            name: 'ApplicationPermissionDetail'
           },
           {
             title: this.$t('perms.usersAndUserGroups'),
-            name: 'RemoteAppPermissionUser'
+            name: 'ApplicationPermissionUser'
           },
           {
-            title: this.$t('perms.remoteApp'),
-            name: 'RemoteAppPermissionRemoteApp'
+            title: this.$t('perms.appsList'),
+            name: 'ApplicationPermissionRemoteApp'
           }
-        ]
+        ],
+        actions: {
+          detailApiUrl: `/api/v1/perms/application-permissions/${this.$route.params.id}/`,
+          deleteApiUrl: `/api/v1/perms/application-permissions/${this.$route.params.id}/`
+        }
       }
     }
   },
   methods: {
     TabClick(tab) {
-      if (tab.name !== 'RemoteAppPermissionDetail') {
+      if (tab.name !== 'ApplicationPermissionDetail') {
         this.$set(this.config, 'hasRightSide', false)
       } else {
         this.$set(this.config, 'hasRightSide', true)
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionList.vue b/src/views/perms/ApplicationPermission/ApplicationPermissionList.vue
similarity index 74%
rename from src/views/perms/RemoteAppPermission/RemoteAppPermissionList.vue
rename to src/views/perms/ApplicationPermission/ApplicationPermissionList.vue
index 9d45b9e46..3810f5772 100644
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionList.vue
+++ b/src/views/perms/ApplicationPermission/ApplicationPermissionList.vue
@@ -5,6 +5,7 @@
 <script>
 import { GenericListPage } from '@/layout/components'
 import { DetailFormatter } from '@/components/ListTable/formatters'
+import { ApplicationTypes } from '../const'
 
 export default {
   components: {
@@ -14,10 +15,10 @@ export default {
     return {
       title: this.$t('perms.RemoteAppPermission'),
       tableConfig: {
-        url: '/api/v1/perms/remote-app-permissions/',
+        url: '/api/v1/perms/application-permissions/',
         columns: [
-          'name', 'users_amount', 'user_groups_amount',
-          'remote_apps_amount', 'system_users_amount',
+          'name', 'category_display', 'users_amount', 'user_groups_amount',
+          'applications_amount', 'system_users_amount',
           'is_valid', 'actions'
         ],
         columnsMeta: {
@@ -29,6 +30,9 @@ export default {
             },
             showOverflowTooltip: true
           },
+          category_display: {
+            width: '135px'
+          },
           users_amount: {
             label: this.$t('users.Users'),
             width: '110px',
@@ -49,8 +53,8 @@ export default {
               }
             }
           },
-          remote_apps_amount: {
-            label: this.$t('assets.RemoteApps'),
+          applications_amount: {
+            label: this.$t('assets.Applications'),
             width: '110px',
             formatter: DetailFormatter,
             formatterArgs: {
@@ -72,9 +76,18 @@ export default {
         }
       },
       headerActions: {
-        hasBulkDelete: false
+        hasCreate: false,
+        hasMoreActions: false,
+        hasBulkDelete: false,
+        // createRoute: 'RemoteAppCreate',
+        moreActionsTitle: this.$t('common.Create'),
+        moreActionsType: 'primary',
+        extraMoreActions: ApplicationTypes
       }
     }
+  },
+  methods: {
+
   }
 }
 </script>
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate.vue
deleted file mode 100644
index 59873503d..000000000
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionCreateUpdate.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import { getDayFuture } from '@/utils/common'
-
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      initial: {
-        is_active: true,
-        date_start: new Date().toISOString(),
-        date_expired: getDayFuture(36500, new Date()).toISOString()
-      },
-      fields: [
-        [this.$t('common.' + 'Basic'), ['name']],
-        [this.$t('perms.' + 'User'), ['users', 'user_groups']],
-        [this.$t('perms.' + 'databaseApp'), ['database_apps', 'system_users']],
-        [this.$t('common.Other'), ['is_active', 'date_start', 'date_expired', 'comment']]
-      ],
-      url: '/api/v1/perms/database-app-permissions/',
-      fieldsMeta: {
-        users: {
-          el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/users/users/?fields_size=mini',
-              transformOption: (item) => {
-                return { label: item.name + '(' + item.username + ')', value: item.id }
-              }
-            }
-          }
-        },
-        user_groups: {
-          el: {
-            value: [],
-            url: '/api/v1/users/groups/'
-          }
-        },
-        database_apps: {
-          el: {
-            value: [],
-            url: '/api/v1/applications/database-apps/'
-          }
-        },
-        system_users: {
-          el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/assets/system-users/?protocol=mysql'
-            }
-          }
-        },
-        date_start: {
-          label: this.$t('common.dateStart')
-        },
-        date_expired: {
-          label: this.$t('common.dateExpired')
-        },
-        actions: {
-          label: this.$t('perms.Actions')
-        },
-        is_active: {
-          type: 'checkbox'
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue
deleted file mode 100644
index 7302dfef1..000000000
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDatabaseApp.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    </el-col>
-    <el-col :md="10" :sm="24">
-      <RelationCard type="primary" v-bind="databaseAppRelationConfig" />
-      <RelationCard type="info" style="margin-top: 15px" v-bind="systemUserRelationConfig" />
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
-
-export default {
-  name: 'DatabaseAppPermissionDatabaseApp',
-  components: {
-    ListTable,
-    RelationCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/database-app-permissions/${this.object.id}/database-apps/all/`,
-        columns: [
-          'databaseapp_display', 'delete_action'
-        ],
-        columnsMeta: {
-          databaseapp_display: {
-            label: this.$t('perms.databaseApp'),
-            align: 'center'
-          },
-          delete_action: {
-            prop: 'databaseapp',
-            label: this.$t('common.Actions'),
-            align: 'center',
-            width: 150,
-            objects: this.object.database_apps,
-            formatter: DeleteActionFormatter,
-            deleteUrl: `/api/v1/perms/database-app-permissions-database-apps-relations/?databaseapppermission=${this.$route.params.id}&databaseapp=`
-          }
-        },
-        tableAttrs: {
-          border: false
-        }
-      },
-      headerActions: {
-        hasSearch: true,
-        hasRefresh: true,
-        hasLeftActions: true,
-        hasRightActions: true,
-        hasExport: false,
-        hasImport: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false
-      },
-      databaseAppRelationConfig: {
-        icon: 'fa-edit',
-        title: this.$t('perms.addDatabaseAppToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/applications/database-apps/'
-        },
-        hasObjectsId: this.object.database_apps,
-        showHasObjects: false,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/database-app-permissions-database-apps-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              databaseapppermission: objectId,
-              databaseapp: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      },
-      systemUserRelationConfig: {
-        icon: 'fa-edit',
-        title: this.$t('perms.addSystemUserToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/assets/system-users/',
-          processResults(data) {
-            let results = data.results
-            results = results.filter((item) => item.protocol === 'mysql').map((item) => {
-              return { label: item.name + '(' + item.username + ')', value: item.id }
-            })
-            const more = !!data.next
-            return { results: results, pagination: more, total: data.count }
-          }
-        },
-        hasObjectsId: this.object.system_users,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/database-app-permissions-system-users-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              databaseapppermission: objectId,
-              systemuser: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        },
-        performDelete: (item) => {
-          const itemId = item.value
-          const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/database-app-permissions-system-users-relations/?databaseapppermission=${objectId}&systemuser=${itemId}`
-          return this.$axios.delete(relationUrl)
-        },
-        onDeleteSuccess: (obj, that) => {
-          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
-          that.iHasObjects.splice(theRemoveIndex, 1)
-          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
-            const i = that.select2.disabledValues.indexOf(obj.value)
-            this.$log.debug('disabled values remove index: ', i)
-            that.select2.disabledValues.splice(i, 1)
-          }
-          this.$message.success(this.$t('common.deleteSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDetail.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDetail.vue
deleted file mode 100644
index c4f0a4204..000000000
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionDetail.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <DetailCard :items="detailCardItems" />
-    </el-col>
-    <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import DetailCard from '@/components/DetailCard'
-import QuickActions from '@/components/QuickActions'
-import { toSafeLocalDateStr } from '@/utils/common'
-
-export default {
-  name: 'DatabaseAppPermissionDetail',
-  components: {
-    DetailCard,
-    QuickActions
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      quickActions: [
-        {
-          title: this.$t('common.Active'),
-          type: 'switcher',
-          attrs: {
-            model: this.object.is_active
-          },
-          callbacks: {
-            change: function(val) {
-              this.$axios.patch(
-                `/api/v1/perms/database-app-permissions/${this.object.id}/`,
-                { is_active: val }
-              ).then(res => {
-                this.$message.success(this.$t('common.updateSuccessMsg'))
-              }).catch(err => {
-                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-              })
-            }.bind(this)
-          }
-        }
-      ]
-    }
-  },
-  computed: {
-    detailCardItems() {
-      return [
-        {
-          key: this.$t('common.Name'),
-          value: this.object.name
-        },
-        {
-          key: this.$t('perms.userCount'),
-          value: this.object.users_amount
-        },
-        {
-          key: this.$t('perms.userGroupCount'),
-          value: this.object.user_groups_amount
-        },
-        {
-          key: this.$t('perms.DatabaseAppCount'),
-          value: this.object.database_apps_amount
-        },
-        {
-          key: this.$t('perms.systemUserCount'),
-          value: this.object.system_users_amount
-        },
-        {
-          key: this.$t('perms.dateStart'),
-          value: toSafeLocalDateStr(this.object.date_start)
-        },
-        {
-          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(this.object.date_expired)
-        },
-        {
-          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(this.object.date_created)
-        },
-        {
-          key: this.$t('common.createdBy'),
-          value: this.object.created_by
-        },
-        {
-          key: this.$t('common.Comment'),
-          value: this.object.comment
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue
deleted file mode 100644
index 08769327d..000000000
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/DatabaseAppPermissionUser.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    </el-col>
-    <el-col :md="10" :sm="24">
-      <RelationCard type="primary" v-bind="userRelationConfig" />
-      <RelationCard type="info" style="margin-top: 15px" v-bind="groupRelationConfig" />
-    </el-col>
-  </el-row>
-
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
-
-export default {
-  name: 'DatabaseAppPermissionUser',
-  components: {
-    ListTable,
-    RelationCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/database-app-permissions/${this.object.id}/users/all/`,
-        columns: [
-          'user_display', 'delete_action'
-        ],
-        columnsMeta: {
-          user_display: {
-            label: this.$t('perms.User'),
-            align: 'center'
-          },
-          delete_action: {
-            prop: 'user',
-            label: this.$t('common.Actions'),
-            align: 'center',
-            width: 150,
-            objects: this.object.users,
-            formatter: DeleteActionFormatter,
-            deleteUrl: `/api/v1/perms/database-app-permissions-users-relations/?databaseapppermission=${this.object.id}&user=`
-          }
-        },
-        tableAttrs: {
-          border: false
-        }
-      },
-      headerActions: {
-        hasSearch: true,
-        hasRefresh: true,
-        hasLeftActions: true,
-        hasRightActions: true,
-        hasExport: false,
-        hasImport: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false
-      },
-      userRelationConfig: {
-        icon: 'fa-user',
-        title: this.$t('perms.addUserToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/users/users/?fields_size=mini',
-          transformOption: (item) => {
-            return { label: item.name + '(' + item.username + ')', value: item.id }
-          }
-        },
-        hasObjectsId: this.object.users,
-        showHasObjects: false,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/database-app-permissions-users-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              databaseapppermission: objectId,
-              user: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      },
-      groupRelationConfig: {
-        icon: 'fa-group',
-        title: this.$t('perms.addUserGroupToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/users/groups/'
-        },
-        hasObjectsId: this.object.user_groups,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/database-app-permissions-user-groups-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              databaseapppermission: objectId,
-              usergroup: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        },
-        performDelete: (item) => {
-          const objectId = this.object.id
-          const itemId = item.value
-          const relationUrl = `/api/v1/perms/database-app-permissions-user-groups-relations/?databaseapppermission=${objectId}&usergroup=${itemId}`
-          return this.$axios.delete(relationUrl)
-        },
-        onDeleteSuccess: (obj, that) => {
-          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
-          that.iHasObjects.splice(theRemoveIndex, 1)
-          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
-            const i = that.select2.disabledValues.indexOf(obj.value)
-            this.$log.debug('disabled values remove index: ', i)
-            that.select2.disabledValues.splice(i, 1)
-          }
-          this.$message.success(this.$t('common.deleteSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue
deleted file mode 100644
index 2ea9ab014..000000000
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionDetail/index.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <GenericDetailPage :object.sync="DatabaseAppPermission" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners" @tab-click="TabClick">
-    <keep-alive>
-      <component :is="config.activeMenu" :object="DatabaseAppPermission" />
-    </keep-alive>
-  </GenericDetailPage>
-</template>
-
-<script>
-import { GenericDetailPage, TabPage } from '@/layout/components'
-import DatabaseAppPermissionDetail from './DatabaseAppPermissionDetail'
-import DatabaseAppPermissionUser from './DatabaseAppPermissionUser'
-import DatabaseAppPermissionDatabaseApp from './DatabaseAppPermissionDatabaseApp'
-
-export default {
-  components: {
-    DatabaseAppPermissionDatabaseApp,
-    DatabaseAppPermissionDetail,
-    DatabaseAppPermissionUser,
-    GenericDetailPage,
-    TabPage
-  },
-  data() {
-    return {
-      DatabaseAppPermission: {},
-      config: {
-        activeMenu: 'DatabaseAppPermissionDetail',
-        submenu: [
-          {
-            title: this.$t('common.BasicInfo'),
-            name: 'DatabaseAppPermissionDetail'
-          },
-          {
-            title: this.$t('perms.usersAndUserGroups'),
-            name: 'DatabaseAppPermissionUser'
-          },
-          {
-            title: this.$t('perms.databaseApp'),
-            name: 'DatabaseAppPermissionDatabaseApp'
-          }
-        ]
-      }
-    }
-  },
-  methods: {
-    TabClick(tab) {
-      if (tab.name !== 'DatabaseAppPermissionDetail') {
-        this.$set(this.config, 'hasRightSide', false)
-      } else {
-        this.$set(this.config, 'hasRightSide', true)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionList.vue b/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionList.vue
deleted file mode 100644
index 35d307335..000000000
--- a/src/views/perms/DatabaseAppPermission/DatabaseAppPermissionList.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" :title="title" />
-</template>
-
-<script>
-import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/ListTable/formatters'
-
-export default {
-  components: {
-    GenericListPage
-  },
-  data() {
-    return {
-      title: this.$t('perms.DatabaseAppPermission'),
-      tableConfig: {
-        url: '/api/v1/perms/database-app-permissions/',
-        columns: ['name', 'users_amount', 'user_groups_amount', 'database_apps_amount', 'system_users_amount', 'is_valid', 'actions'],
-        columnsMeta: {
-          name: {
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'DatabaseAppPermissionDetail'
-              }
-            },
-            showOverflowTooltip: true
-          },
-          users_amount: {
-            label: this.$t('perms.User'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'DatabaseAppPermissionUser'
-              }
-            }
-          },
-          user_groups_amount: {
-            label: this.$t('perms.UserGroups'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'DatabaseAppPermissionUser'
-              }
-            }
-          },
-          database_apps_amount: {
-            label: this.$t('perms.databaseApp'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'DatabaseAppPermissionDatabaseApp'
-              }
-            }
-          },
-          system_users_amount: {
-            label: this.$t('perms.SystemUser'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'DatabaseAppPermissionDatabaseApp'
-              }
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasBulkDelete: false
-      }
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionCreateUpdate.vue b/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionCreateUpdate.vue
deleted file mode 100644
index a3d4a225c..000000000
--- a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionCreateUpdate.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import { getDayFuture } from '@/utils/common'
-
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      initial: {
-        is_active: true,
-        date_start: new Date().toISOString(),
-        date_expired: getDayFuture(36500, new Date()).toISOString()
-      },
-      fields: [
-        [this.$t('common.' + 'Basic'), ['name']],
-        [this.$t('perms.' + 'User'), ['users', 'user_groups']],
-        [this.$t('perms.' + 'KubernetesApp'), ['k8s_apps', 'system_users']],
-        [this.$t('common.Other'), ['is_active', 'date_start', 'date_expired', 'comment']]
-      ],
-      url: '/api/v1/perms/k8s-app-permissions/',
-      fieldsMeta: {
-        users: {
-          el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/users/users/?fields_size=mini',
-              transformOption: (item) => {
-                return { label: item.name + '(' + item.username + ')', value: item.id }
-              }
-            }
-          }
-        },
-        user_groups: {
-          el: {
-            value: [],
-            url: '/api/v1/users/groups/'
-          }
-        },
-        k8s_apps: {
-          label: this.$t('perms.KubernetesApp'),
-          el: {
-            value: [],
-            url: '/api/v1/applications/k8s-apps/'
-          }
-        },
-        system_users: {
-          el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/assets/system-users/?protocol=k8s'
-            }
-          }
-        },
-        date_start: {
-          label: this.$t('common.dateStart')
-        },
-        date_expired: {
-          label: this.$t('common.dateExpired')
-        },
-        actions: {
-          label: this.$t('perms.Actions')
-        },
-        is_active: {
-          type: 'checkbox'
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionDetail.vue b/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionDetail.vue
deleted file mode 100644
index 60a2fb74d..000000000
--- a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionDetail.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <DetailCard :items="detailCardItems" />
-    </el-col>
-    <el-col :md="10" :sm="24">
-      <QuickActions type="primary" :actions="quickActions" />
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import DetailCard from '@/components/DetailCard'
-import QuickActions from '@/components/QuickActions'
-import { toSafeLocalDateStr } from '@/utils/common'
-
-export default {
-  name: 'KubernetesAppPermissionDetail',
-  components: {
-    DetailCard,
-    QuickActions
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      quickActions: [
-        {
-          title: this.$t('common.Active'),
-          type: 'switcher',
-          attrs: {
-            model: this.object.is_active
-          },
-          callbacks: {
-            change: function(val) {
-              this.$axios.patch(
-                `/api/v1/perms/k8s-app-permissions/${this.object.id}/`,
-                { is_active: val }
-              ).then(res => {
-                this.$message.success(this.$t('common.updateSuccessMsg'))
-              }).catch(err => {
-                this.$message.error(this.$t('common.updateErrorMsg' + ' ' + err))
-              })
-            }.bind(this)
-          }
-        }
-      ]
-    }
-  },
-  computed: {
-    detailCardItems() {
-      return [
-        {
-          key: this.$t('common.Name'),
-          value: this.object.name
-        },
-        {
-          key: this.$t('perms.userCount'),
-          value: this.object.users_amount
-        },
-        {
-          key: this.$t('perms.userGroupCount'),
-          value: this.object.user_groups_amount
-        },
-        {
-          key: this.$t('perms.KubernetesAppCount'),
-          value: this.object.k8s_apps_amount
-        },
-        {
-          key: this.$t('perms.systemUserCount'),
-          value: this.object.system_users_amount
-        },
-        {
-          key: this.$t('perms.dateStart'),
-          value: toSafeLocalDateStr(this.object.date_start)
-        },
-        {
-          key: this.$t('common.dateExpired'),
-          value: toSafeLocalDateStr(this.object.date_expired)
-        },
-        {
-          key: this.$t('common.dateCreated'),
-          value: toSafeLocalDateStr(this.object.date_created)
-        },
-        {
-          key: this.$t('common.createdBy'),
-          value: this.object.created_by
-        },
-        {
-          key: this.$t('common.Comment'),
-          value: this.object.comment
-        }
-      ]
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionKubernetesApp.vue b/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionKubernetesApp.vue
deleted file mode 100644
index f06770033..000000000
--- a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionKubernetesApp.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    </el-col>
-    <el-col :md="10" :sm="24">
-      <RelationCard type="primary" v-bind="k8sAppRelationConfig" />
-      <RelationCard type="info" style="margin-top: 15px" v-bind="systemUserRelationConfig" />
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
-
-export default {
-  name: 'KubernetesAppPermissionKubernetesApp',
-  components: {
-    ListTable,
-    RelationCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/k8s-app-permissions/${this.object.id}/k8s-apps/all/`,
-        columns: [
-          'k8sapp_display', 'delete_action'
-        ],
-        columnsMeta: {
-          k8sapp_display: {
-            label: this.$t('perms.KubernetesApp'),
-            align: 'center'
-          },
-          delete_action: {
-            prop: 'k8sapp',
-            label: this.$t('common.Actions'),
-            align: 'center',
-            width: 150,
-            objects: this.object.k8s_apps,
-            formatter: DeleteActionFormatter,
-            deleteUrl: `/api/v1/perms/k8s-app-permissions-k8s-apps-relations/?k8sapppermission=${this.$route.params.id}&k8sapp=`
-          }
-        },
-        tableAttrs: {
-          border: false
-        }
-      },
-      headerActions: {
-        hasSearch: true,
-        hasRefresh: true,
-        hasLeftActions: true,
-        hasRightActions: true,
-        hasExport: false,
-        hasImport: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false
-      },
-      k8sAppRelationConfig: {
-        icon: 'fa-edit',
-        title: this.$t('perms.addK8sAppToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/applications/k8s-apps/'
-        },
-        hasObjectsId: this.object.k8s_apps,
-        showHasObjects: false,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/k8s-app-permissions-k8s-apps-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              k8sapppermission: objectId,
-              k8sapp: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      },
-      systemUserRelationConfig: {
-        icon: 'fa-edit',
-        title: this.$t('perms.addSystemUserToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/assets/system-users/',
-          processResults(data) {
-            let results = data.results
-            results = results.filter((item) => item.protocol === 'k8s').map((item) => {
-              return { label: item.name, value: item.id }
-            })
-            const more = !!data.next
-            return { results: results, pagination: more, total: data.count }
-          }
-        },
-        hasObjectsId: this.object.system_users,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/k8s-app-permissions-system-users-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              k8sapppermission: objectId,
-              systemuser: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        },
-        performDelete: (item) => {
-          const itemId = item.value
-          const objectId = this.object.id
-          const relationUrl = `/api/v1/perms/k8s-app-permissions-system-users-relations/?k8sapppermission=${objectId}&systemuser=${itemId}`
-          return this.$axios.delete(relationUrl)
-        },
-        onDeleteSuccess: (obj, that) => {
-          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
-          that.iHasObjects.splice(theRemoveIndex, 1)
-          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
-            const i = that.select2.disabledValues.indexOf(obj.value)
-            this.$log.debug('disabled values remove index: ', i)
-            that.select2.disabledValues.splice(i, 1)
-          }
-          this.$message.success(this.$t('common.deleteSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionUser.vue b/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionUser.vue
deleted file mode 100644
index 9c8362ad4..000000000
--- a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/KubernetesAppPermissionUser.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <el-row :gutter="20">
-    <el-col :md="14" :sm="24">
-      <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-    </el-col>
-    <el-col :md="10" :sm="24">
-      <RelationCard type="primary" v-bind="userRelationConfig" />
-      <RelationCard type="info" style="margin-top: 15px" v-bind="groupRelationConfig" />
-    </el-col>
-  </el-row>
-
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import RelationCard from '@/components/RelationCard'
-import { DeleteActionFormatter } from '@/components/ListTable/formatters/index'
-
-export default {
-  name: 'KubernetesAppPermissionUser',
-  components: {
-    ListTable,
-    RelationCard
-  },
-  props: {
-    object: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/k8s-app-permissions/${this.object.id}/users/all/`,
-        columns: [
-          'user_display', 'delete_action'
-        ],
-        columnsMeta: {
-          user_display: {
-            label: this.$t('perms.User'),
-            align: 'center'
-          },
-          delete_action: {
-            prop: 'user',
-            label: this.$t('common.Actions'),
-            align: 'center',
-            width: 150,
-            objects: this.object.users,
-            formatter: DeleteActionFormatter,
-            deleteUrl: `/api/v1/perms/k8s-app-permissions-users-relations/?k8sapppermission=${this.object.id}&user=`
-          }
-        },
-        tableAttrs: {
-          border: false
-        }
-      },
-      headerActions: {
-        hasSearch: true,
-        hasRefresh: true,
-        hasLeftActions: true,
-        hasRightActions: true,
-        hasExport: false,
-        hasImport: false,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false
-      },
-      userRelationConfig: {
-        icon: 'fa-user',
-        title: this.$t('perms.addUserToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/users/users/?fields_size=mini',
-          transformOption: (item) => {
-            return { label: item.name + '(' + item.username + ')', value: item.id }
-          }
-        },
-        hasObjectsId: this.object.users,
-        showHasObjects: false,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/k8s-app-permissions-users-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              k8sapppermission: objectId,
-              user: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      },
-      groupRelationConfig: {
-        icon: 'fa-group',
-        title: this.$t('perms.addUserGroupToThisPermission'),
-        objectsAjax: {
-          url: '/api/v1/users/groups/'
-        },
-        hasObjectsId: this.object.user_groups,
-        performAdd: (items) => {
-          const relationUrl = `/api/v1/perms/k8s-app-permissions-user-groups-relations/`
-          const objectId = this.object.id
-          const data = items.map(v => {
-            return {
-              k8sapppermission: objectId,
-              usergroup: v.value
-            }
-          })
-          return this.$axios.post(relationUrl, data)
-        },
-        onAddSuccess: (objects, that) => {
-          this.$log.debug('Select value', that.select2.value)
-          that.iHasObjects = [...that.iHasObjects, ...objects]
-          that.$refs.select2.clearSelected()
-          this.$message.success(this.$t('common.updateSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        },
-        performDelete: (item) => {
-          const objectId = this.object.id
-          const itemId = item.value
-          const relationUrl = `/api/v1/perms/k8s-app-permissions-user-groups-relations/?k8sapppermission=${objectId}&usergroup=${itemId}`
-          return this.$axios.delete(relationUrl)
-        },
-        onDeleteSuccess: (obj, that) => {
-          const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
-          that.iHasObjects.splice(theRemoveIndex, 1)
-          while (that.select2.disabledValues.indexOf(obj.value) !== -1) {
-            const i = that.select2.disabledValues.indexOf(obj.value)
-            this.$log.debug('disabled values remove index: ', i)
-            that.select2.disabledValues.splice(i, 1)
-          }
-          this.$message.success(this.$t('common.deleteSuccessMsg'))
-          this.$refs.ListTable.reloadTable()
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/index.vue b/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/index.vue
deleted file mode 100644
index a6acf4847..000000000
--- a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionDetail/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <GenericDetailPage :object.sync="KubernetesAppPermission" :active-menu.sync="config.activeMenu" v-bind="config" v-on="$listeners" @tab-click="TabClick">
-    <keep-alive>
-      <component :is="config.activeMenu" :object="KubernetesAppPermission" />
-    </keep-alive>
-  </GenericDetailPage>
-</template>
-
-<script>
-import { GenericDetailPage, TabPage } from '@/layout/components'
-import KubernetesAppPermissionDetail from './KubernetesAppPermissionDetail'
-import KubernetesAppPermissionUser from './KubernetesAppPermissionUser'
-import KubernetesAppPermissionKubernetesApp from './KubernetesAppPermissionKubernetesApp'
-
-export default {
-  components: {
-    KubernetesAppPermissionKubernetesApp,
-    KubernetesAppPermissionDetail,
-    KubernetesAppPermissionUser,
-    GenericDetailPage,
-    TabPage
-  },
-  data() {
-    return {
-      KubernetesAppPermission: {},
-      config: {
-        activeMenu: 'KubernetesAppPermissionDetail',
-        submenu: [
-          {
-            title: this.$t('common.BasicInfo'),
-            name: 'KubernetesAppPermissionDetail'
-          },
-          {
-            title: this.$t('perms.usersAndUserGroups'),
-            name: 'KubernetesAppPermissionUser'
-          },
-          {
-            title: this.$t('perms.KubernetesApp'),
-            name: 'KubernetesAppPermissionKubernetesApp'
-          }
-        ],
-        actions: {
-          detailApiUrl: `/api/v1/perms/k8s-app-permissions/${this.$route.params.id}/`,
-          deleteApiUrl: `/api/v1/perms/k8s-app-permissions/${this.$route.params.id}/`
-        }
-      }
-    }
-  },
-  methods: {
-    TabClick(tab) {
-      if (tab.name !== 'KubernetesAppPermissionDetail') {
-        this.$set(this.config, 'hasRightSide', false)
-      } else {
-        this.$set(this.config, 'hasRightSide', true)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionList.vue b/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionList.vue
deleted file mode 100644
index c10b66e71..000000000
--- a/src/views/perms/KubernetesAppPermission/KubernetesAppPermissionList.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" :title="title" />
-</template>
-
-<script>
-import { GenericListPage } from '@/layout/components'
-import { DetailFormatter } from '@/components/ListTable/formatters'
-
-export default {
-  components: {
-    GenericListPage
-  },
-  data() {
-    return {
-      title: this.$t('perms.KubernetesAppPermission'),
-      tableConfig: {
-        url: '/api/v1/perms/k8s-app-permissions/',
-        columns: ['name', 'users_amount', 'user_groups_amount', 'k8s_apps_amount', 'system_users_amount', 'is_valid', 'actions'],
-        columnsMeta: {
-          name: {
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'KubernetesAppPermissionDetail'
-              }
-            },
-            showOverflowTooltip: true
-          },
-          users_amount: {
-            label: this.$t('perms.User'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'KubernetesAppPermissionUser'
-              }
-            }
-          },
-          user_groups_amount: {
-            label: this.$t('perms.UserGroups'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'KubernetesAppPermissionUser'
-              }
-            }
-          },
-          k8s_apps_amount: {
-            label: this.$t('perms.KubernetesApp'),
-            width: '140px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'KubernetesAppPermissionKubernetesApp'
-              }
-            }
-          },
-          system_users_amount: {
-            label: this.$t('perms.SystemUser'),
-            width: '110px',
-            formatter: DetailFormatter,
-            formatterArgs: {
-              routeQuery: {
-                activeTab: 'KubernetesAppPermissionKubernetesApp'
-              }
-            }
-          }
-        }
-      },
-      headerActions: {
-        hasBulkDelete: false
-      }
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate.vue b/src/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate.vue
deleted file mode 100644
index 334371230..000000000
--- a/src/views/perms/RemoteAppPermission/RemoteAppPermissionCreateUpdate.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <GenericCreateUpdatePage :fields="fields" :initial="initial" :fields-meta="fieldsMeta" :url="url" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-import { getDayFuture } from '@/utils/common'
-
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      initial: {
-        is_active: true,
-        date_start: new Date().toISOString(),
-        date_expired: getDayFuture(36500, new Date()).toISOString()
-      },
-      fields: [
-        [this.$t('common.Basic'), ['name']],
-        [this.$t('perms.User'), ['users', 'user_groups']],
-        [this.$t('perms.remoteApp'), ['remote_apps', 'system_users']],
-        [this.$t('common.Other'), ['is_active', 'date_start', 'date_expired', 'comment']]
-      ],
-      url: '/api/v1/perms/remote-app-permissions/',
-      fieldsMeta: {
-        users: {
-          el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/users/users/?fields_size=mini',
-              transformOption: (item) => {
-                return { label: item.name + '(' + item.username + ')', value: item.id }
-              }
-            }
-          }
-        },
-        user_groups: {
-          el: {
-            value: [],
-            url: '/api/v1/users/groups/'
-          }
-        },
-        remote_apps: {
-          el: {
-            value: [],
-            url: '/api/v1/applications/remote-apps/'
-          }
-        },
-        system_users: {
-          el: {
-            value: [],
-            ajax: {
-              url: '/api/v1/assets/system-users/?protocol=rdp'
-            }
-          }
-        },
-        date_start: {
-          label: this.$t('common.dateStart')
-        },
-        date_expired: {
-          label: this.$t('common.dateExpired')
-        },
-        actions: {
-          label: this.$t('perms.Actions')
-        },
-        is_active: {
-          type: 'checkbox'
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/perms/const.js b/src/views/perms/const.js
new file mode 100644
index 000000000..bd7f81747
--- /dev/null
+++ b/src/views/perms/const.js
@@ -0,0 +1,102 @@
+import i18n from '@/i18n/i18n'
+import router from '@/router'
+import store from '@/store'
+export const CHROME = 'chrome'
+export const MYSQL_WORKBENCH = 'mysql_workbench'
+export const VMWARE_CLIENT = 'vmware_client'
+export const CUSTOM = 'custom'
+export const REMOTEAPP_CATEGORY = 'remote_app'
+
+function isValidateLicense() {
+  if (store.getters.publicSettings.XPACK_ENABLED) {
+    return store.getters.publicSettings.XPACK_LICENSE_IS_VALID
+  }
+  return true
+}
+
+export const REMOTE_APP = [
+  {
+    name: CHROME,
+    title: i18n.t(`applications.applicationsType.${CHROME}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: CHROME, category: REMOTEAPP_CATEGORY }}) }
+  },
+  {
+    name: MYSQL_WORKBENCH,
+    title: i18n.t(`applications.applicationsType.${MYSQL_WORKBENCH}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: MYSQL_WORKBENCH, category: REMOTEAPP_CATEGORY }}) }
+  },
+  {
+    name: VMWARE_CLIENT,
+    title: i18n.t(`applications.applicationsType.${VMWARE_CLIENT}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: VMWARE_CLIENT, category: REMOTEAPP_CATEGORY }}) }
+  },
+  {
+    name: CUSTOM,
+    title: i18n.t(`applications.applicationsType.${CUSTOM}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: CUSTOM, category: REMOTEAPP_CATEGORY }}) }
+  }
+]
+
+export const MYSQL = 'mysql'
+export const ORACLE = 'oracle'
+export const POSTGRESQL = 'postgresql'
+export const MARIADB = 'mariadb'
+export const DATABASE_CATEGORY = 'db'
+
+export const DATABASE = [
+  {
+    name: MYSQL,
+    title: i18n.t(`applications.applicationsType.${MYSQL}`),
+    type: 'primary',
+    can: true,
+    divided: true,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: MYSQL, category: DATABASE_CATEGORY }}) }
+  },
+  {
+    name: ORACLE,
+    title: i18n.t(`applications.applicationsType.${ORACLE}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: ORACLE, category: DATABASE_CATEGORY }}) }
+  },
+  {
+    name: POSTGRESQL,
+    title: i18n.t(`applications.applicationsType.${POSTGRESQL}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: POSTGRESQL, category: DATABASE_CATEGORY }}) }
+  },
+  {
+    name: MARIADB,
+    title: i18n.t(`applications.applicationsType.${MARIADB}`),
+    type: 'primary',
+    can: isValidateLicense,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: MARIADB, category: DATABASE_CATEGORY }}) }
+  }
+]
+
+export const KUBERNETES = 'k8s'
+export const CLOUD_CATEGORY = 'cloud'
+
+export const CLOUD = [
+  {
+    name: KUBERNETES,
+    title: i18n.t(`applications.applicationsType.${KUBERNETES}`),
+    divided: true,
+    type: 'primary',
+    can: true,
+    callback: function() { router.push({ name: 'ApplicationPermissionCreate', query: { type: KUBERNETES, category: CLOUD_CATEGORY }}) }
+  }
+]
+
+export const ApplicationTypes = [
+  ...REMOTE_APP, ...DATABASE, ...CLOUD
+]