Migrated moment.js to Luxon (#2540)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
2023-01-05 17:16:21 -06:00
parent 756f0048f0
commit aece2251cf
11 changed files with 65 additions and 55 deletions
--- 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",
--- 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 <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")}
--- 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 = (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <DateTimePicker
        value={value}
        onChange={onChange}
--- a/portal-ui/src/screens/Console/Common/FormComponents/DaysSelector/DaysSelector.tsx
+++ b/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>
          ) : (
--- 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 <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 />
--- 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;
--- 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 <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>;
  }
--- 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 = () => {
--- 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 (
    <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}>
--- 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 <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));
      };
--- 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"