feat(topsql): add action to search in sql statements (#1654)

pingcap · Mar 13, 2024 · abee03e · abee03e
1 parent 552c8f0
commit abee03e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/List.tsx
@@ -307,6 +307,7 @@ export function TopSQLList() {
                 topN={TOP_N}
                 instanceType={instance?.instance_type as InstanceType}
                 data={topSQLData}
+                timeRange={timeRange}
               />
             )}
             {Boolean(!topSQLData?.length && timeRange.type === 'recent') && (

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/ListTable.tsx b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/pages/List/ListTable.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { Tooltip } from 'antd'
+import { Tooltip, Typography } from 'antd'
 import { getValueFormat } from '@baurine/grafana-value-formats'
 import { useTranslation } from 'react-i18next'
 import {
@@ -15,7 +15,9 @@ import {
   Bar,
   TextWrap,
   HighlightSQL,
-  AppearAnimate
+  AppearAnimate,
+  TimeRange,
+  toTimeRangeValue
 } from '@lib/components'
 
 import { useRecordSelection } from '../../utils/useRecordSelection'
@@ -24,11 +26,14 @@ import { isOthersRecord, isUnknownSQLRecord } from '../../utils/specialRecord'
 import { InstanceType } from './ListDetail/ListDetailTable'
 import { useMemoizedFn } from 'ahooks'
 import { telemetry } from '../../utils/telemetry'
+import openLink from '@lib/utils/openLink'
+import { useNavigate } from 'react-router-dom'
 
 interface ListTableProps {
   data: TopsqlSummaryItem[]
   topN: number
   instanceType: InstanceType
+  timeRange: TimeRange
   onRowOver: (key: string) => void
   onRowLeave: () => void
 }
@@ -43,11 +48,29 @@ export function ListTable({
   data,
   topN,
   instanceType,
+  timeRange,
   onRowLeave,
   onRowOver
 }: ListTableProps) {
   const { t } = useTranslation()
   const { data: tableRecords, capacity } = useTableData(data)
+  const navigate = useNavigate()
+
+  function goDetail(ev: React.MouseEvent<HTMLElement>, record: SQLRecord) {
+    const sv = sessionStorage.getItem('statement.query_options')
+    if (sv) {
+      const queryOptions = JSON.parse(sv)
+      queryOptions.searchText = record.sql_digest
+      sessionStorage.setItem(
+        'statement.query_options',
+        JSON.stringify(queryOptions)
+      )
+    }
+
+    const tv = toTimeRangeValue(timeRange)
+    openLink(`/statement?from=${tv[0]}&to=${tv[1]}`, ev, navigate)
+  }
+
   const tableColumns = useMemo(
     () => [
       {
@@ -65,7 +88,7 @@ export function ListTable({
         name: t('topsql.table.fields.sql'),
         key: 'query',
         minWidth: 250,
-        maxWidth: 550,
+        // maxWidth: 550,
         onRender: (rec: SQLRecord) => {
           const text = isUnknownSQLRecord(rec)
             ? `(SQL ${rec.sql_digest?.slice(0, 8)})`
@@ -97,6 +120,22 @@ export function ListTable({
             </Tooltip>
           )
         }
+      },
+      {
+        name: '',
+        key: 'actions',
+        minWidth: 200,
+        // maxWidth: 200,
+        onRender: (rec) => {
+          if (!isOthersRecord(rec)) {
+            return (
+              <Typography.Link onClick={(ev) => goDetail(ev, rec)}>
+                {t('topsql.table.actions.search_in_statements')}
+              </Typography.Link>
+            )
+          }
+          return null
+        }
       }
     ],
     [capacity, t, topN]

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/translations/en.yaml b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/translations/en.yaml
@@ -34,6 +34,8 @@ topsql:
     fields:
       cpu_time: Total CPU Time
       sql: SQL Statement
+    actions:
+      search_in_statements: Search in SQL Statements
   detail:
     title: SQL Statement Details by Plan
     overall: Overall

diff --git a/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/translations/zh.yaml b/ui/packages/tidb-dashboard-lib/src/apps/TopSQL/translations/zh.yaml
@@ -34,6 +34,8 @@ topsql:
     fields:
       cpu_time: 累计 CPU 耗时
       sql: SQL 语句
+    actions:
+      search_in_statements: 在 SQL 语句分析中搜索
   detail:
     title: SQL 详情
     overall: 总计