fix(binary-plan): fix can't show plan for lower tidb version (6.1.x, …

…5.4.x)
pingcap · Aug 14, 2023 · f876bf7 · f876bf7
1 parent 99f1dfc
commit f876bf7
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 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,7 +10,7 @@ import formatSql from '@lib/utils/sqlFormatter'
 import {
   AnimatedSkeleton,
   BinaryPlanTable,
-  BinaryPlanText,
+  PlanText,
   CopyLink,
   Descriptions,
   ErrorBar,
@@ -202,8 +202,8 @@ function DetailPage() {
                       tab={t('slow_query.detail.plan.text')}
                       key="text_plan"
                     >
-                      <BinaryPlanText
-                        data={data.binary_plan_text ?? data.plan ?? ''}
+                      <PlanText
+                        data={data.binary_plan_text || data.plan || ''}
                         downloadFileName={`${data.digest}.txt`}
                       />
                     </Tabs.TabPane>

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,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import {
   AnimatedSkeleton,
   BinaryPlanTable,
-  BinaryPlanText,
+  PlanText,
   Card,
   CopyLink,
   Descriptions,
@@ -208,8 +208,8 @@ function PlanDetail({ query }: IPlanDetailProps) {
                     tab={t('statement.pages.detail.desc.plans.execution.text')}
                     key="text_plan"
                   >
-                    <BinaryPlanText
-                      data={data.binary_plan_text ?? data.plan ?? ''}
+                    <PlanText
+                      data={data.binary_plan_text || data.plan || ''}
                       downloadFileName={`${data.digest}.txt`}
                     />
                   </Tabs.TabPane>

diff --git a/...b/src/components/BinaryPlanText/index.tsx → ...ard-lib/src/components/PlanText/index.tsx b/...b/src/components/BinaryPlanText/index.tsx → ...ard-lib/src/components/PlanText/index.tsx
@@ -18,7 +18,7 @@ const DISCARDED_TOO_LONG = 'plan discarded because too long'
 
 const MAX_SHOW_LEN = 500 * 1024 // 500KB
 
-export const BinaryPlanText: React.FC<BinaryPlanTextProps> = ({
+export const PlanText: React.FC<BinaryPlanTextProps> = ({
   data,
   downloadFileName
 }) => {
@@ -35,6 +35,12 @@ export const BinaryPlanText: React.FC<BinaryPlanTextProps> = ({
         str.slice(0, MAX_SHOW_LEN) +
         '\n...(too long to show, copy or download to analyze)'
     }
+    // binary_plan_text field starts with '\n' which will show an extra empty line
+    // plan field starts with `\t`
+    if (str.startsWith('\n')) {
+      // remove the first empty line
+      str = str.slice(1)
+    }
     return str
   }, [data])
 
@@ -47,7 +53,9 @@ export const BinaryPlanText: React.FC<BinaryPlanTextProps> = ({
         <CopyLink data={data} />
         <TxtDownloadLink data={data} fileName={downloadFileName} />
       </div>
-      <Pre noWrap>{truncatedStr}</Pre>
+      <Pre noWrap style={{ paddingBlock: 8 }}>
+        {truncatedStr}
+      </Pre>
     </>
   )
 }
diff --git a/ui/packages/tidb-dashboard-lib/src/components/index.ts b/ui/packages/tidb-dashboard-lib/src/components/index.ts
@@ -57,7 +57,7 @@ export { default as DrawerFooter } from './DrawerFooter'
 
 export * from './VisualPlan'
 export * from './BinaryPlanTable'
-export * from './BinaryPlanText'
+export * from './PlanText'
 
 export { default as LanguageDropdown } from './LanguageDropdown'
 export { default as ParamsPageWrapper } from './ParamsPageWrapper'