perf: Session list with detail drawer

src/views/sessions/SessionList/BaseList.vue

@@ -1,9 +1,13 @@
 <template>
-  <ListTable :header-actions="headerActions" :table-config="tableConfig" />
+  <ListTable
+    :detail-drawer="detailDrawer"
+    :header-actions="headerActions"
+    :table-config="tableConfig"
+  />
 </template>
 
 <script type="text/jsx">
-import ListTable from '@/components/Table/ListTable'
+import { DrawerListTable as ListTable } from '@/components'
 import { timeOffset } from '@/utils/time'
 import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 
@@ -36,6 +40,7 @@ export default {
   },
   data() {
     return {
+      detailDrawer: () => import('../SessionDetail/index.vue'),
       tableConfig: {
         url: this.url,
         columnsExclude: ['terminal'],
@@ -45,20 +50,29 @@ export default {
             prop: 'id',
             label: this.$t('Number'),
             align: 'center',
-            formatter: function(row, column, cellValue, index) {
-              const label = index + 1
-              const route = { to: { name: 'SessionDetail', params: { id: row.id }}}
-              return <router-link {...{ attrs: route }} class='link'>{label}</router-link>
+            formatter: DetailFormatter,
+            formatterArgs: {
+              drawer: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => { return row.id },
+              getRoute: ({ row }) => {
+                return {
+                  name: 'SessionDetail',
+                  params: { id: row.id }
+                }
+              }
             }
           },
           user: {
             formatter: DetailFormatter,
             formatterArgs: {
+              drawer: true,
+              getTitle: ({ row }) => { return row.user },
               getRoute: ({ row }) => {
                 return {
                   name: 'UserDetail',
                   params: {
-                    id: row['user_id']
+                    id: row.user_id
                   }
                 }
               }
@@ -98,14 +112,14 @@ export default {
             label: this.$t('Target'),
             formatter: DetailFormatter,
             formatterArgs: {
-              getRoute: ({ row }) => {
-                return {
-                  name: 'AssetDetail',
-                  params: {
-                    id: row['asset_id']
-                  }
-                }
-              }
+              drawer: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => row.asset,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.asset_id },
+                query: { tab: 'Basic' }
+              })
             }
           },
           protocol: {

src/views/users/User/UserDetail/index.vue

@@ -43,6 +43,7 @@ export default {
     return {
       user: { name: '', username: '', email: '', comment: '' },
       config: {
+        url: '/api/v1/users/users',
         activeMenu: 'UserInfo',
         actions: {
           canUpdate: () => {