github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

log header layout look better now

Browse Source
This commit is contained in:
Peter Olu 2022-05-07 12:33:38 +01:00
parent 9b2b624eb0
commit d17939a116
1 changed files with 65 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,26 +66,45 @@ limitations under the License. -->
<b>{{ t("conditionNotice") }}</b> <b>{{ t("conditionNotice") }}</b>
</div> --> </div> -->
<div class="flex-h items-center"> <div class="flex-h items-center">
<div class="mr-5 flex-h items-center traceId" v-show="!isBrowser"> <div class="flex-h items-center">
<el-button <el-button
type="success" type="success"
class="toggle-btn mx-3" class="toggle-btn mx-3"
@click="setSearchTerm('traceId')" @click="setSearchTerm('traceId')"
> >
{{ t("traceID") }} <!-- {{ t("traceID") }} -->
Trace ID
</el-button> </el-button>
<div class="flex-h items-center" v-if="currentSearchTerm === 'traceId'"> <el-button
<span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input v-model="traceId" class="inputs-max" size="small" />
</div>
</div>
<el-button
type="success" type="success"
class="toggle-btn mx-3" class="toggle-btn mx-3"
@click="setSearchTerm('tags')" @click="setSearchTerm('tags')"
> >
Tags Tags
</el-button> </el-button>
<el-button
type="success"
class="toggle-btn mx-3"
@click="setSearchTerm('keywords')"
>
Keywords
</el-button>
<el-button
type="success"
class="toggle-btn mx-3"
@click="setSearchTerm('exclude')"
>
Exclude keywords
</el-button>
</div>
<div class="mr-5 flex-h items-center traceId" v-show="!isBrowser">
<div class="flex-h items-center" v-if="currentSearchTerm === 'traceId'">
<span class="grey mr-5">{{ t("traceID") }}:</span>
<el-input v-model="traceId" class="inputs-max" size="small" />
</div>
</div>
<ConditionTags <ConditionTags
v-if="currentSearchTerm === 'tags'" v-if="currentSearchTerm === 'tags'"
:type="'LOG'" :type="'LOG'"
@ -93,8 +112,14 @@ limitations under the License. -->
/> />
</div> </div>
<div class="flex-h" v-show="!isBrowser"> <div class="flex-h items-center" v-show="!isBrowser">
<div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords"> <div
class="mr-5 flex-h items-center"
v-show="
logStore.supportQueryLogsByKeywords &&
currentSearchTerm === 'keywords'
"
>
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span> <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
<span class="log-tags"> <span class="log-tags">
<span <span
@ -114,7 +139,12 @@ limitations under the License. -->
@change="addLabels('keywordsOfContent')" @change="addLabels('keywordsOfContent')"
/> />
</div> </div>
<div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords"> <div
class="mr-5 flex-h items-center"
v-show="
logStore.supportQueryLogsByKeywords && currentSearchTerm === 'exclude'
"
>
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span> <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
<span class="log-tags"> <span class="log-tags">
<span <span
@ -141,14 +171,26 @@ limitations under the License. -->
</span> </span>
</el-tooltip> </el-tooltip>
</div> </div>
<el-button
class="search-btn" <!-- Search&cancel buttons -->
size="small" <div class="flex-h items-center">
type="primary" <el-button
@click="searchLogs" class="search-btn toggle-btn"
> size="small"
{{ t("search") }} type="primary"
</el-button> @click="searchLogs"
>
<Icon iconSize="sm" iconName="search" />
</el-button>
<el-button
class="search-btn toggle-btn"
size="small"
type="primary"
@click="cancelSearchTerm"
>
<Icon iconSize="sm" iconName="cancel" />
</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -330,6 +372,9 @@ function removeExcludeContent(index: number) {
function setSearchTerm(term: string) { function setSearchTerm(term: string) {
currentSearchTerm.value = term; currentSearchTerm.value = term;
} }
function cancelSearchTerm() {
currentSearchTerm.value = '';
}
watch( watch(
() => selectorStore.currentService, () => selectorStore.currentService,
() => { () => {