From d3a42eefbc2549c4df89bc99636a660f908d950e Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 22 Aug 2022 11:35:19 +0800
Subject: [PATCH] update graph

---
 src/store/modules/network-profiling.ts        | 42 +++++++++++++++++++
 .../components/ProcessTopology.vue            |  8 ++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/network-profiling.ts b/src/store/modules/network-profiling.ts
index 9cd7782d..061f0a32 100644
--- a/src/store/modules/network-profiling.ts
+++ b/src/store/modules/network-profiling.ts
@@ -72,6 +72,48 @@ export const networkProfilingStore = defineStore({
       this.activeMetricIndex = index;
     },
     setTopology(data: { nodes: ProcessNode[]; calls: Call[] }) {
+      data.nodes = [
+        ...data.nodes,
+        {
+          id: "8fb699b42bddbc2800f48c620db3b14388214f057822aa16a2eef7e95f111111",
+          isReal: true,
+          name: "python111",
+          serviceId: "YWdlbnRsZXNzOjpyZWNvbW1lbmRhdGl111==.1",
+          serviceInstanceId:
+            "YWdlbnRsZXNzOjpyZWNvbW1lbmRhdGlvbg==.1_cmVjb21tZW5kYXRpb24tZGVwbG95bWVudC01NzQ3Yzk3NmQ5LWx1111",
+          serviceInstanceName: "recommendation-deployment-5747c976d9-l123",
+          serviceName: "agentless::recommendation123",
+        },
+        {
+          id: "8fb699b42bddbc2800f48c620db3b14388214f057822aa16a2eef7e95f222222",
+          isReal: true,
+          name: "python222",
+          serviceId: "YWdlbnRsZXNzOjpyZWNvbW1lbmRhdGl111==.1",
+          serviceInstanceId:
+            "YWdlbnRsZXNzOjpyZWNvbW1lbmRhdGlvbg==.1_cmVjb21tZW5kYXRpb24tZGVwbG95bWVudC01NzQ3Yzk3NmQ5LWx11114",
+          serviceInstanceName: "recommendation-deployment-5747c976d9-l1234",
+          serviceName: "agentless::recommendation1234",
+        },
+      ];
+      data.calls = [
+        ...data.calls,
+        {
+          detectPoints: ["SERVER"],
+          id: "689f0e6178a740ef33a83349b79866dae5ab1fcbb2077da06e44ee511a7769e7-8fb699b42bddbc2800f48c620db3b14388214f057822aa16a2eef7e95f222222",
+          source:
+            "689f0e6178a740ef33a83349b79866dae5ab1fcbb2077da06e44ee511a7769e7",
+          target:
+            "8fb699b42bddbc2800f48c620db3b14388214f057822aa16a2eef7e95f222222",
+        },
+        {
+          detectPoints: ["SERVER"],
+          id: "689f0e6178a740ef33a83349b79866dae5ab1fcbb2077da06e44ee511a7769e7-8fb699b42bddbc2800f48c620db3b14388214f057822aa16a2eef7e95f111111",
+          source:
+            "689f0e6178a740ef33a83349b79866dae5ab1fcbb2077da06e44ee511a7769e7",
+          target:
+            "8fb699b42bddbc2800f48c620db3b14388214f057822aa16a2eef7e95f111111",
+        },
+      ];
       const obj = {} as any;
       let calls = (data.calls || []).reduce((prev: Call[], next: Call) => {
         if (!obj[next.id]) {
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index 0db3081b..f080abe9 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -107,10 +107,10 @@ function drawGraph() {
   const outNodes = networkProfilingStore.nodes.filter(
     (d: ProcessNode) => d.serviceInstanceId !== selectorStore.currentPod.id
   );
-  if (!outNodes.length) {
-    diff.value[0] = (dom.width - radius * 2) / 2 + radius;
+  if (outNodes.length) {
+    diff.value[0] = (dom.width - radius * 3) / 2 + radius;
   } else {
-    diff.value[0] = (dom.width - radius * 4) / 2 + radius;
+    diff.value[0] = (dom.width - radius * 2) / 2 + radius;
   }
   graph.value = svg.value
     .append("g")
@@ -273,7 +273,7 @@ function createLayout() {
     const pos = getArcPoint(angle, r); // angle is [-120, 120]
     outNodes[v].x = pos[0];
     outNodes[v].y = pos[1];
-    angle = angle + 10;
+    angle = angle + 20;
     if (angle * (v + 1) > 120) {
       angle = -10;
     }