add time line

src/graphql/fragments/topology.ts

@@ -75,3 +75,27 @@ export const InstanceTopology = {
   }
 `,
 };
+export const ProcessTopology = {
+  variable: "$serviceInstanceId: ID!, $duration: Duration!",
+  query: `
+  topology: getProcessTopology(serviceInstanceId: $serviceInstanceId,
+    duration: $duration) {
+    nodes {
+      id
+      name
+      type
+      isReal
+      serviceName
+      serviceId
+      serviceInstanceId
+      serviceInstanceName
+    }
+    calls {
+      id
+      source
+      detectPoints
+      target
+    }
+  }
+`,
+};

src/graphql/query/topology.ts

@@ -18,8 +18,10 @@ import {
   InstanceTopology,
   EndpointTopology,
   ServicesTopology,
+  ProcessTopology,
 } from "../fragments/topology";
 
 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
 export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;
 export const getServicesTopology = `query queryData(${ServicesTopology.variable}) {${ServicesTopology.query}}`;
+export const getProcessTopology = `query queryData(${ProcessTopology.variable}) {${ProcessTopology.query}}`;

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

@@ -13,23 +13,96 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div class="filters">
-    <el-button type="primary" size="small">
-      {{ t("start") }}
-    </el-button>
-  </div>
+  <div ref="timeline" class="time-ranges"></div>
+  <el-button type="primary" size="small">
+    {{ t("start") }}
+  </el-button>
 </template>
 <script lang="ts" setup>
+import { ref, onMounted, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useEbpfStore } from "@/store/modules/ebpf";
+import { DataSet, Timeline } from "vis-timeline/standalone";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
+import { useThrottleFn } from "@vueuse/core";
 
+/*global Nullable */
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
+const timeline = ref<Nullable<HTMLDivElement>>(null);
+const visGraph = ref<Nullable<any>>(null);
+const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
+
+onMounted(() => {
+  oldVal.value = (timeline.value && timeline.value.getBoundingClientRect()) || {
+    width: 0,
+    height: 0,
+  };
+  useThrottleFn(resize, 500)();
+});
+
+function visTimeline() {
+  if (!timeline.value) {
+    return;
+  }
+  if (visGraph.value) {
+    visGraph.value.destroy();
+  }
+  const h = timeline.value.getBoundingClientRect().height;
+  const task = [
+    {
+      id: 1,
+      content: ebpfStore.selectedNetworkTask.name,
+      start: new Date(Number(ebpfStore.selectedNetworkTask.taskStartTime)),
+      end: new Date(
+        Number(
+          ebpfStore.selectedNetworkTask.taskStartTime +
+            ebpfStore.selectedNetworkTask.fixedTriggerDuration
+        )
+      ),
+      data: ebpfStore.selectedNetworkTask,
+      className: ebpfStore.selectedNetworkTask.type,
+    },
+  ];
+  const items = new DataSet(task);
+  const options: any = {
+    height: h,
+    width: "100%",
+    locale: "en",
+    groupHeightMode: "fitItems",
+    autoResize: false,
+  };
+  visGraph.value = new Timeline(timeline.value, items, options);
+}
+function resize() {
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    const cr = entry.contentRect;
+    if (
+      Math.abs(cr.width - oldVal.value.width) < 3 &&
+      Math.abs(cr.height - oldVal.value.height) < 3
+    ) {
+      return;
+    }
+    visTimeline();
+    oldVal.value = { width: cr.width, height: cr.height };
+  });
+  if (timeline.value) {
+    observer.observe(timeline.value);
+  }
+}
+watch(
+  () => ebpfStore.selectedNetworkTask,
+  () => {
+    visTimeline();
+  }
+);
 </script>
 <style lang="scss" scoped>
-.filters {
-  margin: 5px 0;
-  width: 100%;
-  min-width: 560px;
+.time-ranges {
+  width: calc(100% - 5px);
+  margin: 0 5px 5px 0;
+  height: 100%;
+  min-height: 150px;
 }
 </style>

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

@@ -0,0 +1,34 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div ref="topology" class="topology"></div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useEbpfStore } from "@/store/modules/ebpf";
+
+/*global Nullable */
+const { t } = useI18n();
+const ebpfStore = useEbpfStore();
+</script>
+<style lang="scss" scoped>
+.topology {
+  width: calc(100% - 5px);
+  margin: 0 5px 5px 0;
+  height: 100%;
+  min-height: 150px;
+}
+</style>