Fix [Scheduled, cross-projects] Custom range sets an invalid date by …

…default (#2550)
mlrun · Jun 23, 2024 · d2ff364 · d2ff364
1 parent 01f82fc
commit d2ff364
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 24 deletions.
diff --git a/src/common/DatePicker/DatePicker.js b/src/common/DatePicker/DatePicker.js
@@ -48,6 +48,7 @@ import {
   ANY_TIME_DATE_OPTION,
   getTimeFrameWarningMsg,
   CUSTOM_RANGE_DATE_OPTION,
+  roundSeconds,
 } from '../../utils/datePicker.util'
 import { initialState, datePickerActions, datePickerReducer } from './datePickerReducer'
 import { DATE_PICKER_TIME_FRAME_LIMITS } from '../../types'
@@ -163,14 +164,14 @@ const DatePicker = ({
   useEffect(() => {
     datePickerDispatch({
       type: datePickerActions.UPDATE_DATE_FROM,
-      payload: date || new Date()
+      payload: date || roundSeconds(new Date())
     })
   }, [date])
 
   useEffect(() => {
     datePickerDispatch({
       type: datePickerActions.UPDATE_DATE_TO,
-      payload: dateTo || new Date()
+      payload: dateTo || roundSeconds(new Date(), true)
     })
   }, [dateTo])
 
@@ -334,10 +335,10 @@ const DatePicker = ({
     setInputIsInvalid(false)
     setExternalInvalid(true)
 
-    let dates = [new Date(datePickerState.configFrom.selectedDate)]
+    let dates = [roundSeconds(datePickerState.configFrom.selectedDate)]
 
     if (isRange) {
-      dates.push(new Date(datePickerState.configTo.selectedDate))
+      dates.push(roundSeconds(datePickerState.configTo.selectedDate, true))
     }
 
     onChange(dates, false, CUSTOM_RANGE_DATE_OPTION)
@@ -363,7 +364,11 @@ const DatePicker = ({
       }
 
       if (!isValueEmpty) {
-        dates = event.target.value.split(datesDivider).map(date => new Date(date))
+        dates = event.target.value
+          .split(datesDivider)
+          .map(
+            (date, index) => roundSeconds(date, index > 0)
+          )
         const { isTimeRangeInvalid, timeRangeInvalidMessage } = validateTimeRange(dates)
 
         if (isTimeRangeInvalid) {
@@ -437,13 +442,13 @@ const DatePicker = ({
         setIsDatePickerOpened(state => !state)
         datePickerDispatch({
           type: datePickerActions.UPDATE_SELECTED_DATE_FROM,
-          payload: date || new Date()
+          payload: date || roundSeconds(new Date())
         })
 
         if (isRange) {
           datePickerDispatch({
             type: datePickerActions.UPDATE_SELECTED_DATE_TO,
-            payload: dateTo || new Date()
+            payload: dateTo || roundSeconds(new Date(), true)
           })
         }
       }
@@ -463,7 +468,7 @@ const DatePicker = ({
 
   const onSelectOption = option => {
     if (option.handler) {
-      onChange(option.handler(), option.isPredefined, option.id)
+      onChange(option.handler(isRange), option.isPredefined, option.id)
       if (isNil(externalInvalid)) {
         setInputIsInvalid(false)
       }
@@ -542,6 +547,7 @@ const DatePicker = ({
 }
 DatePicker.defaultProps = {
   className: '',
+  date: new Date(),
   dateTo: new Date(),
   disabled: false,
   externalInvalid: null,
@@ -562,7 +568,7 @@ DatePicker.defaultProps = {
 
 DatePicker.propTypes = {
   className: PropTypes.string,
-  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]).isRequired,
+  date: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   dateTo: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
   disabled: PropTypes.bool,
   externalInvalid: PropTypes.bool,

diff --git a/src/components/ProjectsJobsMonitoring/ProjectsJobsMonitoring.js b/src/components/ProjectsJobsMonitoring/ProjectsJobsMonitoring.js
@@ -108,7 +108,7 @@ const ProjectsJobsMonitoring = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }
         initialValue: {
           value: datePickerFutureOptions
             .find(option => option.id === NEXT_24_HOUR_DATE_OPTION)
-            .handler(),
+            .handler(true),
           isPredefined: true,
           initialSelectedOptionId: NEXT_24_HOUR_DATE_OPTION
         },
@@ -261,8 +261,8 @@ const ProjectsJobsMonitoring = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }
               let inDateRange = true
 
               if (filters.dates) {
-                const timeTo = filters.dates.value[0]?.getTime?.() || ''
-                const timeFrom = filters.dates.value[1]?.getTime?.() || ''
+                const timeTo = filters.dates.value[1]?.getTime?.() || ''
+                const timeFrom = filters.dates.value[0]?.getTime?.() || ''
                 const nextRun = job.nextRun.getTime()
 
                 if (timeFrom) {

diff --git a/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoring.js b/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoring.js
@@ -58,7 +58,7 @@ const ScheduledMonitoring = () => {
 
         filters = {
           dates: {
-            value: next24HourOption.handler(),
+            value: next24HourOption.handler(true),
             isPredefined: next24HourOption.isPredefined,
             initialSelectedOptionId: next24HourOption.id
           },

diff --git a/src/utils/datePicker.util.js b/src/utils/datePicker.util.js
@@ -142,54 +142,54 @@ export const datePickerFutureOptions = [
     id: NEXT_HOUR_DATE_OPTION,
     label: 'Next hour',
     isPredefined: true,
-    handler: () => {
+    handler: (isRange) => {
       return getDates((fromDate, toDate) => {
         fromDate.setHours(toDate.getHours() + 1)
-      })
+      }, true, isRange)
     },
     timeFrameMilliseconds: TIME_FRAME_LIMITS.HOUR
   },
   {
     id: NEXT_24_HOUR_DATE_OPTION,
     label: 'Next 24 hours',
     isPredefined: true,
-    handler: () => {
+    handler: (isRange) => {
       return getDates((fromDate, toDate) => {
         fromDate.setDate(toDate.getDate() + 1)
-      })
+      }, true, isRange)
     },
     timeFrameMilliseconds: TIME_FRAME_LIMITS['24_HOURS']
   },
   {
     id: NEXT_WEEK_DATE_OPTION,
     label: 'Next week',
     isPredefined: true,
-    handler: () => {
+    handler: (isRange) => {
       return getDates((fromDate, toDate) => {
         fromDate.setDate(toDate.getDate() + 7)
-      })
+      }, true, isRange)
     },
     timeFrameMilliseconds: TIME_FRAME_LIMITS.WEEK
   },
   {
     id: NEXT_MONTH_DATE_OPTION,
     label: 'Next month',
     isPredefined: true,
-    handler: () => {
+    handler: (isRange) => {
       return getDates((fromDate, toDate) => {
         fromDate.setMonth(toDate.getMonth() + 1)
-      })
+      }, true, isRange)
     },
     timeFrameMilliseconds: TIME_FRAME_LIMITS.MONTH
   },
   {
     id: NEXT_YEAR_DATE_OPTION,
     label: 'Next year',
     isPredefined: true,
-    handler: () => {
+    handler: (isRange) => {
       return getDates((fromDate, toDate) => {
         fromDate.setFullYear(toDate.getFullYear() + 1)
-      })
+      }, true, isRange)
     },
     timeFrameMilliseconds: TIME_FRAME_LIMITS.YEAR
   },
@@ -201,12 +201,14 @@ export const datePickerFutureOptions = [
   }
 ]
 
-const getDates = setDate => {
+const getDates = (setDate, isFutureTime, isRange) => {
   let fromDate = new Date()
   let toDate = new Date()
 
   setDate(fromDate, toDate)
 
+  if (isFutureTime && isRange) return [null, fromDate]
+
   return [fromDate]
 }
 
@@ -353,3 +355,11 @@ export const getTimeFrameWarningMsg = (timeFrameLimit) => {
 
   return `Maximum time range is ${mappedTime[timeFrameLimit]}`
 }
+
+
+export const roundSeconds = (date = new Date(), top = false) => {
+  const seconds = top ? 59 : 0
+  const milliseconds = top ? 999 : 0
+
+  return new Date(new Date(date).setSeconds(seconds, milliseconds))
+}