8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2026-01-15 04:38:16 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: Topic 详情 Partition Tab 卡片模式展示优化

Browse Source
This commit is contained in:
GraceWalk
2022-09-13 14:18:17 +08:00
parent b5a4a732da
commit 9b46956259
2 changed files with 38 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
km-console/packages/layout-clusters-fe/src/pages/TopicDetail/BrokersDetail.tsx
View File

@@ -6,6 +6,7 @@ import api, { MetricType } from '@src/api';
import { useParams } from 'react-router-dom';
import TagsWithHide from '@src/components/TagsWithHide';
import SwitchTab from '@src/components/SwitchTab';
import RenderEmpty from '@src/components/RenderEmpty';
interface PropsType {
hashData: any;
@@ -86,18 +87,6 @@ function getTranformedBytes(bytes: number) {
return [outBytes.toFixed(2), unit[i]];
}
const RenderEmpty = (props: { message: string }) => {
const { message } = props;
return (
<>
<div className="empty-panel">
<div className="img" />
<div className="text">{message}</div>
</div>
</>
);
};
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 }) => {
<div className="broker-container-box-detail">
{partitionState.alive ? (
partitionState?.replicaList?.length ? (
<div className="partition-list">
<div className={`partition-list ${hoverPartitionId !== -1 ? 'partition-list-hover-state' : ''}`}>
{partitionState?.replicaList?.map((partition) => {
return (
<div
key={partition.partitionId}
className={`partition-list-item partition-list-item-${partition.isLeaderReplace ? 'leader' : partition.inSync ? 'isr' : 'osr'
} ${partition.partitionId === hoverPartitionId ? 'partition-active' : ''}`}
className={`partition-list-item partition-list-item-${
partition.isLeaderReplace ? 'leader' : partition.inSync ? 'isr' : 'osr'
} ${partition.partitionId === hoverPartitionId ? 'partition-active' : ''}`}
onMouseEnter={() => setHoverPartitionId(partition.partitionId)}
onMouseLeave={() => setHoverPartitionId(-1)}
onClick={() => setClickPartition(`${partitionState.brokerId}&${partition.partitionId}`)}
@@ -316,10 +309,10 @@ const PartitionCard = (props: { clusterId: string; hashData: any }) => {
})}
</div>
) : (
<RenderEmpty message="暂无数据" />
<RenderEmpty message="暂无数据" height="unset" />
)
) : (
<RenderEmpty message="暂无数据" />
<RenderEmpty message="暂无数据" height="unset" />
)}
</div>
</div>