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

Jump to bottom

Upgrade antd #811

Merged
merged 14 commits into from
Dec 14, 2020
Merged

Upgrade antd #811

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
9beb749
*: upgrade antd from 4.2.5 to 4.8.5
baurine Nov 24, 2020
5559a6f
yarn upgrade dayjs --latest
baurine Nov 24, 2020
d17157b
fix tabs style
baurine Nov 24, 2020
200a03f
fix tabs style
baurine Nov 24, 2020
19ca772
wip
baurine Nov 25, 2020
6292e6b
only use CardTabs as the indicator
baurine Nov 25, 2020
eeda84f
use variables in less
baurine Nov 25, 2020
cc32cf6
refine
baurine Nov 25, 2020
a9aad8f
Merge remote-tracking branch 'origin/master' into upgrade-antd
baurine Nov 25, 2020
4312b78
Merge remote-tracking branch 'origin/master' into upgrade-antd
baurine Nov 26, 2020
edde0c1
Merge remote-tracking branch 'origin/master' into upgrade-antd
baurine Nov 27, 2020
18d2747
refactor CardTabs
baurine Nov 27, 2020
e68c6ba
refine style
baurine Nov 27, 2020
5c971d3
Merge branch 'master' into upgrade-antd
breezewish Dec 14, 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
14 changes: 14 additions & 0 deletions ui/lib/apps/ClusterInfo/pages/List.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@import '~antd/es/style/themes/default.less';

.sticky_tabs_header {
padding-left: @padding-page; // 48px
height: @padding-page; // 48px
margin-bottom: @padding-md; // 16px
border-bottom: 1px solid @gray-4;
Copy link
Collaborator Author

@baurine baurine Nov 25, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although 1px and solid also have variables, I think here using the value may be more direct and explicit.


:global {
.ant-tabs-ink-bar {
height: @outline-width; // 2px
}
}
}
68 changes: 34 additions & 34 deletions ui/lib/apps/ClusterInfo/pages/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@ import { useNavigate, useParams } from 'react-router-dom'
import { Card } from '@lib/components'
import CardTabs from '@lib/components/CardTabs'

import InstanceTable from '../components/InstanceTable'
import HostTable from '../components/HostTable'
import DiskTable from '../components/DiskTable'
import InstanceTable from '../components/InstanceTable'
import StoreLocation from '../components/StoreLocation'
import Statistics from '../components/Statistics'

import styles from './List.module.less'

function renderTabBar(props, DefaultTabBar) {
return (
<Sticky stickyPosition={StickyPositionType.Header}>
<DefaultTabBar {...props} />
<DefaultTabBar {...props} className={styles.sticky_tabs_header} />
</Sticky>
)
}
Expand All @@ -26,6 +28,34 @@ export default function ListPage() {
const navigate = useNavigate()
const { t } = useTranslation()

const tabs = [
{
key: 'instance',
title: t('cluster_info.list.instance_table.title'),
content: () => <InstanceTable />,
},
{
key: 'host',
title: t('cluster_info.list.host_table.title'),
content: () => <HostTable />,
},
{
key: 'disk',
title: t('cluster_info.list.disk_table.title'),
content: () => <DiskTable />,
},
{
key: 'store_topology',
title: t('cluster_info.list.store_topology.title'),
content: () => <StoreLocation />,
},
{
key: 'statistics',
title: t('cluster_info.list.statistics.title'),
content: () => <Statistics />,
},
]

return (
<ScrollablePane style={{ height: '100vh' }}>
<Card>
Expand All @@ -36,38 +66,8 @@ export default function ListPage() {
}}
renderTabBar={renderTabBar}
animated={false}
>
<CardTabs.TabPane
tab={t('cluster_info.list.instance_table.title')}
key="instance"
>
<InstanceTable />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('cluster_info.list.host_table.title')}
key="host"
>
<HostTable />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('cluster_info.list.disk_table.title')}
key="disk"
>
<DiskTable />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('cluster_info.list.store_topology.title')}
key="store_topology"
>
<StoreLocation />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('cluster_info.list.statistics.title')}
key="statistics"
>
<Statistics />
</CardTabs.TabPane>
</CardTabs>
tabs={tabs}
/>
</Card>
</ScrollablePane>
)
Expand Down
50 changes: 24 additions & 26 deletions ui/lib/apps/SlowQuery/pages/Detail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,29 @@ function DetailPage() {
const togglePlan = () =>
setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))

const tabs = [
{
key: 'basic',
title: t('slow_query.detail.tabs.basic'),
content: () => <TabBasic data={data!} />,
},
{
key: 'time',
title: t('slow_query.detail.tabs.time'),
content: () => <TabTime data={data!} />,
},
{
key: 'copr',
title: t('slow_query.detail.tabs.copr'),
content: () => <TabCopr data={data!} />,
},
{
key: 'txn',
title: t('slow_query.detail.tabs.txn'),
content: () => <TabTxn data={data!} />,
},
]

