Repository: provectus/kafka-ui
Issue: Messages: UI displays nonsensical timestamps (e.g. "1/2/2023, 24:15:00")
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

## Problem

Our topic contains a record with timestamp `1672647300792`, which is Monday, January 2, 2023 8:15:00.792 AM in GMT. 

When I view this record in the UI using a computer configured with GMT-8, the timestamp displays as `1/2/2023, 24:15:00`.

## Expected Behavior

I would expect this timestamp to display in the UI as `1/2/2023, 00:15:00`.

## Additional Context

This bug reproduces using the current head of master, commit `ceb9c5dd85ce5543b9863c5bc500e67467c358fb`.

## Screenshots

<img width="1525" alt="Screen Shot 2023-01-22 at 10 02 56 PM" src="https://user-images.githubusercontent.com/884507/213975137-128428ca-e409-4134-9923-9f2a5b893a8b.png">


Issue comments:
Hello there laser! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Hey, thanks for reporting the issue.

That's really funny, I suppose if you live on Earth that's a bug.

We'll take a look :)
@Haarolean the issue was reproduced: 

**Steps:**
Add a message to the Topic with timestamp 1/27/2023, 22:09:00
Change computer timezone to be midnight

**Actual result:** Message’s timestamp displayed as 1/28/2023, 24:09:00 instead of 1/28/2023, 00:09:00
I believe this issue is related to the language configuration of the current browser, I've tested that if your language is set to en-US, it displays 24:00:00. However, if you change to another language, for example, zh-CN, you will get 00:00:00
<img width="579" alt="image" src="https://user-images.githubusercontent.com/43143420/227832716-b01cb8aa-e1d1-4b6a-b50f-59ded3621d40.png">
<img width="580" alt="image" src="https://user-images.githubusercontent.com/43143420/227832764-4400e01f-4da4-4c9e-96a1-1581eda34e25.png">

@Mano-Liaoyan that's right, we take the user's locale into consideration, but this shouldn't happen.
Sorry,  I am not quite understand what you mean. In src/components/Topics/Topic/Messages/Message.tsx we can find that it use formatTimeStamp to get the date
![image](https://user-images.githubusercontent.com/43143420/227951598-a4bc3f7c-57d6-4f2b-a0da-9714c141bdbb.png)
which is a function declared in /src/lib/dateTimeHelpers.ts
<img width="465" alt="image" src="https://user-images.githubusercontent.com/43143420/227951774-34faae9e-1250-430a-9746-deb9ab4f62a2.png">
This shows that it use the user's locale to determine the time style. Do you mean we need to force the user to use a specific locale in order to show 00:00:00 ? Or, do you mean we convert 24 to 0 ？
@Mano-Liaoyan we introduced this code to consider user's browser's locale to format the dates (e.g. mm.dd for non-US, dd.mm for US), guess the timezone calculation is a side effect. We had some tasks to make it configurable (to view dates in a different tz than a browser's timezone), so we have to decide the scope for this one issue.
We either:
1) Deal with timezone issues and format all the dates properly
2) Do not consider timezones for the timestamps for now and just use the locale for formatting the date.

If you wanna grab this, let me know. Otherwise, we'd do this anyway within this release, we've got enough bandwidth rn.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/lib/dateTimeHelpers.ts b/kafka-ui-react-app/src/lib/dateTimeHelpers.ts
index 3dce0edd78a..148a70d2a3d 100644
--- a/kafka-ui-react-app/src/lib/dateTimeHelpers.ts
+++ b/kafka-ui-react-app/src/lib/dateTimeHelpers.ts
@@ -1,6 +1,6 @@
 export const formatTimestamp = (
   timestamp?: number | string | Date,
-  format: Intl.DateTimeFormatOptions = { hour12: false }
+  format: Intl.DateTimeFormatOptions = { hourCycle: 'h23' }
 ): string => {
   if (!timestamp) {
     return '';
@@ -8,7 +8,6 @@ export const formatTimestamp = (
 
   // empty array gets the default one from the browser
   const date = new Date(timestamp);
-
   // invalid date
   if (Number.isNaN(date.getTime())) {
     return '';


Test patch: