add topology graph (#698)

Signed-off-by: 楚岳 <wangyike.wyk@alibaba-inc.com>

docs/reference/topology-rule.md

@@ -0,0 +1,42 @@
+---
+title: Config resource relationship Rule
+---
+
+The topology graph of VelaUX can show the resource tree of an application. As shown in this picture.
+
+![image](../resources/tree.png)
+
+## Mechanism
+
+There have been some built-in rules in system to specify the relationship between two types of resource. System will search all children resources by these rules.
+
+For example, the built-in rules has defined the [Deployment's](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) children resource only can be [ReplicaSet](https://kubernetes.io/docs/concepts/workloads/controllers/replicaset/), so when show the children resource of one deployment Vela will only care about the replicaSet.
+Vela will list all replicaSet in the same namespace with deployment and filter out those ownerReference isn't this deployment.
+
+
+## Add relationship rules
+
+The built-in rules is limited, you can add a customized rule by create a configmap like this:
+
+```yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: clone-set-relation
+  namespace: vela-system
+  labels:
+    "rules.oam.dev/resources": "true"
+data:
+  rules: |-
+    - parentResourceType:
+        group: apps.kruise.io
+        kind: CloneSet
+      childrenResourceType:
+        - apiVersion: v1
+          kind: Pod
+```
+
+First, this configmap should  have the special label `"rules.oam.dev/resources": "true"` the data key `rules` defined a list of relationship rules.
+One relationship rule define what children type a parent can have.
+In this example above, the parent type is `Cloneset` in group `apps.kruise.io`, his children resource type is `v1/Pod`
+All customize rules specified in these configmaps would be merged with built-in rules and take effect in searching children resources.

i18n/zh/docusaurus-plugin-content-docs/current/reference/topology-rule.md

@@ -0,0 +1,38 @@
+---
+title: 配置拓扑树资源关系规则
+---
+
+VelaUX 的资源拓扑图能够展现一个应用所管理的全部资源的拓扑图情况。如下所示：
+
+![image](../resources/tree.png)
+
+## 原理
+
+Vela 系统内置了一些资源映射规则，这些规则规定了一个类型的资源可能包含了哪些子资源，在展示资源拓扑树的时候，系统会根据这些规则搜寻子资源。
+举例来说，系统规定了一个 [Deployment's](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) 类型的资源的资源只可能是 [ReplicaSet](https://kubernetes.io/docs/concepts/workloads/controllers/replicaset/)，所以在展示一个 Deployment 的所有子资源时，Vela 会在这个 Deployment 的 namespace 下列出所有的 ReplicaSet 并过滤掉那些 `ownerReference` 不是指向该 Deployment 的结果。
+
+
+## 添加关系规则
+但系统所内置的规则是有限的，用户也可以通过配置如下的一个 configmap 来为系统增加新的规则。
+
+```yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: clone-set-relation
+  namespace: vela-system
+  labels:
+    "rules.oam.dev/resources": "true"
+data:
+  rules: |-
+    - parentResourceType:
+        group: apps.kruise.io
+        kind: CloneSet
+      childrenResourceType:
+        - apiVersion: v1
+          kind: Pod
+```
+
+ 我们看到，首先这个 configmap 必须包含一个特殊的标签 `"rules.oam.dev/resources": "true"`，在数据字段中 `rules` 定义了一个规则列表，单个规则包含了一个父资源类型和一组子资源类型。
+ 在上面的例子中，我们定义了一个 `apps.kruise.io` 组下的 `CloneSet` 类型资源的子资源是 `v1/Pod`，这样在展示 CloneSet 的子资源时，就会定向去查找 Pod 类型资源。
+ 所有这些被 configmap 所定义的规则，会和内置规则合并，从而在展示资源拓扑图的时候生效。

i18n/zh/docusaurus-plugin-content-docs/version-v1.4/reference/topology-rule.md

@@ -0,0 +1,38 @@
+---
+title: 配置拓扑树资源关系规则
+---
+
+VelaUX 的资源拓扑图能够展现一个应用所管理的全部资源的拓扑图情况。如下所示：
+
+![image](../resources/tree.png)
+
+## 原理
+
+Vela 系统内置了一些资源映射规则，这些规则规定了一个类型的资源可能包含了哪些子资源，在展示资源拓扑树的时候，系统会根据这些规则搜寻子资源。
+举例来说，系统规定了一个 [Deployment's](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) 类型的资源的资源只可能是 [ReplicaSet](https://kubernetes.io/docs/concepts/workloads/controllers/replicaset/)，所以在展示一个 Deployment 的所有子资源时，Vela 会在这个 Deployment 的 namespace 下列出所有的 ReplicaSet 并过滤掉那些 `ownerReference` 不是指向该 Deployment 的结果。
+
+
+## 添加关系规则
+但系统所内置的规则是有限的，用户也可以通过配置如下的一个 configmap 来为系统增加新的规则。
+
+```yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: clone-set-relation
+  namespace: vela-system
+  labels:
+    "rules.oam.dev/resources": "true"
+data:
+  rules: |-
+    - parentResourceType:
+        group: apps.kruise.io
+        kind: CloneSet
+      childrenResourceType:
+        - apiVersion: v1
+          kind: Pod
+```
+
+ 我们看到，首先这个 configmap 必须包含一个特殊的标签 `"rules.oam.dev/resources": "true"`，在数据字段中 `rules` 定义了一个规则列表，单个规则包含了一个父资源类型和一组子资源类型。
+ 在上面的例子中，我们定义了一个 `apps.kruise.io` 组下的 `CloneSet` 类型资源的子资源是 `v1/Pod`，这样在展示 CloneSet 的子资源时，就会定向去查找 Pod 类型资源。
+ 所有这些被 configmap 所定义的规则，会和内置规则合并，从而在展示资源拓扑图的时候生效。

sidebars.js

@@ -229,6 +229,7 @@ module.exports = {
         },
         'end-user/components/cloud-services/cloud-resources-list',
         'reference/ui-schema',
+        'reference/topology-rule',
         'reference/user-improvement-plan',
         {
           label: 'VelaUX API Doc',

versioned_docs/version-v1.4/reference/topology-rule.md

@@ -0,0 +1,42 @@
+---
+title: Config resource relationship Rule
+---
+
+The topology graph of VelaUX can show the resource tree of an application. As shown in this picture.
+
+![image](../resources/tree.png)
+
+## Mechanism
+
+There have been some built-in rules in system to specify the relationship between two types of resource. System will search all children resources by these rules.
+
+For example, the built-in rules has defined the [Deployment's](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) children resource only can be [ReplicaSet](https://kubernetes.io/docs/concepts/workloads/controllers/replicaset/), so when show the children resource of one deployment Vela will only care about the replicaSet.
+Vela will list all replicaSet in the same namespace with deployment and filter out those ownerReference isn't this deployment.
+
+
+## Add relationship rules
+
+The built-in rules is limited, you can add a customized rule by create a configmap like this:
+
+```yaml
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: clone-set-relation
+  namespace: vela-system
+  labels:
+    "rules.oam.dev/resources": "true"
+data:
+  rules: |-
+    - parentResourceType:
+        group: apps.kruise.io
+        kind: CloneSet
+      childrenResourceType:
+        - apiVersion: v1
+          kind: Pod
+```
+
+First, this configmap should  have the special label `"rules.oam.dev/resources": "true"` the data key `rules` defined a list of relationship rules.
+One relationship rule define what children type a parent can have.
+In this example above, the parent type is `Cloneset` in group `apps.kruise.io`, his children resource type is `v1/Pod`
+All customize rules specified in these configmaps would be merged with built-in rules and take effect in searching children resources.

versioned_sidebars/version-v1.4-sidebars.json

@@ -530,6 +530,10 @@
           "type": "doc",
           "id": "version-v1.4/reference/ui-schema"
         },
+        {
+          "type": "doc",
+          "id": "version-v1.4/reference/topology-rule"
+        },
         {
           "type": "doc",
           "id": "version-v1.4/reference/user-improvement-plan"