@electerm/electerm-react 1.34.30

package/client/components/sftp/file-mode-modal.jsx

@@ -0,0 +1,205 @@
+/**
+ * file props
+ */
+
+import React from 'react'
+import { Modal, Button } from 'antd'
+import resolve from '../../common/resolve'
+import time from '../../../app/common/time'
+import { findIndex, update } from 'lodash-es'
+import { mode2permission, permission2mode } from '../../common/mode2permission'
+import { commonActions } from '../../common/constants'
+import renderPermission from './permission-render'
+import postMessage from '../../common/post-msg'
+import FileIcon from './file-icon'
+
+const { prefix } = window
+const e = prefix('sftp')
+const formatTime = time
+
+export default class FileMode extends React.PureComponent {
+  state = {
+    data: {},
+    file: {}
+  }
+
+  componentDidMount () {
+    window.addEventListener('message', this.onEvent)
+  }
+
+  setStateProxy = (state, cb) => {
+    if (state && typeof state.file !== 'undefined') {
+      postMessage({
+        action: commonActions.updateStore,
+        value: !!state.file.id,
+        prop: 'showFileModal'
+      })
+    }
+    return this.setState(state, cb)
+  }
+
+  onEvent = (e) => {
+    const {
+      action,
+      data,
+      file
+    } = e.data || {}
+    if (action === commonActions.showFileModeModal) {
+      this.setStateProxy({
+        data,
+        file
+      })
+    }
+  }
+
+  addPermission = file => {
+    const perms = mode2permission(file.mode)
+    const permission = permission2mode(perms)
+    const mode = Number('0o' + '10' + permission)
+    return {
+      ...file,
+      permission,
+      mode
+    }
+  }
+
+  onChangePermission = (name, permName) => {
+    const { file } = this.state
+    const perms = mode2permission(file.mode)
+    const i = findIndex(perms, p => p.name === name)
+    update(
+      perms,
+      `[${i}].permission.${permName}`,
+      b => !b
+    )
+    const permission = permission2mode(perms)
+    const mode = Number('0o' + '10' + permission)
+    this.setStateProxy({
+      file: {
+        ...file,
+        permission,
+        mode
+      }
+    })
+  }
+
+  onClose = () => {
+    this.setStateProxy({
+      file: {},
+      data: {}
+    })
+  }
+
+  handleSubmit = () => {
+    postMessage({
+      action: commonActions.submitFileModeEdit,
+      file: this.state.file
+    })
+    this.onClose()
+  }
+
+  renderFooter () {
+    return (
+      <Button
+        type='primary'
+        onClick={this.handleSubmit}
+      >
+        {e('submit')}
+      </Button>
+    )
+  }
+
+  render () {
+    const {
+      visible,
+      tab,
+      uidTree,
+      gidTree
+    } = this.state.data
+    if (!visible) {
+      return null
+    }
+    const { file } = this.state
+    const {
+      name,
+      size,
+      accessTime,
+      modifyTime,
+      isDirectory,
+      isSymbolicLink,
+      path,
+      mode,
+      type,
+      owner,
+      group
+    } = file
+    const {
+      host,
+      port,
+      username
+    } = tab
+    const iconType = isDirectory ? 'folder' : 'file'
+    const ps = {
+      open: visible,
+      width: 500,
+      title: `${e('edit')} ` + e(iconType) + ` ${e('permission')}`,
+      footer: this.renderFooter(),
+      onCancel: this.onClose
+    }
+    const fp = resolve(path, name)
+    const ffp = type === 'local'
+      ? fp
+      : `${username}@${host}:${port}:${fp}`
+
+    const perms = mode2permission(mode)
+    const permission = permission2mode(perms)
+
+    return (
+      <Modal
+        {...ps}
+      >
+        <div className='file-props-wrap relative'>
+          <FileIcon
+            className='file-icon'
+            file={file}
+            height={50}
+          />
+          <div className='file-props'>
+            <p className='bold'>{e(iconType)} {e('name')}:</p>
+            <p className='pd1b'>
+              {
+                isSymbolicLink
+                  ? <sup className='color-blue symbolic-link-icon'>*</sup>
+                  : null
+              }
+              {name}
+            </p>
+            <p className='bold'>{e('mode')}: ({permission})</p>
+            <div className='pd1b'>
+              {
+                perms.map((perm) => {
+                  return renderPermission(
+                    perm,
+                    this.onChangePermission
+                  )
+                })
+              }
+            </div>
+            <p className='bold'>{e('fullPath')}:</p>
+            <p className='pd1b'>{ffp}</p>
+            <p className='bold'>{e('owner')}</p>
+            <p className='pd1b'>{uidTree['' + owner]}</p>
+            <p className='bold'>{e('group')}</p>
+            <p className='pd1b'>{gidTree['' + group]}</p>
+            <p className='bold'>{e('size')}:</p>
+            <p className='pd1b'>{size}</p>
+            <p className='bold'>{e('accessTime')}:</p>
+            <p className='pd1b'>{formatTime(accessTime)}</p>
+            <p className='bold'>{e('modifyTime')}:</p>
+            <p className='pd1b'>{formatTime(modifyTime)}</p>
+          </div>
+        </div>
+      </Modal>
+    )
+  }
+}

