feat: Add Log widget in dashboards (#22)

src/views/dashboard/related/components/ConditionTags.vue

@@ -0,0 +1,143 @@
+<!-- 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. -->
+<template>
+  <div class="flex-h" :class="{ light: theme === 'light' }">
+    <div class="mr-5">
+      <span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
+      <span
+        class="trace-tags"
+        :style="type === 'LOG' ? `min-width: 122px;` : ''"
+      >
+        <span class="selected" v-for="(item, index) in tagsList" :key="index">
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeTags(index)">×</span>
+        </span>
+      </span>
+      <el-input
+        v-model="tags"
+        class="trace-new-tag"
+        @change="addLabels"
+        :placeholder="t('addTags')"
+      />
+      <span class="tags-tip">
+        <a
+          target="blank"
+          href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
+        >
+          {{ t("tagsLink") }}
+        </a>
+        <el-tooltip :content="t('traceTagsTip')">
+          <span>
+            <Icon class="icon-help mr-5" iconName="help" size="middle" />
+          </span>
+        </el-tooltip>
+        <b v-if="type === 'TRACE'">{{ t("noticeTag") }}</b>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+
+/*global defineEmits, defineProps */
+const emit = defineEmits(["update"]);
+defineProps({
+  type: { type: String, default: "TRACE" },
+});
+const { t } = useI18n();
+const theme = ref<string>("dark");
+const type = ref<string>("");
+const tags = ref<string>("");
+const tagsList = ref<string[]>([]);
+
+function removeTags(index: number) {
+  tagsList.value.splice(index, 1);
+  updateTags();
+  localStorage.setItem("traceTags", JSON.stringify(this.tagsList));
+}
+function addLabels() {
+  if (!tags.value) {
+    return;
+  }
+  tagsList.value.push(tags.value);
+  tags.value = "";
+  updateTags();
+}
+function updateTags() {
+  const tagsMap = tagsList.value.map((item: string) => {
+    const key = item.substring(0, item.indexOf("="));
+    return {
+      key,
+      value: item.substring(item.indexOf("=") + 1, item.length),
+    };
+  });
+  emit("update", { tagsMap, tagsList: tagsList.value });
+}
+</script>
+<style lang="scss" scoped>
+.trace-tags {
+  padding: 1px 5px 0 0;
+  border-radius: 3px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 3px 2px 0 2px;
+}
+
+.trace-new-tag {
+  border-style: unset;
+  outline: 0;
+  padding: 2px 5px;
+  border-radius: 3px;
+  width: 250px;
+  margin-right: 3px;
+}
+
+.remove-icon {
+  display: inline-block;
+  margin-left: 3px;
+  cursor: pointer;
+}
+
+.tags-tip {
+  color: #a7aebb;
+}
+
+.light {
+  color: #3d444f;
+
+  input {
+    border: 1px solid #ccc;
+  }
+
+  .selected {
+    color: #3d444f;
+  }
+}
+
+.icon-help {
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,136 @@
+<!-- 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. -->
+
+<template>
+  <div class="log">
+    <div class="log-header">
+      <template v-for="(item, index) in columns">
+        <div
+          class="method"
+          :style="`width: ${item.method}px`"
+          v-if="item.drag"
+          :key="index"
+        >
+          <span class="r cp" ref="dragger" :data-index="index">
+            <Icon iconName="settings_ethernet" size="sm" />
+          </span>
+          {{ t(item.value) }}
+        </div>
+        <div v-else :class="item.label" :key="`col${index}`">
+          {{ t(item.value) }}
+        </div>
+      </template>
+    </div>
+    <div v-if="type === 'browser'">
+      <LogBrowser
+        v-for="(item, index) in tableData"
+        :data="item"
+        :key="'browser' + index"
+        @select="setCurrentLog"
+      />
+    </div>
+    <div v-else>
+      <LogService
+        v-for="(item, index) in tableData"
+        :data="item"
+        :key="'service' + index"
+        :noLink="noLink"
+        @select="setCurrentLog"
+      />
+    </div>
+    <slot></slot>
+    <el-dialog
+      v-model="showDetail"
+      :destroy-on-close="true"
+      fullscreen
+      @closed="showDetail = false"
+      :title="t('logDetail')"
+    >
+      <LogDetail :currentLog="currentLog" />
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { ServiceLogConstants, BrowserLogConstants } from "./data";
+import LogBrowser from "./LogBrowser.vue";
+import LogService from "./LogService.vue";
+import LogDetail from "./LogDetail.vue";
+
+/*global defineProps, Nullable */
+const props = defineProps({
+  type: { type: String, default: "service" },
+  tableData: { type: Array, default: () => [] },
+  noLink: { type: Boolean, default: true },
+});
+const { t } = useI18n();
+const currentLog = ref<any>({});
+const showDetail = ref<boolean>(false);
+const dragger = ref<Nullable<HTMLSpanElement>>(null);
+// const method = ref<number>(380);
+const columns: any[] =
+  props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
+
+function setCurrentLog(log: any) {
+  showDetail.value = true;
+  currentLog.value = log;
+}
+</script>
+<style lang="scss" scoped>
+.log {
+  font-size: 12px;
+  height: 100%;
+  overflow: auto;
+}
+
+.log-header {
+  /*display: flex;*/
+  white-space: nowrap;
+  user-select: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /*background-color: #f3f4f9;*/
+  .traceId {
+    width: 390px;
+  }
+
+  .content,
+  .tags {
+    width: 300px;
+  }
+
+  .serviceInstanceName,
+  .serviceName {
+    width: 200px;
+  }
+}
+
+.log-header div {
+  /*min-width: 140px;*/
+  width: 140px;
+  /*flex-grow: 1;*/
+  display: inline-block;
+  padding: 0 4px;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  line-height: 30px;
+  background-color: #f3f4f9;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,110 @@
+<!-- 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. -->
+
+<template>
+  <div @click="showSelectSpan" :class="['log-item', 'clearfix']" ref="logItem">
+    <div
+      v-for="(item, index) in columns"
+      :key="index"
+      :class="[
+        'method',
+        ['message', 'stack'].includes(item.label) ? 'autoHeight' : '',
+      ]"
+      :style="{
+        lineHeight: 1.3,
+        width: `${item.drag ? item.method : ''}px`,
+      }"
+    >
+      <span v-if="item.label === 'time'">{{ dateFormat(data.time) }}</span>
+      <span v-else-if="item.label === 'errorUrl'">{{ data.pagePath }}</span>
+      <el-tooltip v-else :content="data[item.label] || '-'">
+        <span>
+          {{ data[item.label] || "-" }}
+        </span>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import dayjs from "dayjs";
+import { BrowserLogConstants } from "./data";
+
+/*global defineProps, defineEmits, NodeListOf  */
+const props = defineProps({
+  data: { type: Array as any, default: () => [] },
+});
+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);
+
+function showSelectSpan() {
+  const items: NodeListOf<any> = document.querySelectorAll(".log-item");
+
+  for (const item of items) {
+    item.style.background = "#fff";
+  }
+
+  logItem.value.style.background = "rgba(0, 0, 0, 0.1)";
+  emit("select", props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-item {
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+}
+
+.log-item.selected {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item:not(.level0):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item:hover {
+  background: rgba(0, 0, 0, 0.04) !important;
+}
+
+.log-item > div {
+  width: 140px;
+  padding: 0 5px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item .text {
+  width: 100% !important;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item > div.method {
+  padding: 7px 5px;
+  line-height: 30px;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<!-- 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. -->
+<template>
+  <div class="log-detail">
+    <div
+      class="mb-10 clear rk-flex"
+      v-for="(item, index) in columns"
+      :key="index"
+    >
+      <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
+      <span v-if="item.label === 'timestamp'" class="g-sm-8 mb-10">
+        {{ dateFormat(currentLog[item.label]) }}
+      </span>
+      <textarea
+        class="content mb-10"
+        :readonly="true"
+        v-else-if="item.label === 'content'"
+        :value="currentLog[item.label]"
+      />
+      <span v-else-if="item.label === 'tags'" class="g-sm-8 mb-10">
+        <div v-for="(d, index) in logTags" :key="index">{{ d }}</div>
+      </span>
+      <span v-else class="g-sm-8 mb-10">{{ currentLog[item.label] }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import dayjs from "dayjs";
+import { ServiceLogDetail } from "./data";
+
+/*global defineProps */
+const props = defineProps({
+  currentLog: { type: Object as PropType<any>, default: () => ({}) },
+});
+const { t } = useI18n();
+const columns = ServiceLogDetail;
+const logTags = computed(() => {
+  if (!props.currentLog.tags) {
+    return [];
+  }
+  return props.currentLog.tags.map((d: { key: string; value: string }) => {
+    return `${d.key} = ${d.value}`;
+  });
+});
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+</script>
+<style lang="scss" scoped>
+.content {
+  max-width: 700px;
+  min-width: 500px;
+  min-height: 500px;
+  border: none;
+  outline: none;
+  color: #3d444f;
+  overflow: auto;
+}
+</style>

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

@@ -0,0 +1,118 @@
+<!-- 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. -->
+
+<template>
+  <div @click="showSelectSpan" class="log-item">
+    <div v-for="(item, index) in columns" :key="index" :class="item.label">
+      <span v-if="item.label === 'timestamp'">
+        {{ dateFormat(data.timestamp) }}
+      </span>
+      <span v-else-if="item.label === 'tags'">
+        {{ tags }}
+      </span>
+      <router-link
+        v-else-if="item.label === 'traceId' && !noLink"
+        :to="{ name: 'trace', query: { traceid: data[item.label] } }"
+      >
+        <span :class="noLink ? '' : 'blue'">{{ data[item.label] }}</span>
+      </router-link>
+      <span v-else>{{ data[item.label] }}</span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import dayjs from "dayjs";
+import { ServiceLogConstants } from "./data";
+/*global defineProps, defineEmits */
+const props = defineProps({
+  data: { type: Object as any, default: () => ({}) },
+  noLink: { type: Boolean, default: true },
+});
+const emit = defineEmits(["select"]);
+const columns = ServiceLogConstants;
+const tags = computed(() => {
+  if (!props.data.tags) {
+    return "";
+  }
+  return String(props.data.tags.map((d: any) => `${d.key}=${d.value}`));
+});
+const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
+  dayjs(date).format(pattern);
+function showSelectSpan() {
+  emit("select", props.data);
+}
+</script>
+<style lang="scss" scoped>
+.log-item {
+  white-space: nowrap;
+  position: relative;
+  cursor: pointer;
+
+  .traceId {
+    width: 390px;
+    cursor: pointer;
+
+    span {
+      display: inline-block;
+      width: 100%;
+      line-height: 30px;
+    }
+
+    .blue {
+      color: #448dfe;
+    }
+  }
+
+  .content,
+  .tags {
+    width: 300px;
+  }
+
+  .serviceInstanceName,
+  .serviceName {
+    width: 200px;
+  }
+}
+
+.log-item:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.log-item > div {
+  width: 140px;
+  padding: 0 5px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-right: 1px dotted silver;
+  overflow: hidden;
+  line-height: 30px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item .text {
+  width: 100%;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-item > div.method {
+  height: 100%;
+  padding: 3px 8px;
+}
+</style>

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

@@ -0,0 +1,116 @@
+/**
+ * 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 const ServiceLogConstants = [
+  {
+    label: "serviceName",
+    value: "service",
+  },
+  {
+    label: "serviceInstanceName",
+    value: "instance",
+  },
+  {
+    label: "timestamp",
+    value: "time",
+  },
+  {
+    label: "contentType",
+    value: "contentType",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "content",
+    value: "content",
+  },
+  {
+    label: "traceId",
+    value: "traceID",
+  },
+];
+export const ServiceLogDetail = [
+  {
+    label: "serviceName",
+    value: "service",
+  },
+  {
+    label: "serviceInstanceName",
+    value: "instance",
+  },
+  {
+    label: "timestamp",
+    value: "time",
+  },
+  {
+    label: "contentType",
+    value: "contentType",
+  },
+  {
+    label: "traceId",
+    value: "traceID",
+  },
+  {
+    label: "tags",
+    value: "tags",
+  },
+  {
+    label: "content",
+    value: "content",
+  },
+];
+// The order of columns should be time, service, error, stack, version, url, catalog, and grade.
+export const BrowserLogConstants = [
+  {
+    label: "service",
+    value: "service",
+  },
+  {
+    label: "serviceVersion",
+    value: "serviceVersion",
+  },
+  {
+    label: "errorUrl",
+    value: "errorPage",
+  },
+  {
+    label: "time",
+    value: "time",
+  },
+  {
+    label: "message",
+    value: "message",
+    // drag: true,
+    method: 350,
+  },
+  {
+    label: "stack",
+    value: "stack",
+    // drag: true,
+    method: 350,
+  },
+  {
+    label: "category",
+    value: "category",
+  },
+  {
+    label: "grade",
+    value: "grade",
+  },
+];

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

@@ -0,0 +1,362 @@
+<!-- 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. -->
+<template>
+  <div class="flex-h row">
+    <div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
+      <span class="grey mr-5">{{ t("service") }}:</span>
+      <Selector
+        size="small"
+        :value="state.service.value"
+        :options="logStore.services"
+        placeholder="Select a service"
+        @change="changeField('service', $event)"
+      />
+    </div>
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
+      <span class="grey mr-5">
+        {{ isBrowser ? t("version") : t("instance") }}:
+      </span>
+      <Selector
+        size="small"
+        :value="state.instance.value"
+        :options="logStore.instances"
+        placeholder="Select a instance"
+        @change="changeField('instance', $event)"
+      />
+    </div>
+    <div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
+      <span class="grey mr-5"
+        >{{ isBrowser ? t("page") : t("endpoint") }}:</span
+      >
+      <Selector
+        size="small"
+        :value="state.endpoint.value"
+        :options="logStore.endpoints"
+        placeholder="Select a endpoint"
+        @change="changeField('endpoint', $event)"
+      />
+    </div>
+  </div>
+  <div class="row tips">
+    <b>{{ t("conditionNotice") }}</b>
+  </div>
+  <div class="flex-h row">
+    <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" v-show="!isBrowser">
+    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+      <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in keywordsOfContent"
+          :key="`keywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeContent(index)">×</span>
+        </span>
+      </span>
+      <el-input
+        class="inputs-max"
+        :placeholder="t('addKeywordsOfContent')"
+        v-model="contentStr"
+        @change="addLabels('keywordsOfContent')"
+      />
+    </div>
+    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+      <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
+      <span class="log-tags">
+        <span
+          class="selected"
+          v-for="(item, index) in excludingKeywordsOfContent"
+          :key="`excludingKeywordsOfContent${index}`"
+        >
+          <span>{{ item }}</span>
+          <span class="remove-icon" @click="removeExcludeContent(index)">
+            ×
+          </span>
+        </span>
+      </span>
+      <el-input
+        class="inputs-max"
+        :placeholder="t('addExcludingKeywordsOfContent')"
+        v-model="excludingContentStr"
+        @change="addLabels('excludingKeywordsOfContent')"
+      />
+      <el-tooltip :content="t('keywordsOfContentLogTips')">
+        <span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
+          <Icon icon="help" class="mr-5" />
+        </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>
+import { ref, reactive, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { Option } from "@/types/app";
+import { useLogStore } from "@/store/modules/log";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import ConditionTags from "@/views/dashboard/related/components/ConditionTags.vue";
+import { ElMessage } from "element-plus";
+import { EntityType } from "../../data";
+
+const { t } = useI18n();
+const appStore = useAppStoreWithOut();
+const selectorStore = useSelectorStore();
+const dashboardStore = useDashboardStore();
+const logStore = useLogStore();
+const traceId = ref<string>("");
+const keywordsOfContent = ref<string[]>([]);
+const excludingKeywordsOfContent = ref<string[]>([]);
+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>({
+  instance: { value: "0", label: "All" },
+  endpoint: { value: "0", label: "All" },
+  service: { value: "0", label: "All" },
+});
+
+init();
+async function init() {
+  const resp = await logStore.queryLogsByKeywords();
+
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = { value: "0", label: "All" };
+  state.endpoint = { value: "0", label: "All" };
+  state.service = { value: "0", label: "All" };
+  searchLogs();
+  fetchSelectors();
+}
+
+function fetchSelectors() {
+  if (dashboardStore.entity === EntityType[1].value) {
+    getServices();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[2].value) {
+    getInstances();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    getEndpoints();
+    return;
+  }
+  if (dashboardStore.entity === EntityType[0].value) {
+    getInstances();
+    getEndpoints();
+  }
+}
+
+async function getServices() {
+  const resp = await logStore.getServices(dashboardStore.layerId);
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.service = logStore.services[0];
+}
+
+async function getEndpoints() {
+  const resp = await logStore.getEndpoints();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.endpoint = logStore.endpoints[0];
+}
+async function getInstances() {
+  const resp = await logStore.getInstances();
+  if (resp.errors) {
+    ElMessage.error(resp.errors);
+    return;
+  }
+  state.instance = logStore.instances[0];
+}
+function searchLogs() {
+  let endpoint = "",
+    instance = "";
+  if (dashboardStore.entity === EntityType[2].value) {
+    endpoint = selectorStore.currentPod.id;
+  }
+  if (dashboardStore.entity === EntityType[3].value) {
+    instance = selectorStore.currentPod.id;
+  }
+  logStore.setLogCondition({
+    serviceId: selectorStore.currentService
+      ? selectorStore.currentService.id
+      : state.service.id,
+    endpointId: endpoint || state.endpoint.id || undefined,
+    serviceInstanceId: instance || state.instance.id || undefined,
+    queryDuration: appStore.durationTime,
+    keywordsOfContent: keywordsOfContent.value,
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+    tags: tagsMap.value.length ? tagsMap.value : undefined,
+    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
+  });
+  queryLogs();
+}
+async function queryLogs() {
+  const res = await logStore.getLogs();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+function changeField(type: string, opt: any) {
+  state[type] = opt[0];
+  if (type === "service") {
+    getEndpoints();
+    getInstances();
+  }
+}
+function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
+  tagsList.value = data.tagsList;
+  tagsMap.value = data.tagsMap;
+}
+function removeContent(index: number) {
+  const keywordsOfContentList = keywordsOfContent.value || [];
+  keywordsOfContentList.splice(index, 1);
+  logStore.setLogCondition({
+    keywordsOfContent: keywordsOfContentList,
+  });
+  contentStr.value = "";
+}
+function addLabels(type: string) {
+  if (type === "keywordsOfContent" && !contentStr.value) {
+    return;
+  }
+  if (type === "excludingKeywordsOfContent" && !excludingContentStr.value) {
+    return;
+  }
+  if (type === "keywordsOfContent") {
+    keywordsOfContent.value.push(contentStr.value);
+    logStore.setLogCondition({
+      [type]: keywordsOfContent.value,
+    });
+    contentStr.value = "";
+  } else if (type === "excludingKeywordsOfContent") {
+    excludingKeywordsOfContent.value.push(excludingContentStr.value);
+    logStore.setLogCondition({
+      [type]: excludingKeywordsOfContent.value,
+    });
+    excludingContentStr.value = "";
+  }
+}
+function removeExcludeContent(index: number) {
+  excludingKeywordsOfContent.value.splice(index, 1);
+  logStore.setLogCondition({
+    excludingKeywordsOfContent: excludingKeywordsOfContent.value,
+  });
+  excludingContentStr.value = "";
+}
+watch(
+  () => selectorStore.currentService,
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      init();
+    }
+  }
+);
+watch(
+  () => [selectorStore.currentPod],
+  () => {
+    if (dashboardStore.entity === EntityType[0].value) {
+      return;
+    }
+    init();
+  }
+);
+</script>
+<style lang="scss" scoped>
+.inputs {
+  width: 120px;
+}
+
+.row {
+  margin-bottom: 5px;
+}
+
+.inputs-max {
+  width: 270px;
+}
+
+.traceId {
+  margin-top: 2px;
+}
+
+.search-btn {
+  margin-left: 20px;
+  cursor: pointer;
+}
+
+.tips {
+  color: #888;
+}
+
+.log-tag {
+  width: 30%;
+  border-style: unset;
+  outline: 0;
+  border: 1px solid #ccc;
+  height: 30px;
+  padding: 0 5px;
+}
+
+.log-tags {
+  padding: 1px 5px 0 0;
+  border-radius: 3px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.selected {
+  display: inline-block;
+  padding: 0 3px;
+  border-radius: 3px;
+  overflow: hidden;
+  color: #3d444f;
+  border: 1px dashed #aaa;
+  font-size: 12px;
+  margin: 0 2px;
+}
+
+.remove-icon {
+  display: inline-block;
+  margin-left: 3px;
+  cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,73 @@
+<!-- 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. -->
+<template>
+  <div>
+    <div class="log-t-loading" v-show="logStore.loadLogs">
+      <Icon iconName="spinner" size="lg" />
+    </div>
+    <LogTable :tableData="logStore.logs || []" :type="type" :noLink="true">
+      <div class="log-tips" v-if="!logStore.logs.length">{{ t("noData") }}</div>
+    </LogTable>
+    <div class="mt-5 mb-5">
+      <el-pagination
+        v-model:currentPage="logStore.conditions.paging.pageNum"
+        v-model:page-size="pageSize"
+        layout="prev, pager, next, jumper"
+        :total="logStore.logsTotal"
+        @current-change="updatePage"
+        :style="`float: right`"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
+import { useLogStore } from "@/store/modules/log";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { ElMessage } from "element-plus";
+
+const { t } = useI18n();
+const logStore = useLogStore();
+const dashboardStore = useDashboardStore();
+const type = ref<string>(
+  dashboardStore.layerId === "BROWSER" ? "browser" : "service"
+);
+const pageSize = ref<number>(15);
+function updatePage(p: number) {
+  logStore.setLogCondition({
+    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+  });
+  queryLogs();
+}
+async function queryLogs() {
+  const res = await logStore.getLogs();
+  if (res && res.errors) {
+    ElMessage.error(res.errors);
+  }
+}
+</script>
+<style lang="scss" scoped>
+.log-tips {
+  width: 100%;
+  text-align: center;
+  margin: 50px 0;
+}
+
+.log-t-loading {
+  text-align: center;
+}
+</style>

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

@@ -144,7 +144,7 @@ import { Option } from "@/types/app";
 import copy from "@/utils/copy";
 import List from "./components/List.vue";
 import graphs from "./components/index";
-import LogTable from "@/views/components/LogTable/Index.vue";
+import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 import { ElMessage } from "element-plus";
 
 export default defineComponent({
@@ -166,7 +166,7 @@ export default defineComponent({
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
 
-    function handleClick(ids: string[]) {
+    function handleClick(ids: string[] | any) {
       let copyValue = null;
       if (ids.length === 1) {
         copyValue = ids[0];
@@ -176,7 +176,7 @@ export default defineComponent({
       copy(copyValue);
     }
 
-    async function changeTraceId(opt: Option[]) {
+    async function changeTraceId(opt: Option[] | any) {
       traceId.value = opt[0].value;
       loading.value = true;
       const res = await traceStore.getTraceSpans({ traceId: opt[0].value });

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

@@ -95,7 +95,7 @@ import { useTraceStore } from "@/store/modules/trace";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import ConditionTags from "@/views/components/ConditionTags.vue";
+import ConditionTags from "@/views/dashboard/related/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 
@@ -198,7 +198,7 @@ async function queryTraces() {
     ElMessage.error(res.errors);
   }
 }
-function changeField(type: string, opt: any[]) {
+function changeField(type: string, opt: any) {
   state[type] = opt[0];
   if (type === "service") {
     getEndpoints();

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

@@ -101,7 +101,7 @@ function updatePage(p: number) {
   searchTrace();
 }
 
-function changeSort(opt: Option[]) {
+function changeSort(opt: Option[] | any) {
   traceStore.setTraceCondition({
     queryOrder: opt[0].value,
     paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true },

src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue

@@ -113,7 +113,7 @@ import dayjs from "dayjs";
 import { useTraceStore } from "@/store/modules/trace";
 import copy from "@/utils/copy";
 import { ElMessage } from "element-plus";
-import LogTable from "@/views/components/LogTable/Index.vue";
+import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 
 /* global defineProps */
 const props = defineProps({