From 15d9612b3680bc740cf2119fb008e8b77d5b01f8 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 8 Aug 2022 16:29:59 +0800
Subject: [PATCH] update timeline

---
 .../related/network-profiling/Content.vue     |  7 +++++--
 .../components/Schedules.vue                  | 20 +++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/views/dashboard/related/network-profiling/Content.vue b/src/views/dashboard/related/network-profiling/Content.vue
index f58611c9..e173d36c 100644
--- a/src/views/dashboard/related/network-profiling/Content.vue
+++ b/src/views/dashboard/related/network-profiling/Content.vue
@@ -16,13 +16,16 @@ limitations under the License. -->
   <div class="flex-h content">
     <Tasks />
     <div class="vis-graph ml-5">
-      <div class="schedules">EBPFS chedules</div>
+      <div class="schedules">
+        <Schedules />
+      </div>
       <div class="item">EBPF Stack</div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
 import Tasks from "./components/Tasks.vue";
+import Schedules from "./components/Schedules.vue";
 </script>
 <style lang="scss" scoped>
 .content {
@@ -45,7 +48,7 @@ import Tasks from "./components/Tasks.vue";
 }
 
 .schedules {
-  height: 90px;
+  min-height: 90px;
   border-bottom: 1px solid #ccc;
   padding-right: 10px;
 }
diff --git a/src/views/dashboard/related/network-profiling/components/Schedules.vue b/src/views/dashboard/related/network-profiling/components/Schedules.vue
index f36b5fb3..0d30d735 100644
--- a/src/views/dashboard/related/network-profiling/components/Schedules.vue
+++ b/src/views/dashboard/related/network-profiling/components/Schedules.vue
@@ -13,10 +13,10 @@ 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="timeline" class="time-ranges"></div>
   <el-button type="primary" size="small">
     {{ t("start") }}
   </el-button>
+  <div ref="timeRange" class="time-ranges"></div>
 </template>
 <script lang="ts" setup>
 import { ref, onMounted, watch } from "vue";
@@ -29,12 +29,13 @@ import { useThrottleFn } from "@vueuse/core";
 /*global Nullable */
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
-const timeline = ref<Nullable<HTMLDivElement>>(null);
+const timeRange = 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()) || {
+  oldVal.value = (timeRange.value &&
+    timeRange.value.getBoundingClientRect()) || {
     width: 0,
     height: 0,
   };
@@ -42,13 +43,16 @@ onMounted(() => {
 });
 
 function visTimeline() {
-  if (!timeline.value) {
+  if (!timeRange.value) {
     return;
   }
   if (visGraph.value) {
     visGraph.value.destroy();
   }
-  const h = timeline.value.getBoundingClientRect().height;
+  if (!ebpfStore.selectedNetworkTask.taskId) {
+    return;
+  }
+  const h = timeRange.value.getBoundingClientRect().height;
   const task = [
     {
       id: 1,
@@ -72,7 +76,7 @@ function visTimeline() {
     groupHeightMode: "fitItems",
     autoResize: false,
   };
-  visGraph.value = new Timeline(timeline.value, items, options);
+  visGraph.value = new Timeline(timeRange.value, items, options);
 }
 function resize() {
   const observer = new ResizeObserver((entries) => {
@@ -87,8 +91,8 @@ function resize() {
     visTimeline();
     oldVal.value = { width: cr.width, height: cr.height };
   });
-  if (timeline.value) {
-    observer.observe(timeline.value);
+  if (timeRange.value) {
+    observer.observe(timeRange.value);
   }
 }
 watch(