前端优化

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

@@ -46,7 +46,7 @@
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04), 0 6px 12px 12px rgba(0, 0, 0, 0.04), 0 6px 10px 0 rgba(0, 0, 0, 0.08);
     border-radius: 8px;
     &-content {
-      padding: 10px 8px 4px 8px;
+      padding: 0;
     }
   }
   .dcloud-popover-arrow-content {
@@ -56,6 +56,7 @@
     display: flex;
     flex-flow: row wrap;
     max-width: 560px;
+    padding: 10px 8px 4px 8px;
     .container-item {
       flex-shrink: 0;
       height: 20px;

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

@@ -31,10 +31,10 @@ export interface PermissionNode {
 }
 
 const CommonConfig = (): JSX.Element => {
-  const [global, setGlobal] = AppContainer.useGlobalValue();
+  const [, setGlobal] = AppContainer.useGlobalValue();
 
   // 获取权限树
-  const getPermissionTree = (userId: number) => {
+  const getPermissionTree = (userInfo, userId: number) => {
     const getUserInfo = Utils.request(`/logi-security/api/v1/user/${userId}`);
     const getPermissionTree = Utils.request('/logi-security/api/v1/permission/tree');
 
@@ -55,18 +55,16 @@ const CommonConfig = (): JSX.Element => {
 
   useLayoutEffect(() => {
     // 如果未登录，直接跳转到登录页
-    const userInfo = localStorage.getItem('userInfo');
+    const userInfoStorage = localStorage.getItem('userInfo');
-    let userId: number;
 
     try {
-      userId = JSON.parse(userInfo).id;
+      const userInfo = JSON.parse(userInfoStorage);
+      const userId = userInfo.id;
       if (!userId) throw 'err';
+      getPermissionTree(userInfo, userId);
     } catch (_) {
       goLogin();
-      return;
     }
-
-    getPermissionTree(userId);
   }, []);
 
   return <></>;

km-console/packages/config-manager-fe/src/pages/OperationLog/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Input, Select, ProTable, DatePicker, Utils } from 'knowdesign';
+import { Button, Form, Input, Select, ProTable, DatePicker, Utils, Tooltip } from 'knowdesign';
 import api from 'api';
 import { defaultPagination } from 'constants/common';
 import TypicalListCard from '../../components/TypicalListCard';
@@ -39,6 +39,13 @@ export default () => {
       dataIndex: 'detail',
       width: 350,
       lineClampOne: true,
+      render(content) {
+        return (
+          <Tooltip placement="bottomLeft" title={content}>
+            {content}
+          </Tooltip>
+        );
+      },
     },
     {
       title: '操作时间',

km-console/packages/layout-clusters-fe/src/api/index.ts

@@ -66,6 +66,7 @@ const api = {
   getPhyClusterBasic: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/basic`),
   getPhyClusterMetrics: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/latest-metrics`),
   getClusterBasicExit: (clusterPhyName: string) => getApi(`/physical-clusters/${clusterPhyName}/basic-combine-exist`),
+  getClustersVersion: getApi('/physical-clusters/exist-version'),
 
   kafkaValidator: getApi(`/utils/kafka-validator`),
 

km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx

@@ -144,9 +144,10 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
       },
       symbol: 'emptyCircle',
       symbolSize: 4,
-      // emphasis: {
+      smooth: 0.25,
-      //   focus: 'self',
+      areaStyle: {
-      // },
+        opacity: 0.02,
+      },
     };
   });
 };
@@ -181,6 +182,7 @@ export const getDetailChartConfig = (title: string, sliderPos: readonly [number,
       legend: {
         show: false,
       },
+      color: CHART_COLOR_LIST,
       dataZoom: [
         {
           type: 'inside',

km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less

@@ -7,6 +7,9 @@
   &-container {
     height: calc(100% - 40px);
     overflow: auto;
+    .no-group-con {
+      overflow: hidden;
+    }
     .drag-sort-item:last-child {
       margin-bottom: 10px;
     }

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

@@ -38,7 +38,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
   const [selectedMetricNames, setSelectedMetricNames] = useState<(string | number)[]>([]); // 默认选中的指标的列表
   const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
   const [metricChartData, setMetricChartData] = useState<MetricChartDataType[]>([]); // 指标图表数据列表
-  const [gridNum, setGridNum] = useState<number>(8); // 图表列布局
+  const [gridNum, setGridNum] = useState<number>(12); // 图表列布局
   const chartDetailRef = useRef(null);
   const chartDragOrder = useRef([]);
   const curFetchingTimestamp = useRef(0);
@@ -49,13 +49,13 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
     const list = res.map((item: any) => {
       return dashboardType === MetricType.Broker
         ? {
-          label: item.host,
+            label: item.host,
-          value: item.brokerId,
+            value: item.brokerId,
-        }
+          }
         : {
-          label: item.topicName,
+            label: item.topicName,
-          value: item.topicName,
+            value: item.topicName,
-        };
+          };
     });
     setScopeList(list);
   };
@@ -145,7 +145,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
   const ksHeaderChange = (ksOptions: KsHeaderOptions) => {
     // 重新渲染图表
     if (gridNum !== ksOptions.gridNum) {
-      setGridNum(ksOptions.gridNum || 8);
+      setGridNum(ksOptions.gridNum || 12);
       busInstance.emit('chartResize');
     } else {
       // 如果为相对时间，则当前时间减去 1 分钟，避免最近一分钟的数据还没采集到时前端多补一个点

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

@@ -85,10 +85,10 @@ const SingleChartHeader = ({
   hideGridSelect = false,
   onChange: onChangeCallback,
 }: PropsType): JSX.Element => {
-  const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[0].value);
+  const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[1].value);
   const [rangeTime, setRangeTime] = useState<[number, number]>(() => {
     const curTimeStamp = moment().valueOf();
-    return [curTimeStamp - 15 * 60 * 1000, curTimeStamp];
+    return [curTimeStamp - 60 * 60 * 1000, curTimeStamp];
   });
   const [isRelativeRangeTime, setIsRelativeRangeTime] = useState(true);
   const [isAutoReload, setIsAutoReload] = useState(false);

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

@@ -37,6 +37,7 @@ const LINE_CONFIG = {
   lineStyle: {
     color: '#556EE6',
     width: 1,
+    smooth: 0.25,
   },
   areaStyle: {
     color: {

km-console/packages/layout-clusters-fe/src/constants/axiosConfig.ts

@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-
 import { notification, Utils } from 'knowdesign';
 const { EventBus } = Utils;
 export const licenseEventBus = new EventBus();
@@ -14,7 +11,7 @@ export const goLogin = () => {
 const serviceInstance = Utils.service;
 
 // 清除 axios 实例默认的响应拦截
-serviceInstance.interceptors.response.handlers = [];
+(serviceInstance.interceptors.response as any).handlers = [];
 
 // 请求拦截
 serviceInstance.interceptors.request.use(
@@ -26,8 +23,8 @@ serviceInstance.interceptors.request.use(
     } else {
       config.headers['X-SSO-USER'] = user; // 请求携带token
       config.headers['X-SSO-USER-ID'] = id;
-      return config;
     }
+    return config;
   },
   (err: any) => {
     return err;
@@ -54,8 +51,8 @@ serviceInstance.interceptors.response.use(
     return res;
   },
   (err: any) => {
-    const config = err.config;
+    const config = err?.config;
-    if (!config || !config.retryTimes) return dealResponse(err, config.customNotification);
+    if (!config || !config.retryTimes) return dealResponse(err);
     const { __retryCount = 0, retryDelay = 300, retryTimes } = config;
     config.__retryCount = __retryCount;
     if (__retryCount >= retryTimes) {

km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts

@@ -3,25 +3,24 @@ import moment from 'moment';
 export const CHART_COLOR_LIST = [
   '#657DFC',
   '#A7B1EB',
-  '#85C80D',
-  '#C9E795',
-  '#FFC300',
-  '#F9D77B',
-  '#8BA3C4',
-  '#C2D0E3',
-  '#FF7066',
-  '#F5B6B3',
   '#2AC8E4',
   '#9DDEEB',
+  '#3991FF',
+  '#94BEF2',
+  '#C2D0E3',
+  '#F5B6B3',
+  '#85C80D',
+  '#C9E795',
   '#A76CEC',
   '#CCABF1',
   '#FF9C1B',
   '#F5C993',
-  '#3991FF',
+  '#FFC300',
-  '#94BEF2',
+  '#F9D77B',
   '#12CA7A',
+  '#8BA3C4',
+  '#FF7066',
   '#A7E6C7',
-  '#FF5AB2',
   '#F19FC9',
   '#AEAEAE',
   '#D1D1D1',
@@ -132,11 +131,10 @@ export const getBasicChartConfig = (props: any = {}) => {
       itemWidth: 8,
       itemGap: 8,
       textStyle: {
-        width: 85,
+        // width: 85,
-        overflow: 'truncate',
+        // overflow: 'truncate',
-        ellipsis: '...',
+        // ellipsis: '...',
         fontSize: 11,
-        lineHeight: 12,
         color: '#74788D',
       },
       pageIcons: {
@@ -148,6 +146,7 @@ export const getBasicChartConfig = (props: any = {}) => {
       pageIconColor: '#495057',
       pageIconInactiveColor: '#ADB5BC',
       pageIconSize: 6,
+      tooltip: false,
       ...legend,
     },
     // 横坐标配置

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

@@ -478,6 +478,7 @@ export default (props: any) => {
                     lineStyle: {
                       width: 1.5,
                     },
+                    smooth: 0.25,
                     symbol: 'emptyCircle',
                     symbolSize: 4,
                     emphasis: {

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

@@ -7,18 +7,18 @@ const CheckboxGroup = Checkbox.Group;
 
 interface IVersion {
   firstLine: string[];
-  leftVersion: string[];
+  leftVersions: string[];
 }
 
-const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: any }) => {
+const CustomCheckGroup = (props: { kafkaVersions: string[]; onChangeCheckGroup: any }) => {
-  const { kafkaVersion, onChangeCheckGroup } = props;
+  const { kafkaVersions, onChangeCheckGroup } = props;
   const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState<IVersion>({
     firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
   });
   const [allVersion, setAllVersion] = React.useState<IVersion>({
     firstLine: [],
-    leftVersion: [],
+    leftVersions: [],
   });
 
   const [indeterminate, setIndeterminate] = React.useState(false);
@@ -30,27 +30,27 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
     document.addEventListener('click', handleDocumentClick);
     return () => {
       document.removeEventListener('click', handleDocumentClick);
-    }
+    };
   }, []);
 
   const handleDocumentClick = (e: Event) => {
     setShowMore(false);
-  }
+  };
 
   const setCheckAllStauts = (list: string[], otherList: string[]) => {
     onChangeCheckGroup([...list, ...otherList]);
-    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersion.length);
+    setIndeterminate(!!list.length && list.length + otherList.length < kafkaVersions.length);
-    setCheckAll(list.length + otherList.length === kafkaVersion.length);
+    setCheckAll(list.length + otherList.length === kafkaVersions.length);
   };
 
   const getTwoPanelVersion = () => {
     const width = (document.getElementsByClassName('custom-check-group')[0] as any)?.offsetWidth;
     const checkgroupWidth = width - 100 - 86;
     const num = (checkgroupWidth / 108) | 0;
-    const firstLine = Array.from(kafkaVersion).splice(0, num);
+    const firstLine = Array.from(kafkaVersions).splice(0, num);
     setMoreGroupWidth(num * 108 + 88 + 66);
-    const leftVersion = Array.from(kafkaVersion).splice(num);
+    const leftVersions = Array.from(kafkaVersions).splice(num);
-    return { firstLine, leftVersion };
+    return { firstLine, leftVersions };
   };
 
   const onFirstVersionChange = (list: []) => {
@@ -59,13 +59,13 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
       firstLine: list,
     });
 
-    setCheckAllStauts(list, checkedKafkaVersion.leftVersion);
+    setCheckAllStauts(list, checkedKafkaVersion.leftVersions);
   };
 
   const onLeftVersionChange = (list: []) => {
     setCheckedKafkaVersion({
       ...checkedKafkaVersion,
-      leftVersion: list,
+      leftVersions: list,
     });
     setCheckAllStauts(list, checkedKafkaVersion.firstLine);
   };
@@ -77,11 +77,11 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
       e.target.checked
         ? versions
         : {
-          firstLine: [],
+            firstLine: [],
-          leftVersion: [],
+            leftVersions: [],
-        }
+          }
     );
-    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersion] : []);
+    onChangeCheckGroup(e.target.checked ? [...versions.firstLine, ...versions.leftVersions] : []);
 
     setIndeterminate(false);
     setCheckAll(e.target.checked);
@@ -112,16 +112,20 @@ const CustomCheckGroup = (props: { kafkaVersion: string[]; onChangeCheckGroup: a
           <CheckboxGroup
             style={{ width: moreGroupWidth }}
             className="more-check-group"
-            options={allVersion.leftVersion}
+            options={allVersion.leftVersions}
-            value={checkedKafkaVersion.leftVersion}
+            value={checkedKafkaVersion.leftVersions}
             onChange={onLeftVersionChange}
           />
         ) : null}
-        <div className="more-btn" onClick={() => setShowMore(!showMore)}>
+        {allVersion.leftVersions.length ? (
-          <a>
+          <div className="more-btn" onClick={() => setShowMore(!showMore)}>
-            {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
+            <a>
-          </a>
+              {!showMore ? '展开更多' : '收起更多'} <DoubleRightOutlined style={{ transform: `rotate(${showMore ? '270' : '90'}deg)` }} />
-        </div>
+            </a>
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     </>
   );

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

@@ -17,11 +17,12 @@ const MultiClusterPage = () => {
   const [run, setRun] = useState<boolean>(false);
   const [global] = AppContainer.useGlobalValue();
   const [statusList, setStatusList] = React.useState([1, 0]);
-  const [kafkaVersion, setKafkaVersion] = React.useState({});
+  const [kafkaVersions, setKafkaVersions] = React.useState<string[]>([]);
+  const [existKafkaVersion, setExistKafkaVersion] = React.useState<string[]>([]);
   const [visible, setVisible] = React.useState(false);
   const [list, setList] = useState<[]>([]);
   const [healthScoreRange, setHealthScoreRange] = React.useState([0, 100]);
-  const [checkedKafkaVersion, setCheckedKafkaVersion] = React.useState({});
+  const [checkedKafkaVersions, setCheckedKafkaVersions] = React.useState<string[]>([]);
   const [sortInfo, setSortInfo] = React.useState({
     sortField: 'HealthScore',
     sortType: 'asc',
@@ -59,7 +60,7 @@ const MultiClusterPage = () => {
       preciseFilterDTOList: [
         {
           fieldName: 'kafkaVersion',
-          fieldValueList: checkedKafkaVersion,
+          fieldValueList: checkedKafkaVersions as (string | number)[],
         },
       ],
       rangeFilterDTOList: [
@@ -83,12 +84,18 @@ const MultiClusterPage = () => {
   };
 
   const getSupportKafkaVersion = () => {
+    Utils.request(API.supportKafkaVersion).then((res) => {
+      setKafkaVersions(Object.keys(res || {}));
+    });
+  };
+
+  const getExistKafkaVersion = () => {
     setVersionLoading(true);
-    Utils.request(API.supportKafkaVersion)
+    Utils.request(API.getClustersVersion)
-      .then((res) => {
+      .then((versions: string[]) => {
-        setKafkaVersion(res || {});
+        setExistKafkaVersion(versions || []);
         setVersionLoading(false);
-        setCheckedKafkaVersion(res ? Object.keys(res) : []);
+        setCheckedKafkaVersions(versions || []);
       })
       .catch((err) => {
         setVersionLoading(false);
@@ -108,6 +115,7 @@ const MultiClusterPage = () => {
   useEffect(() => {
     getPhyClusterState();
     getSupportKafkaVersion();
+    getExistKafkaVersion();
   }, []);
 
   useEffect(() => {
@@ -128,7 +136,7 @@ const MultiClusterPage = () => {
       .finally(() => {
         setClusterLoading(false);
       });
-  }, [sortInfo, checkedKafkaVersion, healthScoreRange, statusList, searchKeywords, isReload]);
+  }, [sortInfo, checkedKafkaVersions, healthScoreRange, statusList, searchKeywords, isReload]);
 
   const onSilderChange = (value: number[]) => {
     setHealthScoreRange(value);
@@ -151,7 +159,7 @@ const MultiClusterPage = () => {
   };
 
   const onChangeCheckGroup = (list: []) => {
-    setCheckedKafkaVersion(list);
+    setCheckedKafkaVersions(list);
   };
 
   const afterSubmitSuccessAccessClusters = () => {
@@ -247,10 +255,10 @@ const MultiClusterPage = () => {
 
                 <div className="header-filter-bottom">
                   <div className="header-filter-bottom-item header-filter-bottom-item-checkbox">
-                    <h3 className="header-filter-bottom-item-title">版本选择</h3>
+                    <h3 className="header-filter-bottom-item-title">版本分布</h3>
                     <div className="header-filter-bottom-item-content flex">
-                      {Object.keys(kafkaVersion).length ? (
+                      {existKafkaVersion.length ? (
-                        <CustomCheckGroup kafkaVersion={Object.keys(kafkaVersion)} onChangeCheckGroup={onChangeCheckGroup} />
+                        <CustomCheckGroup kafkaVersions={existKafkaVersion} onChangeCheckGroup={onChangeCheckGroup} />
                       ) : null}
                     </div>
                   </div>
@@ -307,7 +315,7 @@ const MultiClusterPage = () => {
       <AccessClusters
         visible={visible}
         setVisible={setVisible}
-        kafkaVersion={Object.keys(kafkaVersion)}
+        kafkaVersion={kafkaVersions}
         afterSubmitSuccess={afterSubmitSuccessAccessClusters}
       />
     </>

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

@@ -295,6 +295,7 @@
 
                 .more-btn {
                   height: 30px;
+                  line-height: 23px;
                 }
               }
             }
@@ -652,7 +653,7 @@
     display: -webkit-inline-box;
     margin-right: 16px;
 
-    &.adjust-height-style{
+    &.adjust-height-style {
       .dcloud-form-item-label {
         padding: 0;
         label {

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

@@ -84,6 +84,7 @@ export const getChartConfig = (props: any) => {
           lineStyle: {
             width: 1,
           },
+          smooth: 0.25,
           symbol: 'emptyCircle',
           symbolSize: 4,
           // 面积图样式

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

@@ -1,18 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import {
+import { AppContainer, Button, Divider, Drawer, Form, InputNumber, notification, SingleChart, Space, Spin, Utils } from 'knowdesign';
-  AppContainer,
-  Button,
-  Divider,
-  Drawer,
-  Form,
-  InputNumber,
-  notification,
-  SingleChart,
-  Space,
-  Spin,
-  Utils,
-} from 'knowdesign';
 import Api, { MetricType } from '@src/api/index';
 import { getBasicChartConfig, getUnit } from '@src/constants/chartConfig';
 import { formatChartData, MetricDefaultChartDataType } from '@src/components/DashboardDragChart/config';
@@ -193,6 +181,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
                       lineStyle: {
                         width: 1,
                       },
+                      smooth: 0.25,
                       symbol: 'emptyCircle',
                       symbolSize: 4,
                       emphasis: {

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

@@ -13,6 +13,7 @@ export const getChartConfig = (title: string) => {
         lineStyle: {
           width: 1,
         },
+        smooth: 0.25,
         symbol: 'emptyCircle',
         symbolSize: 4,
         emphasis: {

km-console/packages/layout-clusters-fe/src/style-addition.less

@@ -1,5 +1,9 @@
 @import '~knowdesign/es/style/index.less';
 
+@height-base: 36px;
+@height-lg: 42px;
+@height-sm: 27px;
+
 // 全局变量替换
 @body-background: #ebebf3;
 @input-color: #495057;