get process topology

src/views/dashboard/related/network-profiling/Content.vue

@@ -19,13 +19,16 @@ limitations under the License. -->
       <div class="schedules">
         <Schedules />
       </div>
-      <div class="item">EBPF Stack</div>
+      <div class="item">
+        <Topology></Topology>
+      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import Tasks from "./components/Tasks.vue";
 import Schedules from "./components/Schedules.vue";
+import Topology from "./components/Topology.vue";
 </script>
 <style lang="scss" scoped>
 .content {

src/views/dashboard/related/network-profiling/components/Topology.vue

@@ -16,13 +16,28 @@ limitations under the License. -->
   <div ref="topology" class="topology"></div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
-/*global Nullable */
-const { t } = useI18n();
+const selectorStore = useSelectorStore();
 const ebpfStore = useEbpfStore();
+const appStore = useAppStoreWithOut();
+
+onMounted(() => {
+  getTopology();
+});
+
+function getTopology() {
+  const serviceInstanceId =
+    (selectorStore.currentPod && selectorStore.currentPod.id) || "";
+  ebpfStore.getProcessTopology({
+    serviceInstanceId,
+    duration: appStore.durationTime,
+  });
+}
 </script>
 <style lang="scss" scoped>
 .topology {