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

package/es/analytics/traffic.js

@@ -0,0 +1,259 @@
+/* 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 filesize from 'filesize';
+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 } from '../util';
+import { useNodeContext } from '../contexts/node';
+import Chart from './chart';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const noop = nthArg(0);
+export const getDefaultRanges = (date, locale) => [{
+  label: 'This Week',
+  startDate: startOfWeek(date, {
+    locale
+  }),
+  endDate: endOfWeek(date, {
+    locale
+  })
+}, {
+  label: 'Last Week',
+  startDate: startOfWeek(addWeeks(date, -1), {
+    locale
+  }),
+  endDate: endOfWeek(addWeeks(date, -1), {
+    locale
+  })
+}, {
+  label: 'Last 7 Days',
+  startDate: addWeeks(date, -1),
+  endDate: date
+}, {
+  label: 'This Month',
+  startDate: startOfMonth(date),
+  endDate: endOfMonth(date)
+}, {
+  label: 'Last Month',
+  startDate: startOfMonth(addMonths(date, -1)),
+  endDate: endOfMonth(addMonths(date, -1))
+}, {
+  label: 'This Year',
+  startDate: startOfYear(date),
+  endDate: endOfYear(date)
+}, {
+  label: 'Last Year',
+  startDate: startOfYear(addYears(date, -1)),
+  endDate: endOfYear(addYears(date, -1))
+}];
+export default function TrafficInsights({
+  client,
+  did
+}) {
+  const maxDate = dayjs().subtract(1, 'day').toDate();
+  const {
+    info,
+    inService
+  } = useNodeContext();
+  const {
+    t,
+    locale
+  } = 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 = useAsyncRetry(async () => {
+    const result = await client.getTrafficInsights({
+      input: {
+        did,
+        startDate: dayjs(dateRange.startDate).format('YYYY-MM-DD'),
+        endDate: dayjs(dateRange.endDate).format('YYYY-MM-DD')
+      }
+    });
+    return result.list;
+  });
+  useEffect(() => {
+    if (data.loading) {
+      return;
+    }
+    if (dateRange.startDate && dateRange.endDate) {
+      data.retry();
+    }
+  }, [dateRange]);
+  const onTriggerClick = e => {
+    if (anchorEl) {
+      setAnchorEl(null);
+    } else {
+      setAnchorEl(e.currentTarget);
+    }
+  };
+  const list = data.value || [];
+  const {
+    loading,
+    error
+  } = data;
+  if (!list.length && loading) {
+    return /*#__PURE__*/_jsx(Spinner, {});
+  }
+  if (error) {
+    return /*#__PURE__*/_jsx(Alert, {
+      severity: "error",
+      children: formatError(error)
+    });
+  }
+  const metrics = {
+    totalRequests: noop,
+    validRequests: noop,
+    failedRequests: noop,
+    uniqueVisitors: noop,
+    uniqueFiles: noop,
+    uniqueReferrers: noop,
+    uniqueNotFound: noop,
+    uniqueStaticFiles: noop,
+    logSize: filesize,
+    bandwidth: filesize
+  };
+  const charts = Object.keys(metrics).map(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,
+      value: v[key]
+    })).reverse(),
+    dateFn: noop,
+    valueFn: metrics[key]
+  }));
+  const open = Boolean(anchorEl);
+  const id = open ? 'date-range-picker-popover' : undefined;
+
+  // eslint-disable-next-line no-nested-ternary
+  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);
+  };
+  const onDateChange = newDate => {
+    setDate(newDate.toDate());
+    setLoaded(false);
+  };
+  const onOpenBreakdown = () => {
+    window.open(breakdownUrl);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs(Typography, {
+      component: "div",
+      variant: "h5",
+      className: "page-header",
+      color: "textPrimary",
+      style: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      mb: 2,
+      children: [t('analytics.trend'), /*#__PURE__*/_jsxs(Button, {
+        onClick: onTriggerClick,
+        variant: "outlined",
+        size: "small",
+        color: "secondary",
+        children: [formatToDate(dateRange.startDate, locale), " - ", formatToDate(dateRange.endDate, locale)]
+      })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      id: id,
+      open: open,
+      anchorEl: anchorEl,
+      onClose: () => setAnchorEl(null),
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/_jsx(DateRangePicker, {
+        open: true,
+        toggle: onTriggerClick,
+        maxDate: maxDate,
+        definedRanges: getDefaultRanges(date),
+        onChange: onRangeChange
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      spacing: 4,
+      children: charts.map(x => /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        lg: 3,
+        md: 6,
+        sm: 6,
+        xs: 12,
+        children: /*#__PURE__*/_jsx(Chart, {
+          ...x
+        })
+      }, x.id))
+    }), /*#__PURE__*/_jsxs(Typography, {
+      component: "div",
+      variant: "h5",
+      className: "page-header",
+      color: "textPrimary",
+      style: {
+        fontSize: 18,
+        fontWeight: 'bold'
+      },
+      mt: 4,
+      mb: 1,
+      children: [t('analytics.detail'), /*#__PURE__*/_jsxs("span", {
+        children: [loaded && /*#__PURE__*/_jsx(IconButton, {
+          onClick: onOpenBreakdown,
+          style: {
+            marginRight: 32
+          },
+          children: /*#__PURE__*/_jsx(ViewIcon, {})
+        }), /*#__PURE__*/_jsx(LocalizationProvider, {
+          dateAdapter: AdapterDayjs,
+          children: /*#__PURE__*/_jsx(DatePicker, {
+            disableFuture: true,
+            format: "ll",
+            value: dayjs(date),
+            onChange: onDateChange,
+            slotProps: {
+              textField: {
+                size: 'small'
+              }
+            }
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(Iframe, {
+      url: breakdownUrl,
+      width: "100%",
+      height: "100%",
+      frameBorder: 0,
+      onLoad: () => setLoaded(true),
+      styles: {
+        border: 0,
+        minHeight: '400vh'
+      }
+    })]
+  });
+}

package/es/blocklet/access/config-access.js

@@ -0,0 +1,307 @@
+import { useState } from 'react';
+import get from 'lodash/get';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import EditIcon from '@mui/icons-material/Edit';
+import useTheme from '@mui/material/styles/useTheme';
+import GroupIcon from '@mui/icons-material/Group';
+import Chip from '@mui/material/Chip';
+import ListItemText from '@mui/material/ListItemText';
+import Checkbox from '@mui/material/Checkbox';
+import { BLOCKLET_CONFIGURABLE_KEY } from '@blocklet/constant';
+import { WHO_CAN_ACCESS, NODE_SERVICES, WHO_CAN_ACCESS_PREFIX_ROLES } from '@abtnode/constant';
+import { getDisplayName, findServiceFromMeta, getRolesFromAuthConfig } from '@blocklet/meta/lib/util';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import Button from '@arcblock/ux/lib/Button';
+import Spinner from '@mui/material/CircularProgress';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useNodeContext } from '../../contexts/node';
+import { useTeamContext } from '../../contexts/team';
+import { isInstalling, formatError } from '../../util';
+import AccessConfig from '../../who-can-access/config';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const CONFIG_ROLE = 'roles';
+const Configs = [...AccessConfig, {
+  value: CONFIG_ROLE,
+  icon: GroupIcon,
+  title: {
+    zh: '指定通行证可访问',
+    en: 'Accessible to selected passports'
+  },
+  description: {
+    zh: '只有指定的通行证可以访问',
+    en: 'Only specified passports can access'
+  }
+}];
+const getAccess = (whoCanAccess, roleStore) => {
+  if (whoCanAccess && whoCanAccess.startsWith(WHO_CAN_ACCESS_PREFIX_ROLES)) {
+    const roleNames = getRolesFromAuthConfig({
+      whoCanAccess
+    });
+    const filterRoles = roleStore.filter(x => roleNames.includes(x.name));
+    return {
+      access: CONFIG_ROLE,
+      roles: filterRoles
+    };
+  }
+  return {
+    access: whoCanAccess,
+    roles: []
+  };
+};
+export const getComponentWhoCanAccess = (component, app, {
+  roles = []
+} = {}) => {
+  const access = (component.configs || []).find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.COMPONENT_ACCESS_WHO);
+  if (access) {
+    return getAccess(access.value, roles);
+  }
+  if (app && get(app, 'settings.whoCanAccess') && get(app, 'settings.whoCanAccess') !== WHO_CAN_ACCESS.ALL) {
+    return getAccess(get(app, 'settings.whoCanAccess'), roles);
+  }
+  const service = findServiceFromMeta(component.meta, NODE_SERVICES.AUTH);
+  if (get(service, 'config.whoCanAccess')) {
+    return getAccess(service.config.whoCanAccess, roles);
+  }
+  return {
+    access: WHO_CAN_ACCESS.ALL,
+    roles: []
+  };
+};
+export default function ConfigAccess({
+  blocklet,
+  ancestors,
+  children
+}) {
+  const theme = useTheme();
+  const [showDialog, setShowDialog] = useState('');
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    api
+  } = useNodeContext();
+  const {
+    roles: roleList
+  } = useTeamContext();
+  const [loading, setLoading] = useState('');
+  const root = ancestors[0] || blocklet;
+  const {
+    access: defaultValue,
+    roles: defaultRoles
+  } = getComponentWhoCanAccess(blocklet, root, {
+    roles: roleList
+  });
+  const [whoCanAccess, setWhoCanAccess] = useState(defaultValue);
+  const [roles, setRoles] = useState(defaultRoles);
+  const dids = [...ancestors.map(x => x.meta.did), blocklet.meta.did];
+  const iconStyle = {
+    marginRight: 4,
+    fontSize: 18,
+    verticalAlign: 'text-bottom',
+    color: theme.palette.text.secondary
+  };
+  const componentName = ancestors.concat(blocklet).map(x => getDisplayName(x, true)).join(' / ');
+  if (isInstalling(blocklet.status)) {
+    return null;
+  }
+  if (blocklet.status === 'unknown' && isInstalling(blocklet.status)) {
+    return null;
+  }
+  const onClose = () => {
+    setShowDialog(false);
+  };
+  const onOpen = e => {
+    e.stopPropagation();
+    // eslint-disable-next-line no-unused-expressions
+    setShowDialog(true);
+  };
+  const onWhoCanAccessChange = e => {
+    const {
+      value
+    } = e.target;
+    setWhoCanAccess(value);
+  };
+  const onRolesChange = e => {
+    setRoles(roleList.filter(x => (e.target.value || []).includes(x.name)));
+  };
+  const onConfirm = async () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      let value = whoCanAccess;
+      if (value === CONFIG_ROLE) {
+        value = `${WHO_CAN_ACCESS_PREFIX_ROLES}${roles.map(x => x.name).join(',')}`;
+      }
+      await api.updateWhoCanAccess({
+        input: {
+          did: dids,
+          whoCanAccess: value
+        }
+      });
+      Toast.success(t('blocklet.config.access.updatedTip'));
+      onClose();
+      setLoading(false);
+    } catch (err) {
+      setLoading(false);
+      Toast.error(formatError(err));
+    }
+  };
+  const disabled = loading || whoCanAccess === CONFIG_ROLE && !roles.length;
+  return [typeof children === 'function' ? children({
+    open: onOpen
+  }) : /*#__PURE__*/_jsx(IconButton, {
+    onClick: onOpen,
+    "data-cy": "action-config-component",
+    children: /*#__PURE__*/_jsx(EditIcon, {})
+  }), showDialog && /*#__PURE__*/_jsxs(StyledDialog, {
+    open: true,
+    fullWidth: true,
+    title: componentName,
+    onClose: onClose,
+    PaperProps: {
+      style: {
+        minHeight: 'auto'
+      }
+    },
+    actions: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: onClose,
+        color: "inherit",
+        "data-cy": "config-access-cancel",
+        children: t('common.cancel')
+      }), /*#__PURE__*/_jsxs(Button, {
+        onClick: onConfirm,
+        color: "primary",
+        disabled: disabled,
+        variant: "contained",
+        autoFocus: true,
+        "data-cy": "config-access-confirm",
+        children: [loading && /*#__PURE__*/_jsx(Spinner, {
+          size: 16
+        }), t('common.confirm')]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(Box, {
+      mt: 4,
+      mb: 3,
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: t('blocklet.config.access.description'),
+        select: true,
+        fullWidth: true,
+        value: whoCanAccess,
+        onChange: onWhoCanAccessChange,
+        "data-cy": "config-access-select",
+        SelectProps: {
+          renderValue: selected => {
+            const d = Configs.find(x => x.value === selected);
+            return d ? /*#__PURE__*/_jsxs(Box, {
+              children: [/*#__PURE__*/_jsx(d.icon, {
+                style: iconStyle
+              }), d.title[locale]]
+            }) : null;
+          }
+        },
+        children: Configs.map(d => {
+          return /*#__PURE__*/_jsxs(StyledMenuItem, {
+            value: d.value,
+            sx: {
+              display: 'block'
+            },
+            "data-cy": `config-access-opt-${d.value}`,
+            children: [/*#__PURE__*/_jsxs(Box, {
+              display: "flex",
+              alignItems: "center",
+              children: [/*#__PURE__*/_jsx(d.icon, {
+                style: iconStyle
+              }), /*#__PURE__*/_jsx(Box, {
+                children: d.title[locale]
+              })]
+            }), /*#__PURE__*/_jsx(Box, {
+              children: /*#__PURE__*/_jsx(Box, {
+                className: "tip",
+                children: d.description[locale]
+              })
+            })]
+          });
+        })
+      })
+    }), whoCanAccess === CONFIG_ROLE && /*#__PURE__*/_jsx(Box, {
+      mt: 4,
+      mb: 3,
+      children: /*#__PURE__*/_jsx(TextField, {
+        label: t('blocklet.config.access.description'),
+        select: true,
+        fullWidth: true,
+        value: roles.map(x => x.name),
+        onChange: onRolesChange,
+        SelectProps: {
+          multiple: true,
+          renderValue: selected => /*#__PURE__*/_jsx(Box, {
+            sx: {
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.5
+            },
+            children: selected.map(value => {
+              const role = roleList.find(x => x.name === value);
+              return /*#__PURE__*/_jsx(Chip, {
+                label: role.title
+              }, role.text);
+            })
+          })
+        },
+        children: roleList.map(({
+          name,
+          title
+        }) => {
+          return /*#__PURE__*/_jsxs(MenuItem, {
+            value: name,
+            children: [/*#__PURE__*/_jsx(Checkbox, {
+              checked: roles.some(x => x.name === name)
+            }), /*#__PURE__*/_jsx(ListItemText, {
+              primary: title
+            })]
+          }, name);
+        })
+      })
+    })]
+  })];
+}
+ConfigAccess.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  ancestors: PropTypes.array,
+  children: PropTypes.any
+};
+ConfigAccess.defaultProps = {
+  ancestors: [],
+  children: null
+};
+const StyledDialog = styled(Dialog)`
+  .MuiDialogContent-root {
+    padding-top: 0;
+    margin-top: -32px;
+  }
+  .MuiToolbar-root {
+    padding-right: 12px;
+  }
+  .ux-dialog_right {
+    padding-right: 20px;
+  }
+`;
+const StyledMenuItem = styled(MenuItem)`
+  .tip {
+    font-size: 12px;
+    color: ${props => props.theme.palette.text.secondary};
+  }
+`;