mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-15 01:33:54 +00:00
refactoring log layout
This commit is contained in:
Peter Olu
parent
dfe41eb02c
commit
9b2b624eb0
@ -14,12 +14,13 @@ 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">
|
||||
<div class="flex-h items-center mr-5">
|
||||
<span class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
|
||||
<span
|
||||
v-if="tagsList.length"
|
||||
class="trace-tags"
|
||||
:style="type === 'LOG' ? `min-width: 122px;` : ''"
|
||||
>
|
||||
<!-- :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>
|
||||
@ -98,6 +99,9 @@ function updateTags() {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.items-center{
|
||||
align-items: center;
|
||||
}
|
||||
.trace-tags {
|
||||
padding: 1px 5px 0 0;
|
||||
border-radius: 3px;
|
||||
|
||||
@ -30,7 +30,7 @@ limitations under the License. -->
|
||||
</div>
|
||||
</el-popover>
|
||||
<div class="header">
|
||||
<Header />
|
||||
<!-- <Header /> -->
|
||||
</div>
|
||||
<div class="log">
|
||||
<List />
|
||||
@ -40,7 +40,7 @@ limitations under the License. -->
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import Header from "../related/log/Header.vue";
|
||||
// import Header from "../related/log/Header.vue";
|
||||
import List from "../related/log/List.vue";
|
||||
|
||||
/*global defineProps */
|
||||
|
||||
@ -13,7 +13,7 @@ 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="dashboard-tool flex-h">
|
||||
<div class="dashboard-tool flex-h">
|
||||
<div class="flex-h">
|
||||
<div class="flex-h">
|
||||
<div
|
||||
@ -172,7 +172,7 @@ limitations under the License. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Trace Details tools here -->
|
||||
<Header v-if="showLogHeader" />
|
||||
<TraceDetailsTools
|
||||
v-if="showFilter && currentTraceView === 'traceDetails'"
|
||||
/>
|
||||
@ -181,6 +181,8 @@ limitations under the License. -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Filter from "../related/trace/Filter.vue";
|
||||
import Header from "../related/log/Header.vue";
|
||||
|
||||
import { reactive, ref, computed, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
@ -212,6 +214,9 @@ const selectedSelector = ref<string>("");
|
||||
const showFilter = computed(
|
||||
() => dashboardStore.layout[0]?.activedTabIndex === 2
|
||||
);
|
||||
const showLogHeader = computed(
|
||||
() => dashboardStore.layout[0]?.activedTabIndex === 3
|
||||
);
|
||||
const currentTraceView = computed(() => traceStore.currentView)
|
||||
const { query } = useRoute();
|
||||
dashboardStore.setViewMode(query["fullview"] === "true");
|
||||
|
||||
@ -13,110 +13,143 @@ 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 row">
|
||||
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value">
|
||||
<span class="grey mr-5">{{ t("service") }}:</span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.service.value"
|
||||
:options="logStore.services"
|
||||
placeholder="Select a service"
|
||||
@change="changeField('service', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[3].value">
|
||||
<span class="grey mr-5">
|
||||
{{ isBrowser ? t("version") : t("instance") }}:
|
||||
</span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.instance.value"
|
||||
:options="logStore.instances"
|
||||
placeholder="Select a instance"
|
||||
@change="changeField('instance', $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5" v-if="dashboardStore.entity !== EntityType[2].value">
|
||||
<span class="grey mr-5"
|
||||
>{{ isBrowser ? t("page") : t("endpoint") }}:</span
|
||||
<div class="flex-h log-wrapper">
|
||||
<div class="flex-h row">
|
||||
<!-- <h1>{{EntityType[3].value}}</h1> -->
|
||||
<!-- <div
|
||||
class="mr-5 flex-h"
|
||||
v-if="dashboardStore.entity === EntityType[1].value"
|
||||
>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.endpoint.value"
|
||||
:options="logStore.endpoints"
|
||||
placeholder="Select a endpoint"
|
||||
@change="changeField('endpoint', $event)"
|
||||
:isRemote="true"
|
||||
@query="searchEndpoints"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row tips">
|
||||
<b>{{ t("conditionNotice") }}</b>
|
||||
</div>
|
||||
<div class="flex-h row">
|
||||
<div class="mr-5 traceId" v-show="!isBrowser">
|
||||
<span class="grey mr-5">{{ t("traceID") }}:</span>
|
||||
<el-input v-model="traceId" class="inputs-max" size="small" />
|
||||
</div>
|
||||
<ConditionTags :type="'LOG'" @update="updateTags" />
|
||||
</div>
|
||||
<div class="flex-h" v-show="!isBrowser">
|
||||
<div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
|
||||
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
|
||||
<span class="log-tags">
|
||||
<span
|
||||
class="selected"
|
||||
v-for="(item, index) in keywordsOfContent"
|
||||
:key="`keywordsOfContent${index}`"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
<span class="remove-icon" @click="removeContent(index)">×</span>
|
||||
<span class="grey mr-5">{{ t("service") }}:</span>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.service.value"
|
||||
:options="logStore.services"
|
||||
placeholder="Select a service"
|
||||
@change="changeField('service', $event)"
|
||||
/>
|
||||
</div> -->
|
||||
<!-- <div
|
||||
class="mr-5 flex-h"
|
||||
v-if="dashboardStore.entity !== EntityType[3].value"
|
||||
>
|
||||
<span class="grey mr-5">
|
||||
{{ isBrowser ? t("version") : t("instance") }}:
|
||||
</span>
|
||||
</span>
|
||||
<el-input
|
||||
size="small"
|
||||
class="inputs-max"
|
||||
:placeholder="t('addKeywordsOfContent')"
|
||||
v-model="contentStr"
|
||||
@change="addLabels('keywordsOfContent')"
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.instance.value"
|
||||
:options="logStore.instances"
|
||||
placeholder="Select a instance"
|
||||
@change="changeField('instance', $event)"
|
||||
/>
|
||||
</div> -->
|
||||
<!-- <div
|
||||
class="mr-5 flex-h"
|
||||
v-if="dashboardStore.entity !== EntityType[2].value"
|
||||
>
|
||||
<span class="grey mr-5"
|
||||
>{{ isBrowser ? t("page") : t("endpoint") }}:</span
|
||||
>
|
||||
<Selector
|
||||
size="small"
|
||||
:value="state.endpoint.value"
|
||||
:options="logStore.endpoints"
|
||||
placeholder="Select a endpoint"
|
||||
@change="changeField('endpoint', $event)"
|
||||
:isRemote="true"
|
||||
@query="searchEndpoints"
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="row tips">
|
||||
<b>{{ t("conditionNotice") }}</b>
|
||||
</div> -->
|
||||
<div class="flex-h items-center">
|
||||
<div class="mr-5 flex-h items-center traceId" v-show="!isBrowser">
|
||||
<el-button
|
||||
type="success"
|
||||
class="toggle-btn mx-3"
|
||||
@click="setSearchTerm('traceId')"
|
||||
>
|
||||
{{ t("traceID") }}
|
||||
</el-button>
|
||||
<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>
|
||||
<el-button
|
||||
type="success"
|
||||
class="toggle-btn mx-3"
|
||||
@click="setSearchTerm('tags')"
|
||||
>
|
||||
Tags
|
||||
</el-button>
|
||||
<ConditionTags
|
||||
v-if="currentSearchTerm === 'tags'"
|
||||
:type="'LOG'"
|
||||
@update="updateTags"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
|
||||
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
|
||||
<span class="log-tags">
|
||||
<span
|
||||
class="selected"
|
||||
v-for="(item, index) in excludingKeywordsOfContent"
|
||||
:key="`excludingKeywordsOfContent${index}`"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
<span class="remove-icon" @click="removeExcludeContent(index)">
|
||||
×
|
||||
|
||||
<div class="flex-h" v-show="!isBrowser">
|
||||
<div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
|
||||
<span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
|
||||
<span class="log-tags">
|
||||
<span
|
||||
class="selected"
|
||||
v-for="(item, index) in keywordsOfContent"
|
||||
:key="`keywordsOfContent${index}`"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
<span class="remove-icon" @click="removeContent(index)">×</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<el-input
|
||||
class="inputs-max"
|
||||
size="small"
|
||||
:placeholder="t('addExcludingKeywordsOfContent')"
|
||||
v-model="excludingContentStr"
|
||||
@change="addLabels('excludingKeywordsOfContent')"
|
||||
/>
|
||||
<el-tooltip :content="t('keywordsOfContentLogTips')">
|
||||
<span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
|
||||
<Icon icon="help" class="mr-5" />
|
||||
<el-input
|
||||
size="small"
|
||||
class="inputs-max"
|
||||
:placeholder="t('addKeywordsOfContent')"
|
||||
v-model="contentStr"
|
||||
@change="addLabels('keywordsOfContent')"
|
||||
/>
|
||||
</div>
|
||||
<div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
|
||||
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
|
||||
<span class="log-tags">
|
||||
<span
|
||||
class="selected"
|
||||
v-for="(item, index) in excludingKeywordsOfContent"
|
||||
:key="`excludingKeywordsOfContent${index}`"
|
||||
>
|
||||
<span>{{ item }}</span>
|
||||
<span class="remove-icon" @click="removeExcludeContent(index)">
|
||||
×
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-input
|
||||
class="inputs-max"
|
||||
size="small"
|
||||
:placeholder="t('addExcludingKeywordsOfContent')"
|
||||
v-model="excludingContentStr"
|
||||
@change="addLabels('excludingKeywordsOfContent')"
|
||||
/>
|
||||
<el-tooltip :content="t('keywordsOfContentLogTips')">
|
||||
<span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords">
|
||||
<Icon icon="help" class="mr-5" />
|
||||
</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-button
|
||||
class="search-btn"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="searchLogs"
|
||||
>
|
||||
{{ t("search") }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
class="search-btn"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="searchLogs"
|
||||
>
|
||||
{{ t("search") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@ -139,6 +172,7 @@ const logStore = useLogStore();
|
||||
const traceId = ref<string>("");
|
||||
const keywordsOfContent = ref<string[]>([]);
|
||||
const excludingKeywordsOfContent = ref<string[]>([]);
|
||||
const currentSearchTerm = ref<string>("");
|
||||
const tagsList = ref<string[]>([]);
|
||||
const tagsMap = ref<Option[]>([]);
|
||||
const contentStr = ref<string>("");
|
||||
@ -293,6 +327,9 @@ function removeExcludeContent(index: number) {
|
||||
});
|
||||
excludingContentStr.value = "";
|
||||
}
|
||||
function setSearchTerm(term: string) {
|
||||
currentSearchTerm.value = term;
|
||||
}
|
||||
watch(
|
||||
() => selectorStore.currentService,
|
||||
() => {
|
||||
@ -320,6 +357,12 @@ watch(
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
// .log-wrapper {
|
||||
// width: 600px;
|
||||
// padding-left: 40px;
|
||||
// overflow-x: scroll;
|
||||
// align-items: center;
|
||||
// }
|
||||
.inputs {
|
||||
width: 120px;
|
||||
}
|
||||
@ -378,4 +421,22 @@ watch(
|
||||
margin-left: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* buttons*/
|
||||
.el-button span {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
.toggle-btn {
|
||||
height: 18px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.active-toggle.toggle-btn {
|
||||
background: #276c04 !important;
|
||||
span {
|
||||
color: #275410 !important;
|
||||
}
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user