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

update style

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-12 14:46:37 +08:00
parent a010d04314
commit 076896169c
5 changed files with 54 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/locales/lang/en.ts
View File

@ -326,7 +326,7 @@ const msg = {
addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
noticeTag: "Please press Enter after inputting a tag(key=value).",
conditionNotice:
"Notice: Please press Enter after inputting a tag, key of content, exclude key of content(key=value).",
"Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
language: "Language",
};
export default msg;

2
src/locales/lang/zh.ts
View File

@ -327,7 +327,7 @@ const msg = {
addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词",
noticeTag: "请输入一个标签(key=value)之后回车",
conditionNotice:
"请输入一个标签、内容关键词或者内容不包含的关键词(key=value)之后回车",
"请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
language: "语言",
};
export default msg;

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

@ -38,7 +38,6 @@ limitations under the License. -->
size="small"
v-model="tags"
class="trace-new-tag"
:placeholder="t('addTags')"
@click="showClick"
/>
<el-dropdown
@ -48,8 +47,12 @@ limitations under the License. -->
>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="(item, index) in tagArr" :key="index">
<span @click="selectTag(item)" class="tag-item">
<el-dropdown-item
v-for="(item, index) in tagArr"
:key="index"
@click="selectTag(item)"
>
<span class="tag-item">
{{ item }}
</span>
</el-dropdown-item>
@ -69,7 +72,7 @@ limitations under the License. -->
<Icon class="icon-help mr-5" iconName="help" size="middle" />
</span>
</el-tooltip>
<b v-if="type !== 'LOG'">{{ t("noticeTag") }}</b>
<b v-if="type === 'AL'">{{ t("noticeTag") }}</b>
</span>
</div>
</template>
@ -159,10 +162,10 @@ function selectTag(item: string) {
if (tags.value.includes("=")) {
tags.value += item;
addLabels();
tagArr.value = tagKeys.value;
return;
}
tags.value = item + "=";
tagArr.value = tagKeys.value;
fetchTagValues();
dropdownTag.value.handleOpen();
}
@ -180,10 +183,6 @@ function showClick() {
vertical-align: top;
}
.link-tips {
margin-right: 120px;
}
.selected {
display: inline-block;
padding: 0 3px;
@ -210,13 +209,16 @@ function showClick() {
.tag-item {
display: inline-block;
width: 210px;
min-width: 210px;
}
.tags-tip {
color: #a7aebb;
}
.link-tips {
display: inline-block;
margin-right: 130px;
margin-left: 130px;
}
.light {

28
src/views/dashboard/related/log/Header.vue
View File

@ -50,9 +50,14 @@ limitations under the License. -->
@query="searchEndpoints"
/>
</div>
</div>
<div class="row tips">
<b>{{ t("conditionNotice") }}</b>
<el-button
class="search-btn"
size="small"
type="primary"
@click="searchLogs"
>
{{ t("search") }}
</el-button>
</div>
<div class="flex-h row">
<div class="mr-5 traceId" v-show="!isBrowser">
@ -61,6 +66,9 @@ limitations under the License. -->
</div>
<ConditionTags :type="'LOG'" @update="updateTags" />
</div>
<div class="row tips">
<b>{{ t("conditionNotice") }}</b>
</div>
<div class="flex-h" v-show="!isBrowser">
<div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
@ -109,14 +117,6 @@ limitations under the License. -->
</span>
</el-tooltip>
</div>
<el-button
class="search-btn"
size="small"
type="primary"
@click="searchLogs"
>
{{ t("search") }}
</el-button>
</div>
</template>
<script lang="ts" setup>
@ -326,6 +326,7 @@ watch(
.row {
margin-bottom: 5px;
position: relative;
}
.inputs-max {
@ -337,8 +338,11 @@ watch(
}
.search-btn {
margin-left: 20px;
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
width: 120px;
}
.tips {

40
src/views/dashboard/related/trace/Filter.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="flex-h row">
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
<div class="mr-10" v-if="dashboardStore.entity === EntityType[1].value">
<span class="grey mr-5">{{ t("service") }}:</span>
<Selector
size="small"
@ -24,7 +24,7 @@ limitations under the License. -->
@change="changeField('service', $event)"
/>
</div>
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
<div class="mr-10" v-if="dashboardStore.entity !== EntityType[3].value">
<span class="grey mr-5">{{ t("instance") }}:</span>
<Selector
size="small"
@ -34,7 +34,7 @@ limitations under the License. -->
@change="changeField('instance', $event)"
/>
</div>
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
<div class="mr-10" v-if="dashboardStore.entity !== EntityType[2].value">
<span class="grey mr-5">{{ t("endpoint") }}:</span>
<Selector
size="small"
@ -46,7 +46,7 @@ limitations under the License. -->
@query="searchEndpoints"
/>
</div>
<div class="mr-5">
<div class="mr-10">
<span class="grey mr-5">{{ t("status") }}:</span>
<Selector
size="small"
@ -56,27 +56,29 @@ limitations under the License. -->
@change="changeField('status', $event)"
/>
</div>
<div class="mr-5">
<el-button
size="small"
type="primary"
@click="searchTraces"
class="search-btn"
>
{{ t("search") }}
</el-button>
</div>
<div class="flex-h row">
<div class="mr-10">
<span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input size="small" v-model="traceId" class="traceId" />
</div>
</div>
<div class="flex-h">
<div class="mr-5">
<div class="mr-10">
<span class="sm b grey mr-5">{{ t("duration") }}:</span>
<el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
<span class="grey mr-5">-</span>
<el-input size="small" class="inputs" v-model="maxTraceDuration" />
</div>
</div>
<div class="flex-h">
<ConditionTags :type="'TRACE'" @update="updateTags" />
<el-button
class="search-btn"
size="small"
type="primary"
@click="searchTraces"
>
{{ t("search") }}
</el-button>
</div>
</template>
<script lang="ts" setup>
@ -237,6 +239,7 @@ watch(
.row {
margin-bottom: 5px;
position: relative;
}
.traceId {
@ -244,7 +247,10 @@ watch(
}
.search-btn {
margin-left: 20px;
cursor: pointer;
width: 120px;
position: absolute;
top: 0;
right: 10px;
}
</style>