pingcap · breezewish · Nov 26, 2020 · Nov 26, 2020
diff --git a/ui/lib/apps/InstanceProfiling/pages/Detail.tsx b/ui/lib/apps/InstanceProfiling/pages/Detail.tsx
@@ -149,6 +149,7 @@ export default function Page() {
         items={data?.tasks_status || []}
         errors={[error]}
         onRowClicked={handleRowClick}
+        hideLoadingWhenNotEmpty
         extendLastColumn
       />
     </div>

diff --git a/ui/lib/apps/SearchLogs/components/SearchResult.tsx b/ui/lib/apps/SearchLogs/components/SearchResult.tsx
@@ -152,6 +152,7 @@ export default function SearchResult({ patterns, taskGroupID, tasks }: Props) {
         items={logPreviews || []}
         onRenderRow={renderRow}
         extendLastColumn
+        hideLoadingWhenNotEmpty
       />
     </div>
   )

diff --git a/ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx b/ui/lib/apps/SlowQuery/components/SlowQueriesTable.tsx
@@ -1,10 +1,6 @@
 import { usePersistFn } from '@umijs/hooks'
 import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-
 import { CardTable, ICardTableProps } from '@lib/components'
-import openLink from '@lib/utils/openLink'
-
 import DetailPage from '../pages/Detail'
 import { ISlowQueryTableController } from '../utils/useSlowQueryTableController'
 
@@ -23,17 +19,14 @@ function SlowQueriesTable({ controller, ...restProps }: Props) {
     visibleColumnKeys,
   } = controller
 
-  const navigate = useNavigate()
-  const handleRowClick = usePersistFn(
-    (rec, _idx, ev: React.MouseEvent<HTMLElement>) => {
-      const qs = DetailPage.buildQuery({
-        digest: rec.digest,
-        connectId: rec.connection_id,
-        timestamp: rec.timestamp,
-      })
-      openLink(`/slow_query/detail?${qs}`, ev, navigate)
-    }
-  )
+  const handleRowClick = usePersistFn((rec) => {
+    const qs = DetailPage.buildQuery({
+      digest: rec.digest,
+      connectId: rec.connection_id,
+      timestamp: rec.timestamp,
+    })
+    window.open(`#/slow_query/detail?${qs}`, '_blank')
+  })
 
   const getKey = useCallback((row) => `${row.digest}_${row.timestamp}`, [])
 

diff --git a/ui/lib/apps/SlowQuery/pages/Detail/index.tsx b/ui/lib/apps/SlowQuery/pages/Detail/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { Space } from 'antd'
 import { useTranslation } from 'react-i18next'
-import { Link, useLocation } from 'react-router-dom'
-import { ArrowLeftOutlined } from '@ant-design/icons'
+import { useLocation } from 'react-router-dom'
 import { useLocalStorageState } from '@umijs/hooks'
 
 import client from '@lib/client'
@@ -68,14 +67,7 @@ function DetailPage() {
 
   return (
     <div>
-      <Head
-        title={t('slow_query.detail.head.title')}
-        back={
-          <Link to={`/slow_query`}>
-            <ArrowLeftOutlined /> {t('slow_query.detail.head.back')}
-          </Link>
-        }
-      >
+      <Head title={t('slow_query.detail.head.title')}>
         <AnimatedSkeleton showSkeleton={isLoading}>
           {error && <ErrorBar errors={[error]} />}
           {!!data && (

diff --git a/ui/lib/apps/Statement/components/StatementsTable.tsx b/ui/lib/apps/Statement/components/StatementsTable.tsx
@@ -1,10 +1,6 @@
 import { usePersistFn } from '@umijs/hooks'
 import React, { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
-
 import { CardTable, ICardTableProps } from '@lib/components'
-import openLink from '@lib/utils/openLink'
-
 import DetailPage from '../pages/Detail'
 import { IStatementTableController } from '../utils/useStatementTableController'
 
@@ -24,18 +20,15 @@ export default function StatementsTable({ controller, ...restPrpos }: Props) {
     visibleColumnKeys,
   } = controller
 
-  const navigate = useNavigate()
-  const handleRowClick = usePersistFn(
-    (rec, _idx, ev: React.MouseEvent<HTMLElement>) => {
-      const qs = DetailPage.buildQuery({
-        digest: rec.digest,
-        schema: rec.schema_name,
-        beginTime: begin_time,
-        endTime: end_time,
-      })
-      openLink(`/statement/detail?${qs}`, ev, navigate)
-    }
-  )
+  const handleRowClick = usePersistFn((rec) => {
+    const qs = DetailPage.buildQuery({
+      digest: rec.digest,
+      schema: rec.schema_name,
+      beginTime: begin_time,
+      endTime: end_time,
+    })
+    window.open(`#/statement/detail?${qs}`, '_blank')
+  })
 
   const getKey = useCallback((row) => `${row.digest}_${row.schema_name}`, [])
 

diff --git a/ui/lib/apps/Statement/pages/Detail/index.tsx b/ui/lib/apps/Statement/pages/Detail/index.tsx
@@ -3,8 +3,7 @@ import { SelectionMode } from 'office-ui-fabric-react/lib/DetailsList'
 import { Selection } from 'office-ui-fabric-react/lib/Selection'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Link, useLocation } from 'react-router-dom'
-import { ArrowLeftOutlined } from '@ant-design/icons'
+import { useLocation } from 'react-router-dom'
 import { useLocalStorageState } from '@umijs/hooks'
 
 import client, { StatementModel } from '@lib/client'
@@ -76,14 +75,7 @@ function DetailPage() {
 
   return (
     <div>
-      <Head
-        title={t('statement.pages.detail.head.title')}
-        back={
-          <Link to={`/statement`}>
-            <ArrowLeftOutlined /> {t('statement.pages.detail.head.back')}
-          </Link>
-        }
-      >
+      <Head title={t('statement.pages.detail.head.title')}>
         <AnimatedSkeleton showSkeleton={isLoading}>
           {error && <ErrorBar errors={[error]} />}
           {plans && plans.length > 0 && (

diff --git a/ui/lib/components/CardTable/index.tsx b/ui/lib/components/CardTable/index.tsx
@@ -73,6 +73,7 @@ export interface ICardTableProps extends IDetailsListProps {
   className?: string
   style?: object
   loading?: boolean
+  hideLoadingWhenNotEmpty?: boolean // Whether loading animation should not show when data is not empty
   errors?: any[]
 
   cardExtra?: React.ReactNode
@@ -133,6 +134,7 @@ export default function CardTable(props: ICardTableProps) {
     className,
     style,
     loading = false,
+    hideLoadingWhenNotEmpty,
     errors = [],
     cardExtra,
     cardNoMargin,
@@ -218,7 +220,12 @@ export default function CardTable(props: ICardTableProps) {
       extra={cardExtra}
     >
       <ErrorBar errors={errors} />
-      <AnimatedSkeleton showSkeleton={items.length === 0 && loading}>
+      <AnimatedSkeleton
+        showSkeleton={
+          (!hideLoadingWhenNotEmpty && loading) ||
+          (items.length === 0 && loading)
+        }
+      >
         <div className={styles.cardTableContent}>
           <MemoDetailsList
             selectionMode={SelectionMode.none}