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

package/es/blocklet/router/rule-list.js

@@ -0,0 +1,190 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import isUrl from 'is-url';
+import useTheme from '@mui/material/styles/useTheme';
+import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import ExternalLink from '@mui/material/Link';
+import IconButton from '@mui/material/IconButton';
+import Avatar from '@mui/material/Avatar';
+import LockIcon from '@arcblock/icons/lib/LockIcon';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { ROUTING_RULE_TYPES } from '@abtnode/constant';
+import { getDisplayName } from '@blocklet/meta/lib/util';
+import { getBlockletUrlParams, getAccessUrl, BlockletAdminRoles } from '../../util';
+import { useBlockletContext } from '../../contexts/blocklet';
+import { useNodeContext } from '../../contexts/node';
+import { withPermission } from '../../permission';
+import Line from '../component/line';
+import RuleActions from './rule-actions';
+import BlockletPageGroup from '../page-group';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function RedirectRule({
+  domain,
+  isHttps,
+  toUrl
+}) {
+  const scheme = isHttps ? 'https' : 'http';
+  let tmpToUrl = toUrl;
+  if (!isUrl(tmpToUrl)) {
+    tmpToUrl = `${scheme}://${domain}${toUrl}`;
+  }
+  return /*#__PURE__*/_jsx(ExternalLink, {
+    href: tmpToUrl,
+    target: "_blank",
+    style: {
+      fontSize: 14
+    },
+    underline: "hover",
+    children: toUrl
+  }, tmpToUrl);
+}
+RedirectRule.propTypes = {
+  domain: PropTypes.string.isRequired,
+  toUrl: PropTypes.string.isRequired,
+  isHttps: PropTypes.bool
+};
+RedirectRule.defaultProps = {
+  isHttps: false
+};
+function RuleList({
+  hasPermission
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const theme = useTheme();
+  const {
+    blocklet,
+    recommendedDomain: domain
+  } = useBlockletContext();
+  const rules = blocklet.site.rules.filter(rule => rule.to.type !== ROUTING_RULE_TYPES.BLOCKLET);
+  return rules.map(rule => {
+    let avatar = null;
+    let component = null;
+    if (rule.to.type === ROUTING_RULE_TYPES.NONE) {
+      avatar = '404';
+    } else if (rule.to.type === ROUTING_RULE_TYPES.REDIRECT) {
+      avatar = rule.to.redirectCode;
+    } else if (rule.to.type === ROUTING_RULE_TYPES.GENERAL_REWRITE) {
+      avatar = 'R';
+    } else if (rule.to.type === ROUTING_RULE_TYPES.COMPONENT) {
+      component = blocklet.children.find(x => x.meta.did === rule.to.componentId);
+      avatar = 'C';
+    }
+    const action = rule.isProtected ? /*#__PURE__*/_jsx(Tooltip, {
+      title: t('blocklet.router.urlLockTooltip'),
+      placement: "top",
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(IconButton, {
+          disabled: true,
+          size: "small",
+          style: {
+            pointerEvents: 'auto',
+            // padding replace to margin, fix the tooltip position
+            paddingTop: 0,
+            paddingBottom: 0,
+            margin: '12px 0'
+          },
+          children: /*#__PURE__*/_jsx(LockIcon, {
+            style: {
+              fill: theme.palette.text.disabled
+            }
+          })
+        })
+      })
+    }) : /*#__PURE__*/_jsx(RuleActions, {
+      ...rule
+    });
+    return [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      py: 2,
+      className: "component-item",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        width: {
+          xs: 300,
+          md: 400
+        },
+        display: "flex",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx(Box, {
+          width: 28
+        }), typeof avatar === 'object' ? avatar : /*#__PURE__*/_jsx(Avatar, {
+          children: avatar
+        }), /*#__PURE__*/_jsxs(Box, {
+          ml: 2,
+          children: [/*#__PURE__*/_jsxs(Box, {
+            style: {
+              color: '#222',
+              fontSize: 16
+            },
+            children: [rule.to.type === ROUTING_RULE_TYPES.NONE && t('common.page404'), rule.to.type === ROUTING_RULE_TYPES.REDIRECT && t('common.redirect'), rule.to.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && t('common.rewrite'), rule.to.type === ROUTING_RULE_TYPES.COMPONENT && getDisplayName(component, true)]
+          }), /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [rule.to.type === ROUTING_RULE_TYPES.REDIRECT && /*#__PURE__*/_jsx(RedirectRule, {
+              domain: domain,
+              toUrl: rule.to.url
+            }), rule.to.type === ROUTING_RULE_TYPES.GENERAL_REWRITE && /*#__PURE__*/_jsx(RedirectRule, {
+              domain: domain,
+              toUrl: rule.to.url
+            }), rule.to.type === ROUTING_RULE_TYPES.COMPONENT && /*#__PURE__*/_jsx(BlockletPageGroup, {
+              group: rule.to.pageGroup
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        px: 2,
+        sx: {
+          display: {
+            xs: 'none',
+            md: 'flex'
+          }
+        },
+        alignItems: "center",
+        flexGrow: "1",
+        children: /*#__PURE__*/_jsx(ExternalLink, {
+          href: getAccessUrl(domain, rule.from.pathPrefix, getBlockletUrlParams(blocklet, locale)),
+          target: "_blank",
+          style: {
+            fontSize: 16
+          },
+          underline: "hover",
+          children: rule.from.pathPrefix
+        })
+      }, rule.from.pathPrefix), /*#__PURE__*/_jsx(Box, {
+        children: hasPermission && /*#__PURE__*/_jsx("div", {
+          style: {
+            textAlign: 'right'
+          },
+          children: action
+        })
+      }, "actions")]
+    }, "rule"), /*#__PURE__*/_jsx(Line, {}, "divider")];
+  });
+}
+RuleList.propTypes = {
+  hasPermission: PropTypes.bool
+};
+RuleList.defaultProps = {
+  hasPermission: false
+};
+const RuleListInDaemon = withPermission(RuleList, 'mutate_blocklets');
+const RuleListInService = withPermission(RuleList, '', BlockletAdminRoles);
+export default function RuleListWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(RuleListInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(RuleListInDaemon, {
+    ...props
+  });
+}