package/client/components/sftp/file-props-modal.jsx

@@ -0,0 +1,211 @@
+/**
+ * file props
+ */
+
+import { useState, useEffect } from 'react'
+import {
+  Modal,
+  Button
+} from 'antd'
+import {
+  commonActions,
+  isWin,
+  typeMap
+} from '../../common/constants'
+import resolve from '../../common/resolve'
+import { mode2permission } from '../../common/mode2permission'
+import time from '../../../app/common/time'
+import renderPermission from './permission-render'
+import FileIcon from './file-icon'
+import fs from '../../common/fs'
+import postMsg from '../../common/post-msg'
+import { filesize } from 'filesize'
+import { runCmd } from '../terminal/terminal-apis'
+
+const { prefix } = window
+const e = prefix('sftp')
+const formatTime = time
+
+export default function FileInfoModal () {
+  const [state, setState] = useState({
+    loading: false
+  })
+  function onClose () {
+    setState({})
+  }
+  function onEvent (e) {
+    const {
+      action,
+      data
+    } = e.data || {}
+    if (action === commonActions.showFileInfoModal) {
+      setState(old => {
+        return {
+          ...old,
+          ...data,
+          size: 0
+        }
+      })
+    }
+  }
+  useEffect(() => {
+    window.addEventListener('message', onEvent)
+  }, [])
+  useEffect(() => {
+    postMsg({
+      action: commonActions.updateStore,
+      value: !!state.visible,
+      prop: 'showEditor'
+    })
+  }, [state.visible])
+  const {
+    visible,
+    file,
+    tab,
+    uidTree = {},
+    gidTree = {},
+    loading
+  } = state
+  if (!visible) {
+    return null
+  }
+  const {
+    name,
+    size,
+    owner,
+    group,
+    accessTime,
+    modifyTime,
+    isDirectory,
+    isSymbolicLink,
+    path,
+    mode,
+    type
+  } = file
+  const {
+    host,
+    port,
+    username
+  } = tab
+  const iconType = isDirectory ? 'folder' : 'file'
+  const ps = {
+    open: visible,
+    width: 500,
+    title: e(iconType) + ` ${e('attributes')}`,
+    footer: null,
+    onCancel: onClose
+  }
+  const fp = resolve(path, name)
+  const ffp = type === typeMap.local
+    ? fp
+    : `${username}@${host}:${port}:${fp}`
+  const perms = mode2permission(mode)
+  function setLoading (loading) {
+    setState(old => {
+      return {
+        ...old,
+        loading
+      }
+    })
+  }
+  function renderSize () {
+    if (isDirectory) {
+      return state.size || 0
+    }
+    return size
+  }
+  function getSize (str = '') {
+    if (isWin) {
+      const s = str.split('\n').find(s => s.trim().startsWith('Sum'))
+      return s ? filesize(parseInt((s.split(':')[1]).trim(), 10)) : 0
+    } else {
+      return str.split(/\s+/)[0]
+    }
+  }
+  async function calcLocal (folder) {
+    const cmd = isWin
+      ? `Get-ChildItem -Recurse '${folder}' | Measure-Object -Property Length -Sum`
+      : `du -sh '${folder}'`
+    const func = isWin ? 'runWinCmd' : 'run'
+    const res = await fs[func](cmd).catch(window.store.onError)
+    return getSize(res)
+  }
+  async function calcRemote (folder) {
+    const cmd = `du -sh '${folder}'`
+    const r = await runCmd(
+      state.pid,
+      state.sessionId,
+      cmd
+    ).catch(window.store.onError)
+    return r ? r.split(/\s+/)[0] : 0
+  }
+  async function calc () {
+    setLoading(true)
+    const size = type === typeMap.local
+      ? await calcLocal(fp)
+      : await calcRemote(fp)
+    setState(old => {
+      return {
+        ...old,
+        loading: false,
+        size
+      }
+    })
+  }
+  function renderCalc () {
+    if (isDirectory) {
+      return (
+        <Button
+          onClick={calc}
+          loading={loading}
+          disabled={loading}
+          className='mg1l'
+        >
+          {e('calculate')}
+        </Button>
+      )
+    }
+  }
+  return (
+    <Modal
+      {...ps}
+    >
+      <div className='file-props-wrap relative'>
+        <FileIcon
+          className='file-icon'
+          file={file}
+          height={50}
+        />
+        <div className='file-props'>
+          <p className='bold'>{e(iconType)} {e('name')}:</p>
+          <p className='pd1b'>
+            {
+              isSymbolicLink
+                ? <sup className='color-blue symbolic-link-icon'>*</sup>
+                : null
+            }
+            {name}
+          </p>
+          <p className='bold'>{e('fullPath')}:</p>
+          <p className='pd1b'>{ffp}</p>
+          <p className='bold'>{e('size')}:</p>
+          <p className='pd1b'>{renderSize()}{renderCalc()}</p>
+          <p className='bold'>{e('accessTime')}:</p>
+          <p className='pd1b'>{formatTime(accessTime)}</p>
+          <p className='bold'>{e('modifyTime')}:</p>
+          <p className='pd1b'>{formatTime(modifyTime)}</p>
+          <p className='bold'>{e('owner')}</p>
+          <p className='pd1b'>{uidTree['' + owner]}</p>
+          <p className='bold'>{e('group')}</p>
+          <p className='pd1b'>{gidTree['' + group]}</p>
+          <p className='bold'>{e('mode')}:</p>
+          <div className='pd1b'>
+            {
+              perms.map(renderPermission)
+            }
+          </div>
+        </div>
+      </div>
+    </Modal>
+  )
+}

