Skip to content

Commit

Permalink
fix(ui): replace moment.js with date-fns (#2071)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikaelol
mikaelol authored Feb 13, 2025
1 parent 73beccb commit ee80a51
Show file tree
Hide file tree
Showing 9 changed files with 122 additions and 98 deletions.
20 changes: 8 additions & 12 deletions client/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions client/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
"homepage": "./ui",
"packageManager": "[email protected]",
"dependencies": {
"@date-fns/utc": "^2.1.0",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@popperjs/core": "^2.11.8",
"@trendmicro/react-sidenav": "^0.5.0",
"axios": "^1.7.4",
"bootstrap": "^5.3.3",
"buffer": "^6.0.3",
"date-fns": "^3.6.0",
"event-source-polyfill": "^1.0.31",
"history": "^5.3.0",
"lodash": "^4.17.21",
Expand Down Expand Up @@ -55,15 +57,13 @@
"@testing-library/user-event": "^14.5.2",
"@vitejs/plugin-react": "^4.2.1",
"convert-units": "^2.3.4",
"date-fns": "^3.6.0",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.1",
"joi": "^17.12.3",
"joi-browser": "^13.4.0",
"jsdom": "^24.0.0",
"moment": "^2.30.1",
"prettier": "^3.2.5",
"react-bootstrap": "^2.10.2",
"react-datepicker": "^6.8.0",
Expand Down
17 changes: 8 additions & 9 deletions client/src/components/DatePicker/DatePicker.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import DateTimePicker from 'react-datepicker';
import moment from 'moment';
import { formatDateTime } from '../../utils/converters';

class DatePicker extends Component {
Expand All @@ -23,18 +22,18 @@ class DatePicker extends Component {
};

getDisplayValue = value => {
let date = moment(value);
const date = value == '' ? new Date() : value;
try {
return formatDateTime(
{
year: date.year(),
monthValue: date.month(),
dayOfMonth: date.date(),
hour: date.hour(),
minute: date.minute(),
second: date.second()
year: date.getFullYear(),
monthValue: date.getMonth(),
dayOfMonth: date.getDate(),
hour: date.getHours(),
minute: date.getMinutes(),
second: date.getSeconds()
},
'DD-MM-YYYY HH:mm'
'dd-MM-yyyy HH:mm'
);
} catch (e) {
return '';
Expand Down
20 changes: 9 additions & 11 deletions .../containers/ConsumerGroup/ConsumerGroupDetail/ConsumerGroupUpdate/ConsumerGroupUpdate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
uriConsumerGroupOffsetsByTimestamp,
uriConsumerGroupUpdate
} from '../../../../utils/endpoints';
import moment from 'moment';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { withRouter } from '../../../../utils/withRouter';
Expand Down Expand Up @@ -41,21 +40,20 @@ class ConsumerGroupUpdate extends Form {

async getTopicOffset() {
const { clusterId, consumerGroupId, topicOffset, timestamp } = this.state;
const momentValue = moment(timestamp);

const date =
timestamp.toString().length > 0
timestamp instanceof Date
? formatDateTime(
{
year: momentValue.year(),
monthValue: momentValue.month(),
dayOfMonth: momentValue.date(),
hour: momentValue.hour(),
minute: momentValue.minute(),
second: momentValue.second(),
milli: momentValue.millisecond()
year: timestamp.getFullYear(),
monthValue: timestamp.getMonth(),
dayOfMonth: timestamp.getDate(),
hour: timestamp.getHours(),
minute: timestamp.getMinutes(),
second: timestamp.getSeconds(),
milli: timestamp.getMilliseconds()
},
'YYYY-MM-DDTHH:mm:ss.SSSZ'
"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"
)
: '';

Expand Down
58 changes: 28 additions & 30 deletions client/src/containers/Topic/Topic/TopicData/TopicData.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
uriTopicsPartitions
} from '../../../../utils/endpoints';
import Pagination from '../../../../components/Pagination/Pagination';
import moment from 'moment';
import DatePicker from '../../../../components/DatePicker';
import camelCase from 'lodash/camelCase';
import constants, { SETTINGS_VALUES } from '../../../../utils/constants';
Expand Down Expand Up @@ -351,19 +350,20 @@ class TopicData extends Root {
}

_buildTimestampFilter(datetime) {
let timestamp = datetime.toString().length > 0 ? moment(datetime) : '';
return formatDateTime(
{
year: timestamp.year(),
monthValue: timestamp.month(),
dayOfMonth: timestamp.date(),
hour: timestamp.hour(),
minute: timestamp.minute(),
second: timestamp.second(),
milli: timestamp.millisecond()
},
'YYYY-MM-DDTHH:mm:ss.SSSZ'
);
if (datetime instanceof Date) {
return formatDateTime(
{
year: datetime.getFullYear(),
monthValue: datetime.getMonth(),
dayOfMonth: datetime.getDate(),
hour: datetime.getHours(),
minute: datetime.getMinutes(),
second: datetime.getSeconds(),
milli: datetime.getMilliseconds()
},
"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"
);
}
}

_searchMessages(changePage = false, replaceInNavigation = false) {
Expand Down Expand Up @@ -941,8 +941,6 @@ class TopicData extends Root {
actions.push(constants.TABLE_DELETE);
if (canDownload) actions.push(constants.TABLE_DOWNLOAD);

let date = moment(datetime);
let endDate = moment(endDatetime);
const firstColumns = [
{ colName: 'Key', colSpan: 1 },
{ colName: 'Value', colSpan: 1 },
Expand Down Expand Up @@ -1025,27 +1023,27 @@ class TopicData extends Root {
' From ' +
formatDateTime(
{
year: date.year(),
monthValue: date.month(),
dayOfMonth: date.date(),
hour: date.hour(),
minute: date.minute(),
second: date.second()
year: datetime.getFullYear(),
monthValue: datetime.getMonth(),
dayOfMonth: datetime.getDate(),
hour: datetime.getHours(),
minute: datetime.getMinutes(),
second: datetime.getSeconds()
},
'DD-MM-YYYY HH:mm'
'dd-MM-yyyy HH:mm'
)}
{endDatetime !== '' &&
' To ' +
formatDateTime(
{
year: endDate.year(),
monthValue: endDate.month(),
dayOfMonth: endDate.date(),
hour: endDate.hour(),
minute: endDate.minute(),
second: endDate.second()
year: endDatetime.getFullYear(),
monthValue: endDatetime.getMonth(),
dayOfMonth: endDatetime.getDate(),
hour: endDatetime.getHours(),
minute: endDatetime.getMinutes(),
second: endDatetime.getSeconds()
},
'DD-MM-YYYY HH:mm'
'dd-MM-yyyy HH:mm'
)}
</Dropdown.Toggle>
<Dropdown.Menu>
Expand Down
21 changes: 10 additions & 11 deletions client/src/containers/Topic/TopicCopy/TopicCopy.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Dropdown from 'react-bootstrap/Dropdown';
import DatePicker from '../../../components/DatePicker';
import moment from 'moment';
import Input from '../../../components/Form/Input';
import { withRouter } from '../../../utils/withRouter';
import { format } from 'date-fns';
Expand Down Expand Up @@ -261,23 +260,23 @@ class TopicCopy extends Form {

async getTopicOffset() {
const { clusterId, topicId, timestamp } = this.state;
const momentValue = moment(timestamp);

const date =
timestamp.toString().length > 0
? formatDateTime(
{
year: momentValue.year(),
monthValue: momentValue.month(),
dayOfMonth: momentValue.date(),
hour: momentValue.hour(),
minute: momentValue.minute(),
second: momentValue.second(),
milli: momentValue.millisecond()
year: timestamp.getFullYear(),
monthValue: timestamp.getMonth(),
dayOfMonth: timestamp.getDate(),
hour: timestamp.getHours(),
minute: timestamp.getMinutes(),
second: timestamp.getMinutes(),
milli: timestamp.getMilliseconds()
},
'YYYY-MM-DDTHH:mm:ss.SSSZ'
"yyyy-MM-dd'T'HH:mm:ss.SSSxxx"
)
: '';
: ''; // This case will never happen, 'getTopicOffset' is only called after timestamp is set.
// This ternary is probably copy paste from getTopicOffset in ConsumerGroupUpdate.jsx

let data = {};
if (date !== '') {
Expand Down
30 changes: 14 additions & 16 deletions client/src/containers/Topic/TopicProduce/TopicProduce.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
uriAllSchema,
uriTopicsName
} from '../../../utils/endpoints';
import moment from 'moment';
import DatePicker from '../../../components/DatePicker';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
Expand Down Expand Up @@ -445,7 +444,6 @@ class TopicProduce extends Form {
multiMessage,
tombstone
} = this.state;
let date = moment(datetime);
return (
<div>
<form encType="multipart/form-data" className="khq-form khq-form-config">
Expand Down Expand Up @@ -555,29 +553,29 @@ class TopicProduce extends Form {
' ' +
formatDateTime(
{
year: date.year(),
monthValue: date.month(),
dayOfMonth: date.date(),
hour: date.hour(),
minute: date.minute(),
second: date.second()
year: datetime.getFullYear(),
monthValue: datetime.getMonth(),
dayOfMonth: datetime.getDate(),
hour: datetime.getHours(),
minute: datetime.getMinutes(),
second: datetime.getSeconds()
},
'DD-MM-YYYY HH:mm'
'dd-MM-yyyy HH:mm'
)
}
placeholder={
datetime !== '' &&
' ' +
formatDateTime(
{
year: date.year(),
monthValue: date.month(),
dayOfMonth: date.date(),
hour: date.hour(),
minute: date.minute(),
second: date.second()
year: datetime.getFullYear(),
monthValue: datetime.getMonth(),
dayOfMonth: datetime.getDate(),
hour: datetime.getHours(),
minute: datetime.getMinutes(),
second: datetime.getSeconds()
},
'DD-MM-YYYY HH:mm'
'dd-MM-yyyy HH:mm'
)
}
/>
Expand Down
Loading

0 comments on commit ee80a51

Please sign in to comment.