fix: 图表逻辑 & 展示优化

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,

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,

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;