From 5419a69700f15733bd3568853eaf3e74a9f0aa61 Mon Sep 17 00:00:00 2001
From: Starry <zhouzixin@apache.org>
Date: Sun, 2 Jun 2024 18:33:43 +0800
Subject: [PATCH] feat: highlight search log keywords (#398)

---
 src/locales/lang/en.ts                        |  4 +-
 src/locales/lang/es.ts                        |  2 +-
 src/store/modules/log.ts                      |  3 +
 src/views/dashboard/related/log/Header.vue    | 84 ++++++++++---------
 .../related/log/LogTable/LogBrowser.vue       |  2 +-
 .../related/log/LogTable/LogService.vue       |  9 +-
 6 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 3fd57937..63c2dc2d 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -300,7 +300,7 @@ const msg = {
   viewLogs: "View Logs",
   logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
   Check more details on the Configuration Vocabulary page`,
-  keywordsOfContentLogTips: "Current storage of SkyWalking OAP server does not support this.",
+  keywordsOfContentLogTips: "Current storage of SkyWalking OAP server does not support this",
   setEvent: "Set Event",
   viewAttributes: "View",
   attributes: "Attributes",
@@ -355,7 +355,7 @@ const msg = {
   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).",
-  conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
+  conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value)",
   language: "Language",
   save: "Save",
   editStrategy: "Edit Policies",
diff --git a/src/locales/lang/es.ts b/src/locales/lang/es.ts
index f9e1ef7f..d5d738bb 100644
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -299,7 +299,7 @@ const msg = {
   viewLogs: "Ver Registro de Datos",
   logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
   Más información en la página de Vocabulario de Configuración`,
-  keywordsOfContentLogTips: "El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
+  keywordsOfContentLogTips: "El almacenamiento actual del servidor SkyWalking OAP no lo soporta",
   setEvent: "Establecer Evento",
   viewAttributes: "Ver",
   serviceEvents: "Eventos Servico",
diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index f2e222de..ea946d3d 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -53,6 +53,9 @@ export const logStore = defineStore({
     setLogCondition(data: Recordable) {
       this.conditions = { ...this.conditions, ...data };
     },
+    getLogKeywords() {
+      return this.conditions.keywordsOfContent;
+    },
     resetState() {
       this.logs = [];
       this.conditions = {
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index ce822192..29aaeb83 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -67,51 +67,55 @@ limitations under the License. -->
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
-  <div class="row tips" v-show="!isBrowser">
-    <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>
-      <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
-        size="small"
-        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"
-        size="small"
-        :placeholder="t('addExcludingKeywordsOfContent')"
-        v-model="excludingContentStr"
-        @change="addLabels('excludingKeywordsOfContent')"
-      />
+  <div v-show="!isBrowser">
+    <div class="row tips">
+      <b>{{ t("conditionNotice") }}</b>
       <el-tooltip :content="t('keywordsOfContentLogTips')">
         <span v-show="!logStore.supportQueryLogsByKeywords">
-          <Icon iconName="help" class="mr-5" />
+          <Icon iconName="help" />
         </span>
       </el-tooltip>
     </div>
+    <div v-show="logStore.supportQueryLogsByKeywords">
+      <div class="flex-h">
+        <div class="mr-5">
+          <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
+            size="small"
+            class="inputs-max"
+            :placeholder="t('addKeywordsOfContent')"
+            v-model="contentStr"
+            @change="addLabels('keywordsOfContent')"
+          />
+        </div>
+        <div class="mr-5">
+          <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"
+            size="small"
+            :placeholder="t('addExcludingKeywordsOfContent')"
+            v-model="excludingContentStr"
+            @change="addLabels('excludingKeywordsOfContent')"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/src/views/dashboard/related/log/LogTable/LogBrowser.vue b/src/views/dashboard/related/log/LogTable/LogBrowser.vue
index d8a6d7aa..e215988e 100644
--- a/src/views/dashboard/related/log/LogTable/LogBrowser.vue
+++ b/src/views/dashboard/related/log/LogTable/LogBrowser.vue
@@ -35,7 +35,7 @@ limitations under the License. -->
   import { BrowserLogConstants } from "./data";
   import { dateFormat } from "@/utils/dateFormat";
 
-  /*global defineProps, defineEmits, NodeListOf  */
+  /* global defineProps, defineEmits */
   const props = defineProps({
     data: { type: Object as any, default: () => ({}) },
   });
diff --git a/src/views/dashboard/related/log/LogTable/LogService.vue b/src/views/dashboard/related/log/LogTable/LogService.vue
index 137d9f19..61e01107 100644
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -30,7 +30,7 @@ limitations under the License. -->
           <Icon iconName="merge" />
         </el-tooltip>
       </span>
-      <span v-else>{{ data[item.label] }}</span>
+      <span v-else v-html="highlightKeywords(data[item.label])"></span>
     </div>
   </div>
 </template>
@@ -42,6 +42,8 @@ limitations under the License. -->
   import type { LayoutConfig } from "@/types/dashboard";
   import { dateFormat } from "@/utils/dateFormat";
   import { WidgetType } from "@/views/dashboard/data";
+  import { useLogStore } from "@/store/modules/log";
+  const logStore = useLogStore();
 
   /*global defineProps, defineEmits, Recordable */
   const props = defineProps({
@@ -58,6 +60,11 @@ limitations under the License. -->
     }
     return (props.data.tags.find((d: { key: string; value: string }) => d.key === "level") || {}).value || "";
   });
+  const highlightKeywords = (data: string) => {
+    const keywords = Object.values(logStore.getLogKeywords());
+    const regex = new RegExp(keywords.join("|"), "gi");
+    return data.replace(regex, (match) => `<span style="color: red">${match}</span>`);
+  };
 
   function selectLog(label: string, value: string) {
     if (label === "traceId") {