@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/logs/clock.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _useInterval = _interopRequireDefault(require("react-use/lib/useInterval"));
+var _util = require("../util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Clock() {
+  const [currentTime, setCurrentTime] = (0, _react.useState)(+new Date());
+  (0, _useInterval.default)(() => {
+    setCurrentTime(+new Date());
+  }, 1000);
+  return (0, _util.formatTime)(currentTime, 'MMMM Do YYYY, h:mm:ss a');
+}
+var _default = Clock;
+exports.default = _default;

package/lib/logs/download.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DownloadLog;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Download = _interopRequireDefault(require("@mui/icons-material/Download"));
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _Dialog = _interopRequireDefault(require("@arcblock/ux/lib/Dialog"));
+var _formatName = _interopRequireDefault(require("@abtnode/util/lib/format-name"));
+var _node = require("../contexts/node");
+var _toast = _interopRequireDefault(require("../toast"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const DAYS = [1, 7];
+function DownloadLog(_ref) {
+  let {
+    id,
+    name
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const {
+    restApi,
+    inService
+  } = (0, _node.useNodeContext)();
+  const [showDialog, setShowDialog] = (0, _react.useState)(false);
+  const [isDownloading, setIsDownloading] = (0, _react.useState)(false);
+  const [days, setDays] = (0, _react.useState)(1);
+  const onDownload = async () => {
+    if (isDownloading) {
+      return;
+    }
+    try {
+      setIsDownloading(true);
+      const logId = inService ? '' : "/".concat(id);
+      const res = await restApi.get("/download/log".concat(logId, "?days=").concat(days), {
+        responseType: 'blob'
+      });
+      const href = URL.createObjectURL(res.data);
+      const link = document.createElement('a');
+      link.href = href;
+      link.setAttribute('download', "".concat((0, _formatName.default)(name || id), ".").concat((0, _dayjs.default)().format('YYYYMMDDHHmmss'), ".log.zip"));
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(href);
+      setIsDownloading(false);
+    } catch (error) {
+      setIsDownloading(false);
+      _toast.default.error(error.message);
+    }
+  };
+  const onDaysChange = e => {
+    setDays(e.target.value);
+  };
+  return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    display: "flex",
+    alignItems: "center",
+    style: {
+      gap: 16
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      "data-cy": "download-logs",
+      variant: "outlined",
+      onClick: () => setShowDialog(true),
+      disabled: isDownloading,
+      children: [isDownloading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Download.default, {
+        fontSize: "small",
+        style: {
+          transform: 'translateY(2px)'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        ml: 0.5,
+        children: t('common.download')
+      })]
+    })
+  }), showDialog && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
+    open: true,
+    onClose: () => {
+      setShowDialog(false);
+    },
+    disableEscapeKeyDown: true,
+    title: t('common.download'),
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      "data-cy": "download-logs",
+      variant: "outlined",
+      onClick: () => onDownload(),
+      disabled: isDownloading,
+      children: [isDownloading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+        size: 16
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        ml: 0.5,
+        children: t('common.confirm')
+      })]
+    }),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mb: 2,
+      display: "flex",
+      justifyContent: "center",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControl.default, {
+        size: "small",
+        fullWidth: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          value: days,
+          onChange: onDaysChange,
+          children: DAYS.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+            value: x,
+            children: t("log.lastDays.".concat(x))
+          }, x))
+        })
+      })
+    })
+  })];
+}
+DownloadLog.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string
+};
+DownloadLog.defaultProps = {
+  name: ''
+};

