@electerm/electerm-react 3.0.6 → 3.0.18

package/client/common/default-setting.js

@@ -72,6 +72,7 @@ export default {
   sessionLogPath: '',
   sshSftpSplitView: false,
   showCmdSuggestions: false,
+  autoReconnectTerminal: false,
   startDirectoryLocal: '',
   allowMultiInstance: false,
   disableDeveloperTool: false

package/client/components/bookmark-form/config/ftp.js

@@ -34,6 +34,7 @@ const ftpConfig = {
         { type: 'password', name: 'password', label: () => e('password') },
         { type: 'switch', name: 'secure', label: () => e('secure'), valuePropName: 'checked' },
         commonFields.encode,
+        commonFields.proxy,
         commonFields.type
       ]
     }

package/client/components/session/sessions.jsx

@@ -11,6 +11,7 @@ import pixed from '../layout/pixed'
 export default class Sessions extends Component {
   // Function to reload a tab using store.reloadTab
   reloadTab = (tab) => {
+    window.store.updateTab(tab.id, tab)
     window.store.reloadTab(tab.id)
   }
 

package/client/components/setting-panel/setting-terminal.jsx

@@ -589,7 +589,8 @@ export default class SettingTerminal extends Component {
             'ctrlOrMetaOpenTerminalLink',
             'sftpPathFollowSsh',
             'sshSftpSplitView',
-            'showCmdSuggestions'
+            'showCmdSuggestions',
+            'autoReconnectTerminal'
           ].map(d => this.renderToggle(d))
         }
         <div className='pd1b'>{e('terminalBackSpaceMode')}</div>

package/client/components/sftp/address-bookmark-item.jsx

