From 2736db92e056fd48cf614714928f2dd8bd0ef5d3 Mon Sep 17 00:00:00 2001 From: Starry Date: Thu, 28 Mar 2024 23:56:41 +0800 Subject: [PATCH] fix: fix some issues --- package-lock.json | 25 +++++-------------- package.json | 1 - src/main.ts | 2 -- src/utils/mitt.ts | 22 ---------------- src/views/dashboard/controls/Trace.vue | 9 ++----- .../dashboard/related/trace/TraceList.vue | 1 + .../trace/components/D3Graph/Index.vue | 14 ++++++++--- 7 files changed, 19 insertions(+), 55 deletions(-) delete mode 100644 src/utils/mitt.ts diff --git a/package-lock.json b/package-lock.json index a388a03a..40152bd4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "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", @@ -9751,9 +9750,9 @@ } }, "node_modules/mitt": { - "version": "3.0.1", - "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz", - "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" }, "node_modules/mixin-deep": { "version": "1.3.2", @@ -14820,11 +14819,6 @@ "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", @@ -22292,9 +22286,9 @@ } }, "mitt": { - "version": "3.0.1", - "resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz", - "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==" + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz", + "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==" }, "mixin-deep": { "version": "1.3.2", @@ -25859,13 +25853,6 @@ "@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": { diff --git a/package.json b/package.json index c6b35cbb..beca5ae2 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "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", diff --git a/src/main.ts b/src/main.ts index d4dbbf7a..d051bb83 100644 --- a/src/main.ts +++ b/src/main.ts @@ -22,7 +22,6 @@ 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(); @@ -30,7 +29,6 @@ const appStore = useAppStoreWithOut(); app.use(components); app.use(i18n); app.use(store); -app.config.globalProperties.$mybus = mitt(); mountApp(); async function mountApp() { diff --git a/src/utils/mitt.ts b/src/utils/mitt.ts deleted file mode 100644 index 433de4a3..00000000 --- a/src/utils/mitt.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * 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; diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue index 24c1fc27..2b5e886c 100644 --- a/src/views/dashboard/controls/Trace.vue +++ b/src/views/dashboard/controls/Trace.vue @@ -47,7 +47,6 @@ limitations under the License. --> 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({ @@ -64,7 +63,7 @@ limitations under the License. --> const dashboardStore = useDashboardStore(); const isLeft = ref(true); const showIcon = ref(false); - const currentWidth = ref(291); + const currentWidth = ref(280); const isDrag = ref(false); function removeWidget() { @@ -75,11 +74,8 @@ limitations under the License. --> } // The width of the trace-list is always determined by the direction of the arrow. function triggerArrow() { - currentWidth.value = isLeft.value ? 0 : 291; + currentWidth.value = isLeft.value ? 0 : 280; isLeft.value = !isLeft.value; - setTimeout(() => { - emitter.emit("trace_resize"); - }); } const mousedown = () => { isDrag.value = true; @@ -92,7 +88,6 @@ limitations under the License. --> 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; diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue index e052a94a..5fa82e77 100644 --- a/src/views/dashboard/related/trace/TraceList.vue +++ b/src/views/dashboard/related/trace/TraceList.vue @@ -188,6 +188,7 @@ limitations under the License. --> } .list { + min-width: 120px; width: 100%; } diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index dcae810f..51df1cbd 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -30,9 +30,8 @@ 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*/ + /* global defineProps, Nullable, defineExpose, Recordable */ const props = defineProps({ data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, @@ -48,6 +47,7 @@ limitations under the License. --> const tree = ref>(null); const traceGraph = ref>(null); const debounceFunc = debounce(draw, 500); + let observer: MutationObserver; defineExpose({ tree, @@ -61,9 +61,14 @@ limitations under the License. --> } draw(); loading.value = false; - emitter.on("trace_resize", () => { - draw(); + + // monitor segment list width changes. + observer = new MutationObserver(() => { + d3.selectAll(".d3-tip").remove(); + debounceFunc(); }); + observer.observe(document.querySelector(".trace-list")!, { attributes: true, attributeFilter: ["style"] }); + window.addEventListener("resize", debounceFunc); }); @@ -290,6 +295,7 @@ limitations under the License. --> onBeforeUnmount(() => { d3.selectAll(".d3-tip").remove(); window.removeEventListener("resize", debounceFunc); + observer.disconnect(); }); watch( () => props.data,