package/es/blocklet/router/util.js

@@ -0,0 +1,131 @@
+/* eslint-disable import/prefer-default-export */
+import { ROUTING_RULE_TYPES, DEFAULT_IP_DOMAIN_SUFFIX, DOMAIN_FOR_IP_SITE_REGEXP, DOMAIN_FOR_DEFAULT_SITE, DOMAIN_FOR_IP_SITE } from '@abtnode/constant';
+import isPathPrefixEqual from '@abtnode/util/lib/is-path-prefix-equal';
+import { BLOCKLET_DYNAMIC_PATH_PREFIX } from '@blocklet/constant';
+const validateRuleByServiceType = (params, localeContext) => {
+  if (params.type === ROUTING_RULE_TYPES.REDIRECT) {
+    if (!params.url) {
+      return new Error(`${localeContext('router.validation.redirectUrlRequired')}`);
+    }
+    if (!params.redirectCode) {
+      return new Error(`redirect ${localeContext('router.validation.redirectCodeRequired')}`);
+    }
+  } else if (params.type === ROUTING_RULE_TYPES.BLOCKLET) {
+    if (!params.did) {
+      return new Error(localeContext('router.validation.didRequired'));
+    }
+  }
+  return null;
+};
+export const validateDomain = (domain, localeContext) => {
+  if (!domain) {
+    return localeContext('router.domain.validate.emptyTip');
+  }
+  if (domain.endsWith(DEFAULT_IP_DOMAIN_SUFFIX)) {
+    return localeContext('router.domain.validate.suffixTip', {
+      suffix: DEFAULT_IP_DOMAIN_SUFFIX
+    });
+  }
+  return null;
+};
+
+/**
+ * form validator of add site(add domain)
+ * @param {Object} params form params
+ * @param {Function} localeContext error message
+ */
+export const validateSite = (params, localeContext) => {
+  const validateResult = validateRuleByServiceType(params, localeContext);
+  if (validateResult) {
+    return validateResult;
+  }
+  const errMsg = validateDomain(params.domain, localeContext);
+  if (errMsg) {
+    return new Error(errMsg);
+  }
+  return null;
+};
+
+/**
+ * form validator of add_rule and update_rule
+ * @param {Object} params form params
+ * @param {Function} localeContext error message
+ */
+export const validateRule = (params, localeContext) => {
+  const validateResult = validateRuleByServiceType(params, localeContext);
+  if (validateResult) {
+    return validateResult;
+  }
+  if (!params.pathPrefix.length) {
+    return new Error(localeContext('router.validation.pathPrefixCannotBeEmpty'));
+  }
+  if (params.pathPrefix.length > 150) {
+    return new Error(localeContext('router.validation.pathPrefixTooLong', {
+      length: 150
+    }));
+  }
+  return null;
+};
+export const validatePathPrefix = ({
+  params,
+  blocklets,
+  blocklet: curBlocklet,
+  locale = 'en'
+}) => {
+  // validate children
+  if (curBlocklet) {
+    let exist = (curBlocklet.children || []).find(x => isPathPrefixEqual(x.mountPoint, params.pathPrefix));
+    if (curBlocklet.meta.group !== 'gateway' && params.pathPrefix === '/') {
+      exist = '/';
+    }
+    if (exist) {
+      return {
+        zh: `挂载点 ${params.pathPrefix} 已存在，请使用其他挂载点`,
+        en: `The mount point ${params.pathPrefix} already exist, please use another mount point`
+      }[locale];
+    }
+  }
+  const blocklet = blocklets.find(item => item.meta.did === params.did);
+  if (!blocklet) {
+    return '';
+  }
+  const selected = blocklet.meta.interfaces.find(x => x.type === 'web');
+  if (!selected) {
+    return '';
+  }
+  if (selected.prefix !== BLOCKLET_DYNAMIC_PATH_PREFIX && params.pathPrefix !== selected.prefix) {
+    return {
+      zh: `该 blocklet 只能挂载在 ${selected.prefix}`,
+      en: `This blocklet can only be mounted on ${selected.prefix}`
+    }[locale];
+  }
+  return '';
+};
+
+/**
+ * get initial blocklet did when add rule / update rule / add domain
+ * @param {array} blocklets
+ */
+export const getInitialBlockletDid = blocklets => {
+  if (blocklets.length === 0) {
+    return '';
+  }
+  const {
+    searchParams
+  } = new URL(window.location.href);
+  const fromDid = searchParams.get('fromDid');
+  if (fromDid) {
+    const blocklet = blocklets.find(x => x.meta.did === fromDid);
+    if (blocklet) {
+      return blocklet.meta.did;
+    }
+  }
+  return blocklets[0].meta.did;
+};
+export const isSpecialDomain = name => {
+  const specialDomains = [DOMAIN_FOR_IP_SITE_REGEXP, DOMAIN_FOR_DEFAULT_SITE, DOMAIN_FOR_IP_SITE];
+  if (typeof window !== 'undefined' && typeof window.location !== 'undefined') {
+    specialDomains.push(window.location.hostname);
+  }
+  return specialDomains.includes(name);
+};

