@abtnode/ux 1.16.13-beta-0656f92f → 1.16.13-beta-2eb54cbc

package/lib/analytics/traffic.js

@@ -0,0 +1,269 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TrafficInsights;
+exports.getDefaultRanges = void 0;
+var _react = require("react");
+var _dayjs = _interopRequireDefault(require("@abtnode/util/lib/dayjs"));
+var _nthArg = _interopRequireDefault(require("lodash/nthArg"));
+var _urlJoin = _interopRequireDefault(require("url-join"));
+var _filesize = _interopRequireDefault(require("filesize"));
+var _useAsyncRetry = _interopRequireDefault(require("react-use/lib/useAsyncRetry"));
+var _reactIframe = _interopRequireDefault(require("react-iframe"));
+var _Alert = _interopRequireDefault(require("@mui/material/Alert"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
+var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
+var _LaunchOutlined = _interopRequireDefault(require("@mui/icons-material/LaunchOutlined"));
+var _muiDaterangePicker = require("mui-daterange-picker");
+var _xDatePickers = require("@mui/x-date-pickers");
+var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
+var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _constant = require("@abtnode/constant");
+var _dateFns = require("date-fns");
+var _util = require("../util");
+var _node = require("../contexts/node");
+var _chart = _interopRequireDefault(require("./chart"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); } /* eslint-disable react/prop-types */ /* eslint-disable react-hooks/exhaustive-deps */
+const noop = (0, _nthArg.default)(0);
+const getDefaultRanges = (date, locale) => [{
+  label: 'This Week',
+  startDate: (0, _dateFns.startOfWeek)(date, {
+    locale
+  }),
+  endDate: (0, _dateFns.endOfWeek)(date, {
+    locale
+  })
+}, {
+  label: 'Last Week',
+  startDate: (0, _dateFns.startOfWeek)((0, _dateFns.addWeeks)(date, -1), {
+    locale
+  }),
+  endDate: (0, _dateFns.endOfWeek)((0, _dateFns.addWeeks)(date, -1), {
+    locale
+  })
+}, {
+  label: 'Last 7 Days',
+  startDate: (0, _dateFns.addWeeks)(date, -1),
+  endDate: date
+}, {
+  label: 'This Month',
+  startDate: (0, _dateFns.startOfMonth)(date),
+  endDate: (0, _dateFns.endOfMonth)(date)
+}, {
+  label: 'Last Month',
+  startDate: (0, _dateFns.startOfMonth)((0, _dateFns.addMonths)(date, -1)),
+  endDate: (0, _dateFns.endOfMonth)((0, _dateFns.addMonths)(date, -1))
+}, {
+  label: 'This Year',
+  startDate: (0, _dateFns.startOfYear)(date),
+  endDate: (0, _dateFns.endOfYear)(date)
+}, {
+  label: 'Last Year',
+  startDate: (0, _dateFns.startOfYear)((0, _dateFns.addYears)(date, -1)),
+  endDate: (0, _dateFns.endOfYear)((0, _dateFns.addYears)(date, -1))
+}];
+exports.getDefaultRanges = getDefaultRanges;
+function TrafficInsights(_ref) {
+  let {
+    client,
+    did
+  } = _ref;
+  const maxDate = (0, _dayjs.default)().subtract(1, 'day').toDate();
+  const {
+    info,
+    inService
+  } = (0, _node.useNodeContext)();
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [date, setDate] = (0, _react.useState)(maxDate);
+  const [dateRange, setDateRange] = (0, _react.useState)({
+    startDate: (0, _dayjs.default)().subtract(30, 'day').toDate(),
+    endDate: maxDate
+  });
+  const data = (0, _useAsyncRetry.default)(async () => {
+    const result = await client.getTrafficInsights({
+      input: {
+        did,
+        startDate: (0, _dayjs.default)(dateRange.startDate).format('YYYY-MM-DD'),
+        endDate: (0, _dayjs.default)(dateRange.endDate).format('YYYY-MM-DD')
+      }
+    });
+    return result.list;
+  });
+  (0, _react.useEffect)(() => {
+    if (data.loading) {
+      return;
+    }
+    if (dateRange.startDate && dateRange.endDate) {
+      data.retry();
+    }
+  }, [dateRange]);
+  const onTriggerClick = e => {
+    if (anchorEl) {
+      setAnchorEl(null);
+    } else {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  const list = data.value || [];
+  const {
+    loading,
+    error
+  } = data;
+  if (!list.length && loading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {});
+  }
+  if (error) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+      severity: "error",
+      children: (0, _util.formatError)(error)
+    });
+  }
+  const metrics = {
+    totalRequests: noop,
+    validRequests: noop,
+    failedRequests: noop,
+    uniqueVisitors: noop,
+    uniqueFiles: noop,
+    uniqueReferrers: noop,
+    uniqueNotFound: noop,
+    uniqueStaticFiles: noop,
+    logSize: _filesize.default,
+    bandwidth: _filesize.default
+  };
+  const charts = Object.keys(metrics).map(key => ({
+    id: "".concat(key, "_chart"),
+    title: t("analytics.traffic.".concat(key)),
+    current: list.length ? metrics[key](list[0][key]) : 0,
+    data: list.map(v => ({
+      date: v.date,
+      value: v[key]
+    })).reverse(),
+    dateFn: noop,
+    valueFn: metrics[key]
+  }));
+  const open = Boolean(anchorEl);
+  const id = open ? 'date-range-picker-popover' : undefined;
+
+  // eslint-disable-next-line no-nested-ternary
+  const pathPrefix = inService ? _constant.WELLKNOWN_SERVICE_PATH_PREFIX : process.env.NODE_ENV === 'production' ? info.routing.adminPath : '';
+  const breakdownUrl = (0, _urlJoin.default)(window.location.origin, pathPrefix, "/api/analytics/traffic?date=".concat((0, _dayjs.default)(date).format('YYYY-MM-DD'), "&did=").concat(did));
+  const onRangeChange = range => {
+    setDateRange(range);
+    setAnchorEl(null);
+  };
+  const onDateChange = newDate => {
+    setDate(newDate.toDate());
+    setLoaded(false);
+  };
+  const onOpenBreakdown = () => {
+    window.open(breakdownUrl);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "div",
+      variant: "h5",
+      className: "page-header",
+      color: "textPrimary",
+      style: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      mb: 2,
+      children: [t('analytics.trend'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+        onClick: onTriggerClick,
+        variant: "outlined",
+        size: "small",
+        color: "secondary",
+        children: [(0, _util.formatToDate)(dateRange.startDate, locale), " - ", (0, _util.formatToDate)(dateRange.endDate, locale)]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: () => setAnchorEl(null),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDaterangePicker.DateRangePicker, {
+        open: true,
+        toggle: onTriggerClick,
+        maxDate: maxDate,
+        definedRanges: getDefaultRanges(date),
+        onChange: onRangeChange
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+      container: true,
+      spacing: 4,
+      children: charts.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+        item: true,
+        lg: 3,
+        md: 6,
+        sm: 6,
+        xs: 12,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chart.default, _objectSpread({}, x))
+      }, x.id))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+      component: "div",
+      variant: "h5",
+      className: "page-header",
+      color: "textPrimary",
+      style: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      mt: 4,
+      mb: 1,
+      children: [t('analytics.detail'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+          onClick: onOpenBreakdown,
+          style: {
+            marginRight: 32
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LaunchOutlined.default, {})
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LocalizationProvider.LocalizationProvider, {
+          dateAdapter: _AdapterDayjs.AdapterDayjs,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDatePickers.DatePicker, {
+            disableFuture: true,
+            format: "ll",
+            value: (0, _dayjs.default)(date),
+            onChange: onDateChange,
+            slotProps: {
+              textField: {
+                size: 'small'
+              }
+            }
+          })
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIframe.default, {
+      url: breakdownUrl,
+      width: "100%",
+      height: "100%",
+      frameBorder: 0,
+      onLoad: () => setLoaded(true),
+      styles: {
+        border: 0,
+        minHeight: '400vh'
+      }
+    })]
+  });
+}

