feat: add process topology

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']

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 {

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) || "";