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

update tags

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-12 11:20:29 +08:00
parent ce8b2e7b88
commit a010d04314
1 changed files with 59 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,66 +13,64 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h" :class="{ light: theme === 'light' }"> <div>
<div class="mr-5"> <span class="grey">{{ t("tags") }}: </span>
<span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span> <span
<span v-if="tagsList.length"
class="trace-tags" class="trace-tags"
:style="type === 'LOG' ? `min-width: 122px;` : ''" :style="type === 'LOG' ? `min-width: 122px;` : ''"
> >
<span class="selected" v-for="(item, index) in tagsList" :key="index"> <span class="selected" v-for="(item, index) in tagsList" :key="index">
<span>{{ item }}</span> <span>{{ item }}</span>
<span class="remove-icon" @click="removeTags(index)">×</span> <span class="remove-icon" @click="removeTags(index)">×</span>
</span>
</span> </span>
</span>
<el-input
v-if="type === 'ALARM'"
size="small"
v-model="tags"
class="trace-new-tag"
@change="addLabels"
:placeholder="t('addTags')"
/>
<span v-else>
<el-input <el-input
v-if="type === 'ALARM'"
size="small" size="small"
v-model="tags" v-model="tags"
class="trace-new-tag" class="trace-new-tag"
@change="addLabels"
:placeholder="t('addTags')" :placeholder="t('addTags')"
@click="showClick"
/> />
<span v-else> <el-dropdown
<el-input ref="dropdownTag"
size="small" trigger="contextmenu"
v-model="tags" style="margin: 20px 0 0 -130px"
class="trace-new-tag" >
:placeholder="t('addTags')" <template #dropdown>
@click="showClick" <el-dropdown-menu>
:autofocus="true" <el-dropdown-item v-for="(item, index) in tagArr" :key="index">
/> <span @click="selectTag(item)" class="tag-item">
<el-dropdown {{ item }}
ref="dropdownTag" </span>
trigger="contextmenu" </el-dropdown-item>
style="margin: 20px 0 0 -130px" </el-dropdown-menu>
> </template>
<template #dropdown> </el-dropdown>
<el-dropdown-menu> </span>
<el-dropdown-item v-for="(item, index) in tagArr" :key="index"> <span class="tags-tip" :class="type === 'ALARM' ? '' : 'link-tips'">
<span @click="selectTag(item)" class="tag-item"> <a
{{ item }} target="blank"
</span> href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
</el-dropdown-item> >
</el-dropdown-menu> {{ t("tagsLink") }}
</template> </a>
</el-dropdown> <el-tooltip :content="t(tipsMap[type])">
</span> <span>
<span class="tags-tip"> <Icon class="icon-help mr-5" iconName="help" size="middle" />
<a </span>
target="blank" </el-tooltip>
href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md" <b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
> </span>
{{ t("tagsLink") }}
</a>
<el-tooltip :content="t(tipsMap[type])">
<span>
<Icon class="icon-help mr-5" iconName="help" size="middle" />
</span>
</el-tooltip>
<b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
</span>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -90,7 +88,6 @@ const props = defineProps({
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const logStore = useLogStore(); const logStore = useLogStore();
const { t } = useI18n(); const { t } = useI18n();
const theme = ref<string>("dark");
const tags = ref<string>(""); const tags = ref<string>("");
const tagsList = ref<string[]>([]); const tagsList = ref<string[]>([]);
const tagArr = ref<string[]>([]); const tagArr = ref<string[]>([]);
@ -102,6 +99,8 @@ const tipsMap = {
}; };
const dropdownTag = ref(); const dropdownTag = ref();
fetchTagKeys();
function removeTags(index: number) { function removeTags(index: number) {
tagsList.value.splice(index, 1); tagsList.value.splice(index, 1);
updateTags(); updateTags();
@ -170,11 +169,6 @@ function selectTag(item: string) {
function showClick() { function showClick() {
dropdownTag.value.handleOpen(); dropdownTag.value.handleOpen();
if (tags.value.includes("=")) {
fetchTagValues();
return;
}
fetchTagKeys();
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -186,6 +180,10 @@ function showClick() {
vertical-align: top; vertical-align: top;
} }
.link-tips {
margin-right: 120px;
}
.selected { .selected {
display: inline-block; display: inline-block;
padding: 0 3px; padding: 0 3px;
@ -202,7 +200,6 @@ function showClick() {
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
width: 250px; width: 250px;
margin-right: 3px;
} }
.remove-icon { .remove-icon {
@ -218,6 +215,8 @@ function showClick() {
.tags-tip { .tags-tip {
color: #a7aebb; color: #a7aebb;
display: inline-block;
margin-right: 130px;
} }
.light { .light {