Impl [Monitor Jobs] Changes for pagination with auto-refresh (#2976)

mlrun · Dec 27, 2024 · 2899005 · 2899005
1 parent bec6534
commit 2899005
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 22 deletions.
diff --git a/src/common/Pagination/Pagination.js b/src/common/Pagination/Pagination.js
@@ -45,7 +45,12 @@ import './pagination.scss'
 
 const threeDotsString = '...'
 
-const Pagination = ({ closeParamName = '', paginationConfig }) => {
+const Pagination = ({
+  closeParamName = '',
+  disableNextDoubleBtn = false,
+  disabledNextDoubleBtnTooltip = '',
+  paginationConfig
+}) => {
   const [, setSearchParams] = useSearchParams()
   const navigate = useNavigate()
   const paginationPagesRef = useRef()
@@ -63,11 +68,12 @@ const Pagination = ({ closeParamName = '', paginationConfig }) => {
       prevBtn: paginationConfig[FE_PAGE] === 1,
       prevDoubleBtn: paginationConfig[BE_PAGE] === 1,
       nextBtn:
-        paginationConfig[FE_PAGE] === paginationConfig[FE_PAGE_END] &&
-        !paginationConfig.paginationResponse?.['page-token'],
-      nextDoubleBtn: !paginationConfig.paginationResponse?.['page-token']
+        (paginationConfig[FE_PAGE] === paginationConfig[FE_PAGE_END] && disableNextDoubleBtn) ||
+        (paginationConfig[FE_PAGE] === paginationConfig[FE_PAGE_END] &&
+          !paginationConfig.paginationResponse?.['page-token']),
+      nextDoubleBtn: disableNextDoubleBtn || !paginationConfig.paginationResponse?.['page-token']
     }
-  }, [paginationConfig])
+  }, [disableNextDoubleBtn, paginationConfig])
 
   const prevDoubleBtnTooltip = useMemo(() => {
     const visiblePagesCount = paginationConfig[BE_PAGE_SIZE] / paginationConfig[FE_PAGE_SIZE]
@@ -289,9 +295,11 @@ const Pagination = ({ closeParamName = '', paginationConfig }) => {
               className="pagination-navigate-btn"
               onClick={() => goToNextBePage()}
               tooltipText={
-                !navigationDisableState.nextDoubleBtn
-                  ? `Load page ${paginationConfig[FE_PAGE_END] + 1}+`
-                  : ''
+                navigationDisableState.nextDoubleBtn && disabledNextDoubleBtnTooltip
+                  ? disabledNextDoubleBtnTooltip
+                  : !navigationDisableState.nextDoubleBtn
+                    ? `Load page ${paginationConfig[FE_PAGE_END] + 1}+`
+                    : ''
               }
               disabled={navigationDisableState.nextDoubleBtn}
             >
@@ -307,6 +315,8 @@ const Pagination = ({ closeParamName = '', paginationConfig }) => {
 
 Pagination.propTypes = {
   closeParamName: PropTypes.string,
+  disableNextDoubleBtn: PropTypes.bool,
+  disabledNextDoubleBtnTooltip: PropTypes.string,
   paginationConfig: PAGINATION_CONFIG.isRequired
 }
 

diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
@@ -39,13 +39,14 @@ import {
   DATES_FILTER,
   GROUP_BY_NAME,
   GROUP_BY_NONE,
+  INTERNAL_AUTO_REFRESH_ID,
   NAME_FILTER,
   REQUEST_CANCELED,
   TAG_FILTER_ALL_ITEMS
 } from '../../constants'
 import detailsActions from '../../actions/details'
 import { FILTERS_CONFIG } from '../../types'
-import { setFilters } from '../../reducers/filtersReducer'
+import { setFilters, toggleAutoRefresh } from '../../reducers/filtersReducer'
 import { setFieldState } from 'igz-controls/utils/form.util'
 import { CUSTOM_RANGE_DATE_OPTION } from '../../utils/datePicker.util'
 
@@ -58,22 +59,31 @@ const ActionBar = ({
   allRowsAreExpanded,
   autoRefreshIsEnabled = false,
   autoRefreshIsStopped = false,
+  autoRefreshStopTrigger = false,
   cancelRequest = null,
   children,
   filters,
   filtersConfig,
+  handleAutoRefreshPrevValueChange,
   handleRefresh,
   hidden = false,
+  internalAutoRefreshIsEnabled = false,
   navigateLink,
   removeSelectedItem = null,
   setSearchParams,
   setSelectedRowData = null,
   tab = '',
   toggleAllRows,
+  withAutoRefresh = false,
+  withInternalAutoRefresh = false,
   withRefreshButton = true,
   withoutExpandButton
 }) => {
   const [autoRefresh, setAutoRefresh] = useState(autoRefreshIsEnabled)
+  const [internalAutoRefresh, setInternalAutoRefresh] = useState(internalAutoRefreshIsEnabled)
+  const [internalAutoRefreshPrevValue, setInternalAutoRefreshPrevValue] = useState(
+    internalAutoRefreshIsEnabled
+  )
   const filtersStore = useSelector(store => store.filtersStore)
   const changes = useSelector(store => store.detailsStore.changes)
   const dispatch = useDispatch()
@@ -102,7 +112,8 @@ const ActionBar = ({
 
   const formInitialValues = useMemo(() => {
     const initialValues = {
-      [AUTO_REFRESH_ID]: autoRefreshIsEnabled
+      [AUTO_REFRESH_ID]: autoRefreshIsEnabled,
+      [INTERNAL_AUTO_REFRESH_ID]: internalAutoRefreshIsEnabled
     }
 
     for (const [filterName, filterConfig] of Object.entries(filtersConfig)) {
@@ -112,7 +123,7 @@ const ActionBar = ({
     }
 
     return initialValues
-  }, [autoRefreshIsEnabled, filtersConfig])
+  }, [autoRefreshIsEnabled, filtersConfig, internalAutoRefreshIsEnabled])
 
   const formRef = React.useRef(
     createForm({
@@ -278,7 +289,7 @@ const ActionBar = ({
   }, [filterMenu, filtersConfig])
 
   useEffect(() => {
-    if (autoRefreshIsEnabled && autoRefresh && !hidden) {
+    if ((autoRefresh || internalAutoRefresh) && !hidden) {
       const intervalId = setInterval(() => {
         if (!autoRefreshIsStopped) {
           refresh(formRef.current.getState())
@@ -287,7 +298,35 @@ const ActionBar = ({
 
       return () => clearInterval(intervalId)
     }
-  }, [autoRefresh, autoRefreshIsStopped, hidden, autoRefreshIsEnabled, refresh])
+  }, [
+    autoRefresh,
+    autoRefreshIsStopped,
+    hidden,
+    refresh,
+    internalAutoRefresh,
+    withInternalAutoRefresh
+  ])
+
+  useEffect(() => {
+    if (autoRefreshStopTrigger && internalAutoRefresh) {
+      formRef.current?.change(INTERNAL_AUTO_REFRESH_ID, false)
+      setInternalAutoRefreshPrevValue(true)
+      dispatch(toggleAutoRefresh(false))
+      handleAutoRefreshPrevValueChange && handleAutoRefreshPrevValueChange(true)
+    } else if (!autoRefreshStopTrigger && internalAutoRefreshPrevValue) {
+      setInternalAutoRefreshPrevValue(false)
+      setInternalAutoRefresh(true)
+      dispatch(toggleAutoRefresh(true))
+      formRef.current?.change(INTERNAL_AUTO_REFRESH_ID, true)
+      handleAutoRefreshPrevValueChange && handleAutoRefreshPrevValueChange(false)
+    }
+  }, [
+    internalAutoRefreshPrevValue,
+    autoRefreshStopTrigger,
+    internalAutoRefresh,
+    handleAutoRefreshPrevValueChange,
+    dispatch
+  ])
 
   useLayoutEffect(() => {
     formRef.current.reset(formInitialValues)
@@ -361,14 +400,35 @@ const ActionBar = ({
                     />
                   ))
               )}
-              {autoRefreshIsEnabled && (
+              {withAutoRefresh && !withInternalAutoRefresh && (
                 <FormCheckBox
                   className="auto-refresh"
                   label={AUTO_REFRESH}
                   name={AUTO_REFRESH_ID}
                 />
               )}
-              <FormOnChange handler={setAutoRefresh} name={AUTO_REFRESH_ID} />
+              <FormOnChange
+                handler={value => {
+                  dispatch(toggleAutoRefresh(value))
+                  setAutoRefresh(value)
+                }}
+                name={AUTO_REFRESH_ID}
+              />
+              {withInternalAutoRefresh && (
+                <FormCheckBox
+                  className="auto-refresh"
+                  disabled={autoRefreshStopTrigger}
+                  label={AUTO_REFRESH}
+                  name={INTERNAL_AUTO_REFRESH_ID}
+                />
+              )}
+              <FormOnChange
+                handler={value => {
+                  setInternalAutoRefresh(value)
+                  dispatch(toggleAutoRefresh(value))
+                }}
+                name={INTERNAL_AUTO_REFRESH_ID}
+              />
               {withRefreshButton && (
                 <RoundedIcon tooltipText="Refresh" onClick={() => refresh(formState)} id="refresh">
                   <RefreshIcon />
@@ -425,4 +485,4 @@ ActionBar.propTypes = {
   withoutExpandButton: PropTypes.bool
 }
 
-export default ActionBar
+export default React.memo(ActionBar)
diff --git a/src/components/Jobs/Jobs.js b/src/components/Jobs/Jobs.js
@@ -64,6 +64,7 @@ export const JobsContext = React.createContext({})
 const Jobs = () => {
   const [confirmData, setConfirmData] = useState(null)
   const [selectedTab, setSelectedTab] = useState(null)
+  const [autoRefreshPrevValue, setAutoRefreshPrevValue] = useState(false)
   const [selectedJob, setSelectedJob] = useState({})
   const params = useParams()
   const navigate = useNavigate()
@@ -230,18 +231,19 @@ const Jobs = () => {
                     onClick: () => handleMonitoring(selectedJob, true)
                   }
                 ]}
-                autoRefreshIsEnabled={selectedTab === MONITOR_JOBS_TAB}
-                autoRefreshIsStopped={
-                  jobWizardIsOpened || jobsStore.loading || !isEmpty(selectedJob)
-                }
+                autoRefreshIsStopped={jobWizardIsOpened || jobsStore.loading}
+                autoRefreshStopTrigger={!isEmpty(selectedJob)}
                 filters={filters}
                 filtersConfig={tabData[selectedTab].filtersConfig}
                 handleRefresh={tabData[selectedTab].handleRefresh}
+                handleAutoRefreshPrevValueChange={setAutoRefreshPrevValue}
                 hidden={Boolean(params.workflowId)}
                 key={selectedTab}
                 page={JOBS_MONITORING_PAGE}
                 setSearchParams={setSearchParams}
                 tab={selectedTab}
+                withAutoRefresh
+                withInternalAutoRefresh={params.jobName}
                 withRefreshButton
                 withoutExpandButton
               >
@@ -259,6 +261,7 @@ const Jobs = () => {
                   getWorkflows,
                   handleMonitoring,
                   handleRerunJob,
+                  autoRefreshPrevValue,
                   jobRuns,
                   jobWizardIsOpened,
                   jobWizardMode,

diff --git a/src/components/Jobs/MonitorJobs/MonitorJobs.js b/src/components/Jobs/MonitorJobs/MonitorJobs.js
@@ -41,6 +41,7 @@ const MonitorJobs = () => {
     abortJobRef,
     abortingJobs,
     fetchJobFunctionsPromiseRef,
+    autoRefreshPrevValue,
     jobRuns,
     jobs,
     jobsFiltersConfig,
@@ -109,6 +110,7 @@ const MonitorJobs = () => {
         context={JobsContext}
         filters={filters}
         filtersConfig={jobsFiltersConfig}
+        autoRefreshPrevValue={autoRefreshPrevValue}
         jobRuns={jobRuns}
         jobs={jobs}
         navigateLink={getBackLink()}

diff --git a/src/constants.js b/src/constants.js
@@ -530,6 +530,7 @@ export const SORT_BY = 'sortBy'
 export const STATUS_FILTER = 'state'
 export const TAG_FILTER = 'tag'
 export const AUTO_REFRESH_ID = 'auto-refresh'
+export const INTERNAL_AUTO_REFRESH_ID = 'internal-auto-refresh'
 export const AUTO_REFRESH = 'Auto Refresh'
 export const ANY_TIME = 'Any time'
 export const STATUS_FILTER_NAME = 'state'

diff --git a/src/elements/JobsTable/JobsTable.js b/src/elements/JobsTable/JobsTable.js
@@ -59,6 +59,7 @@ const JobsTable = React.forwardRef(
       context,
       filters,
       filtersConfig,
+      autoRefreshPrevValue,
       paginatedJobs,
       refreshJobs,
       requestErrorMessage,
@@ -373,6 +374,14 @@ const JobsTable = React.forwardRef(
               <Pagination
                 paginationConfig={paginationConfigJobsRef.current}
                 closeParamName={selectedJob.name}
+                disabledNextDoubleBtnTooltip={
+                  filtersStore.autoRefresh
+                    ? 'Uncheck Auto Refresh to view more results'
+                    : autoRefreshPrevValue
+                      ? 'Close detailed view and uncheck Auto Refresh to view more results'
+                      : ''
+                }
+                disableNextDoubleBtn={filtersStore.autoRefresh || autoRefreshPrevValue}
               />
             </>
           )

diff --git a/src/hooks/usePagination.hook.js b/src/hooks/usePagination.hook.js
@@ -31,6 +31,7 @@ import {
   ITEMS_COUNT_END,
   ITEMS_COUNT_START
 } from '../constants'
+import { useSelector } from 'react-redux'
 
 export const usePagination = ({
   bePageSize = 1000,
@@ -45,6 +46,7 @@ export const usePagination = ({
   const [searchParams, setSearchParams] = useSearchParams()
   const [paginatedContent, setPaginatedContent] = useState([])
   const resetPaginationTriggerRef = useRef(resetPaginationTrigger)
+  const filtersStore = useSelector(store => store.filtersStore)
 
   const refreshContentDebounced = useMemo(() => {
     return debounce(filters => refreshContent(filters))
@@ -190,6 +192,19 @@ export const usePagination = ({
     }
   }, [paginationConfigRef, content, searchParams, setSearchParams, hidden])
 
+  useEffect(() => {
+    if (filtersStore.autoRefresh && paginationConfigRef.current[BE_PAGE] > 1) {
+      setSearchParams(
+        prevSearchParams => {
+          prevSearchParams.set(BE_PAGE, 1)
+          prevSearchParams.set(FE_PAGE, 1)
+          return prevSearchParams
+        },
+        { replace: true }
+      )
+    }
+  }, [filtersStore.autoRefresh, paginationConfigRef, setSearchParams])
+
   const handleRefresh = (filters, filtersChange) => {
     if (filtersChange && (searchParams.get(BE_PAGE) !== '1' || searchParams.get(FE_PAGE) !== '1')) {
       resetPagination(true)

diff --git a/src/reducers/filtersReducer.js b/src/reducers/filtersReducer.js
@@ -32,7 +32,7 @@ import {
 const initialState = {
   groupBy: GROUP_BY_NAME,
   iter: SHOW_ITERATIONS,
-
+  autoRefresh: false,
   tagOptions: null,
   projectOptions: [],
   [FILTER_MENU_MODAL]: {}
@@ -98,6 +98,9 @@ const filtersSlice = createSlice({
     },
     setFilterProjectOptions(state, action) {
       state.projectOptions = action.payload
+    },
+    toggleAutoRefresh(state, action) {
+      state.autoRefresh = action.payload
     }
   },
   extraReducers: builder => {
@@ -115,7 +118,8 @@ export const {
   setFiltersValues,
   setModalFiltersValues,
   setModalFiltersInitialValues,
-  setFilterProjectOptions
+  setFilterProjectOptions,
+  toggleAutoRefresh
 } = filtersSlice.actions
 
 export default filtersSlice.reducer