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

refactor: update the tags component (#127)

Browse Source
This commit is contained in:
Fine0830 2022-07-25 17:34:05 +08:00 committed by GitHub
parent c7079ea17c
commit 673b1a41a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,32 +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"
/> >
<el-dropdown <template #reference>
ref="dropdownTag" <el-input
trigger="contextmenu" size="small"
:hide-on-click="false" v-model="tags"
style="margin: 20px 0 0 -130px" class="trace-new-tag"
v-if="tagArr.length" @input="searchTags"
:max-height="400" @blur="visible = false"
> @focus="visible = true"
<template #dropdown> />
<el-dropdown-menu> </template>
<el-dropdown-item v-for="(item, index) in tagArr" :key="index"> <div class="content">
<span @click="selectTag(item)" class="tag-item"> <span
{{ item }} v-for="(item, index) in tagList"
</span> :key="index"
</el-dropdown-item> @click="selectTag(item)"
</el-dropdown-menu> class="tag-item"
</template> >
</el-dropdown> {{ item }}
</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' : ''"
@ -86,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" },
@ -98,13 +100,14 @@ const { t } = useI18n();
const tags = ref<string>(""); const tags = ref<string>("");
const tagsList = ref<string[]>([]); const tagsList = ref<string[]>([]);
const tagArr = ref<string[]>([]); const tagArr = 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();
@ -144,6 +147,7 @@ async function fetchTagKeys() {
} }
tagArr.value = resp.data.tagKeys; tagArr.value = resp.data.tagKeys;
tagKeys.value = resp.data.tagKeys; tagKeys.value = resp.data.tagKeys;
searchTags();
} }
async function fetchTagValues() { async function fetchTagValues() {
@ -160,25 +164,36 @@ async function fetchTagValues() {
return; return;
} }
tagArr.value = resp.data.tagValues; tagArr.value = resp.data.tagValues;
searchTags();
} }
function selectTag(item: string) { function selectTag(item: string) {
if (tags.value.includes("=")) { if (tags.value.includes("=")) {
tags.value += item; const key = tags.value.split("=")[0];
tags.value = key + "=" + item;
addLabels(); addLabels();
tagArr.value = tagKeys.value; tagArr.value = tagKeys.value;
dropdownTag.value.handleClose(); searchTags();
return; return;
} }
tags.value = item + "="; tags.value = item + "=";
fetchTagValues(); fetchTagValues();
} }
function showClick() { function searchTags() {
if (dropdownTag.value) { if (!tags.value) {
dropdownTag.value.handleOpen(); tagList.value = tagArr.value;
return;
} }
let search = "";
if (tags.value.includes("=")) {
search = tags.value.split("=")[1];
} else {
search = tags.value;
}
tagList.value = tagArr.value.filter((d: string) => d.includes(search));
} }
watch( watch(
() => appStore.durationTime, () => appStore.durationTime,
() => { () => {
@ -211,6 +226,7 @@ watch(
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
width: 250px; width: 250px;
z-index: 999;
} }
.remove-icon { .remove-icon {
@ -222,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 {
@ -230,7 +252,6 @@ watch(
.link-tips { .link-tips {
display: inline-block; display: inline-block;
margin-left: 130px;
} }
.light { .light {
@ -248,4 +269,10 @@ watch(
.icon-help { .icon-help {
cursor: pointer; cursor: pointer;
} }
.content {
width: 300px;
max-height: 400px;
overflow: auto;
}
</style> </style>