@electerm/electerm-react 5.3.15 → 5.5.6

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

@@ -1,121 +0,0 @@
-/**
- * network info
- */
-
-import { Table } from 'antd'
-import { isEmpty } from 'lodash-es'
-import { useEffect, useState } from 'react'
-import { filesize } from 'filesize'
-import copy from 'json-deep-copy'
-import { ApiOutlined } from '@ant-design/icons'
-
-export default function TerminalInfoDisk (props) {
-  const { network, isRemote, terminalInfos } = props
-  if (isEmpty(network) || !isRemote || !terminalInfos.includes('network')) {
-    return null
-  }
-  const [state, setter] = useState({
-    network: props.network,
-    time: Date.now()
-  })
-  function setState (ext) {
-    setter(s => {
-      return Object.assign({}, s, ext)
-    })
-  }
-  function updateTraffic () {
-    const network = copy(props.network)
-    const keys = Object.keys(network)
-    const net = copy(state.network)
-    const now = Date.now()
-    const { time } = state
-    const diff = (now - time) / 1000
-    for (const k of keys) {
-      const p = network[k]
-      const pv = net[k]
-      if (
-        diff > 0 &&
-        p &&
-        pv &&
-        p.download &&
-        pv.download &&
-        p.download > pv.download
-      ) {
-        p.down = Math.floor((p.download - pv.download) / diff)
-      }
-      if (
-        diff > 0 &&
-        p &&
-        pv &&
-        p.upload &&
-        pv.upload &&
-        p.upload > pv.upload
-      ) {
-        p.up = Math.floor((p.upload - pv.upload) / diff)
-      }
-    }
-    setState({
-      network,
-      time: now
-    })
-  }
-  useEffect(() => {
-    updateTraffic()
-  }, [props.network])
-  if (isEmpty(state)) {
-    return null
-  }
-  const arr = Object.keys(state.network).map(k => {
-    return {
-      name: k,
-      ...state.network[k]
-    }
-  }).sort((a, b) => {
-    const ai = a.name.startsWith('eth') ? 100 : 10
-    const bi = b.name.startsWith('eth') ? 100 : 10
-    if (ai !== bi) {
-      return bi - ai
-    }
-    return a.name > b.name ? 1 : -1
-  })
-  const map = {
-    up: '↑',
-    down: '↓',
-    name: 'name',
-    ip: 'ipv4'
-  }
-  const col = ['name', 'ip', 'up', 'down'].map((k, i) => {
-    return {
-      title: map[k],
-      dataIndex: k,
-      key: k,
-      sorter: (a, b) => {
-        return a[k] > b[k] ? 1 : -1
-      },
-      render: (v) => {
-        if (k === 'up' || k === 'down') {
-          return filesize(Number.isFinite(v) ? v : 0)
-        }
-        return v
-      }
-    }
-  })
-  const ps = {
-    rowKey: 'name',
-    dataSource: arr,
-    bordered: true,
-    size: 'small',
-    columns: col,
-    pagination: false,
-    scroll: {
-      y: 180,
-      x: 'max-content'
-    }
-  }
-  return (
-    <div className='terminal-info-section terminal-info-network'>
-      <div className='pd1y bold'><ApiOutlined /> Network</div>
-      <Table {...ps} />
-    </div>
-  )
-}

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

@@ -1,99 +0,0 @@
-/**
- * cpu/swap/mem general usage
- */
-
-import { isEmpty } from 'lodash-es'
-import { Progress } from 'antd'
-import parseInt10 from '../../common/parse-int10'
-
-function toNumber (n = '') {
-  let f = 1
-  if (n.includes('G')) {
-    f = 1024 * 1024
-  } else if (n.includes('T')) {
-    f = 1024 * 1024 * 1024
-  } else if (n.includes('M')) {
-    f = 1024
-  }
-  return f * parseFloat(n)
-}
-
-function computePercent (used, total) {
-  const u = toNumber(used)
-  const t = toNumber(total)
-  return Math.floor(u * 100 / (t || (u + 1)))
-}
-
-export default function TerminalInfoResource (props) {
-  const { cpu, mem, swap, isRemote, terminalInfos } = props
-  if (
-    !isRemote ||
-    (!terminalInfos.includes('cpu') &&
-    !terminalInfos.includes('mem') &&
-    !terminalInfos.includes('swap'))
-  ) {
-    return null
-  }
-  function getColorForPercent (percent) {
-    if (percent >= 90) return '#ff4d4f'
-    if (percent >= 70) return '#faad14'
-    if (percent >= 50) return '#1890ff'
-    return '#52c41a'
-  }
-
-  function renderItem (obj) {
-    if (isEmpty(obj)) {
-      return <div className='pd1b' key={obj.name}>NA</div>
-    }
-    const {
-      used,
-      total,
-      percent,
-      name
-    } = obj
-    const hasPercent = Number.isFinite(percent)
-    const p = hasPercent
-      ? percent
-      : computePercent(used, total) || 0
-    const color = getColorForPercent(p)
-    const fmt = hasPercent
-      ? (p) => `${name}: ${p || ''}%`
-      : (p) => `${name}: ${p || ''}%(${used || ''}/${total || ''})`
-    return (
-      <div className='pd1b' key={name}>
-        <Progress
-          style={{ width: '50%' }}
-          percent={p}
-          format={fmt}
-          strokeColor={color}
-        />
-      </div>
-    )
-  }
-  const data = []
-  if (terminalInfos.includes('cpu')) {
-    data.push({
-      name: 'cpu',
-      percent: parseInt10(cpu) || 0
-    })
-  }
-  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'>
-      {
-        data.map(renderItem)
-      }
-    </div>
-  )
-}

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

