feat(execution-plan): refine execution plan (#1561)

pkg/apiserver/slowquery/model.go

@@ -40,10 +40,11 @@ type Model struct {
 	TxnStartTS string `gorm:"column:Txn_start_ts" json:"txn_start_ts"`
 
 	// Detail
-	PrevStmt   string         `gorm:"column:Prev_stmt" json:"prev_stmt"`
-	Plan       string         `gorm:"column:Plan" json:"plan"`
-	BinaryPlan string         `gorm:"column:Binary_plan" json:"binary_plan"`
-	Warnings   datatypes.JSON `gorm:"column:Warnings" json:"warnings"`
+	PrevStmt       string         `gorm:"column:Prev_stmt" json:"prev_stmt"`
+	Plan           string         `gorm:"column:Plan" json:"plan"` // deprecated, replaced by BinaryPlanText
+	BinaryPlan     string         `gorm:"column:Binary_plan" json:"binary_plan"`
+	BinaryPlanText string         `gorm:"column:Binary_plan_text" proj:"tidb_decode_binary_plan(Binary_plan)" json:"binary_plan_text"`
+	Warnings       datatypes.JSON `gorm:"column:Warnings" json:"warnings"`
 
 	// Basic
 	IsInternal      int    `gorm:"column:Is_internal" json:"is_internal"`

pkg/apiserver/slowquery/queries.go

@@ -109,11 +109,19 @@ func QuerySlowLogList(req *GetListRequest, sysSchema *utils.SysSchema, db *gorm.
 func QuerySlowLogDetail(req *GetDetailRequest, db *gorm.DB) (*Model, error) {
 	var result Model
 	err := db.
-		Select("*, (UNIX_TIMESTAMP(Time) + 0E0) AS timestamp").
+		Select("*, (UNIX_TIMESTAMP(Time) + 0E0) AS timestamp, tidb_decode_binary_plan(Binary_plan) AS Binary_plan_text").
 		Where("Digest = ?", req.Digest).
 		Where("Time = FROM_UNIXTIME(?)", req.Timestamp).
 		Where("Conn_id = ?", req.ConnectID).
 		First(&result).Error
+	if err != nil {
+		err = db.
+			Select("*, (UNIX_TIMESTAMP(Time) + 0E0) AS timestamp").
+			Where("Digest = ?", req.Digest).
+			Where("Time = FROM_UNIXTIME(?)", req.Timestamp).
+			Where("Conn_id = ?", req.ConnectID).
+			First(&result).Error
+	}
 	if err != nil {
 		return nil, err
 	}

pkg/apiserver/statement/models.go

@@ -80,9 +80,10 @@ type Model struct {
 	AggTableNames            string  `json:"table_names" agg:"ANY_VALUE(table_names)"`
 	AggIndexNames            string  `json:"index_names" agg:"ANY_VALUE(index_names)"`
 	AggPlanCount             int     `json:"plan_count" agg:"COUNT(DISTINCT plan_digest)" related:"plan_digest"`
-	AggPlan                  string  `json:"plan" agg:"ANY_VALUE(plan)"`
+	AggPlan                  string  `json:"plan" agg:"ANY_VALUE(plan)"` // deprecated, replaced by BinaryPlanText
 	AggPlanDigest            string  `json:"plan_digest" agg:"ANY_VALUE(plan_digest)"`
 	AggBinaryPlan            string  `json:"binary_plan" agg:"ANY_VALUE(binary_plan)"`
+	AggBinaryPlanText        string  `json:"binary_plan_text" related:"binary_plan" agg:"tidb_decode_binary_plan(ANY_VALUE(binary_plan))"`
 	AggPlanHint              *string `json:"plan_hint" agg:"ANY_VALUE(plan_hint)"`
 	// RocksDB
 	AggMaxRocksdbDeleteSkippedCount uint `json:"max_rocksdb_delete_skipped_count" agg:"MAX(max_rocksdb_delete_skipped_count)"`

pkg/apiserver/statement/service.go

@@ -231,11 +231,8 @@ func (s *Service) planDetailHandler(c *gin.Context) {
 	}
 
 	// get binary plan
-	result.AggBinaryPlan, err = utils.GenerateBinaryPlanJSON(result.AggBinaryPlan)
-	if err != nil {
-		rest.Error(c, err)
-		return
-	}
+	// may failed but it's ok
+	result.AggBinaryPlan, _ = utils.GenerateBinaryPlanJSON(result.AggBinaryPlan)
 
 	c.JSON(http.StatusOK, result)
 }

pkg/apiserver/utils/binary_plan.go

@@ -505,9 +505,9 @@ func analyzeDurationNode(node *simplejson.Json, concurrency concurrency) (time.D
 
 	// cop task
 	if ts == "" {
-		ts = getCopTaskDuratuon(node, concurrency)
+		ts = getCopTaskDuration(node, concurrency)
 	} else {
-		ts = getOperatorDuratuon(ts, concurrency)
+		ts = getOperatorDuration(ts, concurrency)
 	}
 
 	operator := getOperatorType(node)
@@ -773,11 +773,11 @@ func getConcurrency(node *simplejson.Json, operator operator, concurrency concur
 				}
 
 			case Shuffle:
-				tmpSuffleConcurrencyStr := rootGroupInfo.GetIndex(i).Get("ShuffleConcurrency").MustString()
-				tmpSuffleConcurrency, _ := strconv.Atoi(tmpSuffleConcurrencyStr)
+				tmpShuffleConcurrencyStr := rootGroupInfo.GetIndex(i).Get("ShuffleConcurrency").MustString()
+				tmpShuffleConcurrency, _ := strconv.Atoi(tmpShuffleConcurrencyStr)
 
-				if tmpSuffleConcurrency > 0 {
-					concurrency.shuffleConcurrency = tmpSuffleConcurrency * concurrency.shuffleConcurrency
+				if tmpShuffleConcurrency > 0 {
+					concurrency.shuffleConcurrency = tmpShuffleConcurrency * concurrency.shuffleConcurrency
 				}
 			}
 
@@ -792,7 +792,7 @@ func getConcurrency(node *simplejson.Json, operator operator, concurrency concur
 	return concurrency
 }
 
-func getCopTaskDuratuon(node *simplejson.Json, concurrency concurrency) string {
+func getCopTaskDuration(node *simplejson.Json, concurrency concurrency) string {
 	storeType := node.GetPath(StoreType).MustString()
 	// task == 1
 	ts := node.GetPath(CopExecInfo, fmt.Sprintf("%s_task", storeType), "time").MustString()
@@ -842,7 +842,7 @@ func getCopTaskDuratuon(node *simplejson.Json, concurrency concurrency) string {
 	return ts
 }
 
-func getOperatorDuratuon(ts string, concurrency concurrency) string {
+func getOperatorDuration(ts string, concurrency concurrency) string {
 	t, err := time.ParseDuration(ts)
 	if err != nil {
 		return "0s"

ui/packages/tidb-dashboard-client/src/client/api/models/slowquery-model.ts

@@ -38,6 +38,12 @@ export interface SlowqueryModel {
      * @memberof SlowqueryModel
      */
     'binary_plan'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof SlowqueryModel
+     */
+    'binary_plan_text'?: string;
     /**
      * 
      * @type {number}

ui/packages/tidb-dashboard-client/src/client/api/models/statement-model.ts

@@ -194,6 +194,12 @@ export interface StatementModel {
      * @memberof StatementModel
      */
     'binary_plan'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof StatementModel
+     */
+    'binary_plan_text'?: string;
     /**
      * 
      * @type {string}

ui/packages/tidb-dashboard-client/swagger/spec.json

@@ -4906,6 +4906,9 @@
                 "binary_plan": {
                     "type": "string"
                 },
+                "binary_plan_text": {
+                    "type": "string"
+                },
                 "commit_backoff_time": {
                     "type": "number"
                 },
@@ -5310,6 +5313,9 @@
                 "binary_plan": {
                     "type": "string"
                 },
+                "binary_plan_text": {
+                    "type": "string"
+                },
                 "digest": {
                     "type": "string"
                 },

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/pages/Detail/index.tsx

@@ -9,6 +9,7 @@ import { buildQueryFn, parseQueryFn } from '@lib/utils/query'
 import formatSql from '@lib/utils/sqlFormatter'
 import {
   AnimatedSkeleton,
+  BinaryPlanTable,
   CopyLink,
   Descriptions,
   ErrorBar,
@@ -72,8 +73,8 @@ function DetailPage() {
     setDetailExpand((prev) => ({ ...prev, prev_query: !prev.prev_query }))
   const toggleQuery = () =>
     setDetailExpand((prev) => ({ ...prev, query: !prev.query }))
-  const togglePlan = () =>
-    setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
+  // const togglePlan = () =>
+  //   setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
 
   const [isVpVisible, setIsVpVisable] = useState(false)
   const toggleVisualPlan = (action: 'open' | 'close') => {
@@ -172,16 +173,50 @@ function DetailPage() {
                     {t('slow_query.detail.plan.title')}
                   </Space>
                   <Tabs
-                    defaultActiveKey={
-                      binaryPlan && !binaryPlan.main.discardedDueToTooLong
-                        ? 'binary_plan'
-                        : 'text_plan'
-                    }
+                    defaultActiveKey="text_plan"
                     onTabClick={(key) =>
                       telemetry.clickPlanTabs(key, data.digest!)
                     }
                   >
-                    {binaryPlan && !binaryPlan.main.discardedDueToTooLong && (
+                    <Tabs.TabPane
+                      tab={t('slow_query.detail.plan.text')}
+                      key="text_plan"
+                    >
+                      <Descriptions>
+                        <Descriptions.Item
+                          span={2}
+                          multiline={true}
+                          // multiline={detailExpand.plan}
+                          label={
+                            <Space size="middle">
+                              {/* <Expand.Link
+                                expanded={detailExpand.plan}
+                                onClick={togglePlan}
+                              /> */}
+                              <CopyLink
+                                data={data.binary_plan_text ?? data.plan ?? ''}
+                              />
+                            </Space>
+                          }
+                        >
+                          {/* <Expand expanded={detailExpand.plan}>
+                          </Expand> */}
+                          <Pre noWrap>{data.binary_plan_text ?? data.plan}</Pre>
+                        </Descriptions.Item>
+                      </Descriptions>
+                    </Tabs.TabPane>
+
+                    {binaryPlan && !binaryPlan.discardedDueToTooLong && (
+                      <Tabs.TabPane
+                        tab={t('slow_query.detail.plan.table')}
+                        key="binary_plan_table"
+                      >
+                        <BinaryPlanTable data={binaryPlan} />
+                        <div style={{ height: 24 }} />
+                      </Tabs.TabPane>
+                    )}
+
+                    {binaryPlan && !binaryPlan.discardedDueToTooLong && (
                       <Tabs.TabPane
                         tab={t('slow_query.detail.plan.visual')}
                         key="binary_plan"
@@ -210,31 +245,6 @@ function DetailPage() {
                         </Descriptions>
                       </Tabs.TabPane>
                     )}
-
-                    <Tabs.TabPane
-                      tab={t('slow_query.detail.plan.text')}
-                      key="text_plan"
-                    >
-                      <Descriptions>
-                        <Descriptions.Item
-                          span={2}
-                          multiline={detailExpand.plan}
-                          label={
-                            <Space size="middle">
-                              <Expand.Link
-                                expanded={detailExpand.plan}
-                                onClick={togglePlan}
-                              />
-                              <CopyLink data={data.plan ?? ''} />
-                            </Space>
-                          }
-                        >
-                          <Expand expanded={detailExpand.plan}>
-                            <Pre noWrap>{data.plan}</Pre>
-                          </Expand>
-                        </Descriptions.Item>
-                      </Descriptions>
-                    </Tabs.TabPane>
                   </Tabs>
                 </>
               )}

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/translations/en.yaml

@@ -133,8 +133,9 @@ slow_query:
       previous_sql: Previous Query
     plan:
       title: Execution Plan
-      visual: Visual
       text: Text
+      table: Table
+      visual: Visual
       modal_title: Visual Plan
     tabs:
       basic: Basic

ui/packages/tidb-dashboard-lib/src/apps/SlowQuery/translations/zh.yaml

@@ -135,8 +135,9 @@ slow_query:
       previous_sql: 上一条 SQL 查询
     plan:
       title: 执行计划
-      visual: 图形
       text: 文本
+      table: 表格
+      visual: 图形
       modal_title: 执行计划可视化
     tabs:
       basic: 基本信息

ui/packages/tidb-dashboard-lib/src/apps/Statement/pages/Detail/PlanDetail.tsx

@@ -3,6 +3,7 @@ import { Space, Tabs, Modal } from 'antd'
 import { useTranslation } from 'react-i18next'
 import {
   AnimatedSkeleton,
+  BinaryPlanTable,
   Card,
   CopyLink,
   Descriptions,
@@ -84,8 +85,8 @@ function PlanDetail({ query }: IPlanDetailProps) {
     setDetailExpand((prev) => ({ ...prev, prev_query: !prev.prev_query }))
   const toggleQuery = () =>
     setDetailExpand((prev) => ({ ...prev, query: !prev.query }))
-  const togglePlan = () =>
-    setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
+  // const togglePlan = () =>
+  //   setDetailExpand((prev) => ({ ...prev, plan: !prev.plan }))
 
   let titleKey
   if (query.allPlans === 1) {
@@ -178,18 +179,56 @@ function PlanDetail({ query }: IPlanDetailProps) {
                 </Space>
 
                 <Tabs
-                  defaultActiveKey={
-                    binaryPlan && !binaryPlan.main.discardedDueToTooLong
-                      ? 'binary_plan'
-                      : 'text_plan'
-                  }
+                  defaultActiveKey="text_plan"
                   onTabClick={(key) =>
                     telemetry.clickPlanTabs(key, data.digest!)
                   }
                 >
+                  <Tabs.TabPane
+                    tab={t('statement.pages.detail.desc.plans.execution.text')}
+                    key="text_plan"
+                  >
+                    <Descriptions>
+                      <Descriptions.Item
+                        span={2}
+                        // multiline={detailExpand.plan}
+                        multiline={true}
+                        label={
+                          <Space size="middle">
+                            {/* <Expand.Link
+                              expanded={detailExpand.plan}
+                              onClick={togglePlan}
+                            /> */}
+                            <CopyLink
+                              data={data.binary_plan_text ?? data.plan ?? ''}
+                            />
+                          </Space>
+                        }
+                      >
+                        {/* <Expand expanded={detailExpand.plan}>
+                        </Expand> */}
+                        <Pre noWrap>{data.binary_plan_text ?? data.plan}</Pre>
+                      </Descriptions.Item>
+                    </Descriptions>
+                  </Tabs.TabPane>
+
+                  {binaryPlan && !binaryPlan.discardedDueToTooLong && (
+                    <Tabs.TabPane
+                      tab={t(
+                        'statement.pages.detail.desc.plans.execution.table'
+                      )}
+                      key="binary_plan_table"
+                    >
+                      <BinaryPlanTable data={binaryPlan} />
+                      <div style={{ height: 24 }} />
+                    </Tabs.TabPane>
+                  )}
+
                   {binaryPlan && !binaryPlan.main.discardedDueToTooLong && (
                     <Tabs.TabPane
-                      tab={t('slow_query.detail.plan.visual')}
+                      tab={t(
+                        'statement.pages.detail.desc.plans.execution.visual'
+                      )}
                       key="binary_plan"
                     >
                       <Modal
@@ -216,30 +255,6 @@ function PlanDetail({ query }: IPlanDetailProps) {
                       </Descriptions>
                     </Tabs.TabPane>
                   )}
-                  <Tabs.TabPane
-                    tab={t('statement.pages.detail.desc.plans.execution.text')}
-                    key="text_plan"
-                  >
-                    <Descriptions>
-                      <Descriptions.Item
-                        span={2}
-                        multiline={detailExpand.plan}
-                        label={
-                          <Space size="middle">
-                            <Expand.Link
-                              expanded={detailExpand.plan}
-                              onClick={togglePlan}
-                            />
-                            <CopyLink data={data.plan ?? ''} />
-                          </Space>
-                        }
-                      >
-                        <Expand expanded={detailExpand.plan}>
-                          <Pre noWrap>{data.plan}</Pre>
-                        </Expand>
-                      </Descriptions.Item>
-                    </Descriptions>
-                  </Tabs.TabPane>
                 </Tabs>
               </>
             )}