fix: 图表逻辑 & 展示优化

2025-12-24 11:52:08 +08:00 · 2022-10-21 11:42:34 +08:00
parent 26e60d8a64
commit 62f7d3f72f
20 changed files with 328 additions and 260 deletions
--- a/km-console/packages/layout-clusters-fe/src/api/index.ts
+++ b/km-console/packages/layout-clusters-fe/src/api/index.ts
@@ -14,6 +14,7 @@ export enum MetricType {
  Broker = 103,
  Partition = 104,
  Replication = 105,
+  Zookeeper = 110,
  Controls = 901,
 }

@@ -61,6 +62,8 @@ const api = {
  phyClusterState: getApi(`/physical-clusters/state`),

  getOperatingStateList: (clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/groups-overview`),
+  getGroupTopicList: (clusterPhyId: number, groupName: string) => getApi(`/clusters/${clusterPhyId}/groups/${groupName}/topics-overview`),
+
  // 物理集群接口
  phyCluster: getApi(`/physical-clusters`),
  getPhyClusterBasic: (clusterPhyId: number) => getApi(`/physical-clusters/${clusterPhyId}/basic`),
@@ -127,6 +130,7 @@ const api = {
    getApi(`/clusters/${clusterPhyId}/topics/${topicName}/brokers-partitions-summary`),
  getTopicPartitionsDetail: (clusterPhyId: string, topicName: string) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/partitions`),
  getTopicMessagesList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/records`), // Messages列表
+  getTopicGroupList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/groups-overview`), // Consumers列表
  getTopicMessagesMetadata: (topicName: string, clusterPhyId: number) => getApi(`/clusters//${clusterPhyId}/topics/${topicName}/metadata`), // Messages列表
  getTopicACLsList: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/topics/${topicName}/acl-Bindings`), // ACLs列表
  getTopicConfigs: (topicName: string, clusterPhyId: number) => getApi(`/clusters/${clusterPhyId}/config-topics/${topicName}/configs`), // Configuration列表
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/IndicatorDrawer.tsx
@@ -1,15 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { Drawer, Button, Space, Divider, AppContainer, ProTable } from 'knowdesign';
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { Drawer, Button, Space, Divider, AppContainer, ProTable, Utils } from 'knowdesign';
 import { IconFont } from '@knowdesign/icons';
-import { IindicatorSelectModule } from './index';
+import { MetricSelect } from './index';
 import './style/indicator-drawer.less';
 import { useLocation } from 'react-router-dom';

 interface PropsType extends React.HTMLAttributes<HTMLDivElement> {
-  onClose: () => void;
-  visible: boolean;
-  isGroup?: boolean; // 是否分组
-  indicatorSelectModule: IindicatorSelectModule;
+  metricSelect: MetricSelect;
 }

 interface MetricInfo {
@@ -27,25 +24,25 @@ type CategoryData = {
  metrics: MetricInfo[];
 };

-const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange }: any) => {
-  const innerColumns = [
-    {
-      title: '指标名称',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: '单位',
-      dataIndex: 'unit',
-      key: 'unit',
-    },
-    {
-      title: '描述',
-      dataIndex: 'desc',
-      key: 'desc',
-    },
-  ];
+const expandedRowColumns = [
+  {
+    title: '指标名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '单位',
+    dataIndex: 'unit',
+    key: 'unit',
+  },
+  {
+    title: '描述',
+    dataIndex: 'desc',
+    key: 'desc',
+  },
+];

+const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange }: any) => {
  return (
    <div
      style={{
@@ -62,7 +59,7 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
          showHeader: false,
          noPagination: true,
          rowKey: 'name',
-          columns: innerColumns,
+          columns: expandedRowColumns,
          dataSource: metrics,
          attrs: {
            rowSelection: {
@@ -79,13 +76,14 @@ const ExpandedRow = ({ metrics, category, selectedMetrics, selectedMetricChange
  );
 };

-const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType) => {
+const MetricSelect = forwardRef(({ metricSelect }: PropsType, ref) => {
  const [global] = AppContainer.useGlobalValue();
  const { pathname } = useLocation();
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
  const [categoryData, setCategoryData] = useState<CategoryData[]>([]);
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [childrenSelectedRowKeys, setChildrenSelectedRowKeys] = useState<SelectedMetrics>({});
+  const [visible, setVisible] = useState<boolean>(false);

  const columns = [
    {
@@ -96,13 +94,13 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
  ];

  const formateTableData = () => {
-    const tableData = indicatorSelectModule.tableData;
+    const tableData = metricSelect.tableData;
    const categoryData: {
      [category: string]: MetricInfo[];
    } = {};

    tableData.forEach(({ name, desc }) => {
-      const metricDefine = global.getMetricDefine(indicatorSelectModule?.metricType, name);
+      const metricDefine = global.getMetricDefine(metricSelect?.metricType, name);
      const returnData = {
        name,
        desc,
@@ -125,12 +123,12 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
  };

  const formateSelectedKeys = () => {
-    const newKeys = indicatorSelectModule.selectedRows;
+    const newKeys = metricSelect.selectedRows;
    const result: SelectedMetrics = {};
    const selectedCategories: string[] = [];

    newKeys.forEach((name: string) => {
-      const metricDefine = global.getMetricDefine(indicatorSelectModule?.metricType, name);
+      const metricDefine = global.getMetricDefine(metricSelect?.metricType, name);
      if (metricDefine) {
        if (!result[metricDefine.category]) {
          result[metricDefine.category] = [name];
@@ -217,10 +215,10 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
    const allRowKeys: string[] = [];
    Object.entries(childrenSelectedRowKeys).forEach(([, arr]) => allRowKeys.push(...arr));

-    indicatorSelectModule.submitCallback(allRowKeys).then(
+    metricSelect.submitCallback(allRowKeys).then(
      () => {
        setConfirmLoading(false);
-        onClose();
+        setVisible(false);
      },
      () => {
        setConfirmLoading(false);
@@ -231,7 +229,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
  const rowSelection = {
    selectedRowKeys: selectedCategories,
    onChange: rowChange,
-    // getCheckboxProps: (record: any) => indicatorSelectModule.checkboxProps && indicatorSelectModule.checkboxProps(record),
+    // getCheckboxProps: (record: any) => metricSelect.checkboxProps && metricSelect.checkboxProps(record),
    getCheckboxProps: (record: CategoryData) => {
      const isAllSelected = record.metrics.length === childrenSelectedRowKeys[record.category]?.length;
      const isNotCheck = !childrenSelectedRowKeys[record.category] || childrenSelectedRowKeys[record.category]?.length === 0;
@@ -241,25 +239,33 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
    },
  };

-  useEffect(formateTableData, [indicatorSelectModule.tableData]);
+  useEffect(formateTableData, [metricSelect.tableData]);

  useEffect(() => {
    visible && formateSelectedKeys();
-  }, [visible, indicatorSelectModule.selectedRows]);
+  }, [visible, metricSelect.selectedRows]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: () => setVisible(true),
+    }),
+    []
+  );

  return (
    <>
      <Drawer
        className="indicator-drawer"
-        title={indicatorSelectModule.drawerTitle || '指标筛选'}
+        title={metricSelect.drawerTitle || '指标筛选'}
        width="868px"
        forceRender={true}
-        onClose={onClose}
+        onClose={() => setVisible(false)}
        visible={visible}
        maskClosable={false}
        extra={
          <Space>
-            <Button size="small" onClick={onClose}>
+            <Button size="small" onClick={() => setVisible(false)}>
              取消
            </Button>
            <Button
@@ -281,6 +287,7 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
            rowKey: 'category',
            columns: columns,
            dataSource: categoryData,
+            noPagination: true,
            attrs: {
              rowSelection: rowSelection,
              expandable: {
@@ -319,6 +326,6 @@ const IndicatorDrawer = ({ onClose, visible, indicatorSelectModule }: PropsType)
      </Drawer>
    </>
  );
-};
+});

-export default IndicatorDrawer;
+export default MetricSelect;
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx
@@ -26,6 +26,7 @@ const OptionsDefault = [

 const NodeScope = ({ nodeScopeModule, change }: propsType) => {
  const {
+    hasCustomScope,
    customScopeList: customList,
    scopeName = '',
    scopeLabel = '自定义范围',
@@ -128,51 +129,53 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
            </Space>
          </Radio.Group>
        </div>
-        <div className="flx_r">
-          <h6 className="time_title">{scopeLabel}</h6>
-          <div className="custom-scope">
-            <div className="check-row">
-              <Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
-                全选
-              </Checkbox>
-              <Input
-                className="search-input"
-                suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
-                size="small"
-                placeholder={searchPlaceholder}
-                onChange={(e) => setScopeSearchValue(e.target.value)}
-              />
-            </div>
-            <div className="fixed-height">
-              <Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
-                <Row gutter={[10, 12]}>
-                  {customList
-                    .filter((item) => item.label.includes(scopeSearchValue))
-                    .map((item) => (
-                      <Col span={12} key={item.value}>
-                        <Checkbox value={item.value}>{item.label}</Checkbox>
-                      </Col>
-                    ))}
-                </Row>
-              </Checkbox.Group>
-            </div>
+        {hasCustomScope && (
+          <div className="flx_r">
+            <h6 className="time_title">{scopeLabel}</h6>
+            <div className="custom-scope">
+              <div className="check-row">
+                <Checkbox className="check-all" indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
+                  全选
+                </Checkbox>
+                <Input
+                  className="search-input"
+                  suffix={<IconFont type="icon-fangdajing" style={{ fontSize: '16px' }} />}
+                  size="small"
+                  placeholder={searchPlaceholder}
+                  onChange={(e) => setScopeSearchValue(e.target.value)}
+                />
+              </div>
+              <div className="fixed-height">
+                <Checkbox.Group style={{ width: '100%' }} onChange={checkChange} value={checkedListTemp}>
+                  <Row gutter={[10, 12]}>
+                    {customList
+                      .filter((item) => item.label.includes(scopeSearchValue))
+                      .map((item) => (
+                        <Col span={12} key={item.value}>
+                          <Checkbox value={item.value}>{item.label}</Checkbox>
+                        </Col>
+                      ))}
+                  </Row>
+                </Checkbox.Group>
+              </div>

-            <div className="btn-con">
-              <Button
-                type="primary"
-                size="small"
-                className="btn-sure"
-                onClick={customSure}
-                disabled={checkedListTemp?.length > 0 ? false : true}
-              >
-                确定
-              </Button>
-              <Button size="small" onClick={customCancel}>
-                取消
-              </Button>
+              <div className="btn-con">
+                <Button
+                  type="primary"
+                  size="small"
+                  className="btn-sure"
+                  onClick={customSure}
+                  disabled={checkedListTemp?.length > 0 ? false : true}
+                >
+                  确定
+                </Button>
+                <Button size="small" onClick={customCancel}>
+                  取消
+                </Button>
+              </div>
            </div>
          </div>
-        </div>
+        )}
      </div>
    </div>
  );
@@ -185,7 +188,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
          visible={popVisible}
          content={clickContent}
          placement="bottomRight"
-          overlayClassName="d-node-scope-popover"
+          overlayClassName={`d-node-scope-popover ${hasCustomScope ? 'large-size' : ''}`}
          onVisibleChange={visibleChange}
        >
          <span className="input-span">
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/image/empty.png
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/image/empty.png
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/index.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import { Tooltip, Select, Utils, Divider, Button } from 'knowdesign';
+import React, { useEffect, useRef, useState } from 'react';
+import { Select, Divider, Button } from 'knowdesign';
 import { IconFont } from '@knowdesign/icons';
 import moment from 'moment';
 import { DRangeTime } from 'knowdesign';
-import IndicatorDrawer from './IndicatorDrawer';
+import MetricSelect from './MetricSelect';
 import NodeScope from './NodeScope';

 import './style/index.less';
@@ -24,8 +24,8 @@ export interface KsHeaderOptions {
    data: number | number[];
  };
 }
-export interface IindicatorSelectModule {
-  metricType?: MetricType;
+export interface MetricSelect {
+  metricType: MetricType;
  hide?: boolean;
  drawerTitle?: string;
  selectedRows: (string | number)[];
@@ -47,20 +47,27 @@ export interface IcustomScope {
 }

 export interface InodeScopeModule {
+  hasCustomScope: boolean;
  customScopeList: IcustomScope[];
  scopeName?: string;
  scopeLabel?: string;
  searchPlaceholder?: string;
  change?: () => void;
 }
+
 interface PropsType {
-  indicatorSelectModule?: IindicatorSelectModule;
+  metricSelect?: MetricSelect;
  hideNodeScope?: boolean;
  hideGridSelect?: boolean;
  nodeScopeModule?: InodeScopeModule;
  onChange: (options: KsHeaderOptions) => void;
 }

+interface ScopeData {
+  isTop: boolean;
+  data: any;
+}
+
 // 列布局选项
 const GRID_SIZE_OPTIONS = [
  {
@@ -77,15 +84,17 @@ const GRID_SIZE_OPTIONS = [
  },
 ];

-const SingleChartHeader = ({
-  indicatorSelectModule,
+const MetricOperateBar = ({
+  metricSelect,
  nodeScopeModule = {
+    hasCustomScope: false,
    customScopeList: [],
  },
  hideNodeScope = false,
  hideGridSelect = false,
  onChange: onChangeCallback,
 }: PropsType): JSX.Element => {
+  const metricSelectRef = useRef(null);
  const [gridNum, setGridNum] = useState<number>(GRID_SIZE_OPTIONS[1].value);
  const [rangeTime, setRangeTime] = useState<[number, number]>(() => {
    const curTimeStamp = moment().valueOf();
@@ -93,16 +102,35 @@ const SingleChartHeader = ({
  });
  const [isRelativeRangeTime, setIsRelativeRangeTime] = useState(true);
  const [isAutoReload, setIsAutoReload] = useState(false);
-  const [indicatorDrawerVisible, setIndicatorDrawerVisible] = useState(false);
-
-  const [scopeData, setScopeData] = useState<{
-    isTop: boolean;
-    data: any;
-  }>({
+  const [scopeData, setScopeData] = useState<ScopeData>({
    isTop: true,
    data: 5,
  });

+  const sizeChange = (value: number) => setGridNum(value);
+
+  const timeChange = (curRangeTime: [number, number], isRelative: boolean) => {
+    setRangeTime([...curRangeTime]);
+    setIsRelativeRangeTime(isRelative);
+  };
+
+  const reloadRangeTime = () => {
+    if (isRelativeRangeTime) {
+      const timeLen = rangeTime[1] - rangeTime[0] || 0;
+      const curTimeStamp = moment().valueOf();
+      setRangeTime([curTimeStamp - timeLen, curTimeStamp]);
+    } else {
+      setRangeTime([...rangeTime]);
+    }
+  };
+
+  const nodeScopeChange = (data: any, isTop?: any) => {
+    setScopeData({
+      isTop,
+      data,
+    });
+  };
+
  useEffect(() => {
    onChangeCallback({
      rangeTime,
@@ -129,68 +157,37 @@ const SingleChartHeader = ({
    };
  }, [isRelativeRangeTime, rangeTime]);

-  const sizeChange = (value: number) => {
-    setGridNum(value);
-  };
-
-  const timeChange = (curRangeTime: [number, number], isRelative: boolean) => {
-    setRangeTime([...curRangeTime]);
-    setIsRelativeRangeTime(isRelative);
-  };
-
-  const reloadRangeTime = () => {
-    if (isRelativeRangeTime) {
-      const timeLen = rangeTime[1] - rangeTime[0] || 0;
-      const curTimeStamp = moment().valueOf();
-      setRangeTime([curTimeStamp - timeLen, curTimeStamp]);
-    } else {
-      setRangeTime([...rangeTime]);
-    }
-  };
-
-  const openIndicatorDrawer = () => {
-    setIndicatorDrawerVisible(true);
-  };
-
-  const closeIndicatorDrawer = () => {
-    setIndicatorDrawerVisible(false);
-  };
-
-  const nodeScopeChange = (data: any, isTop?: any) => {
-    setScopeData({
-      isTop,
-      data,
-    });
-  };
-
  return (
    <>
      <div className="ks-chart-container">
        <div className="ks-chart-container-header">
          <div className="header-left">
+            {/* 刷新 */}
            <div className="icon-box" onClick={reloadRangeTime}>
              <IconFont className="icon" type="icon-shuaxin1" />
            </div>
            <Divider type="vertical" style={{ height: 20, top: 0 }} />
+            {/* 时间选择 */}
            <DRangeTime timeChange={timeChange} rangeTimeArr={rangeTime} />
          </div>
          <div className="header-right">
+            {/* 节点范围 */}
            {!hideNodeScope && <NodeScope nodeScopeModule={nodeScopeModule} change={nodeScopeChange} />}
+            {/* 分栏 */}
            {!hideGridSelect && (
              <Select className="grid-select" style={{ width: 70 }} value={gridNum} options={GRID_SIZE_OPTIONS} onChange={sizeChange} />
            )}
            {(!hideNodeScope || !hideGridSelect) && <Divider type="vertical" style={{ height: 20, top: 0 }} />}
-            <Button type="primary" onClick={openIndicatorDrawer}>
+            <Button type="primary" onClick={() => metricSelectRef.current.open()}>
              指标筛选
            </Button>
          </div>
        </div>
      </div>
-      {!indicatorSelectModule?.hide && (
-        <IndicatorDrawer visible={indicatorDrawerVisible} onClose={closeIndicatorDrawer} indicatorSelectModule={indicatorSelectModule} />
-      )}
+      {/* 指标筛选 */}
+      {!metricSelect?.hide && <MetricSelect ref={metricSelectRef} metricSelect={metricSelect} />}
    </>
  );
 };

-export default SingleChartHeader;
+export default MetricOperateBar;
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/index.less
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/index.less
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/indicator-drawer.less
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/indicator-drawer.less
@@ -1,13 +1,8 @@
-@root-entry-name: 'default';
-@import '~knowdesign/es/basic/style/themes/index';
-@import '~knowdesign/es/basic/style/mixins/index';
-
-
-.indicator-drawer{
-    .dcloud-drawer-body{
-      padding-top: 2px !important;
-    }
+.indicator-drawer {
+  .dcloud-drawer-body {
+    padding-top: 2px !important;
  }
+}
 // .dd-indicator-drawer {
 //   @drawerItemH: 27px;
 //   @primary-color: #556ee6;
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/node-scope.less
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/node-scope.less
@@ -63,9 +63,16 @@
  }
  .@{ant-prefix}-popover-inner-content {
    padding: 16px 24px;
-    width: 479px;
+    width: 200px;
    box-sizing: border-box;
  }
+  &.large-size {
+    .@{ant-prefix}-popover-inner-content {
+      padding: 16px 24px;
+      width: 479px;
+      box-sizing: border-box;
+    }
+  }
  &.@{ant-prefix}-popover-placement-bottomRight {
    // padding-top: 0;
  }
--- a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/query-module.less
+++ b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/style/query-module.less
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx
@@ -2,11 +2,10 @@ import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, use
 import { AppContainer, Drawer, Spin, Table, SingleChart, Utils, Tooltip } from 'knowdesign';
 import moment from 'moment';
 import api, { MetricType } from '@src/api';
-import { MetricDefaultChartDataType, MetricChartDataType, formatChartData } from '@src/constants/chartConfig';
+import { OriginMetricData, FormattedMetricData, formatChartData } from '@src/constants/chartConfig';
 import { useParams } from 'react-router-dom';
 import { debounce } from 'lodash';
 import { getDetailChartConfig } from './config';
-import { UNIT_MAP } from '@src/constants/chartConfig';
 import RenderEmpty from '../RenderEmpty';

 interface ChartDetailProps {
@@ -35,7 +34,7 @@ interface ChartInfo {
  curTimeRange?: readonly [number, number];
  sliderPos?: readonly [number, number];
  transformUnit?: [string, number];
-  fullMetricData?: MetricChartDataType;
+  fullMetricData?: FormattedMetricData;
  oldDataZoomOption?: any;
 }

@@ -79,7 +78,7 @@ const ChartDetail = (props: ChartDetailProps) => {
        isLoadingAdditionData: false,
        isLoadedFullData: false,
        fullTimeRange: curTimeRange,
-        fullMetricData: {} as MetricChartDataType,
+        fullMetricData: {} as FormattedMetricData,
        curTimeRange,
        oldDataZoomOption: {},
        sliderPos: [0, 0],
@@ -90,7 +89,7 @@ const ChartDetail = (props: ChartDetailProps) => {

  const [loading, setLoading] = useState(false);
  // 当前展示的图表数据
-  const [curMetricData, setCurMetricData] = useState<MetricChartDataType>();
+  const [curMetricData, setCurMetricData] = useState<FormattedMetricData>();
  // 图表数据的各项计算指标
  const [tableInfo, setTableInfo] = useState<MetricTableInfo[]>([]);
  const [linesStatus, setLinesStatus] = useState<{
@@ -329,7 +328,7 @@ const ChartDetail = (props: ChartDetailProps) => {
        if (i === DEFAULT_REQUEST_COUNT - 1) {
          Promise.all(requestArr).then((resList) => {
            // 填充增量的图表数据
-            resList.forEach((res: MetricDefaultChartDataType[], i) => {
+            resList.forEach((res: OriginMetricData[], i) => {
              // 最后一个请求返回数据为空时，认为已获取到全部图表数据
              if (!res?.length) {
                //  标记数据已经全部加载完毕
@@ -368,7 +367,7 @@ const ChartDetail = (props: ChartDetailProps) => {
  };

  // 处理增量图表数据
-  const resolveAdditionChartData = (res: MetricDefaultChartDataType[], timeRange: [number, number]) => {
+  const resolveAdditionChartData = (res: OriginMetricData[], timeRange: [number, number]) => {
    // 格式化图表需要的数据
    const formattedMetricData = formatChartData(
      res,
@@ -376,7 +375,7 @@ const ChartDetail = (props: ChartDetailProps) => {
      metricType,
      timeRange,
      chartInfo.current.transformUnit
-    ) as MetricChartDataType[];
+    ) as FormattedMetricData[];
    // 增量填充图表数据
    const additionMetricPoints = formattedMetricData[0].metricLines;
    Object.values(additionMetricPoints).forEach((additionLine) => {
@@ -536,9 +535,7 @@ const ChartDetail = (props: ChartDetailProps) => {
          // 如果图表返回数据
          if (res?.length) {
            // 格式化图表需要的数据
-            const formattedMetricData = (
-              formatChartData(res, global.getMetricDefine || {}, metricType, curTimeRange) as MetricChartDataType[]
-            )[0];
+            const formattedMetricData = formatChartData(res, global.getMetricDefine || {}, metricType, curTimeRange)[0];
            // 填充图表数据
            let initFullTimeRange = curTimeRange;
            const pointsOfFirstLine = formattedMetricData.metricLines.find((line) => line.data.length).data;
@@ -549,14 +546,6 @@ const ChartDetail = (props: ChartDetailProps) => {
              ] as const;
            }

-            // 获取单位保存起来
-            let transformUnit = undefined;
-            Object.entries(UNIT_MAP).forEach((unit) => {
-              if (formattedMetricData.metricUnit.includes(unit[0])) {
-                transformUnit = unit;
-              }
-            });
-
            updateChartInfo({
              fullMetricData: formattedMetricData,
              fullTimeRange: [...initFullTimeRange],
@@ -565,7 +554,7 @@ const ChartDetail = (props: ChartDetailProps) => {
                initFullTimeRange[1] - (initFullTimeRange[1] - initFullTimeRange[0]) * DATA_ZOOM_DEFAULT_SCALE,
                initFullTimeRange[1],
              ],
-              transformUnit,
+              transformUnit: formattedMetricData.targetUnit,
            });
            setCurMetricData(formattedMetricData);
            const newLinesStatus: { [lineName: string]: boolean } = {};
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/config.tsx
@@ -1,11 +1,22 @@
+import api, { MetricType } from '@src/api';
 import { getBasicChartConfig, CHART_COLOR_LIST } from '@src/constants/chartConfig';

+const METRIC_DASHBOARD_REQ_MAP = {
+  [MetricType.Broker]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Broker),
+  [MetricType.Topic]: (clusterId: string) => api.getDashboardMetricChartData(clusterId, MetricType.Topic),
+  [MetricType.Zookeeper]: (clusterId: string) => '',
+};
+
+export const getMetricDashboardReq = (clusterId: string, type: MetricType.Broker | MetricType.Topic | MetricType.Zookeeper) =>
+  METRIC_DASHBOARD_REQ_MAP[type](clusterId);
+
 const seriesCallback = (lines: { name: string; data: [number, string | number][] }[]) => {
  const len = CHART_COLOR_LIST.length;
  // series 配置
  return lines.map((line, i) => {
    return {
      ...line,
+      z: len - i,
      lineStyle: {
        width: 1.5,
      },
@@ -13,6 +24,7 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
      symbol: 'emptyCircle',
      symbolSize: 4,
      smooth: 0.25,
+      color: CHART_COLOR_LIST[i % len],
      areaStyle: {
        color: {
          type: 'linear',
@@ -38,17 +50,13 @@ const seriesCallback = (lines: { name: string; data: [number, string | number][]
 };

 // 返回图表配置
-export const getChartConfig = (title: string, metricLength: number) => {
+export const getChartConfig = (title: string, metricLength: number, showLegend = true) => {
  return {
    option: getBasicChartConfig({
      title: { show: false },
-      grid: { top: 24 },
+      grid: { top: 24, bottom: showLegend ? 40 : 20 },
      tooltip: { enterable: metricLength > 9, legendContextMaxHeight: 192 },
-      color: CHART_COLOR_LIST,
-      // xAxis: {
-      //   type: 'time',
-      //   boundaryGap: ['5%', '5%'],
-      // },
+      legend: { show: showLegend },
    }),
    seriesCallback,
  };
@@ -67,7 +75,6 @@ export const getDetailChartConfig = (title: string, sliderPos: readonly [number,
      legend: {
        show: false,
      },
-      color: CHART_COLOR_LIST,
      dataZoom: [
        {
          type: 'inside',
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.less
@@ -1,5 +1,5 @@
 .topic-dashboard {
-  height: calc(100% - 160px);
+  height: calc(100% - 162px);
  padding-bottom: 10px;
  .ks-chart-container-header {
    margin-top: 12px;
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/index.tsx
@@ -4,17 +4,11 @@ import { Utils, Empty, Spin, AppContainer, SingleChart, Tooltip } from 'knowdesi
 import { IconFont } from '@knowdesign/icons';
 import { useParams } from 'react-router-dom';
 import api, { MetricType } from '@src/api';
-import {
-  MetricInfo,
-  MetricDefaultChartDataType,
-  MetricChartDataType,
-  formatChartData,
-  resolveMetricsRank,
-} from '@src/constants/chartConfig';
-import SingleChartHeader, { KsHeaderOptions } from '../SingleChartHeader';
+import { MetricInfo, OriginMetricData, FormattedMetricData, formatChartData, resolveMetricsRank } from '@src/constants/chartConfig';
+import ChartOperateBar, { KsHeaderOptions } from '../ChartOperateBar';
 import DragGroup from '../DragGroup';
-import ChartDetail from './ChartDetail';
-import { getChartConfig } from './config';
+import ChartDetail from './Detail';
+import { getChartConfig, getMetricDashboardReq } from './config';
 import './index.less';

 interface IcustomScope {
@@ -33,7 +27,7 @@ const busInstance = new EventBus();

 const DRAG_GROUP_GUTTER_NUM: [number, number] = [16, 16];

-const DashboardDragChart = (props: PropsType): JSX.Element => {
+const DraggableCharts = (props: PropsType): JSX.Element => {
  const [global] = AppContainer.useGlobalValue();
  const { type: dashboardType } = props;
  const { clusterId } = useParams<{
@@ -44,7 +38,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
  const [metricsList, setMetricsList] = useState<MetricInfo[]>([]); // 指标列表
  const [selectedMetricNames, setSelectedMetricNames] = useState<(string | number)[]>([]); // 默认选中的指标的列表
  const [curHeaderOptions, setCurHeaderOptions] = useState<ChartFilterOptions>();
-  const [metricChartData, setMetricChartData] = useState<MetricChartDataType[]>([]); // 指标图表数据列表
+  const [metricChartData, setMetricChartData] = useState<FormattedMetricData[]>([]); // 指标图表数据列表
  const [gridNum, setGridNum] = useState<number>(12); // 图表列布局
  const metricRankList = useRef<string[]>([]);
  const chartDetailRef = useRef(null);
@@ -85,6 +79,9 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
      updateRank([...supportMetrics]);
      setMetricsList(supportMetrics);
      setSelectedMetricNames(selectedMetrics);
+      if (!selectedMetrics.length) {
+        setLoading(false);
+      }
    });
  };

@@ -106,16 +103,24 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
    const curTimestamp = Date.now();
    curFetchingTimestamp.current = curTimestamp;

-    Utils.post(api.getDashboardMetricChartData(clusterId, dashboardType), {
-      startTime,
-      endTime,
-      metricsNames: selectedMetricNames,
-      topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
-      [dashboardType === MetricType.Broker ? 'brokerIds' : 'topics']: curHeaderOptions?.scopeData?.isTop
-        ? null
-        : curHeaderOptions.scopeData.data,
-    }).then(
-      (res: MetricDefaultChartDataType[] | null) => {
+    const reqBody = Object.assign(
+      {
+        startTime,
+        endTime,
+        metricsNames: selectedMetricNames,
+        topNu: curHeaderOptions?.scopeData?.isTop ? curHeaderOptions.scopeData.data : null,
+      },
+      dashboardType === MetricType.Broker || dashboardType === MetricType.Topic
+        ? {
+            [dashboardType === MetricType.Broker ? 'brokerIds' : 'topics']: curHeaderOptions?.scopeData?.isTop
+              ? null
+              : curHeaderOptions.scopeData.data,
+          }
+        : {}
+    );
+
+    Utils.post(getMetricDashboardReq(clusterId, dashboardType as any), reqBody).then(
+      (res: OriginMetricData[] | null) => {
        // 如果当前请求不是最新请求，则不做任何操作
        if (curFetchingTimestamp.current !== curTimestamp) {
          return;
@@ -131,7 +136,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
            global.getMetricDefine || {},
            dashboardType,
            curHeaderOptions.rangeTime
-          ) as MetricChartDataType[];
+          ) as FormattedMetricData[];
          // 指标排序
          formattedMetricData.sort((a, b) => metricRankList.current.indexOf(a.metricName) - metricRankList.current.indexOf(b.metricName));

@@ -164,7 +169,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
  };

  // 指标选中项更新回调
-  const indicatorChangeCallback = (newMetricNames: (string | number)[]) => {
+  const metricSelectCallback = (newMetricNames: (string | number)[]) => {
    const updateMetrics: { metric: string; set: boolean; rank: number }[] = [];
    // 需要选中的指标
    newMetricNames.forEach(
@@ -218,7 +223,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {

  useEffect(() => {
    // 初始化页面，获取 scope 和 metric 信息
-    getScopeList();
+    (dashboardType === MetricType.Broker || dashboardType === MetricType.Topic) && getScopeList();
    getMetricList();

    setTimeout(() => observeDashboardWidthChange());
@@ -226,19 +231,22 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {

  return (
    <div id="dashboard-drag-chart" className="topic-dashboard">
-      <SingleChartHeader
+      <ChartOperateBar
        onChange={ksHeaderChange}
        nodeScopeModule={{
+          hasCustomScope: !(dashboardType === MetricType.Zookeeper),
          customScopeList: scopeList,
-          scopeName: dashboardType === MetricType.Broker ? 'Broker' : 'Topic',
-          scopeLabel: `自定义 ${dashboardType === MetricType.Broker ? 'Broker' : 'Topic'} 范围`,
+          scopeName: dashboardType === MetricType.Broker ? 'Broker' : dashboardType === MetricType.Topic ? 'Topic' : 'Zookeeper',
+          scopeLabel: `自定义 ${
+            dashboardType === MetricType.Broker ? 'Broker' : dashboardType === MetricType.Topic ? 'Topic' : 'Zookeeper'
+          } 范围`,
        }}
-        indicatorSelectModule={{
+        metricSelect={{
          hide: false,
          metricType: dashboardType,
          tableData: metricsList,
          selectedRows: selectedMetricNames,
-          submitCallback: indicatorChangeCallback,
+          submitCallback: metricSelectCallback,
        }}
      />
      <div className="topic-dashboard-container">
@@ -258,7 +266,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
                }}
              >
                {metricChartData.map((data) => {
-                  const { metricName, metricUnit, metricLines } = data;
+                  const { metricName, metricUnit, metricLines, showLegend } = data;

                  return (
                    <div key={metricName} className="dashboard-drag-item-box">
@@ -301,7 +309,7 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
                        eventBus={busInstance}
                        propChartData={metricLines}
                        optionMergeProps={{ replaceMerge: curHeaderOptions.isAutoReload ? ['xAxis'] : ['series'] }}
-                        {...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length)}
+                        {...getChartConfig(`${metricName}{unit|（${metricUnit}）}`, metricLines.length, showLegend)}
                      />
                    </div>
                  );
@@ -321,4 +329,4 @@ const DashboardDragChart = (props: PropsType): JSX.Element => {
  );
 };

-export default DashboardDragChart;
+export default DraggableCharts;
--- a/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
+++ b/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
@@ -12,30 +12,38 @@ export interface MetricInfo {
 }

 // 接口返回图表原始数据类型
-export interface MetricDefaultChartDataType {
+export interface OriginMetricData {
  metricName: string;
-  metricLines: {
+  metricLines?: {
    name: string;
    createTime: number;
    updateTime: number;
    metricPoints: {
      aggType: string;
      timeStamp: number;
-      value: number;
+      value: string;
      createTime: number;
      updateTime: number;
    }[];
  }[];
+  metricPoints?: {
+    aggType: string;
+    name: string;
+    timeStamp: number;
+    value: string;
+  }[];
 }

 // 格式化后图表数据类型
-export interface MetricChartDataType {
+export interface FormattedMetricData {
  metricName: string;
  metricUnit: string;
  metricLines: {
    name: string;
    data: (string | number)[][];
  }[];
+  showLegend: boolean;
+  targetUnit: [string, number] | undefined;
 }

 // 图表颜色库
@@ -55,22 +63,38 @@ export const CHART_COLOR_LIST = [
  '#C9E795',
 ];

-// 图表存储单位换算
-export const UNIT_MAP = {
+// 图表存储单位
+export const MEMORY_MAP = {
  TB: Math.pow(1024, 4),
  GB: Math.pow(1024, 3),
  MB: Math.pow(1024, 2),
  KB: 1024,
 };
-export const getUnit = (value: number) => Object.entries(UNIT_MAP).find(([, size]) => value / size >= 1) || ['Byte', 1];
-
-// 图表数字单位换算
-export const DATA_NUMBER_MAP = {
+// 图表时间单位
+export const TIME_MAP = {
+  h: 1000 * 60 * 60,
+  min: 1000 * 60,
+  s: 1000,
+};
+// 图表数字单位
+export const NUM_MAP = {
  十亿: Math.pow(1000, 3),
  百万: Math.pow(1000, 2),
  千: 1000,
 };
-export const getDataNumberUnit = (value: number) => Object.entries(DATA_NUMBER_MAP).find(([, size]) => value / size >= 1) || ['', 1];
+const calculateUnit = (map: { [unit: string]: number }, targetValue: number) => {
+  return Object.entries(map).find(([, size]) => targetValue / size >= 1);
+};
+const getMemoryUnit = (value: number) => calculateUnit(MEMORY_MAP, value) || ['Byte', 1];
+const getTimeUnit = (value: number) => calculateUnit(TIME_MAP, value) || ['ms', 1];
+const getNumUnit = (value: number) => calculateUnit(NUM_MAP, value) || ['', 1];
+
+export const getDataUnit = {
+  Memory: getMemoryUnit,
+  Time: getTimeUnit,
+  Num: getNumUnit,
+};
+export type DataUnitType = keyof typeof getDataUnit;

 // 图表补点间隔计算
 export const SUPPLEMENTARY_INTERVAL_MAP = {
@@ -112,9 +136,9 @@ export const resolveMetricsRank = (metricList: MetricInfo[]) => {
  };
 };

-// 补点
+// 图表补点
 export const supplementaryPoints = (
-  lines: MetricChartDataType['metricLines'],
+  lines: FormattedMetricData['metricLines'],
  timeRange: readonly [number, number],
  extraCallback?: (point: [number, 0]) => any[]
 ): void => {
@@ -165,19 +189,39 @@ export const supplementaryPoints = (
 // 格式化图表数据
 export const formatChartData = (
  // 图表源数据
-  metricData: MetricDefaultChartDataType[],
+  metricsData: OriginMetricData[],
  // 获取指标单位
  getMetricDefine: (type: MetricType, metric: string) => MetricsDefine[keyof MetricsDefine],
  // 指标类型
  metricType: MetricType,
  // 图表时间范围，用于补点
  timeRange: readonly [number, number],
-  transformUnit: [string, number] = undefined
-): MetricChartDataType[] => {
-  return metricData.map(({ metricName, metricLines }) => {
+  targetUnit: [string, number] = undefined
+): FormattedMetricData[] => {
+  return metricsData.map((originData) => {
+    const { metricName } = originData;
    const curMetricInfo = (getMetricDefine && getMetricDefine(metricType, metricName)) || null;
-    const isByteUnit = curMetricInfo?.unit?.toLowerCase().includes('byte');
+    let showLegend = true;
+    let metricLines = [];
    let maxValue = -1;
+    let unitType: DataUnitType;
+
+    if (originData?.metricLines && originData?.metricLines !== null) {
+      metricLines = originData.metricLines;
+    } else {
+      showLegend = false;
+      metricLines = [
+        {
+          name: metricName,
+          metricPoints: originData.metricPoints,
+        },
+      ];
+    }
+
+    {
+      const originUnit = curMetricInfo?.unit?.toLowerCase();
+      unitType = originUnit.includes('byte') ? 'Memory' : originUnit.includes('ms') ? 'Time' : 'Num';
+    }

    const PointsMapMethod = ({ timeStamp, value }: { timeStamp: number; value: string | number }) => {
      let parsedValue: string | number = Number(value);
@@ -194,7 +238,7 @@ export const formatChartData = (
    };

    // 初始化返回结构
-    const chartData = {
+    const chartData: FormattedMetricData = {
      metricName,
      metricUnit: curMetricInfo?.unit || '',
      metricLines: metricLines
@@ -203,17 +247,21 @@ export const formatChartData = (
          name,
          data: metricPoints.map(PointsMapMethod),
        })),
+      showLegend,
+      targetUnit: undefined,
    };
    // 按时间先后进行对图表点排序
    chartData.metricLines.forEach(({ data }) => data.sort((a, b) => (a[0] as number) - (b[0] as number)));

    // 图表值单位转换
    if (maxValue > 0) {
-      const [unitName, unitSize]: [string, number] = transformUnit || isByteUnit ? getUnit(maxValue) : getDataNumberUnit(maxValue);
-      chartData.metricUnit = isByteUnit
-        ? chartData.metricUnit.toLowerCase().replace('byte', unitName)
-        : `${unitName}${chartData.metricUnit}`;
-      chartData.metricLines.forEach(({ data }) => data.forEach((point: any) => (point[1] /= unitSize)));
+      const [unitName, unitSize]: [string, number] = targetUnit || getDataUnit[unitType](maxValue);
+      chartData.targetUnit = [unitName, unitSize];
+      chartData.metricUnit =
+        unitType !== 'Num'
+          ? chartData.metricUnit.toLowerCase().replace(unitType === 'Memory' ? 'byte' : 'ms', unitName)
+          : `${unitName}${chartData.metricUnit}`;
+      chartData.metricLines.forEach(({ data }) => data.forEach((point: any) => parseFloat((point[1] /= unitSize).toFixed(3))));
    }

    // 补点
@@ -231,7 +279,7 @@ const tooltipFormatter = (date: any, arr: any, tooltip: any) => {
          <div style="display:flex;align-items:center;">
            <div style="margin-right:4px;width:8px;height:2px;background-color:${item.color};"></div>
            <div style="flex:1;display:flex;justify-content:space-between;align-items:center;overflow: hidden;">
-              <span style="font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: no-wrap;">
+              <span style="font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                ${item.seriesName}
              </span>
              <span style="font-size:12px;color:#212529;line-height:18px;font-family:HelveticaNeue-Medium; padding-left: 6px;">
@@ -324,6 +372,7 @@ export const getBasicChartConfig = (props: any = {}) => {
      tooltip: false,
      ...legend,
    },
+    color: CHART_COLOR_LIST,
    // 横坐标配置
    xAxis: {
      type: 'category',
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerDashboard/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { MetricType } from '@src/api';
 import BrokerHealthCheck from '@src/components/CardBar/BrokerHealthCheck';
-import DashboardDragChart from '@src/components/DashboardDragChart';
+import DraggableCharts from '@src/components/DraggableCharts';
 import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';
 import { AppContainer } from 'knowdesign';

@@ -19,7 +19,7 @@ const BrokerDashboard = (): JSX.Element => {
        />
      </div>
      <BrokerHealthCheck />
-      <DashboardDragChart type={MetricType.Broker} />
+      <DraggableCharts type={MetricType.Broker} />
    </>
  );
 };
--- a/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/MutliClusterPage/List.tsx
@@ -1,4 +1,5 @@
-import { AppContainer, Divider, Form, Input, List, message, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
+import { AppContainer, Divider, Form, Input, List, Modal, Progress, Spin, Tooltip, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import { IconFont } from '@knowdesign/icons';
 import moment from 'moment';
 import API from '@src/api';
@@ -11,7 +12,7 @@ import { useIntl } from 'react-intl';
 import api, { MetricType } from '@src/api';
 import { getHealthClassName, getHealthProcessColor, getHealthText } from '../SingleClusterDetail/config';
 import { ClustersPermissionMap } from '../CommonConfig';
-import { getUnit, getDataNumberUnit } from '@src/constants/chartConfig';
+import { getDataUnit } from '@src/constants/chartConfig';
 import SmallChart from '@src/components/SmallChart';
 import { SearchParams } from './HomePage';

@@ -235,14 +236,14 @@ const ClusterList = (props: { searchParams: SearchParams; showAccessCluster: any

      // 如果单位是 字节 ，进行单位换算
      if (line.unit.toLowerCase().includes('byte')) {
-        const [unit, size] = getUnit(line.value);
+        const [unit, size] = getDataUnit['Memory'](line.value);
        line.value = Number((line.value / size).toFixed(2));
        line.unit = line.unit.toLowerCase().replace('byte', unit);
      }

      // Messages 指标值特殊处理
      if (line.metricName === 'LeaderMessages') {
-        const [unit, size] = getDataNumberUnit(line.value);
+        const [unit, size] = getDataUnit['Num'](line.value);
        line.value = Number((line.value / size).toFixed(2));
        line.unit = unit + line.unit;
      }
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/config.tsx
@@ -14,7 +14,7 @@ const messagesInTooltipFormatter = (date: any, arr: any) => {
    <div style="display:flex;align-items:center;">
      <div style="margin-right:4px;width:8px;height:2px;background-color:${params.color};"></div>
      <div style="flex:1;display:flex;justify-content:space-between;align-items:center;overflow: hidden;">
-        <span style="flex: 1;font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: no-wrap;">
+        <span style="flex: 1;font-size:12px;color:#74788D;pointer-events:auto;margin-left:2px;line-height: 18px;font-family: HelveticaNeue;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
          ${params.seriesName}
        </span>
        <span style="font-size:12px;color:#212529;line-height:18px;font-family:HelveticaNeue-Medium;margin-left: 10px;">
@@ -55,7 +55,7 @@ const messagesInTooltipFormatter = (date: any, arr: any) => {
 };

 export const getChartConfig = (props: any) => {
-  const { metricName, lineColor, isDefaultMetric = false } = props;
+  const { lineColor, isDefaultMetric = false } = props;
  return {
    option: getBasicChartConfig({
      // TODO: time 轴图表联动有问题，先切换为 category
@@ -63,7 +63,6 @@ export const getChartConfig = (props: any) => {
      title: { show: false },
      legend: { show: false },
      grid: { top: 24, bottom: 12 },
-      lineColor: [lineColor],
      tooltip: isDefaultMetric
        ? {
            formatter: function (params: any) {
@@ -87,6 +86,7 @@ export const getChartConfig = (props: any) => {
          smooth: 0.25,
          symbol: 'emptyCircle',
          symbolSize: 4,
+          color: '#556ee6',
          // 面积图样式
          areaStyle: {
            color: lineColor,
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/DetailChart/index.tsx
@@ -5,16 +5,16 @@ import { arrayMoveImmutable } from 'array-move';
 import api from '@src/api';
 import { useParams } from 'react-router-dom';
 import {
-  MetricDefaultChartDataType,
-  MetricChartDataType,
+  OriginMetricData,
+  FormattedMetricData,
  formatChartData,
  supplementaryPoints,
  resolveMetricsRank,
  MetricInfo,
 } from '@src/constants/chartConfig';
 import { MetricType } from '@src/api';
-import { getDataNumberUnit, getUnit } from '@src/constants/chartConfig';
-import SingleChartHeader, { KsHeaderOptions } from '@src/components/SingleChartHeader';
+import { getDataUnit } from '@src/constants/chartConfig';
+import ChartOperateBar, { KsHeaderOptions } from '@src/components/ChartOperateBar';
 import RenderEmpty from '@src/components/RenderEmpty';
 import DragGroup from '@src/components/DragGroup';
 import { getChartConfig } from './config';
@@ -162,13 +162,13 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
        metricsNames: selectedMetricNames.filter((name) => name !== DEFAULT_METRIC),
      },
    }).then(
-      (res: MetricDefaultChartDataType[]) => {
+      (res: OriginMetricData[]) => {
        // 如果当前请求不是最新请求，则不做任何操作
        if (curFetchingTimestamp.current.messagesIn !== curTimestamp) {
          return;
        }

-        const formattedMetricData: MetricChartDataType[] = formatChartData(
+        const formattedMetricData: FormattedMetricData[] = formatChartData(
          res,
          global.getMetricDefine || {},
          MetricType.Cluster,
@@ -224,7 +224,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
            let valueWithUnit = Number(value);
            let unit = ((global.getMetricDefine && global.getMetricDefine(MetricType.Cluster, key)?.unit) || '') as string;
            if (unit.toLowerCase().includes('byte')) {
-              const [unitName, unitSize]: [string, number] = getUnit(Number(value));
+              const [unitName, unitSize]: [string, number] = getDataUnit['Memory'](Number(value));
              unit = unit.toLowerCase().replace('byte', unitName);
              valueWithUnit /= unitSize;
            }
@@ -235,7 +235,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
            };
            return returnValue;
          });
-          return [timeStamp, values.MessagesIn || '0', valuesWithUnit] as [number, number | string, typeof valuesWithUnit];
+          return [timeStamp, parsedValue || '0', valuesWithUnit] as [number, number | string, typeof valuesWithUnit];
        });
        result.sort((a, b) => (a[0] as number) - (b[0] as number));
        const line = {
@@ -244,9 +244,9 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
          data: result as any,
        };
        if (maxValue > 0) {
-          const [unitName, unitSize]: [string, number] = getDataNumberUnit(maxValue);
+          const [unitName, unitSize]: [string, number] = getDataUnit['Num'](maxValue);
          line.unit = `${unitName}${line.unit}`;
-          result.forEach((point) => ((point[1] as number) /= unitSize));
+          result.forEach((point) => parseFloat(((point[1] as number) /= unitSize).toFixed(3)));
        }

        if (result.length) {
@@ -308,11 +308,11 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {

  return (
    <div className="chart-panel cluster-detail-container">
-      <SingleChartHeader
+      <ChartOperateBar
        onChange={ksHeaderChange}
        hideNodeScope={true}
        hideGridSelect={true}
-        indicatorSelectModule={{
+        metricSelect={{
          hide: false,
          metricType: MetricType.Cluster,
          tableData: metricList,
--- a/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/HealthySetting.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/SingleClusterDetail/HealthySetting.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/display-name */
-import { Button, Divider, Drawer, Form, message, ProTable, Table, Utils } from 'knowdesign';
+import { Button, Divider, Drawer, Form, ProTable, Table, Utils } from 'knowdesign';
+import message from '@src/components/Message';
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { getHealthySettingColumn } from './config';
@@ -34,8 +35,8 @@ const HealthySetting = React.forwardRef((props: any, ref): JSX.Element => {
            item.configItem.indexOf('Group Re-Balance') > -1
              ? 'ReBalance'
              : item.configItem.includes('副本未同步')
-                ? 'UNDER_REPLICA'
-                : item.configItem;
+              ? 'UNDER_REPLICA'
+              : item.configItem;

          values[`weight_${item.configItemName}`] = itemValue?.weight;
          values[`value_${item.configItemName}`] = itemValue?.value;
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDashboard/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { MetricType } from '@src/api';
 import TopicHealthCheck from '@src/components/CardBar/TopicHealthCheck';
-import DashboardDragChart from '@src/components/DashboardDragChart';
+import DraggableCharts from '@src/components/DraggableCharts';
 import { AppContainer } from 'knowdesign';
 import DBreadcrumb from 'knowdesign/es/extend/d-breadcrumb';

@@ -19,7 +19,7 @@ const TopicDashboard = () => {
        />
      </div>
      <TopicHealthCheck />
-      <DashboardDragChart type={MetricType.Topic} />
+      <DraggableCharts type={MetricType.Topic} />
    </>
  );
 };