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

can filter through selected columns

Browse Source
This commit is contained in:
Peter Olu 2022-05-21 00:54:18 +01:00
parent fbeca70081
commit f9d7dd61c4
1 changed files with 36 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,24 +14,27 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h log-wrapper"> <div class="flex-h log-wrapper">
<div style="display: inline-block; margin-left: 20px"> <div class="flex-h items-center mr-5">
<p style="margin-left: 10px">use collapse-tags-tooltip</p> <p style="margin-left: 10px">Select visible columns</p>
<el-select <el-select
v-model="selectedColumns" v-model="selectedColumns"
multiple multiple
collapse-tags collapse-tags
collapse-tags-tooltip collapse-tags-tooltip
placeholder="Select" placeholder="Select"
style="width: 240px" style="width: 240px"
> >
<el-option <el-option
v-for="item in logStore.serviceLogColumn" v-for="item in logStore.serviceLogColumn"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
</div> <el-button class="toggle-btn mx-3" @click="setVisbleColumn">
<Icon iconSize="sm" iconName="timeline" />
</el-button>
</div>
<div v-if="!currentSearchTerm.length" class="flex-h items-center"> <div v-if="!currentSearchTerm.length" class="flex-h items-center">
<div v-for="(item, index) in arrayOfFilters" :key="index"> <div v-for="(item, index) in arrayOfFilters" :key="index">
<el-tooltip <el-tooltip
@ -232,16 +235,16 @@ const appStore = useAppStoreWithOut();
const selectorStore = useSelectorStore(); const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const logStore = useLogStore(); const logStore = useLogStore();
const selectedColumns = ref<any[]>([]) const selectedColumns = ref<any[]>([]);
const traceId = ref<string>(""); const traceId = ref<string>("");
const keywordsOfContent = ref<string[]>([]); const keywordsOfContent = ref<string[]>([]);
const excludingKeywordsOfContent = ref<string[]>([]); const excludingKeywordsOfContent = ref<string[]>([]);
const supportQueryLogsByKeywords = computed<boolean>(() => { const supportQueryLogsByKeywords = computed<boolean>(() => {
return logStore.supportQueryLogsByKeywords return logStore.supportQueryLogsByKeywords;
}) });
const supportExcludeQueryLogsByKeywords = computed<boolean>(() => { const supportExcludeQueryLogsByKeywords = computed<boolean>(() => {
return logStore.supportQueryLogsByKeywords return logStore.supportQueryLogsByKeywords;
}) });
const currentSearchTerm = ref<string>(""); const currentSearchTerm = ref<string>("");
const activeTerms = ref<string[]>([]); const activeTerms = ref<string[]>([]);
@ -307,6 +310,12 @@ const arrayOfFilters = ref<filtersObject[]>([
}, },
]); ]);
init(); init();
function setVisbleColumn() {
const cols = logStore.serviceLogColumn.filter((column) => {
return selectedColumns.value.includes(column.value);
});
console.log(cols, [...logStore.serviceLogColumn]);
}
async function init() { async function init() {
const resp = await logStore.getLogsByKeywords(); const resp = await logStore.getLogsByKeywords();
@ -520,7 +529,7 @@ function cancelSearchTerm() {
} }
removeFromActiveTerms(); removeFromActiveTerms();
currentSearchTerm.value = ""; currentSearchTerm.value = "";
searchLogs() searchLogs();
} }
watch( watch(
() => selectorStore.currentService, () => selectorStore.currentService,
@ -558,7 +567,9 @@ watch(
.inputs { .inputs {
width: 120px; width: 120px;
} }
.items-center {
align-items: center;
}
.row { .row {
margin-bottom: 5px; margin-bottom: 5px;
} }