@electerm/electerm-react 1.34.30

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

@@ -0,0 +1,273 @@
+/**
+ * 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'
+
+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 formatDisks (str) {
+  if (!str) {
+    return {
+      disks: []
+    }
+  }
+  const r = str.split('\n')
+    .slice(1)
+    .map(s => {
+      const arr = s.split(/ +/)
+      return {
+        filesystem: arr[0],
+        size: arr[1],
+        used: arr[2],
+        avail: arr[3],
+        usedPercent: arr[4],
+        mount: arr[5]
+      }
+    })
+    .filter(d => d.filesystem)
+  return {
+    disks: r
+  }
+}
+
+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)
+  }
+}
+
+// function format (arr) {
+//   if (!arr) {
+//     return {}
+//   }
+//   // const arr = res.split(sepStr)
+//   // console.log(arr)
+//   const uptime = arr[0]
+//   const activities = formatActivities(arr[1])
+//   const disks = formatDisks(arr[2])
+//   const cpu = formatCpu(arr[3])
+//   const { mem, swap } = formatMem(arr[4])
+//   const { network, ip } = formatNetwork(arr[5], arr[6])
+//   const final = {
+//     ip,
+//     uptime,
+//     activities,
+//     disks,
+//     cpu,
+//     mem,
+//     swap,
+//     network
+//   }
+//   return final
+// }
+
+export async function runCmds (props, cmds) {
+  const {
+    pid,
+    sessionId
+  } = props
+  const ress = []
+  for (const cmd of cmds) {
+    const res = await runCmd(pid, sessionId, cmd)
+    ress.push(res || '')
+  }
+  return ress
+}
+
+function InfoGetter (props) {
+  const {
+    // name,
+    cmd,
+    cmds,
+    interval,
+    formatter,
+    delay
+  } = props.options
+  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()
+    const ref = setInterval(run, interval)
+    return () => {
+      clearInterval(ref)
+    }
+  }, [])
+  return null
+}
+
+export default (props) => {
+  if (!props.isRemote) {
+    return null
+  }
+  const cmds = [
+    {
+      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 -h',
+      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/terminal-info.styl

@@ -0,0 +1,29 @@
+@require '../../css/includes/theme-default'
+.terminal-info-icon
+  color text-dark
+  &:hover
+    color text
+.info-panel-wrap
+  position fixed
+  right 0
+  top 100px
+  bottom 0
+  width 500px
+  background main
+  color text
+  box-shadow 0px 3px 3px 3px alpha(main, .25)
+  z-index 100
+  overflow-y scroll
+  opacity .9
+.terminal-info-section
+  padding 10px 0
+.terminal-info-act
+.terminal-info-disk
+.terminal-info-network
+  max-height 260px
+  overflow-y scroll
+.activity-item
+  .activity-item-copy
+    display none
+  &:hover .activity-item-copy
+    display inline

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

@@ -0,0 +1,15 @@
+/**
+ * up time info
+ */
+
+export default function TerminalInfoUp (props) {
+  const { uptime } = props
+  if (!props.isRemote) {
+    return null
+  }
+  return (
+    <div className='terminal-info-section terminal-info-up'>
+      <b>uptime</b>: {uptime}
+    </div>
+  )
+}

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

