fix(stmt): evict & unbound schema stmt query (#1006)

* fix(stmt): evict & unbound schema stmt query * tweak(ui): evict stmt tips * refine * refine * chore: make lint happy
pingcap · Sep 27, 2021 · 73a0157 · 73a0157
1 parent 98ff2e8
commit 73a0157
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 18 deletions.
diff --git a/pkg/apiserver/statement/queries.go b/pkg/apiserver/statement/queries.go
@@ -137,15 +137,24 @@ func (s *Service) queryPlans(
 		return nil, err
 	}
 
-	err = db.
+	query := db.
 		Select(selectStmt).
 		Table(statementsTable).
 		Where("summary_begin_time >= FROM_UNIXTIME(?) AND summary_end_time <= FROM_UNIXTIME(?)", beginTime, endTime).
-		Where("schema_name = ?", schemaName).
-		Where("digest = ?", digest).
-		Group("plan_digest").
-		Find(&result).
-		Error
+		Group("plan_digest")
+
+	if digest == "" {
+		// the evicted record's digest will be NULL
+		query.Where("digest IS NULL")
+	} else {
+		if schemaName != "" {
+			query.Where("schema_name = ?", schemaName)
+		}
+		query.Where("digest = ?", digest)
+	}
+
+	err = query.Find(&result).Error
+
 	return
 }
 
