Migrated moment.js to Luxon (#2540)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

Author: bexsoft

portal-ui/package.json

@@ -32,15 +32,13 @@
     "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",
     "react-copy-to-clipboard": "^5.0.2",
     "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",

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx

@@ -15,10 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
     <Grid
       container
@@ -321,9 +327,7 @@ const FileVersionItem = ({
           <Grid item xs={12} className={classes.collapsableInfo}>
             <span className={classes.versionData}>
               <strong>Last modified:</strong>{" "}
-              <reactMoment.default>
-                {versionInfo.last_modified}
-              </reactMoment.default>
+              {lastModified.toFormat("ccc, LLL dd yyyy HH:mm:ss (ZZZZ)")}
             </span>
             <span className={classes.versionData}>
               <strong>Size:</strong> {niceBytes(versionInfo.size || "0")}

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 = (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
       <DateTimePicker
         value={value}
         onChange={onChange}

portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx

@@ -17,7 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import Grid from "@mui/material/Grid";
 import InputLabel from "@mui/material/InputLabel";
-import moment from "moment/moment";
+import { DateTime } from "luxon";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -111,10 +111,7 @@ const calculateNewTime = (
   hours: number,
   minutes: number
 ) => {
-  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<number>(0);
   const [selectedMinutes, setSelectedMinutes] = useState<number>(0);
   const [validDate, setValidDate] = useState<boolean>(true);
-  const [dateSelected, setDateSelected] = useState<moment.Moment>(moment());
+  const [dateSelected, setDateSelected] = useState<DateTime>(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:
               </div>{" "}
               <div className={classes.validTill}>
-                {dateSelected.format("MM/DD/YYYY HH:mm:ss")}
+                {dateSelected.toFormat("MM/dd/yyyy HH:mm:ss")}
               </div>
             </div>
           ) : (

portal-ui/src/screens/Console/Common/TLSCertificate/TLSCertificate.tsx

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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 (
     <Chip
       key={certificateInfo.name}
@@ -130,9 +133,7 @@ const TLSCertificate = ({
               <EventBusyIcon color="inherit" fontSize="small" />
               &nbsp;
               <span className={"label"}>Expiry:&nbsp;</span>
-              <span>
-                <Moment format="YYYY/MM/DD">{certificateInfo.expiry}</Moment>
-              </span>
+              <span>{expiry.toFormat("yyyy/MM/dd")}</span>
             </Box>
             <Divider />
             <br />

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;

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 <http://www.gnu.org/licenses/>.
 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 = <Moment format="YYYY/MM/DD UTC HH:mm:ss">{log.time}</Moment>;
+  const logTime = DateTime.fromJSDate(log.time);
+
+  let dateStr = (
+    <Fragment>{logTime.toFormat("yyyy/MM/dd HH:mm:ss (ZZZZ)")}</Fragment>
+  );
+
   if (log.time.getFullYear() === 1) {
     dateStr = <Fragment>n/a</Fragment>;
   }

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 = () => {

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 (
     <Paper
       className={
@@ -174,9 +178,7 @@ const SubnetLicenseTenant = ({
                 gutterBottom
                 className={classes.licenseInfoValue}
               >
-                <Moment format="YYYY-MM-DD">
-                  {tenant.subnet_license.expires_at}
-                </Moment>
+                {expiryTime.toFormat("yyyy-MM-dd")}
               </Typography>
             </Grid>
             <Grid item xs={6}>

portal-ui/src/screens/Console/Trace/Trace.tsx

@@ -15,6 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 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));
       };