perf: Account discover use drawer component

src/views/accounts/AccountDiscover/AccountDetail/index.vue

@@ -12,6 +12,7 @@ import Info from './info.vue'
 import More from './more.vue'
 
 export default {
+  name: 'AccountDiscoverDetail',
   components: {
     GenericDetailPage,
     Info,

src/views/accounts/AccountDiscover/AccountDetail/info.vue

@@ -6,10 +6,13 @@
 
 <script>
 import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
+  name: 'AccountDiscoverInfo',
   components: {
-    AutoDetailCard
+    AutoDetailCard,
+    TwoCol
   },
   props: {
     object: {

src/views/accounts/AccountDiscover/AccountDetail/more.vue

@@ -9,6 +9,7 @@ import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
+  name: 'AccountDiscoverMore',
   components: {
     TwoCol,
     AutoDetailCard

src/views/accounts/AccountDiscover/AccountDiscoverList.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
+import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import DeleteDialog from '@/views/accounts/AccountDiscover/DeleteDialog.vue'
 import { gatherAccountHeaderActions, gatherAccountTableConfig } from '@/views/accounts/const'
 import AccountDiscoverDialog from '@/views/assets/Asset/AssetList/components/AccountDiscoverDialog.vue'

src/views/accounts/AccountDiscover/ExecutionDetail/index.vue

@@ -11,6 +11,7 @@ import { GenericDetailPage } from '@/layout/components'
 import Info from './info.vue'
 
 export default {
+  name: 'ExecutionDetail',
   components: {
     GenericDetailPage,
     Info

src/views/accounts/AccountDiscover/ExecutionDetail/info.vue

@@ -6,10 +6,13 @@
 
 <script>
 import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
+  name: 'ExecutionDetailInfo',
   components: {
-    AutoDetailCard
+    AutoDetailCard,
+    TwoCol
   },
   props: {
     object: {

src/views/accounts/AccountDiscover/TaskDetail/Detail.vue

@@ -6,12 +6,14 @@
 
 <script>
 import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 import { toSafeLocalDateStr } from '@/utils/time'
 
 export default {
   name: 'Detail',
   components: {
-    AutoDetailCard
+    AutoDetailCard,
+    TwoCol
   },
   props: {
     object: {

src/views/accounts/AccountDiscover/TaskExecutionList.vue

@@ -49,7 +49,8 @@ export default {
                 name: 'AccountDiscoverTaskDetail',
                 params: { id: row.automation },
                 query: { type: 'pam' }
-              })
+              }),
+              drawer: true
             },
             id: ({ row }) => row.automation
           },

src/views/accounts/AccountPush/AccountPushExecutionDetail/AccountPushExecutionInfo.vue

@@ -6,11 +6,12 @@
 
 <script>
 import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
-
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 export default {
   name: 'AccountPushExecutionInfo',
   components: {
-    AutoDetailCard
+    AutoDetailCard,
+    TwoCol
   },
   props: {
     object: {

src/views/accounts/const.js

@@ -1,11 +1,10 @@
 import { toSafeLocalDateStr } from '@/utils/time'
-import { ActionsFormatter, DiscoverConfirmFormatter } from '@/components/Table/TableFormatters'
+import { ActionsFormatter, DetailFormatter, DiscoverConfirmFormatter } from '@/components/Table/TableFormatters'
 
 export const gatherAccountTableConfig = (vm, url) => {
   if (!url) {
     url = '/api/v1/accounts/gathered-accounts/'
   }
-  const h = vm.$createElement
   return {
     url: url,
     hasTree: true,
@@ -23,25 +22,30 @@ export const gatherAccountTableConfig = (vm, url) => {
     },
     columnsMeta: {
       asset: {
-        formatter: function(row) {
+        formatter: DetailFormatter,
-          const to = {
+        formatterArgs: {
+          can: vm.$hasPerm('assets.view_asset'),
+          getTitle: ({ row }) => row.asset.name,
+          getRoute({ row }) {
+            return {
               name: 'AssetDetail',
               params: { id: row.asset.id }
             }
-          if (vm.$hasPerm('assets.view_asset')) {
+          },
-            return h('router-link', { props: { to }}, row.asset.name)
+          drawer: true
-          } else {
-            return h('span', row.asset.name)
-          }
         }
       },
       username: {
-        formatter: function(row) {
+        formatter: DetailFormatter,
-          const to = {
+        formatterArgs: {
+          can: true,
+          getRoute({ row }) {
+            return {
               name: 'AccountDiscoverAccountDetail',
               params: { id: row.id }
             }
-          return h('router-link', { props: { to }}, row.username)
+          },
+          drawer: true
         }
       },
       present: {

src/views/acl/CommandAcl/CommandFilterAcl/CommandFilterAclDetail/Detail.vue

@@ -6,11 +6,13 @@
 
 <script>
 import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
   name: 'CommandFilterAclDetail',
   components: {
-    AutoDetailCard
+    AutoDetailCard,
+    TwoCol
   },
   props: {
     object: {