package/lib/blocklet/component/index.js

@@ -153,7 +153,8 @@ function ComponentItem(_ref) {
     app
   } = _ref;
   const {
-    t
+    t,
+    locale
   } = (0, _react.useContext)(_context.LocaleContext);
   const [expand, setExpand] = (0, _react.useState)(true);
   const [componentInfo, setComponentInfo] = (0, _react.useState)();
@@ -217,10 +218,10 @@ function ComponentItem(_ref) {
     })
   }, blocklet.status === 'running' ? {
     name: t('blocklet.startedAt'),
-    value: (0, _util2.formatToDatetime)(blocklet.startedAt)
+    value: (0, _util2.formatToDatetime)(blocklet.startedAt, locale)
   } : null, blocklet.status !== 'running' ? {
     name: t('blocklet.stoppedAt'),
-    value: (0, _util2.formatToDatetime)(blocklet.stoppedAt)
+    value: (0, _util2.formatToDatetime)(blocklet.stoppedAt, locale)
   } : null, {
     name: t('common.mountPoint'),
     value: mountPoint

package/lib/blocklet/overview.js

@@ -93,7 +93,8 @@ const LinkDiv = _styled.default.span(_templateObject || (_templateObject = _tagg
 function BlockletOverview() {
   var _blocklet$environment, _blocklet$controller, _blocklet$controller2, _blocklet$controller3, _blocklet$settings, _blocklet$site;
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const {
     info: nodeInfo,
@@ -153,7 +154,7 @@ function BlockletOverview() {
     })
   } : null, {
     name: t('blocklet.installedAt'),
-    value: (0, _util2.formatToDatetime)(blocklet.installedAt)
+    value: (0, _util2.formatToDatetime)(blocklet.installedAt, locale)
   }, {
     name: t('blocklet.overview.accessControl'),
     value: t("team.whoCanAccess.".concat((0, _util.getWhoCanAccess)(blocklet), ".title"))

package/lib/blocklet/runtime-info.js

@@ -8,8 +8,8 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
-var _cpu = _interopRequireDefault(require("../monitor/cpu"));
-var _memory = _interopRequireDefault(require("../monitor/memory"));
+var _cpu = _interopRequireDefault(require("../analytics/cpu"));
+var _memory = _interopRequireDefault(require("../analytics/memory"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 const _excluded = ["blocklet", "cpuHistory", "memoryHistory"];
@@ -48,8 +48,7 @@ function BlockletRuntimeInfo(_ref) {
           history: cpuHistory,
           style: {
             height: 150
-          },
-          hideDescription: true
+          }
         })
       }, "cpu"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
         item: true,
@@ -62,8 +61,7 @@ function BlockletRuntimeInfo(_ref) {
           history: memoryHistory,
           style: {
             height: 150
-          },
-          hideDescription: true
+          }
         })
       }, "memory")]
     })

