@abtnode/ux 1.16.13-beta-d17a7de4 → 1.16.13-beta-90ded76f

package/lib/blocklet/component/index.js

@@ -45,6 +45,7 @@ var _tag = _interopRequireDefault(require("../../tag"));
 var _blockletSource = _interopRequireDefault(require("../blocklet-source"));
 var _status = _interopRequireDefault(require("../status"));
 var _version = _interopRequireDefault(require("../version"));
+var _confirm = _interopRequireDefault(require("../../confirm"));
 var _node = require("../../contexts/node");
 var _util2 = require("../../util");
 var _permission = _interopRequireDefault(require("../../permission"));
@@ -152,12 +153,14 @@ 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)();
   const [showDeleteConfirm, setShowDeleteConfirm] = (0, _react.useState)(false);
   const [loading, setLoading] = (0, _react.useState)(false);
+  const [confirmSetting, setConfirmSetting] = (0, _react.useState)(null);
   const {
     deletingBlocklets: deletingComponents
   } = (0, _deletingBlocklets.useDeletingBlockletContext)();
@@ -215,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
@@ -427,10 +430,19 @@ function ComponentItem(_ref) {
         }, {
           icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Replay.default, {}),
           text: t('common.restart'),
-          onClick: async () => {
-            setLoading(true);
-            await onRestart(blocklet);
-            setLoading(false);
+          onClick: () => {
+            setConfirmSetting({
+              title: "".concat(t('common.restart'), " ").concat(blocklet.meta.title),
+              description: t('blocklet.action.restartDescription'),
+              confirm: t('blocklet.action.confirmRestart'),
+              cancel: t('common.cancel'),
+              onConfirm: async () => {
+                setLoading(true);
+                await onRestart(blocklet);
+                setLoading(false);
+              },
+              onCancel: () => setConfirmSetting(null)
+            });
           },
           disabled: appInProgress || componentInProgress || blocklet.status !== 'running'
         }, {
@@ -501,6 +513,14 @@ function ComponentItem(_ref) {
     tip: deleteDisabledTip,
     hideBtn: true,
     showConfirm: showDeleteConfirm
+  }), confirmSetting && /*#__PURE__*/(0, _jsxRuntime.jsx)(_confirm.default, {
+    title: confirmSetting.title,
+    description: confirmSetting.description,
+    confirm: confirmSetting.confirm,
+    cancel: confirmSetting.cancel,
+    params: confirmSetting.params,
+    onConfirm: confirmSetting.onConfirm,
+    onCancel: confirmSetting.onCancel
   })];
 }
 ComponentItem.propTypes = {

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("../insights/cpu"));
+var _memory = _interopRequireDefault(require("../insights/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/{monitor → insights}/card.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = MonitCard;
+exports.default = InsightCard;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _Card = _interopRequireDefault(require("@mui/material/Card"));
@@ -19,14 +19,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 MonitCard(_ref) {
+function InsightCard(_ref) {
   let {
     style,
     title,
     value,
     graph,
-    description,
-    hideDescription
+    description
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCard, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CardContent.default, {
@@ -42,7 +41,7 @@ function MonitCard(_ref) {
         component: "div",
         mt: 1,
         children: value
-      }), graph, !hideDescription && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      }), graph, !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         display: "flex",
         sx: {
           fontSize: 12,
@@ -54,20 +53,18 @@ function MonitCard(_ref) {
     })
   });
 }
