diff --git a/pkg/apiserver/statement/config_test.go b/pkg/apiserver/statement/config_test.go
index d6aff92b67..dd0db3a8f3 100644
--- a/pkg/apiserver/statement/config_test.go
+++ b/pkg/apiserver/statement/config_test.go
@@ -34,12 +34,12 @@ type testConfig struct {
}
func (t *testConfigSuite) Test_buildConfigQuerySQL_struct_success(c *C) {
- testConfigStmt := "SELECT @@GLOBAL.tidb_enable_stmt_summary as tidb_enable_stmt_summary,@@GLOBAL.tidb_stmt_summary_refresh_interval as tidb_stmt_summary_refresh_interval"
+ testConfigStmt := "SELECT @@GLOBAL.tidb_enable_stmt_summary AS tidb_enable_stmt_summary, @@GLOBAL.tidb_stmt_summary_refresh_interval AS tidb_stmt_summary_refresh_interval"
c.Assert(buildConfigQuerySQL(testConfig{}), Equals, testConfigStmt)
}
func (t *testConfigSuite) Test_buildConfigQuerySQL_ptr_success(c *C) {
- testConfigStmt := "SELECT @@GLOBAL.tidb_enable_stmt_summary as tidb_enable_stmt_summary,@@GLOBAL.tidb_stmt_summary_refresh_interval as tidb_stmt_summary_refresh_interval"
+ testConfigStmt := "SELECT @@GLOBAL.tidb_enable_stmt_summary AS tidb_enable_stmt_summary, @@GLOBAL.tidb_stmt_summary_refresh_interval AS tidb_stmt_summary_refresh_interval"
c.Assert(buildConfigQuerySQL(&testConfig{}), Equals, testConfigStmt)
}
@@ -49,17 +49,17 @@ type testConfig2 struct {
}
func (t *testConfigSuite) Test_buildConfigQuerySQL_without_gorm_tag(c *C) {
- testConfigStmt := "SELECT @@GLOBAL.tidb_enable_stmt_summary as tidb_enable_stmt_summary"
+ testConfigStmt := "SELECT @@GLOBAL.tidb_enable_stmt_summary AS tidb_enable_stmt_summary"
c.Assert(buildConfigQuerySQL(&testConfig2{}), Equals, testConfigStmt)
}
func (t *testConfigSuite) Test_buildConfigUpdateSQL_struct_success(c *C) {
- testConfigStmt := "SET @@GLOBAL.tidb_enable_stmt_summary = true,@@GLOBAL.tidb_stmt_summary_refresh_interval = 1800"
+ testConfigStmt := "SET @@GLOBAL.tidb_enable_stmt_summary = true, @@GLOBAL.tidb_stmt_summary_refresh_interval = 1800"
c.Assert(buildConfigUpdateSQL(testConfig{Enable: true, RefreshInterval: 1800}), Equals, testConfigStmt)
}
func (t *testConfigSuite) Test_buildConfigUpdateSQL_ptr_success(c *C) {
- testConfigStmt := "SET @@GLOBAL.tidb_enable_stmt_summary = true,@@GLOBAL.tidb_stmt_summary_refresh_interval = 1800"
+ testConfigStmt := "SET @@GLOBAL.tidb_enable_stmt_summary = true, @@GLOBAL.tidb_stmt_summary_refresh_interval = 1800"
c.Assert(buildConfigUpdateSQL(&testConfig{Enable: true, RefreshInterval: 1800}), Equals, testConfigStmt)
}
diff --git a/pkg/apiserver/statement/service.go b/pkg/apiserver/statement/service.go
index 49da0fcd29..6d1aeb2351 100644
--- a/pkg/apiserver/statement/service.go
+++ b/pkg/apiserver/statement/service.go
@@ -78,6 +78,7 @@ type EditableConfig struct {
RefreshInterval int `json:"refresh_interval" gorm:"column:tidb_stmt_summary_refresh_interval"`
HistorySize int `json:"history_size" gorm:"column:tidb_stmt_summary_history_size"`
MaxSize int `json:"max_size" gorm:"column:tidb_stmt_summary_max_stmt_count"`
+ InternalQuery bool `json:"internal_query" gorm:"column:tidb_stmt_summary_internal_query"`
}
// @Summary Get statement configurations
diff --git a/ui/lib/apps/DebugAPI/apilist/ApiList.tsx b/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
index a54bc72ee8..4be341a8df 100644
--- a/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
+++ b/ui/lib/apps/DebugAPI/apilist/ApiList.tsx
@@ -1,5 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react'
-import { Collapse, Space, Input, Empty } from 'antd'
+import { Collapse, Space, Input, Empty, Alert } from 'antd'
import { useTranslation } from 'react-i18next'
import { TFunction } from 'i18next'
import { SearchOutlined } from '@ant-design/icons'
@@ -101,13 +101,19 @@ export default function Page() {
return (
<AnimatedSkeleton showSkeleton={isEndpointLoading || isTopologyLoading}>
<Card>
- <Space>
- <Input
- placeholder={t(`debug_api.keyword_search`)}
- prefix={<SearchOutlined />}
- onChange={(e) => filterBy(e.target.value)}
- />
- </Space>
+ <Alert
+ message={t(`debug_api.warning_header.title`)}
+ description={t(`debug_api.warning_header.body`)}
+ type="warning"
+ showIcon
+ />
+ </Card>
+ <Card>
+ <Input
+ placeholder={t(`debug_api.keyword_search`)}
+ prefix={<SearchOutlined />}
+ onChange={(e) => filterBy(e.target.value)}
+ />
</Card>
<EndpointGroups />
</AnimatedSkeleton>
diff --git a/ui/lib/apps/DebugAPI/translations/en.yaml b/ui/lib/apps/DebugAPI/translations/en.yaml
index a4d7d4aee7..0bdbdae0cc 100644
--- a/ui/lib/apps/DebugAPI/translations/en.yaml
+++ b/ui/lib/apps/DebugAPI/translations/en.yaml
@@ -1,7 +1,10 @@
debug_api:
- nav_title: Debugging API
- keyword_search: Keyword Search
+ nav_title: Debug Data
+ keyword_search: Filter by keyword
endpoints_not_found: Endpoints not found
+ warning_header:
+ title: Warning
+ body: These debug endpoints and data are largely internal and intended for use by TiDB developers. Please use this feature under the guidance of TiDB technical support.
form:
download: Download
widgets:
diff --git a/ui/lib/apps/DebugAPI/translations/zh.yaml b/ui/lib/apps/DebugAPI/translations/zh.yaml
index 8188625e1a..2eedf45390 100644
--- a/ui/lib/apps/DebugAPI/translations/zh.yaml
+++ b/ui/lib/apps/DebugAPI/translations/zh.yaml
@@ -1,7 +1,10 @@
debug_api:
- nav_title: 信息查询接口
- keyword_search: 关键词搜索
+ nav_title: 内部调试数据
+ keyword_search: 按关键字过滤接口
endpoints_not_found: 找不到对应接口
+ warning_header:
+ title: 警告
+ body: 本页面提供的调试接口主要面向 TiDB 开发者、提供数据库内部运行数据。请在 TiDB 技术支持的指导下使用本功能。
form:
download: 下载
widgets:
diff --git a/ui/lib/apps/KeyViz/components/KeyVizSettingForm.tsx b/ui/lib/apps/KeyViz/components/KeyVizSettingForm.tsx
index 305dd8ee7f..3ad3e2dcc4 100644
--- a/ui/lib/apps/KeyViz/components/KeyVizSettingForm.tsx
+++ b/ui/lib/apps/KeyViz/components/KeyVizSettingForm.tsx
@@ -144,7 +144,7 @@ function KeyVizSettingForm({ onClose, onConfigUpdated }: Props) {
<Form.Item
name="auto_collection_disabled"
label={t('keyviz.settings.switch')}
- tooltip={t('keyviz.settings.switch_tooltip')}
+ extra={t('keyviz.settings.switch_tooltip')}
{...negateSwitchProps}
>
<Switch />
diff --git a/ui/lib/apps/KeyViz/translations/en.yaml b/ui/lib/apps/KeyViz/translations/en.yaml
index 2e0671354f..3a085c8a5e 100644
--- a/ui/lib/apps/KeyViz/translations/en.yaml
+++ b/ui/lib/apps/KeyViz/translations/en.yaml
@@ -25,7 +25,7 @@ keyviz:
open_setting: Open Settings
close_keyviz: Disable Key Visualizer Feature
close_keyviz_warning: Are you sure want to disable this feature? Current visual reports will be cleared.
- switch: Enable
+ switch: Enable Feature
switch_tooltip: Whether Key Visualizer feature is enabled. When enabled, there will be small overhead.
policy: Policy
policy_db: TiDB
diff --git a/ui/lib/apps/KeyViz/translations/zh.yaml b/ui/lib/apps/KeyViz/translations/zh.yaml
index 1fbe94c1f8..e75689bf9a 100644
--- a/ui/lib/apps/KeyViz/translations/zh.yaml
+++ b/ui/lib/apps/KeyViz/translations/zh.yaml
@@ -25,8 +25,8 @@ keyviz:
open_setting: 打开设置
close_keyviz: 关闭流量可视化功能
close_keyviz_warning: 确认要关闭该功能吗？关闭后现有历史记录也将被清空！
- switch: 总开关
- switch_tooltip: 是否开启流量可视化，流量可视化启用时将会增加少量资源开销
+ switch: 启用功能
+ switch_tooltip: 是否启用流量可视化功能，关闭后将不能使用流量可视化功能，但能减少一些 PD 的 CPU 资源开销。
policy: 模式
policy_db: TiDB
policy_kv: 原生 KV
diff --git a/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx b/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
index d3f14443e2..cc944cbcfc 100755
--- a/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
+++ b/ui/lib/apps/Statement/pages/List/StatementSettingForm.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useState, useCallback } from 'react'
import {
Form,
- InputNumber,
Skeleton,
Switch,
Input,
@@ -21,185 +20,167 @@ interface Props {
onConfigUpdated: () => any
}
-type InternalStatementConfig = StatementEditableConfig & {
- max_refresh_interval: number
- max_history_size: number
-}
-
const convertArrToObj = (arr: number[]) =>
arr.reduce((acc, cur) => {
acc[cur] = cur
return acc
}, {})
-const REFRESH_INTERVAL_MARKS = convertArrToObj([1, 5, 15, 30, 60])
-const HISTORY_SIZE_MARKS = convertArrToObj([1, 64, 128, 192, 255])
-
function StatementSettingForm({ onClose, onConfigUpdated }: Props) {
const [submitting, setSubmitting] = useState(false)
const { t } = useTranslation()
- const [curRefreshInterval, setCurRefreshInterval] = useState(0)
- const [curHistorySize, setCurHistorySize] = useState(0)
- const dataRetainDuration = useMemo(() => {
- const totalMins = curRefreshInterval * curHistorySize
- const day = Math.floor(totalMins / (24 * 60))
- const hour = Math.floor((totalMins - day * 24 * 60) / 60)
- const min = totalMins - day * 24 * 60 - hour * 60
- return `${day} day ${hour} hour ${min} min`
- }, [curRefreshInterval, curHistorySize])
-
const {
- data: oriConfig,
+ data: initialConfig,
isLoading: loading,
error,
} = useClientRequest((reqConfig) =>
client.getInstance().statementsConfigGet(reqConfig)
)
- const config = useMemo(() => {
- if (oriConfig) {
- const refresh_interval = Math.ceil(oriConfig.refresh_interval! / 60)
- const max_refresh_interval = Math.max(refresh_interval, 60)
- const max_history_size = Math.max(oriConfig.history_size!, 255)
-
- return {
- ...oriConfig,
- refresh_interval,
- max_refresh_interval,
- max_history_size,
- } as InternalStatementConfig
- }
- return null
- }, [oriConfig])
-
- useEffect(() => {
- if (config) {
- setCurRefreshInterval(config.refresh_interval!)
- setCurHistorySize(config.history_size!)
- }
- }, [config])
+ const handleSubmit = useCallback(
+ (values) => {
+ async function updateConfig(values) {
+ const newConfig: StatementEditableConfig = {
+ enable: values.enable,
+ max_size: values.max_size,
+ refresh_interval: values.refresh_interval * 60,
+ history_size: values.history_size,
+ internal_query: values.internal_query,
+ }
+ try {
+ setSubmitting(true)
+ await client.getInstance().statementsConfigPost(newConfig)
+ onClose()
+ onConfigUpdated()
+ } finally {
+ setSubmitting(false)
+ }
+ }
- async function updateConfig(values) {
- const newConfig: StatementEditableConfig = {
- enable: values.enable,
- max_size: values.max_size,
- refresh_interval: values.refresh_interval * 60,
- history_size: values.history_size,
- }
- try {
- setSubmitting(true)
- await client.getInstance().statementsConfigPost(newConfig)
- onClose()
- onConfigUpdated()
- } finally {
- setSubmitting(false)
- }
- }
-
- function handleSubmit(values) {
- if (oriConfig?.enable && !values.enable) {
- // warning
- Modal.confirm({
- title: t('statement.settings.close_statement'),
- icon: <ExclamationCircleOutlined />,
- content: t('statement.settings.close_statement_warning'),
- okText: t('statement.settings.actions.close'),
- cancelText: t('statement.settings.actions.cancel'),
- okButtonProps: { danger: true },
- onOk: () => updateConfig(values),
- })
- } else {
- updateConfig(values)
- }
- }
+ if (!values.enable) {
+ // warning
+ Modal.confirm({
+ title: t('statement.settings.close_statement'),
+ icon: <ExclamationCircleOutlined />,
+ content: t('statement.settings.close_statement_warning'),
+ okText: t('statement.settings.actions.close'),
+ cancelText: t('statement.settings.actions.cancel'),
+ okButtonProps: { danger: true },
+ onOk: () => updateConfig(values),
+ })
+ } else {
+ updateConfig(values)
+ }
+ },
+ [t, onClose, onConfigUpdated]
+ )
return (
<>
{error && <ErrorBar errors={[error]} />}
{loading && <Skeleton active={true} paragraph={{ rows: 5 }} />}
- {!loading && config && (
- <Form layout="vertical" initialValues={config} onFinish={handleSubmit}>
+ {!loading && initialConfig && (
+ <Form
+ layout="vertical"
+ initialValues={{
+ ...initialConfig,
+ refresh_interval: Math.floor(
+ (initialConfig.refresh_interval ?? 0) / 60
+ ),
+ }}
+ onFinish={handleSubmit}
+ >
<Form.Item
- name="enable"
valuePropName="checked"
label={t('statement.settings.switch')}
+ extra={t('statement.settings.switch_tooltip')}
>
- <Switch />
+ <Form.Item noStyle name="enable" valuePropName="checked">
+ <Switch />
+ </Form.Item>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prev, cur) => prev.enable !== cur.enable}
>
- {({ getFieldValue }) => {
- return (
- getFieldValue('enable') && (
- <Form.Item noStyle>
- <Form.Item
- name="max_size"
- label={t('statement.settings.max_size')}
- >
- <InputNumber min={1} />
- </Form.Item>
- <Form.Item label={t('statement.settings.refresh_interval')}>
- <Input.Group>
- <Form.Item noStyle name="refresh_interval">
- <InputNumber
- min={1}
- max={config.max_refresh_interval}
- formatter={(value) => `${value} min`}
- parser={(value) =>
- value?.replace(/[^\d]/g, '') || ''
- }
- onChange={(val) =>
- setCurRefreshInterval(val as number)
- }
- />
- </Form.Item>
- <Form.Item noStyle name="refresh_interval">
- <Slider
- min={1}
- max={config.max_refresh_interval}
- marks={{
- ...REFRESH_INTERVAL_MARKS,
- [config.max_refresh_interval]: `${config.max_refresh_interval}`,
- }}
- onChange={(val) => setCurRefreshInterval(val)}
- />
- </Form.Item>
- </Input.Group>
- </Form.Item>
- <Form.Item label={t('statement.settings.history_size')}>
- <Input.Group>
- <Form.Item noStyle name="history_size">
- <InputNumber
- min={1}
- max={config.max_history_size}
- onChange={(val) => setCurHistorySize(val as number)}
- />
- </Form.Item>
- <Form.Item noStyle name="history_size">
- <Slider
- min={1}
- max={config.max_history_size}
- marks={{
- ...HISTORY_SIZE_MARKS,
- [config.max_history_size]: `${config.max_history_size}`,
- }}
- onChange={(val) => setCurHistorySize(val)}
- />
- </Form.Item>
- </Input.Group>
- </Form.Item>
- <Form.Item label={t('statement.settings.keep_duration')}>
- <span style={{ color: '#555' }}>
- {dataRetainDuration}
- </span>
- </Form.Item>
+ {({ getFieldValue }) =>
+ getFieldValue('enable') && (
+ <>
+ <Form.Item
+ label={t('statement.settings.max_size')}
+ extra={t('statement.settings.max_size_tooltip')}
+ >
+ <Input.Group>
+ <Form.Item noStyle name="max_size">
+ <Slider
+ min={0}
+ max={5000}
+ step={100}
+ marks={convertArrToObj([200, 1000, 2000, 5000])}
+ />
+ </Form.Item>
+ </Input.Group>
+ </Form.Item>
+ <Form.Item
+ label={t('statement.settings.refresh_interval')}
+ extra={t('statement.settings.refresh_interval_tooltip')}
+ >
+ <Input.Group>
+ <Form.Item noStyle name="refresh_interval">
+ <Slider
+ min={1}
+ max={60}
+ step={null}
+ marks={convertArrToObj([1, 5, 15, 30, 60])}
+ />
+ </Form.Item>
+ </Input.Group>
+ </Form.Item>
+ <Form.Item
+ label={t('statement.settings.history_size')}
+ extra={t('statement.settings.history_size_tooltip')}
+ >
+ <Input.Group>
+ <Form.Item noStyle name="history_size">
+ <Slider
+ min={1}
+ max={255}
+ marks={convertArrToObj([1, 255])}
+ />
+ </Form.Item>
+ </Input.Group>
+ </Form.Item>
+ <Form.Item
+ label={t('statement.settings.keep_duration')}
+ extra={t('statement.settings.keep_duration_tooltip')}
+ shouldUpdate={(prev, cur) =>
+ prev.refresh_interval !== cur.refresh_interval ||
+ prev.history_size !== cur.history_size
+ }
+ >
+ {({ getFieldValue }) => {
+ const refreshInterval =
+ getFieldValue('refresh_interval') || 0
+ const historySize = getFieldValue('history_size') || 0
+ const totalMins = refreshInterval * historySize
+ const day = Math.floor(totalMins / (24 * 60))
+ const hour = Math.floor((totalMins - day * 24 * 60) / 60)
+ const min = totalMins - day * 24 * 60 - hour * 60
+ return `${day} day ${hour} hour ${min} min`
+ }}
+ </Form.Item>
+ <Form.Item
+ label={t('statement.settings.internal_query')}
+ extra={t('statement.settings.internal_query_tooltip')}
+ name="internal_query"
+ valuePropName="checked"
+ >
+ <Switch />
</Form.Item>
- )
+ </>
)
- }}
+ }
</Form.Item>
<Form.Item>
<Space>
diff --git a/ui/lib/apps/Statement/translations/en.yaml b/ui/lib/apps/Statement/translations/en.yaml
index 461a662421..971c3746dc 100755
--- a/ui/lib/apps/Statement/translations/en.yaml
+++ b/ui/lib/apps/Statement/translations/en.yaml
@@ -49,11 +49,18 @@ statement:
open_setting: Open Settings
close_statement: Disable Statement Feature
close_statement_warning: Are you sure want to disable this feature? Current statement history will be cleared.
- switch: Enable
- max_size: Max LRU Size
- refresh_interval: Collect Time Window Size
- history_size: Retain Time Window Counts
- keep_duration: Total Data Retain Duration
+ switch: Enable Feature
+ switch_tooltip: Whether Statement feature is enabled. When enabled, there will be a small SQL statement execution overhead.
+ max_size: 'Max # Statement'
+ max_size_tooltip: Max number of statement to collect. After exceeding, old statement information will be dropped. You may enlarge this setting when memory is sufficient and you discovered that data displayed in UI is incomplete.
+ refresh_interval: Window Size (min)
+ refresh_interval_tooltip: By reducing this setting you can select time range more precisely.
+ history_size: '# Windows'
+ history_size_tooltip: By enlarging this setting more statement history will be preserved, with larger memory cost.
+ keep_duration: SQL Statement History Size
+ keep_duration_tooltip: Window Size × Number of Windows
+ internal_query: Collect Internal Queries
+ internal_query_tooltip: After enabled, TiDB internal queries will be collected as well.
actions:
save: Save
close: Close
diff --git a/ui/lib/apps/Statement/translations/zh.yaml b/ui/lib/apps/Statement/translations/zh.yaml
index 9e42360c2e..4f76d3c51b 100755
--- a/ui/lib/apps/Statement/translations/zh.yaml
+++ b/ui/lib/apps/Statement/translations/zh.yaml
@@ -49,11 +49,18 @@ statement:
open_setting: 打开设置
close_statement: 关闭 SQL 语句分析功能
close_statement_warning: 确认要关闭该功能吗？关闭后现有历史记录也将被清空！
- switch: 总开关
- max_size: LRU 容量
- refresh_interval: 收集的时间窗口长度
- history_size: 保留的时间窗口个数
- keep_duration: 数据保留总时长
+ switch: 启用功能
+ switch_tooltip: 是否启用 SQL 语句分析功能，关闭后将不能使用 SQL 语句分析功能，但能提升少量 TiDB 性能。
+ max_size: 最大收集 SQL 语句个数
+ max_size_tooltip: 收集的 SQL 语句个数上限，当实际执行的 SQL 语句种类超过设定个数后最早执行的 SQL 语句信息将被丢弃。若您发现界面上呈现的 SQL 语句信息不完整，建议在内存允许的情况下调大本参数。
+ refresh_interval: 时间窗大小 (min)
+ refresh_interval_tooltip: 缩小时间窗大小可以使得选择的时间范围更精细。
+ history_size: 时间窗个数
+ history_size_tooltip: 扩大时间窗个数可以保留更长时间的执行历史，但也会引入更大的内存开销。
+ keep_duration: SQL 语句历史保留时长
+ keep_duration_tooltip: 时间窗大小 × 时间窗个数
+ internal_query: 收集内部查询
+ internal_query_tooltip: 开启后 TiDB 内部执行的 SQL 语句信息也将被收集。
actions:
save: 保存
close: 关闭