@devops-flow/devops-flow-pipeline-detail 0.0.37

package/es/components/dashboardMain/components/build-and-deploy-setting-new/detail/index.js

@@ -0,0 +1,616 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button, Loading, Message, Dropdown, Dialog, Menu, Tag, Result, Balloon, Field, Pagination } from '@teamix/ui';
+import { Header, ButtonIcon, YunxiaoIcon, Content, Title, Tooltip, ButtonTooltip } from '@alife/devops-ui';
+import exceed from "../../../../../utils/apimap";
+import getHelpLink from "../../../../../utils/helplink";
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { navigateWithContexPath } from "../../../../../utils/route-utils";
+import permissionUtils from "../../../../../utils/permissionUtil";
+import PipelineTag from "../../../../common/teambition/pipeline-tag";
+import permissions from "../permissions";
+import MachinesTable from "./machines-table";
+import Operation from "./operation";
+import GroupDialog from "../dialog/group-dialog";
+import HostDialog from "../dialog/host-dialog";
+import "./index.scss";
+import { PurposeContext } from "../../../../../../dist/PipelineFlowDetail";
+import EcsLabelFormItems from "../dialog/group-dialog/ecs-label-form-items";
+import { pick } from 'lodash';
+import { insertIf } from "../../../../../utils";
+import { envDatasource } from "../../../../common/teambition/pipeline-info/baseInfo";
+import dayjs from 'dayjs';
+import Member from "../../../../common/teambition/yunxiao-member";
+import { getLocalStorageCache, setLocalStorageCache } from "../../../../../utils";
+import { deployGroupDesc } from "../utils";
+import intl from "../../../../../locale";
+var LS_KEY = 'DEPLOY_MACHINE_LIST_PAGESIZE';
+var fetchGroupTimer;
+var fetchGroupTimerCnt = 0;
+var titleTooltip = function titleTooltip(trigger, value) {
+  return /*#__PURE__*/React.createElement(Title, {
+    align: "t",
+    trigger: trigger,
+    type: "primary",
+    size: "small"
+  }, value || trigger);
+};
+var BuildGroupDetail = function BuildGroupDetail(_ref) {
+  var _group$envObj, _envDatasource$find, _group$uuid;
+  var groupId = _ref.groupId;
+  var _React$useContext = React.useContext(PurposeContext),
+    purpose = _React$useContext.purpose,
+    purposeName = _React$useContext.purposeName,
+    purposeNameShort = _React$useContext.purposeNameShort,
+    purpoesForReqestArg = _React$useContext.purpoesForReqestArg;
+  var _useState = useState({}),
+    group = _useState[0],
+    setGroup = _useState[1];
+  var _useState2 = useState({}),
+    groupPermissionResult = _useState2[0],
+    setGroupPermissionResult = _useState2[1];
+  var _useState3 = useState(true),
+    loading = _useState3[0],
+    setLoading = _useState3[1]; // 整页loading
+  var _useState4 = useState(false),
+    tableLoading = _useState4[0],
+    setTableLoading = _useState4[1]; // 只有Table loading，页头不动（手动刷新列表时用）
+  var _useState5 = useState(''),
+    errorMsg = _useState5[0],
+    setErrorMsg = _useState5[1];
+  var _useState6 = useState(false),
+    groupDialogVisible = _useState6[0],
+    setGroupDialogVisible = _useState6[1];
+  var _useState7 = useState(false),
+    hostDialogVisible = _useState7[0],
+    setHostDialogVisible = _useState7[1];
+  var _useState8 = useState(),
+    hostDialogOsType = _useState8[0],
+    setHostDialogOsType = _useState8[1];
+  var _useState9 = useState(),
+    searchVal = _useState9[0],
+    setSearchVal = _useState9[1];
+  var permObj = groupPermissionResult[String(groupId)] || {};
+  var _useState10 = useState(1),
+    pageNum = _useState10[0],
+    setPageNum = _useState10[1];
+  var _useState11 = useState(getLocalStorageCache(LS_KEY) || 10),
+    pageSize = _useState11[0],
+    setPageSize = _useState11[1];
+  var editable = function () {
+    var key = purpose === 'build' ? permissions.PERMISSION_BUILD_GROUP_EDIT : permissions.PERMISSION_MACHINE_GROUP_EDIT;
+    return permObj[key] || false;
+  }();
+  var deletedable = function () {
+    var key = purpose === 'build' ? permissions.PERMISSION_BUILD_GROUP_DELETE : permissions.PERMISSION_MACHINE_GROUP_DELETE;
+    return permObj[key] || false;
+  }();
+  var disabledTips = intl.get({
+    id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.YouDoNotHavePermission',
+    defaultMessage: '您暂无权限管理{purposeName}，请联系企业管理员添加权限'
+  }, {
+    purposeName: purposeName
+  });
+  var isEcsLabelPage = (group === null || group === void 0 ? void 0 : group.ecsType) === 'ECS_LABEL';
+  var ecsLabelField = Field.useField();
+  var fetchGroup = useCallback(function (_temp) {
+    var _ref2 = _temp === void 0 ? {} : _temp,
+      noLoading = _ref2.noLoading,
+      onlyTableLoading = _ref2.onlyTableLoading;
+    if (!noLoading && !onlyTableLoading) {
+      setLoading(true);
+    }
+    if (onlyTableLoading) {
+      setTableLoading(true);
+    }
+    exceed.fetch({
+      api: 'Machine.group.get',
+      params: {
+        purpose: purpose
+      },
+      data: {
+        groupId: groupId,
+        pageSize: pageSize,
+        pageNum: pageNum
+      }
+    }).then(function (res) {
+      if (res.successful) {
+        var result = res.object;
+        setGroup(result);
+        if (result.machineTotal && !result.machineInfos.length && pageNum !== 1) {
+          // 最后一页删空等情况，跳转到第一页
+          setPageNum(1);
+        }
+        if ((result === null || result === void 0 ? void 0 : result.ecsType) === 'ECS_LABEL') {
+          ecsLabelField.setValues(pick(result, ['serviceConnectionId', 'aliyunRegion', 'ecsLabelKey', 'ecsLabelValue']));
+        } else {
+          var _result$machineInfos;
+          /** 若有安装中的机器，则轮询，直到没有安装中的。设一个最大数量以免死循环。 */
+          var maxFetchCount = 70;
+          if ((_result$machineInfos = result.machineInfos) !== null && _result$machineInfos !== void 0 && _result$machineInfos.some(function (item) {
+            var _item$installStatus;
+            return ((_item$installStatus = item.installStatus) === null || _item$installStatus === void 0 ? void 0 : _item$installStatus.replace(/^Retry::/, '')) === 'Running';
+          }) && fetchGroupTimerCnt < maxFetchCount) {
+            fetchGroupTimer = setTimeout(function () {
+              fetchGroup({
+                noLoading: true
+              });
+            }, 2000);
+            fetchGroupTimerCnt += 1;
+          } else {
+            clearTimeout(fetchGroupTimer);
+            fetchGroupTimerCnt = 0;
+          }
+        }
+      } else {
+        setErrorMsg(res.errorMsg);
+      }
+      setLoading(false);
+      setTableLoading(false);
+    }).fail(function (err) {
+      console.error(err);
+      setLoading(false);
+      setTableLoading(false);
+    });
+  }, [groupId, pageSize, pageNum]);
+  var batchGetResourcePermission = function batchGetResourcePermission(buildGroupIdList) {
+    permissionUtils.batchCheckPermissionList(purpose === 'build' ? [permissions.PERMISSION_BUILD_GROUP_EDIT, permissions.PERMISSION_BUILD_GROUP_DELETE] : [permissions.PERMISSION_MACHINE_GROUP_EDIT, permissions.PERMISSION_MACHINE_GROUP_DELETE], buildGroupIdList, purpose === 'build' ? 'buildGroup' : 'deployGroup', window.AK_GLOBAL.currentUser.workid).then(function (data) {
+      setGroupPermissionResult(data);
+    });
+  };
+
+  // /** 部署主机组成员 */
+  // const [members, setMembers] = useState([]);
+  var saveMembers = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(members) {
+      var config;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            config = {
+              api: 'Member.batchOverrideResourceMembers',
+              data: {
+                objType: purpose === 'deploy' ? 'deployGroup' : 'buildGroup',
+                objId: group.id,
+                purpose: purpoesForReqestArg,
+                members: JSON.stringify(members.map(function (it) {
+                  return _extends({}, it, {
+                    objectId: group.id
+                  });
+                }))
+              }
+            };
+            _context.next = 3;
+            return exceed.fetch(config);
+          case 3:
+            batchGetResourcePermission([groupId]);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function saveMembers(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    return function () {
+      clearTimeout(fetchGroupTimer);
+      fetchGroupTimerCnt = 0;
+    };
+  }, []);
+  useEffect(function () {
+    batchGetResourcePermission([groupId]);
+  }, [groupId]);
+  useEffect(function () {
+    fetchGroup();
+  }, [fetchGroup]);
+  var onDelete = function onDelete() {
+    Dialog.alert({
+      size: 'small',
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.AreYouSureYouWant',
+        defaultMessage: '确认删除{purposeNameShort}吗？'
+      }, {
+        purposeNameShort: purposeNameShort
+      }),
+      content: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.Delete',
+        defaultMessage: '删除'
+      }), purposeNameShort, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.OnlyNodesAreTransferredFrom',
+        defaultMessage: '仅会将节点从当前'
+      }), purposeName, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.UnbindAndDelete',
+        defaultMessage: '解除绑定，并删除'
+      }), purposeNameShort, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.DataButDoesNotDelete',
+        defaultMessage: '数据，但并不会删除真实机器，也不会卸载Runner（如有需要请'
+      }), /*#__PURE__*/React.createElement("a", {
+        href: getHelpLink('runner_error_hint'),
+        target: "_blank",
+        rel: "noreferrer"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.ManuallyUninstall',
+        defaultMessage: '手动卸载'
+      })), intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.PleaseKnow',
+        defaultMessage: '），请知悉。'
+      })),
+      footerActions: ['cancel', 'ok'],
+      onOk: function () {
+        var _onOk = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return exceed.fetch({
+                  api: purpose === 'build' ? 'BuildGroup.delete' : 'MachineGroup.delete',
+                  params: {
+                    groupId: groupId
+                  },
+                  data: {
+                    purpose: purpoesForReqestArg
+                  }
+                }).then(function (res) {
+                  if (res.successful) {
+                    Message.success({
+                      title: intl.get({
+                        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.PurposenameDeleted',
+                        defaultMessage: '{purposeName}删除成功'
+                      }, {
+                        purposeName: purposeName
+                      })
+                    });
+                    navigateWithContexPath("/setting/" + purpose);
+                  } else {
+                    var _errorMsg = res.errorCode && res.errorCode === '403' ? intl.get({
+                      id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.NoPermissionToDeletePurposename',
+                      defaultMessage: '无权限删除{purposeName}'
+                    }, {
+                      purposeName: purposeName
+                    }) : res.errorMsg + "(" + res.errorCode + ")";
+                    Message.error({
+                      title: _errorMsg
+                    });
+                  }
+                });
+              case 2:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        function onOk() {
+          return _onOk.apply(this, arguments);
+        }
+        return onOk;
+      }()
+    });
+  };
+  var onMenuItemClick = function onMenuItemClick(key) {
+    switch (key) {
+      case 'edit':
+        setGroupDialogVisible(true);
+        break;
+      case 'delete':
+        onDelete();
+        break;
+      default:
+        break;
+    }
+  };
+  var onAddNewHostClick = function onAddNewHostClick() {
+    // 如果是 主机组，找出当前主机组的操作系统类型，传给host-dialog
+    if (purpose === 'deploy') {
+      var _group$machineInfos, _group$machineInfos$, _group$machineInfos$$;
+      // machineOsArch为「操作系统/架构」，仅截取操作系统
+      var osType = (_group$machineInfos = group.machineInfos) === null || _group$machineInfos === void 0 ? void 0 : (_group$machineInfos$ = _group$machineInfos[0]) === null || _group$machineInfos$ === void 0 ? void 0 : (_group$machineInfos$$ = _group$machineInfos$.machineOsArch) === null || _group$machineInfos$$ === void 0 ? void 0 : _group$machineInfos$$.split('/')[0];
+      if (osType) {
+        setHostDialogOsType(osType);
+      }
+    }
+    setHostDialogVisible(true);
+  };
+  var renderTags = function renderTags() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, group.tagList.length < 4 ? group.tagList.map(function (tag) {
+      return (
+        /*#__PURE__*/
+        // <Tag key={tag.id} style={{ maxWidth: 100 }}>
+        //   {titleTooltip(tag.name, tag.name)}
+        // </Tag>
+        React.createElement(PipelineTag, {
+          color: tag.color,
+          key: tag.id,
+          style: {
+            maxWidth: 100
+          }
+        }, titleTooltip(tag.name, tag.name))
+      );
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, group.tagList.slice(0, 2).map(function (tag) {
+      return (
+        /*#__PURE__*/
+        // <Tag key={tag.id} style={{ maxWidth: 100 }}>
+        //   {titleTooltip(tag.name, tag.name)}
+        // </Tag>
+        React.createElement(PipelineTag, {
+          color: tag.color,
+          key: tag.id,
+          style: {
+            maxWidth: 100
+          }
+        }, titleTooltip(tag.name, tag.name))
+      );
+    }), /*#__PURE__*/React.createElement(Balloon, {
+      align: "b",
+      closable: false,
+      trigger: /*#__PURE__*/React.createElement(Tag, {
+        type: "normal"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.Total',
+        defaultMessage: '共'
+      }), group.tagList.length, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.Tags',
+        defaultMessage: '个标签'
+      }), ' ', /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "arrow-right-2-line",
+        size: "small"
+      }))
+    }, group.tagList.map(function (tag) {
+      return (
+        /*#__PURE__*/
+        // <Tag key={tag.id} style={{ marginRight: 8, marginBottom: 6 }}>
+        //   {titleTooltip(tag.name, tag.name)}
+        // </Tag>
+        React.createElement(PipelineTag, {
+          color: tag.color,
+          key: tag.id,
+          style: {
+            marginRight: 8,
+            marginBottom: 6
+          }
+        }, titleTooltip(tag.name, tag.name))
+      );
+    }))));
+  };
+  function getContent() {
+    if (tableLoading) {
+      /*#__PURE__*/React.createElement(Loading, {
+        inline: false,
+        style: {
+          marginTop: 150
+        }
+      });
+    }
+    if (isEcsLabelPage) {
+      // ecs label 页面
+      return /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 400
+        }
+      }, /*#__PURE__*/React.createElement(EcsLabelFormItems, {
+        field: ecsLabelField,
+        disabled: true
+      }));
+    }
+
+    // 正常列表
+    if (group !== null && group !== void 0 && group.machineInfos.length) {
+      return /*#__PURE__*/React.createElement(MachinesTable, {
+        group: group,
+        fetchGroup: fetchGroup,
+        searchVal: searchVal,
+        editable: editable
+      });
+    } else {
+      return /*#__PURE__*/React.createElement(Result, _extends({
+        img: "none",
+        title: purpose === 'build' ? intl.get({
+          id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.NoNode',
+          defaultMessage: '暂无节点'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.NoHost',
+          defaultMessage: '暂无主机'
+        }),
+        desc: purpose === 'build' ? /*#__PURE__*/React.createElement("div", {
+          style: {
+            width: 370
+          }
+        }, deployGroupDesc) : intl.get({
+          id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.AddAHostForPipeline',
+          defaultMessage: '请添加主机，用于流水线主机部署任务'
+        }),
+        fullPage: true
+      }, editable ? {
+        extra: /*#__PURE__*/React.createElement(Button, {
+          type: "primary",
+          onClick: function onClick() {
+            return onAddNewHostClick();
+          }
+        }, purpose === 'build' ? intl.get({
+          id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.ConnectToANewNode',
+          defaultMessage: '接入新节点'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.AddANewHost',
+          defaultMessage: '添加新主机'
+        }))
+      } : {}));
+    }
+  }
+  if (loading) {
+    return /*#__PURE__*/React.createElement(Loading, {
+      inline: false,
+      style: {
+        marginTop: 150
+      }
+    });
+  }
+  return errorMsg ? /*#__PURE__*/React.createElement(Result, {
+    img: "error",
+    desc: errorMsg,
+    fullPage: true
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+    showBack: true,
+    description: /*#__PURE__*/React.createElement(React.Fragment, null, !!((_group$envObj = group.envObj) !== null && _group$envObj !== void 0 && _group$envObj.length) && /*#__PURE__*/React.createElement(React.Fragment, null, intl.get({
+      id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.Environment',
+      defaultMessage: '环境'
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontWeight: 500,
+        color: 'var(--color-text1-3, #575757)',
+        marginLeft: 4
+      }
+    }, (_envDatasource$find = envDatasource.find(function (env) {
+      var _group$envObj$0$envId, _group$envObj2, _group$envObj2$;
+      return env.value === String((_group$envObj$0$envId = (_group$envObj2 = group.envObj) === null || _group$envObj2 === void 0 ? void 0 : (_group$envObj2$ = _group$envObj2[0]) === null || _group$envObj2$ === void 0 ? void 0 : _group$envObj2$.envId) !== null && _group$envObj$0$envId !== void 0 ? _group$envObj$0$envId : '');
+    })) === null || _envDatasource$find === void 0 ? void 0 : _envDatasource$find.label), ' ', "\xB7", ' '), /*#__PURE__*/React.createElement("span", null, intl.get({
+      id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.CreatedIn',
+      defaultMessage: '创建于'
+    }), dayjs(group.gmtCreate).format('YYYY-MM-DD HH:mm'))),
+    onBackClick: function onBackClick() {
+      navigateWithContexPath("/setting/" + purpose);
+    },
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        maxWidth: 200
+      }
+    }, /*#__PURE__*/React.createElement(Title, {
+      trigger: group.name,
+      align: "b"
+    }, group.name)), renderTags()),
+    operation: {
+      iconGroup: [].concat(insertIf(!isEcsLabelPage, /*#__PURE__*/React.createElement(Operation, {
+        searchVal: searchVal,
+        setSearchVal: setSearchVal
+      })), insertIf(!isEcsLabelPage, /*#__PURE__*/React.createElement(Tooltip, {
+        trigger: /*#__PURE__*/React.createElement(ButtonIcon, {
+          name: "refresh2-line",
+          onClick: function onClick() {
+            fetchGroup({
+              onlyTableLoading: true
+            });
+          }
+        })
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.RefreshList',
+        defaultMessage: '刷新列表'
+      }))), [/*#__PURE__*/React.createElement(Member, {
+        isAsync: true,
+        inviteVisible: true,
+        disabled: !editable,
+        onChange: saveMembers,
+        objId: group === null || group === void 0 ? void 0 : group.id,
+        objType: purpose === 'deploy' ? 'deployGroup' : 'buildGroup'
+      })]),
+      buttonGroup: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button.Group, {
+        className: "group-id-copy-btn"
+      }, /*#__PURE__*/React.createElement(ButtonTooltip, {
+        type: "normal",
+        tooltip: purposeNameShort + "ID " + group.uuid,
+        onlyDisabled: false,
+        align: "b"
+      }, purposeNameShort, "ID\xA0", (_group$uuid = group.uuid) === null || _group$uuid === void 0 ? void 0 : _group$uuid.slice(0, 5), "..."), /*#__PURE__*/React.createElement(Button, {
+        type: "normal"
+      }, /*#__PURE__*/React.createElement(CopyToClipboard, {
+        text: group.uuid,
+        onCopy: function onCopy() {
+          return Message.success(intl.get({
+            id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.SuccessfullyCopiedToTheClipboard',
+            defaultMessage: '成功复制到剪贴板'
+          }));
+        }
+      }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "copy-line"
+      })))), !isEcsLabelPage && /*#__PURE__*/React.createElement(Button, {
+        disabled: !editable,
+        type: "primary",
+        onClick: onAddNewHostClick
+      }, purpose === 'build' ? intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.ConnectToANewNode',
+        defaultMessage: '接入新节点'
+      }) : intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.AddANewHost',
+        defaultMessage: '添加新主机'
+      })), isEcsLabelPage && /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        onClick: function onClick() {
+          return setGroupDialogVisible(true);
+        }
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.ModifyEcsTags',
+        defaultMessage: '修改 ECS 标签'
+      })), /*#__PURE__*/React.createElement(Dropdown, {
+        trigger: /*#__PURE__*/React.createElement(ButtonIcon, {
+          name: "more-line"
+        })
+      }, /*#__PURE__*/React.createElement(Menu, {
+        onItemClick: onMenuItemClick
+      }, /*#__PURE__*/React.createElement(Menu.Item, {
+        key: "edit",
+        disabled: !editable
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        visible: !editable,
+        trigger: intl.get({
+          id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.PurposenameshortSettings',
+          defaultMessage: '{purposeNameShort}设置'
+        }, {
+          purposeNameShort: purposeNameShort
+        }),
+        align: "l"
+      }, disabledTips)), /*#__PURE__*/React.createElement(Menu.Divider, null), /*#__PURE__*/React.createElement(Menu.Item, {
+        key: "delete",
+        disabled: !deletedable
+      }, /*#__PURE__*/React.createElement(ButtonTooltip, {
+        text: true,
+        align: "l",
+        type: "primary",
+        warning: deletedable,
+        disabled: !deletedable,
+        tooltip: disabledTips
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.build-and-deploy-setting-new.detail.Delete',
+        defaultMessage: '删除'
+      }), purposeNameShort)))))
+    },
+    className: "group-detail-header"
+  }), /*#__PURE__*/React.createElement(Content, null, getContent(), !!(group !== null && group !== void 0 && group.machineTotal) && /*#__PURE__*/React.createElement(Pagination, {
+    total: group === null || group === void 0 ? void 0 : group.machineTotal,
+    style: {
+      marginTop: 16,
+      textAlign: 'right'
+    },
+    current: pageNum,
+    pageSize: pageSize,
+    onPageSizeChange: function onPageSizeChange(v) {
+      setLocalStorageCache(LS_KEY, v);
+      setPageSize(v);
+    },
+    onChange: function onChange(v) {
+      return setPageNum(v);
+    },
+    pageSizeList: [10, 20, 50],
+    pageSizeSelector: 'dropdown',
+    pageSizePosition: 'end'
+  })), groupDialogVisible && /*#__PURE__*/React.createElement(GroupDialog, {
+    createTypeIsEcsLabel: isEcsLabelPage,
+    group: group,
+    fetchGroup: fetchGroup,
+    visible: groupDialogVisible,
+    onClose: function onClose() {
+      setGroupDialogVisible(false);
+    }
+  }), hostDialogVisible && /*#__PURE__*/React.createElement(HostDialog, {
+    osType: hostDialogOsType,
+    visible: hostDialogVisible,
+    group: group,
+    fetchGroup: fetchGroup,
+    onClose: function onClose() {
+      setHostDialogVisible(false);
+      setHostDialogOsType(undefined);
+    }
+  }));
+};
+export default BuildGroupDetail;