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

package/es/components/dashboardMain/index.js

@@ -0,0 +1,688 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState, useContext, useCallback } from 'react';
+import { Router, Redirect } from '@reach/router';
+import { navigateWithContexPath } from "../../utils/route-utils";
+import EnterpriseSetting from "./enterprise-setting";
+import EnterprisePrice from "./enterprise-price";
+import { Context } from "../../contexts/pipeline";
+import { getLocalStorageCache, setLocalStorageCache, getFeature } from "../../utils";
+import PipelineOperationPanel from "./components/operation-panel";
+import { Tab, Button, Overlay, Select, Message, Balloon, Box } from '@teamix/ui';
+import { routerConfig } from "./config.json";
+import PipelineNotFonud from "./components/pipeline-not-fonud";
+import OperationPanel from "../common/teambition/operation-panel";
+import exceed from "../../utils/apimap";
+import cx from 'classnames';
+import Pipelines from "./pipelines";
+import { debounce, get } from 'lodash-es';
+import allSettled from 'promise.allsettled';
+import HomeNewVersionGuidance from "../homeNewVersionGuidance";
+import intl from "../../locale";
+import { Layout, Header, Body, BodyContent, OperationBar, YunxiaoIcon, ButtonIcon, Title } from '@alife/devops-ui';
+import "./index.scss";
+import { flowServiceRoot } from "../../utils/contextPathUtil";
+var Item = Tab.Item;
+var Popup = Overlay.Popup;
+var PIPELINE_SEARCH_PARAMS = 'pipeline-search-params';
+var PIPELINE_VIEW_MODE = 'pipeline-view-mode';
+var PIPELINE_PAGE_SORT = 'pipeline-page-sort';
+var PIPELINE_SEARCH_NAME = 'pipeline-search-name';
+var PERMISSION_PIPELINE_CREATE = 'tb.role.pipeline.create';
+var PERMISSION_PIPELINE_GROUP_ADMIN = 'tb.role.pipelineGroup.admin';
+var orgId = window.userInfos.orgId;
+var getHomePage = function getHomePage() {
+  return localStorage.getItem("homePage/flow/" + orgId) || '/my';
+};
+var TBDashboardMain = function TBDashboardMain() {
+  var _useContext = useContext(Context),
+    pipelineStarGroupsLoading = _useContext.pipelineStarGroupsLoading,
+    _useContext$pipelineS = _useContext.pipelineStarGroups,
+    pipelineStarGroups = _useContext$pipelineS === void 0 ? [] : _useContext$pipelineS,
+    pipelineTabActiveNav = _useContext.pipelineTabActiveNav,
+    newVersionVisible = _useContext.newVersionVisible,
+    sidebarActiveNav = _useContext.sidebarActiveNav,
+    _useContext$pipelineG = _useContext.pipelineGroups,
+    pipelineGroups = _useContext$pipelineG === void 0 ? [] : _useContext$pipelineG,
+    tabPanelHeight = _useContext.tabPanelHeight,
+    tagGroupList = _useContext.tagGroupList,
+    _useContext$permissio = _useContext.permissions,
+    permissions = _useContext$permissio === void 0 ? [] : _useContext$permissio,
+    loading = _useContext.loading,
+    groupId = _useContext.groupId,
+    actions = _useContext.actions;
+  var defaultSearchParams = getLocalStorageCache(PIPELINE_SEARCH_PARAMS + "/" + orgId) || {};
+  var _useState = useState(defaultSearchParams),
+    searchParams = _useState[0],
+    setSearchParams = _useState[1];
+  var _useState2 = useState(false),
+    contentLoading = _useState2[0],
+    setContentLoading = _useState2[1];
+  var _useState3 = useState(getLocalStorageCache(PIPELINE_PAGE_SORT + "/" + orgId) || 'ID'),
+    pageSort = _useState3[0],
+    setPageSort = _useState3[1];
+  var _useState4 = useState(getLocalStorageCache(PIPELINE_VIEW_MODE + "/" + orgId) || 'table'),
+    viewMode = _useState4[0],
+    setViewMode = _useState4[1];
+  var _useState5 = useState(getLocalStorageCache(PIPELINE_SEARCH_NAME + "/" + orgId) || ''),
+    searchPipelineName = _useState5[0],
+    setSearchPipelineName = _useState5[1];
+  var _useState6 = useState({}),
+    refreshFalg = _useState6[0],
+    setRefreshFalg = _useState6[1];
+  var _useState7 = useState([]),
+    starGroupIds = _useState7[0],
+    setStarGroupIds = _useState7[1];
+  var _useState8 = useState(false),
+    starGroupLoading = _useState8[0],
+    setStarGroupLoading = _useState8[1];
+  var _useState9 = useState(false),
+    batchStarGroupVisible = _useState9[0],
+    setBatchStarGroupVisible = _useState9[1];
+  var _useState10 = useState(false),
+    batchStarGroupSelectVisible = _useState10[0],
+    setBatchStarGroupSelectVisible = _useState10[1];
+  var _useState11 = useState(false),
+    createPermission = _useState11[0],
+    setCreatePermission = _useState11[1];
+  var _useState12 = useState([]),
+    systemTabs = _useState12[0],
+    setSystemTabs = _useState12[1];
+  var _useState13 = useState(true),
+    loadingTypes = _useState13[0],
+    setLoadingTypes = _useState13[1];
+  var _useState14 = useState(true),
+    hasPipelines = _useState14[0],
+    setHasPipelines = _useState14[1];
+  var currentGroupInfo = function currentGroupInfo() {
+    return (pipelineGroups || []).find(function (_ref) {
+      var id = _ref.id;
+      return String(id) === String(groupId);
+    });
+  };
+  useEffect(function () {
+    document.body.classList.remove('inline');
+    document.body.classList.add('dash');
+    window.TB_NAVIGATION && window.TB_NAVIGATION.ready(function () {
+      window.TB_NAVIGATION.setHomePageFlag(true);
+      // 打开导航阴影
+      window.TB_NAVIGATION.showLayoutShadow();
+    });
+    getSystemTabs();
+  }, []);
+  var getSystemTabs = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var object, _yield$exceed$fetch, _object, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setContentLoading(true);
+            object = [];
+            _context.next = 4;
+            return exceed.fetch({
+              api: 'Pipeline.get.system.list',
+              data: {
+                showEnv: window.AK_GLOBAL.env || 'PRODUCTION'
+              }
+            });
+          case 4:
+            _yield$exceed$fetch = _context.sent;
+            _object = _yield$exceed$fetch.object;
+            object = _object;
+            data = (object || []).filter(function (item) {
+              // 动态数据做静态处理。。。
+              if (item.code === 'codescan') {
+                return getFeature('systemPipeline.coudeup.show');
+              } else if (item.code === 'appDeployment') {
+                return getFeature('systemPipeline.appStack.show');
+              }
+              return true;
+            }).map(function (val) {
+              return {
+                title: "rdc-tb-cd-assets.components.dashboardNav." + val.code,
+                defaultTitle: val.name,
+                path: "/system/" + val.code + "/*",
+                api: 'Pipeline.query.by.region',
+                type: "system/" + val.code,
+                tab: true,
+                pipelineSystemType: val.code
+              };
+            });
+            setSystemTabs(data);
+            setLoadingTypes(false);
+          case 10:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getSystemTabs() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    var pathname = (location.origin + location.pathname).replace(flowServiceRoot, '');
+    if (pathname.includes('/system') && pathname.split('/').length === 2 && systemTabs.length > 0) {
+      navigateWithContexPath("/" + systemTabs[0].type);
+      actions.setPipelineTabActiveNav(systemTabs[0].type);
+    } else if (pathname.includes('/system') && pathname.split('/').length === 3) {
+      actions.setPipelineTabActiveNav(pathname.slice(1));
+    }
+  }, [location.pathname, systemTabs]);
+  useEffect(function () {
+    var groupInfo = currentGroupInfo();
+    if (groupInfo && groupInfo.id && String(groupInfo.id) !== '0' && (!groupInfo.creatorUserVo || !groupInfo.creatorUserVo.id)) {
+      exceed.fetch({
+        api: 'Pipeline.get.single.group',
+        params: {
+          id: groupInfo.id
+        }
+      }).then(function (_ref3) {
+        var successful = _ref3.successful,
+          object = _ref3.object;
+        if (successful) {
+          groupInfo.creatorUserVo = get(object, 'creatorUserVo', {});
+          groupInfo.appRoleName = get(object, 'appRoleName', null);
+          setCreatePermission(getCreatePermission());
+        }
+      });
+    } else {
+      setCreatePermission(getCreatePermission());
+    }
+  }, [groupId, pipelineGroups, permissions]);
+  var composeTargetUrl = function composeTargetUrl() {
+    var pathnameArr = (location.origin + location.pathname).replace(flowServiceRoot, '').split('/');
+    var homePage = getHomePage();
+    var url;
+    if (groupId && ['star', 'my'].includes(pipelineTabActiveNav)) {
+      url = (pathnameArr.some(function (i) {
+        return ['all', 'my', 'star'].includes(i);
+      }) ? homePage : '') + "/groups/" + groupId;
+    }
+    if (homePage && !url) {
+      url = homePage;
+    }
+    return url;
+  };
+  var onChangeNav = function onChangeNav(key) {
+    actions.setLoading(true);
+    actions.setPipelineTabActiveNav(key);
+    if (['star', 'my'].includes(key) || key.startsWith('system')) {
+      actions.setGroupId('');
+      navigateWithContexPath("/" + key);
+    } else {
+      actions.setGroupId(key);
+      navigateWithContexPath("/my/groups/" + key);
+    }
+  };
+  var onChangeSearchParams = function onChangeSearchParams(param) {
+    if (param === void 0) {
+      param = {};
+    }
+    setSearchParams(param);
+    setContentLoading(true);
+    setLocalStorageCache(PIPELINE_SEARCH_PARAMS + "/" + orgId, param);
+  };
+  var setPipelineName = function setPipelineName(v) {
+    setContentLoading(true);
+    setSearchPipelineName(v);
+    setLocalStorageCache(PIPELINE_SEARCH_NAME + "/" + orgId, v);
+    setRefreshFalg({
+      name: v
+    });
+  };
+  var onSort = function onSort(v, l) {
+    if (l === void 0) {
+      l = true;
+    }
+    setPageSort(v);
+    l && setContentLoading(true);
+    setLocalStorageCache(PIPELINE_PAGE_SORT + "/" + orgId, v);
+  };
+  var onReset = function onReset(type) {
+    if (type === void 0) {
+      type = 'all';
+    }
+    if (type === 'searchParams') {
+      onChangeSearchParams({});
+      return;
+    }
+    if (type === '' || type === undefined || type === 'all') {
+      onChangeSearchParams({});
+      setSearchPipelineName('');
+      setRefreshFalg({
+        name: ''
+      });
+      setLocalStorageCache(PIPELINE_SEARCH_NAME + "/" + orgId, '');
+      onSort('ID', false);
+    }
+  };
+  var getCreatePermission = function getCreatePermission() {
+    if (!groupId || groupId && String(groupId) === '0') {
+      return permissions.includes(PERMISSION_PIPELINE_CREATE);
+    }
+    return permissions.includes(PERMISSION_PIPELINE_CREATE) && (get(currentGroupInfo(), 'appRoleName', '') === 'admin' || permissions.includes(PERMISSION_PIPELINE_GROUP_ADMIN));
+  };
+  var onStarPipelineGroup = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(params) {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            setStarGroupLoading(true);
+            _context3.next = 3;
+            return exceed.fetch({
+              api: 'Pipeline.start.groups',
+              data: {
+                ids: params.ids.join(','),
+                ops: params.ops
+              }
+            }).then(/*#__PURE__*/function () {
+              var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref5) {
+                var successful, groupNames;
+                return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                  while (1) switch (_context2.prev = _context2.next) {
+                    case 0:
+                      successful = _ref5.successful;
+                      if (successful) {
+                        _context2.next = 4;
+                        break;
+                      }
+                      setStarGroupLoading(false);
+                      return _context2.abrupt("return");
+                    case 4:
+                      _context2.next = 6;
+                      return allSettled([actions.getPipelineStarGroups(), actions.getPipelineGroups()]);
+                    case 6:
+                      groupNames = (pipelineGroups || []).filter(function (_ref7) {
+                        var id = _ref7.id;
+                        return params.ids.includes(id);
+                      }).map(function (_ref8) {
+                        var name = _ref8.name;
+                        return name;
+                      }).join(', ');
+                      setStarGroupLoading(false);
+                      Message.success({
+                        title: params.ops === 'DELETE' ? intl.get({
+                          id: 'rdc-tb-cd-assets.components.dashboardMain.GroupnameTheGroupHasBeen',
+                          defaultMessage: '【{groupName}】分组已取消收藏'
+                        }, {
+                          groupName: groupNames
+                        }) : intl.get({
+                          id: 'rdc-tb-cd-assets.components.dashboardMain.GroupnameGroupHasBeenCollected',
+                          defaultMessage: '【{groupName}】分组已收藏'
+                        }, {
+                          groupName: groupNames
+                        })
+                      });
+                      setStarGroupIds([]);
+                    case 10:
+                    case "end":
+                      return _context2.stop();
+                  }
+                }, _callee2);
+              }));
+              return function (_x2) {
+                return _ref6.apply(this, arguments);
+              };
+            }())["catch"](function () {
+              setStarGroupLoading(false);
+            });
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function onStarPipelineGroup(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var operationPanel = /*#__PURE__*/React.createElement(PipelineOperationPanel, {
+    isGroup: !!groupId,
+    createPermission: createPermission,
+    permissions: permissions,
+    currentGroupInfo: currentGroupInfo(),
+    tagGroupList: tagGroupList,
+    values: {
+      viewMode: viewMode,
+      pageSort: pageSort,
+      pipelineName: searchPipelineName,
+      searchParams: searchParams
+    },
+    resetVisible: !!Object.values(searchParams).filter(Boolean).length || !!searchPipelineName || pageSort !== 'ID',
+    onReset: onReset,
+    onChanges: {
+      onSearch: useCallback(debounce(setPipelineName, 700), []),
+      onSort: onSort,
+      onChangeMode: function onChangeMode(m) {
+        setViewMode(m);
+        setLocalStorageCache(PIPELINE_VIEW_MODE + "/" + orgId, m);
+      },
+      onChangeSearchParams: onChangeSearchParams,
+      onCreate: function onCreate() {
+        var url = composeTargetUrl();
+        navigateWithContexPath(url + "/new");
+      }
+    }
+  });
+  var renderGroupTab = function renderGroupTab() {
+    var items = pipelineStarGroups.map(function (r) {
+      var title = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+        type: "false-line",
+        className: "home-dashboard-tab-item-remove",
+        onClick: (/*#__PURE__*/function () {
+          var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(e) {
+            return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
+                case 0:
+                  e.stopPropagation();
+                  _context4.next = 3;
+                  return onStarPipelineGroup({
+                    ids: [r.id],
+                    ops: 'DELETE'
+                  });
+                case 3:
+                  pipelineTabActiveNav !== 'my' && onChangeNav('my');
+                case 4:
+                case "end":
+                  return _context4.stop();
+              }
+            }, _callee4);
+          }));
+          return function (_x3) {
+            return _ref9.apply(this, arguments);
+          };
+        }())
+      }), /*#__PURE__*/React.createElement(Title, {
+        trigger: r.title,
+        align: "t"
+      }, r.title));
+      return /*#__PURE__*/React.createElement(Item, {
+        key: r.type,
+        title: title,
+        style: {
+          marginRight: 24
+        }
+      });
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "home-dashboard-tab-group"
+    }, /*#__PURE__*/React.createElement(Tab, {
+      onChange: onChangeNav,
+      activeKey: pipelineTabActiveNav
+    }, items));
+  };
+  var renderMyTab = function renderMyTab() {
+    var items = (sidebarActiveNav !== 'system' ? routerConfig : systemTabs).filter(function (_ref10) {
+      var tab = _ref10.tab;
+      return tab;
+    }).map(function (r) {
+      return /*#__PURE__*/React.createElement(Item, {
+        key: r.type,
+        title: intl.get({
+          id: r.title,
+          defaultMessage: r.defaultTitle
+        }),
+        className: cx({
+          'home-dashboard-tab-item-line': r.line && !pipelineStarGroupsLoading
+        })
+      });
+    });
+    return /*#__PURE__*/React.createElement("div", {
+      className: "home-dashboard-tab-my"
+    }, /*#__PURE__*/React.createElement(Tab, {
+      onChange: onChangeNav,
+      activeKey: pipelineTabActiveNav
+    }, items));
+  };
+  var renderStarGroup = function renderStarGroup() {
+    var trigger = /*#__PURE__*/React.createElement(Button, {
+      text: true,
+      className: "star-group-btn",
+      onClick: function onClick() {
+        !batchStarGroupSelectVisible && setBatchStarGroupVisible(!batchStarGroupVisible);
+      },
+      style: pipelineStarGroups.length ? {
+        minWidth: 'auto',
+        marginRight: 0
+      } : {}
+    }, /*#__PURE__*/React.createElement(YunxiaoIcon, {
+      type: "add-line"
+    }), !pipelineStarGroups.length && intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardMain.AddACollectionGroup',
+      defaultMessage: '添加收藏组'
+    }));
+    var onVisibleChange = function onVisibleChange(v) {
+      if (batchStarGroupSelectVisible) return;
+      setBatchStarGroupVisible(v);
+      if (!v) {
+        var clock = setTimeout(function () {
+          setStarGroupIds([]);
+          clearTimeout(clock);
+        });
+      }
+    };
+    return /*#__PURE__*/React.createElement(Popup, {
+      triggerType: "click",
+      trigger: trigger,
+      visible: batchStarGroupVisible,
+      onVisibleChange: onVisibleChange
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 252
+      }
+    }, /*#__PURE__*/React.createElement(OperationPanel, {
+      title: intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardMain.AddACollectionGroup.1',
+        defaultMessage: '添加收藏分组'
+      }),
+      onOk: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return onStarPipelineGroup({
+                ids: starGroupIds,
+                ops: 'ADD'
+              });
+            case 2:
+              setBatchStarGroupVisible(false);
+            case 3:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5);
+      })),
+      onClose: function onClose() {
+        return setBatchStarGroupVisible(false);
+      },
+      okProps: {
+        loading: starGroupLoading,
+        disabled: !starGroupIds.length
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: 'var(--color-text1-7, #8b8b8b)',
+        marginBottom: 8
+      }
+    }, intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardMain.GroupName',
+      defaultMessage: '分组名称'
+    })), /*#__PURE__*/React.createElement(Select, {
+      mode: "multiple",
+      visible: batchStarGroupSelectVisible,
+      style: {
+        width: '100%'
+      },
+      autoWidth: true,
+      placeholder: intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardMain.SelectAGroup',
+        defaultMessage: '请选择分组'
+      }),
+      popupProps: {
+        container: function container(_ref12) {
+          var parentNode = _ref12.parentNode;
+          return parentNode;
+        }
+      },
+      onVisibleChange: setBatchStarGroupSelectVisible,
+      value: starGroupIds,
+      onChange: setStarGroupIds,
+      dataSource: (pipelineGroups || []).filter(function (_ref13) {
+        var starred = _ref13.starred,
+          id = _ref13.id;
+        return id !== '0' && !starred;
+      }).map(function (_ref14) {
+        var id = _ref14.id,
+          name = _ref14.name;
+        return {
+          value: id,
+          label: name
+        };
+      })
+    }))));
+  };
+  var renderTab = function renderTab() {
+    if (!['my', 'star', 'system'].includes(sidebarActiveNav)) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "home-dashboard-tab"
+    }, renderMyTab(), sidebarActiveNav !== 'system' && !!pipelineStarGroups.length && renderGroupTab(), sidebarActiveNav !== 'system' && !pipelineStarGroupsLoading && renderStarGroup());
+  };
+  var getTitle = function getTitle() {
+    if (sidebarActiveNav === '0' && groupId === '0') {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.pipeline-flow-info.flow-info.NotGrouped',
+        defaultMessage: '未分组'
+      });
+    }
+    if (groupId && !['star', 'my', 'all'].includes(sidebarActiveNav)) {
+      if (!currentGroupInfo()) return '--';
+      var defaultName = intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardMain.AssemblyLine',
+        defaultMessage: '流水线'
+      });
+      return (currentGroupInfo() || {}).name || defaultName;
+    }
+    if (sidebarActiveNav === 'my') {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardMain.MyPipeline',
+        defaultMessage: '我的流水线'
+      });
+    }
+    if (sidebarActiveNav === 'all') {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.AllAssemblyLines',
+        defaultMessage: '全部流水线'
+      });
+    }
+    if (sidebarActiveNav === 'system') {
+      return intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.SysemPipeline',
+        defaultMessage: '系统来源'
+      });
+    }
+    return intl.get({
+      id: 'rdc-tb-cd-assets.components.dashboardMain.AssemblyLine',
+      defaultMessage: '流水线'
+    });
+  };
+  var getTitleHelp = function getTitleHelp() {
+    if (sidebarActiveNav === 'system') {
+      return /*#__PURE__*/React.createElement(Balloon.Tooltip, {
+        align: "t",
+        trigger: /*#__PURE__*/React.createElement(ButtonIcon, {
+          name: "question-line"
+        })
+      }, intl.get({
+        id: 'rdc-tb-cd-assets.components.dashboardNav.SysemPipelineTips',
+        defaultMessage: '系统来源流水线为其他云效产品功能自动生成的流水线'
+      }));
+    }
+    return null;
+  };
+  var pipelineCommonProps = {
+    loading: loading,
+    groupId: groupId,
+    viewMode: viewMode,
+    pageSort: pageSort,
+    searchParams: searchParams,
+    pipelineGroups: pipelineGroups,
+    contentLoading: contentLoading,
+    composeTargetUrl: composeTargetUrl,
+    setContentLoading: setContentLoading,
+    searchPipelineName: searchPipelineName,
+    refreshFalg: refreshFalg,
+    pipelineTabActiveNav: pipelineTabActiveNav,
+    setLoading: actions.setLoading,
+    selectNav: pipelineTabActiveNav,
+    tabPanelHeight: tabPanelHeight,
+    currentGroupInfo: currentGroupInfo(),
+    permissions: permissions,
+    createPermission: createPermission
+  };
+  return /*#__PURE__*/React.createElement(Layout, {
+    fullPage: true
+  }, /*#__PURE__*/React.createElement(Header, {
+    className: "dashboard-header",
+    title: /*#__PURE__*/React.createElement(Title, {
+      trigger: /*#__PURE__*/React.createElement(Box, {
+        direction: "row",
+        align: "center",
+        spacing: 8
+      }, /*#__PURE__*/React.createElement(Box, null, getTitle()), /*#__PURE__*/React.createElement(Box, null, getTitleHelp())),
+      align: "b"
+    }, getTitle()),
+    operation: operationPanel
+  }), /*#__PURE__*/React.createElement(Body, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(BodyContent, null, /*#__PURE__*/React.createElement(OperationBar, null, renderTab()), /*#__PURE__*/React.createElement(Router, {
+    style: {
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+      overflow: 'hidden',
+      padding: 0
+    }
+  }, [].concat(routerConfig, systemTabs).map(function (route) {
+    return /*#__PURE__*/React.createElement(Pipelines, _extends({
+      key: route.type,
+      actions: actions,
+      loadingTypes: loadingTypes
+    }, pipelineCommonProps, route, {
+      hasPipelines: hasPipelines,
+      setHasPipelines: setHasPipelines
+    }));
+  }), /*#__PURE__*/React.createElement(EnterpriseSetting, {
+    visible: true,
+    path: "/setting/*",
+    onClose: function onClose() {
+      var url = composeTargetUrl();
+      navigateWithContexPath(url);
+      actions.init();
+    }
+  }), /*#__PURE__*/React.createElement(EnterprisePrice, {
+    visible: true,
+    path: "/enterprise-price/state",
+    onClose: function onClose() {
+      var url = composeTargetUrl();
+      navigateWithContexPath(url);
+      actions.init();
+    }
+  }), /*#__PURE__*/React.createElement(PipelineNotFonud, {
+    "default": true
+  }), /*#__PURE__*/React.createElement(Redirect, {
+    from: "/",
+    to: "my",
+    noThrow: true
+  })))), newVersionVisible && /*#__PURE__*/React.createElement(HomeNewVersionGuidance, {
+    visible: true,
+    onClose: function onClose() {
+      actions.setNewVersionVisible(false);
+      actions.setSettingsPopVisible(true);
+    }
+  }));
+};
+export default TBDashboardMain;