From 1e0c4c3904e9a2879326168d2b83b7d68bb26ef5 Mon Sep 17 00:00:00 2001 From: GraceWalk Date: Thu, 29 Sep 2022 10:48:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Topic=20=E8=AF=A6=E6=83=85=E6=B6=88?= =?UTF-8?q?=E6=81=AF=20Value=20=E5=88=97=E6=94=AF=E6=8C=81=E5=A4=8D?= =?UTF-8?q?=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/CopyContent/index.less | 32 +++++++++++++++++ .../src/components/CopyContent/index.tsx | 35 ++++++++++++++++++ .../pages/Consumers/ConsumerGroupDetail.tsx | 36 ++++--------------- .../src/pages/TopicDetail/config.tsx | 11 +++--- 4 files changed, 80 insertions(+), 34 deletions(-) create mode 100644 km-console/packages/layout-clusters-fe/src/components/CopyContent/index.less create mode 100644 km-console/packages/layout-clusters-fe/src/components/CopyContent/index.tsx diff --git a/km-console/packages/layout-clusters-fe/src/components/CopyContent/index.less b/km-console/packages/layout-clusters-fe/src/components/CopyContent/index.less new file mode 100644 index 00000000..c21edafd --- /dev/null +++ b/km-console/packages/layout-clusters-fe/src/components/CopyContent/index.less @@ -0,0 +1,32 @@ +.content-with-copy { + display: flex; + align-items: center; + .content { + flex: 1; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-break: break-all; + } + .copy-icon { + width: 20px; + height: 20px; + padding-top: 2px; + border-radius: 50%; + margin-left: 4px; + font-size: 16px; + color: #adb5bc; + opacity: 0; + &:hover { + background: rgba(33, 37, 41, 0.04); + color: #74788d; + } + } +} + +.dcloud-table-cell-row-hover { + .copy-icon { + opacity: 1; + } +} \ No newline at end of file diff --git a/km-console/packages/layout-clusters-fe/src/components/CopyContent/index.tsx b/km-console/packages/layout-clusters-fe/src/components/CopyContent/index.tsx new file mode 100644 index 00000000..3534fb97 --- /dev/null +++ b/km-console/packages/layout-clusters-fe/src/components/CopyContent/index.tsx @@ -0,0 +1,35 @@ +import { CheckCircleFilled } from '@ant-design/icons'; +import { Tooltip } from 'knowdesign'; +import React, { useState } from 'react'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { IconFont } from '@knowdesign/icons'; +import './index.less'; + +const ContentWithCopy = (props: { content: string }) => { + const { content } = props; + const [visible, setVisible] = useState(false); + return ( + +
+ + {content} + + {content && ( + + 复制成功 + + } + visible={visible} + onVisibleChange={() => setVisible(false)} + > + setVisible(true)} /> + + )} +
+ + ); +}; + +export default ContentWithCopy; diff --git a/km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx b/km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx index 0cdd7b63..1e057d29 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/Consumers/ConsumerGroupDetail.tsx @@ -1,15 +1,15 @@ import React, { useState, useEffect } from 'react'; import { useParams, useHistory } from 'react-router-dom'; -import CopyToClipboard from 'react-copy-to-clipboard'; -import { AppContainer, Divider, Drawer, IconFont, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign'; +import { AppContainer, Divider, Drawer, ProTable, Select, SingleChart, Space, Tooltip, Utils } from 'knowdesign'; +import { IconFont } from '@knowdesign/icons'; import { DRangeTime } from 'knowdesign'; import { CHART_COLOR_LIST, getBasicChartConfig } from '@src/constants/chartConfig'; import Api from '@src/api/index'; import { hashDataParse } from '@src/constants/common'; import { ClustersPermissionMap } from '../CommonConfig'; import ResetOffsetDrawer from './ResetOffsetDrawer'; -import { CheckCircleFilled } from '@ant-design/icons'; import SwitchTab from '@src/components/SwitchTab'; +import ContentWithCopy from '@src/components/CopyContent'; const { Option } = Select; @@ -44,33 +44,6 @@ const metricWithType = [ { metricName: 'Lag', metricType: 102 }, ]; -const ContentWithCopy = (props: { content: string }) => { - const { content } = props; - const [visible, setVisible] = useState(false); - return ( - -
- - {content} - - {content && ( - - 复制成功 - - } - visible={visible} - onVisibleChange={() => setVisible(false)} - > - setVisible(true)} /> - - )} -
- - ); -}; - export default (props: any) => { const { scene } = props; const params = useParams<{ @@ -104,6 +77,9 @@ export default (props: any) => { title: 'Topic Partition', dataIndex: 'partitionId', key: 'partitionId', + lineClampOne: true, + needTooltip: true, + width: 180, render: (v: string, record: any) => { return `${record.topicName}-${v}`; }, diff --git a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx index 03a93181..aa1e25d3 100644 --- a/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx +++ b/km-console/packages/layout-clusters-fe/src/pages/TopicDetail/config.tsx @@ -1,8 +1,9 @@ import React from 'react'; import moment from 'moment'; import { timeFormat } from '../../constants/common'; -import { IconFont, Tooltip } from 'knowdesign'; - +import { message, Tooltip, Utils } from 'knowdesign'; +import { IconFont } from '@knowdesign/icons'; +import ContentWithCopy from '@src/components/CopyContent'; const aclOperationType: any = { 0: 'UNKNOWN', 1: 'ANY', @@ -80,6 +81,7 @@ export const getTopicMessagesColmns = () => { title: 'Offset', dataIndex: 'offset', key: 'offset', + render: (t: number) => (t ? t.toLocaleString() : '-'), }, { title: 'Timestamp', @@ -100,8 +102,9 @@ export const getTopicMessagesColmns = () => { dataIndex: 'value', key: 'value', width: 280, - lineClampTwo: true, - needTooltip: true, + render: (t: string) => { + return t ? : '-'; + }, }, { title: 'Header',