@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/blocklet/component/index.js

@@ -0,0 +1,975 @@
+import React, { useState, useContext } from 'react';
+import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import Dialog from '@mui/material/Dialog';
+import Box from '@mui/material/Box';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import UpdateIcon from '@mui/icons-material/Update';
+import IconButton from '@mui/material/IconButton';
+import AddIcon from '@mui/icons-material/Add';
+import Badge from '@mui/material/Badge';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import LaunchIcon from '@mui/icons-material/Launch';
+import Grid from '@mui/material/Grid';
+import Tooltip from '@mui/material/Tooltip';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import Checkbox from '@mui/material/Checkbox';
+import RestartIcon from '@mui/icons-material/Replay';
+import ReloadIcon from '@mui/icons-material/Autorenew';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import { Icon } from '@iconify/react';
+import { APP_STRUCT_VERSION } from '@abtnode/constant';
+import Spinner from '@mui/material/CircularProgress';
+import InfoRow from '@arcblock/ux/lib/InfoRow';
+import { LocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Button from '@arcblock/ux/lib/Button';
+import Empty from '@arcblock/ux/lib/Empty';
+import { getComponentMissingConfigs, getDisplayName, forEachChildSync, isInProgress } from '@blocklet/meta/lib/util';
+import normalizePathPrefix from '@abtnode/util/lib/normalize-path-prefix';
+import Toast from '@arcblock/ux/lib/Toast';
+import { useDeletingBlockletContext } from '../../contexts/deleting-blocklets';
+import DidAddress from '../../did-address';
+import Tag from '../../tag';
+import BlockletSource from '../blocklet-source';
+import BlockletStatus from '../status';
+import BlockletVersion from '../version';
+import Confirm from '../../confirm';
+import { useNodeContext } from '../../contexts/node';
+import { formatPerson, formatError, sleep, BlockletAdminRoles, formatToDatetime } from '../../util';
+import Permission from '../../permission';
+import BlockletBundleAvatar from '../bundle-avatar';
+import BlockletMode from '../mode';
+import ComponentConfiguration from './configuration';
+import DeleteComponent from './delete';
+import StartComponent from './start';
+import Line from './line';
+import AddComponent from './add';
+import AddRule from '../router/action/add-rule';
+import RuleList from '../router/rule-list';
+import Actions from '../../actions';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getEngineRows = (engine, t) => {
+  if (!engine) {
+    return [];
+  }
+  return [{
+    name: t('common.name'),
+    value: engine.displayName
+  }, {
+    name: t('common.description'),
+    value: engine.description
+  }, {
+    name: t('common.version'),
+    value: /*#__PURE__*/_jsx(Tag, {
+      children: engine.version
+    })
+  }];
+};
+const getSourceInfo = blocklet => {
+  const {
+    source,
+    deployedFrom,
+    bundleSource
+  } = blocklet;
+  if (source) {
+    return {
+      source,
+      deployedFrom
+    };
+  }
+  if (!bundleSource) {
+    return {
+      source: 'upload',
+      deployedFrom
+    };
+  }
+  if (bundleSource.url) {
+    return {
+      source: 'url',
+      deployedFrom: deployedFrom || Array.isArray(bundleSource.url) ? bundleSource.url[0] : bundleSource.url
+    };
+  }
+  if (bundleSource.store) {
+    return {
+      source: 'registry',
+      deployedFrom: deployedFrom || Array.isArray(bundleSource.store) ? bundleSource.store[0] : bundleSource.store
+    };
+  }
+  return {};
+};
+const getComponentName = (componentId, app) => {
+  const ids = componentId.split('/').slice(1);
+  let parent = app;
+  let index = 0;
+  const names = [];
+  while (parent && index < ids.length) {
+    // eslint-disable-next-line no-loop-func
+    const component = parent.children.find(x => x.meta.did === ids[index]);
+    parent = component;
+    index++;
+    if (component) {
+      names.push(component.meta.title);
+    }
+  }
+  return names.join(' / ');
+};
+function ComponentItem({
+  blocklet,
+  ancestors,
+  depth,
+  onRemove,
+  onStart,
+  onStop,
+  onRestart,
+  onReload,
+  getComponentUrl,
+  app
+}) {
+  const {
+    t,
+    locale
+  } = useContext(LocaleContext);
+  const [componentInfo, setComponentInfo] = useState();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [confirmSetting, setConfirmSetting] = useState(null);
+  const {
+    deletingBlocklets: deletingComponents
+  } = useDeletingBlockletContext();
+  let {
+    status
+  } = blocklet;
+  if (depth === 1 && deletingComponents.includes(blocklet.meta.did)) {
+    status = 'deleting';
+  }
+  const mountPoint = `/${blocklet.mountPoint || '/'}`.replace(/\/+/g, '/');
+  const href = getComponentUrl(mountPoint);
+  const renderRows = rows => rows.map(row => {
+    if (row.name === t('common.did') || row.name === t('blocklet.appId')) {
+      return /*#__PURE__*/_jsx(InfoRow, {
+        valueComponent: "div",
+        nameWidth: 120,
+        name: row.name,
+        nameFormatter: () => row.name,
+        children: row.value
+      }, row.name);
+    }
+    return /*#__PURE__*/_jsx(InfoRow, {
+      valueComponent: "div",
+      nameWidth: 120,
+      name: row.name,
+      children: row.value
+    }, row.name);
+  });
+  const sourceInfo = componentInfo ? getSourceInfo(componentInfo) : {};
+  const componentRows = componentInfo ? [{
+    name: t('common.name'),
+    value: getDisplayName(componentInfo, true)
+  }, {
+    name: t('common.version'),
+    value: /*#__PURE__*/_jsx(BlockletVersion, {
+      blocklet: componentInfo,
+      checkUpgrade: false
+    })
+  }, {
+    name: t('common.status'),
+    value: /*#__PURE__*/_jsx(BlockletStatus, {
+      status: status,
+      source: componentInfo.source
+    })
+  }, blocklet.status === 'running' ? {
+    name: t('blocklet.startedAt'),
+    value: formatToDatetime(blocklet.startedAt, locale)
+  } : null, blocklet.status !== 'running' ? {
+    name: t('blocklet.stoppedAt'),
+    value: formatToDatetime(blocklet.stoppedAt, locale)
+  } : null, {
+    name: t('common.mountPoint'),
+    value: mountPoint
+  }, {
+    name: t('common.group'),
+    value: /*#__PURE__*/_jsx(Tag, {
+      type: "success",
+      children: componentInfo.meta.group
+    })
+  }, {
+    name: t('blocklet.overview.source'),
+    value: /*#__PURE__*/_jsx(BlockletSource, {
+      sourceInfo: sourceInfo,
+      blocklet: blocklet
+    })
+  }, {
+    name: t('blocklet.overview.deployedFrom'),
+    value: sourceInfo.deployedFrom || '-'
+  }, {
+    name: t('common.did'),
+    value: /*#__PURE__*/_jsx(DidAddress, {
+      did: componentInfo.meta.did
+    })
+  }, {
+    name: t('common.author'),
+    value: formatPerson(componentInfo.meta.author)
+  }, {
+    name: t('common.engine'),
+    value: getEngineRows(componentInfo.engine, t).map(({
+      name,
+      value
+    }) => /*#__PURE__*/_jsx(InfoRow, {
+      style: {
+        marginBottom: 4
+      },
+      nameWidth: 120,
+      name: name,
+      children: value
+    }, name))
+  }, blocklet.dependents?.length ? {
+    name: t('common.dependents'),
+    value: /*#__PURE__*/_jsx(Box, {
+      children: blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
+        children: `${getComponentName(x.id, app)} ${x.required ? `(${t('common.required')})` : ''}`
+      }))
+    })
+  } : null].filter(Boolean) : [];
+  const appInProgress = isInProgress(app.status);
+  const componentInProgress = isInProgress(blocklet.status);
+  let deleteDisabledTip = '';
+  if (appInProgress || componentInProgress || depth === 1 && deletingComponents.includes(blocklet.meta.did)) {
+    deleteDisabledTip = t('blocklet.component.tip.stopBlocklet');
+  } else if (blocklet.dependents?.length) {
+    const requires = blocklet.dependents.filter(x => x.required);
+    if (requires.length) {
+      const names = requires.map(x => getComponentName(x.id, app));
+      deleteDisabledTip = t('blocklet.component.tip.requiredBy', {
+        name: names.join(', ')
+      });
+    }
+  }
+  return [/*#__PURE__*/_jsxs(StyledComponentRow, {
+    display: "flex",
+    py: 2,
+    className: "component-item",
+    justifyContent: "space-between",
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsxs(Box, {
+      pl: 2,
+      width: {
+        xs: 300,
+        md: 400
+      },
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(BlockletBundleAvatar, {
+        blocklet: blocklet,
+        ancestors: ancestors
+      }), /*#__PURE__*/_jsxs(Box, {
+        ml: "16px",
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "component-name",
+          onClick: () => setComponentInfo(blocklet),
+          children: getDisplayName(blocklet, true)
+        }), /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(BlockletVersion, {
+            blocklet: blocklet,
+            checkUpgrade: false
+          }), /*#__PURE__*/_jsx(BlockletMode, {
+            style: {
+              marginLeft: 4
+            },
+            mode: blocklet.mode || ''
+          }), status !== 'unknown' && /*#__PURE__*/_jsx(BlockletStatus, {
+            style: {
+              marginLeft: 4
+            },
+            status: status,
+            source: blocklet.source
+          }), !!blocklet.dependents?.length && /*#__PURE__*/_jsx(Tooltip, {
+            title: [`${t('common.dependents')}: `, blocklet.dependents.map(x => /*#__PURE__*/_jsx(Box, {
+              pl: 1,
+              children: `${getComponentName(x.id, app)} ${x.required ? `(${t('common.required')})` : ''}`
+            }))],
+            children: /*#__PURE__*/_jsx(Box, {
+              display: "flex",
+              color: "primary.main",
+              ml: 1,
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: "octicon:package-dependents-16"
+              })
+            })
+          })]
+        })]
+      })]
+    }, blocklet), /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: {
+          xs: 'none',
+          md: 'flex'
+        }
+      },
+      alignItems: "center",
+      flexGrow: "1",
+      children: /*#__PURE__*/_jsx("a", {
+        target: "_blank",
+        href: href,
+        rel: "noopener noreferrer",
+        title: href,
+        children: /*#__PURE__*/_jsx(Box, {
+          maxWidth: 400,
+          sx: {
+            color: 'secondary.main',
+            fontSize: 18,
+            px: 2
+          },
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textOverflow: "ellipsis",
+          children: normalizePathPrefix(mountPoint)
+        })
+      })
+    }, mountPoint), /*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: t('common.visit'),
+        children: /*#__PURE__*/_jsx("a", {
+          target: "_blank",
+          href: href,
+          rel: "noopener noreferrer",
+          children: /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            children: /*#__PURE__*/_jsx(LaunchIcon, {})
+          })
+        })
+      }), /*#__PURE__*/_jsx(ComponentConfiguration, {
+        blocklet: blocklet,
+        ancestors: ancestors,
+        children: ({
+          open
+        }) => /*#__PURE__*/_jsx(Tooltip, {
+          title: t('common.config'),
+          children: /*#__PURE__*/_jsx(StyledBadge, {
+            color: "error",
+            badgeContent: "",
+            variant: "dot",
+            invisible: !getComponentMissingConfigs(blocklet, ancestors).length,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: open,
+              size: "small",
+              children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {})
+            })
+          })
+        }, "config")
+      }), /*#__PURE__*/_jsx(StartComponent, {
+        blocklet: app,
+        component: blocklet,
+        onStart: onStart,
+        onStop: onStop,
+        disabled: app.status !== 'starting' && isInProgress(app.status)
+      }), /*#__PURE__*/_jsx(Actions, {
+        "data-cy": "component-actions",
+        actions: [{
+          icon: /*#__PURE__*/_jsx(InfoOutlinedIcon, {}),
+          text: t('common.detail'),
+          onClick: () => {
+            setComponentInfo(blocklet);
+          }
+        }, {
+          icon: /*#__PURE__*/_jsx(RestartIcon, {}),
+          text: t('common.restart'),
+          onClick: () => {
+            setConfirmSetting({
+              title: `${t('common.restart')} ${blocklet.meta.title}`,
+              description: t('blocklet.action.restartDescription'),
+              confirm: t('blocklet.action.confirmRestart'),
+              cancel: t('common.cancel'),
+              onConfirm: async () => {
+                setLoading(true);
+                await onRestart(blocklet);
+                setLoading(false);
+              },
+              onCancel: () => setConfirmSetting(null)
+            });
+          },
+          disabled: appInProgress || componentInProgress || blocklet.status !== 'running'
+        }, {
+          icon: /*#__PURE__*/_jsx(ReloadIcon, {}),
+          text: t('common.reload'),
+          onClick: async () => {
+            setLoading(true);
+            await onReload(blocklet);
+            setLoading(false);
+          },
+          disabled: loading || appInProgress || componentInProgress || blocklet.status !== 'running'
+        }, {
+          icon: /*#__PURE__*/_jsx(DeleteIcon, {}),
+          text: t('common.delete'),
+          onClick: () => {
+            setShowDeleteConfirm(true);
+          },
+          disabled: appInProgress || componentInProgress || !!deleteDisabledTip,
+          tip: deleteDisabledTip
+        }]
+      })]
+    }, "actions")]
+  }, "group-not-gateway-box"), /*#__PURE__*/_jsx(Line, {
+    depth: 2
+  }), !!componentInfo && /*#__PURE__*/_jsx(Dialog, {
+    open: true,
+    fullWidth: true,
+    maxWidth: "md",
+    onClose: () => {
+      setComponentInfo(null);
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      paddingY: 1.5,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: t('common.componentBasicInfo')
+      }), /*#__PURE__*/_jsx(DialogContent, {
+        children: renderRows(componentRows)
+      })]
+    }, "dialog-wrapper")
+  }, "base-info-dialog"), /*#__PURE__*/_jsx(DeleteComponent, {
+    blocklet: app,
+    component: blocklet,
+    remove: async (...param) => {
+      setLoading(true);
+      try {
+        await onRemove(...param);
+      } catch {
+        // ignore
+      }
+      setLoading(false);
+      setShowDeleteConfirm(false);
+    },
+    onCancel: () => setShowDeleteConfirm(false),
+    hideBtn: true,
+    showConfirm: showDeleteConfirm
+  }), confirmSetting && /*#__PURE__*/_jsx(Confirm, {
+    title: confirmSetting.title,
+    description: confirmSetting.description,
+    confirm: confirmSetting.confirm,
+    cancel: confirmSetting.cancel,
+    params: confirmSetting.params,
+    onConfirm: confirmSetting.onConfirm,
+    onCancel: confirmSetting.onCancel
+  })];
+}
+ComponentItem.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  ancestors: PropTypes.array,
+  depth: PropTypes.number,
+  onRemove: PropTypes.func,
+  onStart: PropTypes.func,
+  onStop: PropTypes.func,
+  onRestart: PropTypes.func,
+  onReload: PropTypes.func,
+  getComponentUrl: PropTypes.func,
+  app: PropTypes.object
+};
+ComponentItem.defaultProps = {
+  ancestors: [],
+  depth: 0,
+  onRemove: () => {},
+  onStart: () => {},
+  onStop: () => {},
+  onRestart: () => {},
+  onReload: () => {},
+  getComponentUrl: () => window.location.origin,
+  app: null
+};
+const StyledBadge = styled(Badge)`
+  .BaseBadge-badge {
+    top: ${props => props.top * 8 || 6}px;
+    right: ${props => props.right * 8 || 6}px;
+  }
+`;
+const StyledComponentRow = styled(Box)`
+  .component-name {
+    color: #222;
+    font-size: 16px;
+    cursor: pointer;
+  }
+`;
+export default function BlockletComponent({
+  blocklet,
+  onUpdate,
+  getComponentUrl,
+  ...rest
+}) {
+  const {
+    t
+  } = useContext(LocaleContext);
+  const {
+    api,
+    inService,
+    info
+  } = useNodeContext();
+  const {
+    addDeletingDid,
+    removeDeletingDid,
+    matchDeletingDid
+  } = useDeletingBlockletContext();
+  const [loading, setLoading] = useState(false);
+  const [updateConfirm, setUpdateConfirm] = useState(null);
+  const [showSettings, setShowSettings] = useState(null);
+  const [showContainer, setShowContainer] = useState(false);
+  const needMigration = blocklet && blocklet.structVersion !== APP_STRUCT_VERSION;
+
+  // update dot is not used but maybe useful in the further
+  const [showUpdateDot, setShowUpdateDot] = useState(false);
+  const components = [...blocklet.children] || [];
+  if (blocklet.meta.group !== 'gateway') {
+    // add root blocklet to table list
+    components.unshift(blocklet);
+  }
+  matchDeletingDid(components.map(e => e.meta.did));
+  const checkForUpdates = async () => {
+    if (loading) {
+      return;
+    }
+    setLoading(true);
+    try {
+      // check child component version
+      const {
+        updateId,
+        updateList
+      } = (await api.checkComponentsForUpdates({
+        input: {
+          did: blocklet.meta.did
+        }
+      })).preUpdateInfo || {};
+      setLoading(false);
+      if (!updateId) {
+        Toast.info(t('blocklet.component.noUpdate'));
+        return;
+      }
+      const list = [];
+      forEachChildSync(blocklet, (b, {
+        id,
+        ancestors
+      }) => {
+        const updateItem = updateList.find(x => x.id === id);
+        if (updateItem) {
+          const name = ancestors.slice(1).concat(b).map(x => x.meta.title || x.meta.name).join(' / ');
+
+          // groupId 为一级组件的 id
+          const groupId = (ancestors[1] || b).meta.did;
+          list.push({
+            groupId,
+            name,
+            version: b.meta.version,
+            newVersion: updateItem.meta.version
+          });
+        }
+      });
+      const checks = {};
+      list.forEach(x => {
+        if (!checks[x.groupId]) {
+          checks[x.groupId] = true;
+        } else {
+          x.disabled = true;
+        }
+      });
+      setUpdateConfirm({
+        params: {
+          updateId
+        },
+        list,
+        checks,
+        hasChecks: true
+      });
+    } catch (err) {
+      setLoading(false);
+      Toast.error(formatError(err));
+    }
+  };
+  const onConfirmUpdate = async () => {
+    if (loading) {
+      return;
+    }
+    try {
+      setLoading(true);
+      const selectedComponents = Object.keys(updateConfirm.checks).filter(x => updateConfirm.checks[x]);
+      const input = {
+        updateId: updateConfirm.params.updateId,
+        rootDid: blocklet.meta.did,
+        selectedComponents
+      };
+      await api.upgradeComponents({
+        input
+      });
+      setLoading(false);
+      setUpdateConfirm(null);
+      setShowUpdateDot(null);
+    } catch (error) {
+      setLoading(false);
+      Toast.error(formatError(error));
+    }
+  };
+  const removeComponent = async (d, type) => {
+    addDeletingDid(d.meta.did);
+    try {
+      await api.deleteComponent({
+        input: {
+          did: d.meta.did,
+          keepData: type === 'keepData',
+          rootDid: blocklet.meta.did
+        }
+      });
+      await sleep(800);
+    } catch (err) {
+      Toast.error(formatError(err));
+      removeDeletingDid(d.meta.did);
+    }
+  };
+  const startComponent = async d => {
+    try {
+      await api.startBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await sleep(800);
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  const stopComponent = async d => {
+    try {
+      await api.stopBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await sleep(800);
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  const restartComponent = async d => {
+    try {
+      await api.restartBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await sleep(800);
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  const reloadComponent = async d => {
+    try {
+      await api.reloadBlocklet({
+        input: {
+          did: blocklet.meta.did,
+          componentDids: [d.meta.did]
+        }
+      });
+      await sleep(800);
+      Toast.success(t('blocklet.reloadSuccess'));
+    } catch (err) {
+      Toast.error(formatError(err));
+    }
+  };
+  const onUpdateChecksChange = (e, groupId) => {
+    const {
+      checked: newValue
+    } = e.target;
+    setUpdateConfirm(x => {
+      const checks = Object.entries(x.checks).reduce((o, [key, oldValue]) => {
+        o[key] = groupId === key ? newValue : oldValue;
+        return o;
+      }, {});
+      const hasChecks = Object.values(checks).includes(true);
+      return {
+        ...x,
+        checks,
+        hasChecks
+      };
+    });
+  };
+  return /*#__PURE__*/_jsxs(Div, {
+    component: "div",
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "title",
+        children: [t('common.components'), !needMigration && /*#__PURE__*/_jsx(Permission, {
+          permission: inService ? '' : 'mutate_blocklets',
+          role: inService ? BlockletAdminRoles : [],
+          children: /*#__PURE__*/_jsx(StyledBadge, {
+            top: 1.2,
+            right: 0.4,
+            color: "error",
+            badgeContent: "",
+            variant: "dot",
+            invisible: !showUpdateDot,
+            children: /*#__PURE__*/_jsxs(Button, {
+              disabled: loading || isInProgress(blocklet.status),
+              color: "secondary",
+              onClick: () => {
+                checkForUpdates();
+              },
+              "data-cy": "check-for-updates",
+              children: [/*#__PURE__*/_jsx(Box, {
+                mr: 0.5,
+                display: "flex",
+                children: loading ? /*#__PURE__*/_jsx(Spinner, {
+                  size: 16
+                }) : /*#__PURE__*/_jsx(UpdateIcon, {
+                  style: {
+                    fontSize: '1em'
+                  }
+                })
+              }), t('blocklet.component.checkUpdateTitle')]
+            })
+          })
+        })]
+      }), /*#__PURE__*/_jsx(Permission, {
+        permission: inService ? '' : 'mutate_blocklets',
+        role: inService ? BlockletAdminRoles : [],
+        children: /*#__PURE__*/_jsxs(Box, {
+          display: "flex",
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(AddRule, {
+            children: ({
+              open
+            }) => /*#__PURE__*/_jsxs(Button, {
+              disabled: loading || isInProgress(blocklet.status),
+              variant: "text",
+              color: "primary",
+              "data-cy": "add-rule",
+              onClick: open,
+              children: [/*#__PURE__*/_jsx(AddIcon, {
+                style: {
+                  fontSize: '1.3em',
+                  marginRight: 4
+                }
+              }), t('router.rule.add.title')]
+            })
+          }), !needMigration && /*#__PURE__*/_jsx(AddComponent, {
+            blocklet: blocklet,
+            serverVersion: info.version,
+            children: ({
+              open
+            }) => /*#__PURE__*/_jsxs(Button, {
+              disabled: loading || isInProgress(blocklet.status),
+              variant: "text",
+              color: "primary",
+              "data-cy": "add-component",
+              onClick: open,
+              children: [/*#__PURE__*/_jsx(AddIcon, {
+                style: {
+                  fontSize: '1.3em',
+                  marginRight: 4
+                }
+              }), t('blocklet.component.add')]
+            })
+          }), !needMigration && /*#__PURE__*/_jsx(ComponentConfiguration, {
+            blocklet: blocklet,
+            ancestors: [],
+            children: ({
+              open
+            }) => /*#__PURE__*/_jsx(Tooltip, {
+              title: `${t('blocklet.component.container')}${t('common.config')}`,
+              children: /*#__PURE__*/_jsx(IconButton, {
+                onClick: open,
+                size: "small",
+                color: "primary",
+                children: /*#__PURE__*/_jsx(SettingsOutlinedIcon, {
+                  style: {
+                    fontSize: 18
+                  }
+                })
+              })
+            }, "config")
+          })]
+        })
+      })]
+    }), components && components.length ? /*#__PURE__*/_jsxs(Box, {
+      mt: 2,
+      ml: {
+        xs: '-12px',
+        md: '-24px'
+      },
+      children: [blocklet.meta.group !== 'gateway' && /*#__PURE__*/_jsx(ComponentItem, {
+        blocklet: blocklet,
+        app: blocklet,
+        onRemove: removeComponent,
+        onStart: startComponent,
+        onStop: stopComponent,
+        onReload: reloadComponent,
+        onRestart: restartComponent,
+        getComponentUrl: getComponentUrl
+      }, `0-${blocklet.meta.did}`), blocklet.children.map(component => /*#__PURE__*/_jsx(ComponentItem, {
+        depth: 1,
+        blocklet: component,
+        ancestors: [blocklet],
+        app: blocklet,
+        onRemove: removeComponent,
+        onStart: startComponent,
+        onStop: stopComponent,
+        onReload: reloadComponent,
+        onRestart: restartComponent,
+        getComponentUrl: getComponentUrl
+      }, `1-${component.meta.did}`))]
+    }, `top-blocklet-${blocklet.meta.did}`) : /*#__PURE__*/_jsx(Box, {
+      mt: 8,
+      children: /*#__PURE__*/_jsx(Empty, {
+        children: t('blocklet.component.noComponent')
+      })
+    }), !!blocklet.site.rules.length && /*#__PURE__*/_jsx(Box, {
+      mt: 0,
+      ml: {
+        xs: '-16px',
+        md: '-28px'
+      },
+      children: /*#__PURE__*/_jsx(RuleList, {})
+    }), !!updateConfirm && /*#__PURE__*/_jsx(Dialog, {
+      open: true,
+      fullWidth: true,
+      children: /*#__PURE__*/_jsxs(Box, {
+        paddingY: 1.5,
+        children: [/*#__PURE__*/_jsx(DialogTitle, {
+          children: t('blocklet.component.updateTitle')
+        }), /*#__PURE__*/_jsx(Box, {
+          component: DialogContent,
+          py: 4,
+          children: updateConfirm.list.map(x => /*#__PURE__*/_jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            children: [/*#__PURE__*/_jsx(Checkbox, {
+              checked: updateConfirm.checks[x.groupId],
+              onChange: e => onUpdateChecksChange(e, x.groupId),
+              style: {
+                marginLeft: x.disabled ? 16 : 0
+              },
+              defaultChecked: true,
+              disabled: x.disabled
+            }), /*#__PURE__*/_jsxs(Box, {
+              flexGrow: 1,
+              mt: 3,
+              children: [/*#__PURE__*/_jsx(Box, {
+                item: true,
+                xs: 8,
+                children: x.name
+              }), x.version && /*#__PURE__*/_jsxs(Grid, {
+                fontSize: "h6.fontSize",
+                container: true,
+                spacing: 2,
+                alignItems: "center",
+                children: [/*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 3,
+                  children: x.version
+                }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 1,
+                  children: /*#__PURE__*/_jsx(ArrowForwardIcon, {
+                    style: {
+                      fontSize: '0.9em'
+                    }
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 3,
+                  children: /*#__PURE__*/_jsx(Box, {
+                    color: "secondary.main",
+                    children: x.newVersion
+                  })
+                })]
+              })]
+            }, `${x.name}-${x.newVersion}`)]
+          }))
+        }), /*#__PURE__*/_jsxs(DialogActions, {
+          style: {
+            padding: '8px 24px 24px'
+          },
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: () => {
+              setUpdateConfirm(null);
+            },
+            children: t('common.cancel')
+          }), /*#__PURE__*/_jsxs(Button, {
+            onClick: e => {
+              e.stopPropagation();
+              onConfirmUpdate();
+            },
+            color: "primary",
+            disabled: loading || !updateConfirm.hasChecks,
+            variant: "contained",
+            autoFocus: true,
+            children: [loading && /*#__PURE__*/_jsx(Spinner, {
+              size: 16
+            }), t('common.update')]
+          })]
+        })]
+      })
+    }), !!showSettings && /*#__PURE__*/_jsx(Dialog, {
+      open: true,
+      fullWidth: true,
+      onClose: () => setShowSettings(false),
+      children: /*#__PURE__*/_jsxs(Box, {
+        paddingY: 1.5,
+        children: [/*#__PURE__*/_jsx(DialogTitle, {
+          children: t('common.configuration')
+        }), /*#__PURE__*/_jsx(DialogContent, {
+          children: /*#__PURE__*/_jsx(Box, {
+            py: 2,
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
+              control: /*#__PURE__*/_jsx(Switch, {
+                checked: showContainer,
+                onChange: e => setShowContainer(!!e.target.checked)
+              }),
+              label: t('blocklet.component.showContainer')
+            })
+          })
+        })]
+      })
+    })]
+  });
+}
+BlockletComponent.propTypes = {
+  blocklet: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func,
+  getComponentUrl: PropTypes.func
+};
+BlockletComponent.defaultProps = {
+  onUpdate: () => {},
+  getComponentUrl: () => window.location.origin
+};
+const Div = styled.div`
+  .title {
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: ${props => props.theme.spacing(1)};
+  }
+
+  @keyframes showDelay {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .component-item {
+    animation: showDelay 0.75s ease 1;
+  }
+`;