refactor(binary-plan): extract BinaryPlanText component

pingcap · Aug 13, 2023 · 7322595 · 7322595
1 parent 1d26e36
commit 7322595
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 43 deletions.
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Detail/index.tsx b/ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Detail/index.tsx
@@ -10,20 +10,19 @@ import formatSql from '@lib/utils/sqlFormatter'
 import {
   AnimatedSkeleton,
   BinaryPlanTable,
+  BinaryPlanText,
   CopyLink,
   Descriptions,
   ErrorBar,
   Expand,
   Head,
   HighlightSQL,
-  Pre,
   TextWithInfo
 } from '@lib/components'
 import {
   VisualPlanThumbnailView,
   VisualPlanView
 } from '@lib/components/VisualPlan'
-import TxtDownloadLink from '@lib/components/TxtDownloadLink'
 import { useVersionedLocalStorageState } from '@lib/utils/useVersionedLocalStorageState'
 import { telemetry } from '../../utils/telemetry'
 
@@ -191,14 +190,10 @@ function DetailPage() {
                         tab={t('slow_query.detail.plan.table')}
                         key="binary_plan_table"
                       >
-                        <Space size="middle">
-                          <CopyLink data={data.binary_plan_text} />
-                          <TxtDownloadLink
-                            data={data.binary_plan_text}
-                            fileName={`${data.digest}.txt`}
-                          />
-                        </Space>
-                        <BinaryPlanTable data={data.binary_plan_text} />
+                        <BinaryPlanTable
+                          data={data.binary_plan_text}
+                          downloadFileName={`${data.digest}.txt`}
+                        />
                         <div style={{ height: 24 }} />
                       </Tabs.TabPane>
                     )}
