Feat: add the application graph page (#520)

* Feat: add the application graph page Signed-off-by: barnettZQG <[email protected]> * Fix: some style error Signed-off-by: barnettZQG <[email protected]>
kubevela · May 26, 2022 · 45a1f09 · 45a1f09
1 parent 1b49c1a
commit 45a1f09
Show file tree

Hide file tree

Showing 74 changed files with 15,448 additions and 11,880 deletions.
diff --git a/package.json b/package.json
@@ -43,15 +43,15 @@
   },
   "dependencies": {
     "@alifd/meet-react": "^2.0.0",
-    "@antv/g6": "4.3.11",
     "@b-design/ui": "^1.0.63",
     "ansi-to-react": "^6.1.6",
     "axios": "0.24.0",
+    "classnames": "^2.3.1",
+    "dagre": "^0.8.5",
     "diagram-maker": "^1.3.0",
     "dva": "2.4.1",
     "dva-core": "2.0.4",
     "dva-loading": "3.0.22",
-    "echarts": "^5.2.2",
     "i18next": "^19.8.2",
     "js-yaml": "^4.1.0",
     "lodash": "4.17.21",
@@ -86,6 +86,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
     "@testing-library/react": "^12.1.2",
     "@types/chai": "^4.2.11",
+    "dagre-compound": "0.0.11",
     "@types/js-yaml": "^4.0.1",
     "@types/lodash": "^4.14.176",
     "@types/mocha": "^8.2.1",
@@ -122,7 +123,6 @@
     "less": "3.9.0",
     "less-loader": "4.1.0",
     "mini-css-extract-plugin": "0.11.3",
-    "ts-mocha": "^9.0.2",
     "optimize-css-assets-webpack-plugin": "6.0.1",
     "pnp-webpack-plugin": "1.6.4",
     "postcss": "^8.3.3",
@@ -136,6 +136,7 @@
     "sass-loader": "^10.0.5",
     "style-loader": "1.3.0",
     "ts-loader": "8.1.0",
+    "ts-mocha": "^9.0.2",
     "typescript": "4.4.4",
     "url-loader": "4.1.1",
     "webpack": "4.44.2",

diff --git a/src/api/observation.ts b/src/api/observation.ts
@@ -142,3 +142,44 @@ export function listApplicationServiceAppliedResources(params: {
     },
   });
 }
+
+export function listApplicationResourceTree(params: {
+  appNs: string;
+  appName: string;
+  componentName?: string;
+  cluster?: string;
+  clusterNs?: string;
+}) {
+  let velaQLParams = `appNs=${params.appNs}, appName=${params.appName}`;
+  if (params.cluster) {
+    velaQLParams = `cluster=${params.cluster}, clusterNs=${params.clusterNs}, ` + velaQLParams;
+  }
+  if (params.componentName) {
+    velaQLParams = `name=${params.componentName}, ` + velaQLParams;
+  }
+  const urlParams = `application-resource-tree-view{${velaQLParams}}.status`;
+  return get('/api/v1/query', {
+    params: {
+      velaql: urlParams,
+    },
+  });
+}
+
+export function detailResource(params: {
+  name: string;
+  namespace: string;
+  kind: string;
+  apiVersion: string;
+  cluster?: string;
+}) {
+  let velaQLParams = `name=${params.name}, namespace=${params.namespace}, kind=${params.kind}, apiVersion=${params.apiVersion}`;
+  if (params.cluster) {
+    velaQLParams = `cluster=${params.cluster}, ` + velaQLParams;
+  }
+  const urlParams = `application-resource-detail-view{${velaQLParams}}.status`;
+  return get('/api/v1/query', {
+    params: {
+      velaql: urlParams,
+    },
+  });
+}
diff --git a/src/assets/KubeVela-01.svg b/src/assets/KubeVela-01.svg
diff --git a/src/assets/resources/c-role.svg b/src/assets/resources/c-role.svg
diff --git a/src/assets/resources/cm.svg b/src/assets/resources/cm.svg