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

refactoring log layout

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

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

@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h" :class="{ light: theme === 'light' }"> <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 class="sm grey" v-show="theme === 'dark'">{{ t("tags") }}: </span>
<span <span
v-if="tagsList.length"
class="trace-tags" 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 class="selected" v-for="(item, index) in tagsList" :key="index">
<span>{{ item }}</span> <span>{{ item }}</span>
<span class="remove-icon" @click="removeTags(index)">×</span> <span class="remove-icon" @click="removeTags(index)">×</span>
@ -98,6 +99,9 @@ function updateTags() {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.items-center{
align-items: center;
}
.trace-tags { .trace-tags {
padding: 1px 5px 0 0; padding: 1px 5px 0 0;
border-radius: 3px; border-radius: 3px;

4
src/views/dashboard/controls/Log.vue
View File

@ -30,7 +30,7 @@ limitations under the License. -->
</div> </div>
</el-popover> </el-popover>
<div class="header"> <div class="header">
<Header /> <!-- <Header /> -->
</div> </div>
<div class="log"> <div class="log">
<List /> <List />
@ -40,7 +40,7 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard"; 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"; import List from "../related/log/List.vue";
/*global defineProps */ /*global defineProps */

9
src/views/dashboard/panel/Tool.vue
View File

@ -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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="dashboard-tool flex-h"> <div class="dashboard-tool flex-h">
<div class="flex-h"> <div class="flex-h">
<div class="flex-h"> <div class="flex-h">
<div <div
@ -172,7 +172,7 @@ limitations under the License. -->
</div> </div>
</div> </div>
</div> </div>
<!-- Trace Details tools here --> <Header v-if="showLogHeader" />
<TraceDetailsTools <TraceDetailsTools
v-if="showFilter && currentTraceView === 'traceDetails'" v-if="showFilter && currentTraceView === 'traceDetails'"
/> />
@ -181,6 +181,8 @@ limitations under the License. -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Filter from "../related/trace/Filter.vue"; import Filter from "../related/trace/Filter.vue";
import Header from "../related/log/Header.vue";
import { reactive, ref, computed, watch } from "vue"; import { reactive, ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
@ -212,6 +214,9 @@ const selectedSelector = ref<string>("");
const showFilter = computed( const showFilter = computed(
() => dashboardStore.layout[0]?.activedTabIndex === 2 () => dashboardStore.layout[0]?.activedTabIndex === 2
); );
const showLogHeader = computed(
() => dashboardStore.layout[0]?.activedTabIndex === 3
);
const currentTraceView = computed(() => traceStore.currentView) const currentTraceView = computed(() => traceStore.currentView)
const { query } = useRoute(); const { query } = useRoute();
dashboardStore.setViewMode(query["fullview"] === "true"); dashboardStore.setViewMode(query["fullview"] === "true");

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

@ -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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="flex-h row"> <div class="flex-h log-wrapper">
<div class="mr-5" v-if="dashboardStore.entity === EntityType[1].value"> <div class="flex-h row">
<span class="grey mr-5">{{ t("service") }}:</span> <!-- <h1>{{EntityType[3].value}}</h1> -->
<Selector <!-- <div
size="small" class="mr-5 flex-h"
:value="state.service.value" v-if="dashboardStore.entity === EntityType[1].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
> >
<Selector <span class="grey mr-5">{{ t("service") }}:</span>
size="small" <Selector
:value="state.endpoint.value" size="small"
:options="logStore.endpoints" :value="state.service.value"
placeholder="Select a endpoint" :options="logStore.services"
@change="changeField('endpoint', $event)" placeholder="Select a service"
:isRemote="true" @change="changeField('service', $event)"
@query="searchEndpoints" />
/> </div> -->
</div> <!-- <div
</div> class="mr-5 flex-h"
<div class="row tips"> v-if="dashboardStore.entity !== EntityType[3].value"
<b>{{ t("conditionNotice") }}</b> >
</div> <span class="grey mr-5">
<div class="flex-h row"> {{ isBrowser ? t("version") : t("instance") }}:
<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> </span>
</span> <Selector
<el-input size="small"
size="small" :value="state.instance.value"
class="inputs-max" :options="logStore.instances"
:placeholder="t('addKeywordsOfContent')" placeholder="Select a instance"
v-model="contentStr" @change="changeField('instance', $event)"
@change="addLabels('keywordsOfContent')" />
</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>
<div class="mr-5" v-show="logStore.supportQueryLogsByKeywords">
<span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span> <div class="flex-h" v-show="!isBrowser">
<span class="log-tags"> <div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
<span <span class="mr-5 grey">{{ t("keywordsOfContent") }}:</span>
class="selected" <span class="log-tags">
v-for="(item, index) in excludingKeywordsOfContent" <span
:key="`excludingKeywordsOfContent${index}`" class="selected"
> v-for="(item, index) in keywordsOfContent"
<span>{{ item }}</span> :key="`keywordsOfContent${index}`"
<span class="remove-icon" @click="removeExcludeContent(index)"> >
× <span>{{ item }}</span>
<span class="remove-icon" @click="removeContent(index)">×</span>
</span> </span>
</span> </span>
</span> <el-input
<el-input size="small"
class="inputs-max" class="inputs-max"
size="small" :placeholder="t('addKeywordsOfContent')"
:placeholder="t('addExcludingKeywordsOfContent')" v-model="contentStr"
v-model="excludingContentStr" @change="addLabels('keywordsOfContent')"
@change="addLabels('excludingKeywordsOfContent')" />
/> </div>
<el-tooltip :content="t('keywordsOfContentLogTips')"> <div class="mr-5 flex-h" v-show="logStore.supportQueryLogsByKeywords">
<span class="log-tips" v-show="!logStore.supportQueryLogsByKeywords"> <span class="grey mr-5"> {{ t("excludingKeywordsOfContent") }}: </span>
<Icon icon="help" class="mr-5" /> <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> </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> </div>
<el-button
class="search-btn"
size="small"
type="primary"
@click="searchLogs"
>
{{ t("search") }}
</el-button>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -139,6 +172,7 @@ const logStore = useLogStore();
const traceId = ref<string>(""); const traceId = ref<string>("");
const keywordsOfContent = ref<string[]>([]); const keywordsOfContent = ref<string[]>([]);
const excludingKeywordsOfContent = ref<string[]>([]); const excludingKeywordsOfContent = ref<string[]>([]);
const currentSearchTerm = ref<string>("");
const tagsList = ref<string[]>([]); const tagsList = ref<string[]>([]);
const tagsMap = ref<Option[]>([]); const tagsMap = ref<Option[]>([]);
const contentStr = ref<string>(""); const contentStr = ref<string>("");
@ -293,6 +327,9 @@ function removeExcludeContent(index: number) {
}); });
excludingContentStr.value = ""; excludingContentStr.value = "";
} }
function setSearchTerm(term: string) {
currentSearchTerm.value = term;
}
watch( watch(
() => selectorStore.currentService, () => selectorStore.currentService,
() => { () => {
@ -320,6 +357,12 @@ watch(
); );
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// .log-wrapper {
// width: 600px;
// padding-left: 40px;
// overflow-x: scroll;
// align-items: center;
// }
.inputs { .inputs {
width: 120px; width: 120px;
} }
@ -378,4 +421,22 @@ watch(
margin-left: 3px; margin-left: 3px;
cursor: pointer; 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> </style>