Skip to content

Commit 2cc1661

Browse files
mariana-furykmariana-furyk
committed
Impl [Monitor Jobs] Changes for pagination with auto-refresh
1 parent ce088e0 commit 2cc1661

File tree

8 files changed

+126
-22
lines changed

8 files changed

+126
-22
lines changed

‎src/common/Pagination/Pagination.js

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,12 @@ import './pagination.scss'
4545

4646
const threeDotsString = '...'
4747

48-
const Pagination = ({ closeParamName = '', paginationConfig }) => {
48+
const Pagination = ({
49+
closeParamName = '',
50+
disableNextDoubleBtn = false,
51+
disabledNextDoubleBtnTooltip = '',
52+
paginationConfig
53+
}) => {
4954
const [, setSearchParams] = useSearchParams()
5055
const navigate = useNavigate()
5156
const paginationPagesRef = useRef()
@@ -63,11 +68,12 @@ const Pagination = ({ closeParamName = '', paginationConfig }) => {
6368
prevBtn: paginationConfig[FE_PAGE] === 1,
6469
prevDoubleBtn: paginationConfig[BE_PAGE] === 1,
6570
nextBtn:
66-
paginationConfig[FE_PAGE] === paginationConfig[FE_PAGE_END] &&
67-
!paginationConfig.paginationResponse?.['page-token'],
68-
nextDoubleBtn: !paginationConfig.paginationResponse?.['page-token']
71+
(paginationConfig[FE_PAGE] === paginationConfig[FE_PAGE_END] && disableNextDoubleBtn) ||
72+
(paginationConfig[FE_PAGE] === paginationConfig[FE_PAGE_END] &&
73+
!paginationConfig.paginationResponse?.['page-token']),
74+
nextDoubleBtn: disableNextDoubleBtn || !paginationConfig.paginationResponse?.['page-token']
6975
}
70-
}, [paginationConfig])
76+
}, [disableNextDoubleBtn, paginationConfig])
7177

