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
index 76032103e7..908040363c 100644
--- 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"
>
-
-
-
-
-
+
)}
@@ -207,16 +202,10 @@ function DetailPage() {
tab={t('slow_query.detail.plan.text')}
key="text_plan"
>
-
-
-
-
- {data.binary_plan_text ?? data.plan}
+
{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
index 696598457e..c0c428264c 100644
--- 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"
>
-
-
-
-
-
+
length: {data.binary_plan_text.length}
@@ -214,16 +209,10 @@ function PlanDetail({ query }: IPlanDetailProps) {
tab={t('statement.pages.detail.desc.plans.execution.text')}
key="text_plan"
>
-
-
-
-
- {data.binary_plan_text ?? data.plan}
+
length: {data.binary_plan_text?.length}
diff --git a/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanTable/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanTable/index.tsx
index 57c928524f..b70956a70e 100644
--- 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 = ({ data }) => {
+export const BinaryPlanTable: React.FC = ({
+ data,
+ downloadFileName
+}) => {
const arr = useMemo(() => convertBinaryPlanTextToArray(data), [data])
const columns: IColumn[] = useMemo(() => {
return [
@@ -309,7 +314,15 @@ export const BinaryPlanTable: React.FC = ({ data }) => {
}, [])
if (arr.length > 0) {
- return
+ return (
+ <>
+
+
+
+
+
+ >
+ )
}
return (
diff --git a/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanText/index.tsx b/ui/packages/tidb-dashboard-lib/src/components/BinaryPlanText/index.tsx
new file mode 100644
index 0000000000..23ae4dd90a
--- /dev/null
+++ 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
= ({
+ 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 {data}
+ }
+ return (
+ <>
+
+
+
+
+ {truncatedStr}
+ >
+ )
+}
diff --git a/ui/packages/tidb-dashboard-lib/src/components/index.ts b/ui/packages/tidb-dashboard-lib/src/components/index.ts
index d2187e42a6..1d33a52d5c 100644
--- 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'