FE: Don't omit milliseconds in timestamps (#1266)

Co-authored-by: German Osin <[email protected]>

Author: Nilumilak

frontend/src/components/Topics/Topic/Messages/Message.tsx

@@ -110,7 +110,11 @@ const Message: React.FC<Props> = ({
         <td>{partition}</td>
         <td>
           <div>
-            {formatTimestamp({ timestamp, timezone: currentTimezone.value })}
+            {formatTimestamp({
+              timestamp,
+              timezone: currentTimezone.value,
+              withMilliseconds: true,
+            })}
           </div>
         </td>
         <S.DataCell title={key}>

frontend/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx

@@ -110,6 +110,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
                   {formatTimestamp({
                     timestamp,
                     timezone: currentTimezone.value,
+                    withMilliseconds: true,
                   })}
                 </S.MetadataValue>
                 <S.MetadataMeta>Timestamp type: {timestampType}</S.MetadataMeta>

frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -65,7 +65,12 @@ describe('Message component', () => {
     expect(screen.getByText(mockMessage.value as string)).toBeInTheDocument();
     expect(screen.getByText(mockMessage.key as string)).toBeInTheDocument();
     expect(
-      screen.getByText(formatTimestamp({ timestamp: mockMessage.timestamp }))
+      screen.getByText(
+        formatTimestamp({
+          timestamp: mockMessage.timestamp,
+          withMilliseconds: true,
+        })
+      )
     ).toBeInTheDocument();
     expect(screen.getByText(mockMessage.offset.toString())).toBeInTheDocument();
     expect(

frontend/src/lib/dateTimeHelpers.ts

@@ -4,10 +4,12 @@ export const formatTimestamp = ({
   timestamp,
   format = { hourCycle: 'h23' },
   timezone,
+  withMilliseconds,
 }: {
   timestamp: number | string | Date | undefined;
   format?: Intl.DateTimeFormatOptions;
   timezone?: string;
+  withMilliseconds?: boolean;
 }): string => {
   if (!timestamp) {
     return '';
@@ -29,7 +31,13 @@ export const formatTimestamp = ({
     timeZone: finalTimezone,
   };
 
-  return date.toLocaleString(language || [], formatOptions);
+  let formattedTimestamp = date.toLocaleString(language || [], formatOptions);
+
+  if (withMilliseconds) {
+    formattedTimestamp += `.${date.getMilliseconds()}`;
+  }
+
+  return formattedTimestamp;
 };
 
 export const formatMilliseconds = (input = 0) => {