mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-04 05:05:24 +00:00
replaced Header component
This commit is contained in:
Peter Olu
parent
1e1bde2960
commit
6641336938
@ -185,7 +185,7 @@ limitations under the License. -->
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Filter from "../related/trace/JbFilter.vue";
|
||||
import Header from "../related/log/Header.vue";
|
||||
import Header from "../related/log/JbHeader.vue";
|
||||
|
||||
import { reactive, ref, computed, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
@ -184,7 +184,7 @@ limitations under the License. -->
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Filter from "../related/trace/JbFilter.vue";
|
||||
import Header from "../related/log/Header.vue";
|
||||
import Header from "../related/log/JbHeader.vue";
|
||||
|
||||
import { reactive, ref, computed, watch } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
@ -172,6 +172,7 @@ import dayjs from "dayjs";
|
||||
import { ref, computed, defineComponent } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useTraceStore } from "@/store/modules/trace";
|
||||
import { useJbTraceStore } from "@/store/modules/jbTrace";
|
||||
import { Option } from "@/types/app";
|
||||
import copy from "@/utils/copy";
|
||||
import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
|
||||
@ -182,13 +183,14 @@ export default defineComponent({
|
||||
components: {
|
||||
LogTable,
|
||||
},
|
||||
setup(props, ctx) {
|
||||
setup() {
|
||||
const { t } = useI18n();
|
||||
const traceStore = useTraceStore();
|
||||
const jbTraceStore = useJbTraceStore();
|
||||
const loading = ref<boolean>(false);
|
||||
const traceId = ref<string>("");
|
||||
const displayMode = computed(() => {
|
||||
return traceStore.displayMode;
|
||||
return jbTraceStore.displayMode;
|
||||
});
|
||||
const pageNum = ref<number>(1);
|
||||
const pageSize = 10;
|
||||
@ -197,7 +199,7 @@ export default defineComponent({
|
||||
const showTraceLogs = ref<boolean>(false);
|
||||
|
||||
function showTraceList() {
|
||||
traceStore.setCurrentView("traceList");
|
||||
jbTraceStore.setCurrentView("traceList");
|
||||
}
|
||||
function handleClick(ids: string[] | any) {
|
||||
let copyValue = null;
|
||||
@ -209,7 +211,7 @@ export default defineComponent({
|
||||
copy(copyValue);
|
||||
}
|
||||
function changeDisplayMode(mode: string) {
|
||||
traceStore.displayMode = mode;
|
||||
jbTraceStore.displayMode = mode;
|
||||
}
|
||||
async function changeTraceId(opt: Option[] | any) {
|
||||
traceId.value = opt[0].value;
|
||||
|
||||
750
src/views/dashboard/related/log/JbHeader.vue
Normal file
750
src/views/dashboard/related/log/JbHeader.vue
Normal file
@ -0,0 +1,750 @@
|
||||
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
|
||||
contributor license agreements. See the NOTICE file distributed with
|
||||
this work for additional information regarding copyright ownership.
|
||||
The ASF licenses this file to You under the Apache License, Version 2.0
|
||||
(the "License"); you may not use this file except in compliance with
|
||||
the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
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 log-wrapper">
|
||||
<div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
|
||||
<el-dropdown class="dark" :hide-on-click="false">
|
||||
<span class="cursor-pointer">
|
||||
Select visible columns<el-icon class="el-icon--right"
|
||||
><arrow-down
|
||||
/></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu id="toggleColumn" class="dropdownSelector">
|
||||
<el-dropdown-item style="padding: 0">
|
||||
<div
|
||||
style="width: 100%; padding: 5px 16px"
|
||||
class="flex-h items-center"
|
||||
@click="logStore.toggleAllColumns(true)"
|
||||
>
|
||||
<el-icon><View /></el-icon>
|
||||
<span style="margin-right: 10px">Show All</span>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item style="padding: 0">
|
||||
<div
|
||||
style="width: 100%; padding: 5px 16px"
|
||||
class="flex-h items-center"
|
||||
@click="logStore.toggleAllColumns(false)"
|
||||
>
|
||||
<el-icon><Hide /></el-icon>
|
||||
<span style="margin-right: 10px">Hide All</span>
|
||||
</div>
|
||||
</el-dropdown-item>
|
||||
<el-divider />
|
||||
<el-dropdown-item
|
||||
style="padding: 0"
|
||||
v-for="item in logStore.serviceLogColumn"
|
||||
:key="item.value"
|
||||
>
|
||||
<el-checkbox class="custom-checkbox" v-model="item.isVisible">
|
||||
<span>{{ item.value }}</span>
|
||||
</el-checkbox>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button class="toggle-btn mx-3danger" @click="setSearchTerm('')">
|
||||
<Icon iconSize="sm" iconName="cancel" />
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="!currentSearchTerm.length" class="flex-h items-center">
|
||||
<div v-for="(item, index) in arrayOfFilters" :key="index">
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.description"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
:class="[activeTerms.includes(item.name) ? 'active-toggle' : '']"
|
||||
class="toggle-btn mx-3"
|
||||
v-show="item.isVisible"
|
||||
@click="setSearchTerm(item.name)"
|
||||
>
|
||||
<Icon iconSize="sm" :iconName="item.iconName" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
content="Toggle columns"
|
||||
placement="bottom-start"
|
||||
>
|
||||
<el-button
|
||||
type="success"
|
||||
:class="[false ? 'active-toggle' : '']"
|
||||
class="toggle-btn mx-3"
|
||||
@click="toggleColumSelector"
|
||||
>
|
||||
<Icon iconSize="sm" iconName="epic" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div class="flex-h items-center">
|
||||
<div class="flex-h items-center" v-if="currentSearchTerm === 'service'">
|
||||
<div
|
||||
class="mr-5 flex-h items-center"
|
||||
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>
|
||||
<b v-else>{{ t("service") }} data not available</b>
|
||||
</div>
|
||||
|
||||
<div class="flex-h items-center" v-if="currentSearchTerm === 'instance'">
|
||||
<div
|
||||
class="mr-5 items-center flex-h"
|
||||
v-if="
|
||||
dashboardStore.entity !== EntityType[3].value &&
|
||||
currentSearchTerm === 'instance'
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<b v-else>{{ t("instance") }} data not available</b>
|
||||
</div>
|
||||
|
||||
<div class="flex-h items-center" v-if="currentSearchTerm === 'endpoints'">
|
||||
<div
|
||||
class="mr-5 flex-h items-center"
|
||||
v-if="
|
||||
dashboardStore.entity !== EntityType[2].value &&
|
||||
currentSearchTerm === 'endpoints'
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<b v-else>{{ t("endpoint") }} data not available</b>
|
||||
</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">
|
||||
<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>
|
||||
<keep-alive>
|
||||
<ConditionTags
|
||||
ref="logTagsComponent"
|
||||
v-if="currentSearchTerm === 'tags'"
|
||||
:type="'LOG'"
|
||||
@update="updateTags"
|
||||
/>
|
||||
</keep-alive>
|
||||
</div>
|
||||
|
||||
<div class="flex-h items-center" v-show="!isBrowser">
|
||||
<div
|
||||
class="mr-5 flex-h items-center"
|
||||
v-show="supportQueryLogsByKeywords && currentSearchTerm === 'keywords'"
|
||||
>
|
||||
<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>
|
||||
<el-input
|
||||
size="small"
|
||||
class="inputs-max"
|
||||
:placeholder="t('addKeywordsOfContent')"
|
||||
v-model="contentStr"
|
||||
@change="addLabels('keywordsOfContent')"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mr-5 flex-h items-center"
|
||||
v-show="
|
||||
supportExcludeQueryLogsByKeywords && currentSearchTerm === 'exclude'
|
||||
"
|
||||
>
|
||||
<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-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>
|
||||
|
||||
<!-- Search&cancel buttons -->
|
||||
<div
|
||||
v-if="currentSearchTerm.length && currentSearchTerm !== 'column'"
|
||||
class="flex-h items-center"
|
||||
>
|
||||
<el-button
|
||||
class="search-btn toggle-btn"
|
||||
size="small"
|
||||
type="primary"
|
||||
@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>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ArrowDown, View, Hide } from "@element-plus/icons-vue";
|
||||
import { ref, reactive, watch, computed, onMounted } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Option } from "@/types/app";
|
||||
import { useLogStore } from "@/store/modules/log";
|
||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { useSelectorStore } from "@/store/modules/selectors";
|
||||
import ConditionTags from "@/views/components/ConditionTags.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { EntityType } from "../../data";
|
||||
|
||||
const { t } = useI18n();
|
||||
const appStore = useAppStoreWithOut();
|
||||
const selectorStore = useSelectorStore();
|
||||
const dashboardStore = useDashboardStore();
|
||||
const { portal } = useRoute().query;
|
||||
const logStore = useLogStore();
|
||||
const showColumList = ref<boolean>(false);
|
||||
const traceId = ref<string>("");
|
||||
const keywordsOfContent = ref<string[]>([]);
|
||||
const excludingKeywordsOfContent = ref<string[]>([]);
|
||||
const supportQueryLogsByKeywords = computed<boolean>(() => {
|
||||
return logStore.supportQueryLogsByKeywords;
|
||||
});
|
||||
const supportExcludeQueryLogsByKeywords = computed<boolean>(() => {
|
||||
return logStore.supportQueryLogsByKeywords;
|
||||
});
|
||||
|
||||
const currentSearchTerm = ref<string>("");
|
||||
const activeTerms = ref<string[]>([]);
|
||||
const tagsList = ref<string[]>([]);
|
||||
const tagsMap = ref<Option[]>([]);
|
||||
const contentStr = ref<string>("");
|
||||
const excludingContentStr = ref<string>("");
|
||||
const isBrowser = ref<boolean>(dashboardStore.layerId === "BROWSER");
|
||||
const state = reactive<any>({
|
||||
instance: { value: "0", label: "All" },
|
||||
endpoint: { value: "0", label: "All" },
|
||||
service: { value: "", label: "" },
|
||||
});
|
||||
const logTagsComponent = ref<InstanceType<typeof ConditionTags> | null>(null);
|
||||
interface filtersObject {
|
||||
name: string;
|
||||
iconName: string;
|
||||
description: string;
|
||||
isVisible?: boolean | unknown; // one of the situations is dependent on an api call
|
||||
}
|
||||
const arrayOfFilters = ref<filtersObject[]>([
|
||||
{
|
||||
name: "traceId",
|
||||
iconName: "timeline",
|
||||
description: "Trace ID",
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: "tags",
|
||||
iconName: "epic",
|
||||
description: "Tags",
|
||||
isVisible: true,
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
iconName: "library_books",
|
||||
description: "Keywords",
|
||||
isVisible: supportQueryLogsByKeywords,
|
||||
},
|
||||
{
|
||||
name: "exclude",
|
||||
iconName: "issue-child",
|
||||
description: "Exclude keywords",
|
||||
isVisible: supportExcludeQueryLogsByKeywords,
|
||||
},
|
||||
{
|
||||
name: "instance",
|
||||
iconName: "epic",
|
||||
description: "Instance",
|
||||
isVisible: dashboardStore.entity !== EntityType[3].value,
|
||||
},
|
||||
{
|
||||
name: "service",
|
||||
iconName: "settings",
|
||||
description: "Service",
|
||||
isVisible: dashboardStore.entity === EntityType[1].value,
|
||||
},
|
||||
{
|
||||
name: "endpoints",
|
||||
iconName: "timeline",
|
||||
description: "Endpoints",
|
||||
isVisible: dashboardStore.entity !== EntityType[2].value,
|
||||
},
|
||||
]);
|
||||
onMounted(() => {
|
||||
if (portal) {
|
||||
["endpoint", "time", "contentType", "tags", "traceID"].forEach((col) =>
|
||||
logStore.hideColumns(col)
|
||||
);
|
||||
}
|
||||
});
|
||||
init();
|
||||
function toggleColumSelector() {
|
||||
showColumList.value = !showColumList.value;
|
||||
setSearchTerm("column");
|
||||
}
|
||||
|
||||
function hideTags() {
|
||||
let tagsWrap = document.querySelector(".el-select__tags");
|
||||
if (!tagsWrap) return;
|
||||
tagsWrap.style.display = "none";
|
||||
}
|
||||
async function init() {
|
||||
const resp = await logStore.getLogsByKeywords();
|
||||
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
await fetchSelectors();
|
||||
await searchLogs();
|
||||
state.instance = { value: "0", label: "All" };
|
||||
state.endpoint = { value: "0", label: "All" };
|
||||
}
|
||||
|
||||
function fetchSelectors() {
|
||||
if (dashboardStore.entity === EntityType[1].value) {
|
||||
getServices();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[2].value) {
|
||||
getInstances();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
getEndpoints();
|
||||
return;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
getInstances();
|
||||
getEndpoints();
|
||||
}
|
||||
}
|
||||
|
||||
async function getServices() {
|
||||
const resp = await logStore.getServices(dashboardStore.layerId);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.service = logStore.services[0];
|
||||
getInstances(state.service.id);
|
||||
getEndpoints(state.service.id);
|
||||
}
|
||||
|
||||
async function getEndpoints(id?: string) {
|
||||
const resp = await logStore.getEndpoints(id);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.endpoint = logStore.endpoints[0];
|
||||
}
|
||||
async function getInstances(id?: string) {
|
||||
const resp = await logStore.getInstances(id);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
return;
|
||||
}
|
||||
state.instance = logStore.instances[0];
|
||||
}
|
||||
function addToActiveTerms() {
|
||||
activeTerms.value.push(currentSearchTerm.value);
|
||||
}
|
||||
function removeFromActiveTerms() {
|
||||
activeTerms.value = activeTerms.value.filter(
|
||||
(term) => term !== currentSearchTerm.value
|
||||
);
|
||||
}
|
||||
function handleActiveSearchTerms() {
|
||||
switch (currentSearchTerm.value) {
|
||||
case "traceId":
|
||||
if (!traceId.value.length) return;
|
||||
addToActiveTerms();
|
||||
break;
|
||||
case "tags":
|
||||
if (!tagsList.value.length) return;
|
||||
addToActiveTerms();
|
||||
break;
|
||||
case "keywords":
|
||||
if (!keywordsOfContent.value.length) return;
|
||||
addToActiveTerms();
|
||||
break;
|
||||
case "exclude":
|
||||
if (!excludingKeywordsOfContent.value.length) return;
|
||||
addToActiveTerms();
|
||||
break;
|
||||
case "instance":
|
||||
addToActiveTerms();
|
||||
break;
|
||||
case "service":
|
||||
addToActiveTerms();
|
||||
break;
|
||||
case "endpoints":
|
||||
addToActiveTerms();
|
||||
break;
|
||||
}
|
||||
}
|
||||
function searchLogs() {
|
||||
handleActiveSearchTerms();
|
||||
currentSearchTerm.value = "";
|
||||
let endpoint = "",
|
||||
instance = "";
|
||||
if (dashboardStore.entity === EntityType[2].value) {
|
||||
endpoint = selectorStore.currentPod.id;
|
||||
}
|
||||
if (dashboardStore.entity === EntityType[3].value) {
|
||||
instance = selectorStore.currentPod.id;
|
||||
}
|
||||
logStore.setLogCondition({
|
||||
serviceId: selectorStore.currentService
|
||||
? selectorStore.currentService.id
|
||||
: state.service.id,
|
||||
endpointId: endpoint || state.endpoint.id || undefined,
|
||||
serviceInstanceId: instance || state.instance.id || undefined,
|
||||
queryDuration: appStore.durationTime,
|
||||
keywordsOfContent: keywordsOfContent.value,
|
||||
excludingKeywordsOfContent: excludingKeywordsOfContent.value,
|
||||
tags: tagsMap.value.length ? tagsMap.value : undefined,
|
||||
paging: { pageNum: 1, pageSize: 15, needTotal: true },
|
||||
relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
|
||||
});
|
||||
queryLogs();
|
||||
}
|
||||
async function queryLogs() {
|
||||
const res = await logStore.getLogs();
|
||||
if (res && res.errors) {
|
||||
ElMessage.error(res.errors);
|
||||
}
|
||||
}
|
||||
function changeField(type: string, opt: any) {
|
||||
state[type] = opt[0];
|
||||
if (type === "service") {
|
||||
getEndpoints(state.service.id);
|
||||
getInstances(state.service.id);
|
||||
}
|
||||
}
|
||||
async function searchEndpoints(keyword: string) {
|
||||
const resp = await logStore.getEndpoints(state.service.id, keyword);
|
||||
if (resp.errors) {
|
||||
ElMessage.error(resp.errors);
|
||||
}
|
||||
}
|
||||
function updateTags(data: { tagsMap: Array<Option>; tagsList: string[] }) {
|
||||
tagsList.value = data.tagsList;
|
||||
tagsMap.value = data.tagsMap;
|
||||
}
|
||||
function removeContent(index: number) {
|
||||
const keywordsOfContentList = keywordsOfContent.value || [];
|
||||
keywordsOfContentList.splice(index, 1);
|
||||
logStore.setLogCondition({
|
||||
keywordsOfContent: keywordsOfContentList,
|
||||
});
|
||||
contentStr.value = "";
|
||||
}
|
||||
function addLabels(type: string) {
|
||||
if (type === "keywordsOfContent" && !contentStr.value) {
|
||||
return;
|
||||
}
|
||||
if (type === "excludingKeywordsOfContent" && !excludingContentStr.value) {
|
||||
return;
|
||||
}
|
||||
if (type === "keywordsOfContent") {
|
||||
keywordsOfContent.value.push(contentStr.value);
|
||||
logStore.setLogCondition({
|
||||
[type]: keywordsOfContent.value,
|
||||
});
|
||||
contentStr.value = "";
|
||||
} else if (type === "excludingKeywordsOfContent") {
|
||||
excludingKeywordsOfContent.value.push(excludingContentStr.value);
|
||||
logStore.setLogCondition({
|
||||
[type]: excludingKeywordsOfContent.value,
|
||||
});
|
||||
excludingContentStr.value = "";
|
||||
}
|
||||
}
|
||||
function removeExcludeContent(index: number) {
|
||||
excludingKeywordsOfContent.value.splice(index, 1);
|
||||
logStore.setLogCondition({
|
||||
excludingKeywordsOfContent: excludingKeywordsOfContent.value,
|
||||
});
|
||||
excludingContentStr.value = "";
|
||||
}
|
||||
function setSearchTerm(term: string) {
|
||||
currentSearchTerm.value = term;
|
||||
if (term === "column") {
|
||||
setTimeout(() => {
|
||||
hideTags();
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
function cancelSearchTerm() {
|
||||
switch (currentSearchTerm.value) {
|
||||
case "traceId":
|
||||
traceId.value = "";
|
||||
break;
|
||||
case "tags":
|
||||
tagsList.value = [];
|
||||
tagsMap.value = [];
|
||||
logTagsComponent.value?.emptyTags();
|
||||
break;
|
||||
case "keywords":
|
||||
keywordsOfContent.value = [];
|
||||
break;
|
||||
case "exclude":
|
||||
excludingKeywordsOfContent.value = [];
|
||||
break;
|
||||
case "instance":
|
||||
state.instance = { value: "0", label: "All" };
|
||||
break;
|
||||
case "endpoints":
|
||||
state.endpoint = { value: "0", label: "All" };
|
||||
getEndpoints();
|
||||
break;
|
||||
case "service":
|
||||
state.service = { value: "", label: "" };
|
||||
break;
|
||||
}
|
||||
removeFromActiveTerms();
|
||||
currentSearchTerm.value = "";
|
||||
searchLogs();
|
||||
}
|
||||
watch(
|
||||
() => selectorStore.currentService,
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => [selectorStore.currentPod],
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[0].value) {
|
||||
return;
|
||||
}
|
||||
init();
|
||||
}
|
||||
);
|
||||
watch(
|
||||
() => appStore.durationTime,
|
||||
() => {
|
||||
if (dashboardStore.entity === EntityType[1].value) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#toggleColumn.el-dropdown-menu {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.el-checkbox.custom-checkbox {
|
||||
width: 100%;
|
||||
padding: 5px 16px;
|
||||
}
|
||||
.dropdownSelector {
|
||||
background: var(--nice-black);
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-checkbox .el-checkbox__input.is-checked + .el-checkbox__label,
|
||||
.custom-checkbox .el-checkbox__label {
|
||||
color: var(--spp-white) !important;
|
||||
}
|
||||
.inputs {
|
||||
width: 120px;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.row {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.inputs-max {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.traceId {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.log-tag {
|
||||
width: 30%;
|
||||
border-style: unset;
|
||||
outline: 0;
|
||||
border: 1px solid #ccc;
|
||||
height: 30px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.log-tags {
|
||||
padding: 1px 5px 0 0;
|
||||
border-radius: 3px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.selected {
|
||||
display: inline-block;
|
||||
padding: 0 3px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
color: #3d444f;
|
||||
border: 1px dashed #aaa;
|
||||
font-size: 12px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.remove-icon {
|
||||
display: inline-block;
|
||||
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: rgba(4, 147, 114, 1) !important;
|
||||
span {
|
||||
color: #275410 !important;
|
||||
}
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.space-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||||
background: transparent;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
|
||||
width: 100%;
|
||||
padding: 0 32px 0 20px;
|
||||
}
|
||||
.el-select-dropdown__item.selected {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0 32px 0 20px;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user