github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 11:44:09 +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
limitations under the License. -->
<template>
<div class="flex-h" :class="{ light: theme === 'light' }">
<div class="mr-5">
<span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
<span
class="trace-tags"
:style="type === 'LOG' ? `min-width: 122px;` : ''"
>
<span class="selected" v-for="(item, index) in tagsList" :key="index">
<span>{{ item }}</span>
<span class="remove-icon" @click="removeTags(index)">×</span>
</span>
<div>
<span class="grey">{{ t("tags") }}: </span>
<span
v-if="tagsList.length"
class="trace-tags"
:style="type === 'LOG' ? `min-width: 122px;` : ''"
>
<span class="selected" v-for="(item, index) in tagsList" :key="index">
<span>{{ item }}</span>
<span class="remove-icon" @click="removeTags(index)">×</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
v-if="type === 'ALARM'"
size="small"
v-model="tags"
class="trace-new-tag"
@change="addLabels"
:placeholder="t('addTags')"
@click="showClick"
/>
<span v-else>
<el-input
size="small"
v-model="tags"
class="trace-new-tag"
:placeholder="t('addTags')"
@click="showClick"
:autofocus="true"
/>
<el-dropdown
ref="dropdownTag"
trigger="contextmenu"
style="margin: 20px 0 0 -130px"
>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in tagArr" :key="index">
<span @click="selectTag(item)" class="tag-item">
{{ item }}
</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
<span class="tags-tip">
<a
target="blank"
href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
>
{{ 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>
<el-dropdown
ref="dropdownTag"
trigger="contextmenu"
style="margin: 20px 0 0 -130px"
>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in tagArr" :key="index">
<span @click="selectTag(item)" class="tag-item">
{{ item }}
</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
<span class="tags-tip" :class="type === 'ALARM' ? '' : 'link-tips'">
<a
target="blank"
href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
>
{{ 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>
</template>
<script lang="ts" setup>
@ -90,7 +88,6 @@ const props = defineProps({
const traceStore = useTraceStore();
const logStore = useLogStore();
const { t } = useI18n();
const theme = ref<string>("dark");
const tags = ref<string>("");
const tagsList = ref<string[]>([]);
const tagArr = ref<string[]>([]);
@ -102,6 +99,8 @@ const tipsMap = {
};
const dropdownTag = ref();
fetchTagKeys();
function removeTags(index: number) {
tagsList.value.splice(index, 1);
updateTags();
@ -170,11 +169,6 @@ function selectTag(item: string) {
function showClick() {
dropdownTag.value.handleOpen();
if (tags.value.includes("=")) {
fetchTagValues();
return;
}
fetchTagKeys();
}
</script>
<style lang="scss" scoped>
@ -186,6 +180,10 @@ function showClick() {
vertical-align: top;
}
.link-tips {
margin-right: 120px;
}
.selected {
display: inline-block;
padding: 0 3px;
@ -202,7 +200,6 @@ function showClick() {
padding: 2px 5px;
border-radius: 3px;
width: 250px;
margin-right: 3px;
}
.remove-icon {
@ -218,6 +215,8 @@ function showClick() {
.tags-tip {
color: #a7aebb;
display: inline-block;
margin-right: 130px;
}
.light {