feat: event widget associates with trace and log widget (#130)

2025-10-14 11:21:29 +00:00 · 2022-07-29 16:34:36 +08:00
parent dc8e4bf273
commit 3b3e790dd9
8 changed files with 260 additions and 104 deletions
--- a/src/views/dashboard/related/event/Content.vue
+++ b/src/views/dashboard/related/event/Content.vue
@@ -26,8 +26,9 @@ import { DataSet, Timeline } from "vis-timeline/standalone";
 import "vis-timeline/styles/vis-timeline-graph2d.css";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import getDashboard from "@/hooks/useDashboardsSession";
-import { dateFormatTime } from "@/utils/dateFormat";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";

 const eventStore = useEventStore();
 /*global defineProps, Nullable */
@@ -105,53 +106,139 @@ function visTimeline() {
      return;
    }
    dashboardStore.selectWidget(props.data);
-    const all = getDashboard(dashboardStore.currentDashboard).widgets;
-    const widgets = all.filter(
-      (d: { value: string; label: string } & LayoutConfig) => {
-        const isLinear = ["Bar", "Line", "Area"].includes(
-          (d.graph && d.graph.type) || ""
-        );
-        if (isLinear) {
-          return d;
-        }
-      }
-    );
-    const index = properties.items[0];
-    const i = events[index - 1 || 0];
-
-    for (const widget of widgets) {
-      let end = i.end;
-      if (!isNaN(index)) {
-        let diff = 60000;
-        switch (appStore.duration.step) {
-          case "MINUTE":
-            diff = 60000;
-            break;
-          case "HOUR":
-            diff = 3600000;
-            break;
-          case "DAY":
-            diff = 3600000 * 24;
-            break;
-        }
-        if (!i.end || i.end.getTime() - i.start.getTime() < diff) {
-          end = i.start.getTime() + diff;
-        }
-      }
-      const startTime = dateFormatTime(i.start, appStore.duration.step);
-      const endTime = dateFormatTime(new Date(end), appStore.duration.step);
-      widget.filters = {
-        sourceId: dashboardStore.selectedGrid.id || "",
-        isRange: true,
-        duration: {
-          startTime,
-          endTime,
-        },
-      };
-      dashboardStore.setWidget(widget);
-    }
+    const dashboard = getDashboard(dashboardStore.currentDashboard).widgets;
+    associateMetrics(properties.items, events, dashboard);
+    associateTraceLog(properties.items, events, dashboard);
  });
 }
