feat: add Support for dragging in the trace panel

package-lock.json

@@ -15,6 +15,7 @@
         "echarts": "^5.2.2",
         "element-plus": "^2.2.5",
         "lodash": "^4.17.21",
+        "mitt": "^3.0.1",
         "monaco-editor": "^0.34.1",
         "pinia": "^2.0.28",
         "vis-timeline": "^7.5.1",
@@ -9750,9 +9751,9 @@
       }
     },
     "node_modules/mitt": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
@@ -14819,6 +14820,11 @@
         "mitt": "^2.1.0"
       }
     },
+    "node_modules/vue-grid-layout/node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "node_modules/vue-i18n": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
@@ -22286,9 +22292,9 @@
       }
     },
     "mitt": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
-      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
     "mixin-deep": {
       "version": "1.3.2",
@@ -25853,6 +25859,13 @@
         "@interactjs/modifiers": "^1.10.2",
         "element-resize-detector": "^1.2.1",
         "mitt": "^2.1.0"
+      },
+      "dependencies": {
+        "mitt": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/mitt/-/mitt-2.1.0.tgz",
+          "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+        }
       }
     },
     "vue-i18n": {

package.json

@@ -25,6 +25,7 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.2.5",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.1",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
     "vis-timeline": "^7.5.1",

src/main.ts

@@ -22,6 +22,7 @@ import i18n from "./locales";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import "./styles/index.ts";
 import "virtual:svg-icons-register";
+import mitt from "mitt";
 
 const app = createApp(App);
 const appStore = useAppStoreWithOut();
@@ -29,6 +30,7 @@ const appStore = useAppStoreWithOut();
 app.use(components);
 app.use(i18n);
 app.use(store);
+app.config.globalProperties.$mybus = mitt();
 mountApp();
 
 async function mountApp() {

src/utils/mitt.ts

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ */
+
+import mitt from "mitt";
+
+const emitter = mitt();
+
+export default emitter;

src/views/dashboard/controls/Trace.vue

@@ -28,19 +28,26 @@ limitations under the License. -->
       <Filter :needQuery="needQuery" :data="data" @get="getService" />
     </div>
     <div class="trace flex-h">
-      <TraceList />
+      <TraceList class="trace-list" :style="`width: ${currentWidth}px;`" />
+      <div @mouseover="showIcon = true" @mouseout="showIcon = false">
+        <div class="trace-line" />
+        <span class="trace-icon" v-show="showIcon" @click="triggerArrow">
+          <Icon class="trace-arrow" :icon-name="isLeft ? 'chevron-left' : 'chevron-right'" size="lg" />
+        </span>
+      </div>
       <TraceDetail :serviceId="serviceId" />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { provide, ref } from "vue";
+  import { provide, ref, onMounted, onUnmounted } from "vue";
   import type { PropType } from "vue";
   import Filter from "../related/trace/Filter.vue";
   import TraceList from "../related/trace/TraceList.vue";
   import TraceDetail from "../related/trace/Detail.vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
+  import emitter from "@/utils/mitt";
 
   /* global defineProps */
   const props = defineProps({
@@ -55,12 +62,51 @@ limitations under the License. -->
   const serviceId = ref<string>("");
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
+  const isLeft = ref<boolean>(true);
+  const showIcon = ref<boolean>(false);
+  const currentWidth = ref<number>(291);
+  const isDrag = ref<boolean>(false);
+
   function removeWidget() {
     dashboardStore.removeControls(props.data);
   }
   function getService(id: string) {
     serviceId.value = id;
   }
+  // The width of the trace-list is always determined by the direction of the arrow.
+  function triggerArrow() {
+    currentWidth.value = isLeft.value ? 0 : 291;
+    isLeft.value = !isLeft.value;
+    setTimeout(() => {
+      emitter.emit("trace_resize");
+    });
+  }
+  const mousedown = () => {
+    isDrag.value = true;
+  };
+  const mousemove = (event: MouseEvent) => {
+    if (!isDrag.value) {
+      return;
+    }
+    const diffX = event.clientX;
+    let leftWidth = document.querySelector(".trace-list")!.getBoundingClientRect();
+    currentWidth.value = diffX - leftWidth.left;
+    isLeft.value = currentWidth.value >= 120;
+    emitter.emit("trace_resize");
+  };
+  const mouseup = () => {
+    isDrag.value = false;
+  };
+  onMounted(() => {
+    document.addEventListener("mousedown", mousedown);
+    document.addEventListener("mousemove", mousemove);
+    document.addEventListener("mouseup", mouseup);
+  });
+  onUnmounted(() => {
+    document.removeEventListener("mousedown", mousedown);
+    document.removeEventListener("mousemove", mousemove);
+    document.removeEventListener("mouseup", mouseup);
+  });
 </script>
 <style lang="scss" scoped>
   .trace-wrapper {
@@ -68,7 +114,6 @@ limitations under the License. -->
     height: 100%;
     font-size: $font-size-smaller;
     position: relative;
-    overflow: auto;
   }
 
   .delete {
@@ -103,4 +148,40 @@ limitations under the License. -->
     overflow: auto;
     min-width: 1000px;
   }
+
+  .trace-list {
+    max-width: 480px;
+  }
+
+  .trace-line {
+    position: relative;
+    width: 2px;
+    height: 900px;
+    background-color: #e8e8e8;
+    cursor: ew-resize;
+
+    &:hover {
+      color: $active-color;
+      background-color: $active-background;
+    }
+  }
+
+  .trace-icon {
+    position: absolute;
+    cursor: pointer;
+    top: calc(50% - 15px);
+    text-align: center;
+    width: 24px;
+    height: 24px;
+    transform: translateX(-11px);
+    line-height: 24px;
+    border-radius: 50%;
+    background-color: $layout-background;
+    box-shadow: 0 3px 5px rgb(45 60 80 / 20%);
+  }
+
+  .trace-arrow {
+    padding-bottom: 1px;
+    color: $active-color;
+  }
 </style>

src/views/dashboard/related/trace/Detail.vue

@@ -166,8 +166,8 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .trace-detail {
+    flex: 1;
     height: 100%;
-    width: 100%;
     overflow: hidden;
   }
 

src/views/dashboard/related/trace/TraceList.vue

@@ -13,7 +13,7 @@ limitations under the License. -->
 <template>
   <div class="trace-t flex-v">
     <div class="trace-t-tool flex-h">
-      <div class="title">
+      <div class="title ell">
         <span class="mr-5">Trace Segments</span>
         <el-popover
           :width="310"
@@ -144,6 +144,7 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .trace-t-tool {
+    overflow: hidden;
     background-color: rgb(196 200 225 / 20%);
     justify-content: space-between;
     border-bottom: 1px solid #c1c5ca41;
@@ -187,7 +188,7 @@ limitations under the License. -->
   }
 
   .list {
-    width: 280px;
+    width: 100%;
   }
 
   .trace-tr {

src/views/dashboard/related/trace/components/D3Graph/Index.vue

@@ -30,6 +30,7 @@ limitations under the License. -->
   import SpanDetail from "./SpanDetail.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { debounce } from "@/utils/debounce";
+  import emitter from "@/utils/mitt";
 
   /* global defineProps, Nullable, defineExpose,Recordable*/
   const props = defineProps({
@@ -60,6 +61,9 @@ limitations under the License. -->
     }
     draw();
     loading.value = false;
+    emitter.on("trace_resize", () => {
+      draw();
+    });
     window.addEventListener("resize", debounceFunc);
   });
 

src/views/dashboard/related/trace/components/Table/TableContainer.vue

@@ -88,6 +88,7 @@ limitations under the License. -->
       return;
     }
     drag.onmousedown = (event: MouseEvent) => {
+      event.stopPropagation();
       const diffX = event.clientX;
       const copy = method.value;
       document.onmousemove = (documentEvent) => {

src/views/dashboard/related/trace/components/Table/table.scss

@@ -48,29 +48,29 @@
 }
 
 .max-time {
-  width: 150px;
+  width: 13%;
 }
 
 .method {
-  width: 300px;
+  width: 28%;
 }
 
 .avg-time {
-  width: 150px;
+  width: 13%;
 }
 
 .min-time {
-  width: 150px;
+  width: 13%;
 }
 
 .count {
-  width: 120px;
+  width: 12%;
 }
 
 .sum-time {
-  width: 150px;
+  width: 13%;
 }
 
 .type {
-  width: 60px;
+  width: 8%;
 }