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

package/es/components/dashboardMain/components/build-setting/build-group-table.js

@@ -0,0 +1,448 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+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 _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { Component, useState, memo } from 'react';
+import { Pagination, Button, Message, Balloon, Dialog, Field, Result } from '@teamix/ui';
+import SortableSelect from '@alife/teamix-sortable-select';
+import exceed from "../../../../utils/apimap";
+import permissions from "./permissions";
+import DeployGroupDialog from "../../../common/teambition/deploy-group-dialog";
+import { Provider } from "../../../common/teambition/deploy-group-dialog/store";
+import tableColumns from "./tableColumns";
+import { Content, Footer, YunxiaoIcon, YunxiaoTable } from '@alife/devops-ui';
+import intl from "../../../../locale";
+import { setLocalStorageCache } from "../../../../utils";
+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('build-group-table-select-colums');
+  var defaultVal = ['machineNum', 'createTime'];
+  if (cache && cache !== undefined && cache !== 'undefined') {
+    return JSON.parse(cache);
+  }
+  return defaultVal;
+};
+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.build-manage.build-group-table.HeaderSettings',
+      defaultMessage: '表头设置'
+    }),
+    onClose: function onClose() {
+      return setVisible(false);
+    },
+    onVisibleChange: function onVisibleChange(v) {
+      return setVisible(v);
+    }
+  }));
+});
+var BuildGroupTable = /*#__PURE__*/function (_Component) {
+  function BuildGroupTable(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.build-manage.build-group-table.NewHostGroup',
+        defaultMessage: '新的主机组'
+      }));
+      _this.field.setValue('type', 'ECS');
+      _this.setState({
+        newly: true
+      });
+    };
+    _this.onTableSelectChange = function (values) {
+      _this.setState({
+        tableSelectValues: [].concat(values)
+      });
+      setLocalStorageCache('build-group-table-select-colums', JSON.stringify(values), false);
+    };
+    _this.onTableSortEnd = function (data) {
+      _this.setState({
+        sorTableSelectSource: data
+      });
+      setLocalStorageCache('build-group-table-select-colums', JSON.stringify(data), false);
+    };
+    _this.onEdit = function (record) {
+      exceed.fetch({
+        api: 'Machine.group.get',
+        params: {
+          purpose: 'build'
+        },
+        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.build-manage.build-group-table.Confirmation',
+          defaultMessage: '确认'
+        }),
+        content: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.build-manage.build-group-table.ConfirmToDeleteTheCurrently',
+          defaultMessage: '确认删除当前构建集群'
+        }),
+        footerActions: ['cancel', 'ok'],
+        onOk: function () {
+          var _onOk = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+            return _regeneratorRuntime.wrap(function _callee$(_context) {
+              while (1) switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return exceed.fetch({
+                    api: 'BuildGroup.delete',
+                    params: {
+                      groupId: record.id
+                    },
+                    data: {
+                      purpose: 'BUILD_GROUP'
+                    }
+                  }).then(function (res) {
+                    if (res.successful) {
+                      Message.success({
+                        title: intl.get({
+                          id: 'rdc-tb-cd-assets.dashboardMain.build-manage.build-group-table.BuildGroupHasBeenDeleted',
+                          defaultMessage: '构建集群删除成功'
+                        })
+                      });
+                      _this.props.listBulidGroup();
+                    } else {
+                      var errorMsg = res.errorCode && res.errorCode === '403' ? intl.get({
+                        id: 'rdc-tb-cd-assets.dashboardMain.build-manage.build-group-table.YouAreNotAuthorizedTo',
+                        defaultMessage: '无权限删除构建集群'
+                      }) : res.errorMsg + "(" + res.errorCode + ")";
+                      Message.error({
+                        title: errorMsg
+                      });
+                    }
+                  });
+                case 2:
+                case "end":
+                  return _context.stop();
+              }
+            }, _callee);
+          }));
+          function onOk() {
+            return _onOk.apply(this, arguments);
+          }
+          return onOk;
+        }()
+      });
+    };
+    _this.renderOper = function (_, __, record) {
+      var buildGroupPermissionResult = _this.props.buildGroupPermissionResult;
+      var permObj = buildGroupPermissionResult[String(record.id)] || {};
+      var editablePerm = permObj[permissions.PERMISSION_BUILD_GROUP_EDIT] || false;
+      var deletedablePerm = permObj[permissions.PERMISSION_BUILD_GROUP_DELETE] || false;
+      var noPermDisabledTips = intl.get({
+        id: 'rdc-tb-cd-assets.components.build-setting.build-group-table.YouDoNotHavePermission',
+        defaultMessage: '你暂无权限管理构建集群，请联系企业管理员添加权限'
+      });
+      return /*#__PURE__*/React.createElement("ul", {
+        className: "tb-common-table-operate"
+      }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "build"
+      }, function (disabledForUpgrade, disabledForUpgradeTip) {
+        var tip;
+        if (!editablePerm) {
+          tip = noPermDisabledTips;
+        } else if (disabledForUpgrade) {
+          tip = disabledForUpgradeTip;
+        } else {
+          tip = intl.get({
+            id: 'rdc-tb-cd-assets.components.build-setting.build-group-table.ModifyTheBuildClusterInformation',
+            defaultMessage: '修改构建集群信息'
+          });
+        }
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          align: 'tl',
+          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",
+          size: "small",
+          popupClassName: "tb-table-tooltip"
+        }, tip);
+      })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(MachineUpgradingDisabledTip, {
+        purpose: "build"
+      }, function (disabledForUpgrade, disabledForUpgradeTip) {
+        var tip;
+        if (!editablePerm) {
+          tip = noPermDisabledTips;
+        } else if (disabledForUpgrade) {
+          tip = disabledForUpgradeTip;
+        } else {
+          tip = intl.get({
+            id: 'rdc-tb-cd-assets.components.build-setting.build-group-table.DeleteBuildClusterInformation',
+            defaultMessage: '删除构建集群信息'
+          });
+        }
+        return /*#__PURE__*/React.createElement(Tooltip, {
+          align: 'tl',
+          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",
+          size: "small",
+          popupClassName: "tb-table-tooltip"
+        }, tip);
+      })));
+    };
+    _this.titleAddOns = function () {
+      var _this$props = _this.props,
+        selection = _this$props.selection,
+        onBatchDelete = _this$props.onBatchDelete;
+      if (!selection.length) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("span", {
+        className: "op-container"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "op-container-tip"
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.dashboardMain.build-manage.build-group-table.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: "build",
+        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.build-manage.build-group-table.Delete',
+          defaultMessage: '删除'
+        }));
+      }))));
+    };
+    _this.field = new Field(_this, {
+      autoUnmount: false
+    });
+    var _tableColumns = tableColumns({}),
+      left = _tableColumns.left,
+      uuid = _tableColumns.uuid,
+      others = _objectWithoutPropertiesLoose(_tableColumns, _excluded2);
+    var columnConfig = _extends({
+      left: left
+    }, others);
+    _this.state = {
+      tableSelectValues: defaultTableSelectValues(),
+      sorTableSelectSource: Object.keys(others).map(function (k) {
+        return {
+          label: columnConfig[k].title,
+          value: k
+        };
+      }),
+      newly: true
+    };
+    return _this;
+  }
+  _inheritsLoose(BuildGroupTable, _Component);
+  var _proto = BuildGroupTable.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.showDialog) {
+      this.initInfo();
+    }
+  };
+  _proto.render = function render() {
+    var _this2 = this;
+    var _this$state = this.state,
+      tableSelectValues = _this$state.tableSelectValues,
+      sorTableSelectSource = _this$state.sorTableSelectSource;
+    var _this$props2 = this.props,
+      buildGroups = _this$props2.buildGroups,
+      selection = _this$props2.selection,
+      emptyContent = _this$props2.emptyContent,
+      setSelection = _this$props2.setSelection,
+      loading = _this$props2.loading,
+      total = _this$props2.total,
+      pageSize = _this$props2.pageSize,
+      pageNum = _this$props2.pageNum,
+      setPageNum = _this$props2.setPageNum,
+      dialogVisible = _this$props2.dialogVisible,
+      listBulidGroup = _this$props2.listBulidGroup;
+    var _tableColumns2 = tableColumns({
+        selection: selection
+      }),
+      left = _tableColumns2.left,
+      others = _objectWithoutPropertiesLoose(_tableColumns2, _excluded3);
+    var columnConfig = _extends({
+      left: left
+    }, others);
+    var isEmpty = this.props.conditionsLen ? false : !loading && total === 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: buildGroups,
+      primaryKey: "id",
+      className: isEmpty ? 'hide' : '',
+      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 ? 3 : 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 /*#__PURE__*/React.createElement(Column, _extends({
+        key: k
+      }, columnConfig[k]));
+    }), /*#__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,
+      className: "sort-table-select",
+      value: tableSelectValues,
+      onChange: this.onTableSelectChange,
+      onSortEnd: this.onTableSortEnd,
+      trigger: /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "setting-line",
+        className: "tb-common-table-sort-select",
+        style: {
+          right: 14,
+          top: 13
+        }
+      })
+    }))), 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(Provider, null, /*#__PURE__*/React.createElement(DeployGroupDialog, {
+      visible: dialogVisible,
+      newly: this.state.newly,
+      groupId: this.field.getValue('id'),
+      purpose: "BUILD_GROUP",
+      trackConfig: {
+        page: 'add build group page'
+      },
+      onClose: function onClose() {
+        _this2.props.setDialogVisible(false);
+        _this2.props.setShowDialog(false);
+        _this2.field.setValue('id', '');
+      },
+      onRefresh: function onRefresh(group) {
+        return listBulidGroup(group);
+      }
+    })));
+  };
+  return BuildGroupTable;
+}(Component);
+export default BuildGroupTable;

package/es/components/dashboardMain/components/build-setting/index.d.ts

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