package/lib/blocklet/storage/backups.js

@@ -11,7 +11,7 @@ var _material = require("@mui/material");
 var _react = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
 var _ahooks = require("ahooks");
-var _dayjs = _interopRequireDefault(require("dayjs"));
+var _dayjs = _interopRequireDefault(require("@abtnode/util/lib/dayjs"));
 var _HelpOutline = _interopRequireDefault(require("@mui/icons-material/HelpOutline"));
 var _propTypes = require("prop-types");
 var _node = require("../../contexts/node");
@@ -208,35 +208,23 @@ function SpacesBackupRecords(_ref2) {
       }
     }
   }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between"
-    }, rest), {}, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-        fontSize: "1.2rem",
-        fontWeight: "bold",
-        children: t('storage.spaces.backup.records')
-      })
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-      children: backups !== null && backups !== void 0 && backups.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
-        data: backups,
-        columns: columns,
-        emptyNode: t('storage.spaces.record.emptyData', locale),
-        options: {
-          download: false,
-          filter: false,
-          print: false
-        }
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
-        color: "#9397A1",
-        marginTop: "24px",
-        children: t('storage.spaces.record.emptyData')
-      })
-    })]
-  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, _objectSpread(_objectSpread({}, rest), {}, {
+    children: backups !== null && backups !== void 0 && backups.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+      title: t('storage.spaces.backup.records'),
+      data: backups,
+      columns: columns,
+      emptyNode: t('storage.spaces.record.emptyData', locale),
+      options: {
+        download: false,
+        filter: false,
+        print: false
+      }
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+      color: "#9397A1",
+      marginTop: "24px",
+      children: t('storage.spaces.record.emptyData')
+    })
+  }));
 }
 SpacesBackupRecords.propTypes = {
   progress: _propTypes.object.isRequired,

package/lib/blocklet/storage/connected.js

@@ -17,6 +17,7 @@ var _node = require("../../contexts/node");
 var _spaces = require("../../util/spaces");
 var _useBackupProgress = _interopRequireDefault(require("../../hooks/use-backup-progress"));
 var _spaceGateway = require("../../util/space-gateway");
+var _diskInfo = _interopRequireDefault(require("../disk-info"));
 var _util = require("../../util");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -192,6 +193,13 @@ function Connected() {
       },
       spaceGateways: spaceGateways,
       progress: progress
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      fontSize: "1.2rem",
+      fontWeight: "bold",
+      mb: 2,
+      children: t('common.dataStorage')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_diskInfo.default, {
+      blocklet: blocklet
     })]
   });
 }

