[Delete job] issues with job delete

src/components/Jobs/MonitorJobs/MonitorJobs.js

@@ -51,7 +51,7 @@ import { createJobsMonitorTabContent } from '../../../utils/createJobsContent'
 import { datePickerOptions, PAST_WEEK_DATE_OPTION } from '../../../utils/datePicker.util'
 import { getCloseDetailsLink } from '../../../utils/getCloseDetailsLink'
 import { getNoDataMessage } from '../../../utils/getNoDataMessage'
-import { enrichRunWithFunctionFields, handleAbortJob } from '../jobs.util'
+import { enrichRunWithFunctionFields, handleAbortJob, handleDeleteJob } from '../jobs.util'
 import { isDetailsTabExists } from '../../../utils/isDetailsTabExists'
 import { openPopUp } from 'igz-controls/utils/common.util'
 import { getJobLogs } from '../../../utils/getJobLogs.util'
@@ -209,31 +209,50 @@ const MonitorJobs = ({
     [onAbortJob, setConfirmData]
   )
 
-  const handleDeleteJob = useCallback(
-    async job => {
-      await deleteJob(params.projectName, job)
-        .then(() => {
-          refreshJobs(filtersStore)
-          dispatch(
-            setNotification({
-              status: 200,
-              id: Math.random(),
-              message: 'Job is successfully deleted'
-            })
-          )
-        })
-        .catch(error => {
-          dispatch(
-            setNotification({
-              status: error.response?.status || 400,
-              id: Math.random(),
-              retry: () => handleDeleteJob(job),
-              message: error.response?.data?.detail || 'Deleting job failed'
-            })
-          )
-        })
+  const onDeleteJob = useCallback(
+    job => {
+      handleDeleteJob(deleteJob, job, params.projectName, refreshJobs, filtersStore, dispatch).then(
+        () => {
+          if (params.jobName)
+            navigate(
+              location.pathname
+                .split('/')
+                .splice(0, location.pathname.split('/').indexOf(params.jobName) + 1)
+                .join('/')
+            )
+        }
+      )
+    },
+    [
+      deleteJob,
+      params.projectName,
+      params.jobName,
+      refreshJobs,
+      filtersStore,
+      dispatch,
+      navigate,
+      location.pathname
+    ]
+  )
+
+  const handleConfirmDeleteJob = useCallback(
+    job => {
+      setConfirmData({
+        item: job,
+        header: 'Delete job?',
+        message: `You try to delete job "${job.name}".`,
+        btnConfirmLabel: 'Delete',
+        btnConfirmType: DANGER_BUTTON,
+        rejectHandler: () => {
+          setConfirmData(null)
+        },
+        confirmHandler: () => {
+          onDeleteJob(job)
+          setConfirmData(null)
+        }
+      })
     },
-    [deleteJob, dispatch, filtersStore, params.projectName, refreshJobs]
+    [onDeleteJob, setConfirmData]
   )
 
   const actionsMenu = useMemo(() => {
@@ -247,7 +266,7 @@ const MonitorJobs = ({
         handleConfirmAbortJob,
         toggleConvertedYaml,
         selectedJob,
-        handleDeleteJob
+        handleConfirmDeleteJob
       )
   }, [
     handleRerunJob,
@@ -257,7 +276,7 @@ const MonitorJobs = ({
     handleConfirmAbortJob,
     toggleConvertedYaml,
     selectedJob,
-    handleDeleteJob
+    handleConfirmDeleteJob
   ])
 
   const modifyAndSelectRun = useCallback(

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

@@ -89,7 +89,7 @@ export const generateActionsMenu = (
   handleConfirmAbortJob,
   toggleConvertedYaml,
   selectedJob,
-  handleDeleteJob
+  handleConfirmDeleteJob
 ) => {
   return job?.uid
     ? [
@@ -104,7 +104,7 @@ export const generateActionsMenu = (
             label: 'Delete',
             icon: <Delete />,
             className: 'danger',
-            onClick: handleDeleteJob
+            onClick: handleConfirmDeleteJob
           },
           {
             label: 'Monitoring',

src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js

@@ -45,7 +45,7 @@ import {
   generatePageData,
   monitorWorkflowsActionCreator
 } from './monitorWorkflows.util'
-import { enrichRunWithFunctionFields, handleAbortJob } from '../jobs.util'
+import { enrichRunWithFunctionFields, handleAbortJob, handleDeleteJob } from '../jobs.util'
 import { DANGER_BUTTON } from 'igz-controls/constants'
 import { JobsContext } from '../Jobs'
 import { createJobsWorkflowsTabContent } from '../../../utils/createJobsContent'
@@ -68,6 +68,7 @@ import './MonitorWorkflows.scss'
 
 const MonitorWorkflows = ({
   abortJob,
+  deleteJob,
   fetchFunctionLogs,
   fetchJob,
   fetchJobFunctions,
@@ -175,8 +176,8 @@ const MonitorWorkflows = ({
   )
 
   const refreshJobs = useCallback(() => {
-    fetchWorkflow(params.workflowId)
-  }, [fetchWorkflow, params.workflowId])
+    fetchWorkflow(params.projectName, params.workflowId)
+  }, [fetchWorkflow, params.projectName, params.workflowId])
 
   const onAbortJob = useCallback(
     job => {
@@ -207,12 +208,65 @@ const MonitorWorkflows = ({
         },
         confirmHandler: () => {
           onAbortJob(job)
+          setConfirmData(null)
         }
       })
     },
     [onAbortJob, setConfirmData]
   )
 
+  const getWorkflows = useCallback(
+    filter => {
+      fetchWorkflows(params.projectName, filter, setLargeRequestErrorMessage)
+    },
+    [fetchWorkflows, params.projectName]
+  )
+
+  const onDeleteJob = useCallback(
+    job => {
+      handleDeleteJob(deleteJob, job, params.projectName, refreshJobs, filtersStore, dispatch).then(
+        () => {
+          navigate(
+            location.pathname
+              .split('/')
+              .splice(0, location.pathname.split('/').indexOf(params.workflowId) + 1)
+              .join('/')
+          )
+        }
+      )
+    },
+    [
+      deleteJob,
+      dispatch,
+      filtersStore,
+      location.pathname,
+      navigate,
+      params.projectName,
+      params.workflowId,
+      refreshJobs
+    ]
+  )
+
+  const handleConfirmDeleteJob = useCallback(
+    job => {
+      setConfirmData({
+        item: job,
+        header: 'Delete job?',
+        message: `You try to delete job "${job.name}".`,
+        btnConfirmLabel: 'Delete',
+        btnConfirmType: DANGER_BUTTON,
+        rejectHandler: () => {
+          setConfirmData(null)
+        },
+        confirmHandler: () => {
+          onDeleteJob(job)
+          setConfirmData(null)
+        }
+      })
+    },
+    [onDeleteJob, setConfirmData]
+  )
+
   const handleCatchRequest = useCallback(
     (error, message) => {
       dispatch(
@@ -241,6 +295,7 @@ const MonitorWorkflows = ({
         handleMonitoring,
         appStore.frontendSpec.abortable_function_kinds,
         handleConfirmAbortJob,
+        handleConfirmDeleteJob,
         toggleConvertedYaml
       )
   }, [
@@ -249,6 +304,7 @@ const MonitorWorkflows = ({
     appStore.frontendSpec.abortable_function_kinds,
     handleMonitoring,
     handleConfirmAbortJob,
+    handleConfirmDeleteJob,
     toggleConvertedYaml
   ])
 
@@ -300,13 +356,6 @@ const MonitorWorkflows = ({
       })
   }, [fetchJob, modifyAndSelectRun, navigate, params.jobId, params.projectName])
 
-  const getWorkflows = useCallback(
-    filter => {
-      fetchWorkflows(params.projectName, filter, setLargeRequestErrorMessage)
-    },
-    [fetchWorkflows, params.projectName]
-  )
-
   useEffect(() => {
     if ((params.jobId || params.functionHash) && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)

src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js

@@ -50,6 +50,7 @@ import { ReactComponent as MonitorIcon } from 'igz-controls/images/monitor-icon.
 import { ReactComponent as Run } from 'igz-controls/images/run.svg'
 import { ReactComponent as Cancel } from 'igz-controls/images/close.svg'
 import { ReactComponent as Yaml } from 'igz-controls/images/yaml.svg'
+import { ReactComponent as Delete } from 'igz-controls/images/delete.svg'
 
 export const generateFilters = () => [
   { type: PERIOD_FILTER, label: 'Period:' },
@@ -95,6 +96,7 @@ export const generateActionsMenu = (
   handleMonitoring,
   abortable_function_kinds,
   handleConfirmAbortJob,
+  handleConfirmDeleteJob,
   toggleConvertedYaml
 ) =>
   job?.uid
@@ -106,6 +108,12 @@ export const generateActionsMenu = (
             hidden: [JOB_KIND_LOCAL, ''].includes(job?.ui?.originalContent.metadata.labels.kind),
             onClick: handleRerunJob
           },
+          {
+            label: 'Delete',
+            icon: <Delete />,
+            className: 'danger',
+            onClick: handleConfirmDeleteJob
+          },
           {
             label: 'Monitoring',
             icon: <MonitorIcon />,
@@ -146,6 +154,7 @@ export const generateActionsMenu = (
 
 export const monitorWorkflowsActionCreator = {
   abortJob: jobsActions.abortJob,
+  deleteJob: jobsActions.deleteJob,
   fetchFunctionLogs: functionsActions.fetchFunctionLogs,
   fetchJob: jobsActions.fetchJob,
   fetchJobFunctions: jobsActions.fetchJobFunctions,

src/components/Jobs/jobs.util.js

@@ -282,6 +282,30 @@ export const handleAbortJob = (
   setConfirmData(null)
 }
 
+export const handleDeleteJob = (deleteJob, job, projectName, refreshJobs, filters, dispatch) => {
+  return deleteJob(projectName, job)
+    .then(() => {
+      refreshJobs(filters)
+      dispatch(
+        setNotification({
+          status: 200,
+          id: Math.random(),
+          message: 'Job is successfully deleted'
+        })
+      )
+    })
+    .catch(error => {
+      dispatch(
+        setNotification({
+          status: error.response?.status || 400,
+          id: Math.random(),
+          retry: () => handleDeleteJob(job),
+          message: error.response?.data?.detail || 'Deleting job failed'
+        })
+      )
+    })
+}
+
 export const monitorJob = (jobs_dashboard_url, item, projectName) => {
   let redirectUrl = jobs_dashboard_url
     .replace('{filter_name}', item ? 'uid' : 'project')