send filters

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,

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;
   }

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) {

src/types/dashboard.d.ts

@@ -39,20 +39,23 @@ export interface LayoutConfig {
   id?: string;
   associate?: { widgetId: string }[];
   eventAssociate?: boolean;
-  filters?: {
+  filters?: Filters;
-    dataIndex: number;
-    sourceId: string;
-    isRange?: boolean;
-    duration?: {
-      startTime: string;
-      endTime: string;
-    };
-    traceId?: string;
-    spanId?: string;
-    segmentId?: string;
-    id?: string;
-  };
 }
+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;

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 { Option, DurationTime } from "@/types/app";
-import { Status } from "../../data";
 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<string>(
+const filters = reactive<Recordable>(props.data.filters || {});
-  (props.data.filters && props.data.filters.traceId) || ""
+const traceId = ref<string>(filters.traceId || "");
-);
 const { t } = useI18n();
 const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
-const duration = ref<DurationTime>(
+const duration = ref<DurationTime>(filters.duration || appStore.durationTime);
-  (props.data.filters && props.data.filters.duration) || appStore.durationTime
-);
 const minTraceDuration = ref<number>();
 const maxTraceDuration = ref<number>();
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const state = reactive<Recordable>({
-  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 (!props.data.filters) {
-      if (JSON.stringify(newJson) === JSON.stringify(oldJson)) {
+      return;
-        return;
-      }
-      traceId.value = props.data.filters.traceId || "";
-      duration.value = props.data.filters.duration || appStore.durationTime;
-      init();
     }
+    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();
   }
 );
 </script>