From aece2251cfa5dcc14a9e37c9a09e81c0c25b1d6a Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Thu, 5 Jan 2023 17:16:21 -0600 Subject: [PATCH] Migrated moment.js to Luxon (#2540) Signed-off-by: Benjamin Perez --- portal-ui/package.json | 2 -- .../Objects/ObjectDetails/FileVersionItem.tsx | 14 +++++--- .../DateTimePickerWrapper.tsx | 4 +-- .../DaysSelector/DaysSelector.tsx | 36 ++++++++++--------- .../Common/TLSCertificate/TLSCertificate.tsx | 9 ++--- .../Console/Logs/ErrorLogs/ErrorLogs.tsx | 12 ++++--- .../Console/Logs/ErrorLogs/LogLine.tsx | 11 ++++-- .../screens/Console/Speedtest/Speedtest.tsx | 12 +++---- .../TenantDetails/SubnetLicenseTenant.tsx | 10 +++--- portal-ui/src/screens/Console/Trace/Trace.tsx | 5 +-- portal-ui/yarn.lock | 5 --- 11 files changed, 65 insertions(+), 55 deletions(-) diff --git a/portal-ui/package.json b/portal-ui/package.json index 865c985fd..517f0f051 100644 --- a/portal-ui/package.json +++ b/portal-ui/package.json @@ -32,7 +32,6 @@ "luxon": "^3.1.1", "mds": "https://github.com/minio/mds.git#v0.0.9", "minio": "^7.0.32", - "moment": "^2.29.4", "react": "^18.1.0", "react-chartjs-2": "^2.9.0", "react-component-export-image": "^1.0.6", @@ -40,7 +39,6 @@ "react-dom": "^18.1.0", "react-dropzone": "^11.4.2", "react-grid-layout": "^1.2.0", - "react-moment": "^1.1.1", "react-redux": "^8.0.5", "react-router-dom": "6.4.5", "react-virtualized": "^9.22.3", diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx index 03a451c6a..165e6ac9e 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx @@ -15,10 +15,10 @@ // along with this program. If not, see . import React from "react"; -import * as reactMoment from "react-moment"; import Grid from "@mui/material/Grid"; -import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; +import { DateTime } from "luxon"; +import { Theme } from "@mui/material/styles"; import { withStyles } from "@mui/styles"; import { displayFileIconName } from "../ListObjects/utils"; import { IFileInfo } from "./types"; @@ -215,6 +215,12 @@ const FileVersionItem = ({ pill = "null"; } + let lastModified = DateTime.now(); + + if (versionInfo.last_modified) { + lastModified = DateTime.fromISO(versionInfo.last_modified); + } + return ( Last modified:{" "} - - {versionInfo.last_modified} - + {lastModified.toFormat("ccc, LLL dd yyyy HH:mm:ss (ZZZZ)")} Size: {niceBytes(versionInfo.size || "0")} diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx index cf9ed51b7..8488e456c 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx @@ -17,7 +17,7 @@ import React, { Fragment } from "react"; import { Grid, InputLabel, TextField, Tooltip } from "@mui/material"; import { LocalizationProvider } from "@mui/x-date-pickers"; -import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; +import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon"; import { DateTimePicker } from "@mui/x-date-pickers"; import InputAdornment from "@mui/material/InputAdornment"; import ScheduleIcon from "@mui/icons-material/Schedule"; @@ -279,7 +279,7 @@ const DateTimePickerWrapper = ({ : classes.dateSelectorFormOverride; const inputItem = ( - + { - return moment(initialDate) - .add(days, "days") - .add(hours, "hours") - .add(minutes, "minutes"); + return DateTime.fromJSDate(initialDate).plus({ days, hours, minutes }); }; const DaysSelector = ({ @@ -130,22 +127,29 @@ const DaysSelector = ({ const [selectedHours, setSelectedHours] = useState(0); const [selectedMinutes, setSelectedMinutes] = useState(0); const [validDate, setValidDate] = useState(true); - const [dateSelected, setDateSelected] = useState(moment()); + const [dateSelected, setDateSelected] = useState(DateTime.now()); useEffect(() => { - setDateSelected( - calculateNewTime( - initialDate, - selectedDays, - selectedHours, - selectedMinutes - ) - ); + if ( + !isNaN(selectedHours) && + !isNaN(selectedDays) && + !isNaN(selectedMinutes) + ) { + setDateSelected( + calculateNewTime( + initialDate, + selectedDays, + selectedHours, + selectedMinutes + ) + ); + } }, [initialDate, selectedDays, selectedHours, selectedMinutes]); useEffect(() => { if (validDate) { - onChange(dateSelected.format("YYYY-MM-DDTHH:mm:ss"), true); + const formattedDate = dateSelected.toFormat("yyyy-MM-dd HH:mm:ss"); + onChange(formattedDate.split(" ").join("T"), true); } else { onChange("0000-00-00", false); } @@ -275,7 +279,7 @@ const DaysSelector = ({ {entity} will be available until: {" "}
- {dateSelected.format("MM/DD/YYYY HH:mm:ss")} + {dateSelected.toFormat("MM/dd/yyyy HH:mm:ss")}
) : ( diff --git a/portal-ui/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx b/portal-ui/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx index 943bdba93..979e2b8a0 100644 --- a/portal-ui/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx +++ b/portal-ui/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx @@ -15,6 +15,7 @@ // along with this program. If not, see . import React from "react"; +import { DateTime } from "luxon"; import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; @@ -33,7 +34,6 @@ import { Typography, } from "@mui/material"; import EventBusyIcon from "@mui/icons-material/EventBusy"; -import Moment from "react-moment"; import CertificateIcon from "../../../../icons/CertificateIcon"; const styles = (theme: Theme) => @@ -111,6 +111,9 @@ const TLSCertificate = ({ onDelete = () => {}, }: ITLSCertificate) => { const certificates = certificateInfo.domains || []; + + const expiry = DateTime.fromISO(certificateInfo.expiry); + return (   Expiry:  - - {certificateInfo.expiry} - + {expiry.toFormat("yyyy/MM/dd")}
diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx index 18d2b28b1..64647b4fa 100644 --- a/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx +++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/ErrorLogs.tsx @@ -21,13 +21,12 @@ import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; import { useSelector } from "react-redux"; import { FormControl, Grid, InputBase, MenuItem, Select } from "@mui/material"; +import { DateTime } from "luxon"; -import moment from "moment/moment"; import { ErrorResponseHandler } from "../../../../../src/common/types"; import api from "../../../../../src/common/api"; import { AppState, useAppDispatch } from "../../../../store"; -import { LogMessage } from "../types"; import { wsProtocol } from "../../../../utils/wsUtils"; import { actionsTray, @@ -149,7 +148,7 @@ const ErrorLogs = () => { // console.log(message.data.toString()) // FORMAT: 00:35:17 UTC 01/01/2021 - let m: LogMessage = JSON.parse(message.data.toString()); + let m: any = JSON.parse(message.data.toString()); let isValidEntry = true; if ( m.level === "" && @@ -161,7 +160,11 @@ const ErrorLogs = () => { ) { isValidEntry = false; } - const logTime = moment(m.time, "HH:mm:s UTC MM/DD/YYYY").toDate(); + + const logTime = DateTime.fromFormat( + m.time, + "HH:mm:ss UTC MM/dd/yyyy" + ).toJSDate(); m.time = logTime; m.key = Math.random(); @@ -401,5 +404,4 @@ const ErrorLogs = () => { ); }; -//export default withStyles(styles)(connector(ErrorLogs)); export default ErrorLogs; diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx index d1a89c830..0a1b2210d 100644 --- a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx +++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx @@ -14,13 +14,13 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . import React, { Fragment, useState } from "react"; -import { LogMessage } from "../types"; +import { DateTime } from "luxon"; import TableRow from "@mui/material/TableRow"; import TableCell from "@mui/material/TableCell"; import Collapse from "@mui/material/Collapse"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; -import Moment from "react-moment"; +import { LogMessage } from "../types"; import BoxArrowUp from "../../../../icons/BoxArrowUp"; import BoxArrowDown from "../../../../icons/BoxArrowDown"; import WarnFilledIcon from "../../../../icons/WarnFilledIcon"; @@ -159,7 +159,12 @@ const LogLine = (props: { log: LogMessage }) => { titleLogMessage = (titleLogMessage || "").replace(tColorRegex, ""); - let dateStr = {log.time}; + const logTime = DateTime.fromJSDate(log.time); + + let dateStr = ( + {logTime.toFormat("yyyy/MM/dd HH:mm:ss (ZZZZ)")} + ); + if (log.time.getFullYear() === 1) { dateStr = n/a; } diff --git a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx index f5c478b70..77d931b7f 100644 --- a/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx +++ b/portal-ui/src/screens/Console/Speedtest/Speedtest.tsx @@ -22,8 +22,8 @@ import { Theme } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; import { AppState } from "../../../store"; import { Button } from "mds"; +import { DateTime } from "luxon"; import createStyles from "@mui/styles/createStyles"; -import moment from "moment/moment"; import PageHeader from "../Common/PageHeader/PageHeader"; import { actionsTray, @@ -123,14 +123,12 @@ const Speedtest = () => { `${wsProt}://${url.hostname}:${port}${baseUrl}ws/speedtest?&size=${size}${sizeUnit}&duration=${duration}s` ); - const baseDate = moment(); + const baseDate = DateTime.now(); - const currentTime = baseDate.unix() / 1000; + const currentTime = baseDate.toUnixInteger() / 1000; const incrementDate = - baseDate - .add(parseInt("10") * 2, "s" as moment.unitOfTime.DurationConstructor) - .unix() / 1000; + baseDate.plus({ seconds: parseInt("10") * 2 }).toUnixInteger() / 1000; const totalSeconds = (incrementDate - currentTime) / 1000; @@ -160,7 +158,7 @@ const Speedtest = () => { return [...prSt, ...insertData]; }); - const currTime = moment().unix() / 1000; + const currTime = DateTime.now().toUnixInteger() / 1000; setCurrentValue(currTime); }; c.onclose = () => { diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx index c8357be78..fae6f36b6 100644 --- a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx +++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx @@ -22,7 +22,7 @@ import Grid from "@mui/material/Grid"; import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary"; import { Typography } from "@mui/material"; import { niceBytes } from "../../../../common/utils"; -import Moment from "react-moment"; +import { DateTime } from "luxon"; import { Link } from "react-router-dom"; import Paper from "@mui/material/Paper"; import { ITenant } from "../ListTenants/types"; @@ -99,6 +99,10 @@ const SubnetLicenseTenant = ({ licenseInfo, activateProduct, }: ISubnetLicenseTenant) => { + const expiryTime = tenant + ? DateTime.fromISO(tenant.subnet_license.expires_at) + : DateTime.now(); + return ( - - {tenant.subnet_license.expires_at} - + {expiryTime.toFormat("yyyy-MM-dd")} diff --git a/portal-ui/src/screens/Console/Trace/Trace.tsx b/portal-ui/src/screens/Console/Trace/Trace.tsx index 96103ae88..a5acc00f7 100644 --- a/portal-ui/src/screens/Console/Trace/Trace.tsx +++ b/portal-ui/src/screens/Console/Trace/Trace.tsx @@ -15,6 +15,7 @@ // along with this program. If not, see . import React, { Fragment, useState } from "react"; +import { DateTime } from "luxon"; import { Box, Grid } from "@mui/material"; import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket"; import { Button } from "mds"; @@ -37,7 +38,6 @@ import { import TableWrapper from "../Common/TableWrapper/TableWrapper"; import PageHeader from "../Common/PageHeader/PageHeader"; import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper"; -import moment from "moment/moment"; import PageLayout from "../Common/Layout/PageLayout"; import { FilterIcon } from "../../../icons"; @@ -175,7 +175,8 @@ const Trace = ({ classes }: ITrace) => { }; c.onmessage = (message: IMessageEvent) => { let m: TraceMessage = JSON.parse(message.data.toString()); - m.ptime = moment(m.time, "YYYY-MM-DD HH:mm:s.SSSS +0000 UTC").toDate(); + + m.ptime = DateTime.fromISO(m.time).toJSDate(); m.key = Math.random(); dispatch(traceMessageReceived(m)); }; diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock index ae55316f7..bcafbe979 100644 --- a/portal-ui/yarn.lock +++ b/portal-ui/yarn.lock @@ -9643,11 +9643,6 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-moment@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/react-moment/-/react-moment-1.1.2.tgz#a9b157c58ddd226a2f746e5ca43415b24a17b6af" - integrity sha512-lfb+shYXI2tXlQrNUpNr05/1D/kzFj8Isbfp89DQrpZk0fs2JIAnLHWETR0hQS9zvtzwLWlVv0wKLffbue5HoA== - react-redux@^8.0.5: version "8.0.5" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"