From 3f92e47174deb9c624f4343122b5a98533fc33ac Mon Sep 17 00:00:00 2001 From: Helios Date: Mon, 23 Nov 2020 10:02:24 +0800 Subject: [PATCH 1/3] add min height and i18n --- .../ClusterInfo/components/StoreLocationTree/index.tsx | 9 +++++++-- ui/lib/apps/ClusterInfo/translations/en.yaml | 1 + ui/lib/apps/ClusterInfo/translations/zh.yaml | 1 + 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx b/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx index 4fcdbefac5..0d4d8617b7 100644 --- a/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx +++ b/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx @@ -7,6 +7,7 @@ import { QuestionCircleOutlined, } from '@ant-design/icons' import { Space, Tooltip } from 'antd' +import { useTranslation } from 'react-i18next' export interface IStoreLocationProps { dataSource: any @@ -32,6 +33,7 @@ function calcHeight(root) { export default function StoreLocationTree({ dataSource }: IStoreLocationProps) { const divRef = useRef(null) + const { t } = useTranslation() useEffect(() => { let divWidth = divRef.current?.clientWidth || 0 @@ -129,11 +131,14 @@ export default function StoreLocationTree({ dataSource }: IStoreLocationProps) { root.y0 = root.y } + const minHeight = document.documentElement.clientHeight - 80 - 48 * 2 // 48 = margin of cardInner + const contentHeight = boundHeight + margin.top + margin.bottom + const transition = svg .transition() .duration(duration) .attr('width', divWidth) - .attr('height', boundHeight + margin.top + margin.bottom) + .attr('height', minHeight >= contentHeight ? minHeight : contentHeight) // update the nodes const node = gNode.selectAll('g').data(nodes, (d: any) => d.id) @@ -250,7 +255,7 @@ export default function StoreLocationTree({ dataSource }: IStoreLocationProps) { - + diff --git a/ui/lib/apps/ClusterInfo/translations/en.yaml b/ui/lib/apps/ClusterInfo/translations/en.yaml index 74009096f7..fbd363c8ad 100644 --- a/ui/lib/apps/ClusterInfo/translations/en.yaml +++ b/ui/lib/apps/ClusterInfo/translations/en.yaml @@ -28,5 +28,6 @@ cluster_info: instanceUnavailable: Host information is unknow due to instance unreachable store_topology: title: Store Topology + tooltip: You can also zoom in or out by pressing CTRL and scrolling mouse error: load: 'Load component {{comp}} error: {{cause}}' diff --git a/ui/lib/apps/ClusterInfo/translations/zh.yaml b/ui/lib/apps/ClusterInfo/translations/zh.yaml index 84febfa668..80a988f92a 100644 --- a/ui/lib/apps/ClusterInfo/translations/zh.yaml +++ b/ui/lib/apps/ClusterInfo/translations/zh.yaml @@ -28,5 +28,6 @@ cluster_info: instanceUnavailable: 获取该主机信息失败：无法访问实例 store_topology: title: 存储拓扑 + tooltip: 通过按住Ctrl并滑动鼠标滚轮也可缩放 error: load: '加载组件 {{comp}} 失败: {{cause}}' From eba55c8a5ca71ce75084306b1314c67223057224 Mon Sep 17 00:00:00 2001 From: Helios Date: Mon, 23 Nov 2020 23:24:17 +0800 Subject: [PATCH 2/3] resolve comments --- .../apps/ClusterInfo/components/StoreLocation.tsx | 7 ++++++- .../components/StoreLocationTree/index.tsx | 13 ++++++++----- ui/lib/apps/ClusterInfo/translations/zh.yaml | 2 +- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx b/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx index 65dec6ff16..044fd443ff 100644 --- a/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx +++ b/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx @@ -53,7 +53,12 @@ export default function StoreLocation() {
- + document.documentElement.clientHeight - 80 - 48 * 2 // 48 = margin of cardInner} + } + />
) diff --git a/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx b/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx index 0d4d8617b7..3283ce3d88 100644 --- a/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx +++ b/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx @@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next' export interface IStoreLocationProps { dataSource: any + getMinHeight?: () => number } const margin = { left: 60, right: 40, top: 60, bottom: 100 } @@ -31,7 +32,10 @@ function calcHeight(root) { return x1 - x0 } -export default function StoreLocationTree({ dataSource }: IStoreLocationProps) { +export default function StoreLocationTree({ + dataSource, + getMinHeight, +}: IStoreLocationProps) { const divRef = useRef(null) const { t } = useTranslation() @@ -131,15 +135,14 @@ export default function StoreLocationTree({ dataSource }: IStoreLocationProps) { root.y0 = root.y } - const minHeight = document.documentElement.clientHeight - 80 - 48 * 2 // 48 = margin of cardInner const contentHeight = boundHeight + margin.top + margin.bottom const transition = svg .transition() .duration(duration) .attr('width', divWidth) - .attr('height', minHeight >= contentHeight ? minHeight : contentHeight) - + .attr('height', Math.max(getMinHeight?.() || 0, contentHeight)) + console.log(getMinHeight?.()) // update the nodes const node = gNode.selectAll('g').data(nodes, (d: any) => d.id) @@ -241,7 +244,7 @@ export default function StoreLocationTree({ dataSource }: IStoreLocationProps) { return () => { window.removeEventListener('resize', resizeHandler) } - }, [dataSource]) + }, [dataSource, getMinHeight]) return (
diff --git a/ui/lib/apps/ClusterInfo/translations/zh.yaml b/ui/lib/apps/ClusterInfo/translations/zh.yaml index 80a988f92a..e3e916b646 100644 --- a/ui/lib/apps/ClusterInfo/translations/zh.yaml +++ b/ui/lib/apps/ClusterInfo/translations/zh.yaml @@ -28,6 +28,6 @@ cluster_info: instanceUnavailable: 获取该主机信息失败：无法访问实例 store_topology: title: 存储拓扑 - tooltip: 通过按住Ctrl并滑动鼠标滚轮也可缩放 + tooltip: 按住 Ctrl 键并滑动鼠标滚轮可以缩放 error: load: '加载组件 {{comp}} 失败: {{cause}}' From ffabb18a5f4d901ba0de58d931ed81f3cdd431ef Mon Sep 17 00:00:00 2001 From: Helios Date: Tue, 24 Nov 2020 15:27:32 +0800 Subject: [PATCH 3/3] remove useless code --- ui/lib/apps/ClusterInfo/components/StoreLocation.tsx | 2 +- ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx b/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx index 044fd443ff..f6710b8cc0 100644 --- a/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx +++ b/ui/lib/apps/ClusterInfo/components/StoreLocation.tsx @@ -56,7 +56,7 @@ export default function StoreLocation() { document.documentElement.clientHeight - 80 - 48 * 2 // 48 = margin of cardInner} + () => document.documentElement.clientHeight - 80 - 48 * 2 // 48 = margin of cardInner } /> diff --git a/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx b/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx index 3283ce3d88..c4d80205a2 100644 --- a/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx +++ b/ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx @@ -142,7 +142,7 @@ export default function StoreLocationTree({ .duration(duration) .attr('width', divWidth) .attr('height', Math.max(getMinHeight?.() || 0, contentHeight)) - console.log(getMinHeight?.()) + // update the nodes const node = gNode.selectAll('g').data(nodes, (d: any) => d.id)