feat: Display flow logs timestamps in local time zone (#7477)

⬆️ (frontend): upgrade moment-timezone dependency to version 0.5.48
✨ (frontend): add new utility function convertUTCToLocalTimezone to convert UTC timestamps to local timezone in flowLogsModal and utils files

src/frontend/package-lock.json

@@ -59,6 +59,7 @@
         "lucide-react": "^0.469.0",
         "million": "^3.1.11",
         "moment": "^2.30.1",
+        "moment-timezone": "^0.5.48",
         "openseadragon": "^4.1.1",
         "p-debounce": "^4.0.0",
         "pako": "^2.1.0",
@@ -11761,6 +11762,17 @@
         "node": "*"
       }
     },
+    "node_modules/moment-timezone": {
+      "version": "0.5.48",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz",
+      "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==",
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "11.18.1",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",

src/frontend/package.json

@@ -54,6 +54,7 @@
     "lucide-react": "^0.469.0",
     "million": "^3.1.11",
     "moment": "^2.30.1",
+    "moment-timezone": "^0.5.48",
     "openseadragon": "^4.1.1",
     "p-debounce": "^4.0.0",
     "pako": "^2.1.0",
@@ -148,4 +149,4 @@
     "ua-parser-js": "^1.0.38",
     "vite": "^5.4.16"
   }
-}
+}

src/frontend/src/modals/flowLogsModal/index.tsx

@@ -4,6 +4,7 @@ import TableComponent from "@/components/core/parameterRenderComponent/component
 import { useGetTransactionsQuery } from "@/controllers/API/queries/transactions";
 import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import { FlowSettingsPropsType } from "@/types/components";
+import { convertUTCToLocalTimezone } from "@/utils/utils";
 import { ColDef, ColGroupDef } from "ag-grid-community";
 import { useCallback, useEffect, useState } from "react";
 import BaseModal from "../baseModal";
@@ -31,6 +32,13 @@ export default function FlowLogsModal({
   useEffect(() => {
     if (data) {
       const { columns, rows } = data;
+
+      if (data?.rows?.length > 0) {
+        data.rows.map((row: any) => {
+          row.timestamp = convertUTCToLocalTimezone(row.timestamp);
+        });
+      }
+
       setColumns(columns.map((col) => ({ ...col, editable: true })));
       setRows(rows);
     }

src/frontend/src/utils/utils.ts

@@ -4,6 +4,8 @@ import useAlertStore from "@/stores/alertStore";
 import { ColumnField, FormatterType } from "@/types/utils/functions";
 import { ColDef, ColGroupDef, ValueParserParams } from "ag-grid-community";
 import clsx, { ClassValue } from "clsx";
+import moment from "moment";
+import "moment-timezone";
 import { twMerge } from "tailwind-merge";
 import {
   DRAG_EVENTS_CUSTOM_TYPESS,
@@ -865,3 +867,8 @@ export function setCookie(
 export function testIdCase(str: string): string {
   return str.toLowerCase().replace(/\s+/g, "_");
 }
+
+export const convertUTCToLocalTimezone = (timestamp: string) => {
+  const localTimezone = moment.tz.guess();
+  return moment.utc(timestamp).tz(localTimezone).format("MM/DD/YYYY HH:mm:ss");
+};