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

package/es/components/dashboardMain/components/tag-setting/index.js

@@ -0,0 +1,632 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+var _excluded = ["expandedKeys"];
+import React, { Component } from 'react';
+import Header from "../header";
+import { Button, Field, Collapse, Message, Dialog, Loading, Result, Divider } from '@teamix/ui';
+import { Content, SearchIcon, ButtonIcon, YunxiaoTable as Table } from '@alife/devops-ui';
+import AddTagDialog from "./add-tag-dialog";
+import AddTagGroupDialog from "./add-tag-group-dialog";
+import track from "../../../../utils/track";
+import cx from 'classnames';
+import { searchFilter } from "../../../../utils/pinyinTools";
+import exceed from "../../../../utils/apimap";
+import intl from "../../../../locale";
+import { Perf } from '@alife/yunxiao-common';
+import "./index.scss";
+var Panel = Collapse.Panel;
+var PERMISSION_TAG_GROUP_CREATE = 'tb.role.tagGroup.create';
+var PERMISSION_TAG_CREATE = 'tb.role.tag.create';
+var _ref = window.AK_GLOBAL.currentUser || {},
+  permissions = _ref.permissions;
+var canCreateTag = permissions.includes(PERMISSION_TAG_CREATE);
+var canCreateTagGroup = permissions.includes(PERMISSION_TAG_GROUP_CREATE);
+var PREFIX = 'tag-setting';
+var TagPage = /*#__PURE__*/function (_Component) {
+  function TagPage(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
+    _this.onEditTag = function (_ref2) {
+      var id = _ref2.id,
+        name = _ref2.name,
+        _ref2$tagGroupId = _ref2.tagGroupId,
+        tagGroupId = _ref2$tagGroupId === void 0 ? '0' : _ref2$tagGroupId,
+        color = _ref2.color;
+      _this.tagField.setValues({
+        id: id,
+        name: name,
+        tagGroupId: tagGroupId,
+        color: color
+      });
+      _this.setState({
+        tagVisible: true
+      });
+    };
+    _this.onDeleteTag = function (_ref3) {
+      var id = _ref3.id,
+        name = _ref3.name,
+        itemId = _ref3.itemId;
+      exceed.fetch({
+        api: 'Tag.refobj.count',
+        data: {
+          tagId: id
+        }
+      }).then(function (res) {
+        if (res.successful) {
+          var result = res.object || {};
+          var refPipelineNum = result.pipeline;
+          var refMachineGroupNum = result.deployGroup;
+          var refBuildGroupNum = result.buildGroup;
+          var content = intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.tag-page.ConfirmToDeleteThisTag',
+            defaultMessage: '确认删除此标签'
+          });
+          if (refPipelineNum > 0 || refMachineGroupNum > 0 || refBuildGroupNum > 0) {
+            content = intl.get({
+              id: 'rdc-tb-cd-assets.dashboardMain.tag-page.ATotalOfRefpipelinenumPipelines',
+              defaultMessage: '共计{refPipelineNum}条流水线，{refMachineGroupNum}个主机组，{refBuildGroupNum}个构建集群应用此标签'
+            }, {
+              refPipelineNum: refPipelineNum,
+              refMachineGroupNum: refMachineGroupNum,
+              refBuildGroupNum: refBuildGroupNum
+            });
+          }
+          Dialog.alert({
+            messageProps: {
+              type: 'error'
+            },
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.dashboardMain.tag-page.DeleteTags',
+              defaultMessage: '删除标签'
+            }),
+            content: content,
+            okProps: {
+              children: intl.get({
+                id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Delete',
+                defaultMessage: '删除'
+              }),
+              warning: true
+            },
+            animation: {
+              "in": 'expandInDown',
+              out: 'expandOutUp'
+            },
+            cancelProps: {
+              children: intl.get({
+                id: 'rdc-tb-cd-assets.dashboardMain.tag-page.GiveUp',
+                defaultMessage: '放弃'
+              })
+            },
+            onOk: function onOk() {
+              _this.removeTag(id, itemId, name);
+            },
+            onCancel: function onCancel() {
+              return console.log('cancel');
+            },
+            footerActions: ['cancel', 'ok']
+          });
+        }
+      });
+    };
+    _this.onEditTagGroup = function (id, name, e) {
+      e.stopPropagation();
+      _this.tagGroupField.setValues({
+        id: id,
+        name: name
+      });
+      _this.setState({
+        tagGroupVisible: true,
+        isCreateClass: true
+      });
+    };
+    _this.onDeleteTagGroup = function (id, name, e) {
+      e.stopPropagation();
+      Dialog.alert({
+        messageProps: {
+          type: 'error'
+        },
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.DeleteTagCategories',
+          defaultMessage: '删除标签分类'
+        }),
+        content: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.AfterYouDeleteATag',
+          defaultMessage: '删除标签分类后，此分类下的标签将移至未分类'
+        }),
+        animation: {
+          "in": 'expandInDown',
+          out: 'expandOutUp'
+        },
+        okProps: {
+          children: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Delete',
+            defaultMessage: '删除'
+          }),
+          warning: true
+        },
+        cancelProps: {
+          children: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.tag-page.GiveUp',
+            defaultMessage: '放弃'
+          })
+        },
+        onOk: function onOk() {
+          exceed.fetch({
+            api: 'Tag.group.delete',
+            data: {
+              id: id
+            }
+          }).then(function (res) {
+            if (res.successful) {
+              Message.success({
+                title: intl.get({
+                  id: 'rdc-tb-cd-assets.dashboardMain.tag-page.LabelCategoryNameHasBeen',
+                  defaultMessage: '标签分类 {name} 已删除'
+                }, {
+                  name: name
+                })
+              });
+              _this.listTagGroup(true);
+            }
+            _this.listTagGroup(true);
+            _this.setState({
+              loading: false
+            });
+          }).fail(console.error);
+        },
+        onCancel: function onCancel() {
+          return console.log('cancel');
+        },
+        footerActions: ['cancel', 'ok']
+      });
+    };
+    _this.onChangeTagName = function (tagName) {
+      _this.setState({
+        searchKey: tagName
+      });
+      if (!tagName) {
+        _this.setState({
+          isSearch: false
+        });
+        return;
+      }
+      var _ref4 = _this.state || {},
+        _ref4$tagGroupDatasou = _ref4.tagGroupDatasource,
+        tagGroupDatasource = _ref4$tagGroupDatasou === void 0 ? [] : _ref4$tagGroupDatasou;
+      var searchedDs = tagGroupDatasource.reduce(function (pre, _ref5) {
+        var itemId = _ref5.id,
+          _ref5$tagList = _ref5.tagList,
+          innerTagList = _ref5$tagList === void 0 ? [] : _ref5$tagList;
+        var newTagList = innerTagList.map(function (item) {
+          return _extends({}, item, {
+            itemId: itemId
+          });
+        });
+        return [].concat(pre, newTagList);
+      }, []).filter(function (item) {
+        return searchFilter(tagName, item.name);
+      });
+      _this.setState({
+        searchedDs: searchedDs,
+        isSearch: true
+      });
+    };
+    _this.removeTag = function (id, itemId, name) {
+      var updateExpandedKeys = function updateExpandedKeys() {
+        var _this$state$tagGroupD = _this.state.tagGroupDatasource,
+          tagGroupDatasource = _this$state$tagGroupD === void 0 ? [] : _this$state$tagGroupD;
+        if (!tagGroupDatasource.length) return;
+        var _ref6 = tagGroupDatasource.find(function (_ref7) {
+            var _itemId = _ref7.id;
+            return _itemId === itemId;
+          }) || {},
+          _ref6$tagList = _ref6.tagList,
+          tagList = _ref6$tagList === void 0 ? [] : _ref6$tagList;
+        if (tagList.length !== 1) return;
+        _this.setState(function (_ref8) {
+          var expandedKeys = _ref8.expandedKeys,
+            others = _objectWithoutPropertiesLoose(_ref8, _excluded);
+          return _extends({}, others, {
+            expandedKeys: expandedKeys.filter(function (item) {
+              return "" + item !== "" + itemId;
+            })
+          });
+        });
+      };
+      exceed.fetch({
+        api: 'Tag.delete',
+        data: {
+          id: id
+        }
+      }).then(function (res) {
+        if (res.successful) {
+          Message.success({
+            title: intl.get({
+              id: 'rdc-tb-cd-assets.dashboardMain.tag-page.LabelNameHasBeenDeleted',
+              defaultMessage: '标签 {name} 已删除'
+            }, {
+              name: name
+            })
+          });
+          _this.listTagGroup(true);
+          updateExpandedKeys();
+        }
+        _this.listTagGroup(true);
+        _this.setState({
+          loading: false
+        });
+      }).fail(console.error);
+    };
+    _this.listTagGroup = function (withDetails) {
+      exceed.fetch({
+        api: 'Tag.group.list',
+        data: {
+          withDetails: withDetails
+        }
+      }).then(function (res) {
+        var _ref9 = res || {},
+          successful = _ref9.successful,
+          _ref9$object = _ref9.object,
+          object = _ref9$object === void 0 ? [] : _ref9$object;
+        if (successful) {
+          if (object.length === 1 && (object[0].tagList || []).length) {
+            _this.collapseExpand("" + [object[0].id]);
+          }
+          _this.setState({
+            tagGroupDatasource: res.object,
+            loadingVisible: false
+          });
+          _this.onChangeTagName(_this.state.searchKey);
+        }
+      }).fail(function () {
+        _this.setState({
+          loadingVisible: false
+        });
+      });
+    };
+    _this.collapseExpand = function (keys) {
+      if (keys === void 0) {
+        keys = [];
+      }
+      _this.setState(function (state) {
+        return _extends({}, state, {
+          expandedKeys: [].concat(keys)
+        });
+      });
+    };
+    _this.renderCollapse = function () {
+      var _this$state = _this.state,
+        _this$state$tagGroupD2 = _this$state.tagGroupDatasource,
+        tagGroupDatasource = _this$state$tagGroupD2 === void 0 ? [] : _this$state$tagGroupD2,
+        expandedKeys = _this$state.expandedKeys;
+      var renderPanelTitle = function renderPanelTitle(id, name, tagLen, editAble, deleteAble) {
+        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+          className: cx(PREFIX + "-collapse-title", {
+            disabled: !tagLen
+          })
+        }, name, "\xA0\xA0\xA0\xB7\xA0\xA0\xA0", tagLen), id !== 0 && _this.renderTagGroupOper(id, name, editAble, deleteAble));
+      };
+      var tagListArr = tagGroupDatasource.map(function (_ref10) {
+        var _ref10$tagList = _ref10.tagList,
+          tagList = _ref10$tagList === void 0 ? [] : _ref10$tagList;
+        return tagList.length;
+      });
+      // 默认有未分类
+      var isEmpty = tagGroupDatasource.length === 1 && tagListArr.every(function (len) {
+        return len === 0;
+      });
+      if (isEmpty) {
+        return /*#__PURE__*/React.createElement(Result, {
+          img: "none",
+          title: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.tag-page.NoTag',
+            defaultMessage: '暂无标签'
+          }),
+          desc: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.tag-page.TryToCreateTag',
+            defaultMessage: '请尝试新建标签'
+          }),
+          theme: "yunxiao",
+          imageTheme: "yunxiao",
+          size: "medium",
+          className: "dashboard-empty tag",
+          extra: _this.getHeaderBtns()
+        });
+      }
+      return /*#__PURE__*/React.createElement(Collapse, {
+        className: PREFIX + "-collapse",
+        expandedKeys: expandedKeys,
+        onExpand: _this.collapseExpand
+      }, tagGroupDatasource.map(function (_ref11) {
+        var id = _ref11.id,
+          name = _ref11.name,
+          _ref11$tagList = _ref11.tagList,
+          tagList = _ref11$tagList === void 0 ? [] : _ref11$tagList,
+          editAble = _ref11.editAble,
+          deleteAble = _ref11.deleteAble;
+        return /*#__PURE__*/React.createElement(Panel, {
+          key: id,
+          title: renderPanelTitle(id, name, tagList.length, editAble, deleteAble),
+          disabled: !tagList.length
+        }, tagList.map(function (tag) {
+          return /*#__PURE__*/React.createElement("div", {
+            className: PREFIX + "-collapse-item",
+            key: JSON.stringify(tag)
+          }, _this.renderTag(tag), _this.renderTagOper(_extends({}, tag, {
+            itemId: id
+          })));
+        }));
+      }));
+    };
+    _this.renderSearchedDs = function () {
+      return /*#__PURE__*/React.createElement(Table, {
+        className: PREFIX + "-table",
+        dataSource: _this.state.searchedDs,
+        primaryKey: "id",
+        hasBorder: false,
+        hasHeader: false,
+        emptyContent: /*#__PURE__*/React.createElement(Result, {
+          img: "none",
+          desc: intl.get({
+            id: 'rdc-tb-cd-assets.dashboardMain.tag-page.NoSearchResults',
+            defaultMessage: '没有搜索结果'
+          }),
+          theme: "yunxiao",
+          imageTheme: "yunxiao",
+          size: "small",
+          className: "dashboard-empty tag-table"
+        }),
+        rowHeight: 500,
+        maxBodyHeight: "calc(100vh - 230px)"
+      }, /*#__PURE__*/React.createElement(Table.Colum, {
+        width: "70%",
+        cell: function cell(_, __, record) {
+          return _this.renderTag(record);
+        }
+      }), /*#__PURE__*/React.createElement(Table.Colum, {
+        align: "right",
+        cell: function cell(_, __, record) {
+          return _this.renderTagOper(record);
+        }
+      }));
+    };
+    _this.renderTag = function (_ref12) {
+      var color = _ref12.color,
+        name = _ref12.name;
+      return /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "-panel"
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          background: color
+        },
+        className: PREFIX + "-panel-dot"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: PREFIX + "-panel-text"
+      }, name));
+    };
+    _this.renderTagOper = function (record) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "-operation"
+      }, /*#__PURE__*/React.createElement(ButtonIcon, {
+        name: "edit-line",
+        onClick: function onClick() {
+          return _this.onEditTag(record);
+        },
+        disabled: !record.editAble,
+        tooltipProps: {
+          align: !record.editAble ? 'tl' : 't'
+        },
+        tooltip: !record.editAble ? intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Tag.NoPermissionTips',
+          defaultMessage: '您暂无权限管理标签，请联系企业管理员添加权限'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.EditTags',
+          defaultMessage: '编辑标签'
+        })
+      }), /*#__PURE__*/React.createElement(ButtonIcon, {
+        name: "delete-line",
+        className: PREFIX + "-operation-remove",
+        onClick: function onClick() {
+          return _this.onDeleteTag(record);
+        },
+        disabled: !record.deleteAble,
+        tooltipProps: {
+          align: !record.deleteAble ? 'tl' : 't'
+        },
+        tooltip: !record.deleteAble ? intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Tag.NoPermissionTips',
+          defaultMessage: '您暂无权限管理标签，请联系企业管理员添加权限'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.DeleteTags',
+          defaultMessage: '删除标签'
+        })
+      }));
+    };
+    _this.renderTagGroupOper = function (id, name, editAble, deleteAble) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "-operation"
+      }, /*#__PURE__*/React.createElement(ButtonIcon, {
+        name: "edit-line",
+        onClick: function onClick(e) {
+          return _this.onEditTagGroup(id, name, e);
+        },
+        disabled: !editAble,
+        tooltipProps: {
+          align: !editAble ? 'tl' : 't'
+        },
+        tooltip: !editAble ? intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Category.NoPermissionTips',
+          defaultMessage: '您暂无权限管理标签分类，请联系企业管理员添加权限'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.EditCategory',
+          defaultMessage: '编辑分类'
+        })
+      }), /*#__PURE__*/React.createElement(ButtonIcon, {
+        name: "delete-line",
+        className: PREFIX + "-operation-remove",
+        onClick: function onClick(e) {
+          return _this.onDeleteTagGroup(id, name, e);
+        },
+        disabled: !deleteAble,
+        tooltipProps: {
+          align: !deleteAble ? 'tl' : 't'
+        },
+        tooltip: !deleteAble ? intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.Category.NoPermissionTips',
+          defaultMessage: '您暂无权限管理标签分类，请联系企业管理员添加权限'
+        }) : intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.DeleteACategory',
+          defaultMessage: '删除分类'
+        })
+      }));
+    };
+    _this.field = new Field(_this);
+    _this.tagField = new Field(_this);
+    _this.tagGroupField = new Field(_this);
+    _this.state = {
+      tagGroupDatasource: [],
+      tagVisible: false,
+      tagGroupVisible: false,
+      isSearch: false,
+      searchedDs: [],
+      searchKey: '',
+      loadingVisible: true,
+      expandedKeys: [],
+      createClass: false
+    };
+    return _this;
+  }
+  _inheritsLoose(TagPage, _Component);
+  var _proto = TagPage.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.listTagGroup(true);
+  };
+  _proto.getHeaderBtns = function getHeaderBtns() {
+    var _this2 = this;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      disabled: !canCreateTagGroup,
+      onClick: function onClick() {
+        track({
+          action: 'add tag group',
+          page: 'main page'
+        });
+        _this2.setState({
+          tagGroupVisible: true
+        });
+      },
+      style: {
+        marginLeft: 0
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dashboardMain.tag-page.CreateACategory',
+      defaultMessage: '新建分类'
+    })), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      disabled: !canCreateTag,
+      className: "create-tag",
+      onClick: function onClick() {
+        track({
+          action: 'add tag',
+          page: 'main page'
+        });
+        _this2.tagField.reset();
+        _this2.setState({
+          tagVisible: true
+        });
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.dashboardMain.tag-page.CreateTag',
+      defaultMessage: '新建标签'
+    })));
+  };
+  _proto.render = function render() {
+    var _this3 = this;
+    var _this$state2 = this.state,
+      isSearch = _this$state2.isSearch,
+      tagVisible = _this$state2.tagVisible,
+      tagGroupDatasource = _this$state2.tagGroupDatasource,
+      tagGroupVisible = _this$state2.tagGroupVisible,
+      loadingVisible = _this$state2.loadingVisible,
+      isCreateClass = _this$state2.isCreateClass;
+    if (loadingVisible) {
+      return /*#__PURE__*/React.createElement(Loading, {
+        inline: false,
+        style: {
+          marginTop: 150
+        }
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
+      name: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.manage-header.TagManagement',
+        defaultMessage: '标签管理'
+      }),
+      extra: this.pageHeaderExtra
+    }), /*#__PURE__*/React.createElement(Content, {
+      className: PREFIX + "-content"
+    }, isSearch ? this.renderSearchedDs() : this.renderCollapse(), /*#__PURE__*/React.createElement(Perf, null)), tagVisible && /*#__PURE__*/React.createElement(AddTagDialog, {
+      visible: tagVisible,
+      onClose: function onClose() {
+        _this3.setState({
+          tagVisible: false
+        });
+        _this3.tagField.reset();
+      },
+      tagGroupDatasource: tagGroupDatasource,
+      onRefresh: function onRefresh() {
+        _this3.listTagGroup(true);
+        _this3.props.actions.getTagGroupList();
+      },
+      collapseExpand: this.collapseExpand,
+      field: this.tagField
+    }), tagGroupVisible && /*#__PURE__*/React.createElement(AddTagGroupDialog, {
+      visible: tagGroupVisible,
+      onClose: function onClose() {
+        _this3.setState({
+          tagGroupVisible: false,
+          isCreateClass: false
+        });
+        _this3.tagGroupField.reset();
+      },
+      onRefresh: function onRefresh() {
+        _this3.listTagGroup(true);
+      },
+      field: this.tagGroupField,
+      isCreateClass: isCreateClass
+    }));
+  };
+  return _createClass(TagPage, [{
+    key: "pageHeaderExtra",
+    get: function get() {
+      var _this$state3 = this.state,
+        searchKey = _this$state3.searchKey,
+        tagGroupDatasource = _this$state3.tagGroupDatasource;
+      var tagListArr = tagGroupDatasource.map(function (_ref13) {
+        var _ref13$tagList = _ref13.tagList,
+          tagList = _ref13$tagList === void 0 ? [] : _ref13$tagList;
+        return tagList.length;
+      });
+      var isEmpty = tagGroupDatasource.length === 1 && tagListArr.every(function (len) {
+        return len === 0;
+      });
+      if (isEmpty) return null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchIcon, {
+        direction: "rtl",
+        placeholder: intl.get({
+          id: 'rdc-tb-cd-assets.dashboardMain.tag-page.SearchTagName',
+          defaultMessage: '搜索标签名称'
+        }),
+        onChange: this.onChangeTagName,
+        value: searchKey
+      }), /*#__PURE__*/React.createElement(Divider, {
+        direction: "ver",
+        style: {
+          marginLeft: 14
+        }
+      }), this.getHeaderBtns());
+    }
+  }]);
+}(Component);
+export default TagPage;