feat: optimize the style and add tips for log conditions (#549)
diff --git a/src/assets/lang/en.ts b/src/assets/lang/en.ts
index a51708f..ce2cf26 100644
--- a/src/assets/lang/en.ts
+++ b/src/assets/lang/en.ts
@@ -176,7 +176,7 @@
traceTagsTip: `Only tags defined in the core/default/searchableTracesTags are searchable.
Check more details on the Configuration Vocabulary page`,
tagsLink: 'Configuration Vocabulary page',
- addTag: 'Please add a tag',
+ addTag: 'Please input a tag',
log: 'Log',
logCategory: 'Log Category',
errorCatalog: 'Error Catalog',
@@ -249,6 +249,11 @@
dslEmpty: 'Script input of LAL should not be empty',
logContentEmpty: 'The content of the log should not be empty.',
debug: 'Debug',
+ addTraceID: 'Please input a trace ID',
+ addKeywordsOfContent: 'Please input a keyword of content',
+ addExcludingKeywordsOfContent: 'Please input a keyword of excluding content',
+ noticeTag: 'Please press enter after inputting a tag.',
+ conditionNotice: 'Notice: Please press enter after inputting a tag, key of content, exclude key of content.',
};
export default m;
diff --git a/src/assets/lang/zh.ts b/src/assets/lang/zh.ts
index 5957867..c3725ff 100644
--- a/src/assets/lang/zh.ts
+++ b/src/assets/lang/zh.ts
@@ -247,6 +247,11 @@
dslEmpty: 'LAL的脚本输入不应该是空',
logContentEmpty: '日志数据的内容不应该是空。',
debug: '调试',
+ addTraceID: '请输入一个Trace ID',
+ addKeywordsOfContent: '请输入一个内容关键词',
+ addExcludingKeywordsOfContent: '请输入一个内容不包含的关键词',
+ NoticeTag: '请输入一个标签之后回车',
+ conditionNotice: '请输入一个标签、内容关键词或者内容不包含的关键词之后回车',
};
export default m;
diff --git a/src/views/components/common/condition-tags.vue b/src/views/components/common/condition-tags.vue
index f0623bf..e8c991f 100644
--- a/src/views/components/common/condition-tags.vue
+++ b/src/views/components/common/condition-tags.vue
@@ -16,7 +16,7 @@
<div class="flex-h" :class="{ light: theme === 'light' }">
<div class="mr-10 pt-5">
<span class="sm grey" v-show="theme === 'dark'">{{ $t('tags') }}: </span>
- <span class="rk-trace-tags">
+ <span class="rk-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>
@@ -31,6 +31,7 @@
{{ $t('tagsLink') }}
</a>
<rk-icon icon="help" class="mr-5" />
+ <b v-if="type === 'TRACE'">{{ $t('noticeTag') }}</b>
</span>
</div>
</div>
@@ -119,7 +120,7 @@
outline: 0;
padding: 2px 5px;
border-radius: 3px;
- width: 175px;
+ width: 250px;
margin-right: 3px;
}
.remove-icon {
@@ -139,4 +140,7 @@
color: #3d444f;
}
}
+ b {
+ color: #fff;
+ }
</style>
diff --git a/src/views/components/debug/log-lal.vue b/src/views/components/debug/log-lal.vue
index d2b4d9b..2553a21 100644
--- a/src/views/components/debug/log-lal.vue
+++ b/src/views/components/debug/log-lal.vue
@@ -52,7 +52,7 @@
</div>
<div>
<label>{{ $t('tags') }}</label>
- <ConditionTags :theme="'light'" :clearTags="false" @updateTags="updateTags" />
+ <ConditionTags :theme="'light'" :type="'LAL'" :clearTags="false" @updateTags="updateTags" />
</div>
<div>
<label>{{ $t('logContentType') }}</label>
diff --git a/src/views/components/log/log-bar.vue b/src/views/components/log/log-bar.vue
index 7f4b58c..55e4ea2 100644
--- a/src/views/components/log/log-bar.vue
+++ b/src/views/components/log/log-bar.vue
@@ -219,7 +219,7 @@
}
private openConditionsBox() {
- this.showConditionsBox = true;
+ this.showConditionsBox = !this.showConditionsBox;
}
}
</script>
diff --git a/src/views/components/log/log-conditions.vue b/src/views/components/log/log-conditions.vue
index 716e972..53a8fe4 100644
--- a/src/views/components/log/log-conditions.vue
+++ b/src/views/components/log/log-conditions.vue
@@ -13,20 +13,27 @@
<template>
<div class="rk-search-conditions">
+ <div class="search-time">
+ <span class="sm b grey mr-5">{{ $t('timeRange') }}:</span>
+ <RkDate class="sm" v-model="searchTime" position="left" format="YYYY-MM-DD HH:mm:ss" />
+ </div>
+ <div class="condition-notice">
+ <b>{{ $t('conditionNotice') }}</b>
+ </div>
<div class="flex-h">
- <div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
- <span class="sm b grey mr-10">{{ $t('traceID') }}:</span>
+ <div class="mr-20" v-show="rocketLog.type.key === cateGoryService">
+ <span class="sm b grey traceID">{{ $t('traceID') }}:</span>
<input
type="text"
class="rk-log-search-input dib"
+ :placeholder="$t('addTraceID')"
v-model="traceId"
@change="changeConditions($event, LogConditionsOpt.TraceID)"
/>
</div>
- <div class="search-time">
- <span class="sm b grey mr-5">{{ $t('timeRange') }}:</span>
- <RkDate class="sm" v-model="searchTime" position="left" format="YYYY-MM-DD HH:mm:ss" />
- </div>
+ <ConditionTags :type="'LOG'" :clearTags="clearAllTags" @updateTags="updateTags" />
+ </div>
+ <div class="flex-h">
<div class="mr-15" v-show="rocketLog.type.key === cateGoryService">
<span class="sm b grey mr-10">{{ $t('keywordsOfContent') }}:</span>
<span class="rk-log-tags" v-show="rocketLog.supportQueryLogsByKeywords">
@@ -43,6 +50,7 @@
type="text"
:disabled="!rocketLog.supportQueryLogsByKeywords"
class="rk-log-search-input dib mr-5"
+ :placeholder="$t('addKeywordsOfContent')"
v-model="keywordsOfContent"
@keyup="addLabels($event, LogConditionsOpt.KeywordsOfContent)"
/>
@@ -70,6 +78,7 @@
type="text"
:disabled="!rocketLog.supportQueryLogsByKeywords"
class="rk-log-search-input dib mr-5"
+ :placeholder="$t('addExcludingKeywordsOfContent')"
v-model="excludingKeywordsOfContent"
@keyup="addLabels($event, LogConditionsOpt.ExcludingKeywordsOfContent)"
/>
@@ -82,7 +91,6 @@
</span>
</div>
</div>
- <ConditionTags :type="'LOG'" :clearTags="clearAllTags" @updateTags="updateTags" />
</div>
</template>
@@ -241,11 +249,13 @@
.rk-search-conditions {
width: 100%;
background-color: #484b55;
- padding: 10px;
border-radius: 3px;
- margin-top: 4px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+ padding: 10px;
+ > div {
+ margin-top: 5px;
+ }
&:after {
bottom: 100%;
@@ -299,6 +309,7 @@
outline: 0;
padding: 2px 5px;
border-radius: 3px;
+ width: 280px;
}
.rk-log-tags {
@@ -317,5 +328,11 @@
width: 175px;
margin-right: 3px;
}
+ .condition-notice {
+ color: #fff;
+ }
+ .traceID {
+ padding-right: 62px;
+ }
}
</style>