package/lib/blocklet/storage/disconnect.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _context = require("@arcblock/ux/lib/Locale/context");
+var _blocklet = require("../../../lib/contexts/blocklet");
 var _connectTo = _interopRequireDefault(require("./connect-to"));
+var _diskInfo = _interopRequireDefault(require("../disk-info"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -210,23 +212,35 @@ function Disconnect() {
   const {
     t
   } = (0, _context.useLocaleContext)();
+  const {
+    blocklet
+  } = (0, _blocklet.useBlockletContext)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-    minHeight: "50vh",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    alignContent: "center",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EmptySpacesNFT, {
-      style: {
-        width: 200,
-        height: 250
-      }
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      minHeight: "40vh",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      alignContent: "center",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EmptySpacesNFT, {
+        style: {
+          width: 200,
+          height: 250
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        marginTop: "24px",
+        marginBottom: "24px",
+        children: t('storage.spaces.connect.provider')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectTo.default, {})]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-      marginTop: "24px",
-      marginBottom: "24px",
-      children: t('storage.spaces.connect.provider')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_connectTo.default, {})]
+      fontSize: "1.2rem",
+      fontWeight: "bold",
+      mb: 2,
+      children: t('common.dataStorage')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_diskInfo.default, {
+      blocklet: blocklet
+    })]
   });
 }
 Disconnect.propTypes = {};

package/lib/blocklet/transfer-owner.js

@@ -38,12 +38,10 @@ function TransferOwner(_ref) {
   } = (0, _react.useContext)(_session.SessionContext);
   const [loading, setLoading] = (0, _react.useState)(false);
   const {
+    t,
     locale
   } = (0, _context.useLocaleContext)();
   const [error, setError] = (0, _react.useState)('');
-  const {
-    t
-  } = (0, _context.useLocaleContext)();
   const [openTransferOwner, setOpenTransferOwner] = (0, _react.useState)(false);
   const [activeStep, setActiveStep] = (0, _react.useState)(0);
   const [result, setResult] = (0, _react.useState)('');
