This commit is contained in:
Qiuxia Fan 2022-07-26 15:40:29 +08:00
parent 0322264ef3
commit d5c263e271
2 changed files with 31 additions and 16 deletions

View File

@ -15,11 +15,7 @@ limitations under the License. -->
<template> <template>
<div> <div>
<span class="grey">{{ t("tags") }}: </span> <span class="grey">{{ t("tags") }}: </span>
<span <span v-if="tagsList.length" class="trace-tags">
v-if="tagsList.length"
class="trace-tags"
: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>
@ -33,13 +29,7 @@ limitations under the License. -->
@change="addLabels" @change="addLabels"
:placeholder="t('addTags')" :placeholder="t('addTags')"
/> />
<el-popover <el-popover v-else trigger="click" :visible="visible" width="300px">
v-else
trigger="click"
style="margin: 10px 0 0 -130px"
:visible="visible"
width="300px"
>
<template #reference> <template #reference>
<el-input <el-input
size="small" size="small"
@ -226,7 +216,6 @@ watch(
padding: 2px 5px; padding: 2px 5px;
border-radius: 3px; border-radius: 3px;
width: 250px; width: 250px;
z-index: 999;
} }
.remove-icon { .remove-icon {

View File

@ -123,6 +123,8 @@ limitations under the License. -->
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref, defineComponent, computed, inject } from "vue"; import { ref, defineComponent, computed, inject } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import router from "@/router";
import { useTraceStore } from "@/store/modules/trace"; import { useTraceStore } from "@/store/modules/trace";
import { Option } from "@/types/app"; import { Option } from "@/types/app";
import copy from "@/utils/copy"; import copy from "@/utils/copy";
@ -132,6 +134,7 @@ import { ElMessage } from "element-plus";
import getDashboard from "@/hooks/useDashboardsSession"; import getDashboard from "@/hooks/useDashboardsSession";
import { useDashboardStore } from "@/store/modules/dashboard"; import { useDashboardStore } from "@/store/modules/dashboard";
import { LayoutConfig } from "@/types/dashboard"; import { LayoutConfig } from "@/types/dashboard";
import { local } from "d3-selection";
export default defineComponent({ export default defineComponent({
name: "TraceDetail", name: "TraceDetail",
@ -140,8 +143,10 @@ export default defineComponent({
LogTable, LogTable,
}, },
setup() { setup() {
/*global Nullable */
const options: LayoutConfig | undefined = inject("options"); const options: LayoutConfig | undefined = inject("options");
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute();
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const traceId = ref<string>(""); const traceId = ref<string>("");
@ -156,7 +161,6 @@ export default defineComponent({
); );
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); dayjs(date).format(pattern);
const showTraceLogs = ref<boolean>(false);
function handleClick() { function handleClick() {
copy(traceId.value || traceStore.currentTrace.traceIds[0].value); copy(traceId.value || traceStore.currentTrace.traceIds[0].value);
@ -174,7 +178,8 @@ export default defineComponent({
async function searchTraceLogs() { async function searchTraceLogs() {
const { widgets } = getDashboard(dashboardStore.currentDashboard); const { widgets } = getDashboard(dashboardStore.currentDashboard);
const widget = widgets.filter((d: { type: string }) => d.type === "Log"); const widget =
widgets.filter((d: { type: string }) => d.type === "Log")[0] || {};
const item = { const item = {
...widget, ...widget,
filters: { filters: {
@ -183,6 +188,28 @@ export default defineComponent({
}, },
}; };
dashboardStore.setWidget(item); dashboardStore.setWidget(item);
const logTabIndex = widget.id.split("-");
const traceTabindex = options?.id?.split("-") || [];
if (logTabIndex[1] === traceTabindex[1] || logTabIndex[1] === undefined) {
let container: Nullable<Element>;
if (logTabIndex[1] === undefined) {
container = document.querySelector(".ds-main");
} else {
container = document.querySelector(".tab-layout");
}
if (container && options) {
container.scrollTop = options.y * 10;
}
} else {
let path = "";
if (route.params.activeTabIndex === undefined) {
path = location.href + "/tab/" + logTabIndex[1];
} else {
const p = location.href.split("/tab/")[0];
path = p + "/tab/" + logTabIndex[1];
}
location.href = path;
}
} }
function turnLogsPage(page: number) { function turnLogsPage(page: number) {
@ -197,7 +224,6 @@ export default defineComponent({
handleClick, handleClick,
t, t,
searchTraceLogs, searchTraceLogs,
showTraceLogs,
turnLogsPage, turnLogsPage,
pageSize, pageSize,
pageNum, pageNum,