From 7a7c8a14dffa089148cd854a135a348724369e53 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 7 Apr 2025 11:47:50 -0300
Subject: [PATCH] feat: Display flow logs timestamps in local time zone (#7477)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

⬆️ (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                  | 12 ++++++++++++
 src/frontend/package.json                       |  3 ++-
 src/frontend/src/modals/flowLogsModal/index.tsx |  8 ++++++++
 src/frontend/src/utils/utils.ts                 |  7 +++++++
 4 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 92eae38a2..127c4fd40 100644
--- a/src/frontend/package-lock.json
+++ b/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",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index e490d9c93..fe9267f97 100644
--- a/src/frontend/package.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx
index 0ec7f84f2..db6000169 100644
--- a/src/frontend/src/modals/flowLogsModal/index.tsx
+++ b/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);
     }
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 901140cea..0152ed73d 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/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");
+};