@abtnode/ux 1.8.33 → 1.8.34

package/lib/blocklet/component/index.js

@@ -47,6 +47,9 @@ var _avatar = _interopRequireDefault(require("../avatar"));
 var _mode = _interopRequireDefault(require("../mode"));
 var _configuration = _interopRequireDefault(require("./configuration"));
 var _delete = _interopRequireDefault(require("./delete"));
+var _line = _interopRequireDefault(require("./line"));
+var _addRule = _interopRequireDefault(require("../router/action/add-rule"));
+var _ruleList = _interopRequireDefault(require("../router/rule-list"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["blocklet", "onUpdate", "getComponentUrl", "AddComponent"];
 var _templateObject, _templateObject2;
@@ -357,13 +360,9 @@ function ComponentItem(_ref) {
         tip: deleteDisabledTip
       })]
     }, "actions")]
-  }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-    ml: Math.max((depth - 1) * 2, 0),
-    sx: {
-      borderBottom: 1,
-      borderColor: 'rgba(0,0,0,0.12)'
-    }
-  }, "group-collapse-box"), (_blocklet$children = blocklet.children) !== null && _blocklet$children !== void 0 && _blocklet$children.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapse.default, {
+  }, "group-not-gateway-box"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_line.default, {
+    depth: depth
+  }), (_blocklet$children = blocklet.children) !== null && _blocklet$children !== void 0 && _blocklet$children.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Collapse.default, {
     in: expand,
     children: blocklet.children.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
       blocklet: x,
@@ -618,34 +617,58 @@ function BlockletComponent(_ref4) {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_permission.default, {
-        permission: "mutate_blocklet",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AddComponent, {
-          blocklet: blocklet,
-          children: _ref6 => {
-            let {
-              open
-            } = _ref6;
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
-              disabled: loading || (0, _util2.isInProgress)(blocklet.status),
-              variant: "text",
-              color: "primary",
-              "data-cy": "add-component",
-              onClick: open,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
-                style: {
-                  fontSize: '1.3em',
-                  marginRight: 4
-                }
-              }), t('blocklet.component.add')]
-            });
-          }
+        permission: inService ? '' : 'mutate_blocklet',
+        role: inService ? _util2.BlockletAdminRoles : [],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_addRule.default, {
+            children: _ref6 => {
+              let {
+                open
+              } = _ref6;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+                disabled: loading || (0, _util2.isInProgress)(blocklet.status),
+                variant: "text",
+                color: "primary",
+                "data-cy": "add-rule",
+                onClick: open,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('router.rule.add.title')]
+              });
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AddComponent, {
+            blocklet: blocklet,
+            children: _ref7 => {
+              let {
+                open
+              } = _ref7;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+                disabled: loading || (0, _util2.isInProgress)(blocklet.status),
+                variant: "text",
+                color: "primary",
+                "data-cy": "add-component",
+                onClick: open,
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('blocklet.component.add')]
+              });
+            }
+          })]
         })
       })]
     }), components && components.length ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       mt: 2,
       ml: {
-        xs: '-16px',
-        md: '-28px'
+        xs: '-12px',
+        md: '-24px'
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ComponentItem, {
         blocklet: blocklet,
@@ -657,6 +680,13 @@ function BlockletComponent(_ref4) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
         children: t('blocklet.component.noComponent')
       })
+    }), !!blocklet.site.rules.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: 0,
+      ml: {
+        xs: '-16px',
+        md: '-28px'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ruleList.default, {})
     }), !!updateConfirm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
       open: true,
       fullWidth: true,

package/lib/blocklet/component/line.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Line;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Line(_ref) {
+  let {
+    depth
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    ml: Math.max((depth - 1) * 2, 0),
+    sx: {
+      borderBottom: 1,
+      borderColor: 'rgba(0,0,0,0.12)'
+    }
+  }, "group-collapse-box");
+}
+Line.propTypes = {
+  depth: _propTypes.default.number
+};
+Line.defaultProps = {
+  depth: 1
+};