@@ -68,7 +68,7 @@ export default class AddrBookmarkItem extends Component {
         onDrop={this.handleDrop}
       >
         {globTag}
-        <b>{item.addr}</b>
+        <b className='mg1l'>{item.addr}</b>
         <CloseCircleOutlined
           className='del-addr-bookmark'
           onClick={this.handleDel}

package/client/components/sftp/address-bookmark.jsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { auto } from 'manate/react'
 import {
   StarOutlined,
@@ -13,6 +14,8 @@ import uid from '../../common/uid'
 import './address-bookmark.styl'
 
 export default auto(function AddrBookmark (props) {
+  const [open, setOpen] = useState(false)
+
   function onDel (item) {
     window.store.delAddressBookmark(item)
   }
@@ -39,6 +42,11 @@ export default auto(function AddrBookmark (props) {
     handleAddAddrAct(true)
   }
 
+  function handleClick (type, addr) {
+    setOpen(false)
+    onClickHistory(type, addr)
+  }
+
   const { type, onClickHistory, host } = props
   const { store } = window
   // const cls = classnames(
@@ -58,7 +66,7 @@ export default auto(function AddrBookmark (props) {
     ? addrs.map(o => {
       return (
         <AddrBookmarkItem
-          handleClick={onClickHistory}
+          handleClick={handleClick}
           type={type}
           key={o.id}
           handleDel={onDel}
@@ -100,6 +108,8 @@ export default auto(function AddrBookmark (props) {
       title={title}
       placement='bottom'
       trigger='click'
+      open={open}
+      onOpenChange={setOpen}
     >
       <StarOutlined className={props.className || ''} />
     </Popover>

package/client/components/sftp/file-item.jsx

@@ -998,7 +998,7 @@ export default class FileSection extends React.Component {
     const shouldShowSelectedMenu = id &&
       len > 1 &&
       selectedFiles.has(id)
-    const delTxt = shouldShowSelectedMenu ? `${e('deleteAll')}(${len})` : e('del')
+    const delTxt = shouldShowSelectedMenu ? `${e('del')}:${e('selected')}(${len})` : e('del')
     const canPaste = hasFileInClipboardText()
     const showEdit = !isDirectory && id &&
       size < maxEditFileSize

package/client/components/tabs/tabs.styl

@@ -167,7 +167,7 @@
   z-index 900
   border-radius 0 0 3px 3px
   padding 0
-  background var(--main-lighter)
+  background var(--main)
 
 .window-control-box
   display inline-block

package/client/components/terminal/reconnect-overlay.jsx

@@ -0,0 +1,27 @@
+import { memo } from 'react'
+import { Button } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default memo(function ReconnectOverlay ({ countdown, onCancel }) {
+  if (countdown === null || countdown === undefined) {
+    return null
+  }
+  return (
+    <div className='terminal-reconnect-overlay'>
+      <div className='terminal-reconnect-box'>
+        <LoadingOutlined className='terminal-reconnect-icon' />
+        <div className='terminal-reconnect-msg'>
+          {e('autoReconnectTerminal')}: {countdown}s
+        </div>
+        <Button
+          size='small'
+          onClick={onCancel}
+        >
+          {e('cancel')}
+        </Button>
+      </div>
+    </div>
+  )
+})

package/client/components/terminal/socket-close-warning.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useRef } from 'react'
+import { Button } from 'antd'
+import { ReloadOutlined } from '@ant-design/icons'
+import { notification } from '../common/notification'
+
+const e = window.translate
+const COUNTDOWN_SECONDS = 3
+
+export function showSocketCloseWarning ({
+  tabId,
+  tab,
+  autoReconnect,
+  delTab,
+  reloadTab
+}) {
+  const key = `open${Date.now()}`
+
+  function closeNotification () {
+    notification.destroy(key)
+  }
+
+  const descriptionNode = (
+    <SocketCloseDescription
+      autoReconnect={autoReconnect}
+      onClose={() => {
+        closeNotification()
+        delTab(tabId)
+      }}
+      onReload={() => {
+        closeNotification()
+        reloadTab({ ...tab, autoReConnect: (tab.autoReConnect || 0) + 1 })
+      }}
+    />
+  )
+
+  notification.warning({
+    key,
+    message: e('socketCloseTip'),
+    duration: autoReconnect ? COUNTDOWN_SECONDS + 2 : 30,
+    description: descriptionNode
+  })
+
+  return { key }
+}
+
+function SocketCloseDescription ({ autoReconnect, onClose, onReload }) {
+  const [countdown, setCountdown] = useState(COUNTDOWN_SECONDS)
+  const timerRef = useRef(null)
+
+  useEffect(() => {
+    if (!autoReconnect) {
+      return
+    }
+    timerRef.current = setInterval(() => {
+      setCountdown(prev => {
+        if (prev <= 1) {
+          clearInterval(timerRef.current)
+          onReload()
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current)
+      }
+    }
+  }, [autoReconnect])
+
+  return (
+    <div className='pd2y'>
+      {autoReconnect && (
+        <div className='pd1b'>
+          {e('autoReconnectTerminal')}: {countdown}s
+        </div>
+      )}
+      <Button
+        className='mg1r'
+        type='primary'
+        onClick={onClose}
+      >
+        {e('close')}
+      </Button>
+      <Button
+        icon={<ReloadOutlined />}
+        onClick={onReload}
+      >
+        {e('reload')}
+      </Button>
+    </div>
+  )
+}

package/client/components/terminal/terminal.jsx

@@ -3,12 +3,8 @@ import { handleErr } from '../../common/fetch.jsx'
 import { isEqual, pick, debounce, throttle } from 'lodash-es'
 import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
-import {
-  ReloadOutlined
-} from '@ant-design/icons'
 import {
   Spin,
-  Button,
   Dropdown
 } from 'antd'
 import { notification } from '../common/notification'
@@ -50,6 +46,8 @@ import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
+import { showSocketCloseWarning } from './socket-close-warning.jsx'
+import ReconnectOverlay from './reconnect-overlay.jsx'
 import {
   loadTerminal,
   loadFitAddon,
@@ -76,7 +74,8 @@ class Term extends Component {
       lines: [],
       searchResults: [],
       matchIndex: -1,
-      totalLines: 0
+      totalLines: 0,
+      reconnectCountdown: null
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -1139,10 +1138,13 @@ class Term extends Component {
         ? typeMap.remote
         : typeMap.local
     })
+    const isAutoReconnect = !!(tab.autoReConnect && this.props.config.autoReconnectTerminal)
     const r = await createTerm(opts)
       .catch(err => {
-        const text = err.message
-        handleErr({ message: text })
+        if (!isAutoReconnect) {
+          const text = err.message
+          handleErr({ message: text })
+        }
       })
     if (typeof r === 'string' && r.includes('fail')) {
       return this.promote()
@@ -1154,6 +1156,10 @@ class Term extends Component {
       loading: false
     })
     if (!r) {
+      if (isAutoReconnect) {
+        this.scheduleAutoReconnect(3000)
+        return
+      }
       this.setStatus(statusMap.error)
       return
     }
@@ -1254,46 +1260,70 @@ class Term extends Component {
     this.setStatus(
       statusMap.error
     )
-    if (!this.isActiveTerminal() || !window.focused) {
-      return false
-    }
     if (this.userTypeExit) {
       return this.props.delTab(this.props.tab.id)
     }
-    const key = `open${Date.now()}`
-    function closeMsg () {
-      notification.destroy(key)
-    }
-    this.socketCloseWarning = notification.warning({
-      key,
-      message: e('socketCloseTip'),
-      duration: 30,
-      description: (
-        <div className='pd2y'>
-          <Button
-            className='mg1r'
-            type='primary'
-            onClick={() => {
-              closeMsg()
-              this.props.delTab(this.props.tab.id)
-            }}
-          >
-            {e('close')}
-          </Button>
-          <Button
-            icon={<ReloadOutlined />}
-            onClick={() => {
-              closeMsg()
-              this.props.reloadTab(
-                this.props.tab
-              )
-            }}
-          >
-            {e('reload')}
-          </Button>
-        </div>
-      )
-    })
+    const { autoReconnectTerminal } = this.props.config
+    const isActive = this.isActiveTerminal()
+    const isFocused = window.focused
+    if (autoReconnectTerminal) {
+      if (isActive && isFocused) {
+        this.socketCloseWarning = showSocketCloseWarning({
+          tabId: this.props.tab.id,
+          tab: this.props.tab,
+          autoReconnect: true,
+          delTab: this.props.delTab,
+          reloadTab: this.props.reloadTab
+        })
+      } else {
+        this.scheduleAutoReconnect(3000)
+      }
+    } else {
+      if (!isActive || !isFocused) {
+        return false
+      }
+      this.socketCloseWarning = showSocketCloseWarning({
+        tabId: this.props.tab.id,
+        tab: this.props.tab,
+        autoReconnect: false,
+        delTab: this.props.delTab,
+        reloadTab: this.props.reloadTab
+      })
+    }
+  }
+
+  scheduleAutoReconnect = (delay = 3000) => {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    const seconds = Math.round(delay / 1000)
+    this.setState({ reconnectCountdown: seconds })
+    let remaining = seconds
+    this.timers.reconnectCountdown = setInterval(() => {
+      remaining -= 1
+      if (remaining <= 0) {
+        clearInterval(this.timers.reconnectCountdown)
+        this.timers.reconnectCountdown = null
+      }
+      this.setState({ reconnectCountdown: remaining <= 0 ? null : remaining })
+    }, 1000)
+    this.timers.reconnectTimer = setTimeout(() => {
+      clearInterval(this.timers.reconnectCountdown)
+      this.timers.reconnectCountdown = null
+      this.setState({ reconnectCountdown: null })
+      if (this.onClose || !this.props.config.autoReconnectTerminal) {
+        return
+      }
+      const reconnectCount = (this.props.tab.autoReConnect || 0) + 1
+      this.props.reloadTab({ ...this.props.tab, autoReConnect: reconnectCount })
+    }, delay)
+  }
+
+  handleCancelAutoReconnect = () => {
+    clearTimeout(this.timers.reconnectTimer)
+    clearInterval(this.timers.reconnectCountdown)
+    this.timers.reconnectTimer = null
+    this.timers.reconnectCountdown = null
+    this.setState({ reconnectCountdown: null })
   }
 
   batchInput = (cmd) => {
@@ -1395,7 +1425,7 @@ class Term extends Component {
       totalLines: this.state.totalLines,
       height
     }
-    const spinCls = loading ? 'loading-wrapper' : 'hide'
+    const spin = loading ? <Spin className='loading-wrapper' spinning={loading} /> : null
     return (
       <Dropdown {...dropdownProps}>
         <div
@@ -1412,7 +1442,11 @@ class Term extends Component {
           <RemoteFloatControl
             isFullScreen={fullscreen}
           />
-          <Spin className={spinCls} spinning={loading} />
+          <ReconnectOverlay
+            countdown={this.state.reconnectCountdown}
+            onCancel={this.handleCancelAutoReconnect}
+          />
+          {spin}
         </div>
       </Dropdown>
     )

package/client/components/terminal/terminal.styl

@@ -141,3 +141,15 @@
 .paste-text
   max-height 200px
   overflow-y scroll
+
+.terminal-reconnect-overlay
+  position absolute
+  left 0
+  top 0
+  width 100%
+  height 100%
+  display flex
+  align-items center
+  justify-content center
+  z-index 110
+

package/client/store/tab.js

@@ -505,7 +505,8 @@ export default Store => {
       'sftpCreated',
       'sshSftpSplitView',
       'sshTunnelResults',
-      'displayRaw'
+      'displayRaw',
+      'autoReConnect'
     ]
     const { history } = store
     const index = history.findIndex(d => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "3.0.6",
+  "version": "3.0.18",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",