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

package/lib/{monitor → analytics}/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 → analytics/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/analytics/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/analytics/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: []
+};

package/lib/{blocklet/monitor.js → analytics/runtime.js}

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = BlockletMonitor;
-var _react = require("react");
+exports.default = RuntimeInsight;
+var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _filesize = _interopRequireDefault(require("filesize"));
 var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
@@ -15,14 +15,15 @@ var _util = require("@blocklet/meta/lib/util");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _blocklet = require("../contexts/blocklet");
 var _util2 = require("../util");
-var _runtimeInfo = _interopRequireDefault(require("./runtime-info"));
-var _diskInfo = _interopRequireDefault(require("./disk-info"));
-var _bundleAvatar = _interopRequireDefault(require("./bundle-avatar"));
+var _runtimeInfo = _interopRequireDefault(require("../blocklet/runtime-info"));
+var _bundleAvatar = _interopRequireDefault(require("../blocklet/bundle-avatar"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function BlockletMonitor() {
+function RuntimeInsight() {
   const {
     t,
     locale
@@ -140,14 +141,16 @@ function BlockletMonitor() {
   }];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
     component: "div",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      mt: 0,
-      display: "flex",
-      alignItems: "center",
-      className: "title",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-        children: t('common.runtimeInfo')
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      component: "h3",
+      variant: "h5",
+      color: "textPrimary",
+      style: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      mb: 2,
+      children: t('analytics.trend')
     }), blocklet.status === 'running' ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_runtimeInfo.default, {
         blocklet: blocklet,
@@ -157,11 +160,11 @@ function BlockletMonitor() {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       mt: 3,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+        title: t('analytics.detail'),
         className: "monitor-table",
         locale: locale,
         data: monitList,
         columns: monitorColumns,
-        title: "",
         options: {
           search: false,
           download: false,
@@ -174,13 +177,8 @@ function BlockletMonitor() {
       })
     })] : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       children: t('blocklet.runtimeInfo.noRunning')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "title",
-      children: t('common.dataStorage')
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_diskInfo.default, {
-      blocklet: blocklet
     })]
   });
 }
-BlockletMonitor.propTypes = {};
-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    &.first {\n      margin-top: 0;\n    }\n  }\n"])), props => props.theme.spacing(5), props => props.theme.spacing(3));
+RuntimeInsight.propTypes = {};
+const Div = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));