@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/actions.js

@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function Actions({
+  actions,
+  ...props
+}) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+  const onOpen = e => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch {}
+    setAnchorEl(e.currentTarget);
+  };
+  const onClose = e => {
+    try {
+      e.stopPropagation();
+      e.preventDefault();
+      // eslint-disable-next-line no-empty
+    } catch {}
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    ...props,
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-label": "more",
+      "aria-controls": "actions-menu",
+      "aria-haspopup": "true",
+      "data-cy": "actions-menu-icon",
+      onClick: onOpen,
+      size: "small",
+      children: /*#__PURE__*/_jsx(MoreHorizIcon, {})
+    }), /*#__PURE__*/_jsx(Menu, {
+      id: "actions-menu",
+      "data-cy": "actions-menu",
+      anchorEl: anchorEl,
+      keepMounted: true,
+      open: open,
+      onClose: onClose,
+      PaperProps: {},
+      children: actions.map((action, index) => {
+        if (typeof action === 'function') {
+          return action({
+            close: onClose
+          });
+        }
+        const {
+          icon,
+          text,
+          onClick,
+          disabled = false,
+          ...opts
+        } = action;
+        return /*#__PURE__*/_createElement(MenuItem, {
+          ...opts,
+          disabled: disabled,
+          dense: true,
+          onClick: async e => {
+            await onClick(e);
+            onClose();
+          }
+          // eslint-disable-next-line react/no-array-index-key
+          ,
+          key: index,
+          "data-cy": `actions-menu-${index}`
+        }, /*#__PURE__*/_jsx(ListItemIcon, {
+          style: {
+            minWidth: 24,
+            marginRight: 8
+          },
+          children: icon
+        }), /*#__PURE__*/_jsx(ListItemText, {
+          primary: text
+        }));
+      })
+    })]
+  });
+}
+Actions.propTypes = {
+  actions: PropTypes.array
+};
+Actions.defaultProps = {
+  actions: []
+};
+const Div = styled.div``;

package/es/analytics/card.js