package/lib/blocklet/configuration.js

@@ -9,21 +9,32 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _get = _interopRequireDefault(require("lodash/get"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _useTheme = _interopRequireDefault(require("@mui/material/styles/useTheme"));
 var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
 var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
+var _Add = _interopRequireDefault(require("@mui/icons-material/Add"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Button = _interopRequireDefault(require("@arcblock/ux/lib/Button"));
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _LockIcon = _interopRequireDefault(require("@arcblock/icons/lib/LockIcon"));
 var _constant = require("@blocklet/constant");
 var _util = require("@blocklet/meta/lib/util");
 var _toast = _interopRequireDefault(require("../toast"));
 var _schemaForm = _interopRequireDefault(require("../schema-form"));
+var _formTextInput = _interopRequireDefault(require("../form/form-text-input"));
 var _config = _interopRequireDefault(require("../who-can-access/config"));
 var _node = require("../contexts/node");
 var _util2 = require("../util");
 var _permission = require("../permission");
+var _addDomainAlias = _interopRequireDefault(require("./router/action/add-domain-alias"));
+var _domainStatus = _interopRequireDefault(require("./router/domain-status"));
+var _domainActions = _interopRequireDefault(require("./router/domain-actions"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
 const _excluded = ["blocklet", "onUpdate", "hasPermission"],
@@ -61,6 +72,15 @@ function BlockletEnvironment(_ref) {
       useSubscription
     }
   } = node;
+  const {
+    did
+  } = blocklet.meta;
+  const {
+    site
+  } = blocklet;
+  const {
+    domainAliases
+  } = site;
   const clusterMode = (0, _get.default)(blocklet.meta, 'capabilities.clusterMode', false);
   useSubscription('system.info', res => {
     if (clusterMode) {
@@ -273,6 +293,29 @@ function BlockletEnvironment(_ref) {
       setLoading(false);
     }
   };
+  const onUpdateCors = async value => {
+    const oldValue = site.corsAllowedOrigins || [];
+    const newValue = value.split(',').map(x => x.trim()).filter(Boolean);
+    if ((0, _isEqual.default)(oldValue, newValue)) {
+      return false;
+    }
+    try {
+      setLoading(true);
+      await node.api.updateRoutingSite({
+        input: {
+          id: site.id,
+          corsAllowedOrigins: value.split(',').map(x => x.trim()),
+          teamDid: blocklet.meta.did
+        }
+      });
+      setLoading(false);
+    } catch (err) {
+      _toast.default.error(err.message);
+      setLoading(false);
+      return false;
+    }
+    return true;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({}, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_schemaForm.default, {
       disabled: disabled,
@@ -378,6 +421,138 @@ function BlockletEnvironment(_ref) {
       className: "config-form",
       component: _Divider.default,
       my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "config-form",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "config-label",
+          children: t('common.domain')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_addDomainAlias.default, {
+            id: site.id,
+            title: t('router.domain.add.title'),
+            teamDid: did,
+            children: _ref3 => {
+              let {
+                open
+              } = _ref3;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+                style: {
+                  marginLeft: 16
+                },
+                variant: "contained",
+                color: "primary",
+                "data-cy": "add-domain-alias",
+                onClick: open,
+                disabled: (0, _util2.isInProgress)(blocklet.status),
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Add.default, {
+                  style: {
+                    fontSize: '1.3em',
+                    marginRight: 4
+                  }
+                }), t('common.add')]
+              });
+            }
+          })
+        })]
+      }), domainAliases.map((domain, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        mt: index ? 0 : 1,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+            domain: domain,
+            filters: ['domain']
+          }, "".concat(domain.value, "-domain")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            ml: 2,
+            mr: 0.5,
+            children: domain.value
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+            domain: domain,
+            filters: ['http']
+          }, "".concat(domain.value, "-http")), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            style: {
+              marginLeft: 12
+            }
+          })]
+        }), hasPermission && !domain.isProtected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainActions.default, {
+          site: site,
+          domain: domain,
+          blocklet: blocklet
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+          title: t('blocklet.router.domainLockTooltip'),
+          placement: "top",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+            disabled: true,
+            size: "large",
+            style: {
+              pointerEvents: 'auto',
+              // padding replace to margin, fix the tooltip position
+              paddingTop: 0,
+              paddingBottom: 0,
+              margin: '12px 0'
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LockIcon.default, {
+              style: {
+                fill: theme.palette.text.disabled
+              }
+            })
+          })
+        })]
+      }, domain.value)), !domainAliases.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mt: 4,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+          children: t('common.empty')
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      mt: 2,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "config-label",
+        mb: 0,
+        children: t('common.security')
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      className: "config-form",
+      mt: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "config-label",
+        fontSize: 14,
+        mb: 0,
+        children: t('router.domainSecurity.cors.title')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        mb: 1.5,
+        className: "config-desc",
+        children: t('router.domainSecurity.cors.description', {
+          name: 'the blocklet'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_formTextInput.default, {
+        style: {
+          marginTop: 0
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        initialValue: (site.corsAllowedOrigins || []).join(', '),
+        onSubmit: onUpdateCors
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      className: "config-form",
+      component: _Divider.default,
+      my: 3
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       className: "config-form",
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
@@ -427,11 +602,11 @@ function BlockletEnvironment(_ref) {
       defaultValue: {
         [_constant.BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SK]: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_SK').value
       },
-      onChange: (changeValue, _ref3) => {
+      onChange: (changeValue, _ref4) => {
         let {
           action,
           currentItem
-        } = _ref3;
+        } = _ref4;
         if (action === 'edit') {
           setEditingItem(currentItem);
         } else if (['cancel', 'confirm'].includes(action)) {
@@ -464,5 +639,5 @@ BlockletEnvironment.defaultProps = {
   onUpdate: () => {},
   hasPermission: false
 };
-const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .config-form {\n    width: 80%;\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n      max-height: 60vh;\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n"])), props => props.theme.breakpoints.down('md'));
+const Div = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .config-form {\n    width: 80%;\n    flex-grow: 1;\n    overflow-y: auto;\n    ", " {\n      width: 100%;\n      flex-shrink: 0;\n      padding: 0 24px;\n      transform: translate(0, 0);\n      max-height: 60vh;\n    }\n  }\n\n  .config-item {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 16px 0;\n  }\n\n  .config-label {\n    font-weight: bold;\n  }\n\n  .config-desc {\n    font-weight: normal;\n    font-size: 12px;\n    color: #666;\n  }\n\n  .form-item {\n    margin-top: 0;\n  }\n"])), props => props.theme.breakpoints.down('md'));
 const StyledMenuItem = (0, _styled.default)(_MenuItem.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .tip {\n    font-size: 12px;\n    color: ", ";\n  }\n"])), props => props.theme.palette.text.secondary);

package/lib/blocklet/overview.js

@@ -7,28 +7,87 @@ exports.default = BlockletOverview;
 var _react = require("react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Spinner = _interopRequireDefault(require("@arcblock/ux/lib/Spinner"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Tag = _interopRequireDefault(require("@arcblock/ux/lib/Tag"));
 var _InfoRow = _interopRequireDefault(require("@arcblock/ux/lib/InfoRow"));
 var _util = require("@blocklet/meta/lib/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _Empty = _interopRequireDefault(require("@arcblock/ux/lib/Empty"));
+var _blocklet = require("../contexts/blocklet");
+var _util2 = require("../util");
 var _didAddress = _interopRequireDefault(require("../did-address"));
 var _blockletSource = _interopRequireDefault(require("./blocklet-source"));
 var _runtimeInfo = _interopRequireDefault(require("./runtime-info"));
 var _diskInfo = _interopRequireDefault(require("./disk-info"));
 var _status = _interopRequireDefault(require("./status"));
 var _version = _interopRequireDefault(require("./version"));
-var _util2 = require("../util");
+var _domainStatus = _interopRequireDefault(require("./router/domain-status"));
+var _types = require("./types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject;
 const _excluded = ["blocklet"];
+var _templateObject, _templateObject2;
 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+function DomainLink(_ref) {
+  let {
+    domain,
+    children
+  } = _ref;
+  const {
+    t
+  } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    href,
+    accessibility
+  } = domain;
+  if (!accessibility || accessibility.loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkDiv, {
+      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: t('blocklet.router.checkUrlAccessible'),
+        placement: "top-end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "status",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+            size: 12
+          })
+        })
+      })]
+    });
+  }
+  if (!accessibility.accessible) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkDiv, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
+        title: t('blocklet.router.urlInaccessible'),
+        placement: "top-end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: children
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkDiv, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+      href: href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: children
+    })
+  });
+}
+DomainLink.propTypes = {
+  domain: _types.DomainType.isRequired,
+  children: _propTypes.default.any.isRequired
+};
+const LinkDiv = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &,\n  & > * {\n    color: #222;\n    font-size: 18px;\n  }\n\n  .status {\n    margin-left: 8px;\n  }\n"])));
 const getEngineRows = (engine, t) => {
   if (!engine) {
     return [];
@@ -46,15 +105,18 @@ const getEngineRows = (engine, t) => {
     })
   }];
 };
