Update Key Visualizer doc

TOC.md

@@ -81,7 +81,6 @@
   + Monitor
     - [Overview](/tidb-monitoring-framework.md)
     - [Monitor a TiDB Cluster](/monitor-a-tidb-cluster.md)
-    - [Monitor Traffic Using Key Visualizer](/key-visualizer-monitoring-tool.md)
   + Migrate
     - [Migration Tools User Guide](/ecosystem-tool-user-guide.md)
     + Migrate from MySQL

key-visualizer-monitoring-tool.md → dashboard/dashboard-key-visualizer.md

@@ -1,34 +1,29 @@
 ---
-title: Key Visualizer
-summary: Learn how to monitor traffic using the Key Visualizer tool.
+title: Key Visualizer Page
+summary: Learn how to use Key Visualizer to monitor traffic.
 category: how-to
+aliases: ['/docs/dev/key-visualizer-monitoring-tool/']
 ---
 
-# Key Visualizer
+# Key Visualizer Page
 
-Key Visualizer is a feature for analyzing the usage of TiDB and troubleshooting the traffic hotspot. The feature generates a visual report of the metrics of the TiDB cluster over a period of time. With this visual report, you can quickly and intuitively observe the overall cluster hotspot and traffic distribution.
+The Key Visualizer page of TiDB Dashboard is used to analyze the usage of TiDB and troubleshoot traffic hotspots. This page visually shows the traffic of the TiDB cluster over a period of time.
 
-## Access Key Visualizer
+## Access Key Visualizer page
 
-As one of the offerings of TiDB Dashboard, Key Visualizer is directly integrated into PD instances and does not require a separate deployment. You can access TiDB Dashboard on any PD instance via your browser by using the following address:
+You can use one of the following two methods to access the Key Visualizer page:
 
-{{< copyable "" >}}
+* After logging into TiDB Dashboard, click **Key Visualizer** on the left navigation menu:
 
-```
-http://PDAddress:PDPort/dashboard
-```
+![Access Key Visualizer](/media/dashboard/dashboard-keyviz-access.png)
 
-> **Note:**
->
-> + If multiple PD instances exist, you can use any PD instance address to access TiDB Dashboard.
-> + By default, `PDPort` is `2379`. If you have modified the corresponding PD parameter during deployment, use the modified PD port.
-> + You need to use the `root` account of TiDB to log into TiDB Dashboard.
+* Visit <http://127.0.0.1:2379/dashboard/#/keyviz> in your browser. Replace `127.0.0.1:2379` with the actual PD instance address and port.
 
 ## Interface demonstration
 
-The following image is a demonstration of the Key Visualizer interface:
+The following image is a demonstration of the Key Visualizer page:
 
-![Key Visualizer Interface](/media/dashboard/keyvisualizer/overview.png)
+![Key Visualizer page](/media/dashboard/dashboard-keyviz-overview.png)
 
 From the interface above, you can see the following objects:
 
