@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,54 @@
+/**
+ * process cpu/mem activities
+ */
+
+import { Table, Tooltip, Popconfirm } from 'antd'
+import { isEmpty } from 'lodash-es'
+import { CloseCircleOutlined } from '@ant-design/icons'
+import colsParser from './data-cols-parser'
+
+const { prefix } = window
+const m = prefix('menu')
+
+export default function TerminalInfoActivities (props) {
+  const { activities } = props
+  if (isEmpty(activities) || !props.isRemote) {
+    return null
+  }
+  const col = colsParser(activities[0])
+  col.unshift({
+    dataIndex: 'kill',
+    key: 'kill',
+    title: m('close'),
+    render: (txt, inst) => {
+      return (
+        <Tooltip
+          title={m('close')}
+        >
+          <Popconfirm
+            title={m('close') + ' pid:' + inst.pid + ' ?'}
+            onConfirm={() => props.killProcess(inst.pid)}
+          >
+            <CloseCircleOutlined
+              className='pointer'
+            />
+          </Popconfirm>
+        </Tooltip>
+      )
+    }
+  })
+  const ps = {
+    rowKey: 'pid',
+    dataSource: activities,
+    bordered: true,
+    columns: col,
+    size: 'small',
+    pagination: false
+  }
+  return (
+    <div className='terminal-info-section terminal-info-act'>
+      <div className='pd1y bold'>Activities</div>
+      <Table {...ps} />
+    </div>
+  )
+}

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

@@ -0,0 +1,25 @@
+/**
+ * show base terminal info, id sessionID
+ */
+
+// import { createLogFileName } from '../../../app/common/create-session-log-file-path'
+import { osResolve } from '../../common/resolve'
+import ShowItem from '../common/show-item'
+
+const { prefix } = window
+const c = prefix('common')
+const st = prefix('setting')
+
+export default function TerminalInfoBase (props) {
+  const { id, saveTerminalLogToFile, logName } = props
+  const path = osResolve(props.appPath, 'electerm', 'session_logs', logName + '.log')
+  const to = saveTerminalLogToFile
+    ? <ShowItem disabled={!saveTerminalLogToFile} to={path}>{path}</ShowItem>
+    : `-> ${c('setting')} -> ${st('saveTerminalLogToFile')}`
+  return (
+    <div className='terminal-info-section terminal-info-base'>
+      <p><b>ID:</b> {id}</p>
+      <p><b>log:</b> {to}</p>
+    </div>
+  )
+}

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

