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

package/es/components/dashboardMain/components/deploy-setting/machineGroupTable.js

@@ -0,0 +1,620 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value"],
+  _excluded2 = ["left", "uuid"],
+  _excluded3 = ["left"];
+import React, { Component, useState, memo } from 'react';
+import { Pagination, Button, Message, Balloon, Dialog, Field, Notification, Result } from '@teamix/ui';
+import Member from '@alife/yunxiao-member';
+import SortableSelect from '@alife/teamix-sortable-select';
+import IconFont from "../../../common/teambition/icon-font";
+import { devOpsToggleLift, setLocalStorageCache, getLocalStorageCache } from "../../../../utils";
+import { Content, Footer, YunxiaoIcon, YunxiaoTable } from '@alife/devops-ui';
+import permissions from "./permissions";
+import { DeployGroupDialogConnect } from "../../../common/teambition/deploy-group-dialog";
+import tableColumns from "./tableColumns";
+import exceed from "../../../../utils/apimap";
+import intl from "../../../../locale";
+import { Perf } from '@alife/yunxiao-common';
+import "../common.scss";
+import MachineUpgradingDisabledTip from "../machineGroupUpgrade/MachineUpgradingDisabledTip";
+var Tooltip = Balloon.Tooltip;
+var Column = YunxiaoTable.Column;
+var defaultTableSelectValues = function defaultTableSelectValues() {
+  var cache = window.localStorage.getItem('machine-group-table-select-colums');
+  var defaultVal = ['machineGroupTag', 'type', 'machineNum', 'creator', 'createTime'];
+  if (cache && cache !== undefined && cache !== 'undefined') {
+    return JSON.parse(cache);
+  }
+  return defaultVal;
+};
+var defaultTableSelectSource = [undefined, 'undefined'].includes(window.localStorage.getItem('machine-group-table-select-data')) ? [] : JSON.parse(window.localStorage.getItem('machine-group-table-select-data'));
+var InnerSortableSelect = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    others = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    visible = _useState[0],
+    setVisible = _useState[1];
+  return /*#__PURE__*/React.createElement(SortableSelect, _extends({}, others, {
+    visible: visible,
+    value: value,
+    offset: [0, 4],
+    triggerType: "click",
+    title: intl.get({
+      id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.HeaderSettings',
+      defaultMessage: '表头设置'
+    }),
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    onVisibleChange: function onVisibleChange(v) {
+      return setVisible(v);
+    }
+  }));
+});
+var MachineGroupTable = /*#__PURE__*/function (_Component) {
+  function MachineGroupTable(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.initInfo = function () {
+      _this.field.reset(['name', 'serviceConnectionId']);
+      _this.field.setValue('id', '');
+      _this.field.setValue('name', intl.get({
+        id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.NewHostGroup',
+        defaultMessage: '新的主机组'
+      }));
+      _this.field.setValue('type', 'ECS');
+      _this.setState({
+        newly: true
+      });
+    };
+    _this.getAllAvailableRoles = function () {
+      exceed.fetch({
+        api: 'Resource.all.role.list',
+        data: {
+          objType: 'deployGroup'
+        }
+      }).then(function (res) {
+        if (res.successful) {
+          var roleDataSource = res.object;
+          _this.setState({
+            allAvailableRoles: roleDataSource.filter(function (it) {
+              return it.name.toLowerCase() !== 'owner';
+            }).map(function (r) {
+              return {
+                label: r.value,
+                value: String(r.id),
+                name: r.name,
+                role: r
+              };
+            })
+          });
+        }
+      }).fail(console.error);
+    };
+    _this.getSelectedMachineGroupMembers = function () {
+      _this.setState({
+        isLoadingExistedMembers: true
+      });
+      exceed.fetch({
+        api: 'Resource.member.batchGetResourceMembers',
+        data: {
+          objIds: _this.props.selection.join(','),
+          objType: 'deployGroup'
+        }
+      }).then(function (res) {
+        _this.setState({
+          isLoadingExistedMembers: false
+        });
+        if (res.successful && res.object) {
+          var newSelectedMembers = {};
+          res.object.forEach(function (member) {
+            if (!newSelectedMembers[member.id]) {
+              newSelectedMembers[member.id] = {
+                _id: member.id,
+                _userId: member.id,
+                name: member.name,
+                memberType: member.memberType || 'user',
+                userInfo: {
+                  _id: member.openId || member.id,
+                  openId: member.openId || member.id,
+                  avatarUrl: member.avatarUrl,
+                  name: member.name
+                }
+              };
+            }
+          });
+          _this.setState({
+            pipelineExistedMembers: Object.values(newSelectedMembers)
+          });
+        } else {
+          _this.setState({
+            pipelineExistedMembers: []
+          });
+        }
+      }).fail(function (err) {
+        console.error(err);
+        _this.setState({
+          pipelineExistedMembers: []
+        });
+        _this.setState({
+          isLoadingExistedMembers: false
+        });
+      });
+    };
+    _this.onTableSelectChange = function (values) {
+      _this.setState({
+        tableSelectValues: [].concat(values)
+      });
+      setLocalStorageCache('machine-group-table-select-colums', JSON.stringify(values), false);
+    };
+    _this.onTableSortEnd = function (data) {
+      _this.setState({
+        sorTableSelectSource: data
+      });
+      setLocalStorageCache('machine-group-table-select-data', JSON.stringify(data), false);
+    };
+    _this.onEdit = function (record) {
+      exceed.fetch({
+        api: 'Machine.group.get',
+        params: {
+          purpose: 'deploy'
+        },
+        data: {
+          groupId: record.id
+        }
+      }).then(function (data) {
+        if (data.successful) {
+          var _data$object = data.object,
+            name = _data$object.name,
+            serviceConnectionId = _data$object.serviceConnectionId,
+            _data$object$machineI = _data$object.machineInfos,
+            machineInfos = _data$object$machineI === void 0 ? [] : _data$object$machineI,
+            type = _data$object.type,
+            envObj = _data$object.envObj,
+            tagList = _data$object.tagList;
+          var _ref2 = machineInfos[0] || {},
+            aliyunRegionId = _ref2.aliyunRegionId;
+          _this.field.setValues({
+            name: name,
+            serviceConnectionId: serviceConnectionId,
+            id: record.id,
+            aliyunRegionId: aliyunRegionId,
+            type: type
+          });
+          var envId = envObj && envObj.length > 0 && envObj[0].envId;
+          _this.field.setValues({
+            envId: envId,
+            tagIds: tagList && tagList.map(function (v) {
+              return v.id;
+            })
+          });
+          _this.field.setValue('machineInfos', machineInfos.map(function (item) {
+            return {
+              instanceId: item.machineSn,
+              instanceName: item.instanceName,
+              ipAddress: item.ip,
+              aliyunRegionId: item.aliyunRegionId
+            };
+          }));
+        }
+      });
+      _this.setState({
+        newly: false
+      });
+      _this.props.setDialogVisible(true);
+    };
+    _this.onRemove = function (record) {
+      Dialog.alert({
+        messageProps: {
+          type: 'error'
+        },
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.Confirmation',
+          defaultMessage: '确认'
+        }),
+        content: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.ConfirmToDeleteTheCurrent',
+          defaultMessage: '确认删除当前主机组'
+        }),
+        animation: {
+          "in": 'expandInDown',
+          out: 'expandOutUp'
+        },
+        onOk: function onOk() {
+          return exceed.fetch({
+            api: 'MachineGroup.delete',
+            params: {
+              groupId: record.id
+            }
+          }).then(function (res) {
+            if (res.successful) {
+              Message.success({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.TheHostGroupHasBeen',
+                  defaultMessage: '主机组删除成功'
+                })
+              });
+              _this.props.listMachineGroup();
+            } else {
+              var errorMsg = res.errorCode && res.errorCode === '403' ? intl.get({
+                id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.YouAreNotAuthorizedTo',
+                defaultMessage: '无权限删除主机组'
+              }) : res.errorMsg + "(" + res.errorCode + ")";
+              Notification.error({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.components.deploy-setting.machineGroupTable.FailedToDelete',
+                  defaultMessage: '删除失败'
+                }),
+                content: errorMsg
+              });
+            }
+          });
+        },
+        footerActions: ['cancel', 'ok']
+      });
+    };
+    _this.onResizeChange = function (name, value) {
+      var res = _extends({}, _this.state.widths);
+      res[name] += value;
+      _this.setState({
+        widths: res
+      });
+      setLocalStorageCache('host-table-widths', res);
+    };
+    _this.renderOper = function (_, __, record) {
+      var machineGroupPermissionResult = _this.props.machineGroupPermissionResult;
+      var permObj = machineGroupPermissionResult[String(record.id)] || {};
+      var editablePerm = permObj[permissions.PERMISSION_MACHINE_GROUP_EDIT] || false;
+      var deletedablePerm = permObj[permissions.PERMISSION_MACHINE_GROUP_DELETE] || false;
+      var noPermDisabledTips = intl.get({
+        id: 'rdc-tb-cd-assets.components.deploy-setting.machineGroupTable.YouDoNotHavePermission',
+        defaultMessage: '你暂无权限管理该主机组，请主机组管理员添加权限'
+      });
+      return /*#__PURE__*/React.createElement("ul", {
+        className: "tb-common-table-operate"
+      }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "deploy"
+      }, function (disabledForUpgrade, disabledForUpgradeTip) {
+        var tip;
+        if (!editablePerm) {
+          tip = noPermDisabledTips;
+        } else if (disabledForUpgrade) {
+          tip = disabledForUpgradeTip;
+        } else {
+          tip = intl.get({
+            id: 'rdc-tb-cd-assets.components.deploy-setting.machineGroupTable.ModifyHostGroupInformation',
+            defaultMessage: '修改主机组信息'
+          });
+        }
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          align: 'tr',
+          trigger: /*#__PURE__*/React.createElement(Button, {
+            text: true,
+            type: "normal",
+            disabled: !editablePerm || disabledForUpgrade,
+            onClick: function onClick() {
+              _this.onEdit(record);
+            }
+          }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+            type: "edit-line"
+          })),
+          type: "primary"
+        }, tip);
+      })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "deploy"
+      }, function (disabledForUpgrade, disabledForUpgradeTip) {
+        var tip;
+        if (!editablePerm) {
+          tip = noPermDisabledTips;
+        } else if (disabledForUpgrade) {
+          tip = disabledForUpgradeTip;
+        } else {
+          tip = intl.get({
+            id: 'rdc-tb-cd-assets.components.deploy-setting.machineGroupTable.DeleteDeploymentInformation',
+            defaultMessage: '删除部署信息'
+          });
+        }
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          align: 'tr',
+          trigger: /*#__PURE__*/React.createElement(Button, {
+            text: true,
+            type: "normal",
+            disabled: !deletedablePerm || disabledForUpgrade,
+            onClick: function onClick() {
+              _this.onRemove(record);
+            }
+          }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+            type: "delete-line"
+          })),
+          type: "primary"
+        }, tip);
+      })));
+    };
+    _this.onNameClick = function (record) {
+      _this.setState({
+        dialogMode: 'view'
+      });
+      _this.onEdit(record);
+    };
+    _this.titleAddOns = function () {
+      var _ref3 = _this.props || {},
+        selection = _ref3.selection,
+        onBatchDelete = _ref3.onBatchDelete,
+        onBatchGrantPermissions = _ref3.onBatchGrantPermissions,
+        onBatchRevokePermissions = _ref3.onBatchRevokePermissions;
+      var _this$state = _this.state,
+        allAvailableRoles = _this$state.allAvailableRoles,
+        isLoadingExistedMembers = _this$state.isLoadingExistedMembers,
+        pipelineExistedMembers = _this$state.pipelineExistedMembers;
+      if (!(selection !== null && selection !== void 0 && selection.length)) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "op-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "op-container-tip"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.SelectionlengthIsSelected',
+        defaultMessage: '已选择 {selectionLength} 项'
+      }, {
+        selectionLength: selection === null || selection === void 0 ? void 0 : selection.length
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "op-container-area"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "op-container-item"
+      }, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "deploy",
+        wrapTooltip: true
+      }, function (disabledForUpgrade) {
+        return /*#__PURE__*/React.createElement(Button, {
+          text: true,
+          size: "xs",
+          onClick: function onClick() {
+            return onBatchDelete && onBatchDelete(selection);
+          },
+          disabled: disabledForUpgrade
+        }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "delete-line"
+        }), intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.Delete',
+          defaultMessage: '删除'
+        }));
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "op-container-item"
+      }, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "deploy",
+        wrapTooltip: true
+      }, function (disabledForUpgrade) {
+        return /*#__PURE__*/React.createElement(Member, {
+          mode: "add",
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.AddMultipleMembers',
+            defaultMessage: '批量添加成员'
+          }),
+          trigger: /*#__PURE__*/React.createElement(Button, {
+            size: "xs",
+            text: true,
+            disabled: disabledForUpgrade
+          }, /*#__PURE__*/React.createElement(IconFont, {
+            type: "add-members-line",
+            style: {
+              marginRight: 4
+            }
+          }), intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.AddMember',
+            defaultMessage: '添加成员'
+          })),
+          onChange: function onChange(users, role) {
+            onBatchGrantPermissions(users, allAvailableRoles.find(function (r) {
+              return String(r.value) === String(role);
+            }));
+          },
+          multiple: true,
+          customRoles: allAvailableRoles,
+          onVisibleChange: function onVisibleChange(memberVisible) {
+            return devOpsToggleLift(memberVisible);
+          }
+        });
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "op-container-item"
+      }, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "deploy",
+        wrapTooltip: true
+      }, function (disabledForUpgrade) {
+        return /*#__PURE__*/React.createElement(Member, {
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.DeleteMultipleMembers',
+            defaultMessage: '批量删除成员'
+          }),
+          trigger: /*#__PURE__*/React.createElement(Button, {
+            size: "xs",
+            text: true,
+            disabled: disabledForUpgrade
+          }, /*#__PURE__*/React.createElement(IconFont, {
+            type: "delete-members-line",
+            style: {
+              marginRight: 4
+            }
+          }), intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.DeleteAMember',
+            defaultMessage: '删除成员'
+          })),
+          onVisibleChange: function onVisibleChange(memberVisible) {
+            memberVisible && _this.getSelectedMachineGroupMembers();
+          },
+          onChange: onBatchRevokePermissions,
+          multiple: true,
+          value: [],
+          loading: isLoadingExistedMembers,
+          dataSource: pipelineExistedMembers,
+          okText: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.machine-group-table.machineGroupTable.Delete',
+            defaultMessage: '删除'
+          })
+        });
+      }))));
+    };
+    _this.field = new Field(_this, {
+      autoUnmount: false
+    });
+    var _tableColumns = tableColumns({
+        widths: {}
+      }),
+      left = _tableColumns.left,
+      uuid = _tableColumns.uuid,
+      others = _objectWithoutPropertiesLoose(_tableColumns, _excluded2);
+    var columnConfig = _extends({
+      left: left
+    }, others);
+    _this.state = {
+      widths: _extends({
+        name: 180
+      }, getLocalStorageCache('host-table-widths') || {}),
+      allAvailableRoles: [],
+      pipelineExistedMembers: [],
+      isLoadingExistedMembers: false,
+      tableSelectValues: defaultTableSelectValues(),
+      sorTableSelectSource: Object.keys(others || {}).length > (defaultTableSelectSource || []).length ? Object.keys(others).map(function (k) {
+        return {
+          label: columnConfig[k].title,
+          value: k
+        };
+      }) : defaultTableSelectSource,
+      newly: true,
+      dialogMode: ''
+    };
+    return _this;
+  }
+  _inheritsLoose(MachineGroupTable, _Component);
+  var _proto = MachineGroupTable.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.showDialog) {
+      this.initInfo();
+    }
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    this.getAllAvailableRoles();
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var _this$state2 = this.state,
+      tableSelectValues = _this$state2.tableSelectValues,
+      sorTableSelectSource = _this$state2.sorTableSelectSource,
+      dialogMode = _this$state2.dialogMode,
+      widths = _this$state2.widths;
+    var _ref4 = this.props || {},
+      machineGroups = _ref4.machineGroups,
+      selection = _ref4.selection,
+      emptyContent = _ref4.emptyContent,
+      setSelection = _ref4.setSelection,
+      loading = _ref4.loading,
+      total = _ref4.total,
+      pageSize = _ref4.pageSize,
+      pageNum = _ref4.pageNum,
+      setPageNum = _ref4.setPageNum,
+      conditionsLen = _ref4.conditionsLen,
+      dialogVisible = _ref4.dialogVisible,
+      listMachineGroup = _ref4.listMachineGroup,
+      setDialogVisible = _ref4.setDialogVisible,
+      setShowDialog = _ref4.setShowDialog,
+      totalWithoutFilter = _ref4.totalWithoutFilter;
+    var _tableColumns2 = tableColumns({
+        widths: widths,
+        onNameClick: this.onNameClick,
+        selection: selection
+      }),
+      left = _tableColumns2.left,
+      others = _objectWithoutPropertiesLoose(_tableColumns2, _excluded3);
+    var columnConfig = _extends({
+      left: left
+    }, others);
+    var isEmpty = conditionsLen ? false : !loading && totalWithoutFilter === 0;
+    var table = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement("div", {
+      className: "tb-common-table"
+    }, /*#__PURE__*/React.createElement(YunxiaoTable.StickyLock, {
+      dataSource: machineGroups,
+      primaryKey: "id",
+      hasBorder: true,
+      onResizeChange: this.onResizeChange,
+      rowSelection: {
+        selectedRowKeys: selection,
+        mode: 'multiple',
+        onChange: function onChange(selectedKeys) {
+          return setSelection(selectedKeys);
+        },
+        columnProps: function columnProps() {
+          return {
+            lock: 'none',
+            colSpan: selection.length > 0 ? 5 : 1
+          };
+        },
+        titleAddons: function titleAddons() {
+          return _this2.titleAddOns();
+        }
+      },
+      loading: loading,
+      maxBodyHeight: "calc(100vh - 230px)",
+      emptyContent: /*#__PURE__*/React.createElement(Result, {
+        img: "none",
+        desc: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.main.main.NoData',
+          defaultMessage: '没有数据'
+        }),
+        theme: "yunxiao",
+        imageTheme: "yunxiao",
+        size: "small"
+      })
+    }, ['left', 'uuid'].concat(tableSelectValues).map(function (k) {
+      return columnConfig[k] ? /*#__PURE__*/React.createElement(Column, _extends({
+        key: k
+      }, columnConfig[k])) : null;
+    }).filter(Boolean), /*#__PURE__*/React.createElement(Column, {
+      width: 82,
+      lock: "right",
+      align: "center",
+      cell: function cell(value, index, record) {
+        return _this2.renderOper(value, index, record);
+      }
+    })), /*#__PURE__*/React.createElement(InnerSortableSelect, {
+      dataSource: sorTableSelectSource,
+      value: tableSelectValues,
+      onChange: this.onTableSelectChange,
+      onSortEnd: this.onTableSortEnd,
+      trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "setting-line",
+        className: "tb-common-table-sort-select",
+        style: {
+          right: 16,
+          top: 13
+        }
+      })
+    })), /*#__PURE__*/React.createElement(Perf, null)), total > pageSize && /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(Pagination, {
+      defaultCurrent: 1,
+      total: total,
+      pageSize: pageSize,
+      current: pageNum === 0 ? 1 : pageNum,
+      onChange: setPageNum
+    })));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isEmpty ? emptyContent : table, dialogVisible && /*#__PURE__*/React.createElement(DeployGroupDialogConnect, {
+      visible: dialogVisible,
+      newly: this.state.newly,
+      groupId: this.field.getValue('id'),
+      mode: dialogMode,
+      onClose: function onClose() {
+        setDialogVisible(false);
+        setShowDialog(false);
+        _this2.field.setValue('id', '');
+        _this2.setState({
+          dialogMode: ''
+        });
+      },
+      onRefresh: function onRefresh(group) {
+        return listMachineGroup(group);
+      }
+    }));
+  };
+  return MachineGroupTable;
+}(Component);
+export default MachineGroupTable;

package/es/components/dashboardMain/components/deploy-setting/main.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import '../common.scss';
+import './index.scss';
+export declare const PREFIX = "tb-main";
+declare const MachineGroupMain: () => JSX.Element;
+export default MachineGroupMain;