fix: timezone conversion issue while drilldown to logs (#9001)

- #8998

web/src/components/dashboards/PanelSchemaRenderer.vue

@@ -309,7 +309,7 @@ import { generateDurationLabel } from "../../utils/date";
 import { onBeforeMount } from "vue";
 import { useLoading } from "@/composables/useLoading";
 import useNotifications from "@/composables/useNotifications";
-import { validateSQLPanelFields } from "@/utils/dashboard/convertDataIntoUnitValue";
+import { getUTCTimestampFromZonedTimestamp, validateSQLPanelFields } from "@/utils/dashboard/convertDataIntoUnitValue";
 import { useAnnotationsData } from "@/composables/dashboard/useAnnotationsData";
 import { event } from "quasar";
 import { exportFile } from "quasar";
@@ -1347,7 +1347,7 @@ export default defineComponent({
       interval: number | undefined,
     ) => {
       if (interval && hoveredTimestamp) {
-        const startTime = hoveredTimestamp * 1000; // Convert to microseconds
+        const startTime = hoveredTimestamp; // hovertedTimestamp is in microseconds
         return {
           startTime,
           endTime: startTime + interval,
@@ -1533,7 +1533,10 @@ export default defineComponent({
 
           const hoveredTime = drilldownParams[0]?.value?.[0];
           const hoveredTimestamp = hoveredTime
-            ? new Date(hoveredTime).getTime()
+            ? getUTCTimestampFromZonedTimestamp(
+                hoveredTime,
+                store.state.timezone,
+              )
             : null;
           const breakdown = queryDetails.queries[0].fields?.breakdown || [];
 

web/src/composables/dashboard/useAnnotationsData.ts

@@ -4,6 +4,7 @@ import useNotifications from "../useNotifications";
 import { getDashboard } from "@/utils/commons";
 import { useStore } from "vuex";
 import { fromZonedTime } from "date-fns-tz";
+import { getUTCTimestampFromZonedTimestamp } from "@/utils/dashboard/convertDataIntoUnitValue";
 
 export const useAnnotationsData = (
   organization: string,
@@ -24,21 +25,6 @@ export const useAnnotationsData = (
 
   const store = useStore();
 
-  // Function to convert chart timestamp (timezone-adjusted) back to UTC for saving
-  const convertTimestampForSaving = (timestampMs: number) => {
-    if (!timestampMs) return null;
-
-    const timezone = store.state.timezone;
-
-    // Chart timestamp is in the dashboard's timezone
-    // Use fromZonedTime to convert from dashboard timezone back to UTC
-    const zonedDate = new Date(timestampMs);
-    const utcDate = fromZonedTime(zonedDate, timezone);
-    const utcMs = utcDate.getTime();
-
-    return Math.trunc(utcMs * 1000); // milliseconds to microseconds
-  };
-
   // Function
 
   // show add annotation button
@@ -77,8 +63,8 @@ export const useAnnotationsData = (
   // Handle adding or editing annotation
   const handleAddAnnotation = (start: any, end: any) => {
     annotationToAddEdit.value = {
-      start_time: convertTimestampForSaving(start),
-      end_time: convertTimestampForSaving(end),
+      start_time: getUTCTimestampFromZonedTimestamp(start, store.state.timezone),
+      end_time: getUTCTimestampFromZonedTimestamp(end, store.state.timezone),
       title: "",
       text: "",
       tags: [],

web/src/utils/dashboard/convertDataIntoUnitValue.ts

@@ -1,6 +1,7 @@
 import { date } from "quasar";
 import { CURRENT_DASHBOARD_SCHEMA_VERSION } from "@/utils/dashboard/convertDashboardSchemaVersion";
 import { getColorPalette } from "./colorPalette";
+import { fromZonedTime } from "date-fns-tz";
 
 const units: any = {
   bytes: [
@@ -1423,3 +1424,18 @@ export const getContrastColor = (
     return luminance > 0.5 ? "#000000" : "#FFFFFF";
   }
 };
+
+// Function to convert chart timestamp (timezone-adjusted) back to UTC
+export const getUTCTimestampFromZonedTimestamp = (
+  timestampMs: number,
+  currentTimeZone: string,
+) => {
+  if (!timestampMs) return null;
+
+  // Use fromZonedTime to convert from currentTimeZone back to UTC
+  const zonedDate = new Date(timestampMs);
+  const utcDate = fromZonedTime(zonedDate, currentTimeZone);
+  const utcMs = utcDate.getTime();
+
+  return Math.trunc(utcMs * 1000); // milliseconds to microseconds
+};