@@ -131,7 +129,7 @@ function TransferOwner(_ref) {
             mt: 2,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Bold, {
               children: t('team.transferApp.transferDialog.createSuccessTip2', {
-                expireDate: (0, _util.formatToDatetime)(result.expireDate)
+                expireDate: (0, _util.formatToDatetime)(result.expireDate, locale)
               })
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {

package/lib/certificate.js

@@ -24,7 +24,8 @@ function Certificate(_ref) {
   const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
   const node = (0, _node.useNodeContext)();
   const {
-    t
+    t,
+    locale
   } = (0, _context.useLocaleContext)();
   const handlePopoverOpen = event => {
     setAnchorEl(event.currentTarget);
@@ -91,10 +92,10 @@ function Certificate(_ref) {
               children: "".concat(t('common.issuer'), ": ").concat((0, _get.default)(certificate, 'issuer.commonName', ''))
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               component: "div",
-              children: "".concat(t('router.cert.issuedOn'), ": ").concat((0, _util.formatToDate)(certificate.validFrom))
+              children: "".concat(t('router.cert.issuedOn'), ": ").concat((0, _util.formatToDate)(certificate.validFrom, locale))
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
               component: "div",
-              children: "".concat(t('router.cert.expiryOn'), ": ").concat((0, _util.formatToDate)(certificate.validTo))
+              children: "".concat(t('router.cert.expiryOn'), ": ").concat((0, _util.formatToDate)(certificate.validTo, locale))
             })]
           })]
         })

package/lib/hooks/blocklet.js

@@ -20,7 +20,7 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 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); }
 // eslint-disable-next-line import/prefer-default-export
 function useBlocklet(_ref) {
-  var _blocklet$site, _blocklet$site$domain, _blocklet$meta, _blocklet$meta2, _blocklet$meta3, _blocklet$meta4, _blocklet$meta5, _blocklet$meta6, _blocklet$meta7, _blocklet$meta8, _blocklet$meta9;
+  var _blocklet$site, _blocklet$site$domain, _blocklet$meta, _blocklet$meta2, _blocklet$meta3, _blocklet$meta4, _blocklet$meta5, _blocklet$meta6, _blocklet$meta7;
   let {
     did,
     client,
@@ -189,14 +189,31 @@ function useBlocklet(_ref) {
       [data.domain]: _objectSpread(_objectSpread({}, pre[data.domain]), data)
     }));
   }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta = blocklet.meta) === null || _blocklet$meta === void 0 ? void 0 : _blocklet$meta.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.statusChange, handleRefreshWithoutRuntime, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did, !disableSubscription]); // eslint-disable-line prettier/prettier
+  useSubscription(_constant.BlockletEvents.statusChange, data => {
+    var _data$meta3;
+    if ((data === null || data === void 0 ? void 0 : (_data$meta3 = data.meta) === null || _data$meta3 === void 0 ? void 0 : _data$meta3.did) === blocklet.meta.did) {
+      setBlocklet(oldBlocklet => {
+        const newBlocklet = _objectSpread({}, oldBlocklet);
+        newBlocklet.status = (0, _constant.fromBlockletStatus)(data.status);
+        (newBlocklet.children || []).forEach(x => {
+          const y = data.children.find(z => {
+            var _z$meta, _x$meta;
+            return ((_z$meta = z.meta) === null || _z$meta === void 0 ? void 0 : _z$meta.did) === ((_x$meta = x.meta) === null || _x$meta === void 0 ? void 0 : _x$meta.did);
+          });
+          if (y) {
+            x.status = (0, _constant.fromBlockletStatus)(y.status);
+          }
+        });
+        return newBlocklet;
+      });
+      handleRefreshWithoutRuntime(data);
+    }
+  }, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta2 = blocklet.meta) === null || _blocklet$meta2 === void 0 ? void 0 : _blocklet$meta2.did, !disableSubscription]); // eslint-disable-line prettier/prettier
   useSubscription(_constant.BlockletEvents.storeChange, handleRefreshWithoutRuntime, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta3 = blocklet.meta) === null || _blocklet$meta3 === void 0 ? void 0 : _blocklet$meta3.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.started, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta4 = blocklet.meta) === null || _blocklet$meta4 === void 0 ? void 0 : _blocklet$meta4.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.startFailed, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta5 = blocklet.meta) === null || _blocklet$meta5 === void 0 ? void 0 : _blocklet$meta5.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.installed, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta6 = blocklet.meta) === null || _blocklet$meta6 === void 0 ? void 0 : _blocklet$meta6.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.upgraded, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta7 = blocklet.meta) === null || _blocklet$meta7 === void 0 ? void 0 : _blocklet$meta7.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.downgraded, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta8 = blocklet.meta) === null || _blocklet$meta8 === void 0 ? void 0 : _blocklet$meta8.did, !disableSubscription]);