@@ -1,263 +0,0 @@
-/**
- * run command in remote terminal
- */
-
-import { runCmd } from '../terminal/terminal-apis'
-import { useEffect } from 'react'
-import wait from '../../common/wait'
-import parseInt10 from '../../common/parse-int10'
-import formatDisks from './format-disks'
-
-function formatActivities (str) {
-  if (!str) {
-    return {
-      activities: []
-    }
-  }
-  const r = str.split('\n')
-    .map(a => a.trim())
-    .filter(s => s)
-    .map(st => {
-      const arr = st.split(/ +/)
-      return {
-        pid: arr[0],
-        user: arr[1],
-        cpu: parseFloat(arr[2]),
-        mem: parseInt10(arr[3]),
-        cmd: arr.slice(4).join(' ')
-      }
-    }).filter(d => d.pid)
-  return {
-    activities: r
-  }
-}
-
-function formatSysInfo (unameStr, prettyName) {
-  if (!unameStr) {
-    return {}
-  }
-  const parts = unameStr.trim().split(/\s+/)
-  if (parts.length < 4) {
-    return {}
-  }
-  const [sysname, hostname, kernel, arch] = parts
-  let os = sysname
-  const m = (prettyName || '').match(/PRETTY_NAME="?([^"\r\n]+)"?/)
-  if (m) {
-    os = m[1].trim()
-  } else if (sysname === 'Darwin') {
-    os = 'macOS'
-  }
-  return {
-    sysInfo: {
-      os,
-      sysname,
-      hostname,
-      kernel,
-      arch
-    }
-  }
-}
-
-function formatCpu (str) {
-  if (!str) {
-    return {
-      cpu: ''
-    }
-  }
-  return {
-    cpu: str.split(' ')[1]
-  }
-}
-
-function formatMem (str) {
-  if (!str) {
-    return {}
-  }
-  const names = ['mem', 'swap']
-  return str
-    .split('\n')
-    .filter(d => d)
-    .slice(1)
-    .reduce((p, d, i) => {
-      const arr = d.split(/\s+/)
-      if (!arr[1]) {
-        return p
-      }
-      p[names[i]] = {
-        total: arr[1],
-        used: arr[2],
-        free: arr[3]
-      }
-      return p
-    }, {})
-}
-
-const ipSplitReg = /\n[\d]{1,5}:\s+/
-const ipNameReg = /inet\s+([\d]{1,3}\.[\d]{1,3}\.[\d]{1,3}\.[\d]{1,3})\/\d/
-
-function formatIps (ips) {
-  if (!ips) {
-    return {}
-  }
-  const arr = ips.split(ipSplitReg)
-  return arr.reduce((p, s) => {
-    const name = s.replace(/^[\d]{1,5}:\s+/, '').split(/:\s+/)[0]
-    const arr1 = s.match(ipNameReg)
-    return {
-      ...p,
-      [name]: {
-        ip: arr1 ? arr1[1] : ''
-      }
-    }
-  }, {})
-}
-
-function formatTraffic (traffic, ipObj) {
-  if (!traffic) {
-    return ipObj
-  }
-  const arr = traffic.split(ipSplitReg)
-  return arr.reduce((p, s) => {
-    const name = s.replace(/^[\d]{1,5}:\s+/, '').split(/:\s+/)[0]
-    const arr1 = s.split('\n')
-    let download = 0
-    let upload = 0
-    const len = arr1.length
-    for (let i = 0; i < len; i++) {
-      const line = arr1[i]
-      if (line.toLowerCase().trim().startsWith('rx')) {
-        download = Number(arr1[i + 1].trim().split(/\s+/)[0])
-      } else if (line.trim().toLowerCase().startsWith('tx')) {
-        upload = Number(arr1[i + 1].trim().split(/\s+/)[0])
-      }
-    }
-    if (!p[name]) {
-      p[name] = {}
-    }
-    Object.assign(p[name], {
-      download, upload
-    })
-    return p
-  }, ipObj)
-}
-
-function formatNetwork (traffic, ips) {
-  const ipObj = formatIps(ips)
-  return {
-    network: formatTraffic(traffic, ipObj)
-  }
-}
-
-export async function runCmds (props, cmds) {
-  const {
-    pid
-  } = props
-  const ress = []
-  for (const cmd of cmds) {
-    const res = await runCmd(pid, cmd)
-    ress.push(res || '')
-  }
-  return ress
-}
-
-function InfoGetter (props) {
-  const {
-    // name,
-    cmd,
-    cmds,
-    interval,
-    formatter,
-    delay
-  } = props.options
-  const { pid } = props
-  const cms = cmds || [cmd]
-  useEffect(() => {
-    const run = async () => {
-      await wait(delay)
-      const ress = await runCmds(props, cms)
-      const update = formatter(...ress)
-      props.setState(update)
-    }
-    run()
-    if (interval > 0) {
-      const ref = setInterval(run, interval)
-      return () => {
-        clearInterval(ref)
-      }
-    }
-  }, [pid])
-  return null
-}
-
-export default (props) => {
-  if (!props.isRemote) {
-    return null
-  }
-  const cmds = [
-    {
-      name: 'sysinfo',
-      cmds: [
-        'uname -s -n -r -m',
-        'grep PRETTY_NAME= /etc/os-release 2>/dev/null || echo'
-      ],
-      interval: 0,
-      delay: 0,
-      formatter: formatSysInfo
-    },
-    {
-      name: 'uptime',
-      cmd: 'uptime -p',
-      interval: 5000,
-      delay: 0,
-      formatter: d => ({ uptime: d })
-    },
-    {
-      name: 'activities',
-      cmd: 'ps --no-headers -o pid,user,%cpu,size,command ax | sort -b -k3 -r',
-      interval: 5000,
-      delay: 800,
-      formatter: formatActivities
-    },
-    {
-      name: 'disks',
-      cmd: 'df -hP',
-      interval: 10000,
-      delay: 1600,
-      formatter: formatDisks
-    },
-    {
-      name: 'cpu',
-      cmd: '(grep \'cpu \' /proc/stat;sleep 0.1;grep \'cpu \' /proc/stat)|awk -v RS="" \'{print "CPU "($13-$2+$15-$4)*100/($13-$2+$15-$4+$16-$5)"%"}\'',
-      interval: 5000,
-      formatter: formatCpu,
-      delay: 2400
-    },
-    {
-      name: 'mem',
-      cmd: 'free -h',
-      interval: 5000,
-      delay: 3200,
-      formatter: formatMem
-    },
-    {
-      name: 'network',
-      cmds: [
-        'ip -s link',
-        'ip addr'
-      ],
-      delay: 4000,
-      formatter: formatNetwork,
-      interval: 5000
-    }
-  ]
-  return cmds.map(options => {
-    return (
-      <InfoGetter
-        key={'info-getter-' + options.name}
-        {...props}
-        options={options}
-      />
-    )
-  })
-}

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

