You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2021/10/14 05:36:44 UTC
[skywalking-rocketbot-ui] branch master updated: feat: optimize the
style and add tips for log conditions (#549)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-rocketbot-ui.git
The following commit(s) were added to refs/heads/master by this push:
new 1b94e28 feat: optimize the style and add tips for log conditions (#549)
1b94e28 is described below
commit 1b94e282c6a0a65f9b03664e9c52def54969ce69
Author: Fine0830 <fi...@outlook.com>
AuthorDate: Thu Oct 14 13:36:36 2021 +0800
feat: optimize the style and add tips for log conditions (#549)
---
src/assets/lang/en.ts | 7 +++++-
src/assets/lang/zh.ts | 5 ++++
src/views/components/common/condition-tags.vue | 8 ++++--
src/views/components/debug/log-lal.vue | 2 +-
src/views/components/log/log-bar.vue | 2 +-
src/views/components/log/log-conditions.vue | 35 +++++++++++++++++++-------
6 files changed, 45 insertions(+), 14 deletions(-)
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 @@ const m = {
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 @@ const m = {
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 @@ const m = {
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 @@ limitations under the License. -->
<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 @@ limitations under the License. -->
{{ $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 @@ limitations under the License. -->
outline: 0;
padding: 2px 5px;
border-radius: 3px;
- width: 175px;
+ width: 250px;
margin-right: 3px;
}
.remove-icon {
@@ -139,4 +140,7 @@ limitations under the License. -->
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 @@ limitations under the License. -->
</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 @@ limitations under the License. -->
}
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 @@ limitations under the License. -->
<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 @@ limitations under the License. -->
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 @@ limitations under the License. -->
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 @@ limitations under the License. -->
</span>
</div>
</div>
- <ConditionTags :type="'LOG'" :clearTags="clearAllTags" @updateTags="updateTags" />
</div>
</template>
@@ -241,11 +249,13 @@ limitations under the License. -->
.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 @@ limitations under the License. -->
outline: 0;
padding: 2px 5px;
border-radius: 3px;
+ width: 280px;
}
.rk-log-tags {
@@ -317,5 +328,11 @@ limitations under the License. -->
width: 175px;
margin-right: 3px;
}
+ .condition-notice {
+ color: #fff;
+ }
+ .traceID {
+ padding-right: 62px;
+ }
}
</style>