package/es/blocklet/runtime-info.js

@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import CpuMonitor from '../analytics/cpu';
+import MemoryMonitor from '../analytics/memory';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function BlockletRuntimeInfo({
+  blocklet,
+  cpuHistory,
+  memoryHistory,
+  ...rest
+}) {
+  const runtimeInfo = blocklet.appRuntimeInfo || {};
+  return /*#__PURE__*/_jsx(Div, {
+    component: "div",
+    ...rest,
+    children: /*#__PURE__*/_jsxs(Grid, {
+      className: "page-metrics",
+      container: true,
+      spacing: 5,
+      children: [/*#__PURE__*/_jsx(Grid, {
+        item: true,
+        lg: 4,
+        md: 6,
+        sm: 6,
+        xs: 12,
+        children: !!cpuHistory.length && /*#__PURE__*/_jsx(CpuMonitor, {
+          currentLoad: runtimeInfo.cpuUsage || 0,
+          history: cpuHistory,
+          style: {
+            height: 150
+          }
+        })
+      }, "cpu"), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        lg: 4,
+        md: 6,
+        sm: 6,
+        xs: 12,
+        children: !!memoryHistory.length && /*#__PURE__*/_jsx(MemoryMonitor, {
+          used: runtimeInfo.memoryUsage || 0,
+          history: memoryHistory,
+          style: {
+            height: 150
+          }
+        })
+      }, "memory")]
+    })
+  });
+}
+BlockletRuntimeInfo.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  cpuHistory: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.number,
+    value: PropTypes.number
+  })),
+  memoryHistory: PropTypes.arrayOf(PropTypes.shape({
+    date: PropTypes.number,
+    value: PropTypes.number
+  }))
+};
+BlockletRuntimeInfo.defaultProps = {
+  cpuHistory: [],
+  memoryHistory: []
+};
+const Div = styled(Typography)``;