package/client/components/sftp/file-read.js

@@ -0,0 +1,81 @@
+/**
+ * file info related functions
+ */
+
+import generate from '../../common/uid'
+import fs from '../../common/fs'
+import { isWin } from '../../common/constants'
+
+export const getFileExt = fileName => {
+  const sep = '.'
+  const arr = fileName.split(sep)
+  const len = arr.length
+  if (len === 1) {
+    return {
+      base: fileName,
+      ext: ''
+    }
+  }
+  return {
+    base: arr.slice(0, len - 1).join(sep),
+    ext: arr[len - 1] || ''
+  }
+}
+
+export const getFolderFromFilePath = (filePath, isRemote) => {
+  const sep = isRemote ? '/' : window.pre.sep
+  const arr = filePath.split(sep)
+  const len = arr.length
+  const isWinDisk = isWin && filePath.endsWith(sep)
+  const path = isWinDisk
+    ? '/'
+    : arr.slice(0, len - 1).join(sep)
+  const name = isWinDisk
+    ? filePath.replace(sep, '')
+    : arr[len - 1]
+
+  return {
+    path,
+    name,
+    ...getFileExt(name)
+  }
+}
+
+export const getLocalFileInfo = async (filePath) => {
+  try {
+    const statr = await fs.statAsync(filePath)
+    const stat = await fs.lstatAsync(filePath)
+    return {
+      size: stat.size,
+      accessTime: stat.atime,
+      modifyTime: stat.mtime,
+      mode: stat.mode,
+      owner: stat.uid,
+      group: stat.gid,
+      type: 'local',
+      ...getFolderFromFilePath(filePath, false),
+      id: generate(),
+      isDirectory: statr.isDirectory,
+      isSymbolicLink: stat.isSymbolicLink
+    }
+  } catch (e) {
+    log.debug(e)
+    return null
+  }
+}
+
+export const getRemoteFileInfo = async (sftp, filePath) => {
+  const stat = await sftp.stat(filePath)
+  return {
+    size: stat.size,
+    accessTime: stat.atime,
+    modifyTime: stat.mtime,
+    mode: stat.mode,
+    group: stat.gid,
+    owner: stat.uid,
+    type: 'remote',
+    ...getFolderFromFilePath(filePath, true),
+    id: generate(),
+    isDirectory: stat.isDirectory
+  }
+}