github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix some issues

Browse Source
This commit is contained in:
Starry 2024-03-28 23:56:41 +08:00
parent e059f2f53a
commit 2736db92e0
7 changed files with 19 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
package-lock.json generated
View File

@ -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": {

1
package.json
View File

@ -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",

2
src/main.ts
View File

@ -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() {

22
src/utils/mitt.ts
View File

@ -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;

9
src/views/dashboard/controls/Trace.vue
View File

@ -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<boolean>(true);
const showIcon = ref<boolean>(false);
const currentWidth = ref<number>(291);
const currentWidth = ref<number>(280);
const isDrag = ref<boolean>(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;

1
src/views/dashboard/related/trace/TraceList.vue
View File

@ -188,6 +188,7 @@ limitations under the License. -->
}
.list {
min-width: 120px;
width: 100%;
}

14
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -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<Span[]>, default: () => [] },
traceId: { type: String, default: "" },
@ -48,6 +47,7 @@ limitations under the License. -->
const tree = ref<Nullable<any>>(null);
const traceGraph = ref<Nullable<HTMLDivElement>>(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,