Fixed DateTime interaction with DateTimePickerWrapper & DateRangeSelector (#2657)

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

portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx

@@ -375,7 +375,7 @@ const BrowserHandler = () => {
       let requestDate = new Date();
 
       if (rewindEnabled && rewindDate) {
-        requestDate = rewindDate;
+        requestDate = new Date(rewindDate);
       }
       initWSRequest(pathPrefix, requestDate);
     } else {

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx

@@ -28,6 +28,7 @@ import {
   setLoadingObjects,
   setRewindEnable,
 } from "../../../../ObjectBrowser/objectBrowserSlice";
+import { DateTime } from "luxon";
 
 interface IRewindEnable {
   closeModalAndRefresh: () => void;
@@ -51,12 +52,14 @@ const RewindEnable = ({
 
   const [rewindEnabling, setRewindEnabling] = useState<boolean>(false);
   const [rewindEnableButton, setRewindEnableButton] = useState<boolean>(true);
-  const [dateSelected, setDateSelected] = useState<any>(null);
+  const [dateSelected, setDateSelected] = useState<DateTime>(
+    DateTime.fromJSDate(new Date())
+  );
 
   useEffect(() => {
     if (rewindEnabled) {
       setRewindEnableButton(true);
-      setDateSelected(new Date(dateRewind));
+      setDateSelected(DateTime.fromISO(dateRewind || DateTime.now().toISO()));
     }
   }, [rewindEnabled, dateRewind]);
 
@@ -69,7 +72,7 @@ const RewindEnable = ({
         setRewindEnable({
           state: true,
           bucket: bucketName,
-          dateRewind: dateSelected,
+          dateRewind: dateSelected.toISO(),
         })
       );
     }
@@ -89,7 +92,7 @@ const RewindEnable = ({
       <Grid item xs={12}>
         <DateTimePickerWrapper
           value={dateSelected}
-          onChange={setDateSelected}
+          onChange={(dateTime) => (dateTime ? setDateSelected(dateTime) : null)}
           id="rewind-selector"
           label="Rewind to"
           disabled={!rewindEnableButton}

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

@@ -16,16 +16,17 @@
 
 import React from "react";
 import { Button, OpenListIcon, SyncIcon } from "mds";
+import { DateTime } from "luxon";
 import { Box, Grid } from "@mui/material";
 import ScheduleIcon from "@mui/icons-material/Schedule";
 import WatchLaterIcon from "@mui/icons-material/WatchLater";
 import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper";
 
 interface IDateRangeSelector {
-  timeStart: any;
-  setTimeStart: (date: any) => void;
-  timeEnd: any;
-  setTimeEnd: (date: any) => void;
+  timeStart: DateTime | null;
+  setTimeStart: (value: DateTime | null) => void;
+  timeEnd: DateTime | null;
+  setTimeEnd: (value: DateTime | null) => void;
   triggerSync?: () => void;
   label?: string;
   startLabel?: string;

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

@@ -15,6 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
+import { DateTime } from "luxon";
+import { HelpIcon, OpenListIcon } from "mds";
 import { Grid, InputLabel, TextField, Tooltip } from "@mui/material";
 import { DateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
 import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
@@ -23,12 +25,11 @@ import ScheduleIcon from "@mui/icons-material/Schedule";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { HelpIcon, OpenListIcon } from "mds";
 import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
 
 interface IDateTimePicker {
-  value: any;
-  onChange: (value: any) => any;
+  value: DateTime | null;
+  onChange: (value: DateTime | null) => void;
   classes: any;
   forSearchBlock?: boolean;
   forFilterContained?: boolean;
@@ -298,6 +299,7 @@ const DateTimePickerWrapper = ({
         PopperProps={{
           className: classes.paperOverride,
         }}
+        inputFormat={"LL/dd/yyyy HH:mm"}
       />
     </LocalizationProvider>
   );
@@ -312,7 +314,7 @@ const DateTimePickerWrapper = ({
       <Grid
         item
         xs={12}
-        className={`${containerCls} ${classNamePrefix}input-field-container `}
+        className={`${containerCls} ${classNamePrefix}input-field-container`}
       >
         {label !== "" && (
           <InputLabel
@@ -336,7 +338,7 @@ const DateTimePickerWrapper = ({
         )}
 
         <div
-          className={`${classes.textBoxContainer} ${classNamePrefix}input-wrapper  `}
+          className={`${classes.textBoxContainer} ${classNamePrefix}input-wrapper`}
         >
           {inputItem}
         </div>

portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx

@@ -47,6 +47,7 @@ import MissingIntegration from "../../Common/MissingIntegration/MissingIntegrati
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { selFeatures } from "../../consoleSlice";
 import { useAppDispatch } from "../../../../store";
+import { DateTime } from "luxon";
 
 interface ILogSearchProps {
   classes: any;
@@ -123,8 +124,8 @@ const LogsSearchMain = ({ classes }: ILogSearchProps) => {
   const features = useSelector(selFeatures);
 
   const [loading, setLoading] = useState<boolean>(true);
-  const [timeStart, setTimeStart] = useState<any>(null);
-  const [timeEnd, setTimeEnd] = useState<any>(null);
+  const [timeStart, setTimeStart] = useState<DateTime | null>(null);
+  const [timeEnd, setTimeEnd] = useState<DateTime | null>(null);
   const [filterOpen, setFilterOpen] = useState<boolean>(false);
   const [records, setRecords] = useState<IReqInfoSearchResults[]>([]);
   const [bucket, setBucket] = useState<string>("");
@@ -182,9 +183,9 @@ const LogsSearchMain = ({ classes }: ILogSearchProps) => {
             queryParams !== "" ? `${queryParams}` : ""
           }&pageSize=100&pageNo=${nextPage}&order=${
             sortOrder === "DESC" ? "timeDesc" : "timeAsc"
-          }${
-            timeStart !== null ? `&timeStart=${timeStart.toISOString()}` : ""
-          }${timeEnd !== null ? `&timeEnd=${timeEnd.toISOString()}` : ""}`
+          }${timeStart !== null ? `&timeStart=${timeStart.toISO()}` : ""}${
+            timeEnd !== null ? `&timeEnd=${timeEnd.toISO()}` : ""
+          }`
         )
         .then((res: ISearchResponse) => {
           const fetchedResults = res.results || [];
@@ -295,12 +296,12 @@ const LogsSearchMain = ({ classes }: ILogSearchProps) => {
         ) : (
           <Fragment>
             {" "}
-            <Grid xs={12} className={classes.formBox}>
+            <Grid item xs={12} className={classes.formBox}>
               <Grid item xs={12} className={`${classes.searchOptions}`}>
                 <div className={classes.dateRangePicker}>
                   <DateRangeSelector
-                    setTimeEnd={setTimeEnd}
-                    setTimeStart={setTimeStart}
+                    setTimeEnd={(time) => setTimeEnd(time)}
+                    setTimeStart={(time) => setTimeStart(time)}
                     timeEnd={timeEnd}
                     timeStart={timeStart}
                   />

portal-ui/src/screens/Console/ObjectBrowser/types.ts

@@ -61,7 +61,7 @@ export interface Route {
 export interface RewindItem {
   rewindEnabled: boolean;
   bucketToRewind: string;
-  dateToRewind: any;
+  dateToRewind: string | null;
 }
 
 export interface ObjectBrowserState {