github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactored log filter buttons generation

Browse Source
This commit is contained in:
Peter Olu 2022-05-07 15:42:08 +01:00
parent e6f01a5de0
commit 0bd59412de
1 changed files with 57 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,23 +15,25 @@ limitations under the License. -->
<template> <template>
<div class="flex-h log-wrapper"> <div class="flex-h log-wrapper">
<div v-if="!currentSearchTerm.length" class="flex-h items-center"> <div v-if="!currentSearchTerm.length" class="flex-h items-center">
<el-tooltip <div v-for="(item, index) in arrayOfFilters" :key="index">
class="box-item" <el-tooltip
effect="dark" class="box-item"
content="Trace ID" effect="dark"
placement="bottom-start" :content="item.description"
> placement="bottom-start"
<el-button
type="success"
:class="[activeTerms.includes('traceId') ? 'active-toggle' : '']"
class="toggle-btn mx-3"
@click="setSearchTerm('traceId')"
> >
<!-- {{ t("traceID") }} --> <el-button
<Icon iconSize="sm" iconName="timeline" /> type="success"
</el-button> :class="[activeTerms.includes(item.name) ? 'active-toggle' : '']"
</el-tooltip> class="toggle-btn mx-3"
<el-tooltip @click="setSearchTerm(item.name)"
>
<Icon iconSize="sm" :iconName="item.iconName" />
</el-button>
</el-tooltip>
</div>
<!-- <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="dark"
content="Tags" content="Tags"
@ -75,9 +77,9 @@ limitations under the License. -->
@click="setSearchTerm('exclude')" @click="setSearchTerm('exclude')"
> >
<Icon iconSize="sm" iconName="issue-child" /> <Icon iconSize="sm" iconName="issue-child" />
<!-- Exclude keywords -->
</el-button> </el-button>
</el-tooltip> </el-tooltip> -->
</div> </div>
<div class="flex-h row"> <div class="flex-h row">
<!-- <div <!-- <div
@ -258,7 +260,43 @@ const state = reactive<any>({
endpoint: { value: "0", label: "All" }, endpoint: { value: "0", label: "All" },
service: { value: "", label: "" }, service: { value: "", label: "" },
}); });
interface filtersObject {
name: string;
iconName: string;
description: string;
}
const arrayOfFilters = ref<filtersObject[]>([
{
name: "traceId",
iconName: "timeline",
description: "Trace ID",
},
{
name: "tags",
iconName: "epic",
description: "Tags",
},
{
name: "keywords",
iconName: "library_books",
description: "Keywords",
},
{
name: "exclude",
iconName: "issue-child",
description: "Exclude keywords",
},
// {
// name: "traceId",
// iconName: "timeline",
// description: "Trace ID",
// },
// {
// name: "tags",
// iconName: "epic",
// description: "Tags",
// },
]);
init(); init();
async function init() { async function init() {
const resp = await logStore.getLogsByKeywords(); const resp = await logStore.getLogsByKeywords();