github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-15 12:49:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: highlight search log keywords (#398)

Browse Source
This commit is contained in:
Starry
2024-06-02 18:33:43 +08:00
committed by GitHub
parent 065337c344
commit 5419a69700
6 changed files with 59 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/views/dashboard/related/log/Header.vue
View File

@@ -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>

2
src/views/dashboard/related/log/LogTable/LogBrowser.vue
View File

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

9
src/views/dashboard/related/log/LogTable/LogService.vue
View File

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