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 <[email protected]> * removing timestamp api from the generated sources Co-authored-by: Mgrdich <[email protected]> Co-authored-by: Mgrdich <[email protected]>
provectus · Dec 23, 2022 · 027d9b4 · 027d9b4
1 parent 33784e3
commit 027d9b4
Show file tree

Hide file tree

Showing 22 changed files with 63 additions and 199 deletions.
diff --git a/kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/InfoController.java b/kafka-ui-api/src/main/java/com/provectus/kafka/ui/controller/InfoController.java
diff --git a/kafka-ui-contract/src/main/resources/swagger/kafka-ui-api.yaml b/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:

diff --git a/kafka-ui-react-app/package.json b/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",

diff --git a/kafka-ui-react-app/pnpm-lock.yaml b/kafka-ui-react-app/pnpm-lock.yaml
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/Message.tsx b/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(

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/MessageContent/MessageContent.tsx b/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 = () => {

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx b/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(

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Statistics/Indicators/Total.tsx b/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>

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Statistics/Metrics.tsx b/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>

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Statistics/PartitionInfoRow.tsx b/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,

diff --git a/kafka-ui-react-app/src/components/Version/Version.tsx b/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();
 

diff --git a/kafka-ui-react-app/src/components/Version/__tests__/Version.spec.tsx b/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,
     }));

diff --git a/kafka-ui-react-app/src/components/__tests__/App.spec.tsx b/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: {},
     }));

diff --git a/kafka-ui-react-app/src/components/contexts/GlobalSettingsContext.tsx b/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>
   );