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

show all and hide all columns refactored

Browse Source
This commit is contained in:
Peter Olu 2022-06-05 23:55:35 +01:00
parent 53019058bc
commit 857cf2ff87
1 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,16 +24,27 @@ limitations under the License. -->
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="dropdownSelector"> <el-dropdown-menu class="dropdownSelector">
<el-dropdown-item >
<div
style="width: 100%"
class="flex-h items-center justify-between"
@click="showAllColumns = true"
>
<el-icon><View /></el-icon>
<span style="margin-right: 10px">Show All</span>
</div>
</el-dropdown-item>
<el-dropdown-item> <el-dropdown-item>
<div <div
style="width: 100%" style="width: 100%"
class="flex-h items-center justify-between" class="flex-h items-center justify-between"
@click="showAllColumns = false"
> >
<!-- <el-checkbox v-model="showAllColumns" size="large"> --> <el-icon><Hide /></el-icon>
<span style="margin-right: 10px">Show All</span> <span style="margin-right: 10px">Hide All</span>
<!-- </el-checkbox> -->
</div> </div>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided></el-dropdown-item>
<el-dropdown-item <el-dropdown-item
v-for="item in logStore.serviceLogColumn" v-for="item in logStore.serviceLogColumn"
:key="item.value" :key="item.value"
@ -259,7 +270,7 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ArrowDown } from "@element-plus/icons-vue"; import { ArrowDown, View, Hide } from "@element-plus/icons-vue";
import { ref, reactive, watch, computed, onMounted } from "vue"; import { ref, reactive, watch, computed, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
@ -366,14 +377,7 @@ function toggleColumSelector() {
showColumList.value = !showColumList.value; showColumList.value = !showColumList.value;
setSearchTerm("column"); setSearchTerm("column");
} }
function hideColumns(column: string) {
logStore.hideColumns(column.value);
selectedColumns.value = [];
}
function showColumns(column: string) {
logStore.showColumns(column.value);
selectedColumns.value = [];
}
function hideTags() { function hideTags() {
let tagsWrap = document.querySelector(".el-select__tags"); let tagsWrap = document.querySelector(".el-select__tags");
if (!tagsWrap) return; if (!tagsWrap) return;
@ -624,12 +628,12 @@ watch(
} }
} }
); );
watch( watch(
() => showAllColumns.value, () => showAllColumns.value,
(newVal, oldVal) => { (newVal, oldVal) => {
console.log("New:", newVal, "Old:", oldVal) logStore.toggleAllColumns(newVal);
logStore.toggleAllColumns(newVal) }
}) );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.dropdownSelector { .dropdownSelector {