Feat: add the user doc of `vela top` (#985)

* Feat: add the user doc of vela top

Signed-off-by: HanMengnan <1448189829@qq.com>

* Feat: add i18 doc

Signed-off-by: HanMengnan <1448189829@qq.com>

* Feat: add doc of container view of log view

Signed-off-by: HanMengnan <1448189829@qq.com>

* Fix: fix header level

Signed-off-by: HanMengnan <1448189829@qq.com>

* Fix: fix sidebars.js

Signed-off-by: HanMengnan <1448189829@qq.com>

Signed-off-by: HanMengnan <1448189829@qq.com>

docs/tutorials/vela-top.md

@@ -0,0 +1,175 @@
+---
+title: Vela Top
+---
+
+In this guide, we want to introduce you how to use the vela top tool in KubeVela. This tool is a UI based CLI tool provided in KubeVela. By using it, you can obtain the overview information of the platform and diagnose the resource status of the application.
+
+At present, the tool has provided the following feature:
+- Platform information overview
+- Display of resource status information at Application, Managed Resource, Pod and Container levels
+- Display Application Resource Topology
+- Display resource YAML text
+- Display log of pod and container
+
+### Launch tool
+
+When launching the tool, we can specify the Namespace of the Application displayed in the Application view which is the home page.
+
+- Default Namespace
+    ```shell
+  vela top
+  ```
+
+- Aimed Namespace
+    ```shell
+  vela top -n <namespace>
+  ```
+
+- All Namespace
+  ```shell
+  vela top -A
+  ```
+
+After starting the tool, we will enter the home page: Application view, as shown below:
+
+![vela top home page](../resources/vela-top-home-page.png)
+
+The tool is divided into three parts as a whole, as shown in the figure, they are the Header part containing basic information, platform system information, menu and logo, the Body part where the resource view is located, and the Footer part where the breadcrumb component of the resource level is located.
+
+### Overview of platform information
+
+![vela top platform overview](../resources/vela-top-overview.png)
+
+This information panel component will display the performance information of the KubeVela system, including the version of Vela Core and Vela CLI, the proportion of applications running in the KubeVela system to all applications, and the performance information of the Vela controller (Vela Core) and the Vela gateway (Vela Cluster GateWay). The current usage of CPU and memory accounts for the proportion of the two set values of request and limit respectively).
+
+The performance information for the Vela Controller and Vela Gateway here actually comes from the performance information of the Pod where they are located. It should be noted that to collect the performance information of the Pod, you need to install the [metrics server](https://github.com/kubernetes-sigs/metrics-server) in the cluster, otherwise the performance information of the Pod will not be obtained correctly.
+
+
+### Display information and status of multi-level resource
+
+#### Application view
+
+![vela top app view](../resources/vela-top-home-page.png)
+
+This view will display the status information of all Applications under the Namespace in the platform, including:
+- Name
+- Namespace
+- Phase
+- Workflow Mode
+- Number of successful Workflows / Number of Workflows
+- Number of Health Services / Number of Services
+- CreateTime
+
+In this view, you can reselect the Application of which Namespace to display by pressing the N button:
+
+![vela top app namespace](../resources/vela-top-app-namespace.png)
+
+You can also press the button ↑ or ↓ to select an application and then press the button T to display the resource topology of the application.
+
+If you want to do resource penetration for this Application to see what resources belong to it, you can enter the next resource level by pressing the ENTER key.
+
+#### Managed Resource view
+
+![vela top managed resource view](../resources/vela-top-managed-resource-view.png)
+
+The Managed Resource view shows the next-level resources of the Application. The resource view shows the resources generated by the deployment of the target Application, including: Deployment, ConfigMap, Service, Helm Release, etc. We call these resources the resources managed by the application.
+
+For Application-managed resources, we display the following information:
+
+- Name
+- Namespace
+- Kind
+- API Version
+- In which cluster
+- Belong to which component
+- Status
+
+The resources managed by the application are very complex, so in this view, we provide some ways to filter the view. You can filter the resources according to the Namespace and the cluster where the resources are located. The corresponding keys are N and C, as shown below:
+
+![vela top managed resource filter](../resources/vela-top-managed-resource-filter.gif)
+
+The title at the top of the view indicates that the Namespace and Cluster in which the resource is currently displayed.
+
+In addition, in this view, you can also use the Q key to return to the previous Application view, and press the ENTER key after selecting a resource to enter the Pod view to display the Pod resources which belong to the resource.
+
+#### Pod view
+
+![vela top pod view](../resources/vela-top-pod-view.png)
+
+
+The deployment of Managed Resource results in the deployment of Pod resources, and the Pod view displays the Pod resources further generated by the target Managed Resource. For Pod resources, this view shows the following information about the Pod:
+
+- Name
+- Namespace
+- Cluster
+- Ready
+- Status
+- CPU usage
+- Memory usage
+- CPU usage as a percentage of request
+- CPU usage as a percentage of limit
+- Memory usage as a percentage of request
+- Memory usage as a percentage of limit
+- IP address
+- Node where it is located
+- Age
+
+In this view you can still use the Q key to go back to the previous view.
+
+#### Container View
+
+![vela top container view](../resources/vela-top-container-view.png)
+
+Several containers are running in a pod, the Container View displays the containers' info running in the selected pod. For Container resources, this view shows the following information about the Container:
+- Name
+- Image
+- Ready
+- State
+- CPU usage
+- Memory usage
+- CPU usage as a percentage of request
+- CPU usage as a percentage of limit
+- Memory usage as a percentage of request
+- Memory usage as a percentage of limit
+- Terminate Message
+- Restart Count
+
+
+#### Switch resource level
+
+We have introduced the three views above, and now we will show you how to switch between multiple views to get the resource status information you want.
+
+![vela top resource switch](../resources/vela-top-resource-switch.gif)
+
+
+### Display Resource topology of application
+
+Maybe you want to know how the complete resource topology of an application is. We have provided such a function in VelaUX. In fact, we also provide you with a similar function in vela top. In the Application view, you can select an Application and press the T key, it will display the resource topology of the Application in two forms:
+
+![vela top topology](../resources/vela-top-topology.png)
+
+The application delivery model behind KubeVela is [Open Application Model](https://kubevela.io/zh/docs/platform-engineers/oam/oam-model). Every application deployment plan can be composed by multiple components with attachable operational behaviors (traits), deployment policy and workflow. For the content of this part, please refer to [KubeVela Core Concepts](https://kubevela.io/zh/docs/getting-started/core-concept), so the first topology we show is to show the four components of the application, this topology is called the "App Topology".
+
+In addition, these components will actually eventually be loaded as native resources or CRDs in Kubernetes, and these resources constitute another resource topology. As a user, you must want to know whether the sub-resources of the application are correctly deployed as required, you can get the answer from this topology, which we call the "Resource Topology".
+
+### General functions
+#### Display YAML of resource
+
+![vela top platform overview](../resources/vela-top-yaml.png)
+
+In all kinds of resource views, you can select a resource and press the Y key to view the YAML text corresponding to the resource, and the text will be highlighted.
+
+#### Print log
+
+![vela top log](../resources/vela-top-log.png)
+
+In the Container view, you can use the L key to enter the log view, the log view will print the log of the selected container.
+
+In the Container view, the method of entering the log view is the same as Pod view. What is different is the log are belong to the several containers in the selected pod.
+
+
+#### Help View
+
+In any interface, you can press the ? key to enter the help view, which will briefly introduce you to the related functions and usage of vela top.
+
+

i18n/zh/docusaurus-plugin-content-docs/current/tutorials/vela-top.md

@@ -0,0 +1,172 @@
+---
+title: Vela Top
+---
+
+在这篇指南中，我们想向你介绍 KubeVela 中 vela top 工具的使用方法，该工具是 KubeVela 中提供的基于 UI 的 CLI 工具，通过使用它你可以获取平台的概览信息以及对应用程序的资源状态进行诊断。
+
+目前在该工具已经提供了以下的功能：
+
+- 平台信息概览
+- Application、Managed Resource、Pod 三种层级资源状态信息的展示
+- Appliation 资源拓扑
+- 资源 YAML 文本展示
+
+### 启动工具
+
+在启动工具时我们可以指定首页：Application 视图中所展示 Application 所在的 Namespace。
+
+- 默认 Namespace
+    ```shell
+  vela top
+  ```
+
+- 指定 Namespace
+    ```shell
+  vela top -n <namespace>
+  ```
+
+- 指定全部 Namespace
+  ```shell
+  vela top -A
+  ```
+
+启动工具后，我们会进入到首页：Application 视图，如下所示：
+
+![vela top home page](../resources/vela-top-home-page.png)
+
+该工具整体分为三个部分，如图所示，分别为包含基础信息、平台系统信息、菜单与 Logo 的 Header 部分，资源视图所在的 Body 部分，指示资源层级的面包屑组件所在的 Footer 部分。
+
+### 平台信息概览
+
+![vela top platform overview](../resources/vela-top-overview.png)
+
+这个信息面板组件会展示 KubeVela 系统的性能信息包括 Vela Core 与 Vela CLI 的版本、KubeVela 系统中运行 Application 占全部 Application 的比例、Vela 控制器（Vela Core）与 Vela 网关（Vela Cluster GateWay） 的性能信息（CPU 与 内存当前使用量分别占 request 与 limit 两个设定值的比例）。
+
+这里对于 Vela 控制器与 Vela 网关的性能信息，实际来自于它们所在 Pod 的性能信息。 需要注意的是采集 Pod 的性能信息，需要在集群中安装 [metrics server](https://github.com/kubernetes-sigs/metrics-server)，否则会无法正确获取到 Pod 的性能信息。
+
+
+### 多层级资源状态展示
+
+#### Application 视图
+
+![vela top home page](../resources/vela-top-home-page.png)
+
+这个视图会展示平台中所在 Namespace 下的全部 Application 的状态信息，这些信息包括：
+
+- 名称
+- Namespace
+- Phase
+- Workflow Mode
+- 正常工作流数量 / 工作流数量
+- 健康服务数量 / 服务数量
+- 创建时间
+
+在这个视图可以通过按键 N，重新选择展示哪个 Namespace 的 Application：
+
+![vela top app namespace](../resources/vela-top-app-namespace.png)
+
+还可以通过按键 ↑ 或者 ↓ 选中某一个 Application 后可以通过按键 T，展示该 Application 的资源拓扑。
+
+如果你想要对这个 Application 做资源穿透查看属于他的资源有哪些，可以通过 ENTER 键进入下一资源层级。
+
+
+#### Managed Resource 视图
+
+![vela top managed resource view](../resources/vela-top-managed-resource-view.png)
+
+Managed Resource 视图展示的是 Application 的下一层资源，该资源视图会展示目标 Application 部署从而产生的资源，包括：Deployment、ConfigMap、Service、Helm Release 等，我们称这些资源为应用所管理的资源。
+
+对于 Application 管理的资源，我们会对其展示以下这些信息：
+
+- 名称
+- Namespace
+- Kind
+- API Version
+- 所在集群
+- 所属组件
+- Status
+
+应用所管理的资源十分庞杂，因此在这个视图我们提供了一些筛选视图的方式，你可以根据资源所在 Namespace 与所在集群对资源进行筛选，所对应的按键为 N 与 C，如下所示：
+
+![vela top managed resource filter](../resources/vela-top-managed-resource-filter.gif)
+
+视图顶部的标题部分会指示，当前显示资源所在 Namespace 与所在集群。
+
+此外在该视图你还可以使用 Q 键回退到之前的 Application 视图，以及在选中某个资源后按下 ENTER 键，进入 Pod 视图展示该属于资源的 Pod 资源。
+
+#### Pod 视图
+
+![vela top pod view](../resources/vela-top-pod-view.png)
+
+Managed Resource 的部署会产生 Pod 资源的部署，Pod 视图展示目标 Managed Resource 进一步产生的 Pod 资源。对于 Pod 资源，这个视图会展示 Pod 的如下信息：
+
+- 名称
+- Namespace
+- 是否就绪
+- 状态
+- CPU 用量
+- 内存用量
+- CPU 使用量占 Request 的比例
+- CPU 使用量占 Limit 的比例
+- 内存使用量占 Request 的比例
+- 内存使用量占 Limit 的比例
+- IP 地址
+- 所在节点
+- 存活时常
+
+在该视图你依然可以使用 Q 键回退到之前的视图。
+
+#### 容器视图
+![vela top container view]（../resources/vela top-container view.png）
+在通一个 Pod 中会存在多个容器一同运行的情况，Container 视图显示了在所选 Pod 中运行的容器信息。对于 Container 资源，此视图显示有关 Container 的以下信息：
+- 姓名
+- 镜像
+- 是否就绪
+- 状态
+- CPU 用量
+- 内存用量
+- CPU 使用量占 Request 的比例
+- CPU 使用量占 Limit 的比例
+- 内存使用量占 Request 的比例
+- 内存使用量占 Limit 的比例
+- 终止消息
+- 重新启动次数
+
+在该视图你依然可以使用 Q 键回退到之前的视图。
+
+### 资源层级切换
+
+在上面我们已经对三种视图进行了介绍，下面我们会向你展示如何在多个视图见进行切换，来获取你想要的资源状态信息。
+
+![vela top resource switch](../resources/vela-top-resource-switch.gif)
+
+### Application 资源拓扑
+
+也许你想了解一个应用完整的资源拓扑是怎样的，在 VelaUX 我们已经提供了这样的功能，实际上在 vela top 中我们也为你提供类似的功能，在 Application 视图中，你可以选中某个应用后按下 T 键，我们就会以两种形式展示该 Application 的资源拓扑：
+
+![vela top topology](../resources/vela-top-topology.png)
+
+背后的应用交付模型是 [Open Application Model](https://kubevela.io/zh/docs/platform-engineers/oam/oam-model)，每一个应用部署计划都由四个部分组成，分别是组件、运维能力、部署策略和工作流。关于这部分的内容可以参照 [KubeVela 核心概念](https://kubevela.io/zh/docs/getting-started/core-concept)，因此我们展示的第一个拓扑即是按照这种形式展示一个应用的四个组成部分，这个拓扑被我们称为 App 拓扑
+
+另外这些组成部分实际上最终会被加载为 Kubernetes 中的原生资源或者 CRD，这些资源之间又构成了另外一种资源拓扑结构，作为用户你一定想要了解你的应用是否按照要求正确部署了子资源，从这个拓扑中你就可以获得答案，这个拓扑被我们成为资源拓扑。
+
+### 通用功能
+#### 资源 YAML 展示
+
+![vela top platform overview](../resources/vela-top-yaml.png)
+
+在 Application、Managed Resource、Pod 三种资源视图中，你都可以通过选中某一资源后按下 Y 键的方式，查看该资源对应的 YAML 文本，文本会以高亮形式展示。
+
+#### 日志
+
+![vela top log](../resources/vela-top-log.png)
+
+
+在 Pod 视图中，你可以使用 L 键进入日志视图，日志视图将打印所选容器的日志。
+在 Container 视图中，进入日志视图的方法与在 Pod 视图相同。不同的是，打印的日志是属于所选 Pod 中的多个容器的。
+
+
+#### 帮助界面
+
+在任意一个界面可以通过 ? 键进入帮助界面，该界面会向你简单介绍 vela top 的相关功能与使用方法。
+

sidebars.js

@@ -152,6 +152,7 @@ module.exports = {
             'tutorials/access-application',
             'tutorials/debug-app',
             'tutorials/cloud-shell',
+            'tutorials/vela-top',
           ],
         },
         'end-user/version-control',