@@ -57,7 +52,7 @@ For more details about hotspot, refer to [Highly Concurrent Write Best Practices
 
 ### Heatmap
 
-The heatmap is the core part of Key Visualizer, which shows the change of a metric over time. The X-axis of the heatmap indicates the time. The Y-axis of the heatmap indicates the consecutive Regions based on key ranges that cover all schemas and tables of the TiDB cluster. 
+The heatmap is the core part of Key Visualizer, which shows the change of a metric over time. The X-axis of the heatmap indicates the time. The Y-axis of the heatmap indicates the consecutive Regions based on key ranges that cover all schemas and tables of the TiDB cluster.
 
 Colder colors in the heatmap indicate lower read and write traffic of Regions in that period of time. Hotter (brighter) colors indicate higher traffic.
 
@@ -69,7 +64,25 @@ A TiDB cluster might have up to hundreds of thousands of Regions. It is difficul
 
 This section introduces how to use Key Visualizer.
 
-![Toolbar](/media/dashboard/keyvisualizer/toolbar.png)
+### Settings
+
+To use the Key Visualizer page for the first time, you need to manually enable this feature on the **Settings** page. Follow the page guide and click **Open Settings** to open the settings page:
+
+![Feature disabled](/media/dashboard/dashboard-keyviz-not-enabled.png)
+
+After this feature is enabled, you can open the settings page by clicking the **Settings** icon in the upper right corner:
+
+![Settings icon](/media/dashboard/dashboard-keyviz-settings-button.png)
+
+The settings page is shown as follows:
+
+![Settings page](/media/dashboard/dashboard-keyviz-settings.png)
+
+Set whether to start data collection through the switch, and click **Save** to take effect. After enabling the feature, you can see that the toolbar is available:
+
+![Toolbar](/media/dashboard/dashboard-keyviz-toolbar.png)
+
+After this feature is enabled, data collection is going on at the backend. You can see the heatmap shortly.
 
 ### Observe a certain period of time or Region range
 
@@ -78,9 +91,14 @@ When you open Key Visualizer, the heatmap of the entire database over the recent
 1. Scroll up or down in the heatmap.
 2. Click and drag one of the following buttons to select the range.
     + Click the **Select & Zoom** button. Then click and drag this button to select the area to zoom in.
+
+    ![Selection box](/media/dashboard/dashboard-keyviz-select-zoom.gif)
+
     + Click the **Reset** button to reset the Region range to the entire database.
     + Click the **time selection box** (at the position of `6 hours` on the interface above) and select the observation time period again.
 
+    ![Select time](/media/dashboard/dashboard-keyviz-select-time.png)
+
 > **Note:**
 >
 > If you follow step 2 in the instruction above, the heatmap is redrawn, which might be very different from the original heatmap. This difference is normal because if you observe in more detail, the granularity of the Region compression has changed, or the basis of `hot` in a specific range has changed.
@@ -95,6 +113,8 @@ The heatmap uses colors of different brightnesses to indicate the Bucket traffic
 
 ### Select metrics
 
+![Select metrics](/media/dashboard/dashboard-keyviz-select-type.png)
+
 You can view a metric you are interested in by selecting this metric in the **metrics selection box** (at the `Write (bytes)` position in the interface above):
 
 * `Read (bytes)`: Read traffic.
@@ -115,39 +135,39 @@ To regain a heatmap based on the current time, click the **Refresh** button. If
 
 You can hover your mouse over the Bucket you are interested in to view the detailed information of this Region range. The image below is an example of this information:
 
-![Bucket details](/media/dashboard/keyvisualizer/tooltip.png)
+![Bucket details](/media/dashboard/dashboard-keyviz-tooltip.png)
 
 If you want to copy this information, click a Bucket. Then, the page with relevant details is temporarily pinned. Click on the information, and you have copied it to the clipboard.
 
-![Copy Bucket details](/media/dashboard/keyvisualizer/tooltip-copy.png)
+![Copy Bucket details](/media/dashboard/dashboard-keyviz-tooltip-copy.png)
 
 ## Common heatmap types
 
 This section shows and interprets four common types of heatmap in Key Visualizer.
 
 ### Evenly distributed workload
 
-![Balanced ](/media/dashboard/keyvisualizer/well_dist.png)
+![Balanced](/media/dashboard/dashboard-keyviz-well-dist.png)
 
 In the heatmap above, bright and dark colors are a fine-grained mix. This indicates that reads or writes are evenly distributed over time and among key ranges. The workload is evenly distributed to all nodes, which is ideal for a distributed database.
 
 ### Periodically reads and writes
 
-![Periodically](/media/dashboard/keyvisualizer/period.png)
+![Periodically](/media/dashboard/dashboard-keyviz-period.png)
 
 In the heatmap above, there is an alternating brightness and darkness along the X-axis (time) but the brightness is relatively even along the Y-axis (Region). This indicates that the reads and writes change periodically, which might occur in scenarios of periodically scheduled tasks. For example, the big data platform periodically extracts data from TiDB every day. In this kind of scenarios, pay attention to whether the resources are sufficient during peak usage.
 
 ## Concentrated reads or writes
 
-![Concentrated](/media/dashboard/keyvisualizer/continue.png)
+![Concentrated](/media/dashboard/dashboard-keyviz-continue.png)
 
 In the heatmap above, you can see several bright lines. Along the Y-axis, the fringes around the bright lines are dark, which indicates that the Regions corresponding to bright lines have high read and write traffic. You can observe whether the traffic distribution is expected by your application. For example, when all services are associated with the user table, the overall traffic of the user table can be high, so it is reasonable to show bright lines in the heatmap.
 
 In addition, the height of the bright lines (the thickness along the Y-axis) is important. Because TiKV has its own Region-based hotspot balancing mechanism, the more Regions involved in the hotspot, the better it is for balancing traffic across all TiKV instances. The thicker and more bright lines indicate that hotspots are more scattered, and TiKV is better used. The thinner and fewer bright lines indicate that hotspots are more concentrated, and the hotspot issue is more obvious in TiKV, which might requires manual intervention.
 
 ### Sequential reads or writes
 
-![Sequential](/media/dashboard/keyvisualizer/sequential.png)
+![Sequential](/media/dashboard/dashboard-keyviz-sequential.png)
 
 In the heatmap above, you can see a bright line. This means that the data reads or writes are sequential. Typical scenarios of sequential data reads or writes are importing data or scanning tables and indexes. For example, you continuously write data to tables with auto-increment IDs.