7278
const prevDoubleBtnTooltip = useMemo(() => {
7379
const visiblePagesCount = paginationConfig[BE_PAGE_SIZE] / paginationConfig[FE_PAGE_SIZE]
@@ -289,9 +295,11 @@ const Pagination = ({ closeParamName = '', paginationConfig }) => {
289295
className="pagination-navigate-btn"
290296
onClick={() => goToNextBePage()}
291297
tooltipText={
292-
!navigationDisableState.nextDoubleBtn
293-
? `Load page ${paginationConfig[FE_PAGE_END] + 1}+`
294-
: ''
298+
navigationDisableState.nextDoubleBtn && disabledNextDoubleBtnTooltip
299+
? disabledNextDoubleBtnTooltip
300+
: !navigationDisableState.nextDoubleBtn
301+
? `Load page ${paginationConfig[FE_PAGE_END] + 1}+`
302+
: ''
295303
}
296304
disabled={navigationDisableState.nextDoubleBtn}
297305
>
@@ -307,6 +315,8 @@ const Pagination = ({ closeParamName = '', paginationConfig }) => {
307315

308316
Pagination.propTypes = {
309317
closeParamName: PropTypes.string,
318+
disableNextDoubleBtn: PropTypes.bool,
319+
disabledNextDoubleBtnTooltip: PropTypes.string,
310320
paginationConfig: PAGINATION_CONFIG.isRequired
311321
}
312322

‎src/components/ActionBar/ActionBar.js

Lines changed: 68 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,14 @@ import {
3939
DATES_FILTER,
4040
GROUP_BY_NAME,
4141
GROUP_BY_NONE,
42+
INTERNAL_AUTO_REFRESH_ID,
4243
NAME_FILTER,
4344
REQUEST_CANCELED,
4445
TAG_FILTER_ALL_ITEMS
4546
} from '../../constants'
4647
import detailsActions from '../../actions/details'
4748
import { FILTERS_CONFIG } from '../../types'
48-
import { setFilters } from '../../reducers/filtersReducer'
49+
import { setFilters, toggleAutoRefresh } from '../../reducers/filtersReducer'
4950
import { setFieldState } from 'igz-controls/utils/form.util'
5051
import { CUSTOM_RANGE_DATE_OPTION } from '../../utils/datePicker.util'
5152

@@ -58,22 +59,31 @@ const ActionBar = ({
5859
allRowsAreExpanded,
5960
autoRefreshIsEnabled = false,
6061
autoRefreshIsStopped = false,
62+
autoRefreshStopTrigger = false,
6163
cancelRequest = null,
6264
children,
6365
filters,
6466
filtersConfig,
67+
handleAutoRefreshPrevValueChange,
6568
handleRefresh,
6669
hidden = false,
70+
internalAutoRefreshIsEnabled = false,
6771
navigateLink,
6872
removeSelectedItem = null,
6973
setSearchParams,
7074
setSelectedRowData = null,
7175
tab = '',
7276
toggleAllRows,
77+
withAutoRefresh = false,
78+
withInternalAutoRefresh = false,
7379
withRefreshButton = true,
7480
withoutExpandButton
7581
}) => {
7682
const [autoRefresh, setAutoRefresh] = useState(autoRefreshIsEnabled)
83+
const [internalAutoRefresh, setInternalAutoRefresh] = useState(internalAutoRefreshIsEnabled)
84+
const [internalAutoRefreshPrevValue, setInternalAutoRefreshPrevValue] = useState(
85+
internalAutoRefreshIsEnabled
86+
)
7787
const filtersStore = useSelector(store => store.filtersStore)
7888
const changes = useSelector(store => store.detailsStore.changes)
7989
const dispatch = useDispatch()
@@ -102,7 +112,8 @@ const ActionBar = ({
102112

103113
const formInitialValues = useMemo(() => {
104114
const initialValues = {
105-
[AUTO_REFRESH_ID]: autoRefreshIsEnabled
115+
[AUTO_REFRESH_ID]: autoRefreshIsEnabled,
116+
[INTERNAL_AUTO_REFRESH_ID]: internalAutoRefreshIsEnabled
106117
}
107118

108119
for (const [filterName, filterConfig] of Object.entries(filtersConfig)) {
@@ -112,7 +123,7 @@ const ActionBar = ({
112123
}
113124

114125
return initialValues
115-
}, [autoRefreshIsEnabled, filtersConfig])
126+
}, [autoRefreshIsEnabled, filtersConfig, internalAutoRefreshIsEnabled])
116127

117128
const formRef = React.useRef(
118129
createForm({
@@ -278,7 +289,7 @@ const ActionBar = ({
278289
}, [filterMenu, filtersConfig])
279290

280291
useEffect(() => {
281-
if (autoRefreshIsEnabled && autoRefresh && !hidden) {
292+
if ((autoRefresh || internalAutoRefresh) && !hidden) {
282293
const intervalId = setInterval(() => {
283294
if (!autoRefreshIsStopped) {
284295
refresh(formRef.current.getState())
@@ -287,7 +298,35 @@ const ActionBar = ({
287298

288299
return () => clearInterval(intervalId)
289300
}
290-
}, [autoRefresh, autoRefreshIsStopped, hidden, autoRefreshIsEnabled, refresh])
301+
}, [
302+
autoRefresh,
303+
autoRefreshIsStopped,
304+
hidden,
305+
refresh,
306+
internalAutoRefresh,
307+
withInternalAutoRefresh
308+
])
309+
310+
useEffect(() => {
311+
if (autoRefreshStopTrigger && internalAutoRefresh) {
312+
formRef.current?.change(INTERNAL_AUTO_REFRESH_ID, false)
313+
setInternalAutoRefreshPrevValue(true)
314+
dispatch(toggleAutoRefresh(false))
315+
handleAutoRefreshPrevValueChange && handleAutoRefreshPrevValueChange(true)
316+
} else if (!autoRefreshStopTrigger && internalAutoRefreshPrevValue) {
317+
setInternalAutoRefreshPrevValue(false)
318+
setInternalAutoRefresh(true)
319+
dispatch(toggleAutoRefresh(true))
320+
formRef.current?.change(INTERNAL_AUTO_REFRESH_ID, true)
321+
handleAutoRefreshPrevValueChange && handleAutoRefreshPrevValueChange(false)
322+
}
323+
}, [
324+
internalAutoRefreshPrevValue,
325+
autoRefreshStopTrigger,
326+
internalAutoRefresh,
327+
handleAutoRefreshPrevValueChange,
328+
dispatch
329+
])
291330

292331
useLayoutEffect(() => {
293332
formRef.current.reset(formInitialValues)
@@ -362,14 +401,35 @@ const ActionBar = ({
362401
/>
363402
))
364403
)}
365-
{autoRefreshIsEnabled && (
404+
{withAutoRefresh && !withInternalAutoRefresh && (
366405
<FormCheckBox
367406
className="auto-refresh"
368407
label={AUTO_REFRESH}
369408
name={AUTO_REFRESH_ID}
370409
/>
371410
)}
372-
<FormOnChange handler={setAutoRefresh} name={AUTO_REFRESH_ID} />
411+
<FormOnChange
412+
handler={value => {
413+
dispatch(toggleAutoRefresh(value))
414+
setAutoRefresh(value)
415+
}}
416+
name={AUTO_REFRESH_ID}
417+
/>
418+
{withInternalAutoRefresh && (
419+
<FormCheckBox
420+
className="auto-refresh"
421+
disabled={autoRefreshStopTrigger}
422+
label={AUTO_REFRESH}
423+
name={INTERNAL_AUTO_REFRESH_ID}
424+
/>
425+
)}
426+
<FormOnChange
427+
handler={value => {
428+
setInternalAutoRefresh(value)
429+
dispatch(toggleAutoRefresh(value))
430+
}}
431+
name={INTERNAL_AUTO_REFRESH_ID}
432+
/>
373433
{withRefreshButton && (
374434
<RoundedIcon tooltipText="Refresh" onClick={() => refresh(formState)} id="refresh">
375435
<RefreshIcon />
@@ -426,4 +486,4 @@ ActionBar.propTypes = {
426486
withoutExpandButton: PropTypes.bool
427487
}
428488

429-
export default ActionBar
489+
export default React.memo(ActionBar)

‎src/components/Jobs/Jobs.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const JobsContext = React.createContext({})
6464
const Jobs = () => {
6565
const [confirmData, setConfirmData] = useState(null)
6666
const [selectedTab, setSelectedTab] = useState(null)
67+
const [autoRefreshPrevValue, setAutoRefreshPrevValue] = useState(false)
6768
const [selectedJob, setSelectedJob] = useState({})
6869
const params = useParams()
6970
const navigate = useNavigate()
@@ -230,18 +231,19 @@ const Jobs = () => {
230231
onClick: handleMonitoring
231232
}
232233
]}
233-
autoRefreshIsEnabled={selectedTab === MONITOR_JOBS_TAB}
234-
autoRefreshIsStopped={
235-
jobWizardIsOpened || jobsStore.loading || !isEmpty(selectedJob)
236-
}
234+
autoRefreshIsStopped={jobWizardIsOpened || jobsStore.loading}
235+
autoRefreshStopTrigger={!isEmpty(selectedJob)}
237236
filters={filters}
238237
filtersConfig={tabData[selectedTab].filtersConfig}
239238
handleRefresh={tabData[selectedTab].handleRefresh}
239+
handleAutoRefreshPrevValueChange={setAutoRefreshPrevValue}
240240
hidden={Boolean(params.workflowId)}
241241
key={selectedTab}
242242
page={JOBS_MONITORING_PAGE}
243243
setSearchParams={setSearchParams}
244244
tab={selectedTab}
245+
withAutoRefresh
246+
withInternalAutoRefresh={params.jobName}
245247
withRefreshButton
246248
withoutExpandButton
247249
>
@@ -259,6 +261,7 @@ const Jobs = () => {
259261
getWorkflows,
260262
handleMonitoring,
261263
handleRerunJob,
264+
autoRefreshPrevValue,
262265
jobRuns,
263266
jobWizardIsOpened,
264267
jobWizardMode,

‎src/components/Jobs/MonitorJobs/MonitorJobs.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const MonitorJobs = () => {
4141
abortJobRef,
4242
abortingJobs,
4343
fetchJobFunctionsPromiseRef,
44+
autoRefreshPrevValue,
4445
jobRuns,
4546
jobs,
4647
jobsFiltersConfig,
@@ -109,6 +110,7 @@ const MonitorJobs = () => {
109110
context={JobsContext}
110111
filters={filters}
111112
filtersConfig={jobsFiltersConfig}
113+
autoRefreshPrevValue={autoRefreshPrevValue}
112114
jobRuns={jobRuns}
113115
jobs={jobs}
114116
navigateLink={getBackLink()}

‎src/constants.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -530,6 +530,7 @@ export const SORT_BY = 'sortBy'
530530
export const STATUS_FILTER = 'state'
531531
export const TAG_FILTER = 'tag'
532532
export const AUTO_REFRESH_ID = 'auto-refresh'
533+
export const INTERNAL_AUTO_REFRESH_ID = 'internal-auto-refresh'
533534
export const AUTO_REFRESH = 'Auto Refresh'
534535
export const ANY_TIME = 'Any time'
535536
export const STATUS_FILTER_NAME = 'state'

‎src/elements/JobsTable/JobsTable.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const JobsTable = React.forwardRef(
5959
context,
6060
filters,
6161
filtersConfig,
62+
autoRefreshPrevValue,
6263
paginatedJobs,
6364
refreshJobs,
6465
requestErrorMessage,
@@ -379,6 +380,14 @@ const JobsTable = React.forwardRef(
379380
<Pagination
380381
paginationConfig={paginationConfigJobsRef.current}
381382
closeParamName={selectedJob.name}
383+
disabledNextDoubleBtnTooltip={
384+
filtersStore.autoRefresh
385+
? 'Uncheck Auto Refresh to view more results'
386+
: autoRefreshPrevValue
387+
? 'Close detailed view and uncheck Auto Refresh to view more results'
388+
: ''
389+
}
390+
disableNextDoubleBtn={filtersStore.autoRefresh || autoRefreshPrevValue}
382391
/>
383392
</>
384393
)

‎src/hooks/usePagination.hook.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import {
3131
ITEMS_COUNT_END,
3232
ITEMS_COUNT_START
3333
} from '../constants'
34+
import { useSelector } from 'react-redux'
3435

3536
export const usePagination = ({
3637
bePageSize = 1000,
@@ -45,6 +46,7 @@ export const usePagination = ({
4546
const [searchParams, setSearchParams] = useSearchParams()
4647
const [paginatedContent, setPaginatedContent] = useState([])
4748
const resetPaginationTriggerRef = useRef(resetPaginationTrigger)
49+
const filtersStore = useSelector(store => store.filtersStore)
4850

4951
const refreshContentDebounced = useMemo(() => {
5052
return debounce(filters => refreshContent(filters))
@@ -190,6 +192,19 @@ export const usePagination = ({
190192
}
191193
}, [paginationConfigRef, content, searchParams, setSearchParams, hidden])
192194

195+
useEffect(() => {
196+
if (filtersStore.autoRefresh && paginationConfigRef.current[BE_PAGE] > 1) {
197+
setSearchParams(
198+
prevSearchParams => {
199+
prevSearchParams.set(BE_PAGE, 1)
200+
prevSearchParams.set(FE_PAGE, 1)
201+
return prevSearchParams
202+
},
203+
{ replace: true }
204+
)
205+
}
206+
}, [filtersStore.autoRefresh, paginationConfigRef, setSearchParams])
207+
193208
const handleRefresh = (filters, filtersChange) => {
194209
if (filtersChange && (searchParams.get(BE_PAGE) !== '1' || searchParams.get(FE_PAGE) !== '1')) {
195210
resetPagination(true)

‎src/reducers/filtersReducer.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import {
3232
const initialState = {
3333
groupBy: GROUP_BY_NAME,
3434
iter: SHOW_ITERATIONS,
35-
35+
autoRefresh: false,
3636
tagOptions: null,
3737
projectOptions: [],
3838
[FILTER_MENU_MODAL]: {}
@@ -98,6 +98,9 @@ const filtersSlice = createSlice({
9898
},
9999
setFilterProjectOptions(state, action) {
100100
state.projectOptions = action.payload
101+
},
102+
toggleAutoRefresh(state, action) {
103+
state.autoRefresh = action.payload
101104
}
102105
},
103106
extraReducers: builder => {
@@ -115,7 +118,8 @@ export const {
115118
setFiltersValues,
116119
setModalFiltersValues,
117120
setModalFiltersInitialValues,
118-
setFilterProjectOptions
121+
setFilterProjectOptions,
122+
toggleAutoRefresh
119123
} = filtersSlice.actions
120124

121125
export default filtersSlice.reducer

0 commit comments

Comments
 (0)