refine: add binary_plan_json and re-implement binary_plan_text

pkg/apiserver/slowquery/model.go

@@ -40,11 +40,10 @@ 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"` // 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"`
+	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"`
+	Warnings   datatypes.JSON `gorm:"column:Warnings" json:"warnings"`
 
 	// Basic
 	IsInternal      int    `gorm:"column:Is_internal" json:"is_internal"`
@@ -96,6 +95,10 @@ type Model struct {
 	RocksdbBlockCacheHitCount uint `gorm:"column:Rocksdb_block_cache_hit_count" json:"rocksdb_block_cache_hit_count"`
 	RocksdbBlockReadCount     uint `gorm:"column:Rocksdb_block_read_count" json:"rocksdb_block_read_count"`
 	RocksdbBlockReadByte      uint `gorm:"column:Rocksdb_block_read_byte" json:"rocksdb_block_read_byte"`
+
+	// Computed fields
+	BinaryPlanJSON string `json:"binary_plan_json"`  // binary plan json format
+	BinaryPlanText string `json:"binary_plan_text"`  // binary plan plain text
 }
 
 type Field struct {

pkg/apiserver/slowquery/queries.go

@@ -109,19 +109,11 @@ 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, tidb_decode_binary_plan(Binary_plan) AS Binary_plan_text").
+		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 {
-		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/slowquery/service.go

@@ -100,14 +100,23 @@ func (s *Service) getDetails(c *gin.Context) {
 		return
 	}
 
-	// generate binary plan
+	// generate binary plan json
 	//
 	// Due to a kernel bug, the binary plan may fail to parse due to
 	// encoding issues. Additionally, since the binary plan field is
 	// not a required field, we can mask this error.
 	//
 	// See: https://github.com/pingcap/tidb-dashboard/issues/1515
-	result.BinaryPlan, _ = utils.GenerateBinaryPlanJSON(result.BinaryPlan)
+	if result.BinaryPlan != "" {
+		// may failed but it's ok
+		result.BinaryPlanText, _ = utils.GenerateBinaryPlanText(db, result.BinaryPlan)
+		// may failed but it's ok
+		result.BinaryPlanJSON, _ = utils.GenerateBinaryPlanJSON(result.BinaryPlan)
+
+		// reduce response size
+		result.BinaryPlan = ""
+		result.Plan = ""
+	}
 
 	c.JSON(http.StatusOK, *result)
 }

pkg/apiserver/statement/models.go

@@ -81,9 +81,8 @@ type Model struct {
 	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)"` // 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))"`
+	AggPlanDigest            string  `json:"plan_digest" agg:"ANY_VALUE(plan_digest)"`
 	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)"`
@@ -99,6 +98,8 @@ type Model struct {
 	// Computed fields
 	RelatedSchemas string `json:"related_schemas"`
 	PlanCanBeBound bool   `json:"plan_can_be_bound"`
+	BinaryPlanJSON string `json:"binary_plan_json"`
+	BinaryPlanText string `json:"binary_plan_text"`
 }
 
 // tableNames example: "d1.a1,d2.a2,d1.a1,d3.a3"

pkg/apiserver/statement/service.go

@@ -233,9 +233,16 @@ func (s *Service) planDetailHandler(c *gin.Context) {
 		return
 	}
 
-	// get binary plan
-	// may failed but it's ok
-	result.AggBinaryPlan, _ = utils.GenerateBinaryPlanJSON(result.AggBinaryPlan)
+	if result.AggBinaryPlan != "" {
+		// may failed but it's ok
+		result.BinaryPlanText, _ = utils.GenerateBinaryPlanText(db, result.AggBinaryPlan)
+		// may failed but it's ok
+		result.BinaryPlanJSON, _ = utils.GenerateBinaryPlanJSON(result.AggBinaryPlan)
+
+		// reduce response size
+		result.AggBinaryPlan = ""
+		result.AggPlan = ""
+	}
 
 	c.JSON(http.StatusOK, result)
 }

pkg/apiserver/utils/binary_plan.go

