Change message timestamp format (#3113)

* Drop experimental endpoints

* [FE] Change message timestamp format (#3119)

* remove dayjs from the code base

* remove dayjs library and clean up the hook codes

* minor obsolete fixtures deletion

* minor provider code modifications

* minor provider code modifications

* minor linter code modifications

* minor date local and language code modifications

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

* removing timestamp api from the generated sources

Co-authored-by: Mgrdich <46796009+Mgrdich@users.noreply.github.com>
Co-authored-by: Mgrdich <mgotm13@gmail.com>

kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/InfoController.java

@@ -1,32 +0,0 @@
-package com.provectus.kafka.ui.controller;
-
-import com.provectus.kafka.ui.api.TimeStampFormatApi;
-import com.provectus.kafka.ui.model.TimeStampFormatDTO;
-import lombok.RequiredArgsConstructor;
-import lombok.extern.slf4j.Slf4j;
-import org.springframework.beans.factory.annotation.Value;
-import org.springframework.http.ResponseEntity;
-import org.springframework.web.bind.annotation.RestController;
-import org.springframework.web.server.ServerWebExchange;
-import reactor.core.publisher.Mono;
-
-@RestController
-@RequiredArgsConstructor
-@Slf4j
-public class InfoController extends AbstractController implements TimeStampFormatApi {
-
-  @Value("${timestamp.format:dd.MM.YYYY HH:mm:ss}")
-  private String timeStampFormat;
-  @Value("${timestamp.format:DD.MM.YYYY HH:mm:ss}")
-  private String timeStampFormatIso;
-
-  @Override
-  public Mono<ResponseEntity<TimeStampFormatDTO>> getTimeStampFormat(ServerWebExchange exchange) {
-    return Mono.just(ResponseEntity.ok(new TimeStampFormatDTO().timeStampFormat(timeStampFormat)));
-  }
-
-  @Override
-  public Mono<ResponseEntity<TimeStampFormatDTO>> getTimeStampFormatISO(ServerWebExchange exchange) {
-    return Mono.just(ResponseEntity.ok(new TimeStampFormatDTO().timeStampFormat(timeStampFormatIso)));
-  }
-}

kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml

@@ -1729,33 +1729,6 @@ paths:
                 $ref: '#/components/schemas/PartitionsIncreaseResponse'
         404:
           description: Not found
-  /api/info/timestampformat:
-    get:
-      tags:
-        - TimeStampFormat
-      summary: get system default datetime format
-      operationId: getTimeStampFormat
-      responses:
-        200:
-          description: OK
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/TimeStampFormat'
-
-  /api/info/timestampformat/iso:
-    get:
-      tags:
-        - TimeStampFormat
-      summary: get system default datetime format (in ISO format, for JS)
-      operationId: getTimeStampFormatISO
-      responses:
-        200:
-          description: OK
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/TimeStampFormat'
 
   /api/authorization:
     get:

kafka-ui-react-app/package.json

@@ -22,7 +22,6 @@
     "ajv": "^8.6.3",
     "babel-jest": "^29.0.3",
     "classnames": "^2.2.6",
-    "dayjs": "^1.11.2",
     "fetch-mock": "^9.11.0",
     "jest": "^29.0.3",
     "jest-watch-typeahead": "^2.0.0",

kafka-ui-react-app/pnpm-lock.yaml

@@ -38,7 +38,6 @@ specifiers:
   ajv: ^8.6.3
   babel-jest: ^29.0.3
   classnames: ^2.2.6
-  dayjs: ^1.11.2
   dotenv: ^16.0.1
   eslint: ^8.3.0
   eslint-config-airbnb: ^19.0.4
@@ -110,7 +109,6 @@ dependencies:
   ajv: 8.8.2
   babel-jest: 29.0.3_@babel+core@7.18.2
   classnames: 2.3.1
-  dayjs: 1.11.3
   fetch-mock: 9.11.0
   jest: 29.0.3_yqiaopbgmqcuvx27p5xxvum6wm
   jest-watch-typeahead: 2.0.0_jest@29.0.3
@@ -4686,10 +4684,6 @@ packages:
     resolution: {integrity: sha512-sj+J0Mo2p2X1e306MHq282WS4/A8Pz/95GIFcsPNMPMZVI3EUrAdSv90al1k+p74WGLCruMXk23bfEDZa71X9Q==}
     engines: {node: '>=0.11'}
 
-  /dayjs/1.11.3:
-    resolution: {integrity: sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==}
-    dev: false
-
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:

kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 import styled from 'styled-components';
 import useDataSaver from 'lib/hooks/useDataSaver';
 import { TopicMessage } from 'generated-sources';
-import { useTimeFormat } from 'lib/hooks/useTimeFormat';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
+import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 import MessageContent from './MessageContent/MessageContent';
 import * as S from './MessageContent/MessageContent.styled';
@@ -58,7 +58,6 @@ const Message: React.FC<Props> = ({
     Headers: headers,
     Timestamp: timestamp,
   };
-  const formatTimestamp = useTimeFormat();
 
   const savedMessage = JSON.stringify(savedMessageJson, null, '\t');
   const { copyToClipboard, saveFile } = useDataSaver(

kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import EditorViewer from 'components/common/EditorViewer/EditorViewer';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { useTimeFormat } from 'lib/hooks/useTimeFormat';
 import { SchemaType, TopicMessageTimestampTypeEnum } from 'generated-sources';
+import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 import * as S from './MessageContent.styled';
 
@@ -27,8 +27,6 @@ const MessageContent: React.FC<MessageContentProps> = ({
   timestamp,
   timestampType,
 }) => {
-  const formatTimestamp = useTimeFormat();
-
   const [activeTab, setActiveTab] = React.useState<Tab>('content');
 
   const activeTabContent = () => {

kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { TopicMessage, TopicMessageTimestampTypeEnum } from 'generated-sources';
-import Message, {
-  PreviewFilter,
-  Props,
-} from 'components/Topics/Topic/Messages/Message';
+import Message, { Props } from 'components/Topics/Topic/Messages/Message';
 import { screen } from '@testing-library/react';
 import { render } from 'lib/testHelpers';
 import userEvent from '@testing-library/user-event';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 const messageContentText = 'messageContentText';
-const format = 'DD.MM.YYYY HH:mm:ss';
 
 jest.mock(
   'components/Topics/Topic/Messages/MessageContent/MessageContent',
@@ -33,9 +29,6 @@ describe('Message component', () => {
     headers: { header: 'test' },
   };
 
-  const mockKeyFilters: PreviewFilter[] = [];
-  const mockContentFilters: PreviewFilter[] = [];
-
   const renderComponent = (
     props: Partial<Props> = {
       message: mockMessage,
@@ -46,8 +39,8 @@ describe('Message component', () => {
         <tbody>
           <Message
             message={props.message || mockMessage}
-            keyFilters={mockKeyFilters}
-            contentFilters={mockContentFilters}
+            keyFilters={[]}
+            contentFilters={[]}
           />
         </tbody>
       </table>
@@ -58,7 +51,7 @@ describe('Message component', () => {
     expect(screen.getByText(mockMessage.content as string)).toBeInTheDocument();
     expect(screen.getByText(mockMessage.key as string)).toBeInTheDocument();
     expect(
-      screen.getByText(formatTimestamp(mockMessage.timestamp, format))
+      screen.getByText(formatTimestamp(mockMessage.timestamp))
     ).toBeInTheDocument();
     expect(screen.getByText(mockMessage.offset.toString())).toBeInTheDocument();
     expect(

kafka-ui-react-app/src/components/Topics/Topic/Statistics/Indicators/Total.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as Metrics from 'components/common/Metrics';
-import { useTimeFormat } from 'lib/hooks/useTimeFormat';
 import { TopicAnalysisStats } from 'generated-sources';
+import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 const Total: React.FC<TopicAnalysisStats> = ({
   totalMsgs,
@@ -14,8 +14,6 @@ const Total: React.FC<TopicAnalysisStats> = ({
   approxUniqKeys,
   approxUniqValues,
 }) => {
-  const formatTimestamp = useTimeFormat();
-
   return (
     <Metrics.Section title="Messages">
       <Metrics.Indicator label="Total number">{totalMsgs}</Metrics.Indicator>

kafka-ui-react-app/src/components/Topics/Topic/Statistics/Metrics.tsx

@@ -13,8 +13,7 @@ import {
   Label,
 } from 'components/common/PropertiesList/PropertiesList.styled';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { useTimeFormat } from 'lib/hooks/useTimeFormat';
-import { calculateTimer } from 'lib/dateTimeHelpers';
+import { calculateTimer, formatTimestamp } from 'lib/dateTimeHelpers';
 import { Action, ResourceType } from 'generated-sources';
 import { ActionButton } from 'components/common/ActionComponent';
 
@@ -24,8 +23,6 @@ import SizeStats from './Indicators/SizeStats';
 import PartitionTable from './PartitionTable';
 
 const Metrics: React.FC = () => {
-  const formatTimestamp = useTimeFormat();
-
   const params = useAppParams<RouteParamsClusterTopic>();
 
   const [isAnalyzing, setIsAnalyzing] = useState(true);
@@ -68,7 +65,13 @@ const Metrics: React.FC = () => {
         </ActionButton>
         <List>
           <Label>Started at</Label>
-          <span>{formatTimestamp(data.progress.startedAt, 'hh:mm:ss a')}</span>
+          <span>
+            {formatTimestamp(data.progress.startedAt, {
+              hour: 'numeric',
+              minute: 'numeric',
+              second: 'numeric',
+            })}
+          </span>
           <Label>Passed since start</Label>
           <span>{calculateTimer(data.progress.startedAt as number)}</span>
           <Label>Scanned messages</Label>

kafka-ui-react-app/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx

@@ -6,16 +6,14 @@ import {
   List,
   Label,
 } from 'components/common/PropertiesList/PropertiesList.styled';
-import { useTimeFormat } from 'lib/hooks/useTimeFormat';
 import { TopicAnalysisStats } from 'generated-sources';
+import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 import * as S from './Statistics.styles';
 
 const PartitionInfoRow: React.FC<{ row: Row<TopicAnalysisStats> }> = ({
   row,
 }) => {
-  const formatTimestamp = useTimeFormat();
-
   const {
     totalMsgs,
     minTimestamp,

kafka-ui-react-app/src/components/Version/Version.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import WarningIcon from 'components/common/Icons/WarningIcon';
 import { gitCommitPath } from 'lib/paths';
-import { useTimeFormat } from 'lib/hooks/useTimeFormat';
 import { useActuatorInfo } from 'lib/hooks/api/actuatorInfo';
 import { BUILD_VERSION_PATTERN } from 'lib/constants';
 import { useLatestVersion } from 'lib/hooks/api/latestVersion';
+import { formatTimestamp } from 'lib/dateTimeHelpers';
 
 import * as S from './Version.styled';
 import compareVersions from './compareVersions';
@@ -15,7 +15,6 @@ export interface VesionProps {
 }
 
 const Version: React.FC = () => {
-  const formatTimestamp = useTimeFormat();
   const { data: actuatorInfo = {} } = useActuatorInfo();
   const { data: latestVersionInfo = {} } = useLatestVersion();
 

kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx

@@ -3,16 +3,11 @@ import { screen } from '@testing-library/dom';
 import Version from 'components/Version/Version';
 import { render } from 'lib/testHelpers';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
-import { useTimeFormat } from 'lib/hooks/api/timeFormat';
 import { useActuatorInfo } from 'lib/hooks/api/actuatorInfo';
 import { useLatestVersion } from 'lib/hooks/api/latestVersion';
 import { actuatorInfoPayload } from 'lib/fixtures/actuatorInfo';
 import { latestVersionPayload } from 'lib/fixtures/latestVersion';
-import { defaultGlobalSettingsValue } from 'components/contexts/GlobalSettingsContext';
 
-jest.mock('lib/hooks/api/timeFormat', () => ({
-  useTimeFormat: jest.fn(),
-}));
 jest.mock('lib/hooks/api/actuatorInfo', () => ({
   useActuatorInfo: jest.fn(),
 }));
@@ -21,24 +16,14 @@ jest.mock('lib/hooks/api/latestVersion', () => ({
 }));
 
 describe('Version Component', () => {
-  const { timeStampFormat } = defaultGlobalSettingsValue;
-
   const versionTag = 'v0.5.0';
   const snapshotTag = 'test-SNAPSHOT';
   const commitTag = 'befd3b328e2c9c7df57b0c5746561b2f7fee8813';
 
   const actuatorVersionPayload = actuatorInfoPayload(versionTag);
-  const formattedTimestamp = formatTimestamp(
-    actuatorVersionPayload.build.time,
-    timeStampFormat
-  );
+  const formattedTimestamp = formatTimestamp(actuatorVersionPayload.build.time);
 
   beforeEach(() => {
-    (useTimeFormat as jest.Mock).mockImplementation(() => ({
-      data: {
-        timeStampFormat,
-      },
-    }));
     (useActuatorInfo as jest.Mock).mockImplementation(() => ({
       data: actuatorVersionPayload,
     }));

kafka-ui-react-app/src/components/__tests__/App.spec.tsx

@@ -2,31 +2,18 @@ import React from 'react';
 import { screen } from '@testing-library/react';
 import App from 'components/App';
 import { render } from 'lib/testHelpers';
-import { useTimeFormat } from 'lib/hooks/api/timeFormat';
-import { defaultGlobalSettingsValue } from 'components/contexts/GlobalSettingsContext';
 import { useGetUserInfo } from 'lib/hooks/api/roles';
 
 jest.mock('components/Nav/Nav', () => () => <div>Navigation</div>);
 
 jest.mock('components/Version/Version', () => () => <div>Version</div>);
 
-jest.mock('components/NavBar/NavBar', () => () => <div>NavBar</div>);
-
-jest.mock('lib/hooks/api/timeFormat', () => ({
-  ...jest.requireActual('lib/hooks/api/timeFormat'),
-  useTimeFormat: jest.fn(),
-}));
-
 jest.mock('lib/hooks/api/roles', () => ({
   useGetUserInfo: jest.fn(),
 }));
 
 describe('App', () => {
   beforeEach(() => {
-    (useTimeFormat as jest.Mock).mockImplementation(() => ({
-      data: defaultGlobalSettingsValue,
-    }));
-
     (useGetUserInfo as jest.Mock).mockImplementation(() => ({
       data: {},
     }));

kafka-ui-react-app/src/components/contexts/GlobalSettingsContext.tsx

@@ -1,29 +1,13 @@
 import React from 'react';
-import { useTimeFormat } from 'lib/hooks/api/timeFormat';
 
-interface GlobalSettingsContextValue {
-  timeStampFormat: string;
-}
-
-export const defaultGlobalSettingsValue = {
-  timeStampFormat: 'DD.MM.YYYY HH:mm:ss',
-};
-
-export const GlobalSettingsContext =
-  React.createContext<GlobalSettingsContextValue>(defaultGlobalSettingsValue);
+// This is here for future global code settings modification , it does not do anything now
+export const GlobalSettingsContext = React.createContext<boolean>(true);
 
 export const GlobalSettingsProvider: React.FC<
   React.PropsWithChildren<unknown>
 > = ({ children }) => {
-  const { data } = useTimeFormat();
-
   return (
-    <GlobalSettingsContext.Provider
-      value={{
-        timeStampFormat:
-          data?.timeStampFormat || defaultGlobalSettingsValue.timeStampFormat,
-      }}
-    >
+    <GlobalSettingsContext.Provider value={false}>
       {children}
     </GlobalSettingsContext.Provider>
   );

kafka-ui-react-app/src/lib/api.ts

@@ -8,7 +8,6 @@ import {
   Configuration,
   KafkaConnectApi,
   ConsumerGroupsApi,
-  TimeStampFormatApi,
   AuthorizationApi,
 } from 'generated-sources';
 import { BASE_PARAMS } from 'lib/constants';
@@ -19,7 +18,6 @@ export const ksqlDbApiClient = new KsqlApi(apiClientConf);
 export const topicsApiClient = new TopicsApi(apiClientConf);
 export const brokersApiClient = new BrokersApi(apiClientConf);
 export const schemasApiClient = new SchemasApi(apiClientConf);
-export const timerStampFormatApiClient = new TimeStampFormatApi(apiClientConf);
 export const messagesApiClient = new MessagesApi(apiClientConf);
 export const clustersApiClient = new ClustersApi(apiClientConf);
 export const kafkaConnectApiClient = new KafkaConnectApi(apiClientConf);

kafka-ui-react-app/src/lib/dateTimeHelpers.ts

@@ -1,14 +1,22 @@
-import dayjs from 'dayjs';
-
 export const formatTimestamp = (
-  timestamp: number | string | Date | undefined,
-  format?: string
+  timestamp?: number | string | Date,
+  format: Intl.DateTimeFormatOptions = { hour12: false }
 ): string => {
   if (!timestamp) {
     return '';
   }
 
-  return dayjs(timestamp).format(format);
+  // empty array gets the default one from the browser
+  const date = new Date(timestamp);
+
+  // invalid date
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  // browser support
+  const language = navigator.language || navigator.languages[0];
+  return date.toLocaleString(language || [], format);
 };
 
 export const formatMilliseconds = (input = 0) => {
@@ -36,10 +44,11 @@ export const formatMilliseconds = (input = 0) => {
 export const passedTime = (value: number) => (value < 10 ? `0${value}` : value);
 
 export const calculateTimer = (startedAt: number) => {
-  const now = new Date().getTime();
+  const nowDate = new Date();
+  const now = nowDate.getTime();
   const newDate = now - startedAt;
-  const minutes = dayjs(newDate).minute();
-  const second = dayjs(newDate).second();
+  const minutes = nowDate.getMinutes();
+  const second = nowDate.getSeconds();
 
   return newDate > 0 ? `${passedTime(minutes)}:${passedTime(second)}` : '00:00';
 };

kafka-ui-react-app/src/lib/fixtures/timeFormat.ts

@@ -1,3 +0,0 @@
-export const timeFormatPayload = {
-  timeStampFormat: 'dd.MM.YYYY HH:mm:ss',
-};

kafka-ui-react-app/src/lib/hooks/__tests__/dateTimeHelpers.spec.ts

@@ -0,0 +1,23 @@
+import { formatTimestamp } from 'lib/dateTimeHelpers';
+
+describe('dateTimeHelpers', () => {
+  describe('formatTimestamp', () => {
+    it('should check the empty case', () => {
+      expect(formatTimestamp('')).toBe('');
+    });
+
+    it('should check the invalid case', () => {
+      expect(formatTimestamp('invalid')).toBe('');
+    });
+
+    it('should output the correct date', () => {
+      const date = new Date();
+      expect(formatTimestamp(date)).toBe(
+        date.toLocaleString([], { hour12: false })
+      );
+      expect(formatTimestamp(date.getTime())).toBe(
+        date.toLocaleString([], { hour12: false })
+      );
+    });
+  });
+});

kafka-ui-react-app/src/lib/hooks/api/__tests__/timeFormat.spec.ts

@@ -1,17 +0,0 @@
-import fetchMock from 'fetch-mock';
-import { expectQueryWorks, renderQueryHook } from 'lib/testHelpers';
-import * as hooks from 'lib/hooks/api/timeFormat';
-import { timeFormatPayload } from 'lib/fixtures/timeFormat';
-
-const timeFormatPath = '/api/info/timestampformat/iso';
-
-describe('Time format hooks', () => {
-  beforeEach(() => fetchMock.restore());
-  describe('useTimeFormat', () => {
-    it('returns the correct data', async () => {
-      const mock = fetchMock.getOnce(timeFormatPath, timeFormatPayload);
-      const { result } = renderQueryHook(() => hooks.useTimeFormat());
-      await expectQueryWorks(mock, result);
-    });
-  });
-});

kafka-ui-react-app/src/lib/hooks/api/timeFormat.ts

@@ -1,11 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { timerStampFormatApiClient as api } from 'lib/api';
-import { QUERY_REFETCH_OFF_OPTIONS } from 'lib/constants';
-
-export function useTimeFormat() {
-  return useQuery(
-    ['settings', 'timestampformat'],
-    () => api.getTimeStampFormatISO(),
-    QUERY_REFETCH_OFF_OPTIONS
-  );
-}

kafka-ui-react-app/src/lib/hooks/useTimeFormat.ts

@@ -1,10 +0,0 @@
-import { useContext } from 'react';
-import { formatTimestamp } from 'lib/dateTimeHelpers';
-import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
-
-export const useTimeFormat = () => {
-  const { timeStampFormat } = useContext(GlobalSettingsContext);
-
-  return (timestamp?: number | string | Date, format?: string) =>
-    formatTimestamp(timestamp, format || timeStampFormat);
-};

kafka-ui-react-app/src/lib/testHelpers.tsx

@@ -26,10 +26,7 @@ import {
 } from '@tanstack/react-query';
 import { ConfirmContextProvider } from 'components/contexts/ConfirmContext';
 import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
-import {
-  defaultGlobalSettingsValue,
-  GlobalSettingsContext,
-} from 'components/contexts/GlobalSettingsContext';
+import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
 import { UserInfoRolesAccessContext } from 'components/contexts/UserInfoRolesAccessContext';
 
 import { RolesType, modifyRolesData } from './permissions';
@@ -122,7 +119,7 @@ const customRender = (
     children,
   }) => (
     <TestQueryClientProvider>
-      <GlobalSettingsContext.Provider value={defaultGlobalSettingsValue}>
+      <GlobalSettingsContext.Provider value={false}>
         <ThemeProvider theme={theme}>
           <TestUserInfoProvider data={userInfo}>
             <ConfirmContextProvider>