Add Dashboard Access and Profiling Page (#2655)

* Add Dashboard Access, Overview and Profiling Page

* add empty documents to fix dead link

* add profiling document

* Update dashboard-access.md

* update category

* update 4 images

* image changes from #3440

* Apply suggestions from code review

Co-authored-by: Wenxuan <hi@breeswish.org>

* address comments from lilian

Co-authored-by: Lilian Lee <lilin@pingcap.com>

Co-authored-by: Wenxuan <hi@breeswish.org>
Co-authored-by: Lilian Lee <lilin@pingcap.com>
Co-authored-by: pingcap-github-bot <sre-bot@pingcap.com>

dashboard/dashboard-access.md

@@ -0,0 +1,57 @@
+---
+title: Access TiDB Dashboard
+summary: Learn how to access TiDB Dashboard.
+category: how-to
+---
+
+# Access TiDB Dashboard
+
+To access TiDB Dashboard, visit <http://127.0.0.1:2379/dashboard> via your browser. Replace `127.0.0.1:2379` with the actual PD instance address and port.
+
+> **Note:**
+>
+> If you have deployed multiple PD components in your cluster, you can use the address of only one PD component to access TiDB Dashboard, because the Dashboard operates on only one PD component. If you access via other PD components, your browser is redirected to that PD component. Therefore, if the firewall is not configured for this instance on which PD operates, you might not be able to access TiDB Dashboard.
+
+## Browser compatibility
+
+You can use TiDB Dashboard in the following common desktop browsers of a relatively newer version:
+
+- Chrome >= 77
+- Firefox >= 68
+- Edge >= 17
+
+> **Note:**
+>
+> If you use the browsers above of earlier versions or other browsers to access TiDB Dashboard, some functions might not work properly.
+
+## Sign in
+
+For the first-time access, TiDB Dashboard displays the user sign in interface, as shown in the image below. You can sign in using the TiDB `root` account.
+
+![Login interface](/media/dashboard/dashboard-access-login.png)
+
+If one of the following situations exists, the login might fail:
+
+- TiDB `root` user does not exist.
+- PD is not started or cannot be accessed.
+- TiDB is not started or cannot be accessed.
+- Wrong `root` password.
+
+Once you have signed in, the session remains valid within the next 24 hours. To learn how to sign out, refer to the [Logout](#logout) section.
+
+## Switch language
+
+The following languages are supported in TiDB Dashboard:
+
+- English
+- Chinese (simplified)
+
+In the **SQL User Sign In** page, you can click the **Switch Language** drop-down list to switch the interface language.
+
+![Switch language](/media/dashboard/dashboard-access-switch-language.png)
+
+## Logout
+
+Once you have logged in, click the login user name in the left navigation bar to switch to the user page. Click the **Logout** button on the user page to log out the current user. After logging out, you need to re-enter your username and password.
+
+![Logout](/media/dashboard/dashboard-access-logout.png)

dashboard/dashboard-profiling.md

@@ -0,0 +1,55 @@
+---
+title: Instance Profiling Page
+summary: Learn the instance profiling page of TiDB Dashboard.
+category: how-to
+---
+
+# Instance Profiling Page
+
+The instance profiling page summarizes the internal performance data of each TiDB instance, TiKV instance, and PD instance. With this page, you can view the instance profiling without restarting these instances.
+
+The summarized performance data can be displayed as a flame graph or a directed acyclic graph, which visually shows the internal operations and proportions performed on the instances during the performance summary period. With this graph, you can quickly learn the main CPU resource consumption of these instances.
+
+## Access the page
+
+You can access the instance profiling page using one of the following methods:
+
+- After logging into TiDB Dashboard, click **Advanced Debugging** → **Profile Instances** on the left navigation bar.
+
+  ![Access instance profiling page](/media/dashboard/dashboard-profiling-access.png)
+
+- Visit <http://127.0.0.1:2379/dashboard/#/instance_profiling> in your browser. Replace `127.0.0.1:2379` with the actual PD instance address and port.
+
+## Start Profiling
+
+In the instance profiling page, choose at least one target instance and click **Start Profiling** to start the instance profiling.
+
+![Start instance profiling](/media/dashboard/dashboard-profiling-start.png)
+
+You can modify the profiling duration before starting the profiling. This duration is determined by the time needed for the profiling, which is 30 seconds by default. The 30-second duration takes approximately 30 seconds to complete.
+
+## View profiling status
+
+After a profiling is started, you can view the profiling status and progress in real time.
+
+![Profiling detail](/media/dashboard/dashboard-profiling-view-progress.png)
+
+The profiling runs in the background. Refreshing or exiting the current page does not stop the profiling task that is running.
+
+## Download profiling result
+
+After the profiling of all instances is completed, you can click **Download Profiling Result** in the upper right corner to download all profiling results.
+
+![Download profiling result](/media/dashboard/dashboard-profiling-download.png)
+
+You can also click a single instance on the list to directly view its profiling result.
+
+![Single instance result](/media/dashboard/dashboard-profiling-view-single.png)
+
+## View profiling history
+
+The profiling history is listed on the instance profiling page. Click one row of the list and you can view the status detail.
+
+![View profiling history](/media/dashboard/dashboard-profiling-history.png)
+
+For detailed operations on the profiling status page, see [View profiling status](#view-profiling-status).