-  useSubscription(_constant.BlockletEvents.updated, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta9 = blocklet.meta) === null || _blocklet$meta9 === void 0 ? void 0 : _blocklet$meta9.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.installed, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta4 = blocklet.meta) === null || _blocklet$meta4 === void 0 ? void 0 : _blocklet$meta4.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.upgraded, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta5 = blocklet.meta) === null || _blocklet$meta5 === void 0 ? void 0 : _blocklet$meta5.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.downgraded, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta6 = blocklet.meta) === null || _blocklet$meta6 === void 0 ? void 0 : _blocklet$meta6.did, !disableSubscription]);
+  useSubscription(_constant.BlockletEvents.updated, handleRefresh, [blocklet === null || blocklet === void 0 ? void 0 : (_blocklet$meta7 = blocklet.meta) === null || _blocklet$meta7 === void 0 ? void 0 : _blocklet$meta7.did, !disableSubscription]);
   const data = blocklet ? (0, _merge.default)(blocklet, {
     site: {
       domainAliases: blocklet.site.domainAliases.map(x => {

package/lib/invitation/invitation-receive.js

@@ -71,7 +71,7 @@ function InvitationReceive(_ref) {
         children: t('invite.receive')
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "invite-receive__until",
-        children: [t('invite.validUntil'), (0, _util.formatDateTime)(invitation.expireDate)]
+        children: [t('invite.validUntil'), (0, _util.formatDateTime)(invitation.expireDate, locale)]
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Connect.default, {
       popup: true,

package/lib/locales/en.js

@@ -131,7 +131,7 @@ module.exports = {
     createdAt: 'Created At',
     createdBy: 'Created By',
     dAddress: 'Decentralized Identifiers (DID)',
-    dataStorage: 'Data Storage',
+    dataStorage: 'Storage on Local Disk',
     delConfirm: 'Delete',
     delConfirmDescription: 'Confirm delete {data}?',
     delete: 'Delete',
@@ -202,7 +202,9 @@ module.exports = {
     members: 'Members',
     memory: 'Memory',
     meta: 'Meta Data',
-    monitor: 'Monitor',
+    analytics: 'Analytics',
+    runtime: 'Runtime',
+    traffic: 'Traffic',
     more: 'More',
     mountPoint: 'MountPoint',
     name: 'Name',
@@ -691,7 +693,7 @@ module.exports = {
         verifying: 'Verifying Blocklet Server v{version}',
         rollback: 'Rollback Blocklet Server',
         complete: 'Upgrade complete!',
-        progress: 'Upgrading Blocklet Server to v{version}',
+        progress: 'Upgrading Blocklet Server {version}',
         check: 'Check for Updates',
         latest: 'You are running the latest version.'
       },
@@ -1461,5 +1463,21 @@ module.exports = {
     },
     loading: 'Load subscription...',
     loadFailed: 'Failed to load subscription info, please retry!'
+  },
+  analytics: {
+    trend: 'Trends',
+    detail: 'Breakdown',
+    traffic: {
+      totalRequests: 'Total Requests',
+      validRequests: 'Success Requests',
+      failedRequests: 'Failed Requests',
+      uniqueVisitors: 'Unique Visitors',
+      uniqueFiles: 'Unique URLs',
+      uniqueReferrers: 'Unique Referrers',
+      uniqueNotFound: 'Unique 404',
+      uniqueStaticFiles: 'Unique Static Files',
+      logSize: 'Log Size',
+      bandwidth: 'Bandwidth'
+    }
   }
 };