8x48/KnowStreaming
1
0
Fork 0
mirror of https://github.com/didi/KnowStreaming.git synced 2025-12-24 11:52:08 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: 优化 Topic 扩分区名称 & 描述展示

Browse Source
This commit is contained in:
GraceWalk
2022-10-21 11:44:38 +08:00
parent 47b6b3577a
commit 8f4ff36c09
2 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
km-console/packages/layout-clusters-fe/src/pages/TopicList/ExpandPartition.tsx
View File

@@ -1,9 +1,10 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { AppContainer, Button, Divider, Drawer, Form, InputNumber, notification, SingleChart, Space, Spin, Utils } from 'knowdesign'; import { AppContainer, Button, Divider, Drawer, Form, InputNumber, SingleChart, Space, Spin, Tooltip, Utils } from 'knowdesign';
import notification from '@src/components/Notification';
import Api, { MetricType } from '@src/api/index'; import Api, { MetricType } from '@src/api/index';
import { getBasicChartConfig, getUnit } from '@src/constants/chartConfig'; import { getBasicChartConfig, getDataUnit } from '@src/constants/chartConfig';
import { formatChartData, MetricDefaultChartDataType } from '@src/constants/chartConfig'; import { formatChartData, OriginMetricData } from '@src/constants/chartConfig';
const ExpandPartition = (props: { record: any; onConfirm: () => void }) => { const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
const [global] = AppContainer.useGlobalValue(); const [global] = AppContainer.useGlobalValue();
@@ -60,7 +61,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
); );
const empiricalMinValue = 10 * 1024 * record.partitionNum; const empiricalMinValue = 10 * 1024 * record.partitionNum;
const lines = data.map((metric: MetricDefaultChartDataType) => { const lines = data.map((metric: OriginMetricData) => {
const child = metric.metricLines[0]; const child = metric.metricLines[0];
child.name = metric.metricName; child.name = metric.metricName;
return child; return child;
@@ -87,7 +88,7 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
}); });
}, [expandPartitionsVisible]); }, [expandPartitionsVisible]);
const formattedMinBytesInOut = (v: number) => { const formattedMinBytesInOut = (v: number) => {
const [unit, size] = getUnit(v); const [unit, size] = getDataUnit['Memory'](v);
return `${(v / size).toFixed(2)}${unit}/s`; return `${(v / size).toFixed(2)}${unit}/s`;
}; };
return ( return (
@@ -130,11 +131,15 @@ const ExpandPartition = (props: { record: any; onConfirm: () => void }) => {
<div className="brief-info"> <div className="brief-info">
<div className="item"> <div className="item">
<span className="field">Topic名称 :</span> <span className="field">Topic名称 :</span>
<span className="val">{record.topicName}</span> <Tooltip title={record.topicName}>
<span className="val">{record.topicName}</span>
</Tooltip>
</div> </div>
<div className="item"> <div className="item">
<span className="field desc-field">描述 :</span> <span className="field desc-field">描述 :</span>
<span className="val desc-val">{record.description}</span> <Tooltip title={record.description || '-'}>
<span className="desc-val">{record.description || '-'}</span>
</Tooltip>
</div> </div>
</div> </div>
<Spin spinning={loading}> <Spin spinning={loading}>

26
km-console/packages/layout-clusters-fe/src/pages/TopicList/index.less
View File

@@ -142,6 +142,7 @@
color: #74788d; color: #74788d;
} }
.desc-field { .desc-field {
flex-shrink: 0;
width: 34px; width: 34px;
} }
.val, .val,
@@ -149,17 +150,28 @@
color: #495057; color: #495057;
letter-spacing: 0; letter-spacing: 0;
font-weight: 400; font-weight: 400;
}
.val {
width: 105px;
margin-left: 12px; margin-left: 12px;
} }
.desc-val { .val {
width: 809px; max-width: 208px;
height: 36px;
overflow: hidden; overflow: hidden;
-webkit-box-orient: vertical; text-overflow: ellipsis;
white-space: nowrap;
}
.desc-val {
height: 36px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
&:first-child {
margin-right: 40px;
}
&:last-child {
flex: 1;
} }
} }
} }