Merge pull request #541 from GraceWalk/dev

前端代码打包优化 & bug 修复

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Redirect, Switch } from 'react-router-dom';
 import _ from 'lodash';
 import './constants/axiosConfig';
-import dantdZhCN from 'knowdesign/lib/locale/zh_CN';
-import dantdEnUS from 'knowdesign/lib/locale/en_US';
+import dantdZhCN from 'knowdesign/es/locale/zh_CN';
+import dantdEnUS from 'knowdesign/es/locale/en_US';
 import intlZhCN from './locales/zh';
 import intlEnUS from './locales/en';
 import { AppContainer, RouteGuard, DProLayout } from 'knowdesign';

km-console/packages/config-manager-fe/src/components/TagsWithHide/index.tsx

 import { DownOutlined } from '@ant-design/icons';
 import { Popover } from 'knowdesign';
-import { TooltipPlacement } from 'knowdesign/lib/basic/tooltip';
+import { TooltipPlacement } from 'knowdesign/es/basic/tooltip';
 import React, { useState, useRef, useEffect } from 'react';
 import './index.less';
 
@@ -90,8 +90,9 @@ export default (props: PropsType) => {
         return (
           <div
             key={i}
-            className={`container-item ${curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
-              }`}
+            className={`container-item ${
+              curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
+            }`}
           >
             {item}
           </div>

km-console/packages/config-manager-fe/src/pages/UserManage/RoleTabContent.tsx

@@ -77,6 +77,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
 
   const onSubmit = () => {
     form.validateFields().then((formData) => {
+      formData.permissionIdList = formData.permissionIdList.filter((l) => l);
       formData.permissionIdList.forEach((arr, i) => {
         // 如果分配的系统下的子权限，自动赋予该系统的权限
         if (arr !== null && arr.length) {
@@ -212,7 +213,7 @@ const RoleDetailAndUpdate = forwardRef((props, ref): JSX.Element => {
             rules={[
               () => ({
                 validator(_, value) {
-                  if (Array.isArray(value) && value.some((item) => !!item.length)) {
+                  if (Array.isArray(value) && value.some((item) => !!item?.length)) {
                     return Promise.resolve();
                   }
                   return Promise.reject(new Error('请为角色至少分配一项权限'));

km-console/packages/layout-clusters-fe/config/CoverHtmlWebpackPlugin.js

@@ -86,12 +86,12 @@ class CoverHtmlWebpackPlugin {
 
         assetJson.reverse().forEach((item) => {
           if (/\.js$/.test(item)) {
-            // if (item.includes('vendor~')) {
-            //   vendors += `<script async src="${item}"></script>`;
-            // } else {
-            // TODO: entry 只有一个
-            portalMap['@portal/layout'] = item;
-            // }
+            if (item.includes('vendor~')) {
+              vendors += `<script async src="${item}"></script>`;
+            } else {
+              // TODO: entry 只有一个
+              portalMap['@portal/layout'] = item;
+            }
           } else if (/\.css$/.test(item)) {
             links += `<link href="${item}" rel="stylesheet">`;
           }

km-console/packages/layout-clusters-fe/config/d1-webpack.base.js

@@ -9,7 +9,6 @@ const TerserJSPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const theme = require('./theme');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 
 const isProd = process.env.NODE_ENV === 'production';
 const babelOptions = {
@@ -43,7 +42,6 @@ const babelOptions = {
 module.exports = () => {
   const cssFileName = isProd ? '[name]-[chunkhash].css' : '[name].css';
   const plugins = [
-    // !isProd && new HardSourceWebpackPlugin(),
     new CoverHtmlWebpackPlugin(),
     new ProgressBarPlugin(),
     new CaseSensitivePathsPlugin(),
@@ -150,23 +148,21 @@ module.exports = () => {
       ],
     },
     optimization: Object.assign(
-      // {
-      //   splitChunks: {
-      //     cacheGroups: {
-      //       vendor: {
-      //         test: /[\\/]node_modules[\\/]/,
-      //         chunks: 'all',
-      //         name: 'vendor',
-      //         priority: 10,
-      //         enforce: true,
-      //         minChunks: 1,
-      //         maxSize: 3500000,
-      //       },
-      //     },
-      //   },
-      // },
       isProd
         ? {
+            splitChunks: {
+              cacheGroups: {
+                vendor: {
+                  test: /[\\/]node_modules[\\/]/,
+                  chunks: 'all',
+                  name: 'vendor',
+                  priority: 10,
+                  enforce: true,
+                  minChunks: 1,
+                  maxSize: 3000000,
+                },
+              },
+            },
             minimizer: [
               new TerserJSPlugin({
                 cache: true,

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

@@ -4,8 +4,8 @@ import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter, Switch, Route, useLocation, useHistory } from 'react-router-dom';
 import { get as lodashGet } from 'lodash';
 import { DProLayout, AppContainer, IconFont, Menu, Utils, Page403, Page404, Page500, Modal } from 'knowdesign';
-import dantdZhCN from 'knowdesign/lib/locale/zh_CN';
-import dantdEnUS from 'knowdesign/lib/locale/en_US';
+import dantdZhCN from 'knowdesign/es/locale/zh_CN';
+import dantdEnUS from 'knowdesign/es/locale/en_US';
 import { DotChartOutlined } from '@ant-design/icons';
 import { licenseEventBus } from './constants/axiosConfig';
 import intlZhCN from './locales/zh';

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

 import { DownOutlined } from '@ant-design/icons';
 import { Popover } from 'knowdesign';
-import { TooltipPlacement } from 'knowdesign/lib/basic/tooltip';
+import { TooltipPlacement } from 'knowdesign/es/basic/tooltip';
 import React, { useState, useRef, useEffect } from 'react';
 import './index.less';
 
@@ -93,8 +93,9 @@ export default (props: PropsType) => {
         return (
           <div
             key={i}
-            className={`container-item ${curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
-              }`}
+            className={`container-item ${
+              curState.calculated ? (curState.isHideExpandNode ? 'show' : i >= curState.endI ? 'hide' : 'show') : ''
+            }`}
           >
             {item}
           </div>

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

@@ -5,7 +5,7 @@ import API from '../../api';
 import { getControllerChangeLogListColumns, defaultPagination } from './config';
 import BrokerDetail from '../BrokerDetail';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import './index.less';
 
 const { request } = Utils;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { MetricType } from '@src/api';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
 import DashboardDragChart from '@src/components/DashboardDragChart';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { AppContainer } from 'knowdesign';
 
 const BrokerDashboard = (): JSX.Element => {

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

@@ -7,7 +7,7 @@ import { dealTableRequestParams } from '../../constants/common';
 import BrokerDetail from '../BrokerDetail';
 import CardBar from '@src/components/CardBar';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import './index.less';
 const { request } = Utils;
 

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

@@ -7,7 +7,7 @@ import { getOperatingStateListParams } from './interface';
 import { useParams } from 'react-router-dom';
 import ConsumerGroupDetail from './ConsumerGroupDetail';
 import ConsumerGroupHealthCheck from '@src/components/CardBar/ConsumerGroupHealthCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { hashDataParse } from '@src/constants/common';
 
 const { Option } = Select;

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

@@ -19,9 +19,9 @@ export const jobType = [
   },
   process.env.BUSSINESS_VERSION
     ? {
-      label: '集群均衡',
-      value: 2,
-    }
+        label: '集群均衡',
+        value: 2,
+      }
     : undefined,
 ].filter((t) => t);
 
@@ -75,6 +75,7 @@ export const getJobsListColumns = (arg?: any) => {
       title: '任务ID',
       dataIndex: 'id',
       key: 'id',
+      width: 70,
     },
     {
       title: '任务类型',

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

@@ -4,7 +4,7 @@ import { ProTable, Drawer, Utils, AppContainer, Form, Select, Input, Button, mes
 import API from '../../api';
 import { getJobsListColumns, defaultPagination, runningStatus, jobType } from './config';
 import JobsCheck from '@src/components/CardBar/JobsCheck';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { ViewJobsProgress } from './ViewJobsProgress';
 import './index.less';
 import ReplicaChange from '@src/components/TopicJob/ReplicaChange';

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Select, Form, Utils, AppContainer, Input, Button, ProTable, Badge, Tag, SearchInput } from 'knowdesign';
 import BalanceDrawer from './BalanceDrawer';
 import HistoryDrawer from './HistoryDrawer';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { getSizeAndUnit } from '../../constants/common';
 import api from '../../api';
 import './index.less';

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

-/* eslint-disable react/display-name */
-
 import { Button, Divider, Drawer, Form, Input, InputNumber, message, Radio, Select, Spin, Space, Utils } from 'knowdesign';
 import * as React from 'react';
 import { useIntl } from 'react-intl';
@@ -16,10 +14,9 @@ const clientPropertiesPlaceholder = `用于创建Kafka客户端进行信息获
 {
   "security.protocol": "SASL_PLAINTEXT",
   "sasl.mechanism": "SCRAM-SHA-256",
-  "sasl.jaas.config": 
-  "org.apache.kafka.common.security.scram.
-  ScramLoginModule required username="xxxxxx" 
-  password="xxxxxx";"
+  "sasl.jaas.config": "org.apache.kafka.common.security.
+scram.ScramLoginModule required username=\\"xxxxxx\\" pass
+word=\\"xxxxxx\\";"
 }
 `;
 

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

@@ -93,7 +93,10 @@ const MultiClusterPage = () => {
     setVersionLoading(true);
     Utils.request(API.getClustersVersion)
       .then((versions: string[]) => {
-        setExistKafkaVersion(versions || []);
+        if (!Array.isArray(versions)) {
+          versions = [];
+        }
+        setExistKafkaVersion(versions.sort().reverse() || []);
         setVersionLoading(false);
         setCheckedKafkaVersions(versions || []);
       })
@@ -299,7 +302,9 @@ const MultiClusterPage = () => {
             <div className="test-modal-23"></div>
           </div>
         </div>
-        <Spin spinning={clusterLoading}>{renderList}</Spin>
+        <div className="multi-cluster-page-dashboard">
+          <Spin spinning={clusterLoading}>{renderList}</Spin>
+        </div>
       </div>
     );
   };

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

@@ -147,9 +147,9 @@ const ListScroll = (props: { loadMoreData: any; list: any; pagination: any; getP
                     }}
                   >
                     {[
-                      ['BytesIn', loadReBalanceEnable && loadReBalanceNwIn],
-                      ['BytesOut', loadReBalanceEnable && loadReBalanceNwOut],
-                      ['Disk', loadReBalanceEnable && loadReBalanceDisk],
+                      ['BytesIn', loadReBalanceNwIn === 1],
+                      ['BytesOut', loadReBalanceNwOut === 1],
+                      ['Disk', loadReBalanceDisk === 1],
                     ].map(([name, isBalanced]) => {
                       return isBalanced ? (
                         <div className="balance-box balanced">{name} 已均衡</div>

km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/config.ts

-import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 
 export const bootstrapServersErrCodes = [10, 11, 12];
 export const zkErrCodes = [20, 21];

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

@@ -329,6 +329,11 @@
       }
     }
   }
+  &-dashboard {
+    & > .dcloud-spin-nested-loading > .dcloud-spin-container::after {
+      background: transparent;
+    }
+  }
 
   .multi-cluster-list {
     box-sizing: content-box;

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

@@ -201,6 +201,8 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           if (Number.isNaN(parsedValue)) {
             parsedValue = values.MessagesIn;
           } else {
+            // 为避免出现过小的数字影响图表展示效果，图表值统一只保留到小数点后三位
+            parsedValue = parseFloat(parsedValue.toFixed(3));
             if (maxValue < parsedValue) maxValue = parsedValue;
           }
           const valuesWithUnit = Object.entries(values).map(([key, value]) => {
@@ -287,8 +289,8 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
           checkboxProps: (record: MetricInfo) => {
             return record.name === DEFAULT_METRIC
               ? {
-                disabled: true,
-              }
+                  disabled: true,
+                }
               : {};
           },
           submitCallback: indicatorChangeCallback,

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

@@ -165,9 +165,9 @@ const LeftSider = () => {
           <div className="tag default">{clusterInfo?.kafkaVersion ?? '-'}</div>
           {clusterMetrics?.LoadReBalanceEnable !== undefined &&
             [
-              ['BytesIn', clusterMetrics?.LoadReBalanceEnable && clusterMetrics?.LoadReBalanceNwIn],
-              ['BytesOut', clusterMetrics?.LoadReBalanceEnable && clusterMetrics?.LoadReBalanceNwOut],
-              ['Disk', clusterMetrics?.LoadReBalanceEnable && clusterMetrics?.LoadReBalanceDisk],
+              ['BytesIn', clusterMetrics?.LoadReBalanceNwIn === 1],
+              ['BytesOut', clusterMetrics?.LoadReBalanceNwOut === 1],
+              ['Disk', clusterMetrics?.LoadReBalanceDisk === 1],
             ].map(([name, isBalanced]) => {
               return isBalanced ? (
                 <div className="tag balanced">{name} 已均衡</div>

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

-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import React from 'react';
 import TourGuide, { ClusterDetailSteps } from '@src/components/TourGuide';
 import './index.less';

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

@@ -192,8 +192,10 @@ const ConsumeClientTest = () => {
         // 过滤出消费数量不足设定值的partition
         const filtersPartition = _partitionList.filter((item: any) => item.recordCount < untilMsgNum);
         curPartitionList.current = filtersPartition; // 用作下一次请求的入参
-        setIsStop(filtersPartition.length < 1);
-        isStopStatus.current = filtersPartition.length < 1;
+        if (!isStop) {
+          setIsStop(filtersPartition.length < 1);
+          isStopStatus.current = filtersPartition.length < 1;
+        }
         break;
       case 'max size':
         setIsStop(+recordSizeCur.current >= unitMsgSize);
@@ -202,8 +204,10 @@ const ConsumeClientTest = () => {
       case 'max size per partition':
         // 过滤出消费size不足设定值的partition
         const filters = partitionConsumedList.filter((item: any) => item.recordSizeUnitB < unitMsgSize);
-        setIsStop(filters.length < 1);
-        isStopStatus.current = filters.length < 1;
+        if (!isStop) {
+          setIsStop(filters.length < 1);
+          isStopStatus.current = filters.length < 1;
+        }
         curPartitionList.current = filters;
         break;
     }

km-console/packages/layout-clusters-fe/src/pages/TestingConsumer/component/ConfigForm.tsx

 import { Button, XForm } from 'knowdesign';
-import { IFormItem } from 'knowdesign/lib/extend/x-form';
+import { IFormItem } from 'knowdesign/es/extend/x-form';
 import * as React from 'react';
 import './style/form.less';
 import { useIntl } from 'react-intl';

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

-import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 import moment from 'moment';
 import React from 'react';
 import { timeFormat } from '../../constants/common';

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

 import { AppContainer } from 'knowdesign';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import TaskTabs from './component/TaskTabs';

km-console/packages/layout-clusters-fe/src/pages/TestingProduce/component/ConfigFrom.tsx

 import { Button, Col, Form, Row } from 'knowdesign';
-import { FormItemType, handleFormItem, IFormItem, renderFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, handleFormItem, IFormItem, renderFormItem } from 'knowdesign/es/extend/x-form';
 import * as React from 'react';
 import './style/form.less';
 import EditTable from './EditTable';

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

 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { IconFont, Switch, Tooltip } from 'knowdesign';
-import { FormItemType, IFormItem } from 'knowdesign/lib/extend/x-form';
+import { FormItemType, IFormItem } from 'knowdesign/es/extend/x-form';
 import moment from 'moment';
 import React from 'react';
 import { timeFormat, getRandomStr } from '@src/constants/common';

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import ProduceClientTest from './Produce';
 import './index.less';
 import TaskTabs from '../TestingConsumer/component/TaskTabs';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { useParams } from 'react-router-dom';
 
 const Produce = () => {

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

@@ -3,7 +3,7 @@ import { MetricType } from '@src/api';
 import TopicHealthCheck from '@src/components/CardBar/TopicHealthCheck';
 import DashboardDragChart from '@src/components/DashboardDragChart';
 import { AppContainer } from 'knowdesign';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 
 const TopicDashboard = () => {
   const [global] = AppContainer.useGlobalValue();

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

@@ -10,7 +10,7 @@ import TopicHealthCheck from '@src/components/CardBar/TopicHealthCheck';
 import TopicDetail from '../TopicDetail';
 import Delete from './Delete';
 import { ClustersPermissionMap } from '../CommonConfig';
-import DBreadcrumb from 'knowdesign/lib/extend/d-breadcrumb';
+import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import ReplicaChange from '@src/components/TopicJob/ReplicaChange';
 import SmallChart from '@src/components/SmallChart';
 import ReplicaMove from '@src/components/TopicJob/ReplicaMove';