@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,205 @@
+import { Component } from 'react'
+import {
+  Select
+} from 'antd'
+import Transport from './transport-ui'
+import {
+  PlayCircleOutlined,
+  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
+
+const { prefix } = window
+const e = prefix('sftp')
+
+export default class TransferModalUI extends Component {
+  state = {
+    filter: 'all'
+  }
+
+  getCurrentTransports = () => {
+    return this.getTransferList().filter(t => t.inited)
+  }
+
+  handlePauseOrResumeAll = () => {
+    postMessage({
+      action: transportTypes.pauseOrResumeAll,
+      id: this.state.filter
+    })
+  }
+
+  handleCancelAll = () => {
+    postMessage({
+      action: transportTypes.cancelAll,
+      id: this.state.filter
+    })
+  }
+
+  getGroups = () => {
+    const fileTransfers = this.props.store.getTransfers()
+    const tree = fileTransfers.reduce((p, k) => {
+      const {
+        id,
+        title,
+        sessionId
+      } = k
+      if (!p[sessionId]) {
+        p[sessionId] = {
+          title,
+          transfers: []
+        }
+      }
+      p[sessionId].transfers.push(id)
+      return p
+    }, {})
+    return Object.keys(tree)
+      .map(id => {
+        const { transfers, title } = tree[id]
+        return {
+          id,
+          transfers,
+          title
+        }
+      })
+  }
+
+  handleFilter = (filter) => {
+    this.setState({
+      filter
+    })
+  }
+
+  getTransferList = () => {
+    const {
+      filter
+    } = this.state
+    const fileTransfers = this.props.store.getTransfers()
+    return filter === 'all'
+      ? fileTransfers
+      : fileTransfers.filter(d => d.sessionId === filter)
+  }
+
+  computePercent = () => {
+    const { all, transfered } = this.getTransferList().reduce((prev, c) => {
+      prev.all += c?.fromFile?.size || 0
+      prev.transfered += (c.transferred || 0)
+      return prev
+    }, {
+      all: 0,
+      transfered: 0
+    })
+    let percent = all === 0
+      ? 0
+      : Math.floor(100 * transfered / all)
+    percent = percent >= 100 ? 99 : percent
+    return percent
+  }
+
+  computeLeftTime = () => {
+    const sorted = this.getCurrentTransports().sort((b, a) => a.leftTimeInt - b.leftTimeInt)
+    return get(sorted, '[0].leftTime') || '-'
+  }
+
+  computePausing = () => {
+    return this.getCurrentTransports().reduce((prev, c) => {
+      return prev && c.pausing
+    }, true)
+  }
+
+  renderTransportIcon = () => {
+    const pausing = this.computePausing()
+    const Icon = pausing ? PlayCircleOutlined : PauseCircleOutlined
+    return <Icon className='font14' />
+  }
+
+  renderTransfers = () => {
+    return (
+      <div className='transports-content overscroll-y'>
+        {
+          this.getTransferList().map((t, i) => {
+            const { id } = t
+            return (
+              <Transport
+                transfer={t}
+                key={id + ':tr:' + i}
+              />
+            )
+          })
+        }
+      </div>
+    )
+  }
+
+  renderFilters = () => {
+    const groups = this.getGroups()
+    const all = [
+      {
+        id: 'all',
+        title: 'All'
+      },
+      ...groups
+    ]
+    return (
+      <div>
+        <Select
+          value={this.state.filter}
+          onChange={this.handleFilter}
+          popupMatchSelectWidth={false}
+        >
+          {
+            all.map(item => {
+              return (
+                <Option
+                  key={item.id}
+                  value={item.id}
+                >
+                  {item.title}
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </div>
+    )
+  }
+
+  render () {
+    return (
+      <div className='pd1t'>
+        <div className='transports-wrap-side fix pd1y'>
+          <div
+            className='fleft'
+          >
+            {
+              this.renderFilters()
+            }
+          </div>
+          <div className='fright'>
+            <span
+              className='pointer'
+              onClick={this.handlePauseOrResumeAll}
+            >
+              {this.renderTransportIcon()} {this.computePercent()}%({this.computeLeftTime()})
+              <span className='mg1x'>
+                [{this.getCurrentTransports().length} / {this.getTransferList().length}]
+              </span>
+            </span>
+            <span
+              className='color-red pointer'
+              onClick={this.handleCancelAll}
+            >
+              {e('cancelAll')}
+            </span>
+          </div>
+        </div>
+        {this.renderTransfers()}
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Component } from '../common/react-subx'
+import {
+  SwapOutlined
+} from '@ant-design/icons'
+import {
+  Badge,
+  Popover
+} from 'antd'
+import TransferModal from './transfer-modal'
+import './transfer.styl'
+
+const { prefix } = window
+const e = prefix('sftp')
+
+export default class TransferList extends Component {
+  render () {
+    const { store } = this.props
+    const {
+      fileTransfers,
+      transferHistory
+    } = store
+    if (!fileTransfers.length && !transferHistory.length) {
+      return null
+    }
+    const color = fileTransfers.some(item => item.error) ? 'red' : 'green'
+    const bdProps = {
+      count: fileTransfers.length,
+      size: 'small',
+      offset: [-10, -5],
+      color,
+      overflowCount: 99
+    }
+    return (
+      <div
+        className='control-icon-wrap'
+        title={e('fileTransfers')}
+      >
+        <Popover
+          placement='right'
+          destroyTooltipOnHide
+          overlayClassName='transfer-list-card'
+          content={<TransferModal store={store} />}
+        >
+          <Badge
+            {...bdProps}
+          >
+            <SwapOutlined
+              className='iblock font20 control-icon'
+            />
+          </Badge>
+        </Popover>
+      </div>
+    )
+  }
+}

package/client/components/sidebar/transfer-modal.jsx

@@ -0,0 +1,76 @@
+import { Component } from '../common/react-subx'
+import {
+  Tabs
+} from 'antd'
+import Transports from './transfer-list-control'
+import TransportHistory from './transfer-history-modal'
+
+const { prefix } = window
+const e = prefix('sftp')
+const t = prefix('transferHistory')
+
+export default class TransferModal extends Component {
+  renderTransfer = () => {
+    return (
+      <Transports
+        store={this.props.store}
+      />
+    )
+  }
+
+  renderHistory = () => {
+    return (
+      <TransportHistory
+        store={this.props.store}
+      />
+    )
+  }
+
+  render () {
+    const {
+      fileTransfers,
+      transferHistory,
+      transferTab,
+      handleTransferTab
+    } = this.props.store
+    if (!fileTransfers.length && !transferHistory.length) {
+      return null
+    }
+    const tabs = []
+    if (fileTransfers.length) {
+      tabs.push({
+        title: e('fileTransfers'),
+        id: 'transfer',
+        render: this.renderTransfer
+      })
+    }
+    if (transferHistory.length) {
+      tabs.push({
+        title: t('transferHistory'),
+        id: 'history',
+        render: this.renderHistory
+      })
+    }
+    const activeTab = tabs.map(d => d.id).includes(transferTab)
+      ? transferTab
+      : tabs[0].id
+    const items = tabs.map(tab => {
+      return {
+        key: tab.id,
+        label: tab.title,
+        children: tab.render()
+      }
+    })
+    return (
+      <div
+        className='pd1'
+      >
+        <Tabs
+          activeKey={activeTab}
+          onChange={handleTransferTab}
+          items={items}
+        />
+      </div>
+    )
+  }
+}

package/client/components/sidebar/transfer.styl

@@ -0,0 +1,8 @@
+@require '../../css/includes/theme-default'
+.control-icon-wrap
+  .ant-badge-count-sm
+    font-size 11px
+  .ant-badge-multiple-words
+    padding 0 3px
+.transfer-list-card
+  max-width calc(100% - 38px)

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

@@ -0,0 +1,109 @@
+/**
+ * transporter UI component
+ */
+import React from 'react'
+import Tag from '../sftp/transfer-tag'
+import {
+  CloseCircleOutlined,
+  PlayCircleOutlined,
+  PauseCircleOutlined
+} from '@ant-design/icons'
+import {
+  transportTypes
+} from '../sftp/transport-types'
+import postMessage from '../../common/post-msg'
+import './transfer.styl'
+
+const { prefix } = window
+const e = prefix('sftp')
+
+export default function Transporter (props) {
+  const {
+    fromPath,
+    toPath,
+    fromPathReal,
+    toPathReal,
+    typeTo,
+    typeFrom,
+    percent,
+    speed,
+    pausing = false,
+    leftTime,
+    passedTime,
+    error,
+    inited,
+    id
+  } = props.transfer
+  function cancel () {
+    postMessage({
+      action: transportTypes.cancelTransport,
+      id
+    })
+  }
+  function handlePauseOrResume () {
+    postMessage({
+      action: transportTypes.pauseOrResumeTransfer,
+      id
+    })
+  }
+  const isTransfer = typeTo !== typeFrom
+  const Icon = !pausing ? PauseCircleOutlined : PlayCircleOutlined
+  const pauseTitle = pausing ? e('resume') : e('pause')
+  const cls = 'sftp-transport mg1b pd1x'
+  const typeFromTitle = e(typeFrom)
+  const typeToTitle = e(typeTo)
+  const title = `${typeFromTitle}→${typeToTitle}: ${fromPath} -> ${toPath} ${speed || ''} ${percent || 0}%`
+  const cancelIcon = (
+    <CloseCircleOutlined
+      className='transfer-control-icon pointer hover-black font14'
+      onClick={cancel}
+      title={e('cancel')}
+    />
+  )
+  const controlIcon = isTransfer
+    ? (
+      <Icon
+        className='flex-child transfer-control-icon pointer hover-black font14'
+        onClick={handlePauseOrResume}
+        title={pauseTitle}
+      />
+      )
+    : null
+  return (
+    <div className={cls} title={title} id={`transfer-unit-${id}`}>
+      <Tag
+        transfer={{
+          typeTo,
+          typeFrom,
+          error,
+          inited
+        }}
+      />
+      <span
+        className='flex-child sftp-file sftp-local-file elli'
+        title={fromPath}
+      >{fromPathReal || fromPath}
+      </span>
+      <span className='flex-child sftp-transfer-arrow'>
+        →
+      </span>
+      <span
+        className='flex-child sftp-file sftp-remote-file elli'
+      >{toPathReal || toPath}
+      </span>
+      <span
+        className='flex-child sftp-file-percent'
+      >
+        {percent || 0}%
+        {speed ? `(${speed})` : null}
+      </span>
+      <span
+        className='flex-child sftp-file-percent'
+      >
+        {passedTime || '-'}|{leftTime || '-'}
+      </span>
+      {controlIcon}
+      {cancelIcon}
+    </div>
+  )
+}