diff --git a/src/components/Jobs/MonitorJobs/MonitorJobs.js b/src/components/Jobs/MonitorJobs/MonitorJobs.js index eea5a70e7..d60a976a6 100644 --- a/src/components/Jobs/MonitorJobs/MonitorJobs.js +++ b/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( diff --git a/src/components/Jobs/MonitorJobs/monitorJobs.util.js b/src/components/Jobs/MonitorJobs/monitorJobs.util.js index 1f93c560e..8609bb525 100644 --- a/src/components/Jobs/MonitorJobs/monitorJobs.util.js +++ b/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: , className: 'danger', - onClick: handleDeleteJob + onClick: handleConfirmDeleteJob }, { label: 'Monitoring', diff --git a/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js b/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js index af63cbe79..b32071fa7 100644 --- a/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js +++ b/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) diff --git a/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js b/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js index 148d437ac..76e612a1c 100644 --- a/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js +++ b/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: , + className: 'danger', + onClick: handleConfirmDeleteJob + }, { label: 'Monitoring', icon: , @@ -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, diff --git a/src/components/Jobs/jobs.util.js b/src/components/Jobs/jobs.util.js index e9c386466..38b41a56b 100644 --- a/src/components/Jobs/jobs.util.js +++ b/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')