perf: Add AccountDetail page

src/router/pam/automations.js

@@ -81,6 +81,16 @@ export default [
           // activeMenu: '/console/accounts/automations',
           permissions: ['accounts.view_gatheraccountsexecution']
         }
+      },
+      {
+        path: 'account/:id',
+        component: () => import('@/views/accounts/AccountDiscover/AccountDetail/index.vue'),
+        name: 'AccountDiscoverAccountDetail',
+        hidden: true,
+        meta: {
+          title: i18n.t('AccountDiscoverAccountDetail'),
+          permissions: ['accounts.view_gatheraccountsexecution']
+        }
       }
     ]
   },

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

@@ -0,0 +1,55 @@
+<template>
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="execution" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="execution" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import Info from './info.vue'
+import More from './more.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    Info,
+    More
+  },
+  data() {
+    return {
+      execution: { id: '' },
+      config: {
+        activeMenu: 'Info',
+        actions: {
+          detailApiUrl: `/api/v1/accounts/gathered-accounts/${this.$route.params.id}/`,
+          hasUpdate: false,
+          hasDelete: false
+        },
+        submenu: [
+          {
+            title: this.$t('Basic'),
+            name: 'Info'
+          },
+          {
+            title: this.$t('More'),
+            name: 'More'
+          }
+        ],
+        getTitle: this.getExecutionTitle
+
+      }
+    }
+  },
+  methods: {
+    getExecutionTitle() {
+      return `${this.$route.meta.title}: ${this.execution.id}`
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="16" :sm="24">
+      <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
+
+export default {
+  components: {
+    AutoDetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/accounts/gathered-accounts/${this.object.id}/`,
+      detailFields: [
+        'id', 'username',
+        'date_last_login', 'address_last_login',
+        'remote_present', 'present',
+        'date_updated', 'status'
+      ]
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :md="16" :sm="24">
+      <AutoDetailCard :object="detail" :url="url" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import AutoDetailCard from '@/components/Cards/DetailCard/auto.vue'
+
+export default {
+  components: {
+    AutoDetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/accounts/gathered-accounts/${this.object.id}/details/`,
+      detail: this.object?.detail
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/accounts/const.js

@@ -36,7 +36,13 @@ export const gatherAccountTableConfig = (vm, url) => {
         }
       },
       username: {
-        showOverflowTooltip: true
+        formatter: function(row) {
+          const to = {
+            name: 'AccountDiscoverAccountDetail',
+            params: { id: row.id }
+          }
+          return h('router-link', { props: { to }}, row.username)
+        }
       },
       present: {
         width: '120px'