@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/logs/clock.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+import useInterval from 'react-use/lib/useInterval';
+import { formatTime } from '../util';
+function Clock() {
+  const [currentTime, setCurrentTime] = useState(+new Date());
+  useInterval(() => {
+    setCurrentTime(+new Date());
+  }, 1000);
+  return formatTime(currentTime, 'MMMM Do YYYY, h:mm:ss a');
+}
+export default Clock;

package/es/logs/download.js

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import dayjs from '@abtnode/util/lib/dayjs';
+import Box from '@mui/material/Box';
+import DownloadIcon from '@mui/icons-material/Download';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Spinner from '@mui/material/CircularProgress';
+import Button from '@arcblock/ux/lib/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import formatName from '@abtnode/util/lib/format-name';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../contexts/node';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DAYS = [1, 7];
+export default function DownloadLog({
+  id,
+  name
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const {
+    restApi,
+    inService
+  } = useNodeContext();
+  const [showDialog, setShowDialog] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [days, setDays] = useState(1);
+  const onDownload = async () => {
+    if (isDownloading) {
+      return;
+    }
+    try {
+      setIsDownloading(true);
+      const logId = inService ? '' : `/${id}`;
+      const res = await restApi.get(`/download/log${logId}?days=${days}`, {
+        responseType: 'blob'
+      });
+      const href = URL.createObjectURL(res.data);
+      const link = document.createElement('a');
+      link.href = href;
+      link.setAttribute('download', `${formatName(name || id)}.${dayjs().format('YYYYMMDDHHmmss')}.log.zip`);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(href);
+      setIsDownloading(false);
+    } catch (error) {
+      setIsDownloading(false);
+      Toast.error(error.message);
+    }
+  };
+  const onDaysChange = e => {
+    setDays(e.target.value);
+  };
+  return [/*#__PURE__*/_jsx(Box, {
+    display: "flex",
+    alignItems: "center",
+    style: {
+      gap: 16
+    },
+    children: /*#__PURE__*/_jsxs(Button, {
+      "data-cy": "download-logs",
+      variant: "outlined",
+      onClick: () => setShowDialog(true),
+      disabled: isDownloading,
+      children: [isDownloading ? /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }) : /*#__PURE__*/_jsx(DownloadIcon, {
+        fontSize: "small",
+        style: {
+          transform: 'translateY(2px)'
+        }
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: 0.5,
+        children: t('common.download')
+      })]
+    })
+  }), showDialog && /*#__PURE__*/_jsx(Dialog, {
+    open: true,
+    onClose: () => {
+      setShowDialog(false);
+    },
+    disableEscapeKeyDown: true,
+    title: t('common.download'),
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/_jsxs(Button, {
+      "data-cy": "download-logs",
+      variant: "outlined",
+      onClick: () => onDownload(),
+      disabled: isDownloading,
+      children: [isDownloading && /*#__PURE__*/_jsx(Spinner, {
+        size: 16
+      }), /*#__PURE__*/_jsx(Box, {
+        ml: 0.5,
+        children: t('common.confirm')
+      })]
+    }),
+    children: /*#__PURE__*/_jsx(Box, {
+      mb: 2,
+      display: "flex",
+      justifyContent: "center",
+      children: /*#__PURE__*/_jsx(FormControl, {
+        size: "small",
+        fullWidth: true,
+        children: /*#__PURE__*/_jsx(Select, {
+          value: days,
+          onChange: onDaysChange,
+          children: DAYS.map(x => /*#__PURE__*/_jsx(MenuItem, {
+            value: x,
+            children: t(`log.lastDays.${x}`)
+          }, x))
+        })
+      })
+    })
+  })];
+}
+DownloadLog.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string
+};
+DownloadLog.defaultProps = {
+  name: ''
+};

package/es/logs/log-terminal.js

