update: terminal operation

WeBankPartners · Jun 18, 2024 · 4195577 · 4195577
1 parent 03498ae
commit 4195577
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 22 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -63,14 +63,14 @@
     "husky": "^4.0.7",
     "lint-staged": "^9.5.0",
     "node-notifier": "^5.1.2",
-    "node-sass": "^4.13.0",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.21",
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass": "^1.77.5",
     "sass-loader": "^7.1.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",

diff --git a/ui/src/locale/i18n/en-US.json b/ui/src/locale/i18n/en-US.json
@@ -225,5 +225,8 @@
   "header_title": "Terminal",
   "asset": "Asset",
   "t_asset": "Asset",
-  "jump_server": "Jump Server"
+  "jump_server": "Jump Server",
+  "total": "Total ",
+  "items": "items",
+  "page": "/page"
 }
diff --git a/ui/src/locale/i18n/zh-CN.json b/ui/src/locale/i18n/zh-CN.json
@@ -227,5 +227,8 @@
   "header_title": "Terminal",
   "asset": "终端",
   "t_asset": "终端资产",
-  "jump_server": "跳板机"
+  "jump_server": "跳板机",
+  "total": "总计 ",
+  "items": "条",
+  "page": "条/页"
 }
diff --git a/ui/src/pages/components/table-page/table.vue b/ui/src/pages/components/table-page/table.vue
@@ -990,7 +990,7 @@ export default {
   margin: 2px 4px;
   line-height: 18px;
 }
-.multiFilter /deep/.ivu-checkbox-group-item {
+.multiFilter ::deep.ivu-checkbox-group-item {
   display: block;
   padding: 0 16px;
   margin: 0;
@@ -1114,7 +1114,7 @@ export default {
   .cell {
     overflow: hidden;
   }
-  /deep/ .ivu-tooltip-rel {
+  ::deep .ivu-tooltip-rel {
     display: block;
   }
   .poplableSty {

diff --git a/ui/src/pages/terminal-operation.vue b/ui/src/pages/terminal-operation.vue
@@ -74,15 +74,30 @@
                   </div>
                 </TabPane>
               </Tabs>
-              <Input
-                v-model="searchHost"
-                :placeholder="$t('t_search_host')"
-                @on-change="filterHost"
-                style="width: 100%;margin-bottom:16px"
-              />
+              <div style="margin-bottom:8px">
+                <Input
+                  v-model="searchHost"
+                  :placeholder="$t('t_search_host')"
+                  @on-enter="filterHost"
+                  class="search-input"
+                />
+                <Button type="primary" @click="filterHost" style="width: 70px;">{{ $t('button.search') }}</Button>
+              </div>
               <template v-if="hostInfo.length > 0">
+                <div style="margin-bottom:8px;display: flex;justify-content: space-between;">
+                  <span>{{ $t('total') }}{{ hostInfo.length }}{{ $t('items') }}</span>
+                  <Page
+                    style="display: inline-block;vertical-align: bottom;"
+                    :page-size="pageSize"
+                    :current="current"
+                    @on-change="pageChange"
+                    :total="hostInfo.length"
+                    simple
+                  />
+                  <span>{{ pageSize }}{{ $t('page') }}</span>
+                </div>
                 <Collapse>
-                  <template v-for="host in hostInfo">
+                  <template v-for="host in hostInfoToShow">
                     <Panel :name="host.ip_address" :key="host.ip_address">
                       <div class="diyTitle">
                         {{ host.ip_address }}<span style="color:#2d8cf0">[{{ host.username }}]</span>{{ host.name }}
@@ -292,8 +307,9 @@ export default {
       // sendForAll: true,
       sendHostSet: [],
       searchHost: '',
-      hostInfo: [],
-      oriHostInfo: [],
+      hostInfo: [], // 搜索后数据
+      oriHostInfo: [], // 原始全量数据
+      hostInfoToShow: [], // 搜索后分页显示数据
 
       activeTab: '',
       terminalTabs: [],
@@ -335,7 +351,10 @@ export default {
       isStartSelected: false,
       altDirect: 'up',
       selectedCmdIndex: -1,
-      historyCmd: []
+      historyCmd: [],
+      // 结果分页
+      current: 1,
+      pageSize: 20
     }
   },
   mounted () {
@@ -373,6 +392,7 @@ export default {
       this.currentHostTab = name
       this.hostInfo = []
       this.oriHostInfo = []
+      this.hostInfoToShow = []
       this.selectedCollectionId = ''
       this.searchHost = ''
       if (name === 'default') {
@@ -396,6 +416,8 @@ export default {
         })
         this.hostInfo = data.data
         this.oriHostInfo = JSON.parse(JSON.stringify(this.hostInfo))
+        this.current = 1
+        this.finalData()
       }
     },
     clearSelectedCollectionId () {
@@ -470,6 +492,8 @@ export default {
         })
         this.hostInfo = data.data
         this.oriHostInfo = JSON.parse(JSON.stringify(this.hostInfo))
+        this.current = 1
+        this.finalData()
       }
     },
     async getRoleList () {
@@ -635,13 +659,8 @@ export default {
       }
     },
     filterHost () {
-      if (this.searchHost) {
-        this.hostInfo = this.oriHostInfo.filter(
-          item => item.ip_address.includes(this.searchHost) || item.name.includes(this.searchHost)
-        )
-      } else {
-        this.hostInfo = this.oriHostInfo
-      }
+      this.current = 1
+      this.finalData()
     },
     async getHostList () {
       const { status, data } = await getHost()
@@ -652,6 +671,24 @@ export default {
         })
         this.hostInfo = data.data
         this.oriHostInfo = JSON.parse(JSON.stringify(this.hostInfo))
+        this.current = 1
+        this.finalData()
+      }
+    },
+    pageChange (page) {
+      this.current = page
+      this.finalData()
+    },
+    finalData () {
+      const startNumber = (this.current - 1) * this.pageSize
+      if (this.searchHost === '') {
+        this.hostInfo = this.oriHostInfo
+        this.hostInfoToShow = this.hostInfo.slice(startNumber, startNumber + this.pageSize)
+      } else {
+        this.hostInfo = this.oriHostInfo.filter(
+          item => item.ip_address.includes(this.searchHost) || item.name.includes(this.searchHost)
+        )
+        this.hostInfoToShow = this.hostInfo.slice(startNumber, startNumber + this.pageSize)
       }
     },
     openTerminal (host) {
@@ -812,4 +849,7 @@ export default {
   background-color: rgb(226, 222, 222);
   margin-bottom: 5px;
 }
+.search-input {
+  width: ~'calc(100% - 90px)';
+}
 </style>