[FIX] [UI] Date picker not synced with 'no data' message time

src/common/DatePicker/DatePicker.jsx

@@ -54,14 +54,14 @@ import { isTargetElementInContainerElement } from '../../utils/checkElementsPosi
 
 const defaultProps = {
   date: new Date(),
-  dateTo: null
+  setExternalInvalid: () => {}
 }
 
 const DatePicker = ({
   className = '',
   customOptions = null,
   date = defaultProps.date,
-  dateTo = defaultProps.dateTo,
+  dateTo = null,
   disabled = false,
   excludeCustomRange = false,
   externalInvalid = null,
@@ -72,7 +72,7 @@ const DatePicker = ({
   required = false,
   requiredText = 'This field is required',
   selectedOptionId = '',
-  setExternalInvalid = () => {},
+  setExternalInvalid = defaultProps.setExternalInvalid,
   timeFrameLimit = Infinity,
   tip = '',
   type = 'date',

src/components/ActionBar/ActionBar.jsx

@@ -44,7 +44,13 @@ import {
   REQUEST_CANCELED,
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
-import { CUSTOM_RANGE_DATE_OPTION } from '../../utils/datePicker.util'
+import {
+  ANY_TIME_DATE_OPTION,
+  CUSTOM_RANGE_DATE_OPTION,
+  datePickerFutureOptions,
+  datePickerPastOptions,
+  getDatePickerFilterValue
+} from '../../utils/datePicker.util'
 import { FILTERS_CONFIG } from '../../types'
 import { getCloseDetailsLink } from '../../utils/link-helper.util'
 import { setFieldState } from 'igz-controls/utils/form.util'
@@ -189,13 +195,36 @@ const ActionBar = ({
     [filtersConfig, setSearchParams, withoutSearchParams]
   )
 
+  const updateRelativeTimeValue = useCallback(
+    filters => {
+      if (
+        filters[DATES_FILTER]?.initialSelectedOptionId &&
+        filters[DATES_FILTER].initialSelectedOptionId !== CUSTOM_RANGE_DATE_OPTION &&
+        filters[DATES_FILTER].initialSelectedOptionId !== ANY_TIME_DATE_OPTION
+      ) {
+        const isFuture = filtersConfig[DATES_FILTER]?.isFuture
+        const options = isFuture ? datePickerFutureOptions : datePickerPastOptions
+
+        filters[DATES_FILTER] = getDatePickerFilterValue(
+          options,
+          filters[DATES_FILTER].initialSelectedOptionId,
+          isFuture
+        )
+        formRef.current.change(DATES_FILTER, filters[DATES_FILTER])
+        dispatch(setFilters({ relativeDateChange: Date.now() }))
+      }
+    },
+    [dispatch, filtersConfig]
+  )
+
   const applyFilters = useCallback(
     async (formValues, filters, actionCanBePerformedChecked) => {
       const actionCanBePerformed =
         actionCanBePerformedChecked || (await performDetailsActionHelper(changes, dispatch, true))
-      const newFilters = { ...filters, ...formValues }
 
       if (actionCanBePerformed) {
+        const newFilters = { ...filters, ...formValues }
+
         if (closeParamName) {
           navigate(getCloseDetailsLink(closeParamName, true, selectedItemName), { replace: true })
         }
@@ -216,6 +245,7 @@ const ActionBar = ({
         if (withoutSearchParams) {
           setLocalFilters(newFilters)
         } else {
+          updateRelativeTimeValue(newFilters)
           saveFilters(newFilters)
         }
 
@@ -228,17 +258,18 @@ const ActionBar = ({
     [
       changes,
       dispatch,
+      updateRelativeTimeValue,
       closeParamName,
       filtersStore.groupBy,
-      saveFilters,
+      withoutSearchParams,
       removeSelectedItem,
       setSelectedRowData,
       toggleAllRows,
       handleRefresh,
       navigate,
       selectedItemName,
-      withoutSearchParams,
-      setLocalFilters
+      setLocalFilters,
+      saveFilters
     ]
   )
 
@@ -258,6 +289,7 @@ const ActionBar = ({
           if (withoutSearchParams) {
             setLocalFilters(newFilters)
           } else {
+            updateRelativeTimeValue(newFilters)
             saveFilters(formState.values)
           }
 
@@ -269,11 +301,12 @@ const ActionBar = ({
       changes,
       dispatch,
       cancelRequest,
-      saveFilters,
-      handleRefresh,
       filters,
+      updateRelativeTimeValue,
       withoutSearchParams,
-      setLocalFilters
+      handleRefresh,
+      setLocalFilters,
+      saveFilters
     ]
   )
 

src/components/Alerts/Alerts.jsx

@@ -57,7 +57,8 @@ const Alerts = () => {
 
   const alertsFilters = useFiltersFromSearchParams(
     alertsFiltersConfig,
-    parseAlertsQueryParamsCallback
+    parseAlertsQueryParamsCallback,
+    params.projectName
   )
 
   const {

src/components/FunctionsPage/Functions.jsx

@@ -131,7 +131,11 @@ const Functions = ({ isAllVersions = false }) => {
     }
   }, [selectedFunction.node_selector])
 
-  const functionsFilters = useFiltersFromSearchParams(functionsFiltersConfig)
+  const functionsFilters = useFiltersFromSearchParams(
+    functionsFiltersConfig,
+    undefined,
+    params.projectName
+  )
 
   const terminateDeleteTasksPolling = useCallback(() => {
     terminatePollRef?.current?.()

src/components/FunctionsPageOld/FunctionsOld.jsx

@@ -123,7 +123,11 @@ const Functions = () => {
     }
   }, [])
 
-  const functionsFilters = useFiltersFromSearchParams(functionsFiltersConfig)
+  const functionsFilters = useFiltersFromSearchParams(
+    functionsFiltersConfig,
+    undefined,
+    params.projectName
+  )
 
   const terminateDeleteTasksPolling = useCallback(() => {
     terminatePollRef?.current?.()

src/components/Jobs/Jobs.jsx

@@ -92,7 +92,8 @@ const Jobs = () => {
         parseQueryParamsCallback: parseScheduledQueryParamsCallback
       }
     }
-  }, [params.jobName])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.jobName, params.projectName, selectedTab])
 
   const {
     abortControllerRef,
@@ -197,7 +198,8 @@ const Jobs = () => {
 
   const filters = useFiltersFromSearchParams(
     initialTabData[selectedTab]?.filtersConfig,
-    initialTabData[selectedTab]?.parseQueryParamsCallback
+    initialTabData[selectedTab]?.parseQueryParamsCallback,
+    `${params.projectName}+${selectedTab}`
   )
 
   return (

src/components/MonitoringApplicationsPage/MonitoringApplicationsPage.jsx

@@ -49,7 +49,7 @@ const MonitoringApplicationsPage = () => {
   const params = useParams()
   const navigate = useNavigate()
   const filtersConfig = useMemo(() => getFiltersConfig(), [])
-  const filters = useFiltersFromSearchParams(filtersConfig)
+  const filters = useFiltersFromSearchParams(filtersConfig, undefined, params.projectName)
   const [, setSearchParams] = useSearchParams()
   const contentRef = useRef(null)
 

src/hooks/useFiltersFromSearchParams.hook.js

@@ -19,13 +19,15 @@ such restriction.
 */
 import { useMemo } from 'react'
 import { mapValues, isNil, pickBy } from 'lodash'
+import { useSelector } from 'react-redux'
+import { useSearchParams } from 'react-router-dom'
+
 import {
   DATES_FILTER,
   ITERATIONS_FILTER,
   SHOW_ITERATIONS,
   SHOW_UNTAGGED_FILTER
 } from '../constants'
-import { useSearchParams } from 'react-router-dom'
 import {
   datePickerFutureOptions,
   datePickerPastOptions,
@@ -42,7 +44,19 @@ const getFiltersFromSearchParams = (filtersConfig, searchParams, paramsParsingCa
   return mapValues(filtersConfigToApply, (filterConfig, filterName) => {
     const searchParamValue = searchParams.get(filterName)?.trim?.()
 
-    if (isNil(searchParamValue)) return filterConfig.initialValue
+    if (isNil(searchParamValue)) {
+      if (filterName === DATES_FILTER) {
+        return (
+          getDatePickerFilterValue(
+            filterConfig.isFuture ? datePickerFutureOptions : datePickerPastOptions,
+            filterConfig.initialValue.initialSelectedOptionId,
+            filterConfig.isFuture
+          ) ?? filterConfig.initialValue
+        )
+      }
+
+      return filterConfig.initialValue
+    }
 
     let parsedValue = paramsParsingCallback(filterName, searchParamValue)
 
@@ -78,12 +92,21 @@ export const getInitialFiltersByConfig = (filtersConfig = {}) => {
 
 export const useFiltersFromSearchParams = (
   filtersConfig = null,
-  paramsParsingCallback = defaultParamsParsingCallback
+  paramsParsingCallback = defaultParamsParsingCallback,
+  triggerKey = ''
 ) => {
+  const relativeDateChange = useSelector(store => store.filtersStore.relativeDateChange)
   const [searchParams] = useSearchParams()
   const filters = useMemo(() => {
-    return getFiltersFromSearchParams(filtersConfig, searchParams, paramsParsingCallback)
-  }, [filtersConfig, paramsParsingCallback, searchParams])
+    // triggerKey and relativeDateChange are added to dependencies to trigger date (timestamp for relative time) filter recalculation
+    return getFiltersFromSearchParams(
+      filtersConfig,
+      searchParams,
+      paramsParsingCallback,
+      triggerKey,
+      relativeDateChange
+    )
+  }, [filtersConfig, paramsParsingCallback, searchParams, relativeDateChange, triggerKey])
 
   return filters
 }

src/reducers/filtersReducer.js

@@ -29,7 +29,8 @@ const initialState = {
   internalAutoRefresh: false,
   tagOptions: null,
   projectOptions: [],
-  [FILTER_MENU_MODAL]: {}
+  [FILTER_MENU_MODAL]: {},
+  relativeDateChange: null
 }
 
 export const getFilterTagOptions = createAsyncThunk(