feat: add browser logs

src/views/dashboard/related/components/LogTable/LogBrowser.vue

@@ -38,6 +38,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { ref } from "vue";
 import dayjs from "dayjs";
 import { BrowserLogConstants } from "./data";
 
@@ -47,6 +48,7 @@ const props = defineProps({
 });
 const columns = BrowserLogConstants;
 const emit = defineEmits(["select"]);
+const logItem = ref<any>(null);
 
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
@@ -57,9 +59,8 @@ function showSelectSpan() {
   for (const item of items) {
     item.style.background = "#fff";
   }
-  const logItem: any = this.$refs.logItem;
 
-  logItem.style.background = "rgba(0, 0, 0, 0.1)";
+  logItem.value.style.background = "rgba(0, 0, 0, 0.1)";
   emit("select", props.data);
 }
 </script>

src/views/dashboard/related/components/LogTable/LogDetail.vue

@@ -47,7 +47,6 @@ import { ServiceLogDetail } from "./data";
 const props = defineProps({
   currentLog: { type: Object as PropType<any>, default: () => ({}) },
 });
-console.log(props.currentLog);
 const { t } = useI18n();
 const columns = ServiceLogDetail;
 const logTags = computed(() => {

src/views/dashboard/related/components/LogTable/LogService.vue

@@ -26,7 +26,7 @@ limitations under the License. -->
         v-else-if="item.label === 'traceId' && !noLink"
         :to="{ name: 'trace', query: { traceid: data[item.label] } }"
       >
-        <span>{{ data[item.label] }}</span>
+        <span :class="noLink ? '' : 'blue'">{{ data[item.label] }}</span>
       </router-link>
       <span v-else>{{ data[item.label] }}</span>
     </div>
@@ -63,7 +63,6 @@ function showSelectSpan() {
 
   .traceId {
     width: 390px;
-    color: #448dfe;
     cursor: pointer;
 
     span {
@@ -71,6 +70,10 @@ function showSelectSpan() {
       width: 100%;
       line-height: 30px;
     }
+
+    .blue {
+      color: #448dfe;
+    }
   }
 
   .content,

src/views/dashboard/related/components/LogTable/data.ts

@@ -96,19 +96,15 @@ export const BrowserLogConstants = [
   {
     label: "message",
     value: "message",
-    drag: true,
+    // drag: true,
     method: 350,
   },
   {
     label: "stack",
     value: "stack",
-    drag: true,
+    // drag: true,
     method: 350,
   },
-  // {
-  //   label: 'pagePath',
-  //   value: 'Page Path',
-  // },
   {
     label: "category",
     value: "category",

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

@@ -25,7 +25,9 @@ limitations under the License. -->
       />
     </div>
     <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
-      <span class="grey mr-5">{{ t("instance") }}:</span>
+      <span class="grey mr-5">
+        {{ isBrowser ? t("version") : t("instance") }}:
+      </span>
       <Selector
         size="small"
         :value="state.instance.value"
@@ -35,7 +37,9 @@ limitations under the License. -->
       />
     </div>
     <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
-      <span class="grey mr-5">{{ t("endpoint") }}:</span>
+      <span class="grey mr-5"
+        >{{ isBrowser ? t("page") : t("endpoint") }}:</span
+      >
       <Selector
         size="small"
         :value="state.endpoint.value"
@@ -49,13 +53,13 @@ limitations under the License. -->
     <b>{{ t("conditionNotice") }}</b>
   </div>
   <div class="flex-h row">
-    <div class="mr-5 traceId">
+    <div class="mr-5 traceId" v-show="!isBrowser">
       <span class="grey mr-5">{{ t("traceID") }}:</span>
       <el-input v-model="traceId" class="inputs-max" />
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
-  <div class="flex-h">
+  <div class="flex-h" v-show="!isBrowser">
     <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
       <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
       <span class="log-tags">
@@ -93,7 +97,7 @@ limitations under the License. -->
         class="inputs-max"
         :placeholder="t('addExcludingKeywordsOfContent')"
         v-model="excludingContentStr"
-        @keyup="addLabels('excludingKeywordsOfContent')"
+        @change="addLabels('excludingKeywordsOfContent')"
       />
       <el-tooltip :content="t('keywordsOfContentLogTips')">
         <span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
@@ -135,6 +139,7 @@ const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const contentStr = ref<string>("");
 const excludingContentStr = ref<string>("");
+const isBrowser = ref<boolean>(dashboardStore.layerId === "BROWSER");
 const state = reactive<any>({
   status: { label: "All", value: "ALL" },
   instance: { value: "0", label: "All" },
@@ -284,7 +289,7 @@ watch(
     if (dashboardStore.entity !== EntityType[0].value) {
       return;
     }
-    init();
+    searchLogs();
   }
 );
 </script>

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

@@ -67,3 +67,10 @@ async function queryLogs() {
   loading.value = false;
 }
 </script>
+<style lang="scss" scoped>
+.log-tips {
+  width: 100%;
+  text-align: center;
+  margin: 50px 0;
+}
+</style>