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

package/es/components/common/teambition/pipeline-flow-orchestrator/index.js

@@ -0,0 +1,1010 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+var _excluded = ["sign", "type", "name", "isBranchMode", "repo"],
+  _excluded2 = ["sign", "type", "name", "isBranchMode", "repo"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/* eslint-disable react/no-unused-prop-types */
+import React, { Component, Suspense } from 'react';
+import { Balloon, Loading, Dialog, Field, Message, Tag } from '@teamix/ui';
+import { YunxiaoIcon, Title } from '@alife/devops-ui';
+import Image from "../icon-image";
+import cls from 'classnames';
+import GuideHint from "../guide-hint";
+import PipelineConfiguration from "../pipeline-configuration";
+import track from "../../../../utils/track";
+import tools, { intervalEnterTime, setLocalStorageCache, getLocalStorageCache, getFeature } from "../../../../utils";
+import pipelineTools from "../../../../utils/pipelineTools";
+import YAML from 'js-yaml';
+import exceed from "../../../../utils/apimap";
+import PipelineSource from "../pipeline-source";
+import Flow from "../flow";
+import { transform, sourceIconMap, getSourceToolIcon, fetchSteps, fetchComponents, fetchStageTemplate, buildJob } from "./utils";
+import { get, set, filter } from 'lodash-es';
+import intl from "../../../../locale";
+import "./index.scss";
+import { ARTIFACT_SOURCE, getCategoryFromType } from "../pipeline-source/util";
+import { isStepAppstackPresetAppname } from "../../../../utils";
+import { ArtifactSourceTypes } from "../pipeline-source/artifact-source";
+var Tooltip = Balloon.Tooltip;
+
+/** yaml debug 视图 */
+export var LIST_MODE = 'List';
+export var YAML_MODE = 'Yaml';
+var env = window.AK_GLOBAL.env;
+export { transform, getSourceToolIcon };
+var PREFIX = 'pipeline-flow';
+var STEPS_CACHE_KEY = 'pipeline-execution-steps';
+var timers = {
+  autoSourceOpenTimer: null,
+  autoCreateHelperOpenTimer: null,
+  delaySourceOpenTimer1: null,
+  delaySourceOpenTimer2: null,
+  delaySourceOpenTimer3: null,
+  jobMenuVisibleTimer: null,
+  menuVisibleTimer: null,
+  changeFlowTimer: null
+};
+var title = function title(trigger, text, pipelineName) {
+  return /*#__PURE__*/React.createElement(Title, {
+    trigger: pipelineName || trigger,
+    align: "t"
+  }, text || trigger);
+};
+var tooltip = function tooltip(trigger, text) {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: trigger,
+    align: "t"
+  }, text || trigger);
+};
+var MonacoEditor = /*#__PURE__*/React.lazy(function () {
+  return import(/* webpackChunkName: 'editor' */"./editor");
+});
+var PipelineFlowOrchestrator = /*#__PURE__*/function (_Component) {
+  function PipelineFlowOrchestrator(_props) {
+    var _this;
+    _this = _Component.call(this, _props) || this;
+    _this.onAutoOpen = function () {
+      var sourceOpen = tools.getUrlSearchParam.call(tools, 'source');
+      var createHelperOpen = tools.getUrlSearchParam.call(tools, 'createHelper');
+      if (timers.autoSourceOpenTimer) clearTimeout(timers.autoSourceOpenTimer);
+      if (timers.autoCreateHelperOpenTimer) clearTimeout(timers.autoCreateHelperOpenTimer);
+      if (sourceOpen === 'open' && (!getFeature('create.pipeline.helper') || createHelperOpen !== 'open')) {
+        timers.autoSourceOpenTimer = setTimeout(function () {
+          var jobMenuVisible = _this.state.jobMenuVisible;
+          !jobMenuVisible && _this.onSourcesOpen();
+        }, 700);
+        return;
+      }
+      if (createHelperOpen === 'open') {
+        timers.autoCreateHelperOpenTimer = setTimeout(function () {
+          _this.setState({
+            configurationVisible: true
+          });
+        }, 600);
+      }
+    };
+    _this.initBranchInfo = function (props) {
+      var sourceArr = JSON.parse(props.sources || '[]');
+      var index = sourceArr.findIndex(function (_ref) {
+        var _ref$data = _ref.data,
+          data = _ref$data === void 0 ? {} : _ref$data;
+        return data.isBranchMode;
+      });
+      if (index === -1) {
+        return {};
+      }
+      return {
+        index: index,
+        isBranchMode: true
+      };
+    };
+    _this.getStepInfo = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var useCache, _ref3, list, appstacks;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            useCache = !_this.state.stepList.length;
+            _context.next = 3;
+            return fetchSteps();
+          case 3:
+            _context.t0 = _context.sent;
+            if (_context.t0) {
+              _context.next = 6;
+              break;
+            }
+            _context.t0 = {};
+          case 6:
+            _ref3 = _context.t0;
+            list = _ref3.list;
+            // hack appstack
+            if (window.__isEmbedInAppstack && window.__appstackAppName) {
+              appstacks = list.filter(function (v) {
+                return isStepAppstackPresetAppname(v.stepType);
+              });
+              appstacks.forEach(function (aStep) {
+                var def = YAML.load(aStep.def);
+                var appName = def.items.find(function (item) {
+                  return item.name === 'APP_NAME';
+                });
+                appName.disableCondition = 'true == true';
+                aStep.def = YAML.dump(def);
+              });
+            }
+            if (useCache) {
+              _this.setState({
+                stepList: list
+              });
+            }
+            setLocalStorageCache(STEPS_CACHE_KEY, list);
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    _this.getSatgeTemplateList = function () {
+      exceed.fetch({
+        api: 'template.list.query',
+        data: {
+          templateType: 'stage',
+          env: env
+        }
+      }).then(function (_ref4) {
+        var successful = _ref4.successful,
+          _ref4$object = _ref4.object,
+          object = _ref4$object === void 0 ? {} : _ref4$object;
+        if (successful) {
+          _this.setState({
+            satgeTemplateList: object.dataList
+          });
+        }
+      });
+    };
+    _this.getComponentInfo = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref6, list;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return fetchComponents();
+          case 2:
+            _context2.t0 = _context2.sent;
+            if (_context2.t0) {
+              _context2.next = 5;
+              break;
+            }
+            _context2.t0 = {};
+          case 5:
+            _ref6 = _context2.t0;
+            list = _ref6.list;
+            _this.setState({
+              components: list
+            });
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    _this.getStageTemplateGroupList = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var _yield$fetchStageTemp, list, newList;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return fetchStageTemplate();
+          case 2:
+            _yield$fetchStageTemp = _context3.sent;
+            list = _yield$fetchStageTemp.list;
+            newList = [];
+            list.forEach(function (l) {
+              var enabledTemplate = filter(l.list, function (e) {
+                return !e.disable;
+              });
+              if (enabledTemplate.length > 0) {
+                l.list = enabledTemplate;
+                newList.unshift(l);
+              }
+            });
+            _this.setState({
+              stageTemplateGroupList: newList
+            });
+          case 7:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    _this.clearTimers = function () {
+      Object.keys(timers).forEach(function (k) {
+        return timers[k] && clearTimeout(timers[k]);
+      });
+    };
+    _this.onSourcesOpen = function (_temp, cb) {
+      var _ref8 = _temp === void 0 ? {} : _temp,
+        _ref8$closeJobMenu = _ref8.closeJobMenu,
+        closeJobMenu = _ref8$closeJobMenu === void 0 ? false : _ref8$closeJobMenu,
+        mode = _ref8.mode;
+      var _this$state = _this.state,
+        jobMenuVisible = _this$state.jobMenuVisible,
+        sourceVisible = _this$state.sourceVisible,
+        idx = _this$state.idx;
+      var open = function open() {
+        _this.setState({
+          sourceVisible: true
+        });
+      };
+
+      // // 编辑流程侧边栏已打开，先关闭编辑流程侧边栏， 在打开源侧边栏
+      if (closeJobMenu && jobMenuVisible) {
+        if (timers.delaySourceOpenTimer1) clearTimeout(timers.delaySourceOpenTimer1);
+        _this.setJobMenuVisible(false, function () {
+          timers.delaySourceOpenTimer1 = setTimeout(open, 700);
+        });
+        return;
+      }
+      // // 编辑源侧边栏已打开，点击添加源， 先关闭编辑源， 在打开添加源
+      if (mode === 'add' && sourceVisible && idx !== null) {
+        if (timers.delaySourceOpenTimer2) clearTimeout(timers.delaySourceOpenTimer2);
+        _this.onSourcesClose();
+        timers.delaySourceOpenTimer2 = setTimeout(open, 700);
+        return;
+      }
+      // 编辑源侧边栏已打开， 先关闭原来的再打开， 保证组件内部状态正确
+      if (sourceVisible && idx !== null) {
+        if (timers.delaySourceOpenTimer3) clearTimeout(timers.delaySourceOpenTimer3);
+        _this.onSourcesClose();
+        timers.delaySourceOpenTimer3 = setTimeout(open, 700);
+        return;
+      }
+      cb && cb();
+      open();
+    };
+    _this.onSourcesValidate = function () {
+      var _this2 = _this,
+        _this2$state = _this2.state,
+        sourceInvalidate = _this2$state.sourceInvalidate,
+        idx = _this2$state.idx,
+        sourceField = _this2.sourceField;
+      var c_sourceInvalidate = _extends({}, sourceInvalidate);
+      if (Number.isInteger(idx)) {
+        sourceField.validate(function (errs, param) {
+          c_sourceInvalidate[param.sign] = !!errs;
+        });
+      }
+      _this.setState({
+        sourceInvalidate: c_sourceInvalidate
+      });
+      return {
+        sourceInvalidate: c_sourceInvalidate
+      };
+    };
+    _this.onSourcesClose = function (validate) {
+      if (validate === void 0) {
+        validate = true;
+      }
+      validate && _this.onSourcesValidate();
+      _this.setState({
+        sourceVisible: false,
+        idx: null
+      }, function () {
+        _this.sourceField.reset();
+      });
+    };
+    _this.onOpenSourceMenu = function (source, idx) {
+      if (!source) return;
+      var _this$state2 = _this.state,
+        i_idx = _this$state2.idx,
+        sourceVisible = _this$state2.sourceVisible;
+      if (sourceVisible && idx === i_idx) return;
+      var saveSource = function saveSource() {
+        _this.setState({
+          idx: idx
+        });
+        _this.sourceField.reset();
+        _this.sourceField.setValues({
+          name: source.name,
+          type: source.type,
+          sign: source.sign
+        });
+        Object.entries(source.data).forEach(function (_ref9) {
+          var key = _ref9[0],
+            val = _ref9[1];
+          _this.sourceField.setValue(key, val);
+        });
+      };
+      if (_this.state.sourceVisible) {
+        _this.onSourcesOpen({
+          closeJobMenu: true
+        }, saveSource);
+        return;
+      }
+      saveSource();
+      _this.onSourcesOpen({
+        closeJobMenu: true
+      });
+    };
+    _this.onBranchModeChange = function (isBranchMode, index) {
+      var _this$state3 = _this.state,
+        stageTemplateGroupList = _this$state3.stageTemplateGroupList,
+        components = _this$state3.components,
+        stepList = _this$state3.stepList;
+      var nextFlow = YAML.load(_this.props.flow).pipeline;
+      timers.changeFlowTimer && clearTimeout(timers.changeFlowTimer);
+      var _get = get(nextFlow, '[0]', {}),
+        mode = _get.mode,
+        single = _get.single;
+      var change = false;
+      if (isBranchMode && mode !== 'branch' && !single) {
+        var _ref10 = stageTemplateGroupList.find(function (_ref11) {
+            var group = _ref11.group;
+            return group === 'code';
+          }).list.find(function (_ref12) {
+            var s = _ref12.sign;
+            return s === 'BRANCH_MANAGER';
+          }) || {},
+          content = _ref10.content;
+        if (!content) {
+          Message.error({
+            title: intl.get({
+              //   id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.Failed',
+              //   defaultMessage: '失败',
+              // }),
+              // content: intl.get({
+              id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.FailedToEnableBranchMode',
+              defaultMessage: '开启分支模式失败，请刷新重试，如无法解决请联系管理员'
+            })
+          });
+        }
+        var job = buildJob(content, components, stepList);
+        nextFlow.unshift({
+          single: true,
+          mode: 'branch',
+          name: intl.get({
+            id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.BranchIntegration',
+            defaultMessage: '分支集成'
+          }),
+          stages: [{
+            driven: 'AUTO',
+            jobs: [job]
+          }]
+        });
+        change = true;
+      }
+      if (!isBranchMode && single && mode === 'branch') {
+        nextFlow.splice(0, 1);
+        change = true;
+      }
+      if (!change) {
+        return;
+      }
+      console.log('change branch mode');
+      var cb = function cb() {
+        _this.setState({
+          openBranchInfo: {
+            index: index,
+            isBranchMode: isBranchMode
+          }
+        });
+        _this.props.onPipelineChange(YAML.safeDump({
+          schema: 'tb',
+          pipeline: nextFlow
+        }), nextFlow, false);
+      };
+      // 延迟避免卡顿， 待添加源主线程走完在进行change flow
+      timers.changeFlowTimer = setTimeout(cb, 350);
+    };
+    _this.onSaveSource = function () {
+      _this.sourceField.validate(function (errors, values) {
+        if (!errors) {
+          var _ref13 = _this.props || {},
+            sources = _ref13.sources,
+            onSourcesChange = _ref13.onSourcesChange;
+          var idx = _this.state.idx;
+          var sign = values.sign,
+            type = values.type,
+            name = values.name,
+            isBranchMode = values.isBranchMode,
+            repo = values.repo,
+            data = _objectWithoutPropertiesLoose(values, _excluded);
+          var matches = (repo === null || repo === void 0 ? void 0 : repo.match(/[:/]([^/]+\/[^/]+)\.git/)) || [];
+          var label = "" + (matches[1] || '');
+          var source = {
+            sign: sign || name,
+            label: label || name,
+            type: type,
+            name: name,
+            data: _extends({}, data, {
+              isBranchMode: isBranchMode,
+              repo: repo
+            })
+          };
+          var sourceArr = JSON.parse(sources || '[]');
+          if (Number.isInteger(idx)) {
+            sourceArr[idx] = source;
+          } else {
+            sourceArr.push(source);
+          }
+          isBranchMode && _this.onBranchModeChange(true, sourceArr.length - 1);
+          onSourcesChange(JSON.stringify(sourceArr));
+          _this.onSourcesClose();
+          track({
+            action: 'select pipeline source continue',
+            page: _this.props.trackPage || 'edit page',
+            daysinceenterflow: intervalEnterTime()
+          });
+        } else {
+          console.error('sourceField validate failed: ', errors);
+        }
+      });
+    };
+    _this.onUpdateSource = function (key) {
+      console.log('onUpdateSource', key);
+      var _this3 = _this,
+        idx = _this3.state.idx,
+        _this3$props = _this3.props,
+        _this3$props2 = _this3$props === void 0 ? {} : _this3$props,
+        sources = _this3$props2.sources,
+        onSourcesChange = _this3$props2.onSourcesChange,
+        sourceField = _this3.sourceField;
+      if (!Number.isInteger(idx)) return;
+      var sourceArr = JSON.parse(sources || '[]');
+      var _sourceField$getValue = sourceField.getValues(),
+        sign = _sourceField$getValue.sign,
+        type = _sourceField$getValue.type,
+        name = _sourceField$getValue.name,
+        isBranchMode = _sourceField$getValue.isBranchMode,
+        repo = _sourceField$getValue.repo,
+        data = _objectWithoutPropertiesLoose(_sourceField$getValue, _excluded2);
+      var matches = (repo === null || repo === void 0 ? void 0 : repo.match(/[:/]([^/]+\/[^/]+)\.git/)) || [];
+      var label = "" + (matches[1] || '');
+      var source = {
+        sign: sign || name,
+        label: label || name,
+        type: type,
+        name: name,
+        data: _extends({}, data, {
+          isBranchMode: isBranchMode,
+          repo: repo
+        })
+      };
+      set(sourceArr, "[" + idx + "]", source);
+      key === 'isBranchMode' && _this.onBranchModeChange(isBranchMode, idx);
+      onSourcesChange(JSON.stringify(sourceArr), false);
+    };
+    _this.onDeleteSource = function () {
+      var onOk = function onOk() {
+        var _ref14 = _this.props || {},
+          sources = _ref14.sources,
+          onSourcesChange = _ref14.onSourcesChange;
+        var _this$state4 = _this.state,
+          idx = _this$state4.idx,
+          sourceInvalidate = _this$state4.sourceInvalidate;
+        var sourceArr = JSON.parse(sources || '[]');
+        if (Number.isInteger(idx)) {
+          var i_sourceInvalidate = _extends({}, sourceInvalidate);
+          delete i_sourceInvalidate[(sourceArr[idx] || {}).sign];
+          _this.setState({
+            sourceInvalidate: i_sourceInvalidate
+          });
+          if (get(sourceArr, idx + ".data.isBranchMode", false)) {
+            _this.onBranchModeChange(false, idx);
+          }
+          sourceArr.splice(idx, 1);
+          onSourcesChange(JSON.stringify(sourceArr));
+        }
+        _this.onSourcesClose(false);
+      };
+      Dialog.alert({
+        messageProps: {
+          type: 'error'
+        },
+        animation: {
+          "in": 'expandInDown',
+          out: 'expandOutUp'
+        },
+        title: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.AreYouSureYouWant',
+          defaultMessage: '确认删除当前源吗？'
+        }),
+        content: intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.TheCodeWillNotBe',
+          defaultMessage: '删除后将不会从当前源下载代码'
+        }),
+        onOk: onOk
+      });
+    };
+    _this.setJobMenuVisible = function (v, cb) {
+      if (cb === void 0) {
+        cb = function cb() {};
+      }
+      var _this$state5 = _this.state,
+        jobMenuVisible = _this$state5.jobMenuVisible,
+        sourceVisible = _this$state5.sourceVisible;
+      if (timers.jobMenuVisibleTimer) clearTimeout(timers.jobMenuVisibleTimer);
+
+      // 编辑源侧边栏打开的情况， 先关闭编辑源侧边栏
+      if (!jobMenuVisible && sourceVisible && v) {
+        _this.onSourcesClose();
+        timers.jobMenuVisibleTimer = setTimeout(function () {
+          _this.setState({
+            jobMenuVisible: v
+          }, cb);
+        }, 700);
+        return;
+      }
+      _this.setState({
+        jobMenuVisible: v
+      }, cb);
+    };
+    _this.setDraftJobContext = function (v) {
+      _this.setState({
+        draftJobContext: v
+      });
+    };
+    _this.setComponentMenuVisible = function (v) {
+      var _this$state6 = _this.state,
+        componentMenuVisible = _this$state6.componentMenuVisible,
+        sourceVisible = _this$state6.sourceVisible;
+      if (timers.menuVisibleTimer) clearTimeout(timers.menuVisibleTimer);
+
+      // 源编辑侧边栏打开的情况， 先关闭源测边栏
+      if (!componentMenuVisible && sourceVisible) {
+        _this.onSourcesClose();
+        timers.menuVisibleTimer = setTimeout(function () {
+          _this.setState({
+            componentMenuVisible: v
+          });
+        }, 700);
+        return;
+      }
+      _this.setState({
+        componentMenuVisible: v
+      });
+    };
+    _this.openFlowEditMenu = function (el, c) {
+      _this.flow && _this.flow.openFlowEditMenu(el, c);
+    };
+    _this.onPipelineConfigurationClose = function (language) {
+      _this.setState({
+        configurationVisible: false
+      });
+      var sourceOpen = tools.getUrlSearchParam('source');
+      if (sourceOpen === 'open') {
+        var clock = setTimeout(function () {
+          _this.onSourcesOpen();
+          clearTimeout(clock);
+        }, 500);
+        tools.removeUrlSearchParam(['createHelper']);
+        if (language) {
+          tools.setUrlSearchPaeam({
+            language: language
+          });
+          _this.setState({
+            language: language
+          });
+          _this.sourceField.setValue('language', language);
+        }
+      }
+    };
+    _this.onPipelineConfigurationChange = function (groupContentArr, language) {
+      var _this$state7 = _this.state,
+        satgeTemplateList = _this$state7.satgeTemplateList,
+        stepList = _this$state7.stepList,
+        components = _this$state7.components;
+      if (!groupContentArr.length) return;
+      var piprline = pipelineTools.buildPipeline(groupContentArr, satgeTemplateList, stepList, components);
+      _this.props.onUpdatePipeline && piprline.length && _this.props.onUpdatePipeline(piprline);
+      _this.onPipelineConfigurationClose(language);
+    };
+    var _language = tools.getUrlSearchParam.call(tools, 'language');
+    _this.sourceField = new Field(_this, {
+      onChange: function onChange(key) {
+        setTimeout(function () {
+          _this.onUpdateSource(key);
+        }, 0);
+      },
+      values: {
+        language: _language || 'java'
+      }
+    });
+    window.__debug_sourceField = _this.sourceField;
+    var sourceTpl = tools.getUrlSearchParam.call(tools, 'sourceTpl');
+    var cacheSteps = getLocalStorageCache(STEPS_CACHE_KEY, false);
+    _this.state = {
+      sourceVisible: false,
+      idx: null,
+      language: _language,
+      sourceTpl: sourceTpl,
+      jobMenuVisible: false,
+      componentMenuVisible: false,
+      draftJobContext: undefined,
+      sourceInvalidate: {},
+      components: [],
+      stepList: JSON.parse(cacheSteps || '[]'),
+      stageTemplateGroupList: [],
+      openBranchInfo: _this.initBranchInfo(_props),
+      configurationVisible: false,
+      satgeTemplateList: []
+      // yamlCache: props.flow,
+    };
+    return _this;
+  }
+  _inheritsLoose(PipelineFlowOrchestrator, _Component);
+  var _proto = PipelineFlowOrchestrator.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.onAutoOpen();
+    this.getStepInfo();
+    this.getComponentInfo();
+    this.getStageTemplateGroupList();
+    this.getSatgeTemplateList();
+  }
+
+  // codeup自动添加代码源后展开代码源信息
+  ;
+  _proto.componentDidUpdate = function componentDidUpdate() {
+    var _this4 = this;
+    var sources = this.props.sources;
+    var source = JSON.parse(sources || '[]');
+    var codeSource = tools.getUrlSearchParam('codeSource');
+    var opened = tools.getUrlSearchParam('opened');
+    if (codeSource === 'filled' && opened !== 'true' && source.length === 1) {
+      history.pushState({}, '', tools.appendUrlParam(location.search, {
+        opened: true
+      }));
+      var timer = setTimeout(function () {
+        _this4.onOpenSourceMenu(source[0], 0);
+        clearTimeout(timer);
+      }, 500);
+    }
+  };
+  _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
+    if (nextProps === this.props && nextState === this.state) {
+      console.log('shouldNotComponentUpdate');
+      return false;
+    }
+    return true;
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.clearTimers();
+  };
+  _proto.render = function render() {
+    var _this5 = this;
+    var _this$state8 = this.state,
+      sourceVisible = _this$state8.sourceVisible,
+      language = _this$state8.language,
+      sourceTpl = _this$state8.sourceTpl,
+      jobMenuVisible = _this$state8.jobMenuVisible,
+      draftJobContext = _this$state8.draftJobContext,
+      componentMenuVisible = _this$state8.componentMenuVisible,
+      components = _this$state8.components,
+      stepList = _this$state8.stepList,
+      stageTemplateGroupList = _this$state8.stageTemplateGroupList,
+      openBranchInfo = _this$state8.openBranchInfo,
+      idx = _this$state8.idx,
+      configurationVisible = _this$state8.configurationVisible;
+    var _this$props = this.props,
+      mode = _this$props.mode,
+      sources = _this$props.sources,
+      yaml = _this$props.flow,
+      invalidateTasks = _this$props.invalidateTasks,
+      field = _this$props.field,
+      onErrors = _this$props.onErrors,
+      onPipelineChange = _this$props.onPipelineChange,
+      pipelineId = _this$props.pipelineId,
+      webhook = _this$props.webhook,
+      display = _this$props.display;
+    var loading = !yaml;
+    if (loading) {
+      return /*#__PURE__*/React.createElement(Loading, {
+        visible: loading,
+        inline: false
+      });
+    }
+    var sourceArr = JSON.parse(sources || '[]');
+
+    // if (pipelineType === 'PIPELINEASCODE') {
+    //   return (
+    //     <Suspense fallback={<Loading inline={false} style={{ height: `${300}px` }} />}>
+    //       <Loading className={`${PREFIX}__editor`} visible={loading} inline={false}>
+    //         <MonacoEditor
+    //           language="yaml"
+    //           className={`${PREFIX}__editor--full`}
+    //           mode="yaml"
+    //           value={this.state.yamlCache}
+    //           theme="vs-light"
+    //           options={{
+    //             renderSideBySide: false,
+    //             selectOnLineNumbers: true,
+    //             minimap: { enabled: false },
+    //             fontSize: 14,
+    //           }
+    //         }
+    //           onChange={(val) => {
+    //             this.setState({ yamlCache: val });
+    //             onPipelineChange(val, [{}], false);
+    //           }}
+    //         />
+    //       </Loading>
+    //     </Suspense>
+
+    //   );
+    // }
+    var flowObj = YAML.load(yaml);
+    var flow = !flowObj.schema || flowObj.schema !== 'tb' ? transform(flowObj) : flowObj;
+    if (mode === YAML_MODE) {
+      return /*#__PURE__*/React.createElement(Suspense, {
+        fallback: /*#__PURE__*/React.createElement(Loading, {
+          inline: false,
+          style: {
+            height: 300 + "px"
+          }
+        })
+      }, /*#__PURE__*/React.createElement(Loading, {
+        className: PREFIX + "__editor",
+        visible: loading,
+        inline: false
+      }, /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__editor--left"
+      }, /*#__PURE__*/React.createElement(MonacoEditor, {
+        language: "json",
+        value: JSON.stringify(sourceArr, null, 2),
+        theme: "vs-light",
+        options: {
+          renderSideBySide: false,
+          selectOnLineNumbers: true,
+          minimap: {
+            enabled: false
+          }
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: PREFIX + "__editor--right"
+      }, /*#__PURE__*/React.createElement(MonacoEditor, {
+        language: "yaml",
+        value: yaml,
+        theme: "vs-light",
+        options: {
+          renderSideBySide: false,
+          selectOnLineNumbers: true,
+          minimap: {
+            enabled: false
+          }
+        }
+      }))));
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      ref: function ref(_ref16) {
+        _this5.flowWrapRef = _ref16;
+      },
+      className: cls(PREFIX, {
+        editing: jobMenuVisible,
+        addtask: draftJobContext
+      }),
+      style: display ? {} : {
+        display: 'none'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__sidebar"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__sidebar__header"
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.Source',
+      defaultMessage: '流水线源'
+    })), /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__sidebar__source"
+    }, this.sourcesElement), /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__sidebar__source--empty",
+      onClick: function onClick() {
+        return _this5.onSourcesOpen({
+          closeJobMenu: true,
+          mode: 'add'
+        });
+      }
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "add-line"
+    }), intl.get({
+      id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.AddCodeSource',
+      defaultMessage: '添加流水线源'
+    })), /*#__PURE__*/React.createElement(PipelineSource, {
+      idx: idx,
+      update: Number.isInteger(idx),
+      field: this.sourceField,
+      sources: sources,
+      onChange: function onChange() {
+        return _this5.onUpdateSource();
+      },
+      webhookKey: webhook,
+      language: language,
+      sourceTpl: sourceTpl,
+      onClose: this.onSourcesClose,
+      visible: sourceVisible,
+      onOk: this.onSaveSource,
+      onDelete: this.onDeleteSource,
+      openBranchInfo: openBranchInfo,
+      pipelineId: pipelineId,
+      appstackChangeConfig: this.props.appstackChangeConfig
+    })), /*#__PURE__*/React.createElement("div", {
+      className: PREFIX + "__content"
+    }, /*#__PURE__*/React.createElement(Flow, {
+      editable: true,
+      flowWrapRef: this.flowWrapRef,
+      components: components,
+      stepList: stepList,
+      ref: function ref(_ref15) {
+        _this5.flow = _ref15;
+      },
+      pipelineId: pipelineId,
+      flow: flow && flow.pipeline,
+      sources: sourceArr,
+      field: field,
+      invalidateTasks: invalidateTasks,
+      onErrors: onErrors,
+      subscribe: this.props.subscribe,
+      trackPage: this.props.trackPage,
+      onCliseSource: this.onSourcesClose,
+      jobMenuVisible: jobMenuVisible,
+      componentMenuVisible: componentMenuVisible,
+      setJobMenuVisible: this.setJobMenuVisible,
+      setComponentMenuVisible: this.setComponentMenuVisible,
+      draftJobContext: draftJobContext,
+      setDraftJobContext: this.setDraftJobContext,
+      stageTemplateGroupList: stageTemplateGroupList,
+      sourceVisible: sourceVisible,
+      onFlowChange: function onFlowChange(value) {
+        console.time('dump');
+        var yaml = YAML.safeDump({
+          schema: 'tb',
+          pipeline: value
+        });
+        console.timeEnd('dump');
+        onPipelineChange(yaml, value);
+      }
+    })), window.AK_GLOBAL.alreadyRunPipeline === 'false' && !location.pathname.includes('/template') && /*#__PURE__*/React.createElement(GuideHint, {
+      selfOps: true,
+      desc: intl.get({
+        id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.ClickRunPipeline',
+        defaultMessage: '点击运行流水线'
+      }),
+      arrowsAlign: "r",
+      imgSrc: "https://gw.alicdn.com/imgextra/i2/O1CN01jjuHdq1nys7pViQvq_!!6000000005159-55-tps-400-400.svg",
+      style: {
+        top: 61,
+        right: 50,
+        justifyContent: 'flex-start'
+      }
+    }), configurationVisible && /*#__PURE__*/React.createElement(PipelineConfiguration, {
+      visible: configurationVisible,
+      onClose: this.onPipelineConfigurationClose,
+      onChange: this.onPipelineConfigurationChange
+    }));
+  };
+  return _createClass(PipelineFlowOrchestrator, [{
+    key: "sourcesElement",
+    get: function get() {
+      var _this6 = this,
+        _this$props$appstackC,
+        _this$props$appstackC2;
+      var _this$props2 = this.props,
+        _this$props3 = _this$props2 === void 0 ? {} : _this$props2,
+        sources = _this$props3.sources,
+        sourceInvalidate = this.state.sourceInvalidate;
+      var sourceArr = JSON.parse(sources || '[]');
+      var sourceElements = sourceArr.map(function (item, index) {
+        var _item$data, _item$data2;
+        var type = item.type,
+          data = item.data,
+          name = item.name,
+          sign = item.sign;
+        var _ref17 = data || {},
+          repo = _ref17.repo,
+          s_webhook = _ref17.webhook,
+          branch = _ref17.branch,
+          isBranchMode = _ref17.isBranchMode,
+          trigger = _ref17.trigger,
+          s_name = _ref17.pipelineName,
+          artifactSourceRepoName = _ref17.repoName,
+          artifactName = _ref17.artifactName;
+        var matchResult = (repo || '').match(/[:/]([^/]+\/[^/]+)\.git/);
+        var showRepo = decodeURI(matchResult ? matchResult[1] : data.repo);
+        var invalidate = sourceInvalidate[sign];
+        var className = cls(PREFIX + "__sidebar__source__item", {
+          error: invalidate
+        });
+        var category = getCategoryFromType(type);
+        return /*#__PURE__*/React.createElement("div", {
+          key: name + "_" + type,
+          className: className,
+          onClick: function onClick() {
+            return _this6.onOpenSourceMenu(item, index);
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__sidebar__source__item__card"
+        }, /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__sidebar__source__item__card--left"
+        }, /*#__PURE__*/React.createElement(Image, {
+          type: sourceIconMap[type] ? sourceIconMap[type] : sourceIconMap.aliyunGit
+        })), /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__sidebar__source__item__card--center " + (s_name ? 'disable_bid' : '') + " " + cls(category === ARTIFACT_SOURCE && 'disable_bid')
+        }, category !== ARTIFACT_SOURCE && title((showRepo || '').split('').reverse().join(''), decodeURI(repo), s_name), category === ARTIFACT_SOURCE && /*#__PURE__*/React.createElement(Title, {
+          trigger: artifactName ? artifactSourceRepoName + "/" + artifactName : artifactSourceRepoName,
+          align: "t"
+        }, artifactName ? artifactSourceRepoName + "/" + artifactName : artifactSourceRepoName)), /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__sidebar__source__item__card--right"
+        }, ((_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.createdBy) === 'AppStack' && /*#__PURE__*/React.createElement(Tag, {
+          color: 'prompt',
+          style: {
+            borderRadius: 99,
+            marginRight: 8
+          }
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.ApplicationCodeLibrary',
+          defaultMessage: '应用代码库'
+        })), ((_item$data2 = item.data) === null || _item$data2 === void 0 ? void 0 : _item$data2.createdBy) === 'AppStackOrchestration' && /*#__PURE__*/React.createElement(Tag, {
+          color: 'prompt',
+          style: {
+            borderRadius: 99,
+            marginRight: 8
+          }
+        }, intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.OrchestrationCodeBase',
+          defaultMessage: '编排代码库'
+        })), (s_webhook || trigger) && /*#__PURE__*/React.createElement("div", {
+          className: "webhook"
+        }, tooltip(/*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "speedup-line"
+        }), intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.Trigger',
+          defaultMessage: '触发'
+        }))), isBranchMode && /*#__PURE__*/React.createElement("div", {
+          className: "branch-mode"
+        }, tooltip(/*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "branch-2-line"
+        }), intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.BranchMode',
+          defaultMessage: '分支模式'
+        }))), invalidate && /*#__PURE__*/React.createElement("div", {
+          className: "error"
+        }, tooltip(/*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "info-fill"
+        }), intl.get({
+          id: 'rdc-tb-cd-assets.teambition.pipeline-flow-orchestrator.TheCodeSourceIsConfigured',
+          defaultMessage: '代码源为配置完'
+        }))))), /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__sidebar__source__item__branch",
+          style: isBranchMode ? {
+            opacity: 0
+          } : {}
+        }, !isBranchMode && title(/*#__PURE__*/React.createElement(React.Fragment, null, getSourceToolIcon(type), function () {
+          if (type === ArtifactSourceTypes.packages) {
+            var _item$data3;
+            return (item === null || item === void 0 ? void 0 : (_item$data3 = item.data) === null || _item$data3 === void 0 ? void 0 : _item$data3.versionName) || '--';
+          }
+          if (type === ArtifactSourceTypes.acr) {
+            var _item$data4;
+            return (item === null || item === void 0 ? void 0 : (_item$data4 = item.data) === null || _item$data4 === void 0 ? void 0 : _item$data4.version) || '--';
+          }
+          return branch || '--';
+        }()))), /*#__PURE__*/React.createElement("div", {
+          className: PREFIX + "__sidebar__source__item__workspace"
+        }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+          type: "folder-line"
+        }), title(name || '--')));
+      });
+      var appstack_无应用代码库 = sourceArr.every(function (item) {
+        var _item$data5;
+        return ((_item$data5 = item.data) === null || _item$data5 === void 0 ? void 0 : _item$data5.createdBy) !== 'AppStack';
+      });
+      return /*#__PURE__*/React.createElement(React.Fragment, null, window.__isEmbedInAppstack && appstack_无应用代码库 && ((_this$props$appstackC = this.props.appstackChangeConfig) === null || _this$props$appstackC === void 0 ? void 0 : _this$props$appstackC.sourcesEmptyContent) && /*#__PURE__*/React.createElement("div", {
+        style: {
+          lineHeight: '18px',
+          textAlign: 'center',
+          marginBottom: 32
+        }
+      }, (_this$props$appstackC2 = this.props.appstackChangeConfig) === null || _this$props$appstackC2 === void 0 ? void 0 : _this$props$appstackC2.sourcesEmptyContent), sourceElements);
+    }
+  }]);
+}(Component);
+export default PipelineFlowOrchestrator;