From 9835db2c895a59cfcffbe1f9ec597083c0982c5b Mon Sep 17 00:00:00 2001
From: Eric <xplzv@126.com>
Date: Thu, 14 May 2020 20:47:22 +0800
Subject: [PATCH] Session offline and Online view

---
 src/router/sessions.js                        | 14 +--
 .../BaseList.vue}                             | 30 ++++--
 .../sessions/SessionList/OfflineList.vue      | 45 +++++++++
 src/views/sessions/SessionList/OnlineList.vue | 50 ++++++++++
 src/views/sessions/SessionList/index.vue      | 50 ++++++++++
 src/views/sessions/SessionOnlineList.vue      | 94 -------------------
 src/views/sessions/Storage/index.vue          |  9 --
 7 files changed, 171 insertions(+), 121 deletions(-)
 rename src/views/sessions/{SessionOfflineList.vue => SessionList/BaseList.vue} (84%)
 create mode 100644 src/views/sessions/SessionList/OfflineList.vue
 create mode 100644 src/views/sessions/SessionList/OnlineList.vue
 create mode 100644 src/views/sessions/SessionList/index.vue
 delete mode 100644 src/views/sessions/SessionOnlineList.vue

diff --git a/src/router/sessions.js b/src/router/sessions.js
index 61dba4d45..24f51abd1 100644
--- a/src/router/sessions.js
+++ b/src/router/sessions.js
@@ -1,16 +1,10 @@
 import i18n from '@/i18n/i18n'
 export default [
   {
-    path: 'session-online',
-    name: 'SessionOnlineList',
-    component: () => import('@/views/sessions/SessionOnlineList'),
-    meta: { title: i18n.t('route.SessionOnline') }
-  },
-  {
-    path: 'session-offline',
-    name: 'SessionOfflineList',
-    component: () => import('@/views/sessions/SessionOfflineList'),
-    meta: { title: i18n.t('route.SessionOffline') }
+    path: 'session',
+    name: 'SessionList',
+    component: () => import('@/views/sessions/SessionList/index'),
+    meta: { title: i18n.t('route.Sessions') }
   },
   {
     path: 'command',
diff --git a/src/views/sessions/SessionOfflineList.vue b/src/views/sessions/SessionList/BaseList.vue
similarity index 84%
rename from src/views/sessions/SessionOfflineList.vue
rename to src/views/sessions/SessionList/BaseList.vue
index e8c0b6e1f..2ea26fd11 100644
--- a/src/views/sessions/SessionOfflineList.vue
+++ b/src/views/sessions/SessionList/BaseList.vue
@@ -1,21 +1,31 @@
 <template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
+  <ListTable :table-config="tableConfig" :header-actions="headerActions" />
 </template>
 
 <script>
+import ListTable from '@/components/ListTable'
 import { timeOffset, toSafeLocalDateStr } from '@/utils/common'
-import { GenericListPage } from '@/layout/components'
-import { ActionsFormatter } from '@/components/ListTable/formatters/index'
-
+import { ActionsFormatter } from '@/components/ListTable/formatters'
 export default {
+  name: 'BaseList',
   components: {
-    GenericListPage
+    ListTable
+  },
+  props: {
+    url: {
+      type: String,
+      default: () => '/api/v1/terminal/sessions/'
+    },
+    extraActions: {
+      type: Array,
+      default: () => []
+    }
   },
   data() {
     return {
       tableConfig: {
         hasSelection: false,
-        url: '/api/v1/terminal/sessions/?is_finished=1',
+        url: this.url,
         columns: [
           'index', 'user', 'asset', 'system_user', 'remote_addr', 'protocol', 'login_from',
           'command_amount', 'date_start', 'duration', 'actions'
@@ -85,13 +95,17 @@ export default {
       },
       headerActions: {
         hasCreate: false,
-        hasBulkDelete: false
+        hasBulkDelete: false,
+        hasExport: false,
+        hasImport: false,
+        hasRefresh: false,
+        hasBulkUpdate: false
       }
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
 
 </style>
diff --git a/src/views/sessions/SessionList/OfflineList.vue b/src/views/sessions/SessionList/OfflineList.vue
new file mode 100644
index 000000000..42ae90c74
--- /dev/null
+++ b/src/views/sessions/SessionList/OfflineList.vue
@@ -0,0 +1,45 @@
+<template>
+  <BaseList :url="url" :extra-actions="extraActions" />
+</template>
+
+<script>
+import BaseList from './BaseList'
+export default {
+  name: 'OfflineList',
+  components: {
+    BaseList
+  },
+  data() {
+    return {
+      url: '/api/v1/terminal/sessions/?is_finished=1',
+      extraActions: [
+        {
+          name: 'replay',
+          title: this.$t('sessions.replay'),
+          type: 'warning',
+          callback: function({ cellValue, tableData }) {
+            // 跳转到luna页面
+            const replayUrl = '/luna/replay/' + cellValue
+            window.open(replayUrl)
+          }
+        },
+        {
+          name: 'download',
+          title: this.$t('sessions.download'),
+          type: 'primary',
+          callback: function({ cellValue, tableData }) {
+            // 跳转下载页面
+            const downloadUrl = '/terminal/session/00000000-0000-0000-0000-000000000000/replay/download/'
+              .replace('00000000-0000-0000-0000-000000000000', cellValue)
+            window.open(downloadUrl)
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sessions/SessionList/OnlineList.vue b/src/views/sessions/SessionList/OnlineList.vue
new file mode 100644
index 000000000..586e3957e
--- /dev/null
+++ b/src/views/sessions/SessionList/OnlineList.vue
@@ -0,0 +1,50 @@
+<template>
+  <BaseList :url="url" :extra-actions="extraActions" />
+</template>
+
+<script>
+import BaseList from './BaseList'
+import { terminateSession } from '@/api/sessions'
+export default {
+  name: 'OnlineList',
+  components: {
+    BaseList
+  },
+  data() {
+    return {
+      url: '/api/v1/terminal/sessions/?is_finished=0',
+      extraActions: [
+        {
+          name: 'terminate',
+          title: this.$t('sessions.terminate'),
+          type: 'danger',
+          callback: function({ reload, cellValue, tableData }) {
+            // 终断 session reload
+            const data = [cellValue]
+            terminateSession(data).then(res => {
+              window.setTimeout(function() {
+                reload()
+              }, 50000)
+            }
+            )
+          }
+        },
+        {
+          name: 'join',
+          title: this.$t('sessions.join'),
+          type: 'primary',
+          callback: function({ cellValue, tableData }) {
+            // 跳转到luna页面
+            const joinUrl = '/luna/join/?shareroom=' + cellValue
+            window.open(joinUrl, 'height=600, width=800, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')
+          }
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sessions/SessionList/index.vue b/src/views/sessions/SessionList/index.vue
new file mode 100644
index 000000000..c9243fc2f
--- /dev/null
+++ b/src/views/sessions/SessionList/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu">
+    <div slot="title">
+      {{ Title }}
+    </div>
+    <keep-alive>
+      <component :is="config.activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+import OnlineList from './OnlineList'
+import OfflineList from './OfflineList'
+export default {
+  name: 'Index',
+  components: {
+    TabPage,
+    OnlineList,
+    OfflineList
+  },
+  data() {
+    return {
+      config: {
+        activeMenu: 'SessionOnline',
+        submenu: [
+          {
+            title: this.$t('route.SessionOnline'),
+            name: 'OnlineList'
+          },
+          {
+            title: this.$t('route.SessionOffline'),
+            name: 'OfflineList'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    Title() {
+      return this.$t('route.Sessions')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sessions/SessionOnlineList.vue b/src/views/sessions/SessionOnlineList.vue
deleted file mode 100644
index 1cda8beae..000000000
--- a/src/views/sessions/SessionOnlineList.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <GenericListPage :table-config="tableConfig" :header-actions="headerActions" />
-</template>
-
-<script>
-import { GenericListPage } from '@/layout/components'
-import { toSafeLocalDateStr } from '@/utils/common'
-import { terminateSession } from '@/api/sessions'
-
-export default {
-  components: {
-    GenericListPage
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: '/api/v1/terminal/sessions/?is_finished=0',
-        columns: [
-          'index', 'user', 'asset', 'system_user', 'remote_addr', 'protocol', 'login_from',
-          'command_amount', 'date_start', 'duration', 'actions'
-        ],
-        columnsMeta: {
-          index: {
-            label: this.$t('sessions.id'),
-            formatter: function(row, column, cellValue, index) {
-              return <a class='detail el-link el-link--success is-underline' href= { '/terminal/sessions/' + row.id }>{ index + 1}</a>
-            }
-          },
-          command_amount: {
-            label: this.$t('sessions.command')
-          },
-          login_from: {
-            label: this.$t('sessions.loginForm')
-          },
-          protocol: {
-            label: this.$t('sessions.protocol'),
-            formatter: null
-          },
-          date_start: {
-            formatter: function(row) {
-              return toSafeLocalDateStr(row.date_start)
-            }
-          },
-          duration: {
-            label: this.$t('sessions.duration'),
-            formatter: null
-          },
-          actions: {
-            prop: 'id',
-            hasEdit: false,
-            hasDelete: false,
-            hasUpdate: false,
-            extraActions: [
-              {
-                name: 'terminate',
-                title: this.$t('sessions.terminate'),
-                type: 'danger',
-                callback: function({ reload, cellValue, tableData }) {
-                  // 终断 session reload
-                  const data = [cellValue]
-                  terminateSession(data).then(res => {
-                    window.setTimeout(function() {
-                      reload()
-                    }, 50000)
-                  }
-                  )
-                }
-              },
-              {
-                name: 'join',
-                title: this.$t('sessions.join'),
-                type: 'primary',
-                callback: function({ cellValue, tableData }) {
-                  // 跳转到luna页面
-                  const joinUrl = '/luna/join/?shareroom=' + cellValue
-                  window.open(joinUrl, 'height=600, width=800, top=400, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no')
-                }
-              }
-            ]
-          }
-        }
-      },
-      headerActions: {
-        hasCreate: false,
-        hasBulkDelete: false
-      }
-    }
-  }
-}
-</script>
-
-<style>
-
-</style>
diff --git a/src/views/sessions/Storage/index.vue b/src/views/sessions/Storage/index.vue
index 06b8e5d53..dd2c2d572 100644
--- a/src/views/sessions/Storage/index.vue
+++ b/src/views/sessions/Storage/index.vue
@@ -22,7 +22,6 @@ export default {
   },
   data() {
     return {
-      // activeMenu: 'ReplayStorage',
       config: {
         activeMenu: 'ReplayStorage',
         submenu: [
@@ -42,14 +41,6 @@ export default {
     Title() {
       return this.$t('sessions.storage')
     }
-    // activeMenu: {
-    //   get: function() {
-    //     return this.config.activeMenu
-    //   },
-    //   set: function(newValue) {
-    //     this.config.activeMenu = newValue
-    //   }
-    // }
   },
   mounted() {
     const params = this.$route.params