8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2025-12-24 03:42:07 +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>

50
km-console/packages/layout-clusters-fe/src/pages/TopicDetail/index.less
View File

@@ -215,8 +215,8 @@
position: relative;
width: 324px;
min-height: calc(100% - 66px);
margin: 0 0 12px 6px;
padding: 22px 20px 0 20px;
margin: 0 6px 6px 6px;
padding: 12px 12px 0 12px;
border-radius: 12px;
background: #ffffff;
overflow: hidden;
@@ -226,16 +226,16 @@
flex-flow: row wrap;
width: 100%;
&-item {
width: 32px;
width: 34px;
height: 16px;
margin-bottom: 22px;
margin-bottom: 12px;
border-radius: 4px;
text-align: center;
line-height: 16px;
transition: all ease 0.2s;
transition: all ease-in-out 0.3s;
cursor: pointer;
&:not(&:nth-of-type(5n)) {
margin-right: 31px;
&:not(&:nth-of-type(8n)) {
margin-right: 4px;
}
&-leader {
background: rgba(85, 110, 230, 0.1);
@@ -262,27 +262,21 @@
}
}
}
}
.empty-panel {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 18px;
text-align: center;
.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;
&-hover-state {
.partition-list-item {
&-leader:not(.partition-active) {
background-color: #f6f7fd;
color: #dbe1f8;
}
&-isr:not(.partition-active) {
background-color: #fcfcfc;
color: #c4c6c9;
}
&-osr:not(.partition-active) {
background-color: #fefaf4;
color: #f8d6af;
}
}
}
}
}