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

package/es/blocklet/configuration.js

@@ -0,0 +1,603 @@
+import React, { useState, useContext } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+import isEqual from 'lodash/isEqual';
+import Box from '@mui/material/Box';
+import useTheme from '@mui/material/styles/useTheme';
+import Switch from '@mui/material/Switch';
+import Divider from '@mui/material/Divider';
+import AddIcon from '@mui/icons-material/Add';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Empty from '@arcblock/ux/lib/Empty';
+import LockIcon from '@arcblock/icons/lib/LockIcon';
+import LoopIcon from '@mui/icons-material/Loop';
+import { EVENTS } from '@abtnode/constant';
+import { BLOCKLET_CONFIGURABLE_KEY, SUPPORTED_LANGUAGES } from '@blocklet/constant';
+import { getWhoCanAccess, isInProgress } from '@blocklet/meta/lib/util';
+import Toast from '@arcblock/ux/lib/Toast';
+import FormTextInput from '../form/form-text-input';
+import FormSelectInput from '../form/form-select-input';
+import { useNodeContext } from '../contexts/node';
+import { isInstalling, isValidClusterSize, BlockletAdminRoles, sortDomains } from '../util';
+import { enableDebug } from '../util/mode';
+import Permission, { withPermission } from '../permission';
+import AddDomainAlias from './router/action/add-domain-alias';
+import DomainStatus from './router/domain-status';
+import DomainActions from './router/domain-actions';
+import AppSk from './preferences/app-sk';
+import AddCert from './add-cert';
+import TransferOwner from './transfer-owner';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const languages = Object.keys(SUPPORTED_LANGUAGES).map(x => ({
+  code: x,
+  name: SUPPORTED_LANGUAGES[x].nativeName
+}));
+function BlockletEnvironment({
+  blocklet,
+  onUpdate,
+  hasPermission,
+  ...rest
+}) {
+  const node = useNodeContext();
+  const {
+    t
+  } = useContext(LocaleContext);
+  const [cpuCores, setCpuCores] = useState('');
+  const [loading, setLoading] = useState('');
+  const [showTransferOwner, setShowTransferOwner] = useState(false);
+  const whoCanAccess = getWhoCanAccess(blocklet);
+  const publicToStore = blocklet?.settings?.publicToStore;
+  const theme = useTheme();
+  const disabled = loading || !hasPermission;
+  const {
+    inService,
+    ws: {
+      useSubscription
+    }
+  } = node;
+  const {
+    did
+  } = blocklet.meta;
+  const {
+    site
+  } = blocklet;
+  const domains = sortDomains(site?.domainAliases);
+  const clusterMode = get(blocklet.meta, 'capabilities.clusterMode', false);
+  useSubscription(EVENTS.NODE_RUNTIME_INFO, res => {
+    if (clusterMode) {
+      setCpuCores(get(res, 'cpu.physicalCores', ''));
+    }
+  });
+  if (isInstalling(blocklet.status)) {
+    return null;
+  }
+
+  // configurable blocklet environment
+  const customDelete = blocklet.environments.find(x => x.key === 'BLOCKLET_DELETABLE');
+  const deletable = !customDelete || customDelete.value === 'yes';
+  const customLanguages = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LANGUAGES');
+  const customUrl = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_URL');
+  const customLogoSquare = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_SQUARE');
+  const customLogoRect = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_RECT');
+  const customLogoFavicon = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO_FAVICON');
+  const customLogoDeprecated = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LOGO');
+  const configurableEnvs = [{
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_NAME,
+    description: t('blocklet.config.name'),
+    value: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_NAME').value
+  }, {
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_DESCRIPTION,
+    description: t('blocklet.config.description'),
+    value: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_DESCRIPTION').value
+  }, {
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_URL,
+    description: t('blocklet.config.appUrl'),
+    value: customUrl ? customUrl.value : ''
+  }, {
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_SQUARE,
+    description: t('blocklet.config.logoSquare'),
+    value: customLogoSquare ? customLogoSquare.value : ''
+  }, {
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_RECT,
+    description: t('blocklet.config.logoRect'),
+    value: customLogoRect ? customLogoRect.value : ''
+  }, {
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO_FAVICON,
+    description: t('blocklet.config.logoFavicon'),
+    value: customLogoFavicon ? customLogoFavicon.value : ''
+  }, {
+    key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_LOGO,
+    description: t('blocklet.config.logo'),
+    value: customLogoDeprecated ? customLogoDeprecated.value : ''
+  }];
+  if (clusterMode) {
+    const exist = blocklet.configs.find(x => x.key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE);
+    const value = exist ? exist.value : cpuCores;
+    configurableEnvs.push({
+      key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE,
+      description: t('blocklet.config.clusterSize'),
+      value,
+      cpuCores
+    });
+  }
+  const onPublicToStoreChange = async e => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        checked
+      } = e.target;
+      const {
+        blocklet: data
+      } = await node.api.configPublicToStore({
+        input: {
+          did: blocklet.meta.did,
+          publicToStore: checked
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onSubmitConfig = async (key, value) => {
+    if (key === BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_CLUSTER_SIZE) {
+      const errMessage = isValidClusterSize({
+        value,
+        cpuCores
+      });
+      if (errMessage) {
+        Toast.error(errMessage);
+        return;
+      }
+    }
+    const params = [{
+      key,
+      value
+    }];
+    try {
+      setLoading(true);
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: params
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onDeletableChange = async e => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        checked
+      } = e.target;
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: [{
+            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_DELETABLE,
+            value: checked ? 'no' : 'yes'
+          }]
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const onUpdateCors = async value => {
+    const oldValue = site.corsAllowedOrigins || [];
+    const newValue = value.split(',').map(x => x.trim()).filter(Boolean);
+    if (isEqual(oldValue, newValue)) {
+      return false;
+    }
+    try {
+      setLoading(true);
+      const corsAllowedOrigins = newValue.length ? newValue : ['__none__'];
+      await node.api.updateRoutingSite({
+        input: {
+          id: site.id,
+          corsAllowedOrigins,
+          teamDid: blocklet.meta.did
+        }
+      });
+      setLoading(false);
+    } catch (err) {
+      Toast.error(err.message);
+      setLoading(false);
+      return false;
+    }
+    return true;
+  };
+  const onAppSkChange = async value => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      const {
+        blocklet: data
+      } = await node.api.configBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          configs: [{
+            key: BLOCKLET_CONFIGURABLE_KEY.BLOCKLET_APP_SK,
+            value
+          }]
+        }
+      });
+      onUpdate(data);
+    } catch (err) {
+      Toast.error(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    ...rest,
+    children: [configurableEnvs.map(item => /*#__PURE__*/_jsxs(Box, {
+      className: "config-form",
+      mt: 2,
+      children: [/*#__PURE__*/_jsx(Box, {
+        className: "config-label",
+        fontSize: 14,
+        mb: 0,
+        children: item.description
+      }), /*#__PURE__*/_jsx(FormTextInput, {
+        style: {
+          marginTop: 0
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        initialValue: item.value,
+        onSubmit: value => onSubmitConfig(item.key, value)
+      })]
+    })), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      children: whoCanAccess === 'all' && blocklet.source === 'registry' && /*#__PURE__*/_jsxs(Box, {
+        className: "config-item",
+        children: [/*#__PURE__*/_jsxs(Box, {
+          className: "config-label",
+          children: [t('blocklet.config.access.publicToStore'), /*#__PURE__*/_jsx(Box, {
+            className: "config-desc",
+            children: t('blocklet.config.access.publicInstanceTip')
+          })]
+        }), /*#__PURE__*/_jsx(Switch, {
+          disabled: disabled,
+          checked: publicToStore,
+          defaultChecked: true,
+          onChange: onPublicToStoreChange
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      component: Divider,
+      my: 3
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "config-form",
+      mt: 2,
+      children: [/*#__PURE__*/_jsx(Box, {
+        className: "config-label",
+        fontSize: 14,
+        mb: 0,
+        children: t('blocklet.config.languages')
+      }), /*#__PURE__*/_jsx(FormSelectInput, {
+        style: {
+          marginTop: 0
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        options: languages,
+        initialValue: customLanguages ? customLanguages.value.split(',') : ['en', 'zh'],
+        onSubmit: value => onSubmitConfig('BLOCKLET_APP_LANGUAGES', value)
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      component: Divider,
+      my: 3
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "config-form",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "config-label",
+          children: t('common.domain')
+        }), /*#__PURE__*/_jsx(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: /*#__PURE__*/_jsx(AddDomainAlias, {
+            id: site.id,
+            title: t('router.domain.add.title'),
+            teamDid: did,
+            children: ({
+              open
+            }) => /*#__PURE__*/_jsxs(Button, {
+              style: {
+                marginLeft: 16
+              },
+              variant: "contained",
+              color: "primary",
+              "data-cy": "add-domain-alias",
+              onClick: open,
+              disabled: isInProgress(blocklet.status),
+              children: [/*#__PURE__*/_jsx(AddIcon, {
+                style: {
+                  fontSize: '1.3em',
+                  marginRight: 4
+                }
+              }), t('common.add')]
+            })
+          })
+        })]
+      }), domains.map((domain, index) => /*#__PURE__*/_jsxs(Box, {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        mt: index ? 0 : 1,
+        children: [/*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/*#__PURE__*/_jsx(DomainStatus, {
+            domain: domain,
+            filters: ['domain']
+          }, `${domain.value}-domain`), /*#__PURE__*/_jsx(Box, {
+            ml: 2,
+            mr: 0.5,
+            children: domain.value
+          }), /*#__PURE__*/_jsx(DomainStatus, {
+            domain: domain,
+            filters: ['http']
+          }, `${domain.value}-http`), /*#__PURE__*/_jsx("span", {
+            style: {
+              marginLeft: 12
+            }
+          }), /*#__PURE__*/_jsx(AddCert, {
+            domain: domain.value,
+            domainStatus: domain.domainStatus,
+            did: blocklet.meta.did,
+            children: ({
+              open
+            }) => /*#__PURE__*/_jsx(Button, {
+              size: "small",
+              onClick: e => open(e),
+              children: t('router.cert.genLetsEncryptCert.title')
+            })
+          })]
+        }), hasPermission && !domain.isProtected ? /*#__PURE__*/_jsx(DomainActions, {
+          site: site,
+          domain: domain,
+          blocklet: blocklet
+        }) : /*#__PURE__*/_jsx(Tooltip, {
+          title: t('blocklet.router.domainLockTooltip'),
+          placement: "top",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            disabled: true,
+            size: "large",
+            style: {
+              pointerEvents: 'auto',
+              // padding replace to margin, fix the tooltip position
+              paddingTop: 0,
+              paddingBottom: 0,
+              margin: '12px 0'
+            },
+            children: /*#__PURE__*/_jsx(LockIcon, {
+              style: {
+                fill: theme.palette.text.disabled
+              }
+            })
+          })
+        })]
+      }, domain.value)), !domains.length && /*#__PURE__*/_jsx(Box, {
+        mt: 4,
+        children: /*#__PURE__*/_jsx(Empty, {
+          children: t('common.empty')
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      component: Divider,
+      my: 3
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      mt: 2,
+      children: /*#__PURE__*/_jsx(Box, {
+        className: "config-label",
+        mb: 0,
+        children: t('common.security')
+      })
+    }), /*#__PURE__*/_jsxs(Box, {
+      className: "config-form",
+      mt: 2,
+      children: [/*#__PURE__*/_jsx(Box, {
+        className: "config-label",
+        fontSize: 14,
+        mb: 0,
+        children: t('router.domainSecurity.cors.title')
+      }), /*#__PURE__*/_jsx(Box, {
+        mb: 1.5,
+        className: "config-desc",
+        children: t('router.domainSecurity.cors.description', {
+          name: 'the blocklet'
+        })
+      }), /*#__PURE__*/_jsx(FormTextInput, {
+        style: {
+          marginTop: 0
+        },
+        disabled: loading || disabled,
+        loading: loading,
+        initialValue: (site.corsAllowedOrigins || []).join(', '),
+        onSubmit: onUpdateCors
+      })]
+    }), /*#__PURE__*/_jsx(Box, {
+      className: "config-form",
+      component: Divider,
+      my: 3
+    }), /*#__PURE__*/_jsx(Box, {
+      mb: 2,
+      className: "config-label",
+      fontSize: 20,
+      children: t('blocklet.config.dangerZone')
+    }), /*#__PURE__*/_jsxs(Box, {
+      px: 2,
+      py: 1,
+      sx: {
+        border: '1px solid red',
+        borderRadius: 2
+      },
+      children: [/*#__PURE__*/_jsx(Box, {
+        className: "config-form",
+        mt: 2,
+        children: !inService && /*#__PURE__*/_jsxs(Box, {
+          className: "config-item",
+          children: [/*#__PURE__*/_jsxs(Box, {
+            className: "config-label",
+            children: [t('blocklet.config.deletable.name'), /*#__PURE__*/_jsx(Box, {
+              className: "config-desc",
+              children: deletable ? t('blocklet.config.deletable.disable') : t('blocklet.config.deletable.enable')
+            })]
+          }), /*#__PURE__*/_jsx(Switch, {
+            disabled: disabled,
+            checked: !deletable,
+            defaultChecked: true,
+            onChange: onDeletableChange
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(Box, {
+        className: "config-form",
+        mt: 2,
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "config-label",
+          fontSize: 14,
+          mb: 0,
+          children: t('blocklet.config.sk')
+        }), /*#__PURE__*/_jsx(AppSk, {
+          disabled: loading || disabled,
+          loading: loading,
+          initialValue: blocklet.environments.find(x => x.key === 'BLOCKLET_APP_SK').value,
+          onChange: onAppSkChange
+        })]
+      }), inService &&
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/aria-role
+      _jsx(Permission, {
+        role: "owner",
+        children: isOwner => (isOwner || enableDebug) && /*#__PURE__*/_jsxs(Box, {
+          className: "config-form",
+          mt: 2,
+          children: [/*#__PURE__*/_jsxs(Box, {
+            className: "config-item",
+            children: [/*#__PURE__*/_jsx(Box, {
+              className: "config-label",
+              mb: 0,
+              children: t('team.transferApp.name')
+            }), /*#__PURE__*/_jsxs(Button, {
+              style: {
+                flexShrink: 0
+              },
+              variant: "contained",
+              edge: "end",
+              color: "error",
+              size: "small",
+              "data-cy": "transfer-app",
+              onClick: () => setShowTransferOwner(true),
+              children: [/*#__PURE__*/_jsx(LoopIcon, {
+                style: {
+                  fontSize: '1.3em',
+                  marginRight: 4
+                }
+              }), t('team.transferApp.name')]
+            })]
+          }), showTransferOwner && /*#__PURE__*/_jsx(TransferOwner, {
+            onCancel: () => setShowTransferOwner(false),
+            onSuccess: () => setShowTransferOwner(false)
+          })]
+        })
+      })]
+    })]
+  });
+}
+const BlockletEnvironmentInDaemon = withPermission(BlockletEnvironment, 'mutate_blocklets');
+const BlockletEnvironmentInService = withPermission(BlockletEnvironment, '', BlockletAdminRoles);
+export default function BlockletEnvironmentWithPermission(props) {
+  const {
+    inService
+  } = useNodeContext();
+  if (inService) {
+    return /*#__PURE__*/_jsx(BlockletEnvironmentInService, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(BlockletEnvironmentInDaemon, {
+    ...props
+  });
+}
+BlockletEnvironment.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func,
+  hasPermission: PropTypes.bool
+};
+BlockletEnvironment.defaultProps = {
+  onUpdate: () => {},
+  hasPermission: false
+};
+const Div = styled.div`
+  padding-top: 24px;
+  .config-form {
+    flex-grow: 1;
+    overflow-y: auto;
+    ${props => props.theme.breakpoints.down('md')} {
+      width: 100%;
+      flex-shrink: 0;
+      padding: 0 24px;
+      transform: translate(0, 0);
+      max-height: 60vh;
+    }
+  }
+
+  .config-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 16px 0;
+  }
+
+  .config-label {
+    font-weight: bold;
+  }
+
+  .config-desc {
+    font-weight: normal;
+    font-size: 12px;
+    color: #666;
+  }
+
+  .form-item {
+    margin-top: 0;
+  }
+`;

package/es/blocklet/disk-info.js

@@ -0,0 +1,75 @@
+/* eslint-disable react/jsx-one-expression-per-line */
+import { useContext } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import filesize from 'filesize';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function BlockletDiskInfo({
+  blocklet,
+  ...rest
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  if (!blocklet.diskInfo) {
+    return /*#__PURE__*/_jsx(Typography, {
+      children: t('blocklet.diskInfo.empty')
+    });
+  }
+  const renderDiskInfo = (dir, size, handler) => /*#__PURE__*/_jsxs(Typography, {
+    children: [handler ?
+    /*#__PURE__*/
+    /* eslint-disable-next-line no-script-url, jsx-a11y/anchor-is-valid */
+    _jsx(Link, {
+      style: {
+        cursor: 'pointer'
+      },
+      onClick: handler,
+      underline: "hover",
+      children: dir
+    }) : dir, ' ', /*#__PURE__*/_jsx("strong", {
+      children: size ? filesize(size) : 'empty'
+    })]
+  });
+  const env = blocklet.environments.reduce((acc, x) => {
+    acc[x.key] = x.value;
+    return acc;
+  }, {});
+  const rows = [{
+    key: 'appDir',
+    name: t('blocklet.diskInfo.appDir'),
+    value: renderDiskInfo(env.BLOCKLET_APP_DIR, blocklet.diskInfo.app)
+  }, {
+    key: 'dataDir',
+    name: t('blocklet.diskInfo.dataDir'),
+    value: renderDiskInfo(env.BLOCKLET_DATA_DIR, blocklet.diskInfo.data)
+  }, {
+    key: 'logDir',
+    name: t('blocklet.diskInfo.logDir'),
+    value: renderDiskInfo(env.BLOCKLET_LOG_DIR, blocklet.diskInfo.log)
+  }, {
+    key: 'cacheDir',
+    name: t('blocklet.diskInfo.cacheDir'),
+    value: renderDiskInfo(env.BLOCKLET_CACHE_DIR, blocklet.diskInfo.cache)
+  }];
+  return /*#__PURE__*/_jsx(Div, {
+    component: "div",
+    ...rest,
+    children: rows.map(row => /*#__PURE__*/_jsx(InfoRow, {
+      valueComponent: "div",
+      nameWidth: 120,
+      name: row.name,
+      children: row.value
+    }, row.key))
+  });
+}
+BlockletDiskInfo.propTypes = {
+  blocklet: PropTypes.object.isRequired
+};
+BlockletDiskInfo.defaultProps = {};
+const Div = styled(Typography)``;

package/es/blocklet/icons.js

@@ -0,0 +1,18 @@
+import Remove from '@mui/icons-material/Delete';
+import Start from '@mui/icons-material/PlayArrow';
+import Stop from '@mui/icons-material/Stop';
+import Restart from '@mui/icons-material/Replay';
+import Reload from '@mui/icons-material/Autorenew';
+import Config from '@mui/icons-material/Settings';
+import Log from '@mui/icons-material/Receipt';
+import Group from '@mui/icons-material/Group';
+export default {
+  Start,
+  Stop,
+  Restart,
+  Reload,
+  Remove,
+  Config,
+  Log,
+  Group
+};