-function BlockletOverview(_ref) {
+function BlockletOverview(_ref2) {
   var _blocklet$settings;
   let {
       blocklet
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   const {
     t
   } = (0, _react.useContext)(_context.LocaleContext);
+  const {
+    loadingRuntimeInfo
+  } = (0, _blocklet.useBlockletContext)();
   const {
     value: appDid
   } = (blocklet.environments || []).find(x => x.key === 'BLOCKLET_APP_ID') || {};
@@ -139,10 +201,65 @@ function BlockletOverview(_ref) {
       children: row.value
     }, row.name);
   });
+  const {
+    site
+  } = blocklet;
+  const {
+    domainAliases = []
+  } = site || {};
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, _objectSpread(_objectSpread({
     component: "div"
   }, rest), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        className: "title first",
+        mb: 0,
+        children: t('common.domain')
+      })
+    }), blocklet.status !== 'running' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      mt: -2,
+      mb: 1.5,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+        severity: "warning",
+        children: t('blocklet.router.noRunning')
+      })
+    }), domainAliases.map((domain, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      mt: index ? 3 : 0,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+          domain: domain,
+          filters: ['domain']
+        }, "".concat(domain.value, "-domain")), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          ml: 2,
+          mr: 0.5,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DomainLink, {
+            domain: domain,
+            target: "_blank",
+            children: domain.value
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_domainStatus.default, {
+          domain: domain,
+          filters: ['http']
+        }, "".concat(domain.value, "-http")), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          style: {
+            marginLeft: 12
+          }
+        })]
+      })
+    }, domain.value)), !domainAliases.length && (loadingRuntimeInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
+      size: 16
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Empty.default, {
+      children: t('common.empty')
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "title",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: t('common.basicInfo')
@@ -159,11 +276,11 @@ function BlockletOverview(_ref) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "title",
         children: t('common.engine')
-      }), engineRows.map(_ref2 => {
+      }), engineRows.map(_ref3 => {
         let {
           name,
           value
-        } = _ref2;
+        } = _ref3;
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InfoRow.default, {
           nameWidth: 120,
           name: name,
@@ -181,4 +298,4 @@ function BlockletOverview(_ref) {
 BlockletOverview.propTypes = {
   blocklet: _propTypes.default.object.isRequired
 };
-const Div = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n"])), props => props.theme.spacing(5), props => props.theme.spacing(3));
+const Div = (0, _styled.default)(_Typography.default)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .title {\n    font-size: 1.2rem;\n    font-weight: bold;\n    margin-top: ", ";\n    margin-bottom: ", ";\n    &.first {\n      margin-top: 0;\n    }\n  }\n"])), props => props.theme.spacing(5), props => props.theme.spacing(3));