feat: highlight search log keywords (#398)

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",

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",

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 = {

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

@@ -67,11 +67,18 @@ limitations under the License. -->
     </div>
     <ConditionTags :type="'LOG'" @update="updateTags" />
   </div>
-  <div class="row tips" v-show="!isBrowser">
+  <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" />
+        </span>
+      </el-tooltip>
     </div>
-  <div class="flex-h" v-show="!isBrowser">
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+    <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}`">
@@ -87,7 +94,7 @@ limitations under the License. -->
             @change="addLabels('keywordsOfContent')"
           />
         </div>
-    <div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
+        <div class="mr-5">
           <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
           <span class="log-tags">
             <span
@@ -106,11 +113,8 @@ limitations under the License. -->
             v-model="excludingContentStr"
             @change="addLabels('excludingKeywordsOfContent')"
           />
-      <el-tooltip :content="t('keywordsOfContentLogTips')">
-        <span v-show="!logStore.supportQueryLogsByKeywords">
-          <Icon iconName="help" class="mr-5" />
-        </span>
-      </el-tooltip>
+        </div>
+      </div>
     </div>
   </div>
 </template>

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: () => ({}) },
   });

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") {