refactor

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<Span[]>, default: () => [] },
     traceId: { type: String, default: "" },
-    type: { type: String, default: "List" },
+    type: { type: String, default: TraceGraphType.LIST },
   });
   const appStore = useAppStoreWithOut();
   const loading = ref<boolean>(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 },

src/views/dashboard/related/trace/components/List.vue

@@ -22,7 +22,7 @@ limitations under the License. -->
       </el-button>
     </div>
     <div class="list">
-      <Graph :data="data" :traceId="traceId" type="List" />
+      <Graph :data="data" :traceId="traceId" :type="TraceGraphType.LIST" />
     </div>
   </div>
 </template>
@@ -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({

src/views/dashboard/related/trace/components/Tree.vue

@@ -35,7 +35,7 @@ limitations under the License. -->
       </a>
     </div>
     <div class="trace-tree">
-      <Graph ref="charts" :data="data" :traceId="traceId" type="Tree" />
+      <Graph ref="charts" :data="data" :traceId="traceId" :type="TraceGraphType.TREE" />
     </div>
   </div>
 </template>
@@ -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({

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",
+}