@electerm/electerm-react 1.38.65 → 1.38.80

package/client/components/sftp/transports-action-store.jsx

@@ -0,0 +1,102 @@
+/**
+ * pass transfer list from props
+ * when list changes, do transfer and other op
+ */
+
+import { Component } from '../common/react-subx'
+import Transports from './transports-ui-store'
+import { maxTransport } from '../../common/constants'
+
+export default class TransportsActionStore extends Component {
+  componentDidMount () {
+    this.control()
+  }
+
+  componentDidUpdate (prevProps) {
+    if (
+      prevProps._fileTransfers !== this.props._fileTransfers
+    ) {
+      this.control()
+    }
+  }
+
+  control = async () => {
+    const { store } = this.props
+    let {
+      fileTransfers
+    } = store
+
+    fileTransfers = fileTransfers.map(t => {
+      const {
+        typeTo,
+        typeFrom,
+        fromFile,
+        inited
+      } = t
+      const ready = !!fromFile
+      if (typeTo === typeFrom && ready && !inited) {
+        t.inited = true
+      }
+      return t
+    })
+    // if (pauseAllTransfer) {
+    //   return store.setFileTransfers(fileTransfers)
+    // }
+    let count = fileTransfers.filter(t => {
+      const {
+        typeTo,
+        typeFrom,
+        inited
+      } = t
+      return typeTo !== typeFrom && inited
+    }).length
+    if (count >= maxTransport) {
+      return store.setFileTransfers(fileTransfers)
+    }
+    const len = fileTransfers.length
+    const ids = []
+    for (let i = 0; i < len; i++) {
+      const tr = fileTransfers[i]
+      const {
+        typeTo,
+        typeFrom,
+        inited,
+        fromFile,
+        error,
+        id,
+        action
+      } = tr
+      if (!error) {
+        ids.push(id)
+      }
+      const isTransfer = typeTo !== typeFrom
+      const ready = (
+        action && fromFile
+      )
+      if (
+        !ready ||
+        inited ||
+        !isTransfer
+      ) {
+        continue
+      }
+      // if (isTransfer && tr.fromFile.isDirectory) {
+      //   i = len
+      //   continue
+      // }
+      if (
+        fromFile && count < maxTransport
+      ) {
+        count++
+        tr.inited = true
+      }
+    }
+    store.setFileTransfers(fileTransfers)
+  }
+
+  render () {
+    return (
+      <Transports {...this.props} />
+    )
+  }
+}

package/client/components/sftp/transports-ui-store.jsx

@@ -0,0 +1,30 @@
+/**
+ * transporter UI component
+ */
+import { Component } from '../common/react-subx'
+import Transport from './transport-action-store'
+
+export default class TransportsUI extends Component {
+  render () {
+    const { store } = this.props
+    const {
+      fileTransfers
+    } = store
+    if (!fileTransfers.length) {
+      return null
+    }
+    return fileTransfers.map((t, i) => {
+      const { id } = t
+      return (
+        <Transport
+          {...this.props}
+          transfer={t}
+          inited={t.inited}
+          cancel={t.cancel}
+          pause={t.pausing}
+          key={id + ':tr:' + i}
+        />
+      )
+    })
+  }
+}

package/client/components/sidebar/transfer-list-control.jsx

@@ -8,10 +8,6 @@ import {
   PauseCircleOutlined
 } from '@ant-design/icons'
 import { get } from 'lodash-es'
-import {
-  transportTypes
-} from '../sftp/transport-types'
-import postMessage from '../../common/post-msg'
 
 const { Option } = Select
 