@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function InsightCard({
+  style,
+  title,
+  value,
+  graph,
+  description
+}) {
+  return /*#__PURE__*/_jsx(StyledCard, {
+    children: /*#__PURE__*/_jsxs(CardContent, {
+      style: {
+        ...style
+      },
+      children: [/*#__PURE__*/_jsx(Typography, {
+        sx: {
+          fontSize: 14
+        },
+        color: "text.secondary",
+        children: title
+      }), /*#__PURE__*/_jsx(Typography, {
+        variant: "h5",
+        component: "div",
+        mt: 1,
+        children: value
+      }), graph, !!description && /*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        sx: {
+          fontSize: 12,
+          marginTop: 3
+        },
+        color: "text.secondary",
+        children: description
+      })]
+    })
+  });
+}
+InsightCard.propTypes = {
+  style: PropTypes.object,
+  title: PropTypes.node,
+  value: PropTypes.node,
+  graph: PropTypes.node,
+  description: PropTypes.any
+};
+InsightCard.defaultProps = {
+  style: {},
+  title: null,
+  value: null,
+  graph: null,
+  description: null
+};
+const StyledCard = styled(Card)`
+  .card-content {
+    height: 150px;
+  }
+
+  .card-sparkline {
+    flex: 2;
+    display: flex;
+    position: relative;
+    *[hidden] {
+      display: none;
+    }
+  }
+  .sparkline {
+    stroke: ${props => props.theme.palette.primary.main};
+    fill: ${props => props.theme.palette.primary.main}1A;
+  }
+  .tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    padding: 2px 5px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 9999;
+  }
+  .sparkline--cursor {
+    stroke: orange;
+  }
+
+  .sparkline--spot {
+    fill: red;
+    stroke: red;
+  }
+`;

package/es/analytics/chart.js

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useSize, useReactive } from 'ahooks';
+import Sparkline from '@arcblock/ux/lib/Sparkline';
+import Card from './card';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function InsightChart({
+  id,
+  title,
+  current,
+  description,
+  data,
+  dateFn,
+  valueFn
+}) {
+  const svgRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const tooltipState = useReactive({
+    style: {
+      top: 0,
+      left: 0
+    },
+    hidden: true,
+    textContent: ''
+  });
+  const [container, setContainer] = useState(null);
+  const size = useSize(container);
+  const sparklineOptions = {
+    onmousemove(e, dataPoint) {
+      const {
+        date,
+        value
+      } = dataPoint;
+      tooltipState.textContent = `${dateFn(date)}: ${valueFn(value)}`;
+      tooltipState.style.top = -30;
+      tooltipState.style.left = 80;
+      tooltipState.hidden = false;
+    },
+    onmouseout() {
+      tooltipState.hidden = true;
+    }
+  };
+  useEffect(() => {
+    setTimeout(() => {
+      setContainer(document.querySelector(`.${id}`));
+      setTimeout(() => {
+        if (svgRef.current) {
+          Sparkline(svgRef.current, data || [], sparklineOptions);
+        }
+      }, 400);
+    });
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return /*#__PURE__*/_jsx(Card, {
+    title: title,
+    value: current,
+    graph: /*#__PURE__*/_jsxs("div", {
+      className: `card-sparkline ${id}`,
+      style: {
+        marginTop: 16
+      },
+      children: [/*#__PURE__*/_jsx("svg", {
+        ref: svgRef,
+        className: "sparkline",
+        width: size?.width || 100,
+        height: 30,
+        strokeWidth: "2"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "tooltip",
+        ref: tooltipRef,
+        hidden: tooltipState.hidden,
+        style: {
+          ...tooltipState.style
+        },
+        children: tooltipState.textContent
+      })]
+    }),
+    description: description
+  });
+}
+InsightChart.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  current: PropTypes.any.isRequired,
+  description: PropTypes.any,
+  data: PropTypes.array,
+  dateFn: PropTypes.func,
+  valueFn: PropTypes.func
+};
+InsightChart.defaultProps = {
+  description: null,
+  data: [],
+  dateFn: x => x,
+  valueFn: x => x
+};

package/es/analytics/cpu.js

@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Chart from './chart';
+import { formatTime } from '../util';
+import { jsx as _jsx } from "react/jsx-runtime";
+const formatNumber = x => `${x}%`;
+export default function CpuMonitor({
+  cpus,
+  currentLoad,
+  history
+}) {
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  return /*#__PURE__*/_jsx(Chart, {
+    id: "cpu-sparkline",
+    title: t('common.cpu'),
+    current: `${Math.floor(currentLoad || 0)}%`,
+    data: history,
+    description: `${t('system.cores')}: ${cpus?.length || 0}`,
+    dateFn: v => formatTime(v, 'HH:mm', locale),
+    valueFn: formatNumber
+  });
+}
+CpuMonitor.propTypes = {
+  cpus: PropTypes.array,
+  currentLoad: PropTypes.number,
+  history: PropTypes.array
+};
+CpuMonitor.defaultProps = {
+  cpus: [],
+  currentLoad: 0,
+  history: []
+};

package/es/analytics/disk.js

@@ -0,0 +1,111 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@mui/styles';
+import Typography from '@mui/material/Typography';
+import LinearProgress from '@mui/material/LinearProgress';
+import Box from '@mui/material/Box';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Card from './card';
+import { formatDiskSize } from '../util/index';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const BorderLinearProgress = withStyles(theme => ({
+  root: {
+    height: 10
+  },
+  colorPrimary: {
+    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 700]
+  },
+  bar: {
+    backgroundColor: theme.palette.secondary.main
+  }
+}))(LinearProgress);
+function LinearProgressWithLabel(props) {
+  const {
+    value
+  } = props;
+  return /*#__PURE__*/_jsxs(Box, {
+    display: "flex",
+    alignItems: "center",
+    mt: 2,
+    children: [/*#__PURE__*/_jsx(Box, {
+      width: "100%",
+      style: {
+        overflow: 'hidden'
+      },
+      mr: 1,
+      children: /*#__PURE__*/_jsx(BorderLinearProgress, {
+        variant: "determinate",
+        ...props
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      minWidth: 35,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: "body2",
+        color: "textSecondary",
+        children: `${Math.round(value)}%`
+      })
+    })]
+  });
+}
+LinearProgressWithLabel.propTypes = {
+  value: PropTypes.number.isRequired
+};
+export default function DiskMonitor({
+  disk,
+  platform
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const metrics = [{
+    id: 1,
+    className: 'used',
+    title: t('system.used'),
+    metric: formatDiskSize(disk.used, platform)
+  }, {
+    id: 2,
+    className: 'free',
+    title: t('system.free'),
+    metric: formatDiskSize(disk.free, platform)
+  }, {
+    id: 3,
+    className: 'total',
+    title: t('system.total'),
+    metric: formatDiskSize(disk.total, platform)
+  }];
+  return /*#__PURE__*/_jsx(Card, {
+    title: `${t('common.disk')} (${disk.device})`,
+    value: formatDiskSize(disk.used, platform),
+    graph: /*#__PURE__*/_jsx(Box, {
+      mt: 3,
+      children: /*#__PURE__*/_jsx(LinearProgressWithLabel, {
+        value: disk.used / disk.total * 100
+      })
+    }),
+    description: metrics.map((x, index) => /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        marginLeft: index === 0 ? 0 : 2
+      },
+      children: [x.title, ": ", x.metric]
+    }, x.title))
+  });
+}
+DiskMonitor.propTypes = {
+  disk: PropTypes.shape({
+    used: PropTypes.number,
+    free: PropTypes.number,
+    total: PropTypes.number,
+    device: PropTypes.string
+  }),
+  platform: PropTypes.string
+};
+DiskMonitor.defaultProps = {
+  disk: {
+    used: 0,
+    free: 0,
+    total: 1,
+    device: ''
+  },
+  platform: ''
+};

package/es/analytics/memory.js

@@ -0,0 +1,72 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import PropTypes from 'prop-types';
+import filesize from 'filesize';
+import Box from '@mui/material/Box';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Chart from './chart';
+import { formatTime } from '../util';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function MemoryMonitor({
+  instanceCount,
+  title,
+  total,
+  used,
+  history
+}) {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const showPercent = !!total;
+  const available = total - used;
+  const memoryPercent = showPercent ? `(${Math.floor(used / total * 100)}%)` : '';
+  const memoryList = [];
+  if (instanceCount) {
+    memoryList.push({
+      title: t('system.instances'),
+      metric: instanceCount
+    });
+  }
+  memoryList.push({
+    title: t('system.used'),
+    metric: filesize(used)
+  });
+  if (showPercent) {
+    memoryList.push({
+      title: t('system.free'),
+      metric: filesize(available)
+    }, {
+      title: t('system.total'),
+      metric: filesize(total)
+    });
+  }
+  return /*#__PURE__*/_jsx(Chart, {
+    id: "mem-sparkline",
+    title: title || t('common.memory'),
+    current: `${filesize(Math.floor(used || 0))} ${memoryPercent}`,
+    data: history,
+    description: memoryList.map((x, index) => /*#__PURE__*/_jsxs(Box, {
+      sx: {
+        marginLeft: index === 0 ? 0 : 2
+      },
+      children: [x.title, ": ", x.metric]
+    }, x.title)),
+    dateFn: v => formatTime(v, 'HH:mm', locale),
+    valueFn: filesize
+  });
+}
+MemoryMonitor.propTypes = {
+  title: PropTypes.string,
+  instanceCount: PropTypes.number,
+  total: PropTypes.number,
+  used: PropTypes.number,
+  history: PropTypes.array
+};
+MemoryMonitor.defaultProps = {
+  title: '',
+  instanceCount: null,
+  total: null,
+  used: null,
+  history: []
+};

package/es/analytics/runtime.js

@@ -0,0 +1,173 @@
+import React, { useEffect, useMemo } from 'react';
+import styled from '@emotion/styled';
+import filesize from 'filesize';
+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 } from '../util';
+import RuntimeInfo from '../blocklet/runtime-info';
+import BundleAvatar from '../blocklet/bundle-avatar';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function RuntimeInsight() {
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    blocklet,
+    runtimeHistory,
+    actions: {
+      refreshBlocklet
+    }
+  } = useBlockletContext();
+  const monitList = useMemo(() => {
+    const arr = [];
+    forEachBlockletSync(blocklet, (component, {
+      ancestors,
+      id,
+      level
+    }) => {
+      if (component.runtimeInfo) {
+        arr.push({
+          type: 'blocklet',
+          groupId: blocklet.meta.did,
+          groupName: getDisplayName(blocklet),
+          id,
+          name: getDisplayName(component, true),
+          blocklet,
+          component,
+          level: level - 1 >= 0 ? level - 1 : 0,
+          runtimeInfo: component.runtimeInfo,
+          ancestors
+        });
+      }
+    });
+    return arr;
+  }, [blocklet]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      refreshBlocklet();
+    }, 1000 * 10);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const formatUptime = uptime => {
+    return prettyMs(Number(uptime || 0), {
+      locale: formatLocale(locale)
+    });
+  };
+  const monitorColumns = [{
+    label: t('common.name'),
+    name: 'name',
+    options: {
+      // eslint-disable-next-line react/no-unstable-nested-components
+      customBodyRenderLite(rawIndex) {
+        const {
+          name,
+          component,
+          level,
+          ancestors
+        } = monitList[rawIndex];
+        return /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          pl: level * 2,
+          children: [/*#__PURE__*/_jsx(BundleAvatar, {
+            size: 14,
+            blocklet: component,
+            ancestors: ancestors
+          }), /*#__PURE__*/_jsx(Box, {
+            ml: 1,
+            children: name
+          })]
+        });
+      }
+    }
+  }, {
+    label: t('common.uptime'),
+    name: 'runtimeInfo.uptime',
+    options: {
+      customBodyRenderLite(rawIndex) {
+        const {
+          runtimeInfo
+        } = monitList[rawIndex];
+        return formatUptime(runtimeInfo.uptime);
+      }
+    }
+  }, {
+    label: t('blocklet.runtimeInfo.memoryUsage'),
+    name: 'runtimeInfo.memoryUsage',
+    options: {
+      customBodyRenderLite(rawIndex) {
+        const {
+          runtimeInfo
+        } = monitList[rawIndex];
+        return filesize(runtimeInfo?.memoryUsage || 0);
+      }
+    }
+  }, {
+    label: t('blocklet.runtimeInfo.cpuUsage'),
+    name: 'runtimeInfo.cpuUsage',
+    options: {
+      customBodyRenderLite(rawIndex) {
+        const {
+          runtimeInfo
+        } = monitList[rawIndex];
+        return `${(runtimeInfo.cpuUsage || 0).toFixed(1)}%`;
+      }
+    }
+  }, {
+    label: t('blocklet.runtimeInfo.processId'),
+    name: 'runtimeInfo.pid'
+  }];
+  return /*#__PURE__*/_jsxs(Div, {
+    component: "div",
+    children: [/*#__PURE__*/_jsx(Typography, {
+      component: "h3",
+      variant: "h5",
+      color: "textPrimary",
+      style: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      mb: 2,
+      children: t('analytics.trend')
+    }), blocklet.status === 'running' ? [/*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsx(RuntimeInfo, {
+        blocklet: blocklet,
+        cpuHistory: runtimeHistory.cpu,
+        memoryHistory: runtimeHistory.memory
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      mt: 3,
+      children: /*#__PURE__*/_jsx(Datatable, {
+        title: t('analytics.detail'),
+        className: "monitor-table",
+        locale: locale,
+        data: monitList,
+        columns: monitorColumns,
+        options: {
+          search: false,
+          download: false,
+          filter: false,
+          print: false,
+          viewColumns: false,
+          pagination: false,
+          rowsPerPage: 100
+        }
+      })
+    })] : /*#__PURE__*/_jsx(Typography, {
+      children: t('blocklet.runtimeInfo.noRunning')
+    })]
+  });
+}
+RuntimeInsight.propTypes = {};
+const Div = styled(Typography)``;