This is an automated email from the ASF dual-hosted git repository.
qiuxiafan pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 5419a697 feat: highlight search log keywords (#398)
5419a697 is described below
commit 5419a69700f15733bd3568853eaf3e74a9f0aa61
Author: Starry <[email protected]>
AuthorDate: Sun Jun 2 18:33:43 2024 +0800
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 +++++++++++-----------
.../dashboard/related/log/LogTable/LogBrowser.vue | 2 +-
.../dashboard/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") {
