diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue index dfa7a9fd..21891ed0 100644 --- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue +++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue @@ -48,12 +48,13 @@ limitations under the License. --> import { useAppStoreWithOut } from "@/store/modules/app"; import { debounce } from "@/utils/debounce"; import { mutationObserver } from "@/utils/mutation"; + import { TraceGraphType } from "../constant"; /* global defineProps, Nullable, defineExpose, Recordable */ const props = defineProps({ data: { type: Array as PropType, default: () => [] }, traceId: { type: String, default: "" }, - type: { type: String, default: "List" }, + type: { type: String, default: TraceGraphType.LIST }, }); const appStore = useAppStoreWithOut(); const loading = ref(false); @@ -79,7 +80,9 @@ limitations under the License. --> loading.value = false; return; } - draw(); + if (props.type !== TraceGraphType.TABLE) { + draw(); + } loading.value = false; // monitor segment list width changes. @@ -96,7 +99,7 @@ limitations under the License. --> return; } d3.selectAll(".d3-tip").remove(); - if (props.type === "List") { + if (props.type === TraceGraphType.LIST) { tree.value = new ListGraph(traceGraph.value, handleSelectSpan); tree.value.init( { label: "TRACE_ROOT", children: segmentId.value }, @@ -104,7 +107,8 @@ limitations under the License. --> fixSpansSize.value, ); tree.value.draw(); - } else { + } + if (props.type === TraceGraphType.TREE) { tree.value = new TreeGraph(traceGraph.value, handleSelectSpan); tree.value.init( { label: `${props.traceId}`, children: segmentId.value }, diff --git a/src/views/dashboard/related/trace/components/List.vue b/src/views/dashboard/related/trace/components/List.vue index a444074b..b252a914 100644 --- a/src/views/dashboard/related/trace/components/List.vue +++ b/src/views/dashboard/related/trace/components/List.vue @@ -22,7 +22,7 @@ limitations under the License. -->
- +
@@ -35,6 +35,7 @@ limitations under the License. --> import type { Span } from "@/types/trace"; import Graph from "./D3Graph/Index.vue"; import { Themes } from "@/constants/data"; + import { TraceGraphType } from "./constant"; /* global defineProps, Recordable*/ const props = defineProps({ diff --git a/src/views/dashboard/related/trace/components/Tree.vue b/src/views/dashboard/related/trace/components/Tree.vue index c79065fd..c4f79723 100644 --- a/src/views/dashboard/related/trace/components/Tree.vue +++ b/src/views/dashboard/related/trace/components/Tree.vue @@ -35,7 +35,7 @@ limitations under the License. -->
- +
@@ -46,6 +46,7 @@ limitations under the License. --> import type { Span } from "@/types/trace"; import { useI18n } from "vue-i18n"; import { ref, computed } from "vue"; + import { TraceGraphType } from "./constant"; /* global defineProps */ const props = defineProps({ diff --git a/src/views/dashboard/related/trace/components/constant.ts b/src/views/dashboard/related/trace/components/constant.ts new file mode 100644 index 00000000..aad6e60f --- /dev/null +++ b/src/views/dashboard/related/trace/components/constant.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. + */ + +export enum TraceGraphType { + TREE = "Tree", + LIST = "List", + TABLE = "Table", +}