package/es/blocklet/status.js

@@ -0,0 +1,91 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Spinner from '@mui/material/CircularProgress';
+import Tooltip from '@mui/material/Tooltip';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { isInProgress } from '@blocklet/meta/lib/util';
+import Dot from '../dot';
+import Tag from '../tag';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const colors = {
+  yellow: '#FFCF71',
+  grey: '#888888'
+};
+export default function BlockletStatus({
+  status,
+  variant,
+  source,
+  ...rest
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const map = {
+    added: 'primary',
+    waiting: 'warning',
+    downloading: 'warning',
+    downloaded: 'primary',
+    installing: 'warning',
+    installed: 'primary',
+    starting: 'warning',
+    running: 'success',
+    stopping: 'warning',
+    stopped: 'reverse',
+    error: 'error',
+    upgrading: 'warning',
+    restarting: 'warning',
+    corrupted: 'error',
+    deleting: 'warning'
+  };
+  const colorMap = {
+    added: colors.grey,
+    waiting: colors.yellow,
+    downloading: colors.yellow,
+    downloaded: colors.grey,
+    installing: colors.yellow,
+    installed: colors.grey,
+    starting: colors.yellow,
+    running: 'success',
+    stopping: colors.yellow,
+    stopped: colors.grey,
+    error: 'error',
+    upgrading: colors.yellow,
+    restarting: colors.yellow,
+    corrupted: 'error',
+    deleting: colors.yellow
+  };
+  const inProgress = isInProgress(status);
+  const statusTxt = t(`blocklet.status.${status}`);
+  if (variant === 'dot') {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: t('blocklet.statusTip', {
+        status: statusTxt
+      }),
+      children: /*#__PURE__*/_jsx(Dot, {
+        color: colorMap[status],
+        ...rest
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(Tag, {
+    type: map[status],
+    ...rest,
+    children: [inProgress && /*#__PURE__*/_jsx(Spinner, {
+      size: 12,
+      color: "inherit",
+      style: {
+        marginRight: 5
+      }
+    }), statusTxt]
+  });
+}
+BlockletStatus.propTypes = {
+  status: PropTypes.string.isRequired,
+  variant: PropTypes.oneOf(['dot', 'tag']),
+  source: PropTypes.string
+};
+BlockletStatus.defaultProps = {
+  variant: 'tag',
+  source: ''
+};

package/es/blocklet/storage/action.js

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
+import PropTypes from 'prop-types';
+import ElectricBoltOutlinedIcon from '@mui/icons-material/ElectricBoltOutlined';
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+import { getBackupFilesUrlFromEndpoint, getDIDSpaceUrlFromEndpoint } from '../../util/spaces';
+import DeleteDIDSpacesGateWay from './delete';
+
+/**
+ * @description
+ * @param {{
+ *  spaceGateway: import('./connected').SpaceGateway,
+ *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
+ *  onDelete: (import('./connected').SpaceGateway) => Promise<void>,
+ *  enableSwitchToSpace: boolean,
+ *  connected: boolean
+ * }} { spaceGateway, onDelete, ...rest }
+ * @return {*}
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+function SpaceItemAction({
+  spaceGateway,
+  connected,
+  onDelete,
+  onConnect,
+  enableSwitchToSpace,
+  ...rest
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const {
+    t
+  } = useLocaleContext();
+
+  /**
+   * @description
+   * @param {React.MouseEvent<HTMLButtonElement> | undefined} event
+   */
+  const handleOpen = (event, open) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(open && event.currentTarget);
+  };
+  const handleOnConnect = async e => {
+    handleOpen(e, false);
+    await onConnect(spaceGateway);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "more",
+      "aria-controls": "actions-menu",
+      "aria-haspopup": "true",
+      "data-cy": "trigger-blocklet-actions",
+      onClick: e => handleOpen(e, true),
+      size: "small",
+      ...rest,
+      children: /*#__PURE__*/_jsx(MoreVertIcon, {})
+    }), /*#__PURE__*/_jsxs(Menu, {
+      id: "simple-menu",
+      anchorEl: anchorEl,
+      keepMounted: true,
+      open: Boolean(anchorEl),
+      onClose: e => handleOpen(e, false),
+      children: [/*#__PURE__*/_jsxs(MenuItem, {
+        onClick: e => {
+          handleOpen(e, false);
+          window.open(spaceGateway.endpoint ? getDIDSpaceUrlFromEndpoint(spaceGateway.endpoint) : spaceGateway.url);
+        },
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          style: {
+            minWidth: 24
+          },
+          children: /*#__PURE__*/_jsx(ArrowOutwardIcon, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          children: t('common.open')
+        })]
+      }), /*#__PURE__*/_jsxs(MenuItem, {
+        onClick: e => {
+          handleOpen(e, false);
+          window.open(getBackupFilesUrlFromEndpoint(spaceGateway.endpoint));
+        },
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          style: {
+            minWidth: 24
+          },
+          children: /*#__PURE__*/_jsx(FolderOutlinedIcon, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          children: t('storage.spaces.strategy.viewBackupFiles')
+        })]
+      }), !connected && enableSwitchToSpace && /*#__PURE__*/_jsxs(MenuItem, {
+        onClick: handleOnConnect,
+        children: [/*#__PURE__*/_jsx(ListItemIcon, {
+          style: {
+            minWidth: 24
+          },
+          children: /*#__PURE__*/_jsx(ElectricBoltOutlinedIcon, {
+            fontSize: "small"
+          })
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          children: t('storage.spaces.connect.switchToSpace')
+        })]
+      }), !connected && /*#__PURE__*/_jsx(DeleteDIDSpacesGateWay, {
+        spaceGateway: spaceGateway,
+        onDelete: onDelete
+      })]
+    })]
+  });
+}
+SpaceItemAction.propTypes = {
+  spaceGateway: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    protected: PropTypes.bool,
+    endpoint: PropTypes.string.isRequired
+  }).isRequired,
+  connected: PropTypes.bool.isRequired,
+  enableSwitchToSpace: PropTypes.bool,
+  onDelete: PropTypes.func,
+  onConnect: PropTypes.func
+};
+SpaceItemAction.defaultProps = {
+  onDelete: () => {},
+  onConnect: () => {},
+  enableSwitchToSpace: true
+};
+export default SpaceItemAction;