-MonitCard.propTypes = {
+InsightCard.propTypes = {
   style: _propTypes.default.object,
   title: _propTypes.default.node,
   value: _propTypes.default.node,
   graph: _propTypes.default.node,
-  description: _propTypes.default.node,
-  hideDescription: _propTypes.default.bool
+  description: _propTypes.default.any
 };
-MonitCard.defaultProps = {
+InsightCard.defaultProps = {
   style: {},
   title: null,
   value: null,
   graph: null,
-  description: null,
-  hideDescription: false
+  description: null
 };
 const StyledCard = (0, _styled.default)(_Card.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .card-content {\n    height: 150px;\n  }\n\n  .card-sparkline {\n    flex: 2;\n    display: flex;\n    position: relative;\n    *[hidden] {\n      display: none;\n    }\n  }\n  .sparkline {\n    stroke: ", ";\n    fill: ", "1A;\n  }\n  .tooltip {\n    position: absolute;\n    background: rgba(0, 0, 0, 0.7);\n    color: #fff;\n    padding: 2px 5px;\n    font-size: 12px;\n    white-space: nowrap;\n    z-index: 9999;\n  }\n  .sparkline--cursor {\n    stroke: orange;\n  }\n\n  .sparkline--spot {\n    fill: red;\n    stroke: red;\n  }\n"])), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main);

package/lib/{monitor/cpu.js → insights/chart.js}

@@ -3,32 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = CpuMonitor;
-var _react = require("react");
+exports.default = InsightChart;
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ahooks = require("ahooks");
-var _context = require("@arcblock/ux/lib/Locale/context");
 var _Sparkline = _interopRequireDefault(require("@arcblock/ux/lib/Sparkline"));
 var _card = _interopRequireDefault(require("./card"));
-var _util = require("../util");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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); }
-const formatNumber = x => "".concat(x, "%");
-function CpuMonitor(_ref) {
+function InsightChart(_ref) {
   let {
-    cpus,
-    currentLoad,
-    history,
-    hideDescription
+    id,
+    title,
+    current,
+    description,
+    data,
+    dateFn,
+    valueFn
   } = _ref;
-  const {
-    t
-  } = (0, _react.useContext)(_context.LocaleContext);
   const svgRef = (0, _react.useRef)(null);
   const tooltipRef = (0, _react.useRef)(null);
   const tooltipState = (0, _ahooks.useReactive)({
@@ -39,15 +38,17 @@ function CpuMonitor(_ref) {
     hidden: true,
     textContent: ''
   });
-  const [cpuDom, setCpuDom] = (0, _react.useState)();
-  const size = (0, _ahooks.useSize)(cpuDom) || {};
+  const [container, setContainer] = (0, _react.useState)(null);
+  const size = (0, _ahooks.useSize)(container);
   const sparklineOptions = {
-    onmousemove(event, dataPoint) {
-      const date = (0, _util.formatTime)(dataPoint.date, 'HH:mm');
-      const left = '80px';
-      tooltipState.textContent = "".concat(date, ": ").concat(formatNumber(dataPoint.value));
-      tooltipState.style.top = '-30px';
-      tooltipState.style.left = left;
+    onmousemove(e, dataPoint) {
+      const {
+        date,
+        value
+      } = dataPoint;
+      tooltipState.textContent = "".concat(dateFn(date), ": ").concat(valueFn(value));
+      tooltipState.style.top = -30;
+      tooltipState.style.left = 80;
       tooltipState.hidden = false;
     },
     onmouseout() {
@@ -55,32 +56,28 @@ function CpuMonitor(_ref) {
     }
   };
   (0, _react.useEffect)(() => {
-    // if (!loading) {
-    //   // see: https://github.com/alibaba/hooks/issues/838
-    // }
     setTimeout(() => {
-      setCpuDom(document.querySelector('.cpu-sparkline'));
+      setContainer(document.querySelector(".".concat(id)));
       setTimeout(() => {
         if (svgRef.current) {
-          // sparkline(svgRef.current, downloads, sparklineOptions);
-          (0, _Sparkline.default)(svgRef.current, history || [], sparklineOptions);
+          (0, _Sparkline.default)(svgRef.current, data || [], sparklineOptions);
         }
       }, 400);
     });
-  }, [history]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_card.default, {
-    title: t('common.cpu'),
-    value: "".concat(Math.floor(currentLoad || 0), "%"),
+    title: title,
+    value: current,
     graph: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "card-sparkline cpu-sparkline",
+      className: "card-sparkline ".concat(id),
       style: {
         marginTop: 16
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
         ref: svgRef,
         className: "sparkline",
-        width: size.width || 100,
+        width: (size === null || size === void 0 ? void 0 : size.width) || 100,
         height: 30,
         strokeWidth: "2"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -91,19 +88,21 @@ function CpuMonitor(_ref) {
         children: tooltipState.textContent
       })]
     }),
-    description: "".concat(t('system.cores'), ": ").concat((cpus === null || cpus === void 0 ? void 0 : cpus.length) || 0),
-    hideDescription: hideDescription
+    description: description
   });
 }
-CpuMonitor.propTypes = {
-  cpus: _propTypes.default.array,
-  currentLoad: _propTypes.default.number,
-  history: _propTypes.default.array,
-  hideDescription: _propTypes.default.bool
+InsightChart.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  title: _propTypes.default.string.isRequired,
+  current: _propTypes.default.any.isRequired,
+  description: _propTypes.default.any,
+  data: _propTypes.default.array,
+  dateFn: _propTypes.default.func,
+  valueFn: _propTypes.default.func
 };
-CpuMonitor.defaultProps = {
-  cpus: [],
-  currentLoad: 0,
-  history: [],
-  hideDescription: false
+InsightChart.defaultProps = {
+  description: null,
+  data: [],
+  dateFn: x => x,
+  valueFn: x => x
 };

package/lib/insights/cpu.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CpuMonitor;
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _chart = _interopRequireDefault(require("./chart"));
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const formatNumber = x => "".concat(x, "%");
+function CpuMonitor(_ref) {
+  let {
+    cpus,
+    currentLoad,
+    history
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _react.useContext)(_context.LocaleContext);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chart.default, {
+    id: "cpu-sparkline",
+    title: t('common.cpu'),
+    current: "".concat(Math.floor(currentLoad || 0), "%"),
+    data: history,
+    description: "".concat(t('system.cores'), ": ").concat((cpus === null || cpus === void 0 ? void 0 : cpus.length) || 0),
+    dateFn: v => (0, _util.formatTime)(v, 'HH:mm', locale),
+    valueFn: formatNumber
+  });
+}
+CpuMonitor.propTypes = {
+  cpus: _propTypes.default.array,
+  currentLoad: _propTypes.default.number,
+  history: _propTypes.default.array
+};
+CpuMonitor.defaultProps = {
+  cpus: [],
+  currentLoad: 0,
+  history: []
+};

package/lib/insights/memory.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MemoryMonitor;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _filesize = _interopRequireDefault(require("filesize"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _chart = _interopRequireDefault(require("./chart"));
+var _util = require("../util");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/jsx-one-expression-per-line */
+
+function MemoryMonitor(_ref) {
+  let {
+    instanceCount,
+    title,
+    total,
+    used,
+    history
+  } = _ref;
+  const {
+    t,
+    locale
+  } = (0, _context.useLocaleContext)();
+  const showPercent = !!total;
+  const available = total - used;
+  const memoryPercent = showPercent ? "(".concat(Math.floor(used / total * 100), "%)") : '';
+  const memoryList = [];
+  if (instanceCount) {
+    memoryList.push({
+      title: t('system.instances'),
+      metric: instanceCount
+    });
+  }
+  memoryList.push({
+    title: t('system.used'),
+    metric: (0, _filesize.default)(used)
+  });
+  if (showPercent) {
+    memoryList.push({
+      title: t('system.free'),
+      metric: (0, _filesize.default)(available)
+    }, {
+      title: t('system.total'),
+      metric: (0, _filesize.default)(total)
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chart.default, {
+    id: "mem-sparkline",
+    title: title || t('common.memory'),
+    current: "".concat((0, _filesize.default)(Math.floor(used || 0)), " ").concat(memoryPercent),
+    data: history,
+    description: memoryList.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      sx: {
+        marginLeft: index === 0 ? 0 : 2
+      },
+      children: [x.title, ": ", x.metric]
+    }, x.title)),
+    dateFn: v => (0, _util.formatTime)(v, 'HH:mm', locale),
+    valueFn: _filesize.default
+  });
+}
+MemoryMonitor.propTypes = {
+  title: _propTypes.default.string,
+  instanceCount: _propTypes.default.number,
+  total: _propTypes.default.number,
+  used: _propTypes.default.number,
+  history: _propTypes.default.array
+};
+MemoryMonitor.defaultProps = {
+  title: '',
+  instanceCount: null,
+  total: null,
+  used: null,
+  history: []
+};