From 0b0b5b5cbda9583135db210d692f8513eabb6b77 Mon Sep 17 00:00:00 2001
From: baurine <2008.hbl@gmail.com>
Date: Fri, 11 Aug 2023 16:49:03 +0800
Subject: [PATCH] refine: make table format as default to show execution plan

---
 .../src/apps/SlowQuery/pages/Detail/index.tsx | 22 ++++++++--------
 .../Statement/pages/Detail/PlanDetail.tsx     | 26 +++++++++----------
 2 files changed, 24 insertions(+), 24 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
index 30db33f106..4e35121751 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
@@ -179,11 +179,21 @@ function DetailPage() {
                     {t('slow_query.detail.plan.title')}
                   </Space>
                   <Tabs
-                    defaultActiveKey="text_plan"
+                    defaultActiveKey="binary_plan_table"
                     onTabClick={(key) =>
                       telemetry.clickPlanTabs(key, data.digest!)
                     }
                   >
+                    {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
+                      <Tabs.TabPane
+                        tab={t('slow_query.detail.plan.table')}
+                        key="binary_plan_table"
+                      >
+                        <BinaryPlanTable data={binaryPlanObj} />
+                        <div style={{ height: 24 }} />
+                      </Tabs.TabPane>
+                    )}
+
                     <Tabs.TabPane
                       tab={t('slow_query.detail.plan.text')}
                       key="text_plan"
@@ -212,16 +222,6 @@ function DetailPage() {
                       </Descriptions>
                     </Tabs.TabPane>
 
-                    {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
-                      <Tabs.TabPane
-                        tab={t('slow_query.detail.plan.table')}
-                        key="binary_plan_table"
-                      >
-                        <BinaryPlanTable data={binaryPlanObj} />
-                        <div style={{ height: 24 }} />
-                      </Tabs.TabPane>
-                    )}
-
                     {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
                       <Tabs.TabPane
                         tab={t('slow_query.detail.plan.visual')}
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 c6e382b559..f01b33c985 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
@@ -185,11 +185,23 @@ function PlanDetail({ query }: IPlanDetailProps) {
                 </Space>
 
                 <Tabs
-                  defaultActiveKey="text_plan"
+                  defaultActiveKey="binary_plan_table"
                   onTabClick={(key) =>
                     telemetry.clickPlanTabs(key, data.digest!)
                   }
                 >
+                  {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
+                    <Tabs.TabPane
+                      tab={t(
+                        'statement.pages.detail.desc.plans.execution.table'
+                      )}
+                      key="binary_plan_table"
+                    >
+                      <BinaryPlanTable data={binaryPlanObj} />
+                      <div style={{ height: 24 }} />
+                    </Tabs.TabPane>
+                  )}
+
                   <Tabs.TabPane
                     tab={t('statement.pages.detail.desc.plans.execution.text')}
                     key="text_plan"
@@ -218,18 +230,6 @@ function PlanDetail({ query }: IPlanDetailProps) {
                     </Descriptions>
                   </Tabs.TabPane>
 
-                  {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
-                    <Tabs.TabPane
-                      tab={t(
-                        'statement.pages.detail.desc.plans.execution.table'
-                      )}
-                      key="binary_plan_table"
-                    >
-                      <BinaryPlanTable data={binaryPlanObj} />
-                      <div style={{ height: 24 }} />
-                    </Tabs.TabPane>
-                  )}
-
                   {binaryPlanObj && !binaryPlanObj.main.discardedDueToTooLong && (
                     <Tabs.TabPane
                       tab={t(