@@ -168,12 +177,21 @@ func (s *Service) queryPlanDetail(
 	query := db.
 		Select(selectStmt).
 		Table(statementsTable).
-		Where("summary_begin_time >= FROM_UNIXTIME(?) AND summary_end_time <= FROM_UNIXTIME(?)", beginTime, endTime).
-		Where("schema_name = ?", schemaName).
-		Where("digest = ?", digest)
-	if len(plans) > 0 {
-		query = query.Where("plan_digest in (?)", plans)
+		Where("summary_begin_time >= FROM_UNIXTIME(?) AND summary_end_time <= FROM_UNIXTIME(?)", beginTime, endTime)
+
+	if digest == "" {
+		// the evicted record's digest will be NULL
+		query.Where("digest IS NULL")
+	} else {
+		if schemaName != "" {
+			query.Where("schema_name = ?", schemaName)
+		}
+		if len(plans) > 0 {
+			query = query.Where("plan_digest in (?)", plans)
+		}
+		query.Where("digest = ?", digest)
 	}
+
 	err = query.Scan(&result).Error
 	return
 }
diff --git a/ui/lib/apps/Statement/components/StatementsTable.tsx b/ui/lib/apps/Statement/components/StatementsTable.tsx
@@ -1,6 +1,12 @@
 import { usePersistFn } from 'ahooks'
 import React, { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
+import {
+  DetailsRow,
+  IDetailsListProps,
+  IDetailsRowStyles,
+} from 'office-ui-fabric-react'
+import { getTheme } from 'office-ui-fabric-react/lib/Styling'
 
 import openLink from '@lib/utils/openLink'
 import { CardTable, ICardTableProps } from '@lib/components'
@@ -12,6 +18,8 @@ interface Props extends Partial<ICardTableProps> {
   controller: IStatementTableController
 }
 
+const theme = getTheme()
+
 export default function StatementsTable({ controller, ...restPrpos }: Props) {
   const {
     orderOptions,
@@ -30,6 +38,10 @@ export default function StatementsTable({ controller, ...restPrpos }: Props) {
   const navigate = useNavigate()
   const handleRowClick = usePersistFn(
     (rec, idx, ev: React.MouseEvent<HTMLElement>) => {
+      // the evicted record's digest is empty string
+      if (!rec.digest) {
+        return
+      }
       saveClickedItemIndex(idx)
       const qs = DetailPage.buildQuery({
         digest: rec.digest,
@@ -57,6 +69,24 @@ export default function StatementsTable({ controller, ...restPrpos }: Props) {
       onRowClicked={handleRowClick}
       getKey={getKey}
       clickedRowIndex={getClickedItemIndex()}
+      onRenderRow={renderRow}
     />
   )
 }
+
+const renderRow: IDetailsListProps['onRenderRow'] = (props) => {
+  if (!props) {
+    return null
+  }
+
+  const customStyles: Partial<IDetailsRowStyles> = {}
+  // the evicted record's digest is empty string
+  if (!props.item.digest) {
+    customStyles.root = {
+      backgroundColor: theme.palette.neutralLighter,
+      cursor: 'not-allowed',
+    }
+  }
+
+  return <DetailsRow {...props} styles={customStyles} />
+}
diff --git a/ui/lib/apps/Statement/utils/tableColumns.tsx b/ui/lib/apps/Statement/utils/tableColumns.tsx
@@ -174,8 +174,10 @@ export function statementColumns(
   const tcf = new TableColumnFactory(TRANS_KEY_PREFIX, tableSchemaColumns)
 
   return tcf.columns([
-    tcf.sqlText('digest_text', showFullSQL, rows),
-    tcf.textWithTooltip('digest', rows),
+    evictedRenderColumn(
+      tcf.sqlText('digest_text', showFullSQL, rows).getConfig()
+    ),
+    evictedRenderColumn(tcf.textWithTooltip('digest', rows).getConfig()),
     tcf.bar.single('sum_latency', 'ns', rows),
     avgMinMaxLatencyColumn(tcf, rows),
     tcf.bar.single('exec_count', 'short', rows),
@@ -289,3 +291,20 @@ export function planColumns(rows: StatementModel[]): IColumn[] {
     avgMaxColumn(tcf, 'avg_mem', 'bytes', rows),
   ])
 }
+
+export function evictedRenderColumn(defaultRenderColumn: IColumn): IColumn {
+  return {
+    ...defaultRenderColumn,
+    onRender: (...props) => {
+      const rec = props[0]
+      // the evicted record's digest is empty string
+      return rec.digest ? (
+        defaultRenderColumn.onRender!(...props)
+      ) : (
+        <Tooltip title="All of other dropped SQL statements">
+          <i>Others</i>
+        </Tooltip>
+      )
+    },
+  }
+}
diff --git a/ui/lib/components/CardTable/index.tsx b/ui/lib/components/CardTable/index.tsx
@@ -1,3 +1,4 @@
+import { IRenderFunction } from '@uifabric/utilities'
 import { usePersistFn } from 'ahooks'
 import { Checkbox } from 'antd'
 import cx from 'classnames'
@@ -10,6 +11,7 @@ import {
   IDetailsList,
   IDetailsListProps,
   SelectionMode,
+  IDetailsRowProps,
 } from 'office-ui-fabric-react/lib/DetailsList'
 import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
@@ -100,7 +102,11 @@ export interface ICardTableProps extends IDetailsListProps {
   clickedRowIndex?: number
 }
 
-function useRenderClickableRow(onRowClicked, clickedRowIdx) {
+function useRenderClickableRow(
+  onRowClicked,
+  clickedRowIdx,
+  customRender?: IRenderFunction<IDetailsRowProps> | undefined
+) {
   return useCallback(
     (props, defaultRender) => {
       if (!props) {
@@ -113,11 +119,11 @@ function useRenderClickableRow(onRowClicked, clickedRowIdx) {
           })}
           onClick={(ev) => onRowClicked?.(props.item, props.itemIndex, ev)}
         >
-          {defaultRender!(props)}
+          {customRender ? customRender(props) : defaultRender!(props)}
         </div>
       )
     },
-    [onRowClicked, clickedRowIdx]
+    [onRowClicked, clickedRowIdx, customRender]
   )
 }
 
@@ -153,11 +159,13 @@ export default function CardTable(props: ICardTableProps) {
     clickedRowIndex,
     columns,
     items,
+    onRenderRow,
     ...restProps
   } = props
   const renderClickableRow = useRenderClickableRow(
     onRowClicked,
-    clickedRowIndex || -1
+    clickedRowIndex || -1,
+    onRenderRow
   )
 
   const onColumnClick = usePersistFn(
@@ -246,7 +254,7 @@ export default function CardTable(props: ICardTableProps) {
             selectionMode={SelectionMode.none}
             constrainMode={ConstrainMode.unconstrained}
             layoutMode={DetailsListLayoutMode.justified}
-            onRenderRow={onRowClicked ? renderClickableRow : undefined}
+            onRenderRow={onRowClicked ? renderClickableRow : onRenderRow}
             columns={finalColumns}
             items={finalItems}
             componentRef={tableRef}