@electerm/electerm-react 1.38.11 → 1.38.30

package/client/common/build-ssh-tunnel.js

@@ -2,6 +2,7 @@ export const buildSshTunnels = function (inst) {
   return [{
     sshTunnel: inst.sshTunnel,
     sshTunnelRemotePort: inst.sshTunnelRemotePort,
-    sshTunnelLocalPort: inst.sshTunnelLocalPort
+    sshTunnelLocalPort: inst.sshTunnelLocalPort,
+    sshTunnelRemoteHost: inst.sshTunnelRemoteHost
   }]
 }

package/client/common/default-setting.js

@@ -43,5 +43,13 @@ export default {
   addTimeStampToTermLog: false,
   sftpPathFollowSsh: false,
   keepaliveInterval: 0,
-  backspaceMode: '^?'
+  backspaceMode: '^?',
+  terminalInfos: [
+    'uptime',
+    'cpu',
+    'mem',
+    'activities',
+    'network',
+    'disks'
+  ]
 }

package/client/components/bookmark-form/render-ssh-tunnel.jsx

@@ -1,5 +1,6 @@
 import {
   Form,
+  Input,
   InputNumber,
   Radio,
   Space,
@@ -47,29 +48,46 @@ export default function renderSshTunnel () {
             </RadioButton>
           </RadioGroup>
         </FormItem>
+        <Space.Compact className='mg2x'>
+          <FormItem
+            label={e('destination')}
+            name={[field.name, 'sshTunnelRemoteHost']}
+            initialValue='127.0.0.1'
+            required
+          >
+            <Input
+              className='compact-input'
+              placeholder={e('host')}
+            />
+          </FormItem>
+          <FormItem
+            label=''
+            name={[field.name, 'sshTunnelRemotePort']}
+            initialValue={22}
+            required
+          >
+            <InputNumber
+              min={1}
+              max={65535}
+              // addonBefore={e('remotePort')}
+              className='compact-input'
+              placeholder={e('port')}
+            />
+          </FormItem>
+        </Space.Compact>
         <FormItem
-          label=''
-          name={[field.name, 'sshTunnelRemotePort']}
-          required
-        >
-          <InputNumber
-            min={1}
-            max={65535}
-            addonBefore={e('remotePort')}
-            className='compact-input'
-          />
-        </FormItem>
-        <FormItem
-          label=''
+          label={e('localPort')}
           name={[field.name, 'sshTunnelLocalPort']}
+          initialValue={22}
           required
           className='mg2x'
         >
           <InputNumber
             min={1}
             max={65535}
-            addonBefore={e('localPort')}
+            // addonBefore={e('localPort')}
             className='compact-input'
+            placeholder={e('port')}
           />
         </FormItem>
         <Button

package/client/components/main/main.jsx

@@ -41,6 +41,7 @@ export default class Index extends Component {
     ipcOnEvent('zoom-reset', store.onZoomReset)
     ipcOnEvent('zoomin', store.onZoomIn)
     ipcOnEvent('zoomout', store.onZoomout)
+    ipcOnEvent('confirm-exit', store.beforeExitApp)
 
     document.addEventListener('drop', function (e) {
       e.preventDefault()
@@ -51,6 +52,9 @@ export default class Index extends Component {
       e.stopPropagation()
     })
     window.addEventListener('offline', store.setOffline)
+    if (window.et.isWebApp) {
+      window.onbeforeunload = store.beforeExit
+    }
     store.isSencondInstance = window.pre.runSync('isSencondInstance')
     store.initData()
     store.checkForDbUpgrade()

package/client/components/quick-commands/quick-commands-box.jsx

@@ -8,7 +8,9 @@ import { find, sortBy } from 'lodash-es'
 import { Button, Input, Select, Space } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import copy from 'json-deep-copy'
+import generate from '../../common/uid'
 import CmdItem from './quick-command-item'
+import delay from '../../common/wait'
 import {
   EditOutlined,
   CloseCircleOutlined,
@@ -46,7 +48,7 @@ export default class QuickCommandsFooterBox extends Component {
     this.props.store.pinnedQuickCommandBar = !this.props.store.pinnedQuickCommandBar
   }
 
-  handleSelect = (id) => {
+  handleSelect = async (id) => {
     const {
       store
     } = this.props
@@ -57,11 +59,24 @@ export default class QuickCommandsFooterBox extends Component {
         this.props.store.currentQuickCommands,
         a => a.id === id
       )
-      if (qm && qm.command) {
-        const { runQuickCommand } = this.props.store
+      const { runQuickCommand } = this.props.store
+      const qms = qm && qm.commands
+        ? qm.commands
+        : (qm && qm.command
+            ? [
+                {
+                  command: qm.command,
+                  id: generate(),
+                  delay: 100
+                }
+              ]
+            : []
+          )
+      for (const q of qms) {
         const realCmd = isWin
-          ? qm.command.replace(/\n/g, '\n\r')
-          : qm.command
+          ? q.command.replace(/\n/g, '\n\r')
+          : q.command
+        await delay(q.delay || 100)
         runQuickCommand(realCmd, qm.inputOnly)
         store.editQuickCommand(qm.id, {
           clickCount: ((qm.clickCount || 0) + 1)

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -1,8 +1,8 @@
-import { Button, Input, Switch, Form, message, Select } from 'antd'
+import { Button, Switch, Form, message, Select } from 'antd'
 import copy from 'json-deep-copy'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
-const { TextArea } = Input
+import renderQm from './quick-commands-list-form'
 const FormItem = Form.Item
 const { Option } = Select
 const { prefix } = window
@@ -17,13 +17,13 @@ export default function QuickCommandForm (props) {
     const { formData } = props
     const {
       name,
-      command,
+      commands,
       inputOnly,
       labels
     } = res
     const update = copy({
       name,
-      command,
+      commands,
       inputOnly,
       labels
     })
@@ -46,6 +46,13 @@ export default function QuickCommandForm (props) {
   if (!initialValues.labels) {
     initialValues.labels = []
   }
+  if (!initialValues.commands) {
+    initialValues.commands = [{
+      command: initialValues.command || '',
+      id: generate(),
+      delay: 100
+    }]
+  }
   return (
     <Form
       form={form}
@@ -59,7 +66,7 @@ export default function QuickCommandForm (props) {
         rules={[{
           max: 60, message: '60 chars max'
         }, {
-          required: true, message: 'name required'
+          required: true, message: 'Name required'
         }]}
         hasFeedback
         name='name'
@@ -69,17 +76,7 @@ export default function QuickCommandForm (props) {
           autofocustrigger={autofocustrigger}
         />
       </FormItem>
-      <FormItem
-        name='command'
-        label={t('quickCommand')}
-        rules={[{
-          max: 5000, message: '5000 chars max'
-        }, {
-          required: true, message: 'command required'
-        }]}
-      >
-        <TextArea rows={3} />
-      </FormItem>
+      {renderQm()}
       <FormItem
         name='labels'
         label={t('label')}
@@ -108,7 +105,7 @@ export default function QuickCommandForm (props) {
       <FormItem>
         <p>
           <Button
-            type='dashed'
+            type='primary'
             htmlType='submit'
           >{e('save')}
           </Button>

package/client/components/quick-commands/quick-commands-list-form.jsx

@@ -0,0 +1,89 @@
+import {
+  Form,
+  InputNumber,
+  Space,
+  Button,
+  Input
+} from 'antd'
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+const FormList = Form.List
+const { prefix } = window
+const t = prefix('quickCommands')
+
+export default function renderQm () {
+  function renderItem (field, i, add, remove) {
+    return (
+      <Space
+        align='center'
+        key={field.key}
+      >
+        <FormItem
+          label=''
+          name={[field.name, 'delay']}
+          required
+        >
+          <InputNumber
+            min={1}
+            step={1}
+            max={65535}
+            addonBefore={t('delay')}
+            placeholder={100}
+            className='compact-input'
+          />
+        </FormItem>
+        <FormItem
+          label=''
+          name={[field.name, 'command']}
+          required
+          className='mg2x'
+        >
+          <Input.TextArea
+            rows={1}
+            placeholder={t('quickCommand')}
+            className='compact-input'
+          />
+        </FormItem>
+        <Button
+          icon={<MinusCircleOutlined />}
+          onClick={() => remove(field.name)}
+          className='mg24b'
+        />
+      </Space>
+    )
+  }
+
+  return (
+    <FormItem {...formItemLayout} label={t('quickCommands')}>
+      <FormList
+        name='commands'
+      >
+        {
+          (fields, { add, remove }, { errors }) => {
+            return (
+              <div>
+                {
+                  fields.map((field, i) => {
+                    return renderItem(field, i, add, remove)
+                  })
+                }
+                <FormItem>
+                  <Button
+                    type='dashed'
+                    onClick={() => add()}
+                    block
+                    icon={<PlusOutlined />}
+                  >
+                    {t('quickCommand')}
+                  </Button>
+                </FormItem>
+              </div>
+            )
+          }
+        }
+      </FormList>
+    </FormItem>
+  )
+}

package/client/components/session/session.jsx

@@ -472,10 +472,11 @@ export default class SessionWrapper extends Component {
   renderControl = () => {
     const { splitDirection, terminals, sftpPathFollowSsh } = this.state
     const { props } = this
-    const { pane } = props.tab
+    const { pane, enableSsh } = props.tab
+
     const termType = props.tab?.type
     const isSsh = props.tab.authType
-    const isLocal = termType === connectionMap.local || !termType
+    const isLocal = !isSsh && (termType === connectionMap.local || !termType)
     const isHori = splitDirection === terminalSplitDirectionMap.horizontal
     const cls1 = 'mg1r icon-split pointer iblock spliter'
     const cls2 = 'icon-direction pointer iblock spliter'
@@ -542,7 +543,7 @@ export default class SessionWrapper extends Component {
           }
         </div>
         {
-          isSsh || isLocal
+          (isSsh && enableSsh) || isLocal
             ? (
               <Tooltip title={checkTxt}>
                 <span {...checkProps}>
@@ -608,7 +609,7 @@ export default class SessionWrapper extends Component {
     const { pane } = this.props.tab
     const infoProps = {
       infoPanelPinned,
-      ...pick(this.props.config, ['host', 'port', 'saveTerminalLogToFile']),
+      ...pick(this.props.config, ['host', 'port', 'saveTerminalLogToFile', 'terminalInfos']),
       ...infoPanelProps,
       appPath: this.props.appPath,
       rightSidebarWidth: this.props.rightSidebarWidth,

package/client/components/setting-panel/keywords-form.jsx

@@ -71,6 +71,7 @@ export default function KeywordForm (props) {
 
   function renderBefore (name) {
     const colors = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white']
+    const { themeConfig } = props
     return (
       <FormItem name={[name, 'color']} noStyle>
         <Select>
@@ -79,7 +80,7 @@ export default function KeywordForm (props) {
               const ps = {
                 className: 'color-picker-choose iblock',
                 style: {
-                  backgroundColor: color
+                  backgroundColor: themeConfig[color]
                 }
               }
               return (

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

@@ -408,13 +408,15 @@ export default class SettingTerminal extends Component {
       keywords = [{ color: 'red' }]
     } = this.props.config
     const {
-      appPath
+      appPath,
+      getThemeConfig
     } = this.props.store
     const ps = {
       formData: {
         keywords
       },
-      submit: this.handleSubmitKeywords
+      submit: this.handleSubmitKeywords,
+      themeConfig: getThemeConfig()
     }
     const terminalLogPath = appPath
       ? osResolve(appPath, 'electerm', 'session_logs')
@@ -496,6 +498,7 @@ export default class SettingTerminal extends Component {
         {this.renderToggle('saveTerminalLogToFile', (
           <ShowItem to={terminalLogPath} className='mg1l'>{p('open')}</ShowItem>
         ))}
+        {this.renderToggle('addTimeStampToTermLog')}
         {
           [
             'cursorBlink',

package/client/components/setting-sync/setting-sync-form.jsx

@@ -45,9 +45,7 @@ export default function SyncForm (props) {
     if (res.gistId) {
       up[syncType + 'GistId'] = res.gistId
     }
-    if (res.syncPassword) {
-      up[syncType + 'SyncPassword'] = res.syncPassword
-    }
+    up[syncType + 'SyncPassword'] = res.syncPassword || ''
     if (res.apiUrl) {
       up[syncType + 'ApiUrl'] = res.apiUrl
     }

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

@@ -761,13 +761,15 @@ export default class FileSection extends React.Component {
   transferOrEnterDirectory = async (e, edit) => {
     const { file } = this.state
     const { isDirectory, type, size } = file
+    const isLocal = type === typeMap.local
+    const isRemote = type === typeMap.remote
     if (isDirectory) {
       return this.enterDirectory(e)
     }
-    if (!edit && type === typeMap.local) {
+    if (!edit && isLocal) {
       return this.openFile(this.state.file)
     }
-    const remoteEdit = !edit && type === typeMap.remote && size < maxEditFileSize
+    const remoteEdit = !edit && isRemote && size < maxEditFileSize
     if (
       edit === true || remoteEdit
     ) {
@@ -787,13 +789,14 @@ export default class FileSection extends React.Component {
     operation
   ) => {
     const { name, path, type, isDirectory } = file
-    let typeTo = type === typeMap.local
+    const isLocal = type === typeMap.local
+    let typeTo = isLocal
       ? typeMap.remote
       : typeMap.local
     if (_typeTo) {
       typeTo = _typeTo
     }
-    let toPath = type === typeMap.local
+    let toPath = isLocal
       ? this.props[typeMap.remote + 'Path']
       : this.props[typeMap.local + 'Path']
     if (toPathBase) {
@@ -928,10 +931,12 @@ export default class FileSection extends React.Component {
     } = this.props
     const hasHost = !!tab.host
     const { enableSsh } = tab
-    const transferText = type === typeMap.local
+    const isLocal = type === typeMap.local
+    const isRemote = type === typeMap.remote
+    const transferText = isLocal
       ? e(transferTypeMap.upload)
       : e(transferTypeMap.download)
-    const iconType = type === typeMap.local
+    const iconType = isLocal
       ? 'CloudUploadOutlined'
       : 'CloudDownloadOutlined'
     const len = selectedFiles.length
@@ -960,8 +965,8 @@ export default class FileSection extends React.Component {
     if (
       isDirectory && id &&
       (
-        (hasHost && enableSsh && type === typeMap.remote) ||
-        (type === typeMap.local && !hasHost)
+        (hasHost && enableSsh && isRemote) ||
+        (isLocal && !hasHost)
       )
     ) {
       res.push({
@@ -977,14 +982,14 @@ export default class FileSection extends React.Component {
         text: transferText
       })
     }
-    if (!isDirectory && id && type === typeMap.local) {
+    if (!isDirectory && id && isLocal) {
       res.push({
         func: 'transferOrEnterDirectory',
         icon: 'ArrowRightOutlined',
         text: e('open')
       })
     }
-    if (id && type === typeMap.local) {
+    if (id && isLocal) {
       res.push({
         func: 'showInDefaultFileManager',
         icon: 'ContainerOutlined',
@@ -1040,16 +1045,18 @@ export default class FileSection extends React.Component {
         text: m('copyFilePath')
       })
     }
-    res.push({
-      func: 'newFile',
-      icon: 'FileAddOutlined',
-      text: e('newFile')
-    })
-    res.push({
-      func: 'newDirectory',
-      icon: 'FolderAddOutlined',
-      text: e('newFolder')
-    })
+    if (enableSsh || isLocal) {
+      res.push({
+        func: 'newFile',
+        icon: 'FileAddOutlined',
+        text: e('newFile')
+      })
+      res.push({
+        func: 'newDirectory',
+        icon: 'FolderAddOutlined',
+        text: e('newFolder')
+      })
+    }
     res.push({
       func: 'selectAll',
       icon: 'CheckSquareOutlined',

package/client/components/sftp/sftp-entry.jsx

@@ -562,6 +562,22 @@ export default class Sftp extends Component {
     })
   }
 
+  sftpList = (sftp, remotePath) => {
+    return sftp.list(remotePath)
+      .then(arr => {
+        return arr.map(item => {
+          const { type } = item
+          return {
+            ...pick(item, ['name', 'size', 'accessTime', 'modifyTime', 'mode', 'owner', 'group']),
+            isDirectory: type === fileTypeMap.directory,
+            type: typeMap.remote,
+            path: remotePath,
+            id: generate()
+          }
+        })
+      })
+  }
+
   remoteList = async (
     returnList = false,
     remotePathReal,
@@ -644,52 +660,8 @@ export default class Sftp extends Component {
         }
       }
 
-      let remote = await sftp.list(remotePath)
+      const remote = await this.sftpList(sftp, remotePath)
       this.sftp = sftp
-      const remotes = deepCopy(remote)
-      remote = []
-      for (const _r of remotes) {
-        const r = _r
-        const { type, name } = r
-        const f = {
-          ...pick(r, ['name', 'size', 'accessTime', 'modifyTime', 'mode', 'owner', 'group']),
-          isDirectory: r.type === fileTypeMap.directory,
-          type: typeMap.remote,
-          path: remotePath,
-          id: generate()
-        }
-        if (type === fileTypeMap.link) {
-          const linkPath = resolve(remotePath, name)
-          let realpath = await sftp.readlink(linkPath)
-            .catch(e => {
-              console.debug(e)
-              return null
-            })
-          if (!realpath) {
-            continue
-          }
-          if (!isAbsPath(realpath)) {
-            realpath = resolve(remotePath, realpath)
-            realpath = await sftp.realpath(realpath)
-          }
-          const realFileInfo = await getRemoteFileInfo(
-            sftp,
-            realpath
-          ).catch(e => {
-            log.debug('seems a bad symbolic link')
-            log.debug(e)
-            return null
-          })
-          if (!realFileInfo) {
-            continue
-          }
-          f.isSymbolicLink = true
-          f.isDirectory = realFileInfo.isDirectory
-        } else {
-          f.isSymbolicLink = false
-        }
-        remote.push(f)
-      }
       const update = {
         remote,
         remoteFileTree: buildTree(remote),
@@ -712,6 +684,7 @@ export default class Sftp extends Component {
         ]).slice(0, maxSftpHistory)
       }
       this.setState(update, () => {
+        this.updateRemoteList(remote, remotePath, sftp)
         this.props.editTab(tab.id, {
           sftpCreated: true
         })
@@ -731,6 +704,53 @@ export default class Sftp extends Component {
     }
   }
 
+  updateRemoteList = async (
+    remotes,
+    remotePath,
+    sftp
+  ) => {
+    const remote = []
+    for (const r of remotes) {
+      const { type, name } = r
+      if (type === fileTypeMap.link) {
+        const linkPath = resolve(remotePath, name)
+        let realpath = await sftp.readlink(linkPath)
+          .catch(e => {
+            console.debug(e)
+            return null
+          })
+        if (!realpath) {
+          continue
+        }
+        if (!isAbsPath(realpath)) {
+          realpath = resolve(remotePath, realpath)
+          realpath = await sftp.realpath(realpath)
+        }
+        const realFileInfo = await getRemoteFileInfo(
+          sftp,
+          realpath
+        ).catch(e => {
+          log.debug('seems a bad symbolic link')
+          log.debug(e)
+          return null
+        })
+        if (!realFileInfo) {
+          continue
+        }
+        r.isSymbolicLink = true
+        r.isDirectory = realFileInfo.isDirectory
+      } else {
+        r.isSymbolicLink = false
+      }
+      remote.push(r)
+    }
+    const update = {
+      remote,
+      remoteFileTree: buildTree(remote)
+    }
+    this.setState(update)
+  }
+
   localList = async (returnList = false, localPathReal, oldPath) => {
     if (!fs) return
     if (!returnList) {

package/client/components/tabs/index.jsx

@@ -75,7 +75,7 @@ export default class Tabs extends React.Component {
     const len = tabs.length
     const addBtnWidth = 22
     const tabsWidth = this.tabsWidth()
-    const tabsWidthAll = tabMargin * len + 216 + tabsWidth
+    const tabsWidthAll = tabMargin * len + 166 + tabsWidth
     return width < (tabsWidthAll + addBtnWidth)
   }
 

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

@@ -55,7 +55,7 @@ export default class AttachAddonCustom extends AttachAddon {
     const data = ev.target.result
     const { term } = this
     const str = this.decoder.decode(data)
-    if (term.parent.props.sftpPathFollowSsh && term.buffer.active.type !== 'alternate') {
+    if (term?.parent?.props.sftpPathFollowSsh && term?.buffer.active.type !== 'alternate') {
       const {
         cwdId
       } = term
@@ -78,7 +78,7 @@ export default class AttachAddonCustom extends AttachAddon {
       }
       term.write(nnss.join('\r'))
     } else {
-      term.write(str)
+      term?.write(str)
     }
   }
 

package/client/components/terminal/index.jsx

@@ -613,7 +613,7 @@ class Term extends Component {
       title: 'Choose some files to send',
       message: 'Choose some files to send',
       properties
-    })
+    }).catch(() => false)
     if (!files || !files.length) {
       return this.onZmodemEnd()
     }
@@ -637,7 +637,7 @@ class Term extends Component {
         'treatPackageAsDirectory',
         'dontAddToRecent'
       ]
-    })
+    }).catch(() => false)
     if (!savePaths || !savePaths.length) {
       return false
     }
@@ -1203,7 +1203,7 @@ class Term extends Component {
   }
 
   oncloseSocket = () => {
-    if (this.onClose) {
+    if (this.onClose || !this.props.tab.enableSsh) {
       return
     }
     this.setStatus(

package/client/components/terminal/xterm-zmodem.js

@@ -1,5 +1,5 @@
-import zmodem from 'zmodem.js/src/zmodem_browser'
-
+// import zmodem from 'zmodem-ts/dist/zmodem.mjs'
+import Sentry from 'zmodem-ts/dist/zsentry.js'
 export class AddonZmodem {
   _disposables = []
 
@@ -20,7 +20,7 @@ export class AddonZmodem {
     this.socket = ctx.socket
     this.term = ctx.term
     this.ctx = ctx
-    this.zsentry = new zmodem.Sentry({
+    this.zsentry = new Sentry({
       to_terminal: (octets) => {
         if (ctx.onZmodem) {
           this.term.write(String.fromCharCode.apply(String, octets))

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

@@ -11,8 +11,8 @@ const { prefix } = window
 const m = prefix('menu')
 
 export default function TerminalInfoActivities (props) {
-  const { activities } = props
-  if (isEmpty(activities) || !props.isRemote) {
+  const { activities, isRemote, terminalInfos } = props
+  if (isEmpty(activities) || !isRemote || !terminalInfos.includes('activities')) {
     return null
   }
   const col = colsParser(activities[0])

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

@@ -7,9 +7,12 @@ import {
   commonActions
 } from '../../common/constants'
 import {
-  Switch
+  Switch,
+  Space,
+  Button
 } from 'antd'
 import ShowItem from '../common/show-item'
+import defaults from '../../common/default-setting'
 import postMsg from '../../common/post-msg'
 import { toggleTerminalLog, toggleTerminalLogTimestamp } from '../terminal/terminal-apis'
 
@@ -54,6 +57,16 @@ export default class TerminalInfoBase extends Component {
     })
   }
 
+  toggleTerminalLogInfo = (h) => {
+    const { terminalInfos } = this.props
+    const nv = terminalInfos.includes(h)
+      ? terminalInfos.filter(f => f !== h)
+      : [...terminalInfos, h]
+    window.store.setConfig({
+      terminalInfos: nv
+    })
+  }
+
   handleToggle = () => {
     const { saveTerminalLogToFile, addTimeStampToTermLog } = this.state
     const {
@@ -120,10 +133,37 @@ export default class TerminalInfoBase extends Component {
         unCheckedChildren={name}
         checked={addTimeStampToTermLog}
         onChange={this.handleToggleTimestamp}
+        className='mg1b'
       />
     )
   }
 
+  renderInfoSelection () {
+    const {
+      terminalInfos
+    } = this.props
+    return (
+      <Space.Compact block>
+        {
+          defaults.terminalInfos.map(f => {
+            const type = terminalInfos.includes(f) ? 'primary' : 'default'
+            return (
+              <Button
+                key={f + 'term-info-sel'}
+                type={type}
+                size='small'
+                onClick={() => this.toggleTerminalLogInfo(f)}
+                className='cap'
+              >
+                {f}
+              </Button>
+            )
+          })
+        }
+      </Space.Compact>
+    )
+  }
+
   render () {
     const {
       id,
@@ -149,13 +189,18 @@ export default class TerminalInfoBase extends Component {
               unCheckedChildren={name}
               checked={saveTerminalLogToFile}
               onChange={this.handleToggle}
-              className='mg1r'
+              className='mg1r mg1b'
             />
             {
               this.renderTimestamp()
             }
           </span>
         </div>
+        <div className='pd1y'>
+          {
+            this.renderInfoSelection()
+          }
+        </div>
         <p><b>log:</b> {to}</p>
       </div>
     )

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

@@ -7,8 +7,8 @@ import { isEmpty } from 'lodash-es'
 import colsParser from './data-cols-parser'
 
 export default function TerminalInfoDisk (props) {
-  const { disks } = props
-  if (isEmpty(disks) || !props.isRemote) {
+  const { disks, isRemote, terminalInfos } = props
+  if (isEmpty(disks) || !isRemote || !terminalInfos.includes('disks')) {
     return null
   }
   const col = colsParser(disks[0])

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

@@ -9,8 +9,8 @@ import { formatBytes } from '../../common/byte-format'
 import copy from 'json-deep-copy'
 
 export default function TerminalInfoDisk (props) {
-  const { network } = props
-  if (isEmpty(network) || !props.isRemote) {
+  const { network, isRemote, terminalInfos } = props
+  if (isEmpty(network) || !isRemote || !terminalInfos.includes('network')) {
     return null
   }
   const [state, setter] = useState({

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

@@ -25,8 +25,13 @@ function computePercent (used, total) {
 }
 
 export default function TerminalInfoResource (props) {
-  const { cpu, mem, swap } = props
-  if (!props.isRemote) {
+  const { cpu, mem, swap, isRemote, terminalInfos } = props
+  if (
+    !isRemote ||
+    (!terminalInfos.includes('cpu') &&
+    !terminalInfos.includes('mem') &&
+    !terminalInfos.includes('swap'))
+  ) {
     return null
   }
   function renderItem (obj) {
@@ -56,20 +61,25 @@ export default function TerminalInfoResource (props) {
       </div>
     )
   }
-  const data = [
-    {
+  const data = []
+  if (terminalInfos.includes('cpu')) {
+    data.push({
       name: 'cpu',
       percent: parseInt10(cpu)
-    },
-    {
+    })
+  }
+  if (terminalInfos.includes('mem')) {
+    data.push({
       name: 'mem',
       ...mem
-    },
-    {
+    })
+  }
+  if (terminalInfos.includes('swap')) {
+    data.push({
       name: 'swap',
       ...swap
-    }
-  ]
+    })
+  }
   return (
     <div className='terminal-info-section terminal-info-resource'>
       {

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

@@ -3,8 +3,8 @@
  */
 
 export default function TerminalInfoUp (props) {
-  const { uptime } = props
-  if (!props.isRemote) {
+  const { uptime, isRemote, terminalInfos } = props
+  if (!isRemote || !terminalInfos.includes('uptime')) {
     return null
   }
   return (

package/client/css/basic.styl

@@ -39,3 +39,6 @@ body
 
 a
   color primary
+
+.cap
+  text-transform capitalize

package/client/store/common.js

@@ -3,6 +3,7 @@
  */
 
 import handleError from '../common/error-handler'
+import { Modal } from 'antd'
 import { debounce } from 'lodash-es'
 import postMessage from '../common/post-msg'
 import {
@@ -15,6 +16,10 @@ import {
 } from '../common/constants'
 import * as ls from '../common/safe-local-storage'
 
+const { prefix } = window
+const m = prefix('menu')
+const c = prefix('common')
+
 export default Store => {
   Store.prototype.storeAssign = function (updates) {
     Object.assign(this, updates)
@@ -155,4 +160,50 @@ export default Store => {
     ls.setItem(dismissDelKeyTipLsKey, 'y')
     window.store.hideDelKeyTip = true
   }
+  Store.prototype.beforeExit = function (e) {
+    const { confirmBeforeExit } = window.store.config
+    if (
+      (confirmBeforeExit &&
+      !window.confirmExit) ||
+      window.store.isTransporting
+    ) {
+      e.returnValue = false
+      let mod = null
+      mod = Modal.confirm({
+        onCancel: () => {
+          window.confirmExit = false
+          mod.destroy()
+        },
+        onOk: () => {
+          window.confirmExit = true
+          window.store[window.exitFunction]()
+        },
+        title: m('quit'),
+        okText: c('ok'),
+        cancelText: c('cancel'),
+        content: ''
+      })
+    }
+  }
+  Store.prototype.beforeExitApp = function (e, name) {
+    let mod = null
+    mod = Modal.confirm({
+      onCancel: () => {
+        window.pre.runGlobalAsync('setCloseAction', 'closeApp')
+        mod.destroy()
+      },
+      onOk: () => {
+        window.pre.runGlobalAsync(name)
+      },
+      title: m('quit'),
+      okText: c('ok'),
+      cancelText: c('cancel'),
+      content: ''
+    })
+  }
+  Store.prototype.setTerminalInfos = function (arr) {
+    window.store.setConfig({
+      terminalInfos: arr
+    })
+  }
 }

package/client/store/system-menu.js

@@ -91,30 +91,20 @@ export default Store => {
   }
 
   Store.prototype.exit = function () {
-    const { store } = window
-    if (
-      !store.isTransporting &&
-      !store.config.confirmBeforeExit
-    ) {
-      return store.doExit()
-    }
-    store.confirmExit()
+    window.exitFunction = 'doExit'
+    window.store.doExit()
   }
 
   Store.prototype.restart = function () {
-    const { store } = window
-    if (store.isTransporting) {
-      store.confirmExit('doRestart')
-    } else {
-      store.doRestart()
-    }
+    window.exitFunction = 'doRestart'
+    window.store.doRestart()
   }
 
   Store.prototype.doExit = function () {
-    window.pre.runGlobalAsync('closeApp')
+    window.pre.runGlobalAsync('closeApp', 'exit')
   }
 
   Store.prototype.doRestart = function () {
-    window.pre.runGlobalAsync('restart')
+    window.pre.runGlobalAsync('restart', 'restart')
   }
 }

package/package.json

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