diff --git a/src/components/Graph.vue b/src/components/Graph.vue index 2ba6b8ad..1822fbbf 100644 --- a/src/components/Graph.vue +++ b/src/components/Graph.vue @@ -167,7 +167,7 @@ function updateOptions() { function viewTrace() { const item = associateProcessor().traceFilters(currentParams.value); - + console.log(item); traceOptions.value = { ...traceOptions.value, filters: item, diff --git a/src/hooks/useAssociateProcessor.ts b/src/hooks/useAssociateProcessor.ts index 4de523d1..3ae4ea4d 100644 --- a/src/hooks/useAssociateProcessor.ts +++ b/src/hooks/useAssociateProcessor.ts @@ -17,6 +17,7 @@ import { useAppStoreWithOut } from "@/store/modules/app"; import dateFormatStep from "@/utils/dateFormat"; import getLocalTime from "@/utils/localtime"; +import { QueryOrders } from "@/views/dashboard/data"; export default function associateProcessor() { function eventAssociate(props: any) { @@ -89,9 +90,19 @@ export default function associateProcessor() { step, }; } - + let queryOrder = QueryOrders[1].value; + let status = undefined; + if (currentParams.seriesName.includes("_sla")) { + queryOrder = QueryOrders[0].value; + status = "ERROR"; + } + if (currentParams.seriesName.includes("_apdex")) { + status = "ERROR"; + } const item = { duration, + queryOrder, + status, }; return item; } diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts index 36c55dd4..60bf8e67 100644 --- a/src/store/modules/trace.ts +++ b/src/store/modules/trace.ts @@ -22,6 +22,7 @@ import graphql from "@/graphql"; import { AxiosResponse } from "axios"; import { useAppStoreWithOut } from "@/store/modules/app"; import { useSelectorStore } from "@/store/modules/selectors"; +import { QueryOrders } from "@/views/dashboard/data"; interface TraceState { services: Service[]; @@ -47,7 +48,7 @@ export const traceStore = defineStore({ conditions: { queryDuration: useAppStoreWithOut().durationTime, traceState: "ALL", - queryOrder: "BY_START_TIME", + queryOrder: QueryOrders[0].value, paging: { pageNum: 1, pageSize: 20 }, }, traceSpanLogs: [], @@ -56,6 +57,7 @@ export const traceStore = defineStore({ actions: { setTraceCondition(data: any) { this.conditions = { ...this.conditions, ...data }; + console.log(this.conditions.queryOrder); }, setCurrentTrace(trace: Trace) { this.currentTrace = trace; @@ -71,7 +73,7 @@ export const traceStore = defineStore({ queryDuration: useAppStoreWithOut().durationTime, paging: { pageNum: 1, pageSize: 20 }, traceState: "ALL", - queryOrder: "BY_START_TIME", + queryOrder: QueryOrders[0].value, }; }, async getServices(layer: string) { diff --git a/src/types/dashboard.d.ts b/src/types/dashboard.d.ts index e562722d..d14bd58f 100644 --- a/src/types/dashboard.d.ts +++ b/src/types/dashboard.d.ts @@ -39,20 +39,23 @@ export interface LayoutConfig { id?: string; associate?: { widgetId: string }[]; eventAssociate?: boolean; - filters?: { - dataIndex: number; - sourceId: string; - isRange?: boolean; - duration?: { - startTime: string; - endTime: string; - }; - traceId?: string; - spanId?: string; - segmentId?: string; - id?: string; - }; + filters?: Filters; } +export type Filters = { + dataIndex: number; + sourceId: string; + isRange?: boolean; + duration?: { + startTime: string; + endTime: string; + }; + traceId?: string; + spanId?: string; + segmentId?: string; + id?: string; + queryOrder?: string; + status?: string; +}; export type MetricConfigOpt = { unit?: string; diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue index 1a4709ff..9ea4fa6e 100644 --- a/src/views/dashboard/related/trace/Filter.vue +++ b/src/views/dashboard/related/trace/Filter.vue @@ -95,17 +95,15 @@ limitations under the License. --> import { ref, reactive, watch, onUnmounted } from "vue"; import type { PropType } from "vue"; import { useI18n } from "vue-i18n"; -import { Option } from "@/types/app"; -import { Status } from "../../data"; +import { Option, DurationTime } from "@/types/app"; import { useTraceStore } from "@/store/modules/trace"; 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"; +import { EntityType, QueryOrders, Status } from "../../data"; import { LayoutConfig } from "@/types/dashboard"; -import { DurationTime } from "@/types/app"; /*global defineProps, Recordable */ const props = defineProps({ @@ -115,28 +113,29 @@ const props = defineProps({ default: () => ({ graph: {} }), }, }); -const traceId = ref( - (props.data.filters && props.data.filters.traceId) || "" -); +const filters = reactive(props.data.filters || {}); +const traceId = ref(filters.traceId || ""); const { t } = useI18n(); const appStore = useAppStoreWithOut(); const selectorStore = useSelectorStore(); const dashboardStore = useDashboardStore(); const traceStore = useTraceStore(); -const duration = ref( - (props.data.filters && props.data.filters.duration) || appStore.durationTime -); +const duration = ref(filters.duration || appStore.durationTime); const minTraceDuration = ref(); const maxTraceDuration = ref(); const tagsList = ref([]); const tagsMap = ref([]); const state = reactive({ - status: { label: "All", value: "ALL" }, + status: filters.status === "ERROR" ? Status[2] : Status[0], instance: { value: "0", label: "All" }, endpoint: { value: "0", label: "All" }, service: { value: "", label: "" }, }); - +if (filters.queryOrder) { + traceStore.setTraceCondition({ + queryOrder: filters.queryOrder, + }); +} if (props.needQuery) { init(); } @@ -189,7 +188,10 @@ async function getInstances(id?: string) { } function getCurrentNode(arr: { id: string }[]) { let item; - if (props.data.filters && props.data.filters.id) { + if (!props.data.filters) { + return item; + } + if (props.data.filters.id) { item = arr.find((d: { id: string }) => d.id === props.data.filters?.id); } return item; @@ -198,7 +200,7 @@ function setCondition() { let param: any = { traceState: state.status.value || "ALL", tags: tagsMap.value.length ? tagsMap.value : undefined, - queryOrder: traceStore.conditions.queryOrder || "BY_DURATION", + queryOrder: traceStore.conditions.queryOrder || QueryOrders[1].value, queryDuration: duration.value, minTraceDuration: Number(minTraceDuration.value), maxTraceDuration: Number(maxTraceDuration.value), @@ -288,17 +290,27 @@ watch( } } ); +// Event widget associate with trace widget watch( () => props.data.filters, (newJson, oldJson) => { - if (props.data.filters) { - if (JSON.stringify(newJson) === JSON.stringify(oldJson)) { - return; - } - traceId.value = props.data.filters.traceId || ""; - duration.value = props.data.filters.duration || appStore.durationTime; - init(); + if (!props.data.filters) { + return; } + if (JSON.stringify(newJson) === JSON.stringify(oldJson)) { + return; + } + traceId.value = props.data.filters.traceId || ""; + duration.value = props.data.filters.duration || appStore.durationTime; + // if (props.data.filters.queryOrder) { + // traceStore.setTraceCondition({ + // queryOrder: props.data.filters.queryOrder, + // }); + // } + // if (props.data.filters.status) { + // state.status = filters.status === "ERROR" ? Status[2] : Status[0]; + // } + init(); } );