From 007cef96c721ea9189c51c755dab409d45b163a8 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Fri, 18 Feb 2022 08:53:35 +0800
Subject: [PATCH] =?UTF-8?q?U=20web=20terminal=20=E4=B8=BB=E6=9C=BA?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=B7=BB=E5=8A=A0=E5=88=B7=E6=96=B0=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=20#433?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/ssh/index.js          | 42 ++++++++++++++----------
 spug_web/src/pages/ssh/index.module.less |  2 +-
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/spug_web/src/pages/ssh/index.js b/spug_web/src/pages/ssh/index.js
index 5813242..9967bb0 100644
--- a/spug_web/src/pages/ssh/index.js
+++ b/spug_web/src/pages/ssh/index.js
@@ -5,8 +5,8 @@
  */
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Tabs, Tree, Input, Spin } from 'antd';
-import { FolderOutlined, FolderOpenOutlined, CloudServerOutlined, SearchOutlined } from '@ant-design/icons';
+import { Tabs, Tree, Input, Spin, Button } from 'antd';
+import { FolderOutlined, FolderOpenOutlined, CloudServerOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { NotFound, AuthButton } from 'components';
 import Terminal from './Terminal';
 import FileManager from './FileManager';
@@ -30,6 +30,27 @@ function WebSSH(props) {
   useEffect(() => {
     window.document.title = 'Spug web terminal'
     window.addEventListener('beforeunload', leaveTips)
+    fetchNodes()
+    return () => window.removeEventListener('beforeunload', leaveTips)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (searchValue) {
+      const newTreeData = rawHostList.filter(x => includes(x.title, searchValue))
+      setTreeData(newTreeData)
+    } else {
+      setTreeData(rawTreeData)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue])
+
+  function leaveTips(e) {
+    e.returnValue = '确定要离开页面？'
+  }
+
+  function fetchNodes() {
+    setFetching(true)
     http.get('/api/host/group/?with_hosts=1')
       .then(res => {
         const tmp = {}
@@ -54,22 +75,6 @@ function WebSSH(props) {
         }
       })
       .finally(() => setFetching(false))
-    return () => window.removeEventListener('beforeunload', leaveTips)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (searchValue) {
-      const newTreeData = rawHostList.filter(x => includes(x.title, searchValue))
-      setTreeData(newTreeData)
-    } else {
-      setTreeData(rawTreeData)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchValue])
-
-  function leaveTips(e) {
-    e.returnValue = '确定要离开页面？'
   }
 
   function _openNode(node) {
@@ -138,6 +143,7 @@ function WebSSH(props) {
           <Spin spinning={fetching}>
             <Input allowClear className={styles.search} prefix={<SearchOutlined style={{color: '#999'}}/>}
                    placeholder="输入检索" onChange={e => setSearchValue(e.target.value)}/>
+            <Button icon={<SyncOutlined/>} type="link" loading={fetching} onClick={fetchNodes}/>
             <Tree.DirectoryTree
               defaultExpandAll
               expandAction="doubleClick"
diff --git a/spug_web/src/pages/ssh/index.module.less b/spug_web/src/pages/ssh/index.module.less
index e0a6a9e..8498da5 100644
--- a/spug_web/src/pages/ssh/index.module.less
+++ b/spug_web/src/pages/ssh/index.module.less
@@ -32,7 +32,7 @@
 
             .search {
                 margin: 12px 10px;
-                width: 260px;
+                width: 220px;
             }
         }
     }