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

package/es/components/dashboardMain/components/template-setting/template-card/index.js

@@ -0,0 +1,173 @@
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import { Switch, Loading, Balloon, Button } from '@teamix/ui';
+import { YunxiaoIcon } from '@alife/devops-ui';
+import PipelineGraph from "../../../../common/teambition/pipeline-graph";
+import Avatar from "../../../../common/teambition/avatar";
+import cx from 'classnames';
+import ErrorBoundaryCommon from "../../../../common/teambition/ErrorBoundaryCommon";
+import { GROUPS } from "../utils";
+import intl from "../../../../../locale";
+import "./index.scss";
+import { getFeature } from "../../../../../utils";
+var PREFIX = 'template-card';
+var Tooltip = Balloon.Tooltip;
+var graphConfig = {
+  card: {
+    width: 129,
+    height: 36,
+    marginLR: 8,
+    marginTB: 7,
+    lineColor: 'var(--color-brand1-3)'
+  },
+  container: {
+    marginTB: 13,
+    marginLR: 12
+  }
+};
+var PERMISSION_PIPELINE_TEMPLATE_ADMIN = 'tb.role.pipelineTemplate.admin';
+var _ref = window.AK_GLOBAL.currentUser || {},
+  permissions = _ref.permissions,
+  workid = _ref.workid;
+var isTemplateAdmin = permissions.includes(PERMISSION_PIPELINE_TEMPLATE_ADMIN);
+var _ref2 = window.AK_GLOBAL || {},
+  env = _ref2.env;
+var tooltip = function tooltip(trigger, text) {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: trigger,
+    align: "t"
+  }, text || trigger);
+};
+var TemplateCard = /*#__PURE__*/forwardRef(function (props, ref) {
+  var templateName = props.templateName,
+    content = props.content,
+    stageTpls = props.stageTpls,
+    navBarVal = props.navBarVal,
+    checked = props.disable,
+    creator = props.creator,
+    id = props.id;
+  var _onChange = props.onChange,
+    onDelete = props.onDelete,
+    onEdit = props.onEdit;
+  var _useState = useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  useImperativeHandle(ref, function () {
+    return {
+      closeLoading: function closeLoading() {
+        return setLoading(false);
+      }
+    };
+  });
+  var getItems = function getItems() {
+    if (!content) return null;
+    if (navBarVal === 'enterprise') {
+      return /*#__PURE__*/React.createElement(PipelineGraph, {
+        graphConfig: graphConfig,
+        flow: JSON.parse(content),
+        type: "custom"
+      });
+    }
+    return /*#__PURE__*/React.createElement(PipelineGraph, {
+      graphConfig: graphConfig,
+      flow: JSON.parse(content)[env.toUpperCase()],
+      stageTemplateList: stageTpls
+    });
+  };
+  var getTitle = function getTitle() {
+    if (navBarVal === 'enterprise') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, tooltip(/*#__PURE__*/React.createElement(Avatar, {
+        uid: creator,
+        needAddedText: false
+      }), /*#__PURE__*/React.createElement(Avatar, {
+        uid: creator,
+        nameOnly: true
+      })), intl.get({
+        id: 'rdc-tb-cd-assets.template-manage.template-card.EnterpriseTemplate',
+        defaultMessage: '{orgName}模板 ·'
+      }, {
+        orgName: getFeature('org.name')
+      }), templateName);
+    }
+    var _ref3 = GROUPS[navBarVal] || {},
+      icon = _ref3.icon,
+      label = _ref3.label;
+    if (!icon || !label) return null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, icon, " ", label, " \xB7 ", templateName);
+  };
+  var getBtns = function getBtns() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tooltip(/*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        marginRight: 8
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onEdit && onEdit(id);
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "edit-line",
+      className: "tpl-card__icon"
+    })), intl.get({
+      id: 'rdc-tb-cd-assets.template-manage.template-card.Editing',
+      defaultMessage: '编辑'
+    })), tooltip(/*#__PURE__*/React.createElement(Button, {
+      text: true,
+      type: "normal",
+      style: {
+        marginRight: 8
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onDelete && onDelete(id);
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "delete-line"
+    })), intl.get({
+      id: 'rdc-tb-cd-assets.template-manage.template-card.Delete',
+      defaultMessage: '删除'
+    })));
+  };
+  var getSwitch = function getSwitch() {
+    if (!isTemplateAdmin) return null;
+    var checkedText = checked ? intl.get({
+      id: 'rdc-tb-cd-assets.template-setting.template-card.Open',
+      defaultMessage: '打开'
+    }) : intl.get({
+      id: 'rdc-tb-cd-assets.template-setting.template-card.Closed',
+      defaultMessage: '关闭'
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tooltip(/*#__PURE__*/React.createElement(Switch, {
+      checked: !checked,
+      onChange: function onChange(v) {
+        _onChange && _onChange(v);
+        setLoading(true);
+      }
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.template-setting.template-card.CheckedtextPipelineTemplate',
+      defaultMessage: '{checkedText}流水线模板'
+    }, {
+      checkedText: checkedText
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx(PREFIX, {
+      disabled: checked
+    })
+  }, /*#__PURE__*/React.createElement(Loading, {
+    visible: loading,
+    style: {
+      display: 'block',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("section", {
+    className: PREFIX + "-title"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, getTitle()), /*#__PURE__*/React.createElement("div", {
+    className: "ops"
+  }, (isTemplateAdmin || creator === workid) && navBarVal === 'enterprise' && /*#__PURE__*/React.createElement("div", {
+    className: "ops-btn"
+  }, getBtns()), getSwitch())), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(ErrorBoundaryCommon, null, getItems()))));
+});
+export default /*#__PURE__*/React.memo(TemplateCard);

package/es/components/dashboardMain/components/template-setting/template-card/index.scss

@@ -0,0 +1,87 @@
+$PREFIX: template-card;
+
+.#{$PREFIX} {
+  width: 100%;
+  height: auto;
+  background: var(--color-brand1-1, #f0f9ff);
+  border-radius: 4px;
+  margin-top: 12px;
+  padding: 20px;
+  transition: transform .218s ease-in;
+  &:first-child {
+    margin-top: 0;
+  }
+  &.disabled {
+    background: var(--color-fill1-2, #f7f7f7);
+    .pipeline-graph-container {
+      path {
+        stroke: var(--color-line1-5, #adadad);
+      }
+      .mytest {
+        box-shadow: none;
+        color: var(--color-line1-5, #adadad);
+      }
+    }
+    .text {
+      color: var(--color-line1-5, #adadad);
+      .at-text-avatar {
+        img {
+          opacity: .4;
+        }
+      }
+    }
+  }
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 18px 0 rgba(204, 236, 254, 0.24);
+    .ops-btn {
+      display: block;
+      transition: all 1s ease-in;
+    }
+  }
+  .pipeline-graph-container {
+    padding: 0 13px;
+    overflow-x: hidden;
+    .mytest {
+      box-shadow: 0 2px 4px 0 rgba(204, 236, 254, 1);
+      border: none;
+      font-size: 12px;
+      margin-left: 13px;
+    }
+  }
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .text {
+      font-size: 14px;
+      color: var(--color-text1-4, #292929);
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      .teamix-text-avatar-container {
+        margin-right: 8px;
+      }
+      .next-icon, .teamix-icon {
+        color: var(--color-brand1-6, #1b9aee);
+        margin-right: 8px;
+      }
+    }
+    .ops {
+      display: inline-flex;
+      align-items: center;
+      &-btn {
+        display: none;
+        margin-right: 19px;
+        padding-left: 15px;
+        border-right: 1px solid var(--color-brand3-2, #e9edf0);
+        .next-btn:nth-child(2):hover {
+          color: red;
+        }
+        button.next-btn.next-btn {
+          height: 24px;
+        }
+      }
+    }
+  }
+}

package/es/components/dashboardMain/components/template-setting/utils.d.ts

@@ -0,0 +1,25 @@
+export declare const getTpls: ({ templateType, displayScope }: {
+    templateType: any;
+    displayScope?: string;
+}) => Promise<{
+    successful: any;
+    dataList: any;
+}>;
+export declare const setTplStatus: (params: any) => Promise<any>;
+export declare const getComponentList: ({ isMultiple, onSuccess }: {
+    isMultiple: any;
+    onSuccess: any;
+}) => Promise<void>;
+export declare const getStepList: ({ onSuccess }: {
+    onSuccess: any;
+}) => Promise<void>;
+export declare const deleteCustomTemplate: (params: any) => Promise<{
+    successful: any;
+    object: any;
+}>;
+export declare const GROUPS: {
+    enterprise: {
+        label: any;
+        icon: string;
+    };
+};

package/es/components/dashboardMain/components/template-setting/utils.js

@@ -0,0 +1,228 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable import/prefer-default-export */
+import exceed from "../../../../utils/apimap";
+import groups from "../../../common/teambition/pipeline-template-card/groups";
+import intl from "../../../../locale";
+import { getFeature } from "../../../../utils";
+var _ref = window.AK_GLOBAL || {},
+  env = _ref.env;
+export var getTpls = /*#__PURE__*/function () {
+  var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+    var templateType, _ref2$displayScope, displayScope, config, _ref4, successful, _ref4$object, object;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          templateType = _ref2.templateType, _ref2$displayScope = _ref2.displayScope, displayScope = _ref2$displayScope === void 0 ? '' : _ref2$displayScope;
+          config = {
+            api: 'template.list.query',
+            data: {
+              templateType: templateType,
+              env: env,
+              displayScope: displayScope
+            }
+          };
+          _context.next = 4;
+          return exceed.fetch(config);
+        case 4:
+          _context.t0 = _context.sent;
+          if (_context.t0) {
+            _context.next = 7;
+            break;
+          }
+          _context.t0 = {};
+        case 7:
+          _ref4 = _context.t0;
+          successful = _ref4.successful;
+          _ref4$object = _ref4.object;
+          object = _ref4$object === void 0 ? {} : _ref4$object;
+          return _context.abrupt("return", {
+            successful: successful,
+            dataList: object.dataList
+          });
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getTpls(_x) {
+    return _ref3.apply(this, arguments);
+  };
+}();
+export var setTplStatus = /*#__PURE__*/function () {
+  var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
+    var config, _yield$exceed$fetch, successful, object;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          config = {
+            api: 'Set.template.status',
+            data: _extends({}, params)
+          };
+          _context2.next = 3;
+          return exceed.fetch(config);
+        case 3:
+          _yield$exceed$fetch = _context2.sent;
+          successful = _yield$exceed$fetch.successful;
+          object = _yield$exceed$fetch.object;
+          if (successful) {
+            _context2.next = 8;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 8:
+          return _context2.abrupt("return", object);
+        case 9:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function setTplStatus(_x2) {
+    return _ref5.apply(this, arguments);
+  };
+}();
+export var getComponentList = /*#__PURE__*/function () {
+  var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(_ref6) {
+    var isMultiple, onSuccess, config, _ref8, successful, _ref8$object, object, filter, componentList;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          isMultiple = _ref6.isMultiple, onSuccess = _ref6.onSuccess;
+          config = {
+            api: 'Pipeline.edit.getComponentsList',
+            data: {
+              filter: JSON.stringify({
+                status: 'ONLINE',
+                pageSize: 1000,
+                typeList: ['NORMAL', 'SYSTEM']
+              })
+            }
+          };
+          _context3.next = 4;
+          return exceed.fetch(config);
+        case 4:
+          _context3.t0 = _context3.sent;
+          if (_context3.t0) {
+            _context3.next = 7;
+            break;
+          }
+          _context3.t0 = {};
+        case 7:
+          _ref8 = _context3.t0;
+          successful = _ref8.successful;
+          _ref8$object = _ref8.object;
+          object = _ref8$object === void 0 ? [] : _ref8$object;
+          if (successful) {
+            _context3.next = 13;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 13:
+          filter = isMultiple ? ['deploy-prod'] : ['deploy-kubernetes-prod', 'deploy-ecs-prod', 'deploy-edas-prod'];
+          componentList = object.dataList.filter(function (t) {
+            return !filter.includes(t.sign);
+          });
+          onSuccess && onSuccess(componentList);
+        case 16:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return function getComponentList(_x3) {
+    return _ref7.apply(this, arguments);
+  };
+}();
+export var getStepList = /*#__PURE__*/function () {
+  var _ref10 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref9) {
+    var onSuccess, _ref11, successful, _ref11$object, object;
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          onSuccess = _ref9.onSuccess;
+          _context4.next = 3;
+          return exceed.fetch({
+            api: 'Pipeline.step.list',
+            data: {
+              displayScope: window.__isEmbedInAppstack ? 'appstack' : 'flow'
+            }
+          });
+        case 3:
+          _context4.t0 = _context4.sent;
+          if (_context4.t0) {
+            _context4.next = 6;
+            break;
+          }
+          _context4.t0 = {};
+        case 6:
+          _ref11 = _context4.t0;
+          successful = _ref11.successful;
+          _ref11$object = _ref11.object;
+          object = _ref11$object === void 0 ? [] : _ref11$object;
+          if (successful) {
+            _context4.next = 12;
+            break;
+          }
+          return _context4.abrupt("return");
+        case 12:
+          onSuccess && onSuccess(object);
+        case 13:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  }));
+  return function getStepList(_x4) {
+    return _ref10.apply(this, arguments);
+  };
+}();
+export var deleteCustomTemplate = /*#__PURE__*/function () {
+  var _ref12 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(params) {
+    var config, _yield$exceed$fetch2, successful, object;
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          config = {
+            api: 'PipelineTemplage.custom.delete',
+            data: _extends({}, params)
+          };
+          _context5.next = 3;
+          return exceed.fetch(config);
+        case 3:
+          _yield$exceed$fetch2 = _context5.sent;
+          successful = _yield$exceed$fetch2.successful;
+          object = _yield$exceed$fetch2.object;
+          return _context5.abrupt("return", {
+            successful: successful,
+            object: object
+          });
+        case 7:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  }));
+  return function deleteCustomTemplate(_x5) {
+    return _ref12.apply(this, arguments);
+  };
+}();
+var _groups = {};
+for (var k in groups) {
+  if (groups[k].visible) {
+    _groups[k] = groups[k];
+  }
+}
+export var GROUPS = _extends({
+  enterprise: {
+    label: intl.get({
+      id: 'rdc-tb-cd-assets.dashboardMain.template-manage.utils.EnterpriseTemplate',
+      defaultMessage: '{orgName}模板'
+    }, {
+      orgName: getFeature('org.name')
+    }),
+    icon: ''
+  }
+}, _groups);

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

@@ -0,0 +1,24 @@
+import { Component } from 'react';
+import '../common.scss';
+declare class VariableGroupTable extends Component {
+    constructor(props: any);
+    componentDidMount(): void;
+    onDelete: ({ id, name, relPipelines }: {
+        id: any;
+        name: any;
+        relPipelines: any;
+    }) => void;
+    onEdit: (vg: any) => void;
+    onPageChange: (page: any) => void;
+    get header(): JSX.Element;
+    get content(): JSX.Element;
+    getVariableGroups: () => Promise<void>;
+    isEmpty: () => boolean;
+    newVgDialogClose(): void;
+    newVgDialogCloseWithoutReload(): void;
+    deleteVgDialogClose(): void;
+    deleteVgDialogCloseWithoutReload(): void;
+    operation: (record: any) => JSX.Element;
+    render(): JSX.Element;
+}
+export default VariableGroupTable;