resize

src/assets/icons/add_fill.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" fill="#707070" p-id="9287"></path></svg>

src/store/modules/dashboard.ts

@@ -110,9 +110,10 @@ export const dashboardStore = defineStore({
               : 3,
         };
       }
-      if (
-        ["Trace", "Profile", "Log", "DemandLog", "Ebpf", "Event"].includes(type)
-      ) {
+      if (type === "Event") {
+        newItem.h = 24;
+      }
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
         newItem.h = 36;
       }
       if (type === "Text") {
@@ -167,9 +168,10 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (
-        ["Trace", "Profile", "Log", "DemandLog", "Ebpf", "Event"].includes(type)
-      ) {
+      if (type === "Event") {
+        newItem.h = 24;
+      }
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf"].includes(type)) {
         newItem.h = 32;
       }
       if (type === "Text") {

src/views/dashboard/controls/Tab.vue

@@ -37,13 +37,6 @@ limitations under the License. -->
           v-if="dashboardStore.editMode && canEditTabName"
         />
       </span>
-      <span class="tab-icons" v-if="dashboardStore.editMode">
-        <el-tooltip content="Add tab items" placement="bottom">
-          <i @click="addTabItem">
-            <Icon size="middle" iconName="add" class="tab-icon" />
-          </i>
-        </el-tooltip>
-      </span>
       <span class="tab-icons">
         <el-tooltip content="Copy Link" placement="bottom">
           <i @click="copyLink">
@@ -51,6 +44,13 @@ limitations under the License. -->
           </i>
         </el-tooltip>
       </span>
+      <span class="tab-icons" v-if="dashboardStore.editMode">
+        <el-tooltip content="Add tab items" placement="bottom">
+          <i @click="addTabItem">
+            <Icon size="middle" iconName="add_fill" class="tab-icon" />
+          </i>
+        </el-tooltip>
+      </span>
     </div>
     <div class="operations" v-if="dashboardStore.editMode">
       <el-dropdown placement="bottom" trigger="click" :width="200">

src/views/dashboard/related/event/Content.vue

@@ -16,11 +16,12 @@ limitations under the License. -->
   <div ref="timeline" class="events"></div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 import dayjs from "dayjs";
 import { useEventStore } from "@/store/modules/event";
 import { DataSet, Timeline } from "vis-timeline/standalone";
 import "vis-timeline/styles/vis-timeline-graph2d.css";
+
 const eventStore = useEventStore();
 /*global Nullable */
 const timeline = ref<Nullable<HTMLDivElement>>(null);
@@ -29,7 +30,9 @@ const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   new Date(dayjs(date).format(pattern));
 const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
-
+onMounted(() => {
+  resize();
+});
 function visTimeline() {
   if (!timeline.value) {
     return;
@@ -52,6 +55,7 @@ function visTimeline() {
     height: h,
     width: "100%",
     locale: "en",
+    autoResize: false,
     tooltip: {
       template(item) {
         const data = item.data || {};
@@ -69,8 +73,15 @@ function visTimeline() {
   };
   visGraph.value = new Timeline(timeline.value, items, options);
 }
+function resize() {
+  const observer = new ResizeObserver(() => {
+    visTimeline();
+  });
+
+  observer.observe(timeline.value);
+}
 watch(
-  () => eventStore.events,
+  () => [eventStore.events],
   () => {
     visTimeline();
   }