@abtnode/ux 1.16.27-beta-725ce3a6 → 1.16.27-beta-d1555a79

package/lib/analytics/memory.js

@@ -1,33 +1,24 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = MemoryMonitor;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-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;
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Chart from './chart';
+import { formatTime, filesize } from '../util';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export default function MemoryMonitor({
+  instanceCount,
+  title,
+  total,
+  used,
+  history
+}) {
   const {
     t,
     locale
-  } = (0, _context.useLocaleContext)();
+  } = useLocaleContext();
   const showPercent = !!total;
   const available = total - used;
-  const memoryPercent = showPercent ? "(".concat(Math.floor(used / total * 100), "%)") : '';
+  const memoryPercent = showPercent ? `(${Math.floor(used / total * 100)}%)` : '';
   const memoryList = [];
   if (instanceCount) {
     memoryList.push({
@@ -37,38 +28,38 @@ function MemoryMonitor(_ref) {
   }
   memoryList.push({
     title: t('system.used'),
-    metric: (0, _util.filesize)(used)
+    metric: filesize(used)
   });
   if (showPercent) {
     memoryList.push({
       title: t('system.free'),
-      metric: (0, _util.filesize)(available)
+      metric: filesize(available)
     }, {
       title: t('system.total'),
-      metric: (0, _util.filesize)(total)
+      metric: filesize(total)
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_chart.default, {
+  return /*#__PURE__*/_jsx(Chart, {
     id: "mem-sparkline",
     title: title || t('common.memory'),
-    current: "".concat((0, _util.filesize)(Math.floor(used || 0)), " ").concat(memoryPercent),
+    current: `${filesize(Math.floor(used || 0))} ${memoryPercent}`,
     data: history,
-    description: memoryList.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+    description: memoryList.map((x, index) => /*#__PURE__*/_jsxs(Box, {
       sx: {
         marginLeft: index === 0 ? 0 : 2
       },
       children: [x.title, ": ", x.metric]
     }, x.title)),
-    dateFn: v => (0, _util.formatTime)(v, 'HH:mm:ss', locale),
-    valueFn: _util.filesize
+    dateFn: v => formatTime(v, 'HH:mm:ss', locale),
+    valueFn: filesize
   });
 }
 MemoryMonitor.propTypes = {
-  title: _propTypes.default.string,
-  instanceCount: _propTypes.default.number,
-  total: _propTypes.default.number,
-  used: _propTypes.default.number,
-  history: _propTypes.default.array
+  title: PropTypes.string,
+  instanceCount: PropTypes.number,
+  total: PropTypes.number,
+  used: PropTypes.number,
+  history: PropTypes.array
 };
 MemoryMonitor.defaultProps = {
   title: '',

package/lib/analytics/runtime.js

@@ -1,54 +1,42 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = RuntimeInsight;
-var _react = _interopRequireWildcard(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _prettyMsI18n = _interopRequireDefault(require("pretty-ms-i18n"));
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Datatable = _interopRequireDefault(require("@arcblock/ux/lib/Datatable"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-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("../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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function RuntimeInsight() {
+import React, { useEffect, useMemo } from 'react';
+import styled from '@emotion/styled';
+import prettyMs from 'pretty-ms-i18n';
+import Box from '@mui/material/Box';
+import Datatable from '@arcblock/ux/lib/Datatable';
+import Typography from '@mui/material/Typography';
+import { getDisplayName, forEachBlockletSync } from '@blocklet/meta/lib/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { useBlockletContext } from '../contexts/blocklet';
+import { formatLocale, filesize } from '../util';
+import RuntimeInfo from '../blocklet/runtime-info';
+import BundleAvatar from '../blocklet/bundle-avatar';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function RuntimeInsight() {
   const {
     t,
     locale
-  } = (0, _context.useLocaleContext)();
+  } = useLocaleContext();
   const {
     blocklet,
     runtimeHistory,
     actions: {
       refreshBlocklet
     }
-  } = (0, _blocklet.useBlockletContext)();
-  const monitList = (0, _react.useMemo)(() => {
+  } = useBlockletContext();
+  const monitList = useMemo(() => {
     const arr = [];
-    (0, _util.forEachBlockletSync)(blocklet, (component, _ref) => {
-      let {
-        ancestors,
-        id,
-        level
-      } = _ref;
+    forEachBlockletSync(blocklet, (component, {
+      ancestors,
+      id,
+      level
+    }) => {
       if (component.runtimeInfo) {
         arr.push({
           type: 'blocklet',
           groupId: blocklet.meta.did,
-          groupName: (0, _util.getDisplayName)(blocklet),
+          groupName: getDisplayName(blocklet),
           id,
-          name: (0, _util.getDisplayName)(component, true),
+          name: getDisplayName(component, true),
           blocklet,
           component,
           level: level - 1 >= 0 ? level - 1 : 0,
@@ -60,7 +48,7 @@ function RuntimeInsight() {
     return arr;
   }, [blocklet]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const interval = setInterval(() => {
       refreshBlocklet();
     }, 1000 * 10);
@@ -70,8 +58,8 @@ function RuntimeInsight() {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   const formatUptime = uptime => {
-    return (0, _prettyMsI18n.default)(Number(uptime || 0), {
-      locale: (0, _util2.formatLocale)(locale)
+    return prettyMs(Number(uptime || 0), {
+      locale: formatLocale(locale)
     });
   };
   const monitorColumns = [{
@@ -86,15 +74,15 @@ function RuntimeInsight() {
           level,
           ancestors
         } = monitList[rawIndex];
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+        return /*#__PURE__*/_jsxs(Box, {
           display: "flex",
           alignItems: "center",
           pl: level * 2,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bundleAvatar.default, {
+          children: [/*#__PURE__*/_jsx(BundleAvatar, {
             size: 14,
             blocklet: component,
             ancestors: ancestors
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          }), /*#__PURE__*/_jsx(Box, {
             ml: 1,
             children: name
           })]
@@ -120,7 +108,7 @@ function RuntimeInsight() {
         const {
           runtimeInfo
         } = monitList[rawIndex];
-        return (0, _util2.filesize)((runtimeInfo === null || runtimeInfo === void 0 ? void 0 : runtimeInfo.memoryUsage) || 0);
+        return filesize(runtimeInfo?.memoryUsage || 0);
       }
     }
   }, {
@@ -131,7 +119,7 @@ function RuntimeInsight() {
         const {
           runtimeInfo
         } = monitList[rawIndex];
-        return "".concat((runtimeInfo.cpuUsage || 0).toFixed(1), "%");
+        return `${(runtimeInfo.cpuUsage || 0).toFixed(1)}%`;
       }
     }
   }, {
@@ -141,9 +129,9 @@ function RuntimeInsight() {
     label: t('blocklet.runtimeInfo.port'),
     name: 'runtimeInfo.port'
   }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Div, {
+  return /*#__PURE__*/_jsxs(Div, {
     component: "div",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: [/*#__PURE__*/_jsx(Typography, {
       component: "h3",
       variant: "h5",
       color: "textPrimary",
@@ -153,15 +141,15 @@ function RuntimeInsight() {
       },
       mb: 2,
       children: t('analytics.trend')
-    }), blocklet.status === 'running' ? [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_runtimeInfo.default, {
+    }), blocklet.status === 'running' ? [/*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(RuntimeInfo, {
         blocklet: blocklet,
         cpuHistory: runtimeHistory.cpu,
         memoryHistory: runtimeHistory.memory
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    }), /*#__PURE__*/_jsx(Box, {
       mt: 3,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Datatable.default, {
+      children: /*#__PURE__*/_jsx(Datatable, {
         title: t('analytics.detail'),
         className: "monitor-table",
         locale: locale,
@@ -177,10 +165,10 @@ function RuntimeInsight() {
           rowsPerPage: 100
         }
       })
-    })] : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    })] : /*#__PURE__*/_jsx(Typography, {
       children: t('blocklet.runtimeInfo.noRunning')
     })]
   });
 }
 RuntimeInsight.propTypes = {};
-const Div = (0, _styled.default)(_Typography.default)(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+const Div = styled(Typography)``;

package/lib/analytics/traffic.js

@@ -1,112 +1,99 @@
-"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 _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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable react/prop-types */ /* eslint-disable react-hooks/exhaustive-deps */
-const noop = (0, _nthArg.default)(0);
-const getDefaultRanges = (date, locale) => [{
+/* eslint-disable react/prop-types */
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from 'react';
+import dayjs from '@abtnode/util/lib/dayjs';
+import nthArg from 'lodash/nthArg';
+import joinUrl from 'url-join';
+import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import Iframe from 'react-iframe';
+import Alert from '@mui/material/Alert';
+import Spinner from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
+import ViewIcon from '@mui/icons-material/LaunchOutlined';
+import { DateRangePicker } from 'mui-daterange-picker';
+import { DatePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { WELLKNOWN_SERVICE_PATH_PREFIX } from '@abtnode/constant';
+import { startOfWeek, endOfWeek, addWeeks, startOfMonth, endOfMonth, addMonths, startOfYear, endOfYear, addYears } from 'date-fns';
+import { formatError, formatToDate, filesize } from '../util';
+import { useNodeContext } from '../contexts/node';
+import Chart from './chart';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noop = nthArg(0);
+export const getDefaultRanges = (date, locale) => [{
   label: 'This Week',
-  startDate: (0, _dateFns.startOfWeek)(date, {
+  startDate: startOfWeek(date, {
     locale
   }),
-  endDate: (0, _dateFns.endOfWeek)(date, {
+  endDate: endOfWeek(date, {
     locale
   })
 }, {
   label: 'Last Week',
-  startDate: (0, _dateFns.startOfWeek)((0, _dateFns.addWeeks)(date, -1), {
+  startDate: startOfWeek(addWeeks(date, -1), {
     locale
   }),
-  endDate: (0, _dateFns.endOfWeek)((0, _dateFns.addWeeks)(date, -1), {
+  endDate: endOfWeek(addWeeks(date, -1), {
     locale
   })
 }, {
   label: 'Last 7 Days',
-  startDate: (0, _dateFns.addWeeks)(date, -1),
+  startDate: addWeeks(date, -1),
   endDate: date
 }, {
   label: 'This Month',
-  startDate: (0, _dateFns.startOfMonth)(date),
-  endDate: (0, _dateFns.endOfMonth)(date)
+  startDate: startOfMonth(date),
+  endDate: endOfMonth(date)
 }, {
   label: 'Last Month',
-  startDate: (0, _dateFns.startOfMonth)((0, _dateFns.addMonths)(date, -1)),
-  endDate: (0, _dateFns.endOfMonth)((0, _dateFns.addMonths)(date, -1))
+  startDate: startOfMonth(addMonths(date, -1)),
+  endDate: endOfMonth(addMonths(date, -1))
 }, {
   label: 'This Year',
-  startDate: (0, _dateFns.startOfYear)(date),
-  endDate: (0, _dateFns.endOfYear)(date)
+  startDate: startOfYear(date),
+  endDate: endOfYear(date)
 }, {
   label: 'Last Year',
-  startDate: (0, _dateFns.startOfYear)((0, _dateFns.addYears)(date, -1)),
-  endDate: (0, _dateFns.endOfYear)((0, _dateFns.addYears)(date, -1))
+  startDate: startOfYear(addYears(date, -1)),
+  endDate: endOfYear(addYears(date, -1))
 }];
-exports.getDefaultRanges = getDefaultRanges;
-function TrafficInsights(_ref) {
-  let {
-    client,
-    did
-  } = _ref;
-  const maxDate = (0, _dayjs.default)().subtract(1, 'day').toDate();
+export default function TrafficInsights({
+  client,
+  did
+}) {
+  const maxDate = dayjs().subtract(1, 'day').toDate();
   const {
     info,
     inService
-  } = (0, _node.useNodeContext)();
+  } = 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(),
+  } = useLocaleContext();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+  const [date, setDate] = useState(maxDate);
+  const [dateRange, setDateRange] = useState({
+    startDate: dayjs().subtract(30, 'day').toDate(),
     endDate: maxDate
   });
-  const data = (0, _useAsyncRetry.default)(async () => {
+  const data = useAsyncRetry(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')
+        startDate: dayjs(dateRange.startDate).format('YYYY-MM-DD'),
+        endDate: dayjs(dateRange.endDate).format('YYYY-MM-DD')
       }
     });
     return result.list;
   });
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (data.loading) {
       return;
     }
@@ -127,12 +114,12 @@ function TrafficInsights(_ref) {
     error
   } = data;
   if (!list.length && loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {});
+    return /*#__PURE__*/_jsx(Spinner, {});
   }
   if (error) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
+    return /*#__PURE__*/_jsx(Alert, {
       severity: "error",
-      children: (0, _util.formatError)(error)
+      children: formatError(error)
     });
   }
   const metrics = {
@@ -144,12 +131,12 @@ function TrafficInsights(_ref) {
     uniqueReferrers: noop,
     uniqueNotFound: noop,
     uniqueStaticFiles: noop,
-    logSize: _util.filesize,
-    bandwidth: _util.filesize
+    logSize: filesize,
+    bandwidth: filesize
   };
   const charts = Object.keys(metrics).map(key => ({
-    id: "".concat(key, "_chart"),
-    title: t("analytics.traffic.".concat(key)),
+    id: `${key}_chart`,
+    title: t(`analytics.traffic.${key}`),
     current: list.length ? metrics[key](list[0][key]) : 0,
     data: list.map(v => ({
       date: v.date,
@@ -162,8 +149,8 @@ function TrafficInsights(_ref) {
   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 pathPrefix = inService ? WELLKNOWN_SERVICE_PATH_PREFIX : process.env.NODE_ENV === 'production' ? info.routing.adminPath : '';
+  const breakdownUrl = joinUrl(window.location.origin, pathPrefix, `/api/analytics/traffic?date=${dayjs(date).format('YYYY-MM-DD')}&did=${did}`);
   const onRangeChange = range => {
     setDateRange(range);
     setAnchorEl(null);
@@ -175,8 +162,8 @@ function TrafficInsights(_ref) {
   const onOpenBreakdown = () => {
     window.open(breakdownUrl);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Typography, {
       component: "div",
       variant: "h5",
       className: "page-header",
@@ -186,14 +173,14 @@ function TrafficInsights(_ref) {
         fontWeight: 'bold'
       },
       mb: 2,
-      children: [t('analytics.trend'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
+      children: [t('analytics.trend'), /*#__PURE__*/_jsxs(Button, {
         onClick: onTriggerClick,
         variant: "outlined",
         size: "small",
         color: "secondary",
-        children: [(0, _util.formatToDate)(dateRange.startDate, locale), " - ", (0, _util.formatToDate)(dateRange.endDate, locale)]
+        children: [formatToDate(dateRange.startDate, locale), " - ", formatToDate(dateRange.endDate, locale)]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popover.default, {
+    }), /*#__PURE__*/_jsx(Popover, {
       id: id,
       open: open,
       anchorEl: anchorEl,
@@ -202,25 +189,27 @@ function TrafficInsights(_ref) {
         vertical: 'bottom',
         horizontal: 'left'
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_muiDaterangePicker.DateRangePicker, {
+      children: /*#__PURE__*/_jsx(DateRangePicker, {
         open: true,
         toggle: onTriggerClick,
         maxDate: maxDate,
         definedRanges: getDefaultRanges(date),
         onChange: onRangeChange
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+    }), /*#__PURE__*/_jsx(Grid, {
       container: true,
       spacing: 4,
-      children: charts.map(x => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grid.default, {
+      children: charts.map(x => /*#__PURE__*/_jsx(Grid, {
         item: true,
         lg: 3,
         md: 6,
         sm: 6,
         xs: 12,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chart.default, _objectSpread({}, x))
+        children: /*#__PURE__*/_jsx(Chart, {
+          ...x
+        })
       }, x.id))
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+    }), /*#__PURE__*/_jsxs(Typography, {
       component: "div",
       variant: "h5",
       className: "page-header",
@@ -231,19 +220,19 @@ function TrafficInsights(_ref) {
       },
       mt: 4,
       mb: 1,
-      children: [t('analytics.detail'), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-        children: [loaded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      children: [t('analytics.detail'), /*#__PURE__*/_jsxs("span", {
+        children: [loaded && /*#__PURE__*/_jsx(IconButton, {
           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, {
+          children: /*#__PURE__*/_jsx(ViewIcon, {})
+        }), /*#__PURE__*/_jsx(LocalizationProvider, {
+          dateAdapter: AdapterDayjs,
+          children: /*#__PURE__*/_jsx(DatePicker, {
             disableFuture: true,
             format: "ll",
-            value: (0, _dayjs.default)(date),
+            value: dayjs(date),
             onChange: onDateChange,
             slotProps: {
               textField: {
@@ -253,7 +242,7 @@ function TrafficInsights(_ref) {
           })
         })]
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIframe.default, {
+    }), /*#__PURE__*/_jsx(Iframe, {
       url: breakdownUrl,
       width: "100%",
       height: "100%",