@@ -1,56 +0,0 @@
-/**
- * system info: os / hostname / kernel / arch (+ shell for local terminals)
- * remote info comes from uname via the session runCmd bridge,
- * local info from the os module + a shell version probe
- */
-
-import { useEffect, useState } from 'react'
-import { DesktopOutlined } from '@ant-design/icons'
-import resolveLocalInfo from './local-info-resolver'
-
-export default function TerminalInfoSys (props) {
-  const { sysInfo, isRemote, pid } = props
-  const [localInfo, setLocalInfo] = useState(null)
-
-  useEffect(() => {
-    if (isRemote) {
-      return
-    }
-    resolveLocalInfo(pid).then(setLocalInfo)
-  }, [isRemote, pid])
-
-  const info = isRemote ? sysInfo : localInfo
-  if (!info || !info.os) {
-    return null
-  }
-  const rows = [
-    ['os', info.os],
-    ['hostname', info.hostname],
-    ['kernel', info.kernel],
-    ['arch', info.arch]
-  ]
-  if (info.shell) {
-    rows.push(['shell', info.shellVersion ? `${info.shell} ${info.shellVersion}` : info.shell])
-  }
-  const final = rows.filter(d => d[1])
-  if (!final.length) {
-    return null
-  }
-  return (
-    <div className='terminal-info-section terminal-info-sys'>
-      <div className='pd1y bold'><DesktopOutlined /> System</div>
-      <div className='terminal-info-sys-rows'>
-        {
-          final.map(([k, v]) => {
-            return (
-              <div className='terminal-info-sys-row' key={k}>
-                <span className='terminal-info-sys-key'>{k}</span>
-                <span className='terminal-info-sys-val' title={v}>{v}</span>
-              </div>
-            )
-          })
-        }
-      </div>
-    </div>
-  )
-}

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

@@ -1,17 +0,0 @@
-/**
- * up time info
- */
-
-import { ClockCircleOutlined } from '@ant-design/icons'
-
-export default function TerminalInfoUp (props) {
-  const { uptime, isRemote, terminalInfos } = props
-  if (!isRemote || !terminalInfos.includes('uptime')) {
-    return null
-  }
-  return (
-    <div className='terminal-info-section terminal-info-up'>
-      <b><ClockCircleOutlined /> uptime</b>: {uptime}
-    </div>
-  )
-}