@@ -0,0 +1,264 @@
+import { useRef } from 'react'
+import { Button, Input, message, Upload, Form } from 'antd'
+import { convertTheme, convertThemeToText, exportTheme, validThemeProps, requiredThemeProps } from '../../common/terminal-theme'
+import { defaultTheme, defaultThemeLight } from '../../common/constants'
+import generate from '../../common/uid'
+import Link from '../common/external-link'
+import InputAutoFocus from '../common/input-auto-focus'
+
+const { TextArea } = Input
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('setting')
+const t = prefix('terminalThemes')
+
+export default function ThemeForm (props) {
+  const [form] = Form.useForm()
+  const action = useRef('submit')
+  function exporter () {
+    exportTheme(props.formData.id)
+  }
+  function saveOnly () {
+    action.current = 'saveOnly'
+    form.submit()
+  }
+  // A function to validate the input text
+  async function validateInput (_, value) {
+    const input = value
+      .split('\n')
+      .reduce((p, line) => {
+        const [name, value] = line.split('=')
+        if (!name.trim() || !value.trim()) {
+          return p
+        }
+        p[name.trim()] = value.trim()
+        return p
+      }, {})
+
+    // A regex to test the hex color format
+    const hexColorRegex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/
+
+    // A regex to test the rgba color format
+    const rgbaColorRegex = /^rgba\(\d{1,3}, +\d{1,3}, +\d{1,3}, +(0|0?\.\d+|1)\)$/
+
+    // A message to store the error message
+    let message = ''
+
+    // Loop through the required props
+    for (const prop of requiredThemeProps) {
+    // Check if the input has the prop
+      if (!input[prop]) {
+      // If not, set the flag to false and append the message
+        message += `Missing prop: ${prop}\n`
+        // Skip the rest of the loop
+        continue
+      }
+
+      // Check if the prop starts with terminal:
+      if (prop.startsWith('terminal:')) {
+      // If yes, check if the prop value is a valid rgba color format
+        if (!rgbaColorRegex.test(input[prop]) && !hexColorRegex.test(input[prop])) {
+        // If not, set the flag to false and append the message
+          message += `Invalid color format for prop: ${prop}\n`
+          // Skip the rest of the loop
+          continue
+        }
+      } else {
+      // If no, check if the prop value is a valid hex color format
+        if (!hexColorRegex.test(input[prop])) {
+        // If not, set the flag to false and append the message
+          message += `Invalid hex color format for prop: ${prop}\n`
+          // Skip the rest of the loop
+          continue
+        }
+      }
+    }
+
+    const keys = Object.keys(input)
+    for (const key of keys) {
+      if (!validThemeProps.includes(key)) {
+        message += `Not supported prop: ${key}\n`
+      }
+    }
+    if (message) {
+      return Promise.reject(message)
+    }
+    // Return an object with the flag and the message
+    return Promise.resolve()
+  }
+
+  async function handleSubmit (res) {
+    const { formData } = props
+    const {
+      themeName,
+      themeText
+    } = res
+    const update = {
+      name: themeName,
+      ...convertTheme(themeText)
+    }
+    const update1 = {
+      ...update,
+      id: generate()
+    }
+    if (formData.id) {
+      props.store.editTheme(formData.id, update)
+    } else {
+      props.store.addTheme(update1)
+      props.store.storeAssign({
+        item: update1
+      })
+    }
+    if (action.current !== 'saveOnly') {
+      props.store.setTheme(
+        formData.id || update1.id
+      )
+    }
+    message.success(s('saved'))
+    action.current = 'submit'
+  }
+
+  function renderSrc (type) {
+    if (type === 'iterm') {
+      const url = `https://github.com/mbadolato/iTerm2-Color-Schemes/blob/master/electerm/${encodeURIComponent(themeName)}.txt`
+      return (
+        <FormItem>
+          <span className='mg1r'>src:</span>
+          <Link
+            to={url}
+          >{url}
+          </Link>
+        </FormItem>
+      )
+    }
+    return null
+  }
+
+  async function beforeUpload (file) {
+    const txt = await window.fs.readFile(file.path)
+    const { name, themeConfig, uiThemeConfig } = convertTheme(txt)
+    form.setFieldsValue({
+      themeName: name,
+      themeText: convertThemeToText({
+        themeConfig, uiThemeConfig
+      })
+    })
+    return false
+  }
+
+  function renderFuncs (id) {
+    if (!id) {
+      return null
+    }
+    return (
+      <FormItem>
+        <Button
+          type='dashed'
+          onClick={exporter}
+        >
+          {t('export')}
+        </Button>
+      </FormItem>
+    )
+  }
+
+  const {
+    readOnly,
+    id,
+    type,
+    name: themeName
+  } = props.formData
+  const initialValues = {
+    themeName,
+    themeText: convertThemeToText(props.formData)
+  }
+  const { autofocustrigger } = props.store
+  const isDefaultTheme = id === defaultTheme.id || id === defaultThemeLight.id
+  const disabled = readOnly || isDefaultTheme
+  return (
+    <Form
+      onFinish={handleSubmit}
+      form={form}
+      initialValues={initialValues}
+      className='form-wrap'
+      name='terminal-theme-form'
+      layout='vertical'
+    >
+      {renderFuncs(id)}
+      <FormItem
+        label={t('themeName')}
+        hasFeedback
+        name='themeName'
+        rules={[{
+          max: 30, message: '30 chars max'
+        }, {
+          required: true, message: 'theme name required'
+        }]}
+      >
+        <InputAutoFocus
+          selectall='yes'
+          disabled={disabled}
+          autofocustrigger={autofocustrigger}
+        />
+      </FormItem>
+      <FormItem
+        label={t('themeConfig')}
+      >
+        <div className='pd1b'>
+          <Upload
+            beforeUpload={beforeUpload}
+            fileList={[]}
+            className='mg1b'
+          >
+            <Button
+              type='dashed'
+              disabled={disabled}
+            >
+              {e('importFromFile')}
+            </Button>
+          </Upload>
+        </div>
+        <FormItem
+          noStyle
+          name='themeText'
+          hasFeedback
+          rules={[{
+            max: 1000, message: '1000 chars max'
+          }, {
+            required: true, message: 'theme Config required'
+          }, {
+            validator: validateInput
+          }]}
+        >
+          <TextArea rows={33} disabled={disabled} />
+        </FormItem>
+      </FormItem>
+      {
+        disabled
+          ? null
+          : (
+            <FormItem>
+              <p>
+                <Button
+                  type='primary'
+                  htmlType='submit'
+                  className='mg1r mg1b'
+                >{t('saveAndApply')}
+                </Button>
+                <Button
+                  type='dashed'
+                  className='mg1r mg1b'
+                  onClick={saveOnly}
+                >{e('save')}
+                </Button>
+              </p>
+            </FormItem>
+            )
+      }
+      {
+        renderSrc(type)
+      }
+    </Form>
+  )
+}

package/client/components/terminal-theme/terminal-theme-list.styl

@@ -0,0 +1,3 @@
+@require '../../css/includes/theme-default'
+.theme-item.current
+  border-left 3px solid success