@@ -207,16 +202,10 @@ function DetailPage() {
                       tab={t('slow_query.detail.plan.text')}
                       key="text_plan"
                     >
-                      <Space size="middle">
-                        <CopyLink
-                          data={data.binary_plan_text ?? data.plan ?? ''}
-                        />
-                        <TxtDownloadLink
-                          data={data.binary_plan_text ?? data.plan ?? ''}
-                          fileName={`${data.digest}.txt`}
-                        />
-                      </Space>
-                      <Pre noWrap>{data.binary_plan_text ?? data.plan}</Pre>
+                      <BinaryPlanText
+                        data={data.binary_plan_text ?? data.plan ?? ''}
+                        downloadFileName={`${data.digest}.txt`}
+                      />
                     </Tabs.TabPane>
 
                     {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanDetail.tsx b/ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanDetail.tsx
@@ -4,20 +4,19 @@ import { useTranslation } from 'react-i18next'
 import {
   AnimatedSkeleton,
   BinaryPlanTable,
+  BinaryPlanText,
   Card,
   CopyLink,
   Descriptions,
   ErrorBar,
   Expand,
   HighlightSQL,
-  Pre,
   TextWithInfo
 } from '@lib/components'
 import {
   VisualPlanThumbnailView,
   VisualPlanView
 } from '@lib/components/VisualPlan'
-import TxtDownloadLink from '@lib/components/TxtDownloadLink'
 import { useClientRequest } from '@lib/utils/useClientRequest'
 import formatSql from '@lib/utils/sqlFormatter'
 import { useVersionedLocalStorageState } from '@lib/utils/useVersionedLocalStorageState'
@@ -197,14 +196,10 @@ function PlanDetail({ query }: IPlanDetailProps) {
                       )}
                       key="binary_plan_table"
                     >
-                      <Space size="middle">
-                        <CopyLink data={data.binary_plan_text} />
-                        <TxtDownloadLink
-                          data={data.binary_plan_text}
-                          fileName={`${data.digest}.txt`}
-                        />
-                      </Space>
-                      <BinaryPlanTable data={data.binary_plan_text} />
+                      <BinaryPlanTable
+                        data={data.binary_plan_text}
+                        downloadFileName={`${data.digest}.txt`}
+                      />
                       <div>length: {data.binary_plan_text.length}</div>
                       <div style={{ height: 24 }} />
                     </Tabs.TabPane>
@@ -214,16 +209,10 @@ function PlanDetail({ query }: IPlanDetailProps) {
                     tab={t('statement.pages.detail.desc.plans.execution.text')}
                     key="text_plan"
                   >
-                    <Space size="middle">
-                      <CopyLink
-                        data={data.binary_plan_text ?? data.plan ?? ''}
-                      />
-                      <TxtDownloadLink
-                        data={data.binary_plan_text ?? data.plan ?? ''}
-                        fileName={`${data.digest}.txt`}
-                      />
-                    </Space>
-                    <Pre noWrap>{data.binary_plan_text ?? data.plan}</Pre>
+                    <BinaryPlanText
+                      data={data.binary_plan_text ?? data.plan ?? ''}
+                      downloadFileName={`${data.digest}.txt`}
+                    />
                     <div>length: {data.binary_plan_text?.length}</div>
                   </Tabs.TabPane>
 

diff --git a/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanTable/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanTable/index.tsx
@@ -1,7 +1,8 @@
 import { IColumn } from 'office-ui-fabric-react'
 import React, { useMemo } from 'react'
 import CardTable from '../CardTable'
-import { Tooltip } from 'antd'
+import { Tooltip, Space } from 'antd'
+import { CopyLink, TxtDownloadLink } from '@lib/components'
 
 type BinaryPlanItem = Record<
   | 'id'
@@ -35,6 +36,7 @@ type BinaryPlanFiledPosition = Record<
 
 type BinaryPlanTableProps = {
   data: string
+  downloadFileName: string
 }
 
 function convertBinaryPlanTextToArray(
@@ -189,7 +191,10 @@ function convertBinaryPlanTextToArray(
   return result
 }
 
-export const BinaryPlanTable: React.FC<BinaryPlanTableProps> = ({ data }) => {
+export const BinaryPlanTable: React.FC<BinaryPlanTableProps> = ({
+  data,
+  downloadFileName
+}) => {
   const arr = useMemo(() => convertBinaryPlanTextToArray(data), [data])
   const columns: IColumn[] = useMemo(() => {
     return [
@@ -309,7 +314,15 @@ export const BinaryPlanTable: React.FC<BinaryPlanTableProps> = ({ data }) => {
   }, [])
 
   if (arr.length > 0) {
-    return <CardTable cardNoMargin columns={columns} items={arr} />
+    return (
+      <>
+        <Space size="middle">
+          <CopyLink data={data} />
+          <TxtDownloadLink data={data} fileName={downloadFileName} />
+        </Space>
+        <CardTable cardNoMargin columns={columns} items={arr} />
+      </>
+    )
   }
   return (
     <div>

diff --git a/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanText/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanText/index.tsx
@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react'
+import { Space } from 'antd'
+import { CopyLink, TxtDownloadLink, Pre } from '@lib/components'
+
+type BinaryPlanTextProps = {
+  data: string
+  downloadFileName: string
+}
+
+// mysql> select tidb_decode_binary_plan("AgQgAQ==");
+// +-------------------------------------+
+// | tidb_decode_binary_plan("AgQgAQ==") |
+// +-------------------------------------+
+// | (plan discarded because too long)   |
+// +-------------------------------------+
+// 1 row in set (0.00 sec)
+
+const DISCARDED_TOO_LONG = 'plan discarded because too long'
+
+const MAX_SHOW_LEN = 500 * 1024 // 500KB
+
+export const BinaryPlanText: React.FC<BinaryPlanTextProps> = ({
+  data,
+  downloadFileName
+}) => {
+  const discardedDueToTooLong = useMemo(() => {
+    return data
+      .slice(0, DISCARDED_TOO_LONG.length + 10)
+      .includes(DISCARDED_TOO_LONG)
+  }, [data])
+
+  const truncatedStr = useMemo(() => {
+    let str = data
+    if (str.length > MAX_SHOW_LEN) {
+      str =
+        str.slice(0, MAX_SHOW_LEN) +
+        '\n...(too long to show, copy or download to analyze)'
+    }
+    return str
+  }, [data])
+
+  if (discardedDueToTooLong) {
+    return <div>{data}</div>
+  }
+  return (
+    <>
+      <Space size="middle">
+        <CopyLink data={data} />
+        <TxtDownloadLink data={data} fileName={downloadFileName} />
+      </Space>
+      <Pre noWrap>{truncatedStr}</Pre>
+    </>
+  )
+}
diff --git a/ui/packages/tidb-dashboard-lib/src/components/index.ts b/ui/packages/tidb-dashboard-lib/src/components/index.ts
@@ -26,6 +26,7 @@ export * from './Expand'
 export { default as Expand } from './Expand'
 export * from './CopyLink'
 export { default as CopyLink } from './CopyLink'
+export { default as TxtDownloadLink } from './TxtDownloadLink'
 export * from './ColumnsSelector'
 export { default as ColumnsSelector } from './ColumnsSelector'
 export * from './Toolbar'
@@ -56,6 +57,7 @@ export { default as DrawerFooter } from './DrawerFooter'
 
 export * from './VisualPlan'
 export * from './BinaryPlanTable'
+export * from './BinaryPlanText'
 
 export { default as LanguageDropdown } from './LanguageDropdown'
 export { default as ParamsPageWrapper } from './ParamsPageWrapper'