Impl [Jobs] Change runs grouping behavior

Author: mavdryk

src/App.js

@@ -125,8 +125,8 @@ const App = () => {
           <Route path="projects" element={<Projects />} />
           <Route path={`projects/*/${JOBS_MONITORING_PAGE}/*`} element={<ProjectsJobsMonitoring />}>
             {[
-              `${JOBS_MONITORING_JOBS_TAB}/:jobName/:jobProjectName/:jobId/:tab`,
-              `${JOBS_MONITORING_JOBS_TAB}/:jobProjectName/:jobId/:tab`,
+              `${JOBS_MONITORING_JOBS_TAB}/:jobName/:jobId/:tab`,
+              `${JOBS_MONITORING_JOBS_TAB}/:jobId/:tab`,
               `${JOBS_MONITORING_JOBS_TAB}/:jobName`,
               `${JOBS_MONITORING_JOBS_TAB}`
             ].map((path, index) => {

src/common/Pagination/Pagination.js

@@ -20,8 +20,8 @@ such restriction.
 import React, { useCallback, useMemo, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
-import { isEmpty, max, min } from 'lodash'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { max, min } from 'lodash'
 
 import { RoundedIcon } from 'igz-controls/components'
 
@@ -36,7 +36,7 @@ import {
   ITEMS_COUNT_START
 } from '../../constants'
 import { PAGINATION_CONFIG } from '../../types'
-import { getDefaultCloseDetailsLink } from '../../utils/link-helper.util'
+import { getCloseDetailsLink } from '../../utils/link-helper.util'
 
 import { ReactComponent as DoubleArrow } from 'igz-controls/images/pagination-double-arrow.svg'
 import { ReactComponent as Arrow } from 'igz-controls/images/pagination-arrow.svg'
@@ -45,10 +45,9 @@ import './pagination.scss'
 
 const threeDotsString = '...'
 
-const Pagination = ({ page, paginationConfig, selectedItem = {} }) => {
+const Pagination = ({ page, paginationConfig, selectedItemName = '' }) => {
   const [, setSearchParams] = useSearchParams()
   const navigate = useNavigate()
-  const params = useParams()
   const paginationPagesRef = useRef()
   const leftSideRef = useRef(0)
   const rightSideRef = useRef(0)
@@ -78,10 +77,10 @@ const Pagination = ({ page, paginationConfig, selectedItem = {} }) => {
   }, [paginationConfig])
 
   const handlePageChange = useCallback(() => {
-    if (!isEmpty(selectedItem)) {
-      navigate(getDefaultCloseDetailsLink(params, page), { replace: true })
+    if (selectedItemName) {
+      navigate(getCloseDetailsLink(selectedItemName, true), { replace: true })
     }
-  }, [navigate, page, params, selectedItem])
+  }, [navigate, selectedItemName])
 
   const paginationItems = useMemo(() => {
     if (!paginationConfig[FE_PAGE]) return []
@@ -309,7 +308,7 @@ const Pagination = ({ page, paginationConfig, selectedItem = {} }) => {
 Pagination.propTypes = {
   page: PropTypes.string.isRequired,
   paginationConfig: PAGINATION_CONFIG.isRequired,
-  selectedItem: PropTypes.shape({})
+  selectedItemName: PropTypes.string
 }
 
 export default Pagination

src/components/Jobs/Jobs.js

@@ -20,7 +20,7 @@ such restriction.
 import React, { useEffect, useState, useMemo, useLayoutEffect, useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { useNavigate, useParams, Outlet, useLocation } from 'react-router-dom'
-import { defaultsDeep } from 'lodash'
+import { defaultsDeep, isEmpty } from 'lodash'
 
 import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
 import ContentMenu from '../../elements/ContentMenu/ContentMenu'
@@ -64,6 +64,7 @@ export const JobsContext = React.createContext({})
 const Jobs = () => {
   const [confirmData, setConfirmData] = useState(null)
   const [selectedTab, setSelectedTab] = useState(null)
+  const [selectedJob, setSelectedJob] = useState({})
   const params = useParams()
   const navigate = useNavigate()
   const location = useLocation()
@@ -98,6 +99,7 @@ const Jobs = () => {
     abortJobRef,
     abortingJobs,
     editableItem,
+    fetchJobFunctionsPromiseRef,
     getWorkflows,
     handleMonitoring,
     handleRefreshJobs,
@@ -122,7 +124,11 @@ const Jobs = () => {
     setScheduledJobs,
     setSearchParams,
     terminateAbortTasksPolling
-  } = useJobsPageData(initialTabData, selectedTab)
+  } = useJobsPageData(
+    setSelectedJob,
+    initialTabData,
+    selectedTab
+  )
 
   const handleActionsMenuClick = () => {
     setJobWizardMode(PANEL_CREATE_MODE)
@@ -229,11 +235,13 @@ const Jobs = () => {
                   }
                 ]}
                 autoRefreshIsEnabled={selectedTab === MONITOR_JOBS_TAB}
-                autoRefreshIsStopped={jobWizardIsOpened || jobsStore.loading}
+                autoRefreshIsStopped={
+                  jobWizardIsOpened || jobsStore.loading || !isEmpty(selectedJob)
+                }
                 filters={filters}
                 filtersConfig={tabData[selectedTab].filtersConfig}
                 handleRefresh={tabData[selectedTab].handleRefresh}
-                hidden={Boolean(params.jobId || params.workflowId)}
+                hidden={Boolean(params.workflowId)}
                 key={selectedTab}
                 page={JOBS_MONITORING_PAGE}
                 setSearchParams={setSearchParams}
@@ -251,6 +259,7 @@ const Jobs = () => {
                   abortJobRef,
                   abortingJobs,
                   editableItem,
+                  fetchJobFunctionsPromiseRef,
                   getWorkflows,
                   handleRerunJob,
                   jobRuns,
@@ -266,6 +275,7 @@ const Jobs = () => {
                   scheduledFiltersConfig: tabData[SCHEDULE_TAB].filtersConfig,
                   scheduledJobs,
                   searchParams,
+                  selectedJob,
                   setAbortingJobs,
                   setConfirmData,
                   setEditableItem,
@@ -274,6 +284,7 @@ const Jobs = () => {
                   setJobWizardMode,
                   setJobs,
                   setScheduledJobs,
+                  setSelectedJob,
                   tabData,
                   terminateAbortTasksPolling,
                   workflowsFiltersConfig: tabData[MONITOR_WORKFLOWS_TAB].filtersConfig

src/components/Jobs/MonitorJobs/MonitorJobs.js

@@ -17,7 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 
@@ -33,24 +33,26 @@ import { useFiltersFromSearchParams } from '../../../hooks/useFiltersFromSearchP
 import { getSavedSearchParams } from '../../../utils/filter.util'
 
 const MonitorJobs = () => {
-  const [selectedJob, setSelectedJob] = useState({})
   const params = useParams()
   const dispatch = useDispatch()
   const { isStagingMode } = useMode()
   const {
     abortControllerRef,
     abortJobRef,
     abortingJobs,
+    fetchJobFunctionsPromiseRef,
     jobRuns,
     jobs,
     jobsFiltersConfig,
     paginatedJobs,
     refreshJobs,
     requestErrorMessage,
     searchParams,
+    selectedJob,
     setAbortingJobs,
     setJobRuns,
     setJobs,
+    setSelectedJob,
     tabData,
     terminateAbortTasksPolling
   } = React.useContext(JobsContext)
@@ -97,7 +99,7 @@ const MonitorJobs = () => {
       jobsAreInitializedRef.current = false
       terminateAbortTasksPolling()
     }
-  }, [params.projectName, params.jobName, params.jobId, terminateAbortTasksPolling])
+  }, [params.projectName, params.jobName, terminateAbortTasksPolling])
 
   return (
     <>
@@ -111,9 +113,10 @@ const MonitorJobs = () => {
         jobs={jobs}
         navigateLink={getBackLink()}
         paginatedJobs={paginatedJobs}
-        ref={{ abortJobRef }}
+        ref={{ abortJobRef, fetchJobFunctionsPromiseRef }}
         refreshJobs={refreshJobs}
         requestErrorMessage={requestErrorMessage}
+        searchParams={searchParams}
         selectedJob={selectedJob}
         setAbortingJobs={setAbortingJobs}
         setJobRuns={setJobRuns}

src/components/Jobs/MonitorJobs/monitorJobs.util.js

@@ -18,7 +18,7 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React from 'react'
-import { isEmpty, debounce } from 'lodash'
+import { isEmpty } from 'lodash'
 
 import { FUNCTION_RUN_KINDS } from '../../../constants'
 import {
@@ -112,12 +112,3 @@ export const generateActionsMenu = (
     ]
   }
 }
-
-export const fetchInitialJobs = debounce(
-  (filters, selectedJob, jobId, refreshJobs, jobsAreInitializedRef) => {
-    if (isEmpty(selectedJob) && !jobId && !jobsAreInitializedRef.current) {
-      refreshJobs(filters)
-      jobsAreInitializedRef.current = true
-    }
-  }
-)

src/components/Jobs/jobs.util.js

@@ -243,7 +243,6 @@ export const rerunJob = async (job, setEditableItem, setJobWizardMode, dispatch)
 }
 
 export const handleAbortJob = (
-  projectName,
   job,
   setNotification,
   refreshJobs,
@@ -262,7 +261,7 @@ export const handleAbortJob = (
     })
   )
 
-  dispatch(abortJob({ projectName, job }))
+  dispatch(abortJob({ projectName: job.project, job }))
     .unwrap()
     .then(response => {
       const abortTaskId = get(response, 'metadata.name', '')
@@ -279,13 +278,13 @@ export const handleAbortJob = (
             }
           }
 
-          pollAbortingJobs(projectName, abortJobRef, newAbortingJobs, refreshJobs, dispatch)
+          pollAbortingJobs(job.project, abortJobRef, newAbortingJobs, refreshJobs, dispatch)
 
           return newAbortingJobs
         })
       } else {
         pollAbortingJobs(
-          projectName,
+          job.project,
           abortJobRef,
           {
             [abortTaskId]: {
@@ -301,7 +300,6 @@ export const handleAbortJob = (
     .catch(error => {
       showErrorNotification(dispatch, error, 'Failed to abort job', '', () =>
         handleAbortJob(
-          projectName,
           job,
           setNotification,
           refreshJobs,
@@ -383,7 +381,6 @@ const abortJobSuccessHandler = (dispatch, job) => {
  * Enriches a job run object with the associated function tag(s)
  * @param {Object} jobRun - The job run object to enrich
  * @param {Object} dispatch - dispatch method
- * @param {Function} fetchJobFunctions - The function to fetch job functions from an API
  * @param {Object} fetchJobFunctionsPromiseRef - A ref object used to store a reference to
  * the promise returned by the `fetchJobFunctions` function.
  * @returns {Promise<Object>} A Promise that resolves with the enriched job run object
@@ -445,7 +442,9 @@ export const handleDeleteJob = (isJobRunSelected, job, refreshJobs, filters, dis
       )
     })
     .catch(error => {
-      showErrorNotification(dispatch, error, 'Deleting job failed', '', () => handleDeleteJob(job))
+      showErrorNotification(dispatch, error, 'Deleting job failed', '', () =>
+        handleDeleteJob(isJobRunSelected, job, refreshJobs, filters, dispatch)
+      )
     })
 }
 

src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoring.js

@@ -17,7 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'
+import React, { useMemo, useEffect, useRef, useCallback } from 'react'
 import { useParams } from 'react-router-dom'
 
 import JobsTable from '../../../elements/JobsTable/JobsTable'
@@ -35,25 +35,27 @@ import { useFiltersFromSearchParams } from '../../../hooks/useFiltersFromSearchP
 import { getSavedSearchParams } from '../../../utils/filter.util'
 
 const JobsMonitoring = () => {
-  const [selectedJob, setSelectedJob] = useState({})
   const params = useParams()
   const { isStagingMode } = useMode()
   const {
     abortControllerRef,
     abortJobRef,
     abortingJobs,
+    fetchJobFunctionsPromiseRef,
     jobRuns,
     jobs,
     jobsFiltersConfig,
-    requestErrorMessage,
+    paginatedJobs,
     refreshJobs,
+    requestErrorMessage,
+    searchParams,
+    selectedJob,
     setAbortingJobs,
     setJobRuns,
     setJobs,
-    terminateAbortTasksPolling,
+    setSelectedJob,
     tabData,
-    paginatedJobs,
-    searchParams
+    terminateAbortTasksPolling
   } = React.useContext(ProjectJobsMonitoringContext)
   const jobsAreInitializedRef = useRef(false)
 
@@ -95,16 +97,17 @@ const JobsMonitoring = () => {
       {params.jobName && <TableTop link={getBackLink(true)} text={params.jobName} />}
       <JobsTable
         abortingJobs={abortingJobs}
-        ref={{ abortJobRef }}
         context={ProjectJobsMonitoringContext}
         filters={filters}
         filtersConfig={jobsFiltersConfig}
         jobRuns={jobRuns}
         jobs={jobs}
-        paginatedJobs={paginatedJobs}
-        requestErrorMessage={requestErrorMessage}
         navigateLink={getBackLink()}
+        paginatedJobs={paginatedJobs}
+        ref={{ abortJobRef, fetchJobFunctionsPromiseRef }}
         refreshJobs={() => refreshJobs(filters)}
+        requestErrorMessage={requestErrorMessage}
+        searchParams={searchParams}
         selectedJob={selectedJob}
         setAbortingJobs={setAbortingJobs}
         setJobRuns={setJobRuns}