From 7313a11ee34675f9403e9e84a690a8a18b1161e8 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 29 May 2023 16:22:23 +0800
Subject: [PATCH] feat: add process topology

---
 src/types/components.d.ts                     |  1 -
 .../related/continuous-profiling/Content.vue  |  5 ++--
 .../components/GraphPanel.vue                 | 30 +++++++++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 05ec63bd..fa07aadd 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -22,7 +22,6 @@ declare module '@vue/runtime-core' {
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
diff --git a/src/views/dashboard/related/continuous-profiling/Content.vue b/src/views/dashboard/related/continuous-profiling/Content.vue
index a2f1dded..3f51d5ac 100644
--- a/src/views/dashboard/related/continuous-profiling/Content.vue
+++ b/src/views/dashboard/related/continuous-profiling/Content.vue
@@ -18,15 +18,15 @@ limitations under the License. -->
       <PolicyList />
       <TaskList />
     </div>
-    <GraphPanel />
+    <GraphPanel :config="config" />
   </div>
 </template>
 <script lang="ts" setup>
   import type { PropType } from "vue";
-  import { useI18n } from "vue-i18n";
   import PolicyList from "./components/PolicyList.vue";
   import TaskList from "./components/TaskList.vue";
   import GraphPanel from "./components/GraphPanel.vue";
+
   /*global defineProps */
   defineProps({
     config: {
@@ -34,7 +34,6 @@ limitations under the License. -->
       default: () => ({ graph: {} }),
     },
   });
-  const { t } = useI18n();
 </script>
 <style lang="scss" scoped>
   .content {
diff --git a/src/views/dashboard/related/continuous-profiling/components/GraphPanel.vue b/src/views/dashboard/related/continuous-profiling/components/GraphPanel.vue
index ea3ffcc9..b3535772 100644
--- a/src/views/dashboard/related/continuous-profiling/components/GraphPanel.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/GraphPanel.vue
@@ -34,20 +34,42 @@ limitations under the License. -->
         placeholder="Select a process"
         @change="changeProcess"
       />
-      <el-button type="primary" size="small">
+      <el-button type="primary" size="small" @click="analyzeTask">
         {{ t("analysis") }}
       </el-button>
     </div>
-    <div class="graph"> graph </div>
+    <div
+      class="vis-graph ml-5"
+      v-loading="networkProfilingStore.loadNodes"
+      v-if="continousProfilingStore.selectedContinousTask.type === TargetTypes[2].value"
+    >
+      <process-topology v-if="networkProfilingStore.nodes.length" :config="config" />
+      <div class="text" v-else>
+        {{ t("noData") }}
+      </div>
+    </div>
+    <div v-else class="vis-graph ml-5"> ebpf </div>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref, watch } from "vue";
+  import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import { useSelectorStore } from "@/store/modules/selectors";
   import { useContinousProfilingStore } from "@/store/modules/continous-profiling";
+  import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
+  import ProcessTopology from "@/views/dashboard/related/network-profiling/components/ProcessTopology.vue";
+  import { TargetTypes } from "../data";
 
+  /*global defineProps */
+  defineProps({
+    config: {
+      type: Object as PropType<any>,
+      default: () => ({ graph: {} }),
+    },
+  });
   const continousProfilingStore = useContinousProfilingStore();
+  const networkProfilingStore = useNetworkProfilingStore();
   const selectorStore = useSelectorStore();
   const { t } = useI18n();
   const processId = ref<string>("");
@@ -61,6 +83,10 @@ limitations under the License. -->
     processId.value = opt[0].id;
   }
 
+  function analyzeTask() {
+    networkProfilingStore.setSelectedNetworkTask(continousProfilingStore.selectedContinousTask);
+  }
+
   async function getSelectors() {
     const serviceId = (selectorStore.currentService && selectorStore.currentService.id) || "";