@electerm/electerm-react 1.34.30

package/client/components/sftp/sftp.styl

@@ -0,0 +1,217 @@
+@require '../../css/includes/theme-default'
+// .sftp-wrap
+//   .ant-spin-container
+//   .ant-spin-nested-loading
+//     filter none
+.sftp-section
+  position absolute
+.sftp-title-wrap
+  position relative
+.sftp-item
+  position relative
+  z-index 3
+  padding 0
+  line-height 26px
+  height 32px
+  user-select none
+  margin-bottom 4px
+  &:nth-child(even)
+    .sftp-file-prop
+      background main
+  &:hover
+    .sftp-file-prop
+      background-color primary
+      color contrastColor(primary)
+  &.selected
+    .sftp-file-prop
+      background-color darken(primary, 30%)
+      color contrastColor(primary)
+.sftp-history
+  position absolute
+  left 0
+  top 100%
+  right 0
+  z-index 30
+  box-shadow none
+  border none
+  height 0
+  background main
+  overflow hidden
+  border-radius 3px
+  &.focused
+    height auto
+    border 1px solid main-dark
+    box-shadow 0px 0px 3px 3px alpha(main, .05)
+
+.sftp-history-item
+  padding 5px 10px
+  cursor pointer
+  border-bottom 1px solid primary
+  &:hover
+    background main-dark
+
+.sftp-item-title
+  width 100%
+.sftp-item-title
+    width 75%
+.sftp-item-size
+  width 24%
+.sftp-status-success
+  color success
+.sftp-status-exception
+  color error
+.sftp-status-active
+  color primary
+
+.virtual-file
+  .sftp-item
+    position absolute
+    left 0
+    right 0
+    bottom 0
+    top 0
+    z-index 1
+    height 100%
+    opacity 0
+    padding 0
+    margin 0
+
+.file-icon
+  position absolute
+  left 10px
+  top 10px
+  font-size 50px
+.file-props
+  margin-left 70px
+
+.opacity-loop
+  opacity 0.3
+  animation blinker 5s linear infinite
+
+@keyframes blinker
+  50%
+    opacity .8
+
+.sftp-sort-btn
+  color text
+  &.active
+    font-weight bold
+    color text-light
+
+//list table
+.sftp-file-prop
+  height 32px
+  line-height 30px
+  position absolute
+  left 0
+  width 100px
+  padding 0 5px
+  background main
+  overflow hidden
+  white-space nowrap
+  text-overflow ellipsis
+  pointer-events none
+  cursor default
+  z-index 4
+  color text
+  &:last-child
+    right 0 !important
+    width auto !important
+.file-bg
+  position absolute
+  left 0
+  top 0
+  right 0
+  height 32px
+  z-index 3
+
+.sftp-header-item
+  height 28px
+  line-height 25px
+  position absolute
+  left 0
+  width 100px
+  border 1px solid main
+  border-right none
+  padding 0 5px
+  background main
+  overflow hidden
+  white-space nowrap
+  text-overflow ellipsis
+  color text
+  &:last-child
+    border-right 1px solid main
+    right 0 !important
+    width auto !important
+  &.desc
+    background linear-gradient(to bottom, main-dark 0%,main-light 100%)
+  &.asc
+    background linear-gradient(to bottom, main-light 0%,main-dark 100%)
+.sftp-header-handle
+  z-index 20
+  cursor ew-resize
+  border none
+  background none
+.sftp-file-table-header
+  height 30px
+.sftp-table
+  z-index 2
+  &:hover
+    ::-webkit-scrollbar
+      width 12px
+// .sftp-table-content
+//   overflow-x hidden
+//   ::-webkit-scrollbar
+//     width 7px
+//     background alpha(main, .5)
+
+//   ::-webkit-scrollbar-track
+//     -webkit-box-shadow none
+
+//   ::-webkit-scrollbar-thumb
+//     background-color primary
+//     outline none
+.sftp-item
+  &.sftp-dragover
+    .sftp-file-prop
+      background primary !important
+      color text-light !important
+  &.sftp-dragover-multi
+    &:after
+    &:before
+      position absolute
+      left 2px
+      top 2px
+      width 100%
+      height 100%
+      background main-light
+      content ''
+      z-index -1
+    &:after
+      left 4px
+      top 4px
+.icon-holder
+  width 1em
+  display inline-block
+.symbolic-link-icon
+  margin-right 2px
+
+//sftp
+.sftp-panel
+  background main
+  color text
+
+.file-list
+  // &::-webkit-scrollbar
+  //   width 1em
+  //   background main
+
+  // &::-webkit-scrollbar-track
+  //   -webkit-box-shadow inset 0 0 6px alpha(main, .1)
+
+  ::-webkit-scrollbar-thumb
+    background-color primary !important
+
+.pager-wrap
+  z-index 4
+  position relative

