ui: refine code and error handle

ui/lib/apps/ClusterInfo/components/HostTable.tsx

@@ -6,7 +6,7 @@ import { WarningOutlined } from '@ant-design/icons'
 import { getValueFormat } from '@baurine/grafana-value-formats'
 
 import client from '@lib/client'
-import { Bar, CardTableV2, Pre } from '@lib/components'
+import { Bar, CardTable, Pre } from '@lib/components'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 
 const { Text } = Typography
@@ -201,7 +201,7 @@ System: ${getValueFormat('percentunit')(system)}`
   ]
 
   return (
-    <CardTableV2
+    <CardTable
       cardNoMargin
       loading={isLoading}
       columns={columns}

ui/lib/apps/ClusterInfo/components/InstanceTable.tsx

@@ -1,17 +1,18 @@
-import { Divider, Popconfirm, Tooltip, Alert } from 'antd'
-import React, { useMemo, useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
 import { DeleteOutlined } from '@ant-design/icons'
-import { CardTableV2, InstanceStatusBadge } from '@lib/components'
-import DateTime from '@lib/components/DateTime'
-import { useClientRequest } from '@lib/utils/useClientRequest'
 import { usePersistFn } from '@umijs/hooks'
+import { Divider, Popconfirm, Tooltip } from 'antd'
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import client from '@lib/client'
+import { CardTable, InstanceStatusBadge } from '@lib/components'
+import DateTime from '@lib/components/DateTime'
 import {
   buildInstanceTable,
   IInstanceTableItem,
   InstanceStatus,
 } from '@lib/utils/instanceTable'
-import client from '@lib/client'
+import { useClientRequest } from '@lib/utils/useClientRequest'
 
 function StatusColumn({
   node,
@@ -78,6 +79,19 @@ export default function ListPage() {
   } = useClientRequest((cancelToken) =>
     client.getInstance().getPDTopology({ cancelToken })
   )
+  const errMessages = useMemo(() => {
+    let errMsgs: string[] = []
+    if (errTiDB) {
+      errMsgs.push('Load TiDB instances failed')
+    }
+    if (errStores) {
+      errMsgs.push('Load TiKV / TiFlash instances failed')
+    }
+    if (errPD) {
+      errMsgs.push('Load PD instances failed')
+    }
+    return errMsgs
+  }, [errTiDB, errStores, errPD])
 
   const [tableData, groupData] = useMemo(
     () =>
@@ -178,28 +192,14 @@ export default function ListPage() {
   )
 
   return (
-    <>
-      {errTiDB && (
-        <Alert message="Load TiDB instances failed" type="error" showIcon />
-      )}
-      {errStores && (
-        <Alert
-          message="Load TiKV / TiFlash instances failed"
-          type="error"
-          showIcon
-        />
-      )}
-      {errPD && (
-        <Alert message="Load PD instances failed" type="error" showIcon />
-      )}
-      <CardTableV2
-        disableSelectionZone
-        cardNoMargin
-        loading={loadingTiDB || loadingStores || loadingPD}
-        columns={columns}
-        items={tableData}
-        groups={groupData}
-      />
-    </>
+    <CardTable
+      disableSelectionZone
+      cardNoMargin
+      loading={loadingTiDB || loadingStores || loadingPD}
+      columns={columns}
+      items={tableData}
+      groups={groupData}
+      errMessages={errMessages}
+    />
   )
 }

ui/lib/apps/Diagnose/components/DiagnoseHistory.tsx

@@ -8,7 +8,7 @@ import { usePersistFn } from '@umijs/hooks'
 import type { TFunction } from 'i18next'
 
 import client, { DiagnoseReport } from '@lib/client'
-import { CardTableV2, DateTime } from '@lib/components'
+import { CardTable, DateTime } from '@lib/components'
 import openLink from '@lib/utils/openLink'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 
@@ -108,7 +108,7 @@ export default function DiagnoseHistory() {
   )
 
   return (
-    <CardTableV2
+    <CardTable
       cardNoMarginTop
       loading={isLoading}
       items={data || []}

ui/lib/apps/InstanceProfiling/pages/Detail.tsx

@@ -6,7 +6,7 @@ import { ArrowLeftOutlined } from '@ant-design/icons'
 import { usePersistFn } from '@umijs/hooks'
 
 import client from '@lib/client'
-import { CardTableV2, Head } from '@lib/components'
+import { CardTable, Head } from '@lib/components'
 import { useClientRequestWithPolling } from '@lib/utils/useClientRequest'
 import { InstanceKindName } from '@lib/utils/instanceTable'
 
@@ -145,7 +145,7 @@ export default function Page() {
           </Button>
         }
       />
-      <CardTableV2
+      <CardTable
         loading={isLoading && !data}
         columns={columns}
         items={data?.tasks_status || []}

ui/lib/apps/InstanceProfiling/pages/List.tsx

@@ -10,7 +10,7 @@ import client, {
 } from '@lib/client'
 import {
   Card,
-  CardTableV2,
+  CardTable,
   InstanceSelect,
   IInstanceSelectRefProps,
 } from '@lib/components'
@@ -199,7 +199,7 @@ export default function Page() {
 
       <div style={{ height: '100%', position: 'relative' }}>
         <ScrollablePane>
-          <CardTableV2
+          <CardTable
             cardNoMarginTop
             loading={listLoading}
             items={historyTable || []}

ui/lib/apps/Overview/components/RecentSlowQueries.tsx

@@ -0,0 +1,50 @@
+import { RightOutlined } from '@ant-design/icons'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import { DateTime } from '@lib/components'
+import { SlowQueriesTable, useSlowQuery } from '@lib/apps/SlowQuery'
+import { defSlowQueryColumnKeys } from '@lib/apps/SlowQuery/pages/List'
+import { DEF_SLOW_QUERY_OPTIONS } from '@lib/apps/SlowQuery/utils/useSlowQuery'
+
+export default function RecentSlowQueries() {
+  const { t } = useTranslation()
+  const {
+    orderOptions,
+    changeOrder,
+
+    loadingSlowQueries,
+    slowQueries,
+    queryTimeRange,
+
+    errorMsg,
+  } = useSlowQuery({ ...DEF_SLOW_QUERY_OPTIONS, limit: 10 }, false)
+
+  return (
+    <SlowQueriesTable
+      key={`slow_query_${slowQueries.length}`}
+      visibleColumnKeys={defSlowQueryColumnKeys}
+      loading={loadingSlowQueries}
+      slowQueries={slowQueries}
+      orderBy={orderOptions.orderBy}
+      desc={orderOptions.desc}
+      onChangeOrder={changeOrder}
+      errMessages={[errorMsg]}
+      title={
+        <Link to="/slow_query">
+          {t('overview.recent_slow_query.title')} <RightOutlined />
+        </Link>
+      }
+      subTitle={
+        <span>
+          <DateTime.Calendar
+            unixTimestampMs={queryTimeRange.beginTime * 1000}
+          />{' '}
+          ~{' '}
+          <DateTime.Calendar unixTimestampMs={queryTimeRange.endTime * 1000} />
+        </span>
+      }
+    />
+  )
+}

ui/lib/apps/Overview/components/RecentStatements.tsx

@@ -0,0 +1,60 @@
+import { RightOutlined } from '@ant-design/icons'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+
+import { StatementsTable, useStatement } from '@lib/apps/Statement'
+import { DateTime } from '@lib/components'
+
+export default function RecentStatements() {
+  const { t } = useTranslation()
+  const {
+    orderOptions,
+    changeOrder,
+
+    allTimeRanges,
+    validTimeRange,
+    loadingStatements,
+    statements,
+
+    errorMsg,
+  } = useStatement(undefined, false)
+
+  return (
+    <StatementsTable
+      key={`statement_${statements.length}`}
+      visibleColumnKeys={{
+        digest_text: true,
+        sum_latency: true,
+        avg_latency: true,
+        related_schemas: true,
+      }}
+      visibleItemsCount={10}
+      loading={loadingStatements}
+      statements={statements}
+      timeRange={validTimeRange}
+      orderBy={orderOptions.orderBy}
+      desc={orderOptions.desc}
+      onChangeOrder={changeOrder}
+      errMessages={[errorMsg]}
+      title={
+        <Link to="/statement">
+          {t('overview.top_statements.title')} <RightOutlined />
+        </Link>
+      }
+      subTitle={
+        allTimeRanges.length > 0 && (
+          <span>
+            <DateTime.Calendar
+              unixTimestampMs={(validTimeRange.begin_time ?? 0) * 1000}
+            />{' '}
+            ~{' '}
+            <DateTime.Calendar
+              unixTimestampMs={(validTimeRange.end_time ?? 0) * 1000}
+            />
+          </span>
+        )
+      }
+    />
+  )
+}