feat: 资产详情页面添加历史执行命令列表页面 (#3568)

* feat: 资产详情页面添加历史执行命令列表页面

---------

Co-authored-by: wangruidong <940853815@qq.com>

src/router/audit/sessions.js

@@ -34,7 +34,7 @@ export default [
   {
     path: 'command',
     name: 'CommandList',
-    component: () => import('@/views/sessions/CommandList'),
+    component: () => import('@/views/sessions/CommandList/index'),
     meta: {
       title: i18n.t('route.Commands'),
       permissions: ['terminal.view_command']

src/router/console/sessions.js

@@ -26,7 +26,7 @@ export default [
   {
     path: 'commands',
     name: 'CommandList',
-    component: () => import('@/views/sessions/CommandList'),
+    component: () => import('@/views/sessions/CommandList/index'),
     meta: { title: i18n.t('route.Commands'), permissions: [] }
   },
   {

src/views/assets/Asset/AssetDetail/AssetCommand.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-row :gutter="10">
+    <el-col :span="18">
+      <BaseList :asset-id="object.id" :is-page="false" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import BaseList from '@/views/sessions/CommandList/index.vue'
+
+export default {
+  name: 'AssetCommand',
+  components: {
+    BaseList
+  },
+  props: {
+    object: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      title: '',
+      url: `/api/v1/terminal/command-storages/tree/?real=1&asset_id=${this.object.id}&order=-date_end&is_finished=1`
+    }
+  }
+
+}
+</script>

src/views/assets/Asset/AssetDetail/AssetSession.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-row :gutter="10">
+    <el-col :span="18">
+      <OfflineList :url="url" />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import OfflineList from '@/views/sessions/SessionList/OfflineList.vue'
+
+export default {
+  name: 'AssetsSession',
+  components: {
+    OfflineList
+  },
+  props: {
+    object: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/terminal/sessions/?asset_id=${this.object.id}&order=-date_end&is_finished=1`
+    }
+  }
+
+}
+</script>

src/views/assets/Asset/AssetDetail/index.vue

@@ -16,6 +16,8 @@ import { GenericDetailPage, TabPage } from '@/layout/components'
 import Detail from './Detail.vue'
 import Account from './Account.vue'
 import PermUserList from './PermUser.vue'
+import AssetSession from './AssetSession.vue'
+import AssetCommand from './AssetCommand.vue'
 
 export default {
   name: 'AssetListDetail',
@@ -24,7 +26,9 @@ export default {
     TabPage,
     Detail,
     Account,
-    PermUserList
+    PermUserList,
+    AssetSession,
+    AssetCommand
   },
   data() {
     return {
@@ -45,6 +49,16 @@ export default {
             title: this.$t('assets.PermUserList'),
             name: 'PermUserList',
             hidden: () => !this.$hasPerm('perms.view_assetpermission')
+          },
+          {
+            title: this.$t('route.SessionList'),
+            name: 'AssetSession',
+            hidden: () => !this.$hasPerm('terminal.view_session')
+          },
+          {
+            title: this.$t('route.Commands'),
+            name: 'AssetCommand',
+            hidden: () => !this.$hasPerm('terminal.view_command')
           }
         ],
         hasRightSide: true,

src/views/sessions/CommandList/BaseList.vue

@@ -1,6 +1,6 @@
 <template>
-  <GenericTreeListPage
-    ref="GenericTreeListPage"
+  <TreeTable
+    ref="CommandTreeTable"
     v-loading="loading"
     :header-actions="headerActions"
     :table-config="tableConfig"
@@ -14,9 +14,9 @@
 </template>
 
 <script>
-import GenericTreeListPage from '@/layout/components/GenericTreeListPage/index'
+import TreeTable from '@/components/Table/TreeTable/index.vue'
 import { getDayEnd, getDaysAgo, toSafeLocalDateStr } from '@/utils/common'
-import { OutputExpandFormatter } from './formatters'
+import { OutputExpandFormatter } from '../formatters'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import isFalsey from '@/components/Table/DataTable/compenents/el-data-table/utils/is-falsey'
 import deepmerge from 'deepmerge'
@@ -24,8 +24,15 @@ import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-tabl
 import { createSourceIdCache } from '@/api/common'
 
 export default {
+  name: 'CommandList',
   components: {
-    GenericTreeListPage
+    TreeTable
+  },
+  props: {
+    assetId: {
+      type: String,
+      default: () => ''
+    }
   },
   data() {
     const vm = this
@@ -118,16 +125,14 @@ export default {
         },
         canExportSelected: true,
         exportOptions: {
-          // Todo: 优化这里，和抽象组件重复了
           performExport: async(selectRows, exportOption, q, exportTypeOption) => {
             let url = this.tableConfig.url
             url = (process.env.VUE_APP_ENV === 'production') ? (`${url}`) : (`${process.env.VUE_APP_BASE_API}${url}`)
-            const query = Object.assign({}, q)
+            const query = { ...q }
             if (exportOption === 'selected') {
               const resources = []
-              const data = selectRows
-              for (let index = 0; index < data.length; index++) {
-                resources.push(data[index].id)
+              for (const item of selectRows) {
+                resources.push(item.id)
               }
               const spm = await createSourceIdCache(resources)
               query['spm'] = spm.spm
@@ -171,6 +176,9 @@ export default {
               return
             }
             this.tableConfig.url = `/api/v1/terminal/commands/?command_storage_id=${treeNode.id}&order=-timestamp`
+            if (this.assetId) {
+              this.tableConfig.url += `&asset_id=${this.assetId}`
+            }
           }
         }
       }
@@ -178,7 +186,7 @@ export default {
   },
   computed: {
     treeTable() {
-      return this.$refs.GenericTreeListPage.$refs.TreeTable
+      return this.$refs.CommandTreeTable
     }
   },
   watch: {},

src/views/sessions/CommandList/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <Page v-if="isPage" v-bind="$attrs">
+    <CommandList v-bind="$attrs" />
+  </Page>
+  <div v-else>
+    <CommandList v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+import { Page } from '@/layout/components'
+import CommandList from './BaseList.vue'
+
+export default {
+  name: 'BaseList',
+  components: {
+    Page,
+    CommandList
+  },
+  props: {
+    isPage: {
+      type: Boolean,
+      default: () => true
+    }
+  }
+}
+</script>

src/views/sessions/SessionList/BaseList.vue

@@ -20,6 +20,18 @@ export default {
     extraActions: {
       type: Array,
       default: () => []
+    },
+    columnsShow: {
+      type: Object,
+      default: () => {
+        return {
+          min: ['id', 'actions'],
+          default: [
+            'id', 'user', 'asset', 'account', 'remote_addr', 'protocol',
+            'command_amount', 'date_start', 'duration', 'actions'
+          ]
+        }
+      }
     }
   },
   data() {
@@ -28,13 +40,7 @@ export default {
         url: this.url,
         columnsExtra: ['index', 'duration'],
         columnsExclude: ['terminal'],
-        columnsShow: {
-          min: ['id', 'actions'],
-          default: [
-            'id', 'user', 'asset', 'account', 'remote_addr', 'protocol',
-            'command_amount', 'date_start', 'duration', 'actions'
-          ]
-        },
+        columnsShow: this.columnsShow,
         columnsMeta: {
           id: {
             prop: 'id',

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

@@ -1,18 +1,18 @@
 <template>
   <el-row :gutter="10">
     <el-col :span="18">
-      <OfflineList :url="url" />
+      <BaseList :url="url" :columns-show="columnsShow" />
     </el-col>
   </el-row>
 </template>
 
 <script>
-import OfflineList from '@/views/sessions/SessionList/OfflineList.vue'
+import BaseList from '@/views/sessions/SessionList/BaseList.vue'
 
 export default {
   name: 'UserSession',
   components: {
-    OfflineList
+    BaseList
   },
   props: {
     object: {
@@ -22,7 +22,14 @@ export default {
   },
   data() {
     return {
-      url: `/api/v1/terminal/sessions/?user_id=${this.object.id}&order=-date_end&is_finished=1`
+      url: `/api/v1/terminal/sessions/?user_id=${this.object.id}&order=is_finished,-date_end`,
+      columnsShow: {
+        min: ['id'],
+        default: [
+          'id', 'user', 'asset', 'account', 'remote_addr', 'protocol',
+          'command_amount', 'date_start', 'duration'
+        ]
+      }
     }
   }