update event association

src/types/dashboard.d.ts

@@ -38,7 +38,8 @@ export interface LayoutConfig {
   metricConfig?: MetricConfigOpt[];
   id?: string;
   associate?: { widgetId: string }[];
-  filters?: { dataIndex: number; sourceId: string };
+  eventAssociate?: boolean;
+  filters?: { dataIndex: number; sourceId: string; isRange?: boolean };
 }
 
 export type MetricConfigOpt = {

src/views/dashboard/configuration/Event.vue

@@ -14,7 +14,7 @@ limitations under the License. -->
   <div>
     <span class="label">{{ t("enableAssociate") }}</span>
     <el-switch
-      v-model="associate"
+      v-model="eventAssociate"
       active-text="Yes"
       inactive-text="No"
       @change="updateConfig"
@@ -28,12 +28,12 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
 const dashboardStore = useDashboardStore();
-const associate = ref(dashboardStore.selectedGrid.associate || false);
+const eventAssociate = ref(dashboardStore.selectedGrid.eventAssociate || false);
 
 function updateConfig() {
   dashboardStore.selectedGrid = {
     ...dashboardStore.selectedGrid,
-    associate,
+    eventAssociate,
   };
   dashboardStore.selectWidget(dashboardStore.selectedGrid);
 }

src/views/dashboard/related/event/Content.vue

@@ -19,15 +19,23 @@ limitations under the License. -->
 import { ref, watch, onMounted } from "vue";
 import dayjs from "dayjs";
 import { useThrottleFn } from "@vueuse/core";
+import { Event } from "@/types/events";
+import { LayoutConfig } from "@/types/dashboard";
 import { useEventStore } from "@/store/modules/event";
 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 dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
 const eventStore = useEventStore();
 /*global Nullable */
 const timeline = ref<Nullable<HTMLDivElement>>(null);
 const visGraph = ref<Nullable<any>>(null);
 const oldVal = ref<{ width: number; height: number }>({ width: 0, height: 0 });
+const dashboardStore = useDashboardStore();
+const appStore = useAppStoreWithOut();
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   new Date(dayjs(date).format(pattern));
 const visDate = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
@@ -49,12 +57,12 @@ function visTimeline() {
     visGraph.value.destroy();
   }
   const h = timeline.value.getBoundingClientRect().height;
-  const events = eventStore.events.map((d, index) => {
+  const events = eventStore.events.map((d: Event, index: number) => {
     return {
       id: index + 1,
       content: d.name,
-      start: dateFormat(d.startTime),
-      end: dateFormat(d.endTime),
+      start: dateFormat(Number(d.startTime)),
+      end: dateFormat(Number(d.endTime)),
       data: d,
       className: d.type,
     };
@@ -68,7 +76,7 @@ function visTimeline() {
     autoResize: false,
     tooltip: {
       overflowMethod: "cap",
-      template(item) {
+      template(item: Event | any) {
         const data = item.data || {};
         let tmp = `<div>ID: ${data.uuid || ""}</div>
         <div>Name: ${data.name || ""}</div>
@@ -88,6 +96,43 @@ function visTimeline() {
     },
   };
   visGraph.value = new Timeline(timeline.value, items, options);
+  visGraph.value.on("select", (properties: { items: number[] }) => {
+    if (!dashboardStore.selectedGrid.eventAssociate) {
+      return;
+    }
+    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 = items[index];
+    for (const widget of widgets) {
+      const startTime: string = dateFormatTime(
+        new Date(i.startTime),
+        appStore.duration.step
+      );
+      const endTime: string = dateFormatTime(
+        new Date(i.endTime),
+        appStore.duration.step
+      );
+      widget.filters = {
+        sourceId: dashboardStore.selectedGrid.id || "",
+        isRange: true,
+        duration: {
+          startTime,
+          endTime,
+        },
+      };
+      dashboardStore.setWidget(widget);
+    }
+  });
 }
 function resize() {
   const observer = new ResizeObserver((entries) => {