@@ -0,0 +1,101 @@
+/**
+ * info content module
+ */
+
+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 { useState } from 'react'
+import RunCmd from './run-cmd'
+import {
+  sidebarWidth,
+  termControlHeight
+} from '../../common/constants'
+import { runCmd } from '../terminal/terminal-apis'
+import { CloseCircleOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons'
+
+export default function TerminalInfoContent (props) {
+  if (!props.showInfo) {
+    return null
+  }
+  const [state, setter] = useState({
+    expand: false,
+    uptime: '',
+    cpu: '',
+    mem: {},
+    swap: {},
+    activities: [],
+    disks: [],
+    network: {}
+  })
+  function setState (ext) {
+    setter(s => {
+      return Object.assign({}, s, ext)
+    })
+  }
+  async function killProcess (id) {
+    const {
+      pid,
+      sessionId
+    } = props
+    const cmd = `kill ${id}`
+    runCmd(pid, sessionId, cmd)
+  }
+  const pops = {
+    onClick: props.hideInfoPanel,
+    className: 'pointer font20 hide-info-panel-wrap'
+  }
+  return (
+    <div
+      className='info-panel-wrap'
+      style={{
+        width: state.expand ? `calc(100% - ${sidebarWidth}px)` : '50%',
+        top: props.topMenuHeight + props.tabsHeight + termControlHeight - 4
+      }}
+    >
+      <div className='pd2t pd2x'>
+        <CloseCircleOutlined
+          {...pops}
+        />
+        {
+          state.expand
+            ? (
+              <RightCircleOutlined
+                onClick={() => setState({
+                  expand: false
+                })}
+                className='pointer font20 mg1l'
+              />
+              )
+            : (
+              <LeftCircleOutlined
+                onClick={() => setState({
+                  expand: true
+                })}
+                className='pointer font20 mg1l'
+              />
+              )
+        }
+
+      </div>
+      <div className='pd2'>
+        <TerminalInfoBase {...props} {...state} />
+        <TerminalInfoUp {...props} {...state} />
+        <TerminalInfoResource
+          {...props} {...state}
+        />
+        <TerminalInfoActivities
+          {...props}
+          {...state}
+          killProcess={killProcess}
+        />
+        <TerminalInfoNetwork {...props} {...state} />
+        <TerminalInfoDisk {...props} {...state} />
+        <RunCmd {...props} setState={setState} />
+      </div>
+    </div>
+  )
+}

package/client/components/terminal-info/data-cols-parser.jsx

@@ -0,0 +1,50 @@
+import { copy } from '../../common/clipboard'
+import filesizeParser from 'filesize-parser'
+import { formatBytes } from '../../common/byte-format'
+
+const { prefix } = window
+const m = prefix('menu')
+
+const valueParserMaps = {
+  size: v => v,
+  used: filesizeParser,
+  avail: filesizeParser,
+  usedPercent: v => parseFloat(v.replace('%', ''))
+}
+
+function valueParse (obj, k) {
+  if (valueParserMaps[k]) {
+    return valueParserMaps[k](obj[k])
+  }
+  return obj[k]
+}
+
+export default (data) => {
+  return Object.keys(data).map(k => {
+    const rd = (txt) => {
+      const r = k === 'mem' ? formatBytes(parseInt(txt, 10)) : txt
+      return (
+        <div className='activity-item'>
+          <span>{r}</span>
+          <span
+            className='pointer activity-item-copy mg1l bold color-blue'
+            onClick={() => copy(txt)}
+          >
+            {m('copy')}
+          </span>
+        </div>
+      )
+    }
+    return {
+      title: k,
+      dataIndex: k,
+      key: k,
+      sorter: (a, b) => {
+        const va = valueParse(a, k)
+        const vb = valueParse(b, k)
+        return va > vb ? 1 : -1
+      },
+      render: rd
+    }
+  })
+}

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

@@ -0,0 +1,29 @@
+/**
+ * disk info
+ */
+
+import { Table } from 'antd'
+import { isEmpty } from 'lodash-es'
+import colsParser from './data-cols-parser'
+
+export default function TerminalInfoDisk (props) {
+  const { disks } = props
+  if (isEmpty(disks) || !props.isRemote) {
+    return null
+  }
+  const col = colsParser(disks[0])
+  const ps = {
+    rowKey: (rec) => `${rec.mount}_${rec.filesystem}`,
+    dataSource: disks,
+    bordered: true,
+    columns: col,
+    size: 'small',
+    pagination: false
+  }
+  return (
+    <div className='terminal-info-section terminal-info-disk'>
+      <div className='pd1y bold'>File system</div>
+      <Table {...ps} />
+    </div>
+  )
+}

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

@@ -0,0 +1,25 @@
+/**
+ * show terminal info
+ * inluding id log path, and system info for remote session
+ */
+
+import { InfoCircleOutlined } from '@ant-design/icons'
+
+import { Tooltip } from 'antd'
+import './terminal-info.styl'
+
+export default function TerminalInfoIndex (props) {
+  const pops = {
+    onClick: props.showInfoPanel,
+    className: 'pointer font18 terminal-info-icon'
+  }
+  return (
+    <Tooltip
+      title='Terminal Info'
+    >
+      <InfoCircleOutlined
+        {...pops}
+      />
+    </Tooltip>
+  )
+}

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

@@ -0,0 +1,114 @@
+/**
+ * network info
+ */
+
+import { Table } from 'antd'
+import { isEmpty } from 'lodash-es'
+import { useEffect, useState } from 'react'
+import { formatBytes } from '../../common/byte-format'
+import copy from 'json-deep-copy'
+
+export default function TerminalInfoDisk (props) {
+  const { network } = props
+  if (isEmpty(network) || !props.isRemote) {
+    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 (
+        p &&
+        pv &&
+        p.download &&
+        pv.download &&
+        p.download > pv.download
+      ) {
+        p.down = Math.floor((p.download - pv.download) / diff)
+      }
+      if (
+        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 formatBytes(v)
+        }
+        return v
+      }
+    }
+  })
+  const ps = {
+    rowKey: 'name',
+    dataSource: arr,
+    bordered: true,
+    size: 'small',
+    columns: col,
+    pagination: false
+  }
+  return (
+    <div className='terminal-info-section terminal-info-network'>
+      <div className='pd1y bold'>Network</div>
+      <Table {...ps} />
+    </div>
+  )
+}

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

@@ -0,0 +1,80 @@
+/**
+ * cpu/swap/mem general usage
+ */
+
+import { isEmpty, isUndefined } 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 } = props
+  if (!props.isRemote) {
+    return null
+  }
+  function renderItem (obj) {
+    if (isEmpty(obj)) {
+      return <div className='pd1b' key={obj.name}>NA</div>
+    }
+    const {
+      used,
+      total,
+      percent,
+      name
+    } = obj
+    const hasPercent = !isUndefined(percent)
+    const p = hasPercent
+      ? percent
+      : computePercent(used, total) || 0
+    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}
+        />
+      </div>
+    )
+  }
+  const data = [
+    {
+      name: 'cpu',
+      percent: parseInt10(cpu)
+    },
+    {
+      name: 'mem',
+      ...mem
+    },
+    {
+      name: 'swap',
+      ...swap
+    }
+  ]
+  return (
+    <div className='terminal-info-section terminal-info-resource'>
+      {
+        data.map(renderItem)
+      }
+    </div>
+  )
+}