+function associateTraceLog(
+  items: number[],
+  events: {
+    id: number;
+    content: string;
+    start: Date;
+    end: Date;
+    data: unknown;
+    className: string;
+  }[],
+  dashboard: LayoutConfig[]
+) {
+  const widgets = dashboard.filter((d: { type: string }) =>
+    ["Trace", "Log"].includes(d.type)
+  );
+  const index = items[0];
+  const i = events[index - 1 || 0];
+  for (const widget of widgets) {
+    if (isNaN(index)) {
+      const item = {
+        ...widget,
+        filters: {
+          sourceId: props.data.id || "",
+          duration: null,
+        },
+      };
+      dashboardStore.setWidget(item);
+    } else {
+      const { start, end } = setEndTime(i.start, i.end);
+      const item = {
+        ...widget,
+        filters: {
+          sourceId: props.data.id || "",
+          duration: {
+            start: dateFormatStep(
+              getLocalTime(appStore.utc, start),
+              appStore.duration.step,
+              true
+            ),
+            end: dateFormatStep(
+              getLocalTime(appStore.utc, end),
+              appStore.duration.step,
+              true
+            ),
+            step: appStore.duration.step,
+          },
+        },
+      };
+      dashboardStore.setWidget(item);
+    }
+  }
+}
+function associateMetrics(
+  items: number[],
+  events: {
+    id: number;
+    content: string;
+    start: Date;
+    end: Date;
+    data: unknown;
+    className: string;
+  }[],
+  dashboard: LayoutConfig[]
+) {
+  const widgets = dashboard.filter((d: LayoutConfig) => {
+    const isLinear = ["Bar", "Line", "Area"].includes(
+      (d.graph && d.graph.type) || ""
+    );
+    if (isLinear) {
+      return d;
+    }
+  });
+  const index = items[0];
+  const i = events[index - 1 || 0];
+
+  for (const widget of widgets) {
+    if (isNaN(index)) {
+      const item = {
+        ...widget,
+        filters: {
+          sourceId: dashboardStore.selectedGrid.id || "",
+          isRange: true,
+          duration: {
+            startTime: null,
+            endTime: null,
+          },
+        },
+      };
+      dashboardStore.setWidget(item);
+    } else {
+      const { start, end } = setEndTime(i.start, i.end);
+      const startTime = dateFormatTime(start, appStore.duration.step);
+      const endTime = dateFormatTime(end, appStore.duration.step);
+      const item = {
+        ...widget,
+        filters: {
+          sourceId: dashboardStore.selectedGrid.id || "",
+          isRange: true,
+          duration: {
+            startTime,
+            endTime,
+          },
+        },
+      };
+      dashboardStore.setWidget(item);
+    }
+  }
+}
+function setEndTime(start: Date, end: Date) {
+  let time: Date | number = end;
+  let diff = 60000;
+  switch (appStore.duration.step) {
+    case "MINUTE":
+      diff = 60000;
+      break;
+    case "HOUR":
+      diff = 3600000;
+      break;
+    case "DAY":
+      diff = 3600000 * 24;
+      break;
+  }
+  if (!end || end.getTime() - start.getTime() < diff) {
+    time = start.getTime() + diff;
+  }
+  return { start, end: new Date(time) };
+}
+
 function resize() {
  const observer = new ResizeObserver((entries) => {
    const entry = entries[0];
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -143,6 +143,7 @@ import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 import { ErrorCategory } from "./data";
 import { LayoutConfig } from "@/types/dashboard";
+import { DurationTime } from "@/types/app";

 /*global  defineProps, Recordable */
 const props = defineProps({
@@ -160,6 +161,9 @@ const logStore = useLogStore();
 const traceId = ref<string>(
  (props.data.filters && props.data.filters.traceId) || ""
 );
+const duration = ref<DurationTime>(
+  (props.data.filters && props.data.filters.duration) || appStore.durationTime
+);
 const keywordsOfContent = ref<string[]>([]);
 const excludingKeywordsOfContent = ref<string[]>([]);
 const tagsList = ref<string[]>([]);
@@ -252,7 +256,7 @@ function searchLogs() {
      pagePathId: endpoint || state.endpoint.id || undefined,
      serviceVersionId: instance || state.instance.id || undefined,
      paging: { pageNum: 1, pageSize: 15 },
-      queryDuration: appStore.durationTime,
+      queryDuration: duration,
      category: state.category.value,
    });
  } else {
@@ -339,13 +343,14 @@ function removeExcludeContent(index: number) {
  excludingContentStr.value = "";
 }
 onUnmounted(() => {
-  logStore.resetCondition();
+  logStore.resetState();
  const item = {
    ...props.data,
    filters: undefined,
  };
  dashboardStore.setWidget(item);
  traceId.value = "";
+  duration.value = appStore.durationTime;
 });
 watch(
  () => selectorStore.currentService,
@@ -375,12 +380,12 @@ watch(
 watch(
  () => props.data.filters,
  (newJson, oldJson) => {
-    console.log(props.data.filters);
    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();
    }
  }
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -105,6 +105,7 @@ import ConditionTags from "@/views/components/ConditionTags.vue";
 import { ElMessage } from "element-plus";
 import { EntityType } from "../../data";
 import { LayoutConfig } from "@/types/dashboard";
+import { DurationTime } from "@/types/app";

 /*global defineProps, Recordable */
 const props = defineProps({
@@ -122,6 +123,9 @@ const appStore = useAppStoreWithOut();
 const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
+const duration = ref<DurationTime>(
+  (props.data.filters && props.data.filters.duration) || appStore.durationTime
+);
 const minTraceDuration = ref<number>();
 const maxTraceDuration = ref<number>();
 const tagsList = ref<string[]>([]);
@@ -198,7 +202,7 @@ function searchTraces() {
    endpointId: endpoint || state.endpoint.id || undefined,
    serviceInstanceId: instance || state.instance.id || undefined,
    traceState: state.status.value || "ALL",
-    queryDuration: appStore.durationTime,
+    queryDuration: duration.value,
    minTraceDuration: Number(minTraceDuration.value),
    maxTraceDuration: Number(maxTraceDuration.value),
    queryOrder: "BY_DURATION",
@@ -231,13 +235,14 @@ async function searchEndpoints(keyword: string) {
  }
 }
 onUnmounted(() => {
-  traceStore.resetCondition();
+  traceStore.resetState();
  const item = {
    ...props.data,
    filters: undefined,
  };
  dashboardStore.setWidget(item);
  traceId.value = "";
+  duration.value = appStore.durationTime;
 });
 watch(
  () => [selectorStore.currentPod],
@@ -273,6 +278,7 @@ watch(
        return;
      }
      traceId.value = props.data.filters.traceId || "";
+      duration.value = props.data.filters.duration || appStore.durationTime;
      init();
    }
  }