package/lib/logs/log-terminal.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogTerminal = void 0;
+exports.LogTerminalGroup = LogTerminalGroup;
+var _react = require("react");
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _ButtonGroup = _interopRequireDefault(require("@mui/material/ButtonGroup"));
+var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _Terminal = _interopRequireDefault(require("@arcblock/terminal/lib/Terminal"));
+var _clock = _interopRequireDefault(require("./clock"));
+var _node = require("../contexts/node");
+var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject, _templateObject2;
+const _excluded = ["name", "logId", "types", "initialData", "prepend", "postpend"],
+  _excluded2 = ["logFile"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * 按 level/destination 分类的一组 terminal
+ */
+function LogTerminalGroup(_ref) {
+  let {
+      name,
+      logId,
+      types,
+      initialData,
+      prepend,
+      postpend
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const {
+    ws: {
+      useSubscription
+    }
+  } = (0, _node.useNodeContext)();
+  const logTypeLabels = {
+    info: 'Info',
+    error: 'Error',
+    access: 'Access',
+    stdout: 'stdout',
+    stderr: 'stderr'
+  };
+  const isMobile = (0, _useMediaQuery.default)(theme => theme.breakpoints.down('md'));
+  const [currentType, setCurrentType] = (0, _react.useState)(types[0]);
+  const [logFiles, setLogFiles] = (0, _react.useState)();
+  const terminalRefs = (0, _react.useRef)({});
+
+  // 组件挂载时, 写入初始数据
+  (0, _react.useEffect)(() => {
+    types.forEach(type => {
+      const terminal = terminalRefs.current[type];
+      if (terminal) {
+        terminal.write("Collecting ".concat(type, " logs for ").concat(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.".concat(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 : "".concat(p[0], "\r\n\r\n")));
+      terminal.write('\r\n\r\n');
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogTerminalGroupRoot, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "log-terminal-group-head",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "log-terminal-group-head-start",
+        children: [prepend, /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonGroup.default, {
+          variant: "outlined",
+          size: isMobile ? 'small' : 'medium',
+          children: types.map(type => {
+            const props = type === currentType ? {
+              variant: 'contained'
+            } : {};
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({}, props), {}, {
+              onClick: () => setCurrentType(type),
+              children: logTypeLabels[type]
+            }), type);
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "log-terminal-group-head-end",
+        children: postpend
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "log-terminal-group-terminals",
+      children: types.map(type => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(LogTerminal, {
+          ref: _ref2 => {
+            terminalRefs.current[type] = _ref2;
+          },
+          logFile: logFiles === null || logFiles === void 0 ? void 0 : logFiles[type],
+          style: {
+            visibility: type === currentType ? 'visible' : 'hidden'
+          }
+        }, type);
+      })
+    })]
+  }));
+}
+LogTerminalGroup.propTypes = {
+  // log name, 比如: blocklet display name
+  name: _propTypes.default.string.isRequired,
+  // 比如: abtnode | blocklet-services | blocklet-<did>
+  logId: _propTypes.default.string.isRequired,
+  // 日志类型, info/error 或 stdin/stdout/access
+  types: _propTypes.default.arrayOf(_propTypes.default.string),
+  // 写入 terminal 的初始数据
+  initialData: _propTypes.default.arrayOf(_propTypes.default.string),
+  prepend: _propTypes.default.node,
+  postpend: _propTypes.default.node
+};
+LogTerminalGroup.defaultProps = {
+  types: ['error', 'info', 'access', 'stdout', 'stderr'],
+  initialData: [],
+  prepend: null,
+  postpend: null
+};
+const LogTerminalGroupRoot = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  .log-terminal-group-head {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-bottom: 16px;\n  }\n\n  .log-terminal-group-head-start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    ", " {\n      flex-direction: column;\n      align-items: start;\n    }\n  }\n\n  .log-terminal-group-head-end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    ", " {\n      flex-direction: column;\n      align-items: start;\n    }\n  }\n  .log-terminal-group-terminals {\n    flex: 1;\n    position: relative;\n    overflow: hidden;\n    > * {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n  }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
+const LogTerminal = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+      logFile
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  const terminalStyle = {
+    width: '100%',
+    boxSizing: 'border-box',
+    height: '100%'
+  };
+  const terminalOptions = {
+    theme: {
+      background: '#2C313C',
+      foreground: '#EEEEEE'
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LogTerminalRoot, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "log-terminal-top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_clock.default, {}), logFile && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: logFile
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "log-terminal-container",
+      style: {
+        position: 'relative'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Terminal.default, {
+        ref: ref,
+        style: terminalStyle,
+        options: terminalOptions
+      })
+    })]
+  }));
+});
+exports.LogTerminal = LogTerminal;
+LogTerminal.propTypes = {
+  logFile: _propTypes.default.string
+};
+LogTerminal.defaultProps = {
+  logFile: ''
+};
+const LogTerminalRoot = _styled.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  .log-terminal-top {\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n    padding: 8px;\n    font-size: 14px;\n    color: aquamarine;\n    background: darkgray;\n    word-break: break-word;\n  }\n  .log-terminal-container {\n    flex: 1;\n    height: 100%;\n    padding: 8px;\n    overflow: hidden;\n    background: #2c313c;\n  }\n\n  .xterm-viewport::-webkit-scrollbar {\n    width: 10px;\n  }\n  .xterm-viewport::-webkit-scrollbar-track {\n    opacity: 0;\n  }\n  .xterm-viewport::-webkit-scrollbar-thumb {\n    min-height: 20px;\n    background-color: #ffffff20;\n  }\n"])));