合并3.3.0企业版改动

km-console/.env

@@ -1,2 +1,2 @@
-BUSINESS_VERSION='false'
+BUSINESS_VERSION='true'
 PUBLIC_PATH=''

km-console/packages/config-manager-fe/src/app.tsx

@@ -31,12 +31,7 @@ export const { Provider, Consumer } = React.createContext('zh');
 
 const defaultLanguage = 'zh';
 
-const AppContent = (props: {
-  getLicenseInfo?: (cbk: (msg: string) => void) => void | undefined;
-  licenseEventBus?: Record<string, any> | undefined;
-}) => {
-  const { getLicenseInfo, licenseEventBus } = props;
-
+const AppContent = (props: any) => {
   return (
     <div className="config-system">
       <DProLayout.Sider prefixCls={'dcd-two-columns'} width={200} theme={'light'} systemKey={systemKey} menuConf={leftMenus} />
@@ -44,7 +39,7 @@ const AppContent = (props: {
         <RouteGuard
           routeList={pageRoutes}
           beforeEach={() => {
-            getLicenseInfo?.((msg) => licenseEventBus?.emit('licenseError', msg));
+            // getLicenseInfo?.((msg) => licenseEventBus?.emit('licenseError', msg));
             return Promise.resolve(true);
           }}
           noMatch={() => <Redirect to="/404" />}
@@ -55,7 +50,6 @@ const AppContent = (props: {
 };
 
 const App = (props: any) => {
-  const { getLicenseInfo, licenseEventBus } = props;
   const intlMessages = _.get(localeMap[defaultLanguage], 'intlMessages', intlZhCN);
   const locale = _.get(localeMap[defaultLanguage], 'intl', 'zh-CN');
   const antdLocale = _.get(localeMap[defaultLanguage], 'dantd', dantdZhCN);
@@ -65,7 +59,7 @@ const App = (props: any) => {
       <AppContainer intlProvider={{ locale, messages: intlMessages }} antdProvider={{ locale: antdLocale }}>
         <Router basename={systemKey}>
           <Switch>
-            <AppContent getLicenseInfo={getLicenseInfo} licenseEventBus={licenseEventBus} />
+            <AppContent />
           </Switch>
         </Router>
       </AppContainer>

km-console/packages/layout-clusters-fe/src/app.tsx

@@ -72,51 +72,12 @@ const logout = () => {
   localStorage.removeItem('userInfo');
 };
 
-const LicenseLimitModal = () => {
-  const [visible, setVisible] = useState<boolean>(false);
-  const [msg, setMsg] = useState<string>('');
-
-  useLayoutEffect(() => {
-    licenseEventBus.on('licenseError', (desc: string) => {
-      !visible && setVisible(true);
-      setMsg(desc);
-    });
-    return () => {
-      licenseEventBus.removeAll('licenseError');
-    };
-  }, []);
-
-  return (
-    <Modal
-      visible={visible}
-      centered={true}
-      width={400}
-      zIndex={10001}
-      title={
-        <>
-          <IconFont type="icon-yichang" style={{ marginRight: 10, fontSize: 18 }} />
-          许可证限制
-        </>
-      }
-      footer={null}
-      onCancel={() => setVisible(false)}
-    >
-      <div style={{ margin: '0 28px', lineHeight: '24px' }}>
-        <div>
-          {msg}，<a>前往帮助文档</a>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
 const AppContent = (props: { setlanguage: (language: string) => void }) => {
   const { pathname } = useLocation();
   const history = useHistory();
   const userInfo = localStorage.getItem('userInfo');
   const [curActiveAppName, setCurActiveAppName] = useState('');
   const [versionInfo, setVersionInfo] = useState<VersionInfo>();
-
   useEffect(() => {
     if (pathname.startsWith('/config')) {
       setCurActiveAppName('config');
@@ -179,7 +140,7 @@ const AppContent = (props: { setlanguage: (language: string) => void }) => {
       }}
       onMount={(customProps: any) => {
         judgePage404();
-        registerApps(systemsConfig, { ...customProps, getLicenseInfo, licenseEventBus }, () => {
+        registerApps(systemsConfig, { ...customProps }, () => {
           // postMessage();
         });
       }}
@@ -200,7 +161,6 @@ const AppContent = (props: { setlanguage: (language: string) => void }) => {
             }}
           />
         </Switch>
-        <LicenseLimitModal />
       </>
     </DProLayout.Container>
   );
@@ -234,7 +194,6 @@ export default function App(): JSX.Element {
         <BrowserRouter basename="">
           <Switch>
             <Route path="/login" component={Login} />
-            <Route path="/no-license" exact component={NoLicense} />
             <Route render={() => <AppContent setlanguage={setlanguage} />} />
           </Switch>
         </BrowserRouter>

km-console/packages/layout-clusters-fe/src/components/ChartOperateBar/index.tsx

@@ -33,6 +33,7 @@ interface PropsType {
   };
   onChange: (options: KsHeaderOptions) => void;
   openMetricFilter: () => void;
+  setScreenType?: any;
 }
 
 interface ScopeData {
@@ -56,12 +57,29 @@ const GRID_SIZE_OPTIONS = [
   },
 ];
 
+// connect 筛选逻辑补充
+const CONNECT_OPTIONS = [
+  {
+    label: '全部',
+    value: 'all',
+  },
+  {
+    label: 'Cluster',
+    value: 'Connect',
+  },
+  {
+    label: 'Connector',
+    value: 'Connector',
+  },
+];
+
 const MetricOperateBar = ({
   nodeSelect = {},
   hideNodeScope = false,
   hideGridSelect = false,
   onChange: onChangeCallback,
   openMetricFilter,
+  setScreenType,
 }: PropsType): JSX.Element => {
   const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[1].value);
   const [rangeTime, setRangeTime] = useState<[number, number]>(() => {
@@ -139,6 +157,17 @@ const MetricOperateBar = ({
             <DRangeTime timeChange={timeChange} rangeTimeArr={rangeTime} />
           </div>
           <div className="header-right">
+            {/* connect 单独逻辑 */}
+            {setScreenType && (
+              <Select
+                style={{ width: 120, marginRight: 10 }}
+                defaultValue="all"
+                options={CONNECT_OPTIONS}
+                onChange={(e) => {
+                  setScreenType(e);
+                }}
+              />
+            )}
             {/* 节点范围 */}
             {!hideNodeScope && (
               <NodeSelect name={nodeSelect.name || ''} onChange={nodeScopeChange}>

km-console/packages/layout-clusters-fe/src/components/DraggableCharts/ChartList.tsx

@@ -72,7 +72,7 @@ const ChartList = (props: ChartListProps) => {
                   const { metricName, metricType, metricUnit, metricLines, showLegend } = data;
 
                   return (
-                    <div key={metricName} className="dashboard-drag-item-box">
+                    <div key={metricName + metricType} className="dashboard-drag-item-box">
                       <div className="dashboard-drag-item-box-title">
                         <Tooltip
                           placement="topLeft"

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx

@@ -252,6 +252,7 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
     const {
       Brokers: brokers,
       Zookeepers: zks,
+      // ConnectionsCount: connect,
       HealthCheckPassed: healthCheckPassed,
       HealthCheckTotal: healthCheckTotal,
       HealthState: healthState,
@@ -352,6 +353,18 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any
                     <div className="indicator-left-item-value">{zookeepersAvailable === -1 ? '-' : zks}</div>
                   </div>
                 )}
+                {/* <div className="indicator-left-item">
+                  <div className="indicator-left-item-title">
+                    <span
+                      className="indicator-left-item-title-dot"
+                      style={{
+                        background: itemData.latestMetrics?.metrics?.BrokersNotAlive ? '#FF7066' : '#34C38F',
+                      }}
+                    ></span>
+                    Connect
+                  </div>
+                  <div className="indicator-left-item-value">{connect}</div>
+                </div> */}
               </div>
               <div className="indicator-right">
                 {metricPoints.map((row, index) => {

km-console/packages/layout-clusters-fe/src/pages/index.tsx

@@ -61,7 +61,6 @@ const LayoutContainer = () => {
   // 路由前置守卫
   const routeBeforeEach = useCallback(
     (path: string, permissionNode: string | number) => {
-      getLicenseInfo((msg) => licenseEventBus.emit('licenseError', msg));
       // 判断进入页面的前置条件是否满足，如果不满足，则展示加载状态
       const isClusterNotExist = path.includes(':clusterId') && !global.clusterInfo;
       const isNotLoadedPermissions = typeof global.hasPermission !== 'function';