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

refactored approach

Browse Source
This commit is contained in:
Peter Olu 2022-05-21 19:37:50 +01:00
parent 8f9801daa6
commit f27c5d8b34
1 changed files with 43 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ 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 v-if="currentSearchTerm==='column'" class="flex-h items-center mr-5"> <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
<p style="margin-right: 10px">Select visible columns</p> <p style="margin-right: 10px">Select visible columns</p>
<el-select <el-select
v-model="selectedColumns" v-model="selectedColumns"
@ -26,42 +26,43 @@ limitations under the License. -->
style="width: 240px" style="width: 240px"
size="small" size="small"
> >
<!-- <el-option @click="() =>{}" value="">Reset</el-option> -->
<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"
> >
<div class="flex-h items-center">
<span class="mr-5">{{ item.value }}</span> <span class="mr-5">{{ item.value }}</span>
<Icon v-if="item.isVisible" iconSize="sm" iconName="cancel" /> <div
<Icon v-else iconSize="sm" iconName="add" /> style="justify-content: space-between"
</el-option> class="flex-h items-center"
</el-select> >
<div class="flex-h items-center" v-if="selectedColumns.length">
<el-tooltip <el-tooltip
class="box-item" class="box-item"
effect="dark" effect="dark"
content="Add selected columns" :content="item.isVisible ? 'Hide column' : 'Show Column'"
placement="bottom-start" placement="right-start"
> >
<el-button class="toggle-btn mx-3" @click="showColumns"> <el-button
<Icon iconSize="sm" iconName="save" /> v-if="item.isVisible"
</el-button> class="toggle-btn mx-3"
</el-tooltip> @click="hideColumns(item)"
<el-tooltip
class="box-item"
effect="dark"
content="Remove selected columns"
placement="bottom-start"
> >
<el-button class="toggle-btn mx-3" @click="hideColumns">
<Icon iconSize="sm" iconName="cancel" /> <Icon iconSize="sm" iconName="cancel" />
</el-button> </el-button>
<el-button v-else class="toggle-btn mx-3" @click="showColumns(item)">
<Icon iconSize="sm" iconName="add" />
</el-button>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
</el-option>
</el-select>
<el-button class="toggle-btn mx-3danger" @click="setSearchTerm('')">
<Icon iconSize="sm" iconName="cancel" />
</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
@ -365,26 +366,28 @@ onMounted(() => {
"time", "time",
"contentType", "contentType",
"tags", "tags",
"traceID"]) "traceID",
]);
} }
});
})
init(); init();
function toggleColumSelector() { function toggleColumSelector() {
showColumList.value = !showColumList.value; showColumList.value = !showColumList.value;
setSearchTerm("column"); setSearchTerm("column");
} }
function hideColumns() { function hideColumns(column: any) {
selectedColumns.value.push(column.value);
logStore.hideColumns(selectedColumns.value); logStore.hideColumns(selectedColumns.value);
selectedColumns.value = []; selectedColumns.value = [];
toggleColumSelector(); // toggleColumSelector();
setSearchTerm(""); // setSearchTerm("");
} }
function showColumns() { function showColumns(column: any) {
selectedColumns.value.push(column.value);
logStore.showColumns(selectedColumns.value); logStore.showColumns(selectedColumns.value);
selectedColumns.value = []; selectedColumns.value = [];
toggleColumSelector(); // toggleColumSelector();
setSearchTerm(""); // setSearchTerm("");
} }
async function init() { async function init() {
const resp = await logStore.getLogsByKeywords(); const resp = await logStore.getLogsByKeywords();
@ -712,4 +715,7 @@ watch(
.items-center { .items-center {
align-items: center; align-items: center;
} }
.space-between {
justify-content: space-between !important;
}
</style> </style>