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

refactor

Browse Source
This commit is contained in:
Qiuxia Fan 2022-07-25 17:06:57 +08:00
parent c2dd0fc594
commit 0b5d318305
1 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/components/ConditionTags.vue
View File

@ -33,33 +33,34 @@ limitations under the License. -->
@change="addLabels" @change="addLabels"
:placeholder="t('addTags')" :placeholder="t('addTags')"
/> />
<span v-else> <el-popover
<el-input v-else
size="small" trigger="click"
v-model="tags" style="margin: 10px 0 0 -130px"
class="trace-new-tag" :visible="visible"
@click="showClick" width="300px"
@input="searchTags" >
/> <template #reference>
<el-dropdown <el-input
ref="dropdownTag" size="small"
trigger="contextmenu" v-model="tags"
:hide-on-click="false" class="trace-new-tag"
style="margin: 20px 0 0 -130px" @input="searchTags"
v-if="tagList.length" @blur="visible = false"
:max-height="400" @focus="visible = true"
> />
<template #dropdown> </template>
<el-dropdown-menu> <div class="content">
<el-dropdown-item v-for="(item, index) in tagList" :key="index"> <span
<span @click="selectTag(item)" class="tag-item"> v-for="(item, index) in tagList"
{{ item }} :key="index"
</span> @click="selectTag(item)"
</el-dropdown-item> class="tag-item"
</el-dropdown-menu> >
</template> {{ item }}
</el-dropdown> </span>
</span> </div>
</el-popover>
<span <span
class="tags-tip" class="tags-tip"
:class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''" :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''"
@ -87,7 +88,7 @@ import { useLogStore } from "@/store/modules/log";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
/*global Nullable, defineEmits, defineProps */ /*global defineEmits, defineProps */
const emit = defineEmits(["update"]); const emit = defineEmits(["update"]);
const props = defineProps({ const props = defineProps({
type: { type: String, default: "TRACE" }, type: { type: String, default: "TRACE" },
@ -101,12 +102,12 @@ const tagsList = ref<string[]>([]);
const tagArr = ref<string[]>([]); const tagArr = ref<string[]>([]);
const tagList = ref<string[]>([]); const tagList = ref<string[]>([]);
const tagKeys = ref<string[]>([]); const tagKeys = ref<string[]>([]);
const visible = ref<boolean>(false);
const tipsMap = { const tipsMap = {
LOG: "logTagsTip", LOG: "logTagsTip",
TRACE: "traceTagsTip", TRACE: "traceTagsTip",
ALARM: "alarmTagsTip", ALARM: "alarmTagsTip",
}; };
const dropdownTag = ref<Nullable<any>>(null);
fetchTagKeys(); fetchTagKeys();
@ -167,7 +168,6 @@ async function fetchTagValues() {
} }
function selectTag(item: string) { function selectTag(item: string) {
dropdownTag.value.handleClose();
if (tags.value.includes("=")) { if (tags.value.includes("=")) {
const key = tags.value.split("=")[0]; const key = tags.value.split("=")[0];
tags.value = key + "=" + item; tags.value = key + "=" + item;
@ -194,11 +194,6 @@ function searchTags() {
tagList.value = tagArr.value.filter((d: string) => d.includes(search)); tagList.value = tagArr.value.filter((d: string) => d.includes(search));
} }
function showClick() {
if (dropdownTag.value) {
dropdownTag.value.handleOpen();
}
}
watch( watch(
() => appStore.durationTime, () => appStore.durationTime,
() => { () => {
@ -243,6 +238,12 @@ watch(
.tag-item { .tag-item {
display: inline-block; display: inline-block;
min-width: 210px; min-width: 210px;
cursor: pointer;
margin-top: 10px;
&:hover {
color: #409eff;
}
} }
.tags-tip { .tags-tip {
@ -269,4 +270,10 @@ watch(
.icon-help { .icon-help {
cursor: pointer; cursor: pointer;
} }
.content {
width: 300px;
max-height: 400px;
overflow: auto;
}
</style> </style>