@@ -0,0 +1,253 @@
+import { useRef, useState, useEffect, forwardRef } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import Terminal from '@arcblock/terminal/lib/Terminal';
+import Clock from './clock';
+import { useNodeContext } from '../contexts/node';
+
+/**
+ * 按 level/destination 分类的一组 terminal
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function LogTerminalGroup({
+  name,
+  logId,
+  types,
+  defaultTypeIndex,
+  initialData,
+  prepend,
+  postpend,
+  onTypeChange,
+  ...rest
+}) {
+  const {
+    ws: {
+      useSubscription
+    }
+  } = useNodeContext();
+  const logTypeLabels = {
+    info: 'Info',
+    error: 'Error',
+    access: 'Access',
+    stdout: 'stdout',
+    stderr: 'stderr'
+  };
+  const isMobile = useMediaQuery(theme => theme.breakpoints.down('md'));
+  const [currentType, setCurrentType] = useState(types[defaultTypeIndex || 0]);
+  const [logFiles, setLogFiles] = useState();
+  const terminalRefs = useRef({});
+
+  // 组件挂载时, 写入初始数据
+  useEffect(() => {
+    types.forEach(type => {
+      const terminal = terminalRefs.current[type];
+      if (terminal) {
+        terminal.write(`Collecting ${type} logs for ${name}...`);
+        terminal.write('\r\n\r\n');
+        initialData.forEach(item => terminal.write(item));
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // 监听 log 数据, 写入 terminal
+  useSubscription(`log.${logId}`, log => {
+    if (!logFiles) {
+      setLogFiles(log.logFiles || {});
+    }
+    const terminal = terminalRefs.current[log.level];
+    if (terminal) {
+      terminal.write(log.data.replace(/.\n/g, p => p === '\r\n' ? p : `${p[0]}\r\n\r\n`));
+      terminal.write('\r\n\r\n');
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs(LogTerminalGroupRoot, {
+    ...rest,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "log-terminal-group-head",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "log-terminal-group-head-start",
+        children: [prepend, /*#__PURE__*/_jsx(ButtonGroup, {
+          variant: "outlined",
+          size: isMobile ? 'small' : 'medium',
+          children: types.map(type => {
+            const props = type === currentType ? {
+              variant: 'contained'
+            } : {};
+            return /*#__PURE__*/_jsx(Button, {
+              ...props,
+              onClick: () => {
+                setCurrentType(type);
+                onTypeChange(type);
+              },
+              children: logTypeLabels[type]
+            }, type);
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: "log-terminal-group-head-end",
+        children: postpend
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "log-terminal-group-terminals",
+      children: types.map(type => {
+        return /*#__PURE__*/_jsx(LogTerminal, {
+          ref: ref => {
+            terminalRefs.current[type] = ref;
+          },
+          logFile: logFiles?.[type],
+          style: {
+            visibility: type === currentType ? 'visible' : 'hidden'
+          }
+        }, type);
+      })
+    })]
+  });
+}
+LogTerminalGroup.propTypes = {
+  // log name, 比如: blocklet display name
+  name: PropTypes.string.isRequired,
+  // 比如: abtnode | blocklet-services | blocklet-<did>
+  logId: PropTypes.string.isRequired,
+  // 日志类型, info/error 或 stdin/stdout/access
+  types: PropTypes.arrayOf(PropTypes.string),
+  defaultTypeIndex: PropTypes.number,
+  // 写入 terminal 的初始数据
+  initialData: PropTypes.arrayOf(PropTypes.string),
+  prepend: PropTypes.node,
+  postpend: PropTypes.node,
+  onTypeChange: PropTypes.func
+};
+LogTerminalGroup.defaultProps = {
+  types: ['error', 'info', 'access', 'stdout', 'stderr'],
+  defaultTypeIndex: 0,
+  initialData: [],
+  prepend: null,
+  postpend: null,
+  onTypeChange: () => {}
+};
+const LogTerminalGroupRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  .log-terminal-group-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 16px;
+  }
+
+  .log-terminal-group-head-start {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    ${props => props.theme.breakpoints.down('md')} {
+      flex-direction: column;
+      align-items: start;
+    }
+  }
+
+  .log-terminal-group-head-end {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    ${props => props.theme.breakpoints.down('md')} {
+      flex-direction: column;
+      align-items: start;
+    }
+  }
+  .log-terminal-group-terminals {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+    > * {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+`;
+export const LogTerminal = /*#__PURE__*/forwardRef(({
+  logFile,
+  ...rest
+}, ref) => {
+  const terminalStyle = {
+    width: '100%',
+    boxSizing: 'border-box',
+    height: '100%'
+  };
+  const terminalOptions = {
+    theme: {
+      background: '#2C313C',
+      foreground: '#EEEEEE'
+    }
+  };
+  return /*#__PURE__*/_jsxs(LogTerminalRoot, {
+    ...rest,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "log-terminal-top",
+      children: [/*#__PURE__*/_jsx(Clock, {}), logFile && /*#__PURE__*/_jsx("span", {
+        children: logFile
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "log-terminal-container",
+      style: {
+        position: 'relative'
+      },
+      children: /*#__PURE__*/_jsx(Terminal, {
+        ref: ref,
+        style: terminalStyle,
+        options: terminalOptions
+      })
+    })]
+  });
+});
+LogTerminal.propTypes = {
+  logFile: PropTypes.string
+};
+LogTerminal.defaultProps = {
+  logFile: ''
+};
+const LogTerminalRoot = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .log-terminal-top {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 8px;
+    font-size: 14px;
+    color: aquamarine;
+    background: darkgray;
+    word-break: break-word;
+  }
+  .log-terminal-container {
+    flex: 1;
+    height: 100%;
+    padding: 8px;
+    overflow: hidden;
+    background: #2c313c;
+  }
+
+  .xterm-viewport::-webkit-scrollbar {
+    width: 10px;
+  }
+  .xterm-viewport::-webkit-scrollbar-track {
+    opacity: 0;
+  }
+  .xterm-viewport::-webkit-scrollbar-thumb {
+    min-height: 20px;
+    background-color: #ffffff20;
+  }
+`;