Similar Config
-
+
@@ -111,7 +111,7 @@ export default () => {
];
setCardData(cordRightMap);
});
- Promise.all([brokerMetric, brokersState]).then((res) => {
+ Promise.all([brokerMetric, brokersState]).finally(() => {
setLoading(false);
});
}, [routeParams.clusterId]);
diff --git a/km-console/packages/layout-clusters-fe/src/components/CardBar/LoadRebalanceCardBar.tsx b/km-console/packages/layout-clusters-fe/src/components/CardBar/LoadRebalanceCardBar.tsx
index f98b5844..0b022a26 100644
--- a/km-console/packages/layout-clusters-fe/src/components/CardBar/LoadRebalanceCardBar.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/CardBar/LoadRebalanceCardBar.tsx
@@ -1,12 +1,13 @@
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import CardBar from './index';
-import { IconFont, Tag, Utils, Tooltip, Popover } from 'knowdesign';
+import { IconFont, Tag, Utils, Tooltip, Popover, AppContainer } from 'knowdesign';
import api from '@src/api';
import StateChart from './StateChart';
import ClusterNorms from '@src/pages/LoadRebalance/ClusterNorms';
import { QuestionCircleOutlined } from '@ant-design/icons';
import moment from 'moment';
+import { ClustersPermissionMap } from '@src/pages/CommonConfig';
const transUnitTimePro = (ms: number, num = 0) => {
if (!ms) return '';
@@ -23,6 +24,7 @@ const transUnitTimePro = (ms: number, num = 0) => {
};
const LoadRebalanceCardBar = (props: any) => {
+ const [global] = AppContainer.useGlobalValue();
const { clusterId } = useParams<{
clusterId: string;
}>();
@@ -53,12 +55,14 @@ const LoadRebalanceCardBar = (props: any) => {
return (
State
- setNormsVisible(true)}
- type="icon-shezhi"
- >
+ {global.hasPermission(ClustersPermissionMap.REBALANCE_SETTING) && (
+ setNormsVisible(true)}
+ type="icon-shezhi"
+ >
+ )}
);
},
diff --git a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx
index d89c37ff..84527a9c 100644
--- a/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/DashboardDragChart/ChartDetail.tsx
@@ -1,18 +1,20 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { AppContainer, Button, Drawer, IconFont, message, Spin, Table, SingleChart, Utils, Tooltip } from 'knowdesign';
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AppContainer, Drawer, Spin, Table, SingleChart, Utils, Tooltip } from 'knowdesign';
import moment from 'moment';
import api, { MetricType } from '@src/api';
import { useParams } from 'react-router-dom';
import { debounce } from 'lodash';
import { MetricDefaultChartDataType, MetricChartDataType, formatChartData, getDetailChartConfig } from './config';
import { UNIT_MAP } from '@src/constants/chartConfig';
-import { CloseOutlined } from '@ant-design/icons';
+import RenderEmpty from '../RenderEmpty';
interface ChartDetailProps {
metricType: MetricType;
metricName: string;
queryLines: string[];
- onClose: () => void;
+ setSliderRange: (range: string) => void;
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ setDisposeChartInstance: Function;
}
interface MetricTableInfo {
@@ -24,6 +26,18 @@ interface MetricTableInfo {
color: string;
}
+interface ChartInfo {
+ chartInstance?: echarts.ECharts;
+ isLoadingAdditionData?: boolean;
+ isLoadedFullData?: boolean;
+ fullTimeRange?: readonly [number, number];
+ curTimeRange?: readonly [number, number];
+ sliderPos?: readonly [number, number];
+ transformUnit?: [string, number];
+ fullMetricData?: MetricChartDataType;
+ oldDataZoomOption?: any;
+}
+
interface DataZoomEventProps {
type: 'datazoom';
// 缩放的开始位置的百分比，0 - 100
@@ -34,8 +48,6 @@ interface DataZoomEventProps {
// 缩放区默认选中范围比例（0.01～1）
const DATA_ZOOM_DEFAULT_SCALE = 0.25;
-// 选中范围最少展示的时间长度（默认 10 分钟），单位: ms
-const LEAST_SELECTED_TIME_RANGE = 1 * 60 * 1000;
// 单次向服务器请求数据的范围（默认 6 小时，超过后采集频率间隔会变长），单位: ms
const DEFAULT_REQUEST_TIME_RANGE = 6 * 60 * 60 * 1000;
// 采样间隔，影响前端补点逻辑，单位: ms
@@ -47,70 +59,15 @@ const DEFAULT_ENTER_TIME_RANGE = 2 * 60 * 60 * 1000;
// 预缓存数据阈值，图表展示数据的开始时间处于前端缓存数据的时间范围的前 40% 时，向服务器请求数据
const PRECACHE_THRESHOLD = 0.4;
-// 表格列
-const colunms = [
- {
- title: 'Host',
- dataIndex: 'name',
- width: 200,
- render(name: string, record: any) {
- return (
-
-
- {name}
-
- );
- },
- },
- {
- title: 'Avg',
- dataIndex: 'avg',
- width: 120,
- render(num: number) {
- return num.toFixed(2);
- },
- },
- {
- title: 'Max',
- dataIndex: 'max',
- width: 120,
- render(num: number, record: any) {
- return (
-
- {num.toFixed(2)}
-
- );
- },
- },
- {
- title: 'Min',
- dataIndex: 'min',
- width: 120,
- render(num: number, record: any) {
- return (
-
- {num.toFixed(2)}
-
- );
- },
- },
- {
- title: 'Latest',
- dataIndex: 'latest',
- width: 120,
- render(latest: number[]) {
- return `${latest[1].toFixed(2)}`;
- },
- },
-];
-
const ChartDetail = (props: ChartDetailProps) => {
const [global] = AppContainer.useGlobalValue();
const { clusterId } = useParams<{
clusterId: string;
}>();
- const { metricType, metricName, queryLines, onClose } = props;
+ const { metricType, metricName, queryLines, setSliderRange, setDisposeChartInstance } = props;
+ // 初始化拖拽防抖函数
+ const debouncedZoomDrag = useRef(null);
// 存储图表相关的不需要触发渲染的数据，用于计算图表展示状态并进行操作
const chartInfo = useRef(
(() => {
@@ -119,16 +76,16 @@ const ChartDetail = (props: ChartDetailProps) => {
const curTimeRange = [curTime - DEFAULT_ENTER_TIME_RANGE, curTime] as const;
return {
- chartInstance: undefined as echarts.ECharts,
+ chartInstance: undefined,
+ isLoadingAdditionData: false,
isLoadedFullData: false,
fullTimeRange: curTimeRange,
fullMetricData: {} as MetricChartDataType,
curTimeRange,
- oldDataZoomOption: {} as any,
- sliderPos: [0, 0] as readonly [number, number],
- sliderRange: '',
- transformUnit: undefined as [string, number],
- };
+ oldDataZoomOption: {},
+ sliderPos: [0, 0],
+ transformUnit: undefined,
+ } as ChartInfo;
})()
);
@@ -137,8 +94,76 @@ const ChartDetail = (props: ChartDetailProps) => {
const [curMetricData, setCurMetricData] = useState
+
+ {name}
+
+ );
+ },
+ },
+ {
+ title: 'Avg',
+ dataIndex: 'avg',
+ width: 120,
+ render(num: number) {
+ return num.toFixed(2);
+ },
+ },
+ {
+ title: 'Max',
+ dataIndex: 'max',
+ width: 120,
+ render(num: number, record: any) {
+ return (
+
+ {num.toFixed(2)}
+
+ );
+ },
+ },
+ {
+ title: 'Min',
+ dataIndex: 'min',
+ width: 120,
+ render(num: number, record: any) {
+ return (
+
+ {num.toFixed(2)}
+
+ );
+ },
+ },
+ {
+ title: 'Latest',
+ dataIndex: 'latest',
+ width: 120,
+ render(latest: number[]) {
+ return `${latest[1].toFixed(2)}`;
+ },
+ },
+ ],
+ [metricType]
+ );
+
+ const updateChartInfo = (changedInfo: ChartInfo) => {
+ chartInfo.current = {
+ ...chartInfo.current,
+ ...changedInfo,
+ };
+ };
// 请求图表数据
const getMetricChartData = ([startTime, endTime]: readonly [number, number]) => {
@@ -175,11 +200,10 @@ const ChartDetail = (props: ChartDetailProps) => {
// 如果滑块整体拖动，则只更新拖动后滑块的位（保留小数点后三位是防止低位值的干扰）
if (oldScale.toFixed(3) === newScale.toFixed(3)) {
- chartInfo.current = {
- ...chartInfo.current,
+ updateChartInfo({
sliderPos: [newStartSliderPos, newEndSliderPos],
oldDataZoomOption: newDataZoomOption,
- };
+ });
renderTableInfo();
return false;
@@ -217,23 +241,14 @@ const ChartDetail = (props: ChartDetailProps) => {
}
} else {
// 3. 滑块拖动后缩放比例变小
- // 判断拖动后选择的时间范围并提示
- if (newEndSliderPos - newStartSliderPos < LEAST_SELECTED_TIME_RANGE) {
- // TODO: 补充逻辑
- updateChartData([oldStartTimestamp, oldEndTimestamp], [oldStartSliderPos, oldEndSliderPos]);
- message.warning(`当前选择范围小于 ${LEAST_SELECTED_TIME_RANGE / 60 / 1000} 分钟，图表可能无数据`);
- return true;
- }
-
const isOldLarger = oldScale - DATA_ZOOM_DEFAULT_SCALE > 0.01;
const isNewLarger = newScale - DATA_ZOOM_DEFAULT_SCALE > 0.01;
if (isOldLarger && isNewLarger) {
// 如果拖拽前后比例均高于默认比例，则不对图表展示范围进行操作
- chartInfo.current = {
- ...chartInfo.current,
+ updateChartInfo({
sliderPos: [newStartSliderPos, newEndSliderPos],
oldDataZoomOption: newDataZoomOption,
- };
+ });
renderTableInfo();
return true;
} else {
@@ -259,79 +274,98 @@ const ChartDetail = (props: ChartDetailProps) => {
const updateChartData = (timeRange: [number, number], sliderPos: [number, number]) => {
const {
fullTimeRange: [fullStartTimestamp, fullEndTimestamp],
- fullMetricData,
isLoadedFullData,
} = chartInfo.current;
- let leftBoundaryTimestamp = Math.floor(timeRange[0]);
+ const leftBoundaryTimestamp = Math.floor(timeRange[0]);
const isNeedCacheExtraData = leftBoundaryTimestamp < fullStartTimestamp + (fullEndTimestamp - fullStartTimestamp) * PRECACHE_THRESHOLD;
let isRendered = false;
// 如果本地存储的数据足够展示或者已经获取到所有数据，则展示数据
if (leftBoundaryTimestamp > fullStartTimestamp || isLoadedFullData) {
- chartInfo.current = {
- ...chartInfo.current,
+ updateChartInfo({
curTimeRange: [leftBoundaryTimestamp > fullStartTimestamp ? leftBoundaryTimestamp : fullStartTimestamp, timeRange[1]],
sliderPos,
- };
+ });
renderNewMetricData();
isRendered = true;
}
if (!isLoadedFullData && isNeedCacheExtraData) {
- // 向服务器请求新的数据缓存
- let reqEndTime = fullStartTimestamp;
- const requestArr: any[] = [];
- const requestTimeRanges: [number, number][] = [];
- for (let i = 0; i < DEFAULT_REQUEST_COUNT; i++) {
- setTimeout(() => {
- const nextReqEndTime = reqEndTime - DEFAULT_REQUEST_TIME_RANGE;
- requestArr.unshift(getMetricChartData([nextReqEndTime, reqEndTime]));
- requestTimeRanges.unshift([nextReqEndTime, reqEndTime]);
- reqEndTime = nextReqEndTime;
+ getAdditionChartData(!isRendered, leftBoundaryTimestamp, timeRange[1], sliderPos);
+ }
+ };
- // 当最后一次请求发送后，处理返回
- if (i === DEFAULT_REQUEST_COUNT - 1) {
- Promise.all(requestArr).then((resList) => {
- let isSettle = -1;
- // 填充增量的图表数据
- resList.forEach((res: MetricDefaultChartDataType[], i) => {
- // 图表没有返回数据的情况
- if (!res?.length) {
- if (isSettle === -1) {
- chartInfo.current = {
- ...chartInfo.current,
- // 标记数据已经全部加载完毕
- isLoadedFullData: true,
- };
- isSettle = i;
- }
- } else {
- resolveAdditionChartData(res, requestTimeRanges[i]);
- }
- });
- // 更新左侧边界为当前已获取到数据的最小边界
- const curLocalStartTimestamp = Number(fullMetricData.metricLines.map((line) => line.data[0][0]).sort()[0]);
- if (leftBoundaryTimestamp < curLocalStartTimestamp) {
- leftBoundaryTimestamp = curLocalStartTimestamp;
- }
+ // 缓存增量的图表数据
+ const getAdditionChartData = (
+ needRender: boolean,
+ leftBoundaryTimestamp: number,
+ rightBoundaryTimestamp: number,
+ sliderPos?: [number, number]
+ ) => {
+ const {
+ fullTimeRange: [fullStartTimestamp, fullEndTimestamp],
+ fullMetricData,
+ isLoadingAdditionData,
+ } = chartInfo.current;
- chartInfo.current = {
- ...chartInfo.current,
- fullTimeRange: [reqEndTime - DEFAULT_REQUEST_TIME_RANGE, fullEndTimestamp],
- sliderPos,
- };
- if (!isRendered) {
- chartInfo.current = {
- ...chartInfo.current,
- curTimeRange: [leftBoundaryTimestamp, timeRange[1]],
- };
- renderNewMetricData();
+ // 当前有缓存数据的任务时，直接退出
+ if (isLoadingAdditionData) {
+ return false;
+ }
+ updateChartInfo({
+ isLoadingAdditionData: true,
+ });
+
+ let reqEndTime = fullStartTimestamp;
+ const requestArr: any[] = [];
+ const requestTimeRanges: [number, number][] = [];
+ for (let i = 0; i < DEFAULT_REQUEST_COUNT; i++) {
+ setTimeout(() => {
+ const nextReqEndTime = reqEndTime - DEFAULT_REQUEST_TIME_RANGE;
+ requestArr.push(getMetricChartData([nextReqEndTime, reqEndTime]));
+ requestTimeRanges.push([nextReqEndTime, reqEndTime]);
+ reqEndTime = nextReqEndTime;
+
+ // 当最后一次请求发送后，处理返回
+ if (i === DEFAULT_REQUEST_COUNT - 1) {
+ Promise.all(requestArr).then((resList) => {
+ // 填充增量的图表数据
+ resList.forEach((res: MetricDefaultChartDataType[], i) => {
+ // 最后一个请求返回数据为空时，认为已获取到全部图表数据
+ if (!res?.length) {
+ // 标记数据已经全部加载完毕
+ i === resList.length - 1 &&
+ updateChartInfo({
+ isLoadedFullData: true,
+ });
+ } else {
+ // TODO: res 可能为 []，需要处理兼容
+ resolveAdditionChartData(res, requestTimeRanges[i]);
}
});
- }
- }, i * 10);
- }
+
+ // 更新左侧边界为当前已获取到数据的最小边界
+ const curLocalStartTimestamp = Number(fullMetricData.metricLines.map((line) => line?.data?.[0]?.[0]).sort()[0]);
+ if (leftBoundaryTimestamp < curLocalStartTimestamp) {
+ leftBoundaryTimestamp = curLocalStartTimestamp;
+ }
+
+ updateChartInfo({
+ fullTimeRange: [reqEndTime - DEFAULT_REQUEST_TIME_RANGE, fullEndTimestamp],
+ ...(sliderPos ? { sliderPos } : {}),
+ isLoadingAdditionData: false,
+ });
+ if (needRender) {
+ updateChartInfo({
+ curTimeRange: [leftBoundaryTimestamp, rightBoundaryTimestamp],
+ });
+ renderNewMetricData();
+ }
+ });
+ }
+ }, i * 10);
}
+ return true;
};
// 处理增量图表数据
@@ -362,7 +396,7 @@ const ChartDetail = (props: ChartDetailProps) => {
});
};
- // 根据需要展示的时间范围过滤出对应的数据展示
+ // 根据需要展示的时间范围过滤出对应的数据
const renderNewMetricData = () => {
const { fullMetricData, curTimeRange } = chartInfo.current;
const newMetricData = { ...fullMetricData };
@@ -378,12 +412,25 @@ const ChartDetail = (props: ChartDetailProps) => {
});
newMetricData.metricLines[i] = line;
});
+
// 只过滤出当前时间段有数据点的线条，确保 Table 统一展示
newMetricData.metricLines = newMetricData.metricLines.filter((line) => line.data.length);
setCurMetricData(newMetricData);
+
+ setLinesStatus((curStatus) => {
+ // 过滤维持线条选中状态
+ const newLinesStatus = { ...curStatus };
+ const newLineNames = newMetricData.metricLines.map((line) => line.name);
+ newLineNames.forEach((name) => {
+ if (newLinesStatus[name] === undefined) {
+ newLinesStatus[name] = false;
+ }
+ });
+ return newLinesStatus;
+ });
};
- // 计算当前选中范围
+ // 计算展示当前拖拽轴选中的时间范围
const calculateSliderRange = () => {
const { sliderPos } = chartInfo.current;
let minutes = Number(((sliderPos[1] - sliderPos[0]) / 60 / 1000).toFixed(2));
@@ -398,13 +445,11 @@ const ChartDetail = (props: ChartDetailProps) => {
hours = Number((hours % 24).toFixed(2));
}
- chartInfo.current = {
- ...chartInfo.current,
- sliderRange: ` 当前选中范围: ${days > 0 ? `${days} 天 ` : ''}${hours > 0 ? `${hours} 小时 ` : ''}${minutes} 分钟`,
- };
+ const sliderRange = ` 当前选中范围: ${days > 0 ? `${days} 天 ` : ''}${hours > 0 ? `${hours} 小时 ` : ''}${minutes} 分钟`;
+ setSliderRange(sliderRange);
};
- // 遍历图表，获取需要的指标数据，展示到 Table
+ // 遍历图表，计算得到指标聚合数据展示到表格
const renderTableInfo = () => {
const tableData: MetricTableInfo[] = [];
const { sliderPos, chartInstance } = chartInfo.current;
@@ -447,140 +492,131 @@ const ChartDetail = (props: ChartDetailProps) => {
calculateSliderRange();
setTableInfo(tableData);
- setSelectedLines(tableData.map((line) => line.name));
};
const tableLineChange = (keys: string[]) => {
- const updatedLines: { [name: string]: boolean } = {};
- selectedLines.forEach((name) => !keys.includes(name) && (updatedLines[name] = false));
- keys.forEach((name) => !selectedLines.includes(name) && (updatedLines[name] = true));
+ const newLinesStatus = { ...linesStatus };
- // 更新
- Object.keys(updatedLines).forEach((name) => {
- chartInfo.current.chartInstance.dispatchAction({
- type: 'legendToggleSelect',
- // 图例名称
- name: name,
- });
+ Object.entries(newLinesStatus).forEach(([name, status]) => {
+ if (keys.includes(name)) {
+ !status && (newLinesStatus[name] = true);
+ } else {
+ status && (newLinesStatus[name] = false);
+ }
});
- setSelectedLines(keys);
+ setLinesStatus(newLinesStatus);
};
+ // 图表数据更新渲染后，更新图表拖拽轴信息并重新计算列表值
useEffect(() => {
if (curMetricData) {
setTimeout(() => {
- // 新的图表数据渲染后，更新图表拖拽轴信息
chartInfo.current.oldDataZoomOption = (chartInfo.current.chartInstance.getOption() as any).dataZoom[0];
});
renderTableInfo();
}
}, [curMetricData]);
+ // 更新图例选中状态
+ useEffect(() => {
+ Object.entries(linesStatus).map(([name, status]) => {
+ const type = status ? 'legendSelect' : 'legendUnSelect';
+ chartInfo.current.chartInstance.dispatchAction({
+ type,
+ name,
+ });
+ });
+ }, [linesStatus]);
+
// 进入详情时，首次获取数据
useEffect(() => {
if (metricType && metricName) {
setLoading(true);
const { curTimeRange } = chartInfo.current;
- getMetricChartData(curTimeRange).then((res: any[] | null) => {
- // 如果图表返回数据
- if (res?.length) {
- // 格式化图表需要的数据
- const formattedMetricData = (
- formatChartData(
- res,
- global.getMetricDefine || {},
- metricType,
- curTimeRange,
- DEFAULT_POINT_INTERVAL,
- false
- ) as MetricChartDataType[]
- )[0];
- // 填充图表数据
- let initFullTimeRange = curTimeRange;
- const pointsOfFirstLine = formattedMetricData.metricLines.find((line) => line.data.length).data;
- if (pointsOfFirstLine) {
- initFullTimeRange = [pointsOfFirstLine[0][0] as number, pointsOfFirstLine[pointsOfFirstLine.length - 1][0] as number] as const;
- }
-
- // 获取单位保存起来
- let transformUnit = undefined;
- Object.entries(UNIT_MAP).forEach((unit) => {
- if (formattedMetricData.metricUnit.includes(unit[0])) {
- transformUnit = unit;
+ getMetricChartData(curTimeRange).then(
+ (res: any[] | null) => {
+ // 如果图表返回数据
+ if (res?.length) {
+ // 格式化图表需要的数据
+ const formattedMetricData = (
+ formatChartData(
+ res,
+ global.getMetricDefine || {},
+ metricType,
+ curTimeRange,
+ DEFAULT_POINT_INTERVAL,
+ false
+ ) as MetricChartDataType[]
+ )[0];
+ // 填充图表数据
+ let initFullTimeRange = curTimeRange;
+ const pointsOfFirstLine = formattedMetricData.metricLines.find((line) => line.data.length).data;
+ if (pointsOfFirstLine) {
+ initFullTimeRange = [
+ pointsOfFirstLine[0][0] as number,
+ pointsOfFirstLine[pointsOfFirstLine.length - 1][0] as number,
+ ] as const;
}
- });
- chartInfo.current = {
- ...chartInfo.current,
- fullMetricData: formattedMetricData,
- fullTimeRange: [...initFullTimeRange],
- curTimeRange: [...initFullTimeRange],
- sliderPos: [
- initFullTimeRange[1] - (initFullTimeRange[1] - initFullTimeRange[0]) * DATA_ZOOM_DEFAULT_SCALE,
- initFullTimeRange[1],
- ],
- transformUnit,
- };
- setCurMetricData(formattedMetricData);
- setLoading(false);
- }
- });
+ // 获取单位保存起来
+ let transformUnit = undefined;
+ Object.entries(UNIT_MAP).forEach((unit) => {
+ if (formattedMetricData.metricUnit.includes(unit[0])) {
+ transformUnit = unit;
+ }
+ });
+
+ updateChartInfo({
+ fullMetricData: formattedMetricData,
+ fullTimeRange: [...initFullTimeRange],
+ curTimeRange: [...initFullTimeRange],
+ sliderPos: [
+ initFullTimeRange[1] - (initFullTimeRange[1] - initFullTimeRange[0]) * DATA_ZOOM_DEFAULT_SCALE,
+ initFullTimeRange[1],
+ ],
+ transformUnit,
+ });
+ setCurMetricData(formattedMetricData);
+ const newLinesStatus: { [lineName: string]: boolean } = {};
+ formattedMetricData.metricLines.forEach((line) => {
+ newLinesStatus[line.name] = true;
+ });
+ setLinesStatus(newLinesStatus);
+ setLoading(false);
+ getAdditionChartData(false, initFullTimeRange[0], initFullTimeRange[1]);
+ }
+ },
+ () => setLoading(false)
+ );
}
}, []);
- const debounced = debounce(onDataZoomDrag, 300);
+ debouncedZoomDrag.current = debounce(onDataZoomDrag, 300);
return (
- {curMetricData && (
+ {curMetricData ? (
<>
- {
- debounced(record);
- },
+ dataZoom: (record: any) => debouncedZoomDrag?.current(record),
}}
+ showHeader={false}
propChartData={curMetricData.metricLines}
optionMergeProps={{ notMerge: true }}
getChartInstance={(chartInstance) => {
- chartInfo.current = {
- ...chartInfo.current,
+ setDisposeChartInstance(() => () => chartInstance.dispose());
+ updateChartInfo({
chartInstance,
- };
+ });
}}
{...getDetailChartConfig(`${curMetricData.metricName}{unit|（${curMetricData.metricUnit}）}`, chartInfo.current.sliderPos)}
/>
@@ -588,16 +624,10 @@ const ChartDetail = (props: ChartDetailProps) => {
className="detail-table"
rowKey="name"
rowSelection={{
- // hideSelectAll: true,
preserveSelectedRowKeys: true,
- selectedRowKeys: selectedLines,
- // getCheckboxProps: (record) => {
- // return selectedLines.length <= 1 && selectedLines.includes(record.name)
- // ? {
- // disabled: true,
- // }
- // : {};
- // },
+ selectedRowKeys: Object.entries(linesStatus)
+ .filter(([, status]) => status)
+ .map(([name]) => name),
selections: [Table.SELECTION_INVERT, Table.SELECTION_NONE],
onChange: (keys: string[]) => tableLineChange(keys),
}}
@@ -610,6 +640,8 @@ const ChartDetail = (props: ChartDetailProps) => {
pagination={false}
/>
+ ) : (
+ !loading &&
-
-
-
- {
- let content = '';
- const metricDefine = global.getMetricDefine(metricType, curMetricData.metricName);
- if (metricDefine) {
- content = metricDefine.desc;
- }
- return content;
- }}
- >
-
- {curMetricData.metricName} ({curMetricData.metricUnit})
-
-
-
- {chartInfo.current.sliderRange}
-
-
-
-
+
+
+ {metricInfo.name} ({metricInfo.unit})
+
+
+
+ {sliderRange}
+
+ }
+ footer={null}
+ closable={true}
+ maskClosable={false}
+ destroyOnClose={true}
+ onClose={onClose}
+ >
+ {metricInfo.type && metricInfo.name && (
+
+
+
+
+ );
+};
+
+export default RenderEmpty;
diff --git a/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx b/km-console/packages/layout-clusters-fe/src/components/SingleChartHeader/NodeScope.tsx
index 9b30485b..2f07d243 100644
--- 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,8 +26,8 @@ const OptionsDefault = [
const NodeScope = ({ nodeScopeModule, change }: propsType) => {
const {
customScopeList: customList,
- scopeName = '自定义节点范围',
- showSearch = false,
+ scopeName = '',
+ scopeLabel = '自定义范围',
searchPlaceholder = '输入内容进行搜索',
} = nodeScopeModule;
const [topNum, setTopNum] = useState{message}
+
- {
选择top范围
+选择 top 范围
-
@@ -136,9 +136,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
- }
+ suffix={
{customList
- .filter((item) => !showSearch || item.label.includes(scopeSearchValue))
+ .filter((item) => item.label.includes(scopeSearchValue))
.map((item) => (
{item.label}
@@ -180,6 +178,7 @@ const NodeScope = ({ nodeScopeModule, change }: propsType) => {
return (
<>
diff --git 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
index bf8ddd34..9d53b523 100644
--- 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
@@ -3,8 +3,13 @@
@import '~knowdesign/es/basic/style/mixins/index';
#d-node-scope {
+ display: flex;
+ align-items: center;
position: relative;
- display: inline-block;
+ .scope-title {
+ font-size: 14px;
+ color: #74788d;
+ }
.input-span {
cursor: pointer;
}
@@ -29,10 +34,10 @@
box-shadow: none;
}
&.relativeTime {
- width: 160px;
+ width: 200px;
}
&.absoluteTime {
- width: 300px;
+ width: 200px;
}
input {
diff --git a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx b/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx
index f54b2179..16637b9c 100644
--- a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaChange.tsx
@@ -30,8 +30,8 @@ const { TextArea } = Input;
const { Option } = Select;
const jobNameMap: any = {
- expandAndReduce: '批量扩缩副本',
- transfer: '批量迁移副本',
+ expandAndReduce: '扩缩副本',
+ transfer: '迁移副本',
};
interface DefaultConfig {
@@ -325,8 +325,7 @@ export default (props: DefaultConfig) => {
!jobId &&
Utils.request(Api.getTopicMetaData(+routeParams.clusterId))
.then((res: any) => {
- const filterRes = res.filter((item: any) => item.type !== 1);
- const topics = (filterRes || []).map((item: any) => {
+ const topics = (res || []).map((item: any) => {
return {
label: item.topicName,
value: item.topicName,
diff --git a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx b/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx
index 892e2586..c8c939dd 100644
--- a/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx
+++ b/km-console/packages/layout-clusters-fe/src/components/TopicJob/ReplicaMove.tsx
@@ -19,6 +19,7 @@ import {
Divider,
Transfer,
IconFont,
+ Tooltip,
} from 'knowdesign';
import './index.less';
import Api, { MetricType } from '@src/api/index';
@@ -31,8 +32,8 @@ const { TextArea } = Input;
const { Option } = Select;
const jobNameMap: any = {
- expandAndReduce: '批量扩缩副本',
- transfer: '批量迁移副本',
+ expandAndReduce: '扩缩副本',
+ transfer: '迁移副本',
};
interface DefaultConfig {
@@ -56,6 +57,7 @@ export default (props: DefaultConfig) => {
const [topicNewReplicas, setTopicNewReplicas] = useState([]);
const [needMovePartitions, setNeedMovePartitions] = useState([]);
const [moveDataTimeRanges, setMoveDataTimeRanges] = useState([]);
+ const [moveDataTimeRangesType, setMoveDataTimeRangesType] = useState([]);
const [form] = Form.useForm();
const [global] = AppContainer.useGlobalValue();
const [loadingTopic, setLoadingTopic] = useState(true);
@@ -142,8 +144,23 @@ export default (props: DefaultConfig) => {
title: '迁移数据时间范围',
dataIndex: 'newRetentionMs',
render: (v: any, r: any, i: number) => {
+ const selectAfter = (
+
+ );
return (
{
moveDataTimeRangesCopy[i] = n;
setMoveDataTimeRanges(moveDataTimeRangesCopy);
}}
- formatter={(value) => (value ? `${value} h` : '')}
- parser={(value) => value.replace('h', '')}
+ className={'move-dete-time-tanges'}
+ // formatter={(value) => (value ? `${value} h` : '')}
+ // parser={(value) => value.replace('h', '')}
+ addonAfter={selectAfter}
>
);
},
@@ -319,8 +338,7 @@ export default (props: DefaultConfig) => {
drawerVisible &&
Utils.request(Api.getTopicMetaData(+routeParams.clusterId))
.then((res: any) => {
- const filterRes = res.filter((item: any) => item.type !== 1);
- const topics = (filterRes || []).map((item: any) => {
+ const topics = (res || []).map((item: any) => {
return {
label: item.topicName,
value: item.topicName,
@@ -402,7 +420,7 @@ export default (props: DefaultConfig) => {
originalBrokerIdList: taskPlanData[index].currentBrokerIdList,
reassignBrokerIdList: taskPlanData[index].reassignBrokerIdList,
originalRetentionTimeUnitMs: topicData[index].retentionMs,
- reassignRetentionTimeUnitMs: moveDataTimeRanges[index] * 60 * 60 * 1000,
+ reassignRetentionTimeUnitMs: (moveDataTimeRanges[index] * 60 * 60 * 1000) / (moveDataTimeRangesType[index] || 1),
latestDaysAvgBytesInList: topicData[index].latestDaysAvgBytesInList,
latestDaysMaxBytesInList: topicData[index].latestDaysMaxBytesInList,
partitionPlanList: taskPlanData[index].partitionPlanList,
@@ -476,6 +494,19 @@ export default (props: DefaultConfig) => {
setTopicSelectValue(v);
}}
options={topicMetaData}
+ // 点击Tooltip会触发Select的下拉
+ // maxTagPlaceholder={(v) => {
+ // const tooltipValue = v
+ // .map((item) => {
+ // return item.value;
+ // })
+ // .join('、');
+ // return (
+ //
+ // {'+' + v.length + '...'}
+ //
+ // );
+ // }}
>
diff --git a/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less b/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less
index 7576f159..794a252e 100644
--- a/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less
+++ b/km-console/packages/layout-clusters-fe/src/components/TopicJob/index.less
@@ -64,11 +64,6 @@
.task-form {
margin-top: 16px;
}
-
- .dcloud-select-selector {
- max-height: 100px;
- overflow: scroll;
- }
}
.preview-task-plan-drawer {
@@ -80,4 +75,18 @@
background: #F8F9FA;
}
}
+}
+
+.move-dete-time-tanges{
+ .dcloud-input-number-input-wrap{
+ width: 80px;
+ }
+ .dcloud-input-number-wrapper{
+ .dcloud-select-selector{
+ border-top-left-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ background-color: inherit !important;
+ background: #F8F9FA;
+ }
+ }
}
\ No newline at end of file
diff --git a/km-console/packages/layout-clusters-fe/src/components/TourGuide/steps.ts b/km-console/packages/layout-clusters-fe/src/components/TourGuide/steps.ts
index 69fb2ba4..8add261a 100644
--- a/km-console/packages/layout-clusters-fe/src/components/TourGuide/steps.ts
+++ b/km-console/packages/layout-clusters-fe/src/components/TourGuide/steps.ts
@@ -70,7 +70,7 @@ const ClusterDetailSteps = {
},
},
{
- target: '.single-cluster-detail .ks-chart-container-header .header-right .icon-box',
+ target: '.single-cluster-detail .ks-chart-container-header .header-right .dcloud-btn',
title: '指标筛选',
content: '点击这里可以对展示的图表进行筛选',
placement: 'left-start' as const,
diff --git a/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts b/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
index aa1ef52e..a4874d98 100644
--- a/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
+++ b/km-console/packages/layout-clusters-fe/src/constants/chartConfig.ts
@@ -1,29 +1,19 @@
import moment from 'moment';
export const CHART_COLOR_LIST = [
- '#657DFC',
- '#A7B1EB',
- '#2AC8E4',
- '#9DDEEB',
- '#3991FF',
+ '#556ee6',
'#94BEF2',
+ '#95e7ff',
+ '#9DDEEB',
+ '#A7B1EB',
'#C2D0E3',
- '#F5B6B3',
- '#85C80D',
- '#C9E795',
- '#A76CEC',
'#CCABF1',
- '#FF9C1B',
- '#F5C993',
- '#FFC300',
'#F9D77B',
- '#12CA7A',
- '#8BA3C4',
- '#FF7066',
+ '#F5C993',
'#A7E6C7',
'#F19FC9',
- '#AEAEAE',
- '#D1D1D1',
+ '#F5B6B3',
+ '#C9E795',
];
export const UNIT_MAP = {
diff --git a/km-console/packages/layout-clusters-fe/src/constants/menu.ts b/km-console/packages/layout-clusters-fe/src/constants/menu.ts
index 3feb2d9a..8891be10 100755
--- a/km-console/packages/layout-clusters-fe/src/constants/menu.ts
+++ b/km-console/packages/layout-clusters-fe/src/constants/menu.ts
@@ -12,20 +12,6 @@ export const leftMenus = (clusterId?: string) => ({
name: 'cluster',
path: 'cluster',
icon: 'icon-Cluster',
- children: [
- {
- name: 'overview',
- path: '',
- icon: '#icon-luoji',
- },
- process.env.BUSINESS_VERSION
- ? {
- name: 'balance',
- path: 'balance',
- icon: '#icon-luoji',
- }
- : undefined,
- ].filter((m) => m),
},
{
name: 'broker',
@@ -83,6 +69,25 @@ export const leftMenus = (clusterId?: string) => ({
// },
// ],
},
+ {
+ name: 'operation',
+ path: 'operation',
+ icon: 'icon-Jobs',
+ children: [
+ process.env.BUSINESS_VERSION
+ ? {
+ name: 'balance',
+ path: 'balance',
+ icon: '#icon-luoji',
+ }
+ : undefined,
+ {
+ name: 'jobs',
+ path: 'jobs',
+ icon: 'icon-Jobs',
+ },
+ ].filter((m) => m),
+ },
process.env.BUSINESS_VERSION
? {
name: 'produce-consume',
@@ -127,11 +132,6 @@ export const leftMenus = (clusterId?: string) => ({
// path: 'acls',
// icon: 'icon-wodegongzuotai',
// },
- {
- name: 'jobs',
- path: 'jobs',
- icon: 'icon-Jobs',
- },
].filter((m) => m),
});
diff --git a/km-console/packages/layout-clusters-fe/src/index.less b/km-console/packages/layout-clusters-fe/src/index.less
index 88a90644..52f048f1 100644
--- a/km-console/packages/layout-clusters-fe/src/index.less
+++ b/km-console/packages/layout-clusters-fe/src/index.less
@@ -258,3 +258,25 @@ li {
}
}
}
+
+.empty-panel {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 18px;
+
+ .img {
+ width: 51px;
+ height: 34px;
+ margin-bottom: 7px;
+ background-size: cover;
+ background-image: url('./assets/empty.png');
+ }
+
+ .text {
+ font-size: 10px;
+ color: #919aac;
+ line-height: 20px;
+ }
+}
diff --git a/km-console/packages/layout-clusters-fe/src/locales/zh.tsx b/km-console/packages/layout-clusters-fe/src/locales/zh.tsx
index 04c3d705..db190ffc 100755
--- a/km-console/packages/layout-clusters-fe/src/locales/zh.tsx
+++ b/km-console/packages/layout-clusters-fe/src/locales/zh.tsx
@@ -44,6 +44,10 @@ export default {
[`menu.${systemKey}.consumer-group.operating-state`]: 'Operating State',
[`menu.${systemKey}.consumer-group.group-list`]: 'GroupList',
+ [`menu.${systemKey}.operation`]: 'Operation',
+ [`menu.${systemKey}.operation.balance`]: 'Load Rebalance',
+ [`menu.${systemKey}.operation.jobs`]: 'Job',
+
[`menu.${systemKey}.acls`]: 'ACLs',
[`menu.${systemKey}.jobs`]: 'Job',
diff --git a/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx b/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx
index c968ca47..ba7cb3fc 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/BrokerDetail/ConfigurationEdit.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import { Drawer, Form, Input, Space, Button, Checkbox, Utils, Row, Col, IconFont, Divider, message } from 'knowdesign';
import { useParams } from 'react-router-dom';
import Api from '@src/api';
@@ -31,6 +31,10 @@ export const ConfigurationEdit = (props: any) => {
});
};
+ React.useEffect(() => {
+ form.setFieldsValue(props.record);
+ }, [props.record]);
+
return (
{
visible={props.visible}
onClose={() => props.setVisible(false)}
maskClosable={false}
+ destroyOnClose
extra={
- {global.hasPermission && global.hasPermission(ClustersPermissionMap.CLUSTER_DEL) ? (
+ {global.hasPermission ? (
{scopeName}
+{scopeLabel}
+ void;
}
@@ -138,9 +138,13 @@ const SingleChartHeader = ({
};
const reloadRangeTime = () => {
- const timeLen = rangeTime[1] - rangeTime[0] || 0;
- const curTimeStamp = moment().valueOf();
- setRangeTime([curTimeStamp - timeLen, curTimeStamp]);
+ if (isRelativeRangeTime) {
+ const timeLen = rangeTime[1] - rangeTime[0] || 0;
+ const curTimeStamp = moment().valueOf();
+ setRangeTime([curTimeStamp - timeLen, curTimeStamp]);
+ } else {
+ setRangeTime([...rangeTime]);
+ }
};
const openIndicatorDrawer = () => {
@@ -174,12 +178,10 @@ const SingleChartHeader = ({
{!hideGridSelect && (
)}
-
-
+ {(!hideNodeScope || !hideGridSelect) &&
{scopeName}筛选：
-
-
-
) : (
<>
@@ -239,45 +420,21 @@ const ListScroll = (props: { loadMoreData: any; list: any; pagination: any; getP
);
};
- const onFinish = () => {
- form.validateFields().then((formData) => {
- Utils.delete(api.phyCluster, {
- params: {
- clusterPhyId: clusterInfo.id,
- },
- }).then((res) => {
- message.success('删除成功');
- setVisible(false);
- props?.getPhyClusterState();
- const fliterList: any = list.filter((item: any) => {
- return item?.id !== clusterInfo.id;
- });
- setList(fliterList || []);
- });
- });
- };
-
- const onClickDeleteBtn = (event: any, clusterInfo: any) => {
- event.stopPropagation();
- setClusterInfo(clusterInfo);
- setVisible(true);
- };
-
return (
- <>
+ onClickDeleteBtn(event, itemData)}>
-
+ {global.hasPermission(ClustersPermissionMap.CLUSTER_CHANGE_INFO) && (
+ {
+ e.stopPropagation();
+ showAccessCluster(itemData);
+ }}
+ >
+
+ )}
+ {global.hasPermission(ClustersPermissionMap.CLUSTER_DEL) && (
+ {
+ e.stopPropagation();
+ deleteModalRef.current.onOpen(itemData, () => {
+ getPhyClusterState();
+ getExistKafkaVersion(true);
+ reloadClusterList(pagination.pageNo * pagination.pageSize);
+ });
+ }}
+ >
+
+ )}
-
-
-
-
-
-
- );
- };
-
const getHref = (item: any) => {
if (item.resTypeName.toLowerCase().includes('topic')) return `/cluster/${clusterId}/topic/list#topicName=${item.resName}`;
if (item.resTypeName.toLowerCase().includes('broker')) return `/cluster/${clusterId}/broker/list#brokerId=${item.resName}`;
@@ -73,7 +63,7 @@ const ChangeLog = () => {
暂无配置记录
- 历史变更记录
{!loading && !data.length ? (
- renderEmpty()
+
{/* MessageIn 图表 */}
-
+
- {/* TODO: 暂时通过判断是否有图表数据来修复，有时间可以查找下宽度溢出的原因 */}
- {messagesInMetricData.data.length ? (
+ {messagesInMetricData.data && (
<>
{
-
@@ -408,7 +411,7 @@ const DetailChart = (props: { children: JSX.Element }): JSX.Element => {
) : chartLoading ? (
<>
) : (
- `${value}%`}
- parser={(value: any) => value.replace('%', '')}
+ formatter={(value) => `${value * 100}%`}
+ parser={(value: any) => parseFloat(value.replace('%', '')) / 100}
/>
) : (
{renderToolTipValue(clusterInfo?.name, 35)}
- {global.hasPermission && global.hasPermission(ClustersPermissionMap.CLUSTER_CHANGE_INFO) ? (
+ {!loading && global.hasPermission && global.hasPermission(ClustersPermissionMap.CLUSTER_CHANGE_INFO) ? (
setVisible(true)}>
@@ -239,8 +239,7 @@ const LeftSider = () => {
-
-
-
- );
-};
-
const PartitionPopoverContent = (props: {
clusterId: string;
hashData: any;
@@ -125,18 +114,21 @@ const PartitionPopoverContent = (props: {
{ label: 'LeaderBroker', value: leaderBrokerId },
{
label: 'BeginningOffset',
- value: `${metricsData.LogStartOffset === undefined ? '-' : metricsData.LogStartOffset} ${global.getMetricDefine(type, 'LogStartOffset')?.unit || ''
- }`,
+ value: `${metricsData.LogStartOffset === undefined ? '-' : metricsData.LogStartOffset} ${
+ global.getMetricDefine(type, 'LogStartOffset')?.unit || ''
+ }`,
},
{
label: 'EndOffset',
- value: `${metricsData.LogEndOffset === undefined ? '-' : metricsData.LogEndOffset} ${global.getMetricDefine(type, 'LogEndOffset')?.unit || ''
- }`,
+ value: `${metricsData.LogEndOffset === undefined ? '-' : metricsData.LogEndOffset} ${
+ global.getMetricDefine(type, 'LogEndOffset')?.unit || ''
+ }`,
},
{
label: 'MsgNum',
- value: `${metricsData.Messages === undefined ? '-' : metricsData.Messages} ${global.getMetricDefine(type, 'Messages')?.unit || ''
- }`,
+ value: `${metricsData.Messages === undefined ? '-' : metricsData.Messages} ${
+ global.getMetricDefine(type, 'Messages')?.unit || ''
+ }`,
},
{
label: 'LogSize',
@@ -281,13 +273,14 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
{message}
-
{partitionState.alive ? (
partitionState?.replicaList?.length ? (
- {
visible={props.visible}
onClose={() => props.setVisible(false)}
maskClosable={false}
+ destroyOnClose
extra={
+
diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx
index c046b09d..a2638384 100644
--- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx
+++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/ConfigurationEdit.tsx
@@ -26,10 +26,14 @@ export const ConfigurationEdit = (props: any) => {
props.setVisible(false);
props.genData({ pageNo: 1, pageSize: 10 });
})
- .catch((err: any) => { });
+ .catch((err: any) => {});
});
};
+ React.useEffect(() => {
+ form.setFieldsValue(props.record);
+ }, [props.record]);
+
return (
{partitionState?.replicaList?.map((partition) => {
return (
setHoverPartitionId(partition.partitionId)}
onMouseLeave={() => setHoverPartitionId(-1)}
onClick={() => setClickPartition(`${partitionState.brokerId}&${partition.partitionId}`)}
@@ -316,10 +309,10 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
})}
) : (
-