@electerm/electerm-react 1.40.18 → 1.50.21

package/client/components/terminal/term-search.jsx

@@ -1,4 +1,4 @@
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import {
   Tooltip
 } from 'antd'
@@ -20,7 +20,7 @@ import './term-search.styl'
 
 const e = window.translate
 
-class TermSearch extends Component {
+class TermSearch extends PureComponent {
   searchControls = [{
     id: 'matchCase',
     icon: MatchCaseIcon,
@@ -54,10 +54,10 @@ class TermSearch extends Component {
   }
 
   toggleSearch = () => {
-    if (this.props.store.termSearchOpen) {
+    if (this.props.termSearchOpen) {
       this.clearSearch()
     }
-    this.props.store.toggleTerminalSearch()
+    window.store.toggleTerminalSearch()
     setTimeout(window.store.focus, 200)
   }
 
@@ -67,41 +67,43 @@ class TermSearch extends Component {
   }
 
   prev = () => {
-    const { activeTerminalId } = this.props.store
+    const {
+      currentTabId,
+      termSearch,
+      termSearchOptions
+    } = this.props
     postMessage({
       action: terminalActions.doSearchPrev,
-      keyword: this.props.store.termSearch,
-      activeSplitId: activeTerminalId,
-      options: copy(this.props.store.termSearchOptions)
+      keyword: termSearch,
+      currentTabId,
+      options: copy(termSearchOptions)
     })
   }
 
   next = () => {
-    const { activeTerminalId } = this.props.store
     postMessage({
       action: terminalActions.doSearchNext,
-      activeSplitId: activeTerminalId,
-      keyword: this.props.store.termSearch,
-      options: copy(this.props.store.termSearchOptions)
+      currentTabId: this.props.currentTabId,
+      keyword: this.props.termSearch,
+      options: copy(this.props.termSearchOptions)
     })
   }
 
   handleChange = e => {
-    this.props.store.termSearch = e.target.value
+    window.store.termSearch = e.target.value
     this.prev()
   }
 
   clearSearch = () => {
-    const { activeTerminalId } = this.props.store
     postMessage({
       action: terminalActions.clearSearch,
-      activeSplitId: activeTerminalId
+      currentTabId: this.props.currentTabId
     })
   }
 
   close = () => {
     this.clearSearch()
-    this.props.store.termSearchOpen = false
+    window.store.termSearchOpen = false
   }
 
   renderSearchAction = item => {
@@ -126,7 +128,7 @@ class TermSearch extends Component {
     const {
       termSearchMatchCount,
       termSearchMatchIndex
-    } = this.props.store
+    } = this.props
     if (!termSearchMatchCount) {
       return null
     }
@@ -148,10 +150,10 @@ class TermSearch extends Component {
 
   toggle = prop => {
     const {
-      store
+      termSearchOptions
     } = this.props
-    const v = store.termSearchOptions[prop]
-    store.setTermSearchOption({
+    const v = termSearchOptions[prop]
+    window.store.setTermSearchOption({
       [prop]: !v
     })
     this.next()
@@ -163,7 +165,7 @@ class TermSearch extends Component {
       icon: Icon,
       prop
     } = item
-    const v = this.props.store.termSearchOptions[prop]
+    const v = this.props.termSearchOptions[prop]
     const cls = classNames('term-search-opt-icon', {
       'term-search-on': v
     })
@@ -191,11 +193,11 @@ class TermSearch extends Component {
   }
 
   render () {
-    const { store, currentTab } = this.props
     const {
       termSearchOpen,
-      termSearch
-    } = store
+      termSearch,
+      currentTab
+    } = this.props
     if (
       !termSearchOpen ||
       !currentTab ||

package/client/components/terminal-info/run-cmd.jsx

@@ -146,31 +146,6 @@ function formatNetwork (traffic, ips) {
   }
 }
 
-// function format (arr) {
-//   if (!arr) {
-//     return {}
-//   }
-//   // const arr = res.split(sepStr)
-//   // console.log(arr)
-//   const uptime = arr[0]
-//   const activities = formatActivities(arr[1])
-//   const disks = formatDisks(arr[2])
-//   const cpu = formatCpu(arr[3])
-//   const { mem, swap } = formatMem(arr[4])
-//   const { network, ip } = formatNetwork(arr[5], arr[6])
-//   const final = {
-//     ip,
-//     uptime,
-//     activities,
-//     disks,
-//     cpu,
-//     mem,
-//     swap,
-//     network
-//   }
-//   return final
-// }
-
 export async function runCmds (props, cmds) {
   const {
     pid,

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

@@ -0,0 +1,60 @@
+/**
+ * info content module
+ */
+
+import { PureComponent } from 'react'
+import TerminalInfoBase from './base'
+import TerminalInfoUp from './up'
+import TerminalInfoNetwork from './network'
+import TerminalInfoResource from './resource'
+import TerminalInfoActivities from './activity'
+import TerminalInfoDisk from './disk'
+import RunCmd from './run-cmd'
+import { runCmd } from '../terminal/terminal-apis'
+import './terminal-info.styl'
+
+export default class TerminalInfoContent extends PureComponent {
+  state = {
+    uptime: '',
+    cpu: '',
+    mem: {},
+    swap: {},
+    activities: [],
+    disks: [],
+    network: {}
+  }
+
+  setStateRef = (...args) => {
+    this.setState(...args)
+  }
+
+  killProcess = async (id) => {
+    const {
+      pid,
+      sessionId
+    } = this.props
+    const cmd = `kill ${id}`
+    runCmd(pid, sessionId, cmd)
+  }
+
+  render () {
+    const { props, state } = this
+    return (
+      <div>
+        <TerminalInfoBase {...props} {...state} />
+        <TerminalInfoUp {...props} {...state} />
+        <TerminalInfoResource
+          {...props} {...state}
+        />
+        <TerminalInfoActivities
+          {...props}
+          {...state}
+          killProcess={this.killProcess}
+        />
+        <TerminalInfoNetwork {...props} {...state} />
+        <TerminalInfoDisk {...props} {...state} />
+        <RunCmd {...props} setState={this.setStateRef} />
+      </div>
+    )
+  }
+}

package/client/components/terminal-info/terminal-info.styl

@@ -4,7 +4,7 @@
   &:hover
     color text
 .info-panel-wrap
-  position absolute
+  position fixed
   right 0
   top 100px
   bottom 0

package/client/components/tree-list/bookmark-transport.jsx

@@ -2,7 +2,7 @@
  * bookmark import/export
  */
 
-import { Component } from '../common/react-subx'
+import { PureComponent } from 'react'
 import {
   DownloadOutlined,
   UploadOutlined,
@@ -17,9 +17,9 @@ import { fixBookmarks } from '../../common/db-fix'
 
 const e = window.translate
 
-export default class BookmarkTransport extends Component {
+export default class BookmarkTransport extends PureComponent {
   beforeUpload = async (file) => {
-    const { store } = this.props
+    const { store } = window
     const txt = await window.fs.readFile(file.path)
     try {
       const content = JSON.parse(txt)
@@ -27,8 +27,9 @@ export default class BookmarkTransport extends Component {
         bookmarkGroups: bookmarkGroups1,
         bookmarks: bookmarks1
       } = content
-      const bookmarkGroups = copy(store.bookmarkGroups)
-      const bookmarks = copy(store.bookmarks)
+      const { props } = this
+      const bookmarkGroups = copy(props.bookmarkGroups)
+      const bookmarks = copy(props.bookmarks)
       const bmTree = bookmarks.reduce((p, v) => {
         return {
           ...p,
@@ -95,9 +96,7 @@ export default class BookmarkTransport extends Component {
   }
 
   handleDownload = () => {
-    const { store } = this.props
-    const bookmarkGroups = store.bookmarkGroups
-    const bookmarks = store.bookmarks
+    const { bookmarkGroups, bookmarks } = this.props
     const txt = JSON.stringify({
       bookmarkGroups: copy(bookmarkGroups),
       bookmarks: copy(bookmarks)
@@ -107,7 +106,7 @@ export default class BookmarkTransport extends Component {
   }
 
   handleToggleEdit = () => {
-    this.props.store.bookmarkSelectMode = true
+    window.store.bookmarkSelectMode = true
   }
 
   renderEdit () {

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

@@ -32,7 +32,7 @@ import {
 } from '../../common/constants'
 import findParentBySel from '../../common/find-parent'
 import copy from 'json-deep-copy'
-import Btns from './bookmark-transport'
+import BookmarkTransport from './bookmark-transport'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import getInitItem from '../../common/init-setting-item'
 import uid from '../../common/uid'
@@ -55,7 +55,7 @@ export default class ItemListTree extends Component {
       bookmarkGroupTitle: '',
       categoryTitle: '',
       categoryId: '',
-      expandedKeys: window.store.expandedKeys
+      expandedKeys: props.expandedKeys
     }
   }
 
@@ -172,10 +172,11 @@ export default class ItemListTree extends Component {
     this.setState({
       categoryId: ''
     })
-    this.props.store.setBookmarkGroups(
+    const { store } = window
+    store.setBookmarkGroups(
       bookmarkGroups
     )
-    this.props.store.batchDbUpdate([{
+    store.batchDbUpdate([{
       id: categoryId,
       db: 'bookmarkGroups',
       upsert: false,
@@ -219,7 +220,7 @@ export default class ItemListTree extends Component {
       showNewBookmarkGroupForm: false
     }, () => {
       this.onSubmit = false
-      this.props.store.addBookmarkGroup({
+      window.store.addBookmarkGroup({
         id: uid(),
         title: this.state.bookmarkGroupTitle,
         bookmarkIds: []
@@ -262,14 +263,15 @@ export default class ItemListTree extends Component {
         ...(cat.bookmarkGroupIds || []),
         newCat.id
       ]
-      this.props.store.setBookmarkGroups(
+      const { store } = window
+      store.setBookmarkGroups(
         bookmarkGroups
       )
-      this.props.store.batchDbAdd([{
+      store.batchDbAdd([{
         db: 'bookmarkGroups',
         obj: newCat
       }])
-      this.props.store.batchDbUpdate([{
+      store.batchDbUpdate([{
         upsert: false,
         id,
         update: {
@@ -290,11 +292,12 @@ export default class ItemListTree extends Component {
 
   del = (item, e) => {
     e.stopPropagation()
+    const { store } = window
     if (item.bookmarkIds) {
-      return this.props.store.delBookmarkGroup(item)
+      return store.delBookmarkGroup(item)
     }
-    this.props.store.onDelItem(item, this.props.type)
-    this.props.store.delItem(item, this.props.type)
+    store.onDelItem(item, this.props.type)
+    store.delItem(item, this.props.type)
   }
 
   closeNewGroupForm = () => {
@@ -309,7 +312,7 @@ export default class ItemListTree extends Component {
       expandedKeys
     })
     this.closeNewGroupForm()
-    this.props.store.setState(
+    window.store.setState(
       'expandedKeys', expandedKeys
     )
   }
@@ -319,13 +322,14 @@ export default class ItemListTree extends Component {
   ) => {
     const id = e.target.getAttribute('data-item-id')
     const isGroup = e.target.getAttribute('data-is-group') === 'true'
+    const { store } = window
     if (isGroup) {
-      this.props.store.storeAssign({
+      store.storeAssign({
         currentBookmarkGroupId: id
       })
     } else {
-      this.props.store.storeAssign({
-        currentBookmarkGroupId: findBookmarkGroupId(this.props.store.bookmarkGroups, id)
+      store.storeAssign({
+        currentBookmarkGroupId: findBookmarkGroupId(store.bookmarkGroups, id)
       })
       const { bookmarks } = this.props
       const bookmark = find(
@@ -381,8 +385,9 @@ export default class ItemListTree extends Component {
         id
       ]
     )
+    const { store } = window
     if (from) {
-      this.props.store.editBookmarkGroup(
+      store.editBookmarkGroup(
         from.id,
         {
           bookmarkIds: (from.bookmarkIds || []).filter(d => {
@@ -391,7 +396,7 @@ export default class ItemListTree extends Component {
         }
       )
     }
-    this.props.store.editBookmarkGroup(
+    store.editBookmarkGroup(
       item.id,
       {
         bookmarkIds: uniq(
@@ -418,6 +423,10 @@ export default class ItemListTree extends Component {
       args = [],
       func
     } = e.data || {}
+    if (action === commonActions.closeContextMenuAfter) {
+      window.removeEventListener('message', this.onContextAction)
+      return false
+    }
     if (
       action !== commonActions.clickContextMenu ||
       id !== this.uid ||
@@ -436,7 +445,7 @@ export default class ItemListTree extends Component {
     }
     const menus = this.renderContextItems(item, isGroup)
     this.uid = uid()
-    this.props.store.openContextMenu({
+    window.store.openContextMenu({
       items: menus,
       id: this.uid,
       pos: this.computePos(e)
@@ -484,7 +493,7 @@ export default class ItemListTree extends Component {
         bookmarkGroupSubParentId: ''
       })
     } else {
-      this.props.store.openBookmarkEdit(item)
+      window.store.openBookmarkEdit(item)
     }
   }
 
@@ -755,7 +764,7 @@ export default class ItemListTree extends Component {
 
   duplicateItem = (e, item) => {
     e.stopPropagation()
-    const { addItem } = this.props.store
+    const { addItem } = window.store
     const bookmarkGroups = copy(
       this.props.bookmarkGroups
     )
@@ -771,7 +780,7 @@ export default class ItemListTree extends Component {
     }
     newbookmark.title = item.title + '(' + deplicateIndex + ')'
     const categoryId = findBookmarkGroupId(bookmarkGroups, item.id)
-    this.props.store.storeAssign({
+    window.store.storeAssign({
       currentBookmarkGroupId: categoryId
     })
     // add bookmark to store
@@ -834,10 +843,10 @@ export default class ItemListTree extends Component {
       }
       return bg
     })
-    this.props.store.setBookmarkGroups(
+    window.store.setBookmarkGroups(
       bookmarkGroups
     )
-    this.props.store.batchDbUpdate(updates)
+    window.store.batchDbUpdate(updates)
   }
 
   findBookmarkByTitle = (bookmarks, oldBookmark) => {
@@ -854,7 +863,7 @@ export default class ItemListTree extends Component {
       item,
       isGroup,
       parentId,
-      leftSidebarWidth: this.props.store.leftSidebarWidth,
+      leftSidebarWidth: this.props.leftSidebarWidth,
       staticList: this.props.staticList,
       selectedItemId: this.props.activeItemId,
       ...pick(
@@ -909,8 +918,9 @@ export default class ItemListTree extends Component {
           >
             <FolderOutlined className='with-plus' />
           </Button>
-          <Btns
-            store={this.props.store}
+          <BookmarkTransport
+            bookmarkGroups={this.props.bookmarkGroups}
+            bookmarks={this.props.bookmarks}
           />
         </Space.Compact>
       </div>

package/client/components/vnc/vnc-session.jsx

@@ -72,7 +72,6 @@ export default class VncSession extends RdpSession {
     } = config
     const { sessionId, id } = this.props
     const tab = window.store.applyProfile(deepCopy(this.props.tab || {}))
-    console.log('vnc tab', this.props.tab)
     const {
       type,
       term: terminalType,
@@ -148,7 +147,6 @@ export default class VncSession extends RdpSession {
   }
 
   onConnect = (event) => {
-    // console.log('onConnect', event)
     this.setStatus(statusMap.success)
     this.setState({
       loading: false
@@ -160,7 +158,6 @@ export default class VncSession extends RdpSession {
   }
 
   onSecurityfailure = (event) => {
-    // console.log('onSecurityFailure', event)
     message.error('Security Failure: ' + event.detail?.reason)
   }
 
@@ -188,12 +185,10 @@ export default class VncSession extends RdpSession {
   }
 
   onClipboard = (event) => {
-    // console.log('onClipboard', event)
     copy(event.detail.text)
   }
 
   onBell = (event) => {
-    // console.log('Bell', event)
     message.warning('Bell')
   }
 
@@ -263,7 +258,7 @@ export default class VncSession extends RdpSession {
   }
 
   render () {
-    const { width: w, height: h } = this.computeProps()
+    const { width: w, height: h } = this.props
     const vncProps = {
       style: {
         width: w + 'px',

package/client/store/common.js

@@ -153,7 +153,7 @@ export default Store => {
 
   Store.prototype.setRightSidePanelWidth = function (v) {
     ls.setItem(rightSidebarWidthKey, v)
-    window.store.rightSidebarWidth = v
+    window.store.rightPanelWidth = v
   }
   Store.prototype.dismissDelKeyTip = function (v) {
     ls.setItem(dismissDelKeyTipLsKey, 'y')

package/client/store/event.js

@@ -57,12 +57,12 @@ export default Store => {
     document.activeElement.select()
     postMessage({
       event: 'selectall',
-      id: window.store.activeTerminalId
+      id: window.store.currentTabId
     })
   }
 
   Store.prototype.triggerResize = function () {
-    window.dispatchEvent(new window.Event('resize'))
+    window.store.resizeTrigger = window.store.resizeTrigger ? 0 : 1
   }
 
   Store.prototype.toggleTermFullscreen = function (terminalFullScreen) {

package/client/store/index.js

@@ -134,7 +134,6 @@ class Store {
   get inActiveTerminal () {
     const { store } = window
     return !store.showModal &&
-      store.termFocused &&
       store.currentTab &&
       (
         store.currentTab.pane === paneMap.ssh ||
@@ -211,14 +210,6 @@ class Store {
     ]
   }
 
-  get config () {
-    return JSON.parse(window.store._config || '{}')
-  }
-
-  get sftpSortSetting () {
-    return JSON.parse(window.store._sftpSortSetting)
-  }
-
   get onOperation () {
     const {
       store
@@ -229,26 +220,6 @@ class Store {
       store.showFileModal
   }
 
-  get topMenuHeight () {
-    return 0
-  }
-
-  get langs () {
-    return JSON.parse(window.store._langs)
-  }
-
-  get upgradeInfo () {
-    return JSON.parse(window.store._upgradeInfo)
-  }
-
-  get transferToConfirm () {
-    return JSON.parse(window.store._transferToConfirm)
-  }
-
-  get settingItem () {
-    return JSON.parse(window.store._settingItem)
-  }
-
   get uiThemeConfig () {
     const { store } = window
     const themeConf = store.getUiThemeConfig()
@@ -293,7 +264,7 @@ class Store {
   }
 }
 
-const getterProps = [
+const arrGetterProps = [
   'expandedKeys',
   'checkedKeys',
   'addressBookmarks',
@@ -314,7 +285,7 @@ const getterProps = [
   'resolutions'
 ]
 
-for (const prop of getterProps) {
+for (const prop of arrGetterProps) {
   Object.defineProperty(Store.prototype, prop, {
     get: function () {
       return JSON.parse(window.store[`_${prop}`] || '[]').filter(d => d)
@@ -322,6 +293,24 @@ for (const prop of getterProps) {
   })
 }
 
+const getterProps = [
+  'langs',
+  'config',
+  'sftpSortSetting',
+  'upgradeInfo',
+  'transferToConfirm',
+  'terminalInfoProps',
+  'settingItem'
+]
+
+for (const prop of getterProps) {
+  Object.defineProperty(Store.prototype, prop, {
+    get: function () {
+      return JSON.parse(window.store[`_${prop}`] || '{}')
+    }
+  })
+}
+
 loadDataExtend(Store)
 eventExtend(Store)
 dbUpgradeExtend(Store)
@@ -346,6 +335,6 @@ transferExtend(Store)
 addressBookmarkExtend(Store)
 
 export const StateStore = Store
-const store = manage(new Store())
+const store = manage(new Store(), 1)
 
 export default store