package/client/components/sftp/transfer-common.js

@@ -0,0 +1,9 @@
+import createTitle from '../../common/create-title'
+
+export function createTransferProps (props) {
+  return {
+    title: createTitle(props.tab),
+    tabId: props.tab.id,
+    sessionId: props.sessionId
+  }
+}

package/client/components/sftp/transfer-conflict.jsx

@@ -0,0 +1,315 @@
+/**
+ * pass transfer list from props
+ * when list changes, do transfer and other op
+ */
+
+import { useRef } from 'react'
+import { useDelta, useConditionalEffect } from 'react-delta'
+import { maxTransport, typeMap } from '../../common/constants'
+import { getLocalFileInfo, getRemoteFileInfo, getFolderFromFilePath, getFileExt } from './file-read'
+import copy from 'json-deep-copy'
+import { findIndex, find } from 'lodash-es'
+import generate from '../../common/uid'
+import resolve from '../../common/resolve'
+import eq from 'fast-deep-equal'
+import { createTransferProps } from './transfer-common'
+
+export default (props) => {
+  const { transferList } = props
+  const delta = useDelta(transferList)
+  const currentId = useRef('')
+  const timer = useRef(null)
+  const onConfirm = useRef(false)
+  const ref = {}
+
+  ref.localCheckExist = (path) => {
+    return getLocalFileInfo(path)
+  }
+
+  ref.remoteCheckExist = (path) => {
+    const { sftp } = props
+    return getRemoteFileInfo(sftp, path)
+      .then(r => r)
+      .catch(() => false)
+  }
+
+  const checkExist = (type, path) => {
+    return ref[type + 'CheckExist'](path)
+  }
+
+  function rename (tr, action, _renameId) {
+    const isRemote = tr.typeTo === typeMap.remote
+    const { path, name } = getFolderFromFilePath(tr.toPath, isRemote)
+    const { base, ext } = getFileExt(name)
+    const renameId = _renameId || generate()
+    const newName = ext
+      ? `${base}(rename-${renameId}).${ext}`
+      : `${base}(rename-${renameId})`
+    const res = {
+      ...tr,
+      renameId,
+      newName,
+      oldName: base,
+      toPath: resolve(path, newName)
+    }
+    if (action) {
+      res.action = action
+    }
+    return res
+  }
+
+  function updateTransferAction (data) {
+    const {
+      id,
+      action,
+      transfer
+    } = data
+    const {
+      fromFile
+    } = transfer
+    clear()
+    props.modifier((old) => {
+      let transferList = copy(old.transferList)
+      const index = findIndex(transferList, d => d.id === id)
+      if (index < 0) {
+        return {
+          transferList
+        }
+      }
+      transferList[index].fromFile = fromFile
+      transferList[index].action = action
+      if (action === 'skip') {
+        transferList.splice(index, 1)
+      } else if (action === 'cancel') {
+        transferList = transferList.slice(0, index)
+      }
+      if (action.includes('All')) {
+        transferList = transferList.map((t, i) => {
+          if (i < index) {
+            return t
+          }
+          return {
+            ...t,
+            action: action.replace('All', '')
+          }
+        })
+      }
+      if (action.includes('rename')) {
+        transferList[index] = rename(transferList[index])
+      } else if (action === 'skipAll') {
+        transferList.splice(index, 1)
+      }
+      window.store.setTransfers(transferList)
+      return {
+        transferList
+      }
+    })
+  }
+
+  function tagTransferError (id, errorMsg) {
+    const tr = find(transferList, d => d.id === id)
+    window.store.addTransferHistory({
+      ...tr,
+      host: props.host,
+      error: errorMsg,
+      finishTime: Date.now()
+    })
+    props.modifier(old => {
+      const transferList = copy(old.transferList)
+      const index = findIndex(transferList, d => d.id === id)
+      if (index >= 0) {
+        transferList.splice(index, 1)
+      }
+      window.store.setTransfers(transferList)
+      return {
+        transferList
+      }
+    })
+  }
+
+  function setConflict (tr) {
+    if (props.transferToConfirm) {
+      return
+    }
+    props.modifier({
+      transferToConfirm: tr
+    })
+  }
+
+  function onDecision (event) {
+    if (event && event.data && event.data.id === currentId.current) {
+      // const {
+      //   transferGroupId,
+      //   fileId,
+      //   id,
+      //   action
+      // } = event.data
+      currentId.current = ''
+      updateTransferAction(event.data)
+      onConfirm.current = false
+      window.removeEventListener('message', onDecision)
+    }
+  }
+
+  function waitForSignal () {
+    window.addEventListener('message', onDecision)
+  }
+
+  function setCanTransfer (fromFile, tr) {
+    clear()
+    props.modifier((old) => {
+      const transferList = copy(old.transferList)
+      const index = findIndex(transferList, t => {
+        return t.id === tr.id
+      })
+      if (index >= 0) {
+        const up = {
+          action: 'transfer',
+          fromFile
+        }
+        Object.assign(transferList[index], up)
+      }
+      window.store.setTransfers(transferList)
+      return {
+        transferList
+      }
+    })
+  }
+
+  async function expand (fromFile, tr) {
+    let list = []
+    if (!tr.skipExpand) {
+      const { type } = fromFile
+      list = await props[type + 'List'](
+        true, tr.fromPath
+      )
+      list = list.map(t => {
+        return {
+          typeFrom: tr.typeFrom,
+          typeTo: tr.typeTo,
+          fromPath: resolve(t.path, t.name),
+          toPath: resolve(tr.toPath, t.name),
+          id: generate(),
+          ...createTransferProps(props),
+          parentId: tr.id
+        }
+      })
+    }
+    clear()
+    props.modifier((old) => {
+      const transferList = copy(old.transferList)
+      const index = findIndex(transferList, t => {
+        return t.id === tr.id
+      })
+      transferList.splice(index + 1, 0, ...list)
+      if (transferList[index]) {
+        transferList[index].expanded = true
+      }
+      window.store.setTransfers(transferList)
+      return {
+        transferList
+      }
+    })
+  }
+
+  function clear () {
+    currentId.current = ''
+  }
+  async function watchFile () {
+    if (!transferList.length && currentId.current) {
+      return clear()
+    }
+    const tr = transferList
+      .filter(t => {
+        return (
+          !t.action ||
+          !t.fromFile ||
+          (t.fromFile.isDirectory && !t.expanded)
+        )
+      })[0]
+    if (!tr) {
+      onConfirm.current = false
+      return clear()
+    }
+    if (currentId.current) {
+      return null
+    }
+    currentId.current = tr.id
+    const {
+      typeFrom,
+      typeTo,
+      fromPath,
+      toPath,
+      id,
+      action,
+      expanded,
+      renameId,
+      parentId,
+      skipConfirm
+    } = tr
+    const fromFile = tr.fromFile
+      ? tr.fromFile
+      : await checkExist(typeFrom, fromPath)
+    if (!fromFile) {
+      currentId.current = ''
+      return tagTransferError(id, 'file not exist')
+    }
+    let toFile = false
+    if (renameId || parentId) {
+      toFile = false
+    } else if (fromPath === toPath && typeFrom === typeTo) {
+      toFile = true
+    } else {
+      toFile = await checkExist(typeTo, toPath)
+    }
+    if (fromFile.isDirectory) {
+      tr.zip = true
+      tr.skipExpand = true
+    }
+    if (fromPath === toPath && typeFrom === typeTo) {
+      return updateTransferAction({
+        id,
+        action: 'rename',
+        transfer: {
+          ...tr,
+          operation: 'cp',
+          fromFile
+        }
+      })
+    } else if (toFile && !action && !skipConfirm) {
+      waitForSignal(id)
+      if (!onConfirm.current) {
+        onConfirm.current = true
+        return setConflict({
+          ...tr,
+          fromFile,
+          toFile
+        })
+      }
+    } else if (toFile && !tr.fromFile && action) {
+      return updateTransferAction({
+        id,
+        action,
+        transfer: {
+          ...tr,
+          fromFile
+        }
+      })
+    } else if (
+      fromFile.isDirectory &&
+      !expanded &&
+      typeFrom !== typeTo &&
+      transferList.filter(t => t.fromFile).length < maxTransport
+    ) {
+      return expand(fromFile, tr)
+    }
+    setCanTransfer(fromFile, tr)
+  }
+  useConditionalEffect(() => {
+    watchFile()
+    return () => {
+      clearTimeout(timer.current)
+    }
+  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  return null
+}

package/client/components/sftp/transfer-speed-format.js

@@ -0,0 +1,60 @@
+/**
+ * format transfer speed
+ */
+
+const m1 = 1000 * 1000
+const k1 = 1000
+const sec = 1000
+const minute = sec * 60
+const hour = minute * 60
+const day = hour * 24
+const month = day * 30
+
+export default (bytes, startTime) => {
+  let now = Date.now()
+  if (now <= startTime) {
+    now = startTime + 1
+  }
+  const speed = bytes / ((now - startTime) / 1000)
+  if (speed > m1) {
+    return (speed / m1).toFixed(1) + 'MB/s'
+  } else {
+    return (speed / k1).toFixed(1) + 'KB/s'
+  }
+}
+
+function formatTime (ms) {
+  const d = Math.floor(ms / day)
+  const h = Math.floor((ms - d * day) / hour)
+  const m = Math.floor((ms - d * day - h * hour) / minute)
+  const s = Math.floor((ms - d * day - h * hour - m * minute) / sec)
+  if (ms > month) {
+    return '>30d'
+  } else if (ms > day) {
+    return `${d}d ${h}:${m}:${s}`
+  } else if (ms > hour) {
+    return `${h}:${m}:${s}`
+  } else if (ms > minute) {
+    return `${m}:${s}`
+  } else {
+    return Math.floor(ms / 1000) + 's'
+  }
+}
+
+export const computePassedTime = (startTime) => {
+  const allTimeNeed = (Date.now()) - startTime
+  return formatTime(allTimeNeed)
+}
+
+export const computeLeftTime = (bytes, total, startTime) => {
+  let now = Date.now()
+  if (now <= startTime) {
+    now = startTime + 1
+  }
+  const speed = bytes / (now - startTime)
+  const allTimeNeed = (total - bytes) / speed
+  return {
+    leftTime: formatTime(allTimeNeed),
+    leftTimeInt: allTimeNeed
+  }
+}

package/client/components/sftp/transfer-tag.jsx

@@ -0,0 +1,40 @@
+/**
+ * Transfer tag
+ * @param {object} props
+ */
+
+import './transfer-tag.styl'
+const { prefix } = window
+const e = prefix('sftp')
+
+export default function TransferTag (props) {
+  const {
+    typeTo,
+    typeFrom,
+    error,
+    inited
+  } = props.transfer
+  let tagStatus = inited ? 'started' : 'init'
+  if (error) {
+    tagStatus = 'error'
+  }
+  const typeFromTitle = e(typeFrom)
+  const typeToTitle = e(typeTo)
+  const title = error
+    ? `error: ${error}`
+    : ''
+  return (
+    <span className={'flex-child transfer-tag transfer-status-' + tagStatus} title={title}>
+      <span className='sftp-transfer-type'>
+        {typeFromTitle}
+      </span>
+      <span className='sftp-transfer-arrow'>
+        →
+      </span>
+      <span className='sftp-transfer-type'>
+        {typeToTitle}
+      </span>
+      <span className='mg1l'>[{title}]</span>
+    </span>
+  )
+}

package/client/components/sftp/transfer-tag.styl

@@ -0,0 +1,11 @@
+@require '../../css/includes/theme-default'
+.transfer-tag
+  color text
+  border-radius 2px
+  padding 0 2px
+.transfer-status-init
+  color primary
+.transfer-status-started
+  color success
+.transfer-status-error
+  color error

package/client/components/sftp/transfer.styl

@@ -0,0 +1,55 @@
+@require '../../css/includes/theme-default'
+.transports-wrap
+  position absolute
+  left 60px
+  top 3px
+  right 60px
+  height 36px
+  color text
+.transports-circle-wrap
+  text-align center
+  position relative
+  z-index 10
+.transports-dd
+  position absolute
+  left 0
+  right 0
+  overflow-y scroll
+  z-index 11
+  background main
+  box-shadow 0px 0px 3px 3px alpha(main, .5)
+.transports-wrap
+  .transports-dd
+    display none
+  &:hover .transports-dd
+    display block
+
+.transports-title
+  border-bottom 1px solid primary
+  padding 10px 15px
+.transports-content
+  max-height 200px
+  padding 10px 0
+.sftp-transport
+  display flex
+  padding 8px 5px
+  &:hover
+    background main-dark
+.sftp-transport .transfer-control-icon:hover
+  color primary
+.transports-count
+  color text
+// .sftp-file
+//   flex-grow 1
+// .sftp-file-percent
+//   width 100px
+// .transfer-tag
+//   width 200px
+// .transfer-control-icon
+//   width 20px
+.flex-child + .flex-child
+  margin-left 5px
+  flex-grow 1
+.transfer-control-icon
+  margin-right 3px
+  margin-top 3px