From 149387b802d99f9a25153ca265e176c8d0ec03de Mon Sep 17 00:00:00 2001 From: Wenxuan Date: Wed, 12 May 2021 13:31:53 +0800 Subject: [PATCH] ui: Improve settings description for Statement (#920) --- pkg/apiserver/statement/config_test.go | 10 +- pkg/apiserver/statement/service.go | 1 + .../KeyViz/components/KeyVizSettingForm.tsx | 2 +- ui/lib/apps/KeyViz/translations/en.yaml | 2 +- ui/lib/apps/KeyViz/translations/zh.yaml | 4 +- .../pages/List/StatementSettingForm.tsx | 275 ++++++++---------- ui/lib/apps/Statement/translations/en.yaml | 17 +- ui/lib/apps/Statement/translations/zh.yaml | 17 +- 8 files changed, 162 insertions(+), 166 deletions(-) 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/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) { 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: , - 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: , + 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 && } {loading && } - {!loading && config && ( -
+ {!loading && initialConfig && ( + - + + + prev.enable !== cur.enable} > - {({ getFieldValue }) => { - return ( - getFieldValue('enable') && ( - - - - - - - - `${value} min`} - parser={(value) => - value?.replace(/[^\d]/g, '') || '' - } - onChange={(val) => - setCurRefreshInterval(val as number) - } - /> - - - setCurRefreshInterval(val)} - /> - - - - - - - setCurHistorySize(val as number)} - /> - - - setCurHistorySize(val)} - /> - - - - - - {dataRetainDuration} - - + {({ getFieldValue }) => + getFieldValue('enable') && ( + <> + + + + + + + + + + + + + + + + + + + + + + + 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` + }} + + + - ) + ) - }} + } 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: 关闭