@electerm/electerm-react 3.11.11 → 3.12.0

package/client/components/sidebar/history.jsx

@@ -38,6 +38,21 @@ export default auto(function HistoryPanel (props) {
     store.clearHistory()
   }
   const e = window.translate
+  function renderHeader () {
+    if (!arr.length) {
+      return null
+    }
+    return (
+      <div className='history-header pd2x pd2b'>
+        <Switch
+          {...switchProps}
+        />
+        <UnorderedListOutlined
+          {...clearIconProps}
+        />
+      </div>
+    )
+  }
   const switchProps = {
     checkedChildren: e('sortByFrequency'),
     unCheckedChildren: e('sortByFrequency'),
@@ -54,14 +69,7 @@ export default auto(function HistoryPanel (props) {
     <div
       className='sidebar-panel-history'
     >
-      <div className='history-header pd2x pd2b'>
-        <Switch
-          {...switchProps}
-        />
-        <UnorderedListOutlined
-          {...clearIconProps}
-        />
-      </div>
+      {renderHeader()}
       <div className='history-body'>
         {
           arr.map((item, i) => {

package/client/components/terminal/attach-addon-custom.js

@@ -96,7 +96,7 @@ export default class AttachAddonCustom {
     if (typeof ev.data === 'string') {
       try {
         const msg = JSON.parse(ev.data)
-        if (msg.action === 'zmodem-event' || msg.action === 'trzsz-event') {
+        if (msg.action === 'zmodem-event' || msg.action === 'trzsz-event' || msg.action === 'xmodem-event') {
           return
         }
       } catch (e) {}

package/client/components/terminal/drop-file-modal.jsx

@@ -4,11 +4,62 @@ import Modal from '../common/modal'
 const e = window.translate
 
 export class DropFileModal extends Component {
+  renderSerialFooter () {
+    const { onSelect } = this.props
+    return (
+      <>
+        <button
+          type='button'
+          className='custom-modal-ok-btn'
+          onClick={() => onSelect('xmodem')}
+        >
+          XMODEM
+        </button>
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={() => onSelect('inputOnly')}
+        >
+          {e('inputOnly')}
+        </button>
+      </>
+    )
+  }
+
+  renderSshFooter () {
+    const { onSelect } = this.props
+    return (
+      <>
+        <button
+          type='button'
+          className='custom-modal-ok-btn'
+          onClick={() => onSelect('trz')}
+        >
+          trz
+        </button>
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={() => onSelect('rz')}
+        >
+          rz
+        </button>
+        <button
+          type='button'
+          className='custom-modal-cancel-btn'
+          onClick={() => onSelect('inputOnly')}
+        >
+          {e('inputOnly')}
+        </button>
+      </>
+    )
+  }
+
   render () {
     const {
       visible,
       files,
-      onSelect,
+      isSerial,
       onCancel
     } = this.props
 
@@ -23,27 +74,7 @@ export class DropFileModal extends Component {
         onCancel={onCancel}
         footer={
           <div className='custom-modal-footer-buttons'>
-            <button
-              type='button'
-              className='custom-modal-ok-btn'
-              onClick={() => onSelect('trz')}
-            >
-              trz
-            </button>
-            <button
-              type='button'
-              className='custom-modal-cancel-btn'
-              onClick={() => onSelect('rz')}
-            >
-              rz
-            </button>
-            <button
-              type='button'
-              className='custom-modal-cancel-btn'
-              onClick={() => onSelect('inputOnly')}
-            >
-              {e('inputOnly')}
-            </button>
+            {isSerial ? this.renderSerialFooter() : this.renderSshFooter()}
           </div>
         }
         width={400}

package/client/components/terminal/terminal.jsx

@@ -26,6 +26,7 @@ import AttachAddon from './attach-addon-custom.js'
 import getProxy from '../../common/get-proxy.js'
 import { ZmodemClient } from './zmodem-client.js'
 import { TrzszClient } from './trzsz-client.js'
+import { XmodemClient } from './xmodem-client.js'
 import DropFileModal from './drop-file-modal.jsx'
 import keyControlPressed from '../../common/key-control-pressed.js'
 import NormalBuffer from './normal-buffer.jsx'
@@ -165,6 +166,7 @@ class Term extends Component {
     this.fitAddon = null
     this.zmodemClient = null
     this.trzszClient = null
+    this.xmodemClient = null
     this.searchAddon = null
     this.fitAddon = null
     this.cmdAddon = null
@@ -391,6 +393,7 @@ class Term extends Component {
     const fromFile = dt.getData('fromFile')
     const notSafeMsg = 'File name contains unsafe characters'
     const isSshTerminal = this.props.tab.type === connectionMap.ssh
+    const isSerialTerminal = this.props.tab.type === connectionMap.serial
 
     if (fromFile) {
       try {
@@ -412,6 +415,13 @@ class Term extends Component {
           }
           return
         }
+        if (isSerialTerminal) {
+          this.setState({
+            dropFileModalVisible: true,
+            droppedFiles: [{ path: filePath, isRemote: false }]
+          })
+          return
+        }
         this.attachAddon._sendData(`"${filePath}" `)
         return
       } catch (e) {
@@ -443,6 +453,14 @@ class Term extends Component {
         return
       }
 
+      if (isSerialTerminal) {
+        this.setState({
+          dropFileModalVisible: true,
+          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+        })
+        return
+      }
+
       const filesAll = filePaths.map(path => `"${path}"`).join(' ')
       this.attachAddon._sendData(filesAll)
     }
@@ -485,6 +503,19 @@ class Term extends Component {
         this.attachAddon._sendData('rz\r')
         break
       }
+      case 'xmodem': {
+        if (this.xmodemClient && this.xmodemClient.isActive) {
+          message.warning('A transfer is already in progress')
+          this.handleDropFileModalCancel()
+          return
+        }
+        // Use XMODEM send with the dropped files
+        window._apiControlSelectFile = filePaths
+        if (this.xmodemClient) {
+          this.xmodemClient.initiateSend()
+        }
+        break
+      }
       case 'inputOnly':
       default: {
         const filesAll = filePaths.map(path => `"${path}"`).join(' ')
@@ -653,7 +684,8 @@ class Term extends Component {
     const clearShortcut = this.getShortcut('terminal_clear')
     const searchShortcut = this.getShortcut('terminal_search')
     const selectAllShortcut = isMacJs ? 'meta+a' : 'ctrl+shift+a'
-    return [
+    const isSerial = this.props.tab?.type === connectionMap.serial
+    const items = [
       {
         key: 'onCopy',
         icon: <iconsMap.CopyOutlined />,
@@ -700,12 +732,44 @@ class Term extends Component {
         extra: searchShortcut
       }
     ]
+    if (isSerial) {
+      items.push(
+        {
+          type: 'divider'
+        },
+        {
+          key: 'onXmodemSend',
+          icon: <iconsMap.CloudUploadOutlined />,
+          label: 'XMODEM Send'
+        },
+        {
+          key: 'onXmodemReceive',
+          icon: <iconsMap.CloudDownloadOutlined />,
+          label: 'XMODEM Receive'
+        }
+      )
+    }
+    return items
   }
 
   onContextMenu = ({ key }) => {
     this[key]()
   }
 
+  onXmodemSend = () => {
+    if (this.xmodemClient) {
+      this.xmodemClient.initiateSend()
+    }
+    this.term.focus()
+  }
+
+  onXmodemReceive = () => {
+    if (this.xmodemClient) {
+      this.xmodemClient.initiateReceive()
+    }
+    this.term.focus()
+  }
+
   notifyOnData = debounce(() => {
     window.store.notifyTabOnData(this.props.tab.id)
   }, 1000)
@@ -1320,6 +1384,8 @@ class Term extends Component {
     this.zmodemClient.init(socket)
     this.trzszClient = new TrzszClient(this)
     this.trzszClient.init(socket)
+    this.xmodemClient = new XmodemClient(this)
+    this.xmodemClient.init(socket)
     this.fitAddon.fit()
     term.displayRaw = displayRaw
     term.loadAddon(
@@ -1581,6 +1647,7 @@ class Term extends Component {
           <DropFileModal
             visible={this.state.dropFileModalVisible}
             files={this.state.droppedFiles}
+            isSerial={this.props.tab?.type === connectionMap.serial}
             onSelect={this.handleDropFileAction}
             onCancel={this.handleDropFileModalCancel}
           />

package/client/components/terminal/xmodem-client.js

@@ -0,0 +1,244 @@
+/**
+ * XMODEM client handler for web terminal
+ * Handles UI interactions and communicates with server-side xmodem
+ * Unlike zmodem/trzsz, XMODEM requires explicit user initiation
+ */
+
+import { throttle } from 'lodash-es'
+import { filesize } from 'filesize'
+import { TransferClientBase } from './transfer-client-base.js'
+import { transferTypeMap } from '../../common/constants.js'
+
+const XMODEM_SAVE_PATH_KEY = 'xmodem-save-path'
+
+/**
+ * XmodemClient class handles XMODEM UI and client-side logic
+ */
+export class XmodemClient extends TransferClientBase {
+  constructor (terminal) {
+    super(terminal, XMODEM_SAVE_PATH_KEY)
+    this.transferStartTime = 0
+    this.pendingMode = null // 'send' or 'receive' - waiting for user action
+  }
+
+  /**
+   * Get the action name for this protocol
+   * @returns {string}
+   */
+  getActionName () {
+    return 'xmodem-event'
+  }
+
+  /**
+   * Get protocol display name
+   * @returns {string}
+   */
+  getProtocolDisplayName () {
+    return 'XMODEM'
+  }
+
+  /**
+   * Handle server xmodem events
+   * @param {Object} msg - Message from server
+   */
+  handleServerEvent (msg) {
+    const { event } = msg
+
+    switch (event) {
+      case 'receive-start':
+        this.onReceiveStart()
+        break
+      case 'send-start':
+        this.onSendStart()
+        break
+      case 'file-start':
+        this.onFileStart(msg.name, msg.size)
+        break
+      case 'progress':
+        this.onProgress(msg)
+        break
+      case 'file-complete':
+        this.onFileComplete(msg.name, msg.path)
+        break
+      case 'session-end':
+        this.onSessionEnd()
+        break
+      case 'session-error':
+        this.onError(msg.error)
+        break
+    }
+  }
+
+  /**
+   * Initiate XMODEM receive from UI
+   * User must have already started `sx` (or similar) on the remote device
+   */
+  async initiateReceive () {
+    if (this.isActive) {
+      this.writeToTerminal('\r\n\x1b[33m\x1b[1mXMODEM: Transfer already in progress\x1b[0m\r\n')
+      return
+    }
+
+    this.isActive = true
+    this.writeBanner('RECEIVE', null)
+
+    // Ask user for save directory
+    const savePath = await this.openSaveFolderSelect()
+    if (savePath) {
+      this.savePath = savePath
+      this.sendToServer({
+        event: 'start-receive'
+      })
+      // Also send save path
+      this.sendToServer({
+        event: 'set-save-path',
+        path: savePath
+      })
+    } else {
+      // User cancelled
+      this.isActive = false
+    }
+  }
+
+  /**
+   * Initiate XMODEM send from UI
+   * User must have already started `rx` (or similar) on the remote device
+   */
+  async initiateSend () {
+    if (this.isActive) {
+      this.writeToTerminal('\r\n\x1b[33m\x1b[1mXMODEM: Transfer already in progress\x1b[0m\r\n')
+      return
+    }
+
+    this.isActive = true
+    this.writeBanner('SEND', null)
+
+    // Ask user to select files
+    const files = await this.openFileSelect({
+      title: 'Choose file(s) to send via XMODEM',
+      message: 'Choose file(s) to send via XMODEM'
+    })
+    if (files && files.length > 0) {
+      this.sendToServer({
+        event: 'start-send'
+      })
+      // Also send files
+      this.sendToServer({
+        event: 'send-files',
+        files
+      })
+    } else {
+      // User cancelled
+      this.isActive = false
+    }
+  }
+
+  /**
+   * Handle receive session start (from server)
+   */
+  onReceiveStart () {
+    // Server confirmed it's ready to receive
+    this.writeToTerminal('\r\n\x1b[36mWaiting for remote to start sending file...\x1b[0m\r\n')
+  }
+
+  /**
+   * Handle send session start (from server)
+   */
+  onSendStart () {
+    // Server confirmed it's ready to send
+    this.writeToTerminal('\r\n\x1b[36mWaiting for remote to request file (NAK/C)...\x1b[0m\r\n')
+  }
+
+  /**
+   * Handle file start event
+   * @param {string} name - File name
+   * @param {number} size - File size
+   */
+  onFileStart (name, size) {
+    this.currentTransfer = {
+      name,
+      size,
+      transferred: 0,
+      type: this.savePath ? transferTypeMap.download : transferTypeMap.upload,
+      path: null
+    }
+    this.transferStartTime = Date.now()
+    this.writeProgress()
+  }
+
+  /**
+   * Handle progress update
+   * @param {Object} msg - Progress message
+   */
+  onProgress (msg) {
+    if (!this.currentTransfer) {
+      this.currentTransfer = {
+        name: msg.name,
+        size: msg.size,
+        transferred: 0,
+        type: msg.type,
+        path: msg.path || null
+      }
+      this.transferStartTime = Date.now()
+    }
+
+    this.currentTransfer.transferred = msg.transferred
+    this.currentTransfer.serverSpeed = msg.speed
+    this.currentTransfer.path = msg.path || this.currentTransfer.path
+    this.writeProgress()
+  }
+
+  /**
+   * Handle file complete
+   * @param {string} name - File name
+   * @param {string} path - File path
+   */
+  onFileComplete (name, path) {
+    if (this.currentTransfer) {
+      this.currentTransfer.transferred = this.currentTransfer.size || this.currentTransfer.transferred
+      this.currentTransfer.path = path
+      this._doWriteProgress(true)
+      this.writeToTerminal('\r\n')
+      this._prevProgressRows = 0
+    }
+    this.currentTransfer = null
+  }
+
+  /**
+   * Handle error from server
+   * @param {string} error - Error message
+   */
+  onError (error) {
+    this.writeToTerminal(`\r\n\x1b[31m\x1b[1mXMODEM Error: ${error}\x1b[0m\r\n`)
+  }
+
+  /**
+   * Write progress to terminal (throttled)
+   */
+  writeProgress = throttle((isComplete = false) => {
+    this._doWriteProgress(isComplete)
+  }, 500)
+
+  /**
+   * Internal function to actually write progress
+   */
+  _doWriteProgress (isComplete = false) {
+    if (!this.currentTransfer || !this.terminal?.term) return
+
+    const { name, size, transferred, path, serverSpeed } = this.currentTransfer
+    const speed = serverSpeed || 0
+    const displayName = path || name
+    const formatSize = (bytes) => filesize(bytes)
+
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
+  }
+}
+
+export default XmodemClient

package/client/components/terminal-info/data-cols-parser.jsx

@@ -24,7 +24,8 @@ export default (data) => {
   return Object.keys(data).map(k => {
     const rd = (txt) => {
       // txt is in KB, convert to bytes for filesize function
-      const r = k === 'mem' ? filesize(parseInt(txt, 10) * 1024) : txt
+      const parsed = parseInt(txt, 10)
+      const r = k === 'mem' ? filesize(Number.isFinite(parsed) ? parsed * 1024 : 0) : txt
       const itemProps = {
         className: 'activity-item pointer',
         'data-content': r,

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

@@ -14,10 +14,12 @@ export default function TerminalInfoDisk (props) {
   }
   const col = colsParser(disks[0])
   disks.sort((a, b) => {
-    if (a.filesystem.startsWith('/') && !b.filesystem.startsWith('/')) {
+    const af = a.filesystem || ''
+    const bf = b.filesystem || ''
+    if (af.startsWith('/') && !bf.startsWith('/')) {
       return -1
     }
-    if (!a.filesystem.startsWith('/') && b.filesystem.startsWith('/')) {
+    if (!af.startsWith('/') && bf.startsWith('/')) {
       return 1
     }
     return 0

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

@@ -34,6 +34,7 @@ export default function TerminalInfoDisk (props) {
       const p = network[k]
       const pv = net[k]
       if (
+        diff > 0 &&
         p &&
         pv &&
         p.download &&
@@ -43,6 +44,7 @@ export default function TerminalInfoDisk (props) {
         p.down = Math.floor((p.download - pv.download) / diff)
       }
       if (
+        diff > 0 &&
         p &&
         pv &&
         p.upload &&
@@ -92,7 +94,7 @@ export default function TerminalInfoDisk (props) {
       },
       render: (v) => {
         if (k === 'up' || k === 'down') {
-          return filesize(v || 0)
+          return filesize(Number.isFinite(v) ? v : 0)
         }
         return v
       }

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

@@ -2,7 +2,7 @@
  * cpu/swap/mem general usage
  */
 
-import { isEmpty, isUndefined } from 'lodash-es'
+import { isEmpty } from 'lodash-es'
 import { Progress } from 'antd'
 import parseInt10 from '../../common/parse-int10'
 
@@ -51,7 +51,7 @@ export default function TerminalInfoResource (props) {
       percent,
       name
     } = obj
-    const hasPercent = !isUndefined(percent)
+    const hasPercent = Number.isFinite(percent)
     const p = hasPercent
       ? percent
       : computePercent(used, total) || 0
@@ -74,7 +74,7 @@ export default function TerminalInfoResource (props) {
   if (terminalInfos.includes('cpu')) {
     data.push({
       name: 'cpu',
-      percent: parseInt10(cpu)
+      percent: parseInt10(cpu) || 0
     })
   }
   if (terminalInfos.includes('mem')) {

package/client/components/tree-list/tree-list.styl

@@ -118,10 +118,16 @@
     visibility hidden
   &:hover
     .tree-item-title
-      padding-right 120px
+      padding-right 60px
     .tree-item-op-wrap
       opacity 1
       pointer-events auto
+.add-menu-wrap
+.sidebar-panel
+  .tree-list-row
+    &:hover
+      .tree-item-title
+        padding-right 20px
 
 .tree-list-row-group
   position relative