@@ -15,6 +15,7 @@ import (
 	"github.com/pingcap/tipb/go-tipb"
 	json "google.golang.org/protobuf/encoding/protojson"
 	"google.golang.org/protobuf/runtime/protoimpl"
+	"gorm.io/gorm"
 )
 
 const (
@@ -975,3 +976,17 @@ func formatJSON(s string) (*simplejson.Json, error) {
 
 	return simplejson.NewJson([]byte(s))
 }
+
+/////////////////
+
+func GenerateBinaryPlanText(db *gorm.DB, b string) (string, error) {
+	type binaryPlanText struct {
+		Text string `gorm:"column:binary_plan_text"`
+	}
+	ret := &binaryPlanText{}
+	err := db.Raw(fmt.Sprintf("select tidb_decode_binary_plan('%s') as binary_plan_text", b)).Find(ret).Error
+	if err != nil {
+		return "", err
+	}
+	return ret.Text, err
+}

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

@@ -39,7 +39,13 @@ export interface SlowqueryModel {
      */
     'binary_plan'?: string;
     /**
-     * 
+     * Computed fields
+     * @type {string}
+     * @memberof SlowqueryModel
+     */
+    'binary_plan_json'?: string;
+    /**
+     * binary plan plain text
      * @type {string}
      * @memberof SlowqueryModel
      */

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_json'?: string;
     /**
      * 
      * @type {string}

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

@@ -4906,7 +4906,12 @@
                 "binary_plan": {
                     "type": "string"
                 },
+                "binary_plan_json": {
+                    "description": "Computed fields",
+                    "type": "string"
+                },
                 "binary_plan_text": {
+                    "description": "binary plan plain text",
                     "type": "string"
                 },
                 "commit_backoff_time": {
@@ -5314,6 +5319,9 @@
                 "binary_plan": {
                     "type": "string"
                 },
+                "binary_plan_json": {
+                    "type": "string"
+                },
                 "binary_plan_text": {
                     "type": "string"
                 },

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

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useMemo } from 'react'
 import { Space, Modal, Tabs, Typography } from 'antd'
 import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate } from 'react-router-dom'
@@ -56,7 +56,13 @@ function DetailPage() {
     )
   )
 
-  const binaryPlan = data?.binary_plan && JSON.parse(data.binary_plan)
+  const binaryPlanObj = useMemo(() => {
+    const json = data?.binary_plan_json ?? data?.binary_plan
+    if (json) {
+      return JSON.parse(json)
+    }
+    return undefined
+  }, [data?.binary_plan, data?.binary_plan_json])
 
   const [detailExpand, setDetailExpand] = useVersionedLocalStorageState(
     SLOW_QUERY_DETAIL_EXPAND,
@@ -167,7 +173,7 @@ function DetailPage() {
                     )
                 })()}
               </Descriptions>
-              {(binaryPlan || !!data.plan) && (
+              {(binaryPlanObj || !!data.plan) && (
                 <>
                   <Space size="middle" style={{ color: '#8c8c8c' }}>
                     {t('slow_query.detail.plan.title')}
@@ -206,17 +212,17 @@ function DetailPage() {
                       </Descriptions>
                     </Tabs.TabPane>
 
-                    {binaryPlan && !binaryPlan.discardedDueToTooLong && (
+                    {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
                       <Tabs.TabPane
                         tab={t('slow_query.detail.plan.table')}
                         key="binary_plan_table"
                       >
-                        <BinaryPlanTable data={binaryPlan} />
+                        <BinaryPlanTable data={binaryPlanObj} />
                         <div style={{ height: 24 }} />
                       </Tabs.TabPane>
                     )}
 
-                    {binaryPlan && !binaryPlan.discardedDueToTooLong && (
+                    {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
                       <Tabs.TabPane
                         tab={t('slow_query.detail.plan.visual')}
                         key="binary_plan"
@@ -234,12 +240,12 @@ function DetailPage() {
                             height: window.innerHeight - 100
                           }}
                         >
-                          <VisualPlanView data={binaryPlan} />
+                          <VisualPlanView data={binaryPlanObj} />
                         </Modal>
                         <Descriptions>
                           <Descriptions.Item span={2}>
                             <div onClick={() => toggleVisualPlan('open')}>
-                              <VisualPlanThumbnailView data={binaryPlan} />
+                              <VisualPlanThumbnailView data={binaryPlanObj} />
                             </div>
                           </Descriptions.Item>
                         </Descriptions>

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

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import React, { useState, useContext, useMemo } from 'react'
 import { Space, Tabs, Modal } from 'antd'
 import { useTranslation } from 'react-i18next'
 import {
@@ -62,7 +62,13 @@ function PlanDetail({ query }: IPlanDetailProps) {
   )
   const isLoading = isDataLoading || isSchemaLoading
 
-  const binaryPlan = data?.binary_plan && JSON.parse(data.binary_plan)
+  const binaryPlanObj = useMemo(() => {
+    const json = data?.binary_plan_json ?? data?.binary_plan
+    if (json) {
+      return JSON.parse(json)
+    }
+    return undefined
+  }, [data?.binary_plan, data?.binary_plan_json])
 
   const [isVpVisible, setIsVpVisable] = useState(false)
   const toggleVisualPlan = (action: 'open' | 'close') => {
@@ -172,7 +178,7 @@ function PlanDetail({ query }: IPlanDetailProps) {
               ) : null}
             </Descriptions>
 
-            {(binaryPlan || data.plan) && (
+            {(binaryPlanObj || data.plan) && (
               <>
                 <Space size="middle" style={{ color: '#8c8c8c' }}>
                   {t('statement.pages.detail.desc.plans.execution.title')}
@@ -212,19 +218,19 @@ function PlanDetail({ query }: IPlanDetailProps) {
                     </Descriptions>
                   </Tabs.TabPane>
 
-                  {binaryPlan && !binaryPlan.discardedDueToTooLong && (
+                  {binaryPlanObj && !binaryPlanObj.discardedDueToTooLong && (
                     <Tabs.TabPane
                       tab={t(
                         'statement.pages.detail.desc.plans.execution.table'
                       )}
                       key="binary_plan_table"
                     >
-                      <BinaryPlanTable data={binaryPlan} />
+                      <BinaryPlanTable data={binaryPlanObj} />
                       <div style={{ height: 24 }} />
                     </Tabs.TabPane>
                   )}
 
-                  {binaryPlan && !binaryPlan.main.discardedDueToTooLong && (
+                  {binaryPlanObj && !binaryPlanObj.main.discardedDueToTooLong && (
                     <Tabs.TabPane
                       tab={t(
                         'statement.pages.detail.desc.plans.execution.visual'
@@ -244,12 +250,12 @@ function PlanDetail({ query }: IPlanDetailProps) {
                           height: window.innerHeight - 100
                         }}
                       >
-                        <VisualPlanView data={binaryPlan} />
+                        <VisualPlanView data={binaryPlanObj} />
                       </Modal>
                       <Descriptions>
                         <Descriptions.Item span={2}>
                           <div onClick={() => toggleVisualPlan('open')}>
-                            <VisualPlanThumbnailView data={binaryPlan} />
+                            <VisualPlanThumbnailView data={binaryPlanObj} />
                           </div>
                         </Descriptions.Item>
                       </Descriptions>

ui/packages/tidb-dashboard-lib/src/client/models.ts

@@ -2177,7 +2177,13 @@ export interface SlowqueryModel {
      */
     'binary_plan'?: string;
     /**
-     * 
+     * Computed fields
+     * @type {string}
+     * @memberof SlowqueryModel
+     */
+    'binary_plan_json'?: string;
+    /**
+     * binary plan plain text
      * @type {string}
      * @memberof SlowqueryModel
      */
@@ -2934,6 +2940,12 @@ export interface StatementModel {
      * @memberof StatementModel
      */
     'binary_plan'?: string;
+    /**
+     * 
+     * @type {string}
+     * @memberof StatementModel
+     */
+    'binary_plan_json'?: string;
     /**
      * 
      * @type {string}

ui/packages/tidb-dashboard-lib/src/components/BinaryPlanTable/index.tsx

@@ -208,7 +208,7 @@ export const BinaryPlanTable: React.FC<BinaryPlanTableProps> = ({ data }) => {
           // truncate the string if it's too long
           // operation info may be super super long
           const truncateLength = 1000
-          let truncatedStr = row.operatorInfo
+          let truncatedStr = row.operatorInfo ?? ''
           if (truncatedStr.length > truncateLength) {
             truncatedStr = row.operatorInfo.slice(0, truncateLength) + '...'
           }