Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add min height of topology canvas #804

Merged
merged 3 commits into from
Nov 24, 2020
Merged

add min height of topology canvas #804

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f92e47
add min height and i18n
unbyte Nov 23, 2020
eba55c8
resolve comments
unbyte Nov 23, 2020
ffabb18
remove useless code
unbyte Nov 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions ui/lib/apps/ClusterInfo/components/StoreLocationTree/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -32,6 +33,7 @@ function calcHeight(root) {

export default function StoreLocationTree({ dataSource }: IStoreLocationProps) {
const divRef = useRef<HTMLDivElement>(null)
const { t } = useTranslation()

useEffect(() => {
let divWidth = divRef.current?.clientWidth || 0
Expand Down Expand Up @@ -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
unbyte marked this conversation as resolved.
Show resolved Hide resolved
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)
unbyte marked this conversation as resolved.
Show resolved Hide resolved

// update the nodes
const node = gNode.selectAll('g').data(nodes, (d: any) => d.id)
Expand Down Expand Up @@ -250,7 +255,7 @@ export default function StoreLocationTree({ dataSource }: IStoreLocationProps) {
<ZoomInOutlined id="slt-zoom-in" />
<ZoomOutOutlined id="slt-zoom-out" />
<ReloadOutlined id="slt-zoom-reset" />
<Tooltip title="You can also zoom in or out by pressing CTRL and scrolling mouse">
<Tooltip title={t('cluster_info.list.store_topology.tooltip')}>
<QuestionCircleOutlined />
</Tooltip>
</Space>
Expand Down
1 change: 1 addition & 0 deletions ui/lib/apps/ClusterInfo/translations/en.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}'
1 change: 1 addition & 0 deletions ui/lib/apps/ClusterInfo/translations/zh.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@ cluster_info:
instanceUnavailable: 获取该主机信息失败：无法访问实例
store_topology:
title: 存储拓扑
tooltip: 通过按住Ctrl并滑动鼠标滚轮也可缩放
unbyte marked this conversation as resolved.
Show resolved Hide resolved
error:
load: '加载组件 {{comp}} 失败: {{cause}}'