link log from trace

This commit is contained in:
Qiuxia Fan 2022-07-26 16:43:35 +08:00
parent d5c263e271
commit 7ae484671b
3 changed files with 40 additions and 24 deletions

View File

@ -39,6 +39,7 @@ interface DashboardState {
dashboards: DashboardItem[]; dashboards: DashboardItem[];
currentDashboard: Nullable<DashboardItem>; currentDashboard: Nullable<DashboardItem>;
editMode: boolean; editMode: boolean;
currentTabIndex: number;
} }
export const dashboardStore = defineStore({ export const dashboardStore = defineStore({
@ -56,6 +57,7 @@ export const dashboardStore = defineStore({
dashboards: [], dashboards: [],
currentDashboard: null, currentDashboard: null,
editMode: false, editMode: false,
currentTabIndex: 0,
}), }),
actions: { actions: {
setLayout(data: LayoutConfig[]) { setLayout(data: LayoutConfig[]) {
@ -189,6 +191,7 @@ export const dashboardStore = defineStore({
this.activedGridItem = index; this.activedGridItem = index;
}, },
setActiveTabIndex(index: number, target?: number) { setActiveTabIndex(index: number, target?: number) {
this.currentTabIndex = index;
const m = target || this.activedGridItem; const m = target || this.activedGridItem;
const idx = this.layout.findIndex((d: LayoutConfig) => d.i === m); const idx = this.layout.findIndex((d: LayoutConfig) => d.i === m);
if (idx < 0) { if (idx < 0) {

View File

@ -259,6 +259,26 @@ export default defineComponent({
} }
} }
); );
watch(
() => dashboardStore.currentTabIndex,
() => {
activeTabIndex.value = dashboardStore.currentTabIndex;
dashboardStore.activeGridItem(props.data.i);
dashboardStore.selectWidget(props.data);
const l = dashboardStore.layout.findIndex(
(d: LayoutConfig) => d.i === props.data.i
);
dashboardStore.setCurrentTabItems(
dashboardStore.layout[l].children[activeTabIndex.value].children
);
needQuery.value = true;
if (route.params.activeTabIndex) {
let p = location.href.split("/tab/")[0];
p = p + "/tab/" + activeTabIndex.value;
history.replaceState({}, "", p);
}
}
);
return { return {
handleClick, handleClick,
layoutUpdatedEvent, layoutUpdatedEvent,

View File

@ -123,8 +123,6 @@ 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";
@ -134,7 +132,6 @@ 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",
@ -146,7 +143,6 @@ export default defineComponent({
/*global Nullable */ /*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>("");
@ -178,8 +174,12 @@ export default defineComponent({
async function searchTraceLogs() { async function searchTraceLogs() {
const { widgets } = getDashboard(dashboardStore.currentDashboard); const { widgets } = getDashboard(dashboardStore.currentDashboard);
const widget = const widget = widgets.filter(
widgets.filter((d: { type: string }) => d.type === "Log")[0] || {}; (d: { type: string }) => d.type === "Log"
)[0];
if (!widget) {
return;
}
const item = { const item = {
...widget, ...widget,
filters: { filters: {
@ -190,25 +190,18 @@ export default defineComponent({
dashboardStore.setWidget(item); dashboardStore.setWidget(item);
const logTabIndex = widget.id.split("-"); const logTabIndex = widget.id.split("-");
const traceTabindex = options?.id?.split("-") || []; const traceTabindex = options?.id?.split("-") || [];
if (logTabIndex[1] === traceTabindex[1] || logTabIndex[1] === undefined) {
let container: Nullable<Element>; let container: Nullable<Element>;
if (logTabIndex[1] === undefined) { if (logTabIndex[1] === undefined) {
container = document.querySelector(".ds-main"); container = document.querySelector(".ds-main");
} else { } else {
container = document.querySelector(".tab-layout"); container = document.querySelector(".tab-layout");
} }
if (container && options) { if (logTabIndex[1] && logTabIndex[1] !== traceTabindex[1]) {
container.scrollTop = options.y * 10; dashboardStore.setActiveTabIndex(Number(logTabIndex[1]));
} }
} else { if (container && widget) {
let path = ""; container.scrollTop = widget.y * 10;
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;
} }
} }