@@ -28,21 +24,16 @@ export default class TransferModalUI extends Component {
   }
 
   handlePauseOrResumeAll = () => {
-    postMessage({
-      action: transportTypes.pauseOrResumeAll,
-      id: this.state.filter
-    })
+    const { store } = window
+    store.pauseAllTransfer ? store.resumeAll() : store.pauseAll()
   }
 
   handleCancelAll = () => {
-    postMessage({
-      action: transportTypes.cancelAll,
-      id: this.state.filter
-    })
+    window.store.cancelAll()
   }
 
   getGroups = () => {
-    const fileTransfers = this.props.store.getTransfers()
+    const fileTransfers = this.props.store.fileTransfers
     const tree = fileTransfers.reduce((p, k) => {
       const {
         id,
@@ -79,7 +70,7 @@ export default class TransferModalUI extends Component {
     const {
       filter
     } = this.state
-    const fileTransfers = this.props.store.getTransfers()
+    const fileTransfers = this.props.store.fileTransfers
     return filter === 'all'
       ? fileTransfers
       : fileTransfers.filter(d => d.sessionId === filter)

package/client/components/sidebar/transport-ui.jsx

@@ -8,10 +8,6 @@ import {
   PlayCircleOutlined,
   PauseCircleOutlined
 } from '@ant-design/icons'
-import {
-  transportTypes
-} from '../sftp/transport-types'
-import postMessage from '../../common/post-msg'
 import './transfer.styl'
 
 const { prefix } = window
@@ -35,16 +31,10 @@ export default function Transporter (props) {
     id
   } = props.transfer
   function cancel () {
-    postMessage({
-      action: transportTypes.cancelTransport,
-      id
-    })
+    window.store.cancelTransfer(id)
   }
   function handlePauseOrResume () {
-    postMessage({
-      action: transportTypes.pauseOrResumeTransfer,
-      id
-    })
+    window.store.toggleTransfer(id)
   }
   const isTransfer = typeTo !== typeFrom
   const Icon = !pausing ? PauseCircleOutlined : PlayCircleOutlined

package/client/components/tabs/tab.jsx

@@ -26,6 +26,7 @@ import { shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
 const { prefix } = window
 const e = prefix('tabs')
 const m = prefix('menu')
+const s = prefix('sftp')
 const onDragCls = 'ondrag-tab'
 const onDragOverCls = 'dragover-tab'
 
@@ -346,6 +347,36 @@ class Tab extends Component {
     )
   }
 
+  // sshTunnelResults is a array of { sshTunnel, error? }, sshTunnel is a object has props of sshTunnelLocalPort, sshTunnelRemoteHost, sshTunnelRemotePort, sshTunnel, sshTunnelLocalHost, should build sshTunnel string from sshTunnel object, when error exist, this string should start with "error:", return title and sshTunnelResults list in react element.
+  renderTitle = (sshTunnelResults, title) => {
+    const list = sshTunnelResults.map(({ sshTunnel: obj, error }, i) => {
+      const {
+        sshTunnelLocalPort,
+        sshTunnelRemoteHost = '127.0.0.1',
+        sshTunnelRemotePort,
+        sshTunnel,
+        sshTunnelLocalHost = '127.0.0.1',
+        name
+      } = obj
+      let tunnel = sshTunnel === 'forwardRemoteToLocal'
+        ? `-> ${s('remote')}:${sshTunnelRemoteHost}:${sshTunnelRemotePort} -> ${sshTunnelLocalHost}:${sshTunnelLocalPort}`
+        : `-> ${s('local')}:${sshTunnelLocalHost}:${sshTunnelLocalPort} -> ${sshTunnelRemoteHost}:${sshTunnelRemotePort}`
+      if (error) {
+        tunnel = `error: ${tunnel}`
+      }
+      if (name) {
+        tunnel = `[${name}] ${tunnel}`
+      }
+      return <div key={tunnel}>{tunnel}</div>
+    })
+    return (
+      <div>
+        <div>${title}</div>
+        {list}
+      </div>
+    )
+  }
+
   renderCloseIcon () {
     return (
       <span className='tab-close pointer'>
@@ -360,7 +391,13 @@ class Tab extends Component {
     } = this.props
     const { isLast } = this.props
     const { tab, terminalOnData } = this.state
-    const { id, isEditting, status, isTransporting } = tab
+    const {
+      id,
+      isEditting,
+      status,
+      isTransporting,
+      sshTunnelResults
+    } = tab
     const active = id === currentTabId
     const cls = classnames(
       `tab-${id}`,
@@ -378,6 +415,10 @@ class Tab extends Component {
       }
     )
     const title = createName(tab)
+    let tooltipTitle = title
+    if (sshTunnelResults) {
+      tooltipTitle = this.renderTitle(sshTunnelResults, title)
+    }
     if (isEditting) {
       return this.renderEditting(tab, cls)
     }
@@ -387,7 +428,7 @@ class Tab extends Component {
       : {}
     return (
       <Tooltip
-        title={title}
+        title={tooltipTitle}
         placement='top'
       >
         <div

package/client/components/tabs/tabs.styl

@@ -151,7 +151,7 @@
   position absolute
   right 0
   top 0
-  z-index 200
+  z-index 900
   border-radius 0 0 3px 3px
   padding 0
   background main-light

package/client/components/terminal/index.jsx

@@ -138,9 +138,13 @@ class Term extends Component {
       clearTimeout(this.timers[k])
     })
     this.onClose = true
-    this.socket && this.socket.close()
+    if (this.socket) {
+      this.socket.close()
+      delete this.socket
+    }
     if (this.term) {
       this.term.dispose()
+      delete this.term
     }
     window.removeEventListener(
       'resize',
@@ -149,6 +153,13 @@ class Term extends Component {
     window.removeEventListener('message', this.handleEvent)
     this.dom.removeEventListener('contextmenu', this.onContextMenu)
     window.removeEventListener('message', this.onContextAction)
+    delete this.dom
+    delete this.attachAddon
+    delete this.fitAddon
+    delete this.zmodemAddon
+    delete this.searchAddon
+    delete this.serializeAddon
+    delete this.fitAddon
   }
 
   terminalConfigProps = [
@@ -1110,6 +1121,7 @@ class Term extends Component {
       ]),
       sessionId,
       tabId: id,
+      srcTabId: tab.id,
       terminalIndex,
       termType,
       readyTimeout: config.sshReadyTimeout,
@@ -1225,6 +1237,7 @@ class Term extends Component {
     this.socketCloseWarning = notification.warning({
       key,
       message: e('socketCloseTip'),
+      duration: 30,
       description: (
         <div className='pd2y'>
           <Button

package/client/components/terminal/terminal-interactive.jsx

@@ -5,7 +5,9 @@
 import { useEffect, useState } from 'react'
 import { Modal, Form, Button } from 'antd'
 import InputAutoFocus from '../common/input-auto-focus'
+import { tabActions } from '../../common/constants'
 import wait from '../../common/wait'
+import postMsg from '../../common/post-msg'
 
 const { prefix } = window
 const e = prefix('sftp')
@@ -16,6 +18,13 @@ export default function TermInteractive () {
   const [trigger] = useState(0)
   const [opts, setter] = useState(null)
   const [form] = Form.useForm()
+  function updateTab (data) {
+    postMsg({
+      action: tabActions.updateTabs,
+      id: data.tabId,
+      update: data.update
+    })
+  }
   function onMsg (e) {
     if (
       e &&
@@ -24,6 +33,12 @@ export default function TermInteractive () {
       e.data.includes('session-interactive')
     ) {
       setter(JSON.parse(e.data))
+    } else if (
+      e &&
+      e.data &&
+      e.data.includes('ssh-tunnel-result')
+    ) {
+      updateTab(JSON.parse(e.data))
     }
   }
   function clear () {

package/client/components/terminal-info/disk.jsx

@@ -13,6 +13,15 @@ export default function TerminalInfoDisk (props) {
     return null
   }
   const col = colsParser(disks[0])
+  disks.sort((a, b) => {
+    if (a.filesystem.startsWith('/') && !b.filesystem.startsWith('/')) {
+      return -1
+    }
+    if (!a.filesystem.startsWith('/') && b.filesystem.startsWith('/')) {
+      return 1
+    }
+    return 0
+  })
   const ps = {
     rowKey: (rec) => `${rec.mount}_${rec.filesystem}`,
     dataSource: disks,

package/client/entry/worker.js

@@ -16,7 +16,11 @@ function createWs (
   const wsUrl = `ws://${host}:${port}/${type}/${id}?sessionId=${sessionId}&sftpId=${sftpId}&token=${tokenElecterm}`
   const ws = new WebSocket(wsUrl)
   ws.s = msg => {
-    ws.send(JSON.stringify(msg))
+    try {
+      ws.send(JSON.stringify(msg))
+    } catch (e) {
+      console.error('ws send error', e)
+    }
   }
   ws.id = id
   ws.once = (callack, id) => {

package/client/store/index.js

@@ -63,7 +63,18 @@ function expandShorthandColor (color) {
   if (color.length === 4) {
     return '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
   }
-  return color
+  if (color.length === 7) {
+    return color
+  }
+  if (color.length < 7) {
+    return expandShorthandColor(color + 'f')
+  }
+  if (color.length > 7) {
+    return expandShorthandColor(color.slice(0, 7))
+  }
+  if (!/^#[A-Fa-f0-9]{6}$/.test(color)) {
+    return '#141314'
+  }
 }
 
 function isColorDark (_color) {
@@ -233,6 +244,10 @@ class Store {
     return JSON.parse(window.store._upgradeInfo)
   }
 
+  get transferToConfirm () {
+    return JSON.parse(window.store._transferToConfirm)
+  }
+
   get settingItem () {
     return JSON.parse(window.store._settingItem)
   }

package/client/store/init-state.js

@@ -92,9 +92,11 @@ export default () => {
 
     // sftp
     fileOperation: fileOperationsMap.cp, // cp or mv
+    pauseAllTransfer: false,
     transferTab: 'transfer',
     _transferHistory: '[]',
     _fileTransfers: '[]',
+    _transferToConfirm: '{}',
     _sftpSortSetting: ls.getItem(sftpDefaultSortSettingKey) || JSON.stringify({
       local: {
         prop: 'modifyTime',
@@ -169,9 +171,6 @@ export default () => {
     _serials: '[]',
     loaddingSerials: false,
 
-    // transfer list
-    transports: [],
-
     _sshConfigItems: '[]',
 
     appPath: '',

package/client/store/sync.js

@@ -12,6 +12,7 @@ import fetch from '../common/fetch-from-server'
 import download from '../common/download'
 import { fixBookmarks } from '../common/db-fix'
 import dayjs from 'dayjs'
+import parseJsonSafe from '../common/parse-json-safe'
 
 const names = without(dbNames, settingMap.history)
 const {
@@ -262,10 +263,12 @@ export default (Store) => {
       })
       store.setItems(n, arr)
     }
-    const userConfig = JSON.parse(
+    const userConfig = parseJsonSafe(
       get(gist, 'files["userConfig.json"].content')
     )
-    store.setTheme(userConfig.theme)
+    if (userConfig && userConfig.theme) {
+      store.setTheme(userConfig.theme)
+    }
     const up = {
       [type + 'LastSyncTime']: Date.now()
     }

package/client/store/tab.js

@@ -11,7 +11,7 @@ import postMsg from '../common/post-msg'
 export default Store => {
   Store.prototype.updateTabsStatus = function () {
     const tabIds = uniq(
-      window.store.getTransfers().map(d => d.tabId)
+      window.store.fileTransfers.map(d => d.tabId)
     )
     postMsg({
       action: tabActions.updateTabsStatus,

package/client/store/transfer-list.js

@@ -4,10 +4,9 @@ export default Store => {
     window.store.transferTab = tab
   }
 
-  // should update any item with same id in oldList from list array, should add any new item from list array to oldList, should remove any item with same id and sessionId in oldList but not in list array
   Store.prototype.setTransfers = function (list, _sessId) {
     const { store } = window
-    let oldList = store.getTransfers()
+    let oldList = store.fileTransfers
     const sessId = _sessId || list[0].sessionId
     const arr2 = oldList.filter(t => {
       return t.sessionId === sessId
@@ -48,4 +47,58 @@ export default Store => {
   Store.prototype.addTransfers = function (objs) {
     return window.store.addItems(objs, 'fileTransfers')
   }
+  Store.prototype.setFileTransfers = function (objs) {
+    return window.store.setState('fileTransfers', objs)
+  }
+  Store.prototype.addTransferList = function (objs) {
+    const { store } = window
+    store.setFileTransfers([
+      ...store.fileTransfers,
+      ...objs
+    ])
+  }
+  Store.prototype.toggleTransfer = function (itemId) {
+    const { store } = window
+    const { fileTransfers } = store
+    const index = findIndex(fileTransfers, t => t.id === itemId)
+    if (index < 0) {
+      return
+    }
+    fileTransfers[index].pausing = !fileTransfers[index].pausing
+    store.setFileTransfers(fileTransfers)
+  }
+
+  Store.prototype.pauseAll = function () {
+    const { store } = window
+    store.pauseAllTransfer = true
+    store.setFileTransfers(store.fileTransfers.map(t => {
+      t.pausing = true
+      return t
+    }))
+  }
+  Store.prototype.resumeAll = function () {
+    const { store } = window
+    store.pauseAllTransfer = false
+    store.setFileTransfers(store.fileTransfers.map(t => {
+      t.pausing = false
+      return t
+    }))
+  }
+  Store.prototype.cancelAll = function () {
+    const { store } = window
+    store.setFileTransfers(store.fileTransfers.map(t => {
+      t.cancel = true
+      return t
+    }))
+  }
+  Store.prototype.cancelTransfer = function (itemId) {
+    const { store } = window
+    const { fileTransfers } = store
+    const index = findIndex(fileTransfers, t => t.id === itemId)
+    if (index < 0) {
+      return
+    }
+    fileTransfers[index].cancel = true
+    store.setFileTransfers(fileTransfers)
+  }
 }

package/client/store/watch.js

@@ -33,14 +33,6 @@ export default store => {
   //   return store.menuOpened
   // })
 
-  // autoRun(store, () => {
-  //   const v = store.getItems('tabs').map(t => {
-  //     delete t.isTransporting
-  //     return t
-  //   })
-  //   update('sessions', v)
-  //   return store._tabs
-  // }, func => debounce(func, 100))
   for (const name of dbNamesForWatch) {
     autoRun(store, async () => {
       await update(

package/package.json

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