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

package/lib/{insights → analytics}/runtime.js

@@ -150,7 +150,7 @@ function RuntimeInsight() {
         fontWeight: 'bold'
       },
       mb: 2,
-      children: t('insights.trend')
+      children: t('analytics.trend')
     }), blocklet.status === 'running' ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_runtimeInfo.default, {
         blocklet: blocklet,
@@ -160,7 +160,7 @@ function RuntimeInsight() {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       mt: 3,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
-        title: t('insights.detail'),
+        title: t('analytics.detail'),
         className: "monitor-table",
         locale: locale,
         data: monitList,

package/lib/{insights → analytics}/traffic.js

@@ -4,6 +4,7 @@ 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"));
@@ -16,13 +17,16 @@ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularPr
 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"));
@@ -34,6 +38,44 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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,
@@ -49,6 +91,7 @@ function TrafficInsights(_ref) {
     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(),
@@ -107,7 +150,7 @@ function TrafficInsights(_ref) {
   };
   const charts = Object.keys(metrics).map(key => ({
     id: "".concat(key, "_chart"),
-    title: t("insights.traffic.".concat(key)),
+    title: t("analytics.traffic.".concat(key)),
     current: list.length ? metrics[key](list[0][key]) : 0,
     data: list.map(v => ({
       date: v.date,
@@ -121,6 +164,18 @@ function TrafficInsights(_ref) {
 
   // 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",
@@ -132,7 +187,7 @@ function TrafficInsights(_ref) {
         fontWeight: 'bold'
       },
       mb: 2,
-      children: [t('insights.trend'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      children: [t('analytics.trend'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
         onClick: onTriggerClick,
         variant: "outlined",
         size: "small",
@@ -143,7 +198,7 @@ function TrafficInsights(_ref) {
       id: id,
       open: open,
       anchorEl: anchorEl,
-      onClose: onTriggerClick,
+      onClose: () => setAnchorEl(null),
       anchorOrigin: {
         vertical: 'bottom',
         horizontal: 'left'
@@ -152,7 +207,8 @@ function TrafficInsights(_ref) {
         open: true,
         toggle: onTriggerClick,
         maxDate: maxDate,
-        onChange: v => setDateRange(v)
+        definedRanges: getDefaultRanges(date),
+        onChange: onRangeChange
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
       container: true,
@@ -176,25 +232,34 @@ function TrafficInsights(_ref) {
       },
       mt: 4,
       mb: 1,
-      children: [t('insights.detail'), /*#__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: newValue => setDate(newValue.toDate()),
-          slotProps: {
-            textField: {
-              size: 'small'
+      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: (0, _urlJoin.default)(window.location.origin, pathPrefix, "/api/insights/traffic?date=".concat((0, _dayjs.default)(date).format('YYYY-MM-DD'), "&did=").concat(did)),
+      url: breakdownUrl,
       width: "100%",
       height: "100%",
       frameBorder: 0,
+      onLoad: () => setLoaded(true),
       styles: {
         border: 0,
         minHeight: '400vh'

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("../insights/cpu"));
-var _memory = _interopRequireDefault(require("../insights/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"];