feat: watch selectors

src/locales/lang/en.ts

@@ -323,7 +323,7 @@ const msg = {
   addTraceID: "Please input a trace ID",
   addKeywordsOfContent: "Please input a keyword of content",
   addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
-  noticeTag: "Please press enter after inputting a tag(key=value).",
+  noticeTag: "Please press Enter after inputting a tag(key=value).",
   conditionNotice:
     "Notice: Please press enter after inputting a tag, key of content, exclude key of content.",
   cacheModalTitle: "Clear cache reminder",

src/views/dashboard/data.ts

@@ -212,3 +212,4 @@ export const QueryOrders = [
   { label: "startTime", value: "BY_START_TIME" },
   { label: "duration", value: "BY_DURATION" },
 ];
+export const TraceEntitys = ["All", "Service", "ServiceInstance", "Endpoint"];

src/views/dashboard/panel/Tool.vue

@@ -84,8 +84,10 @@ limitations under the License. -->
           size="sm"
           :iconName="t.name"
           v-if="
-            t.id !== 'topology' ||
-            (t.id === 'topology' && hasTopology.includes(dashboardStore.entity))
+            !['topology', 'trace'].includes(t.id) ||
+            (t.id === 'topology' &&
+              hasTopology.includes(dashboardStore.entity)) ||
+            (t.id === 'trace' && TraceEntitys.includes(dashboardStore.entity))
           "
         />
       </span>
@@ -98,7 +100,7 @@ import { reactive, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { EntityType, ToolIcons, hasTopology } from "../data";
+import { EntityType, ToolIcons, hasTopology, TraceEntitys } from "../data";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { ElMessage } from "element-plus";
 import { Option } from "@/types/app";

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

@@ -48,6 +48,12 @@ limitations under the License. -->
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input v-model="traceId" class="traceId" />
     </div>
+    <div class="mr-5">
+      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
+      <el-input class="inputs mr-5" v-model="minTraceDuration" />
+      <span class="grey mr-5">-</span>
+      <el-input class="inputs" v-model="maxTraceDuration" />
+    </div>
   </div>
   <div class="flex-h">
     <!-- <div class="mr-5">
@@ -59,12 +65,6 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
     </div> -->
-    <div class="mr-5">
-      <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input class="inputs mr-5" v-model="minTraceDuration" />
-      <span class="grey mr-5">-</span>
-      <el-input class="inputs" v-model="maxTraceDuration" />
-    </div>
     <ConditionTags :type="'TRACE'" @update="updateTags" />
     <el-button
       class="search-btn"
@@ -77,7 +77,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { Option } from "@/types/app";
 import { Status } from "../../data";
@@ -109,9 +109,14 @@ const state = reactive<any>({
 //   appStore.durationRow.start,
 //   appStore.durationRow.end,
 // ]);
-getInstances();
-getEndpoints();
-searchTraces();
+init();
+function init() {
+  if (dashboardStore.entity === EntityType[0].value) {
+    getEndpoints();
+    getInstances();
+  }
+  searchTraces();
+}
 
 async function getEndpoints() {
   const resp = await traceStore.getEndpoints();
@@ -131,7 +136,9 @@ async function getInstances() {
 }
 function searchTraces() {
   traceStore.setTraceCondition({
-    serviceId: selectorStore.currentService.id || 0,
+    serviceId: selectorStore.currentService
+      ? selectorStore.currentService.id
+      : "",
     traceId: traceId.value || undefined,
     endpointId: state.endpoint.id || undefined,
     serviceInstanceId: state.instance.id || undefined,
@@ -158,6 +165,15 @@ function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
   tagsList.value = data.tagsList;
   tagsMap.value = data.tagsMap;
 }
+watch(
+  () => selectorStore.currentService,
+  () => {
+    if (dashboardStore.entity !== EntityType[0].value) {
+      return;
+    }
+    init();
+  }
+);
 </script>
 <style lang="scss" scoped>
 .inputs {

src/views/dashboard/related/trace/utils/d3-trace-tree.ts

@@ -185,7 +185,7 @@ export default class TraceMap {
           that.timeTip.hide(d, _node[0].children[1]);
         }
       })
-      .on("click", function (d: any) {
+      .on("click", function (event: any, d: any) {
         that.handleSelectSpan(d);
       });