From 13d04b15deeea84fabef608022677ec91263cda4 Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Tue, 14 Feb 2023 00:03:26 -0600 Subject: [PATCH] Fixed DateTime interaction with DateTimePickerWrapper & DateRangeSelector (#2657) fixes #2655 Signed-off-by: Benjamin Perez --- .../Buckets/BucketDetails/BrowserHandler.tsx | 2 +- .../Objects/ListObjects/RewindEnable.tsx | 11 +++++++---- .../DateRangeSelector/DateRangeSelector.tsx | 9 +++++---- .../DateTimePickerWrapper.tsx | 12 +++++++----- .../Console/Logs/LogSearch/LogsSearchMain.tsx | 17 +++++++++-------- .../src/screens/Console/ObjectBrowser/types.ts | 2 +- 6 files changed, 30 insertions(+), 23 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx index 2d4212cdf..a99dd9613 100644 --- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BrowserHandler.tsx +++ b/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 { diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx index 311fe9356..cc1a64713 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/RewindEnable.tsx +++ b/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(false); const [rewindEnableButton, setRewindEnableButton] = useState(true); - const [dateSelected, setDateSelected] = useState(null); + const [dateSelected, setDateSelected] = useState( + 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 = ({ (dateTime ? setDateSelected(dateTime) : null)} id="rewind-selector" label="Rewind to" disabled={!rewindEnableButton} diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx index 87bccb14f..2521fec2f 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx +++ b/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; 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 71cd1b6b1..3483d8d77 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper.tsx @@ -15,6 +15,8 @@ // along with this program. If not, see . 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"} /> ); @@ -312,7 +314,7 @@ const DateTimePickerWrapper = ({ {label !== "" && ( {inputItem} diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx index 821274424..cec6fe221 100644 --- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx +++ b/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(true); - const [timeStart, setTimeStart] = useState(null); - const [timeEnd, setTimeEnd] = useState(null); + const [timeStart, setTimeStart] = useState(null); + const [timeEnd, setTimeEnd] = useState(null); const [filterOpen, setFilterOpen] = useState(false); const [records, setRecords] = useState([]); const [bucket, setBucket] = useState(""); @@ -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) => { ) : ( {" "} - +
setTimeEnd(time)} + setTimeStart={(time) => setTimeStart(time)} timeEnd={timeEnd} timeStart={timeStart} /> diff --git a/portal-ui/src/screens/Console/ObjectBrowser/types.ts b/portal-ui/src/screens/Console/ObjectBrowser/types.ts index 7aabf58f8..9b3a114de 100644 --- a/portal-ui/src/screens/Console/ObjectBrowser/types.ts +++ b/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 {