feat: Implement tags auto-complete for Trace and Log (#85)

src/views/dashboard/related/log/Header.vue

@@ -50,9 +50,14 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-  </div>
-  <div class="row tips">
-    <b>{{ t("conditionNotice") }}</b>
+    <el-button
+      class="search-btn"
+      size="small"
+      type="primary"
+      @click="searchLogs"
+    >
+      {{ t("search") }}
+    </el-button>
   </div>
   <div class="flex-h row">
     <div class="mr-5 traceId" v-show="!isBrowser">
@@ -61,6 +66,9 @@ limitations under the License. -->
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
+  <div class="row tips">
+    <b>{{ t("conditionNotice") }}</b>
+  </div>
   <div class="flex-h" v-show="!isBrowser">
     <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
@@ -109,14 +117,6 @@ limitations under the License. -->
         </span>
       </el-tooltip>
     </div>
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchLogs"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -326,6 +326,7 @@ watch(
 
 .row {
   margin-bottom: 5px;
+  position: relative;
 }
 
 .inputs-max {
@@ -337,8 +338,11 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
+  position: absolute;
+  top: 0;
+  right: 10px;
   cursor: pointer;
+  width: 120px;
 }
 
 .tips {

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

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="flex-h row">
-    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+    <div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value">
       <span class="grey mr-5">{{ t("service") }}:</span>
       <Selector
         size="small"
@@ -24,7 +24,7 @@ limitations under the License. -->
         @change="changeField('service', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value">
       <span class="grey mr-5">{{ t("instance") }}:</span>
       <Selector
         size="small"
@@ -34,7 +34,7 @@ limitations under the License. -->
         @change="changeField('instance', $event)"
       />
     </div>
-    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+    <div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value">
       <span class="grey mr-5">{{ t("endpoint") }}:</span>
       <Selector
         size="small"
@@ -46,7 +46,7 @@ limitations under the License. -->
         @query="searchEndpoints"
       />
     </div>
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("status") }}:</span>
       <Selector
         size="small"
@@ -56,27 +56,29 @@ limitations under the License. -->
         @change="changeField('status', $event)"
       />
     </div>
-    <div class="mr-5">
+    <el-button
+      size="small"
+      type="primary"
+      @click="searchTraces"
+      class="search-btn"
+    >
+      {{ t("search") }}
+    </el-button>
+  </div>
+  <div class="flex-h row">
+    <div class="mr-10">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input size="small" v-model="traceId" class="traceId" />
     </div>
-  </div>
-  <div class="flex-h">
-    <div class="mr-5">
+    <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
       <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
       <span class="grey mr-5">-</span>
       <el-input size="small" class="inputs" v-model="maxTraceDuration" />
     </div>
+  </div>
+  <div class="flex-h">
     <ConditionTags :type="'TRACE'" @update="updateTags" />
-    <el-button
-      class="search-btn"
-      size="small"
-      type="primary"
-      @click="searchTraces"
-    >
-      {{ t("search") }}
-    </el-button>
   </div>
 </template>
 <script lang="ts" setup>
@@ -109,10 +111,6 @@ const state = reactive<any>({
   service: { value: "", label: "" },
 });
 
-// const dateTime = computed(() => [
-//   appStore.durationRow.start,
-//   appStore.durationRow.end,
-// ]);
 init();
 async function init() {
   if (dashboardStore.entity === EntityType[1].value) {
@@ -241,6 +239,7 @@ watch(
 
 .row {
   margin-bottom: 5px;
+  position: relative;
 }
 
 .traceId {
@@ -248,7 +247,10 @@ watch(
 }
 
 .search-btn {
-  margin-left: 20px;
   cursor: pointer;
+  width: 120px;
+  position: absolute;
+  top: 0;
+  right: 10px;
 }
 </style>

src/views/dashboard/related/trace/components/Table/TableItem.vue

@@ -200,9 +200,9 @@ export default defineComponent({
       dom.style.background = "rgba(0, 0, 0, 0.1)";
     }
     function selectSpan(event: any) {
-      const dom = event.path.find((d: any) =>
-        d.className.includes("trace-item")
-      );
+      const dom = event
+        .composedPath()
+        .find((d: any) => d.className.includes("trace-item"));
 
       emit("select", props.data);
       if (props.headerType === "profile") {
@@ -212,9 +212,9 @@ export default defineComponent({
       viewSpanDetail(dom);
     }
     function viewSpan(event: any) {
-      const dom = event.path.find((d: any) =>
-        d.className.includes("trace-item")
-      );
+      const dom = event
+        .composedPath()
+        .find((d: any) => d.className.includes("trace-item"));
       emit("select", props.data);
       viewSpanDetail(dom);
     }