Upgrade antd (#811)

* *: upgrade antd from 4.2.5 to 4.8.5 * yarn upgrade dayjs --latest * fix tabs style * fix tabs style * wip * only use CardTabs as the indicator * use variables in less * refine * refactor CardTabs * refine style Co-authored-by: Wenxuan <hi@breeswish.org>
pingcap · Jan 4, 2021 · 8ad48d9 · 8ad48d9
1 parent 68ca2fc
commit 8ad48d9
Show file tree

Hide file tree

Showing 8 changed files with 515 additions and 477 deletions.
diff --git a/ui/lib/apps/ClusterInfo/pages/List.module.less b/ui/lib/apps/ClusterInfo/pages/List.module.less
@@ -0,0 +1,15 @@
+@import '~antd/es/style/themes/default.less';
+
+.card_tab_navs {
+  padding-left: @padding-page; // 48px
+  padding-right: @padding-page; // 48px
+  height: @padding-page; // 48px
+  margin-bottom: @padding-md; // 16px
+  border-bottom: 1px solid @gray-4;
+
+  :global {
+    .ant-tabs-ink-bar {
+      height: @outline-width; // 2px
+    }
+  }
+}
diff --git a/ui/lib/apps/ClusterInfo/pages/List.tsx b/ui/lib/apps/ClusterInfo/pages/List.tsx
@@ -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.card_tab_navs} />
     </Sticky>
   )
 }
@@ -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>
@@ -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>
   )

diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -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')}>
@@ -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>

diff --git a/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/lib/apps/Statement/pages/Detail/PlanDetail.tsx
@@ -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,
       })}
     >
@@ -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>

diff --git a/ui/lib/components/CardTabs/index.module.less b/ui/lib/components/CardTabs/index.module.less
@@ -2,15 +2,8 @@
   margin-left: -@padding-page;
   margin-right: -@padding-page;
 
-  :global {
-    .ant-tabs-bar {
-      padding-left: @padding-page;
-      padding-right: @padding-page;
-    }
-
-    .ant-tabs-content > .ant-tabs-tabpane {
-      padding-left: @padding-page;
-      padding-right: @padding-page;
-    }
+  .card_tab_navs {
+    padding-left: @padding-page;
+    padding-right: @padding-page;
   }
 }
diff --git a/ui/lib/components/CardTabs/index.tsx b/ui/lib/components/CardTabs/index.tsx
@@ -1,23 +1,57 @@
-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 renderCardTabBar(props, DefaultTabBar) {
+  return <DefaultTabBar {...props} className={styles.card_tab_navs} />
 }
 
-function CardTabs({ className, children, ...restProps }: ICardTabsProps) {
+function CardTabs({
+  className,
+  tabs,
+  defaultActiveKey,
+  onChange,
+  renderTabBar,
+  ...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}
+        defaultActiveKey={tabKey}
+        onChange={changeTab}
+        renderTabBar={renderTabBar || renderCardTabBar}
+        {...restProps}
+      >
+        {tabs.map((tab) => (
+          <Tabs.TabPane tab={tab.title} key={tab.key} />
+        ))}
+      </Tabs>
+      {selectedTab?.content()}
+    </>
   )
 }
 
-CardTabs.TabPane = Tabs.TabPane
-
 export default CardTabs
diff --git a/ui/package.json b/ui/package.json
@@ -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",