dashboard: update dashboard media files structure (#3359)

* dashboard: update media files structure

* fix link

Co-authored-by: TomShawn <41534398+TomShawn@users.noreply.github.com>

TOC.md

@@ -414,11 +414,9 @@
       + [集群信息页面](/dashboard/dashboard-cluster-info.md)
       + [流量可视化页面](/dashboard/dashboard-key-visualizer.md)
       + SQL 语句分析页面
-        + [访问列表页面](/dashboard/dashboard-statements-list.md)
-        + [查看执行详情](/dashboard/dashboard-statements-detail.md)
-      + 慢查询页面
-        + [访问列表页面](/dashboard/dashboard-slow-queries-list.md)
-        + [查看执行详情](/dashboard/dashboard-slow-queries-detail.md)
+        + [访问列表页面](/dashboard/dashboard-statement-list.md)
+        + [查看执行详情](/dashboard/dashboard-statement-detail.md)
+      + [慢查询页面](/dashboard/dashboard-slow-query.md)
       + 集群诊断页面
         + [访问](/dashboard/dashboard-diagnostics-access.md)
         + [查看报告](/dashboard/dashboard-diagnostics-report.md)

dashboard/dashboard-cluster-info.md

@@ -14,15 +14,15 @@ category: how-to
 
 - 登录后，左侧导航条点击**集群信息**：
 
-  ![访问](/media/dashboard/cluster-info/access.png)
+  ![访问](/media/dashboard/dashboard-cluster-info-access.png)
 
 - 在浏览器中访问 <http://127.0.0.1:2379/dashboard/#/cluster_info/instance>（将 `127.0.0.1:2379` 替换为实际 PD 实例地址和端口）。
 
 ## 实例列表
 
 点击**实例**可查看实例列表：
 
-![实例](/media/dashboard/cluster-info/instances.png)
+![实例](/media/dashboard/dashboard-cluster-info-instances.png)
 
 实例列表列出了该集群中 TiDB、TiKV、PD 和 TiFlash 组件所有实例的概况信息。
 
@@ -51,7 +51,7 @@ category: how-to
 
 点击**主机**可查看主机列表：
 
-![主机](/media/dashboard/cluster-info/hosts.png)
+![主机](/media/dashboard/dashboard-cluster-info-hosts.png)
 
 主机列表列出了该集群中 TiDB、TiKV、PD 和 TiFlash 组件所有实例对应主机的运行情况。
 

dashboard/dashboard-log-search.md

@@ -12,7 +12,7 @@ category: how-to
 
 登录 Dashboard 后点击左侧导航的**日志搜索**可以进入此功能页面：
 
-![日志搜索首页](/media/dashboard/log-search/home.png)
+![日志搜索首页](/media/dashboard/dashboard-log-search-home.png)
 
 该页面提供 4 个搜索参数，包括：
 
@@ -27,7 +27,7 @@ category: how-to
 
 搜索结果详情页面如下图所示：
 
-![搜索结果](/media/dashboard/log-search/result.png)
+![搜索结果](/media/dashboard/dashboard-log-search-result.png)
 
 整个页面分为三个部分：
 
@@ -61,12 +61,12 @@ category: how-to
 
 在日志搜索首页点击**查看搜索历史**链接，进入搜索历史列表页面：
 
-![搜索历史入口](/media/dashboard/log-search/history-entry.png)
+![搜索历史入口](/media/dashboard/dashboard-log-search-history-entry.png)
 
-![搜索历史列表](/media/dashboard/log-search/history.png)
+![搜索历史列表](/media/dashboard/dashboard-log-search-history.png)
 
 该列表显示每次搜索的日志的时间范围、日志等级、组件、关键字以及搜索状态等信息。点击**操作**列的**查看详情**链接将跳转到此次搜索的结果详情页面。
 
 可以对不再需要的搜索历史执行删除操作，点击右上角的**删除全部任务**，或者先选中需要删除的某些行后再点击**删除选中的任务**进行删除：
 
-![删除搜索历史](/media/dashboard/log-search/delete-history.png)
+![删除搜索历史](/media/dashboard/dashboard-log-search-delete-history.png)

dashboard/dashboard-slow-query.md

@@ -24,7 +24,7 @@ category: how-to
 
 * 登录后，左侧导航条点击**慢查询** (**Slow Queries**)：
 
-![access 访问页面](/media/dashboard/slow-queries/dashboard-slow-queries-access.png)
+![access 访问页面](/media/dashboard/dashboard-slow-queries-access.png)
 
 * 在浏览器中访问 <http://127.0.0.1:2379/dashboard/#/slow_query>（将 `127.0.0.1:2379` 替换为任意实际 PD 地址和端口）。
 
@@ -34,19 +34,19 @@ category: how-to
 
 可按时间范围、慢查询语句关联的数据库、SQL 关键字、SQL 类型、显示的慢查询语句数量等条件过滤，筛选慢查询句。如下所示，默认显示 30 分钟内最近 100 条慢查询。
 
-![修改列表过滤条件](/media/dashboard/slow-queries/dashboard-slow-queries-list1.png)
+![修改列表过滤条件](/media/dashboard/dashboard-slow-queries-list1.png)
 
 ### 显示更多列信息
 
 页面顶部**选择列** (**Columns**) 选项中可选择显示更多列，可将鼠标移动到列名右侧的 **(i)** 图标处查看列的说明：
 
-![显示更多列信息](/media/dashboard/slow-queries/dashboard-slow-queries-list2.png)
+![显示更多列信息](/media/dashboard/dashboard-slow-queries-list2.png)
 
 ### 修改列表排序依据
 
 列表默认以**结束运行时间** (**Finish Time**) 逆序排序，点击不同的列标题可以修改排序依据或切换排序顺序：
 
-![修改列表排序依据](/media/dashboard/slow-queries/dashboard-slow-queries-list3.png)
+![修改列表排序依据](/media/dashboard/dashboard-slow-queries-list3.png)
 
 ## 查看执行详情
 
@@ -56,10 +56,10 @@ category: how-to
 - 执行计划：慢查询的执行计划，参阅[理解 TiDB 执行计划](/query-execution-plan.md)文档了解如何解读执行计划（下图中区域 2）
 - 其他分类好的 SQL 执行信息（下图中区域 3）
 
-![查看执行详情](/media/dashboard/slow-queries/dashboard-slow-queries-detail1.png)
+![查看执行详情](/media/dashboard/dashboard-slow-queries-detail1.png)
 
 点击**展开** (**Expand**) 链接可以展开相应项的完整内容，点击**复制** (**Copy**) 链接可以复制完整内容到剪贴板。
 
 点击标签页标题可切换显示不同分类的 SQL 执行信息：
 
-![显示不同分类执行信息](/media/dashboard/slow-queries/dashboard-slow-queries-detail2.png)
+![显示不同分类执行信息](/media/dashboard/dashboard-slow-queries-detail2.png)

dashboard/dashboard-statement-detail.md

@@ -0,0 +1,61 @@
+---
+title: 查看执行详情
+summary: 查看单个 SQL 语句执行的详细情况
+category: how-to
+---
+
+# 查看执行详情
+
+在列表中点击任意一行可以进入该 SQL 语句的详情页查看更详细的信息，这此信息包括三大部分：
+
+- SQL 语句概况：包括 SQL 模板，SQL 模板 ID，当前查看的时间范围，执行计划个数以及执行所在的数据库（下图区域 1）
+- 执行计划列表：如果该 SQL 语句有多个执行计划，则显示该列表，可以选择不同的执行计划，在列表下方会显示选中的执行计划详情；如果只有一个执行计划，则该列表不显示（下图区域 2）
+- 执行计划详情：显示选中的执行计划的详细信息，具体见下一小节（下图区域 3）
+
+![详情](/media/dashboard/dashboard-statement-detail.png)
+
+## 执行计划详情
+
+执行计划详情包括以下内容：
+
+- SQL 样本：该计划对应的实际执行的某一条 SQL 语句文本。时间范围内任何出现过的 SQL 都可能作为 SQL 样本。
+- 执行计划：执行计划的完整内容，参阅[理解 TiDB 执行计划](https://pingcap.com/docs-cn/dev/query-execution-plan/)文档了解如何解读执行计划。如果选择了多个执行计划，则显示的是其中任意一个。
+- 其他关于该 SQL 的基本信息、执行时间、Coprocessor 读取、事务、慢查询等信息，可点击相应标签页标题切换。
+
+![执行计划详情](/media/dashboard/dashboard-statement-plans-detail.png)
+
+### 基本信息
+
+包含关于表名、索引名、执行次数、累计耗时等信息。**描述**（Description）列对各个字段进行了具体描述。
+
+![基本信息](/media/dashboard/dashboard-statement-plans-basic.png)
+
+### 执行时间
+
+显示执行计划执行的各阶段所耗费时间。
+
+> **注意：**
+>
+> 由于单个 SQL 语句内部可能有并行执行的操作，因此各阶段累加时间可能超出该 SQL 语句的实际执行时间。
+
+![执行时间](/media/dashboard/dashboard-statement-plans-time.png)
+
+### Coprocessor 读取
+
+显示 Coprocessor 读取的相关信息。
+
+![Coprocessor 读取](/media/dashboard/dashboard-statement-plans-cop-read.png)
+
+### 事务
+
+显示执行计划与事务相关的信息，比如平均写入 key 个数，最大写入 key 个数等。
+
+![事务](/media/dashboard/dashboard-statement-plans-transaction.png)
+
+### 慢查询
+
+如果该执行计划执行过慢，则在慢查询标签页下可以看到其关联的慢查询记录。
+
+![慢查询](/media/dashboard/dashboard-statement-plans-slow-queries.png)
+
+该区域显示的内容结构与慢查询页面一致，详见[慢查询页面](/dashboard/dashboard-slow-query.md)。

dashboard/dashboard-statement-list.md

@@ -0,0 +1,64 @@
+---
+title: SQL 语句分析页面
+summary: 查看所有 SQL 语句在集群上执行情况
+category: how-to
+---
+
+# SQL 语句分析页面
+
+该页面可以查看所有 SQL 语句在集群上执行情况，常用于分析总耗时或单次耗时执行耗时较长的 SQL 语句。
+
+在该页面中，结构一致的 SQL 查询（即使查询参数不一致）都会被归为同一个 SQL 语句，例如 `SELECT * FROM employee WHERE id IN (1, 2, 3)` 和 `select * from EMPLOYEE where ID in (4, 5)` 都属于同一 SQL 语句 `select * from employee where id in (...)`。
+
+## 访问列表页面
+
+可以通过以下两种方法访问 SQL 语句分析页面：
+
+- 登录后，左侧导航条点击**SQL 语句分析**（SQL Statements）：
+
+  ![访问](/media/dashboard/dashboard-statement-access.png)
+
+- 在浏览器中访问 <http://127.0.0.1:2379/dashboard/#/statement>（将 `127.0.0.1:2379` 替换为实际 PD 实例地址和端口）。
+
+SQL 语句分析页面所展示的所有数据都来自于 TiDB Statement 系统表，参见 [Statement Summary Tables](https://pingcap.com/docs-cn/dev/statement-summary-tables) 文档了解该系统表的详细情况。
+
+### 修改列表过滤条件
+
+页面顶部可修改显示的时间范围、按执行 SQL 所在数据库进行过滤，或按 SQL 类型进行过滤，如下所示。默认显示最近一个收集周期（默认最近 30 分钟）内的所有 SQL 语句执行情况。
+
+![修改过滤条件](/media/dashboard/dashboard-statement-filter-options.png)
+
+### 显示其他字段
+
+页面顶部**选择列**（Columns）选项中可选择显示更多列，可将鼠标移动到列名右侧的 (i) 图标处查看列的说明：
+
+![选择列](/media/dashboard/dashboard-statement-columns-selector.png)
+
+### 修改列表排序依据
+
+列表默认以**累计耗时**（Total Latency）从高到低进行排序，点击不同的列标题可以修改排序依据或切换排序顺序：
+
+![修改列排序](/media/dashboard/dashboard-statement-change-order.png)
+
+### 修改数据收集设置
+
+在列表页面，点击顶部右侧的**设置**（Settings）按钮，即可对 SQL 语句分析功能进行设置：
+
+![设置入口](/media/dashboard/dashboard-statement-setting-entry.png)
+
+点击后设置界面如下图所示：
+
+![设置](/media/dashboard/dashboard-statement-settings.png)
+
+在设置中可以选择关闭或开启 SQL 语句分析功能。在开启 SQL 语句分析功能时可以修改以下选项：
+
+- 数据收集周期：默认 30 分钟，每次进行 SQL 语句分析的时间长度。SQL 语句分析功能每次对一段时间范围内的所有 SQL 语句进行汇总统计，如果这个时间范围过长，则统计的粒度粗，不利用定位问题；如果太短，则统计的粒度细，方便定位问题，但会导致在相同的数据保留时间内产生更多的记录，产生更多的内存占用。因此需要根据实际情况调整，在需要定位问题时适当地将值调低。
+- 数据保留时间：默认 1 天，统计信息保留的时间，超过这个时间的数据会被从系统表中删除。
+
+参见 [Statement Summary Tables 参数设置](https://pingcap.com/docs-cn/dev/statement-summary-tables/#%E5%8F%82%E6%95%B0%E9%85%8D%E7%BD%AE) 文档了解详细情况。
+
+> **注意：**
+>
+> 由于 Statement 系统表只存放在内存中，关闭此功能后，系统表中的数据会将清空。
+>
+> 数据收集周期和保留时间的值会影响内存占用，因此建议根据实际情况调整，保留时间不宜设置过大。