return (
<div>
<Head title={t('slow_query.detail.head.title')}>
Expand Down Expand Up @@ -158,32 +181,7 @@ function DetailPage() {
</Descriptions.Item>
</Descriptions>

<CardTabs animated={false}>
<CardTabs.TabPane
tab={t('slow_query.detail.tabs.basic')}
key="basic"
>
<TabBasic data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('slow_query.detail.tabs.time')}
key="time"
>
<TabTime data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('slow_query.detail.tabs.copr')}
key="copr"
>
<TabCopr data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('slow_query.detail.tabs.txn')}
key="txn"
>
<TabTxn data={data} />
</CardTabs.TabPane>
</CardTabs>
<CardTabs animated={false} tabs={tabs} />
</>
)}
</AnimatedSkeleton>
Expand Down
73 changes: 36 additions & 37 deletions ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,17 +67,46 @@ function PlanDetail({ query }: IPlanDetailProps) {
const togglePlan = () =>
setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))

let title_key
let titleKey
if (query.allPlans === 1) {
title_key = 'one_for_all'
titleKey = 'one_for_all'
} else if (query.plans.length === query.allPlans) {
title_key = 'all'
titleKey = 'all'
} else {
title_key = 'some'
titleKey = 'some'
}

const tabs = [
{
key: 'basic',
title: t('statement.pages.detail.tabs.basic'),
content: () => <TabBasic data={data!} />,
},
{
key: 'time',
title: t('statement.pages.detail.tabs.time'),
content: () => <TabTime data={data!} />,
},
{
key: 'copr',
title: t('statement.pages.detail.tabs.copr'),
content: () => <TabCopr data={data!} />,
},
{
key: 'txn',
title: t('statement.pages.detail.tabs.txn'),
content: () => <TabTxn data={data!} />,
},
{
key: 'slow_query',
title: t('statement.pages.detail.tabs.slow_query'),
content: () => <SlowQueryTab query={query} />,
},
]

return (
<Card
title={t(`statement.pages.detail.desc.plans.title.${title_key}`, {
title={t(`statement.pages.detail.desc.plans.title.${titleKey}`, {
n: query.plans.length,
})}
>
Expand Down Expand Up @@ -167,38 +196,8 @@ function PlanDetail({ query }: IPlanDetailProps) {
</Expand>
</Descriptions.Item>
</Descriptions>
<CardTabs animated={false}>
<CardTabs.TabPane
tab={t('statement.pages.detail.tabs.basic')}
key="basic"
>
<TabBasic data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('statement.pages.detail.tabs.time')}
key="time"
>
<TabTime data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('statement.pages.detail.tabs.copr')}
key="copr"
>
<TabCopr data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('statement.pages.detail.tabs.txn')}
key="txn"
>
<TabTxn data={data} />
</CardTabs.TabPane>
<CardTabs.TabPane
tab={t('statement.pages.detail.tabs.slow_query')}
key="slow_query"
>
<SlowQueryTab query={query} />
</CardTabs.TabPane>
</CardTabs>

<CardTabs animated={false} tabs={tabs} />
</>
)}
</AnimatedSkeleton>
Expand Down
2 changes: 1 addition & 1 deletion ui/lib/components/CardTabs/index.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
margin-right: -@padding-page;

:global {
.ant-tabs-bar {
.ant-tabs-nav {
Copy link
Member

@breezewish breezewish Nov 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe better to find some way to remove this rule (which depends on the internal implementation of Antd's Tab).

I'm not sure renderTabBar could be useful.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, let me try it.

Copy link
Collaborator Author

@baurine baurine Nov 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works, awesome!

padding-left: @padding-page;
padding-right: @padding-page;
}
Expand Down
44 changes: 36 additions & 8 deletions ui/lib/components/CardTabs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,51 @@
import React from 'react'
import React, { useState } from 'react'
import { Tabs } from 'antd'
import cx from 'classnames'
import styles from './index.module.less'
import { TabsProps } from 'antd/es/tabs'

type Tab = {
key: string
title: string
content: () => React.ReactNode
}

export interface ICardTabsProps extends TabsProps {
className?: string
children?: React.ReactNode
tabs: Tab[]
}

function CardTabs({ className, children, ...restProps }: ICardTabsProps) {
function CardTabs({
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @breeswish , refactor the CardTabs like this, is it ok?

className,
tabs,
defaultActiveKey,
onChange,
...restProps
}: ICardTabsProps) {
const [tabKey, setTabKey] = useState(defaultActiveKey || tabs[0].key)
const c = cx(styles.tabs, className)
const selectedTab = tabs.find((tab) => tab.key === tabKey)

function changeTab(tabKey) {
setTabKey(tabKey)
onChange && onChange(tabKey)
}

return (
<Tabs className={c} {...restProps}>
{children}
</Tabs>
<>
<Tabs
className={c}
{...restProps}
defaultActiveKey={tabKey}
onChange={changeTab}
>
{tabs.map((tab) => (
<Tabs.TabPane tab={tab.title} key={tab.key}></Tabs.TabPane>
))}
</Tabs>
{selectedTab?.content()}
</>
)
}

CardTabs.TabPane = Tabs.TabPane

export default CardTabs
4 changes: 2 additions & 2 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
"@umijs/hooks": "^1.9.3",
"@welldone-software/why-did-you-render": "^4.2.7",
"ace-builds": "^1.4.12",
"antd": "~4.2",
"antd": "~4.8.5",
"axios": "^0.19.0",
"bulma": "^0.9.0",
"classnames": "^2.2.6",
"d3": "^5.16.0",
"dayjs": "^1.8.31",
"dayjs": "^1.9.6",
"echarts": "^4.8.0",
"echarts-for-react": "^2.0.16",
"history": "^5.0.0",
Expand Down
Loading