Fix [UI] displays delete project messages that are not related to the…

… current user (#2815)
mlrun · Oct 9, 2024 · 6eb662e · 6eb662e
1 parent afaca0c
commit 6eb662e
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 44 deletions.
diff --git a/src/actions/projects.js b/src/actions/projects.js
@@ -86,7 +86,8 @@ import {
   SET_MLRUN_IS_UNHEALTHY,
   SET_MLRUN_UNHEALTHY_RETRYING,
   REQUEST_CANCELED,
-  DEFAULT_ABORT_MSG
+  DEFAULT_ABORT_MSG,
+  SET_DELETING_PROJECTS
 } from '../constants'
 import {
   CONFLICT_ERROR_STATUS_CODE,
@@ -639,6 +640,10 @@ const projectsAction = {
   removeProjectData: () => ({ type: REMOVE_PROJECT_DATA }),
   removeProjectSummary: () => ({ type: REMOVE_PROJECT_SUMMARY }),
   removeProjects: () => ({ type: REMOVE_PROJECTS }),
+  setDeletingProjects: data => ({
+    type: SET_DELETING_PROJECTS,
+    payload: data
+  }),
   setMlrunIsUnhealthy: isUnhealthy => ({
     type: SET_MLRUN_IS_UNHEALTHY,
     payload: isUnhealthy

diff --git a/src/components/ProjectsPage/Projects.js b/src/components/ProjectsPage/Projects.js
@@ -56,18 +56,22 @@ const Projects = () => {
   const [isDescendingOrder, setIsDescendingOrder] = useState(false)
   const [selectedProjectsState, setSelectedProjectsState] = useState('active')
   const [sortProjectId, setSortProjectId] = useState('byName')
-  const [deletingProjects, setDeletingProjects] = useState({})
   const [projectsRequestErrorMessage, setProjectsRequestErrorMessage] = useState('')
 
   const abortControllerRef = useRef(new AbortController())
   const terminatePollRef = useRef(null)
+  const deletingProjectsRef = useRef({})
 
   const dispatch = useDispatch()
   const { isDemoMode } = useMode()
   const { isNuclioModeDisabled } = useNuclioMode()
   const projectStore = useSelector(store => store.projectStore)
   const tasksStore = useSelector(store => store.tasksStore)
 
+  useEffect(() => {
+    deletingProjectsRef.current = projectStore.deletingProjects
+  }, [projectStore.deletingProjects])
+
   const fetchMinimalProjects = useCallback(() => {
     dispatch(projectsAction.fetchProjects({ format: 'minimal' }, setProjectsRequestErrorMessage))
   }, [dispatch])
@@ -118,36 +122,38 @@ const Projects = () => {
       }
     })
 
-    dispatch(fetchBackgroundTasks({}))
-      .unwrap()
-      .then(backgroundTasks => {
-        const wrapperIsUsed = backgroundTasks.some(backgroundTask =>
-          backgroundTask.metadata.kind.startsWith(projectDeletionWrapperKind)
-        )
-
-        const newDeletingProjects = backgroundTasks
-          .filter(
-            backgroundTask =>
-              backgroundTask.metadata.kind.startsWith(
-                wrapperIsUsed ? projectDeletionWrapperKind : projectDeletionKind
-              ) && backgroundTask?.status?.state === BG_TASK_RUNNING
+    if (!isEmpty(deletingProjectsRef.current)) {
+      dispatch(fetchBackgroundTasks({}))
+        .unwrap()
+        .then(backgroundTasks => {
+          const wrapperIsUsed = backgroundTasks.some(backgroundTask =>
+            backgroundTask.metadata.kind.startsWith(projectDeletionWrapperKind)
           )
-          .reduce((acc, backgroundTask) => {
-            acc[backgroundTask.metadata.name] = last(backgroundTask.metadata.kind.split('.'))
 
-            return acc
-          }, {})
+          const newDeletingProjects = backgroundTasks
+            .filter(
+              backgroundTask =>
+                backgroundTask.metadata.kind.startsWith(
+                  wrapperIsUsed ? projectDeletionWrapperKind : projectDeletionKind
+                ) && backgroundTask?.status?.state === BG_TASK_RUNNING && deletingProjectsRef.current[backgroundTask.metadata.name]
+            )
+            .reduce((acc, backgroundTask) => {
+              acc[backgroundTask.metadata.name] = last(backgroundTask.metadata.kind.split('.'))
 
-        setDeletingProjects(newDeletingProjects)
+              return acc
+            }, {})
 
-        if (!isEmpty(newDeletingProjects)) {
-          pollDeletingProjects(terminatePollRef, newDeletingProjects, refreshProjects, dispatch)
-        }
-      })
-      .catch(error => {
-        showErrorNotification(dispatch, error, '')
-      })
-  }, [fetchMinimalProjects, isNuclioModeDisabled, dispatch])
+          if (!isEmpty(newDeletingProjects)) {
+            pollDeletingProjects(terminatePollRef, newDeletingProjects, refreshProjects, dispatch)
+          } else {
+            dispatch(projectsAction.setDeletingProjects({}))
+          }
+        })
+        .catch(error => {
+          showErrorNotification(dispatch, error, '')
+        })
+    }
+  }, [isNuclioModeDisabled, dispatch, fetchMinimalProjects])
 
   const handleSearchOnFocus = useCallback(() => {
     refreshProjects()
@@ -197,16 +203,13 @@ const Projects = () => {
               })
             )
 
-            setDeletingProjects(prevDeletingProjects => {
-              const newDeletingProjects = {
-                ...prevDeletingProjects,
-                [response.data.metadata.name]: last(response.data.metadata.kind.split('.'))
-              }
-
-              pollDeletingProjects(terminatePollRef, newDeletingProjects, refreshProjects, dispatch)
+            const newDeletingProjects = {
+              ...deletingProjectsRef.current,
+              [response.data.metadata.name]: last(response.data.metadata.kind.split('.'))
+            }
 
-              return newDeletingProjects
-            })
+            dispatch(projectsAction.setDeletingProjects(newDeletingProjects))
+            pollDeletingProjects(terminatePollRef, newDeletingProjects, refreshProjects, dispatch)
           } else {
             fetchMinimalProjects()
             dispatch(
@@ -300,7 +303,7 @@ const Projects = () => {
             FileSaver.saveAs(blob, `${projectMinimal.metadata.name}.yaml`)
           })
           .catch(error => {
-            showErrorNotification(dispatch, error, '', "Failed to fetch project's YAML", () =>
+            showErrorNotification(dispatch, error, '', 'Failed to fetch project\'s YAML', () =>
               exportYaml(projectMinimal)
             )
           })
@@ -319,7 +322,7 @@ const Projects = () => {
           .catch(error => {
             setConvertedYaml('')
 
-            showErrorNotification(dispatch, error, '', "Failed to fetch project's YAML", () =>
+            showErrorNotification(dispatch, error, '', 'Failed to fetch project\'s YAML', () =>
               viewYaml(projectMinimal)
             )
           })
@@ -339,7 +342,7 @@ const Projects = () => {
     setActionsMenu(
       generateProjectActionsMenu(
         projectStore.projects,
-        deletingProjects,
+        projectStore.deletingProjects,
         exportYaml,
         viewYaml,
         onArchiveProject,
@@ -349,7 +352,7 @@ const Projects = () => {
     )
   }, [
     convertToYaml,
-    deletingProjects,
+    projectStore.deletingProjects,
     exportYaml,
     handleUnarchiveProject,
     isDemoMode,
@@ -366,6 +369,7 @@ const Projects = () => {
   useEffect(() => {
     return () => {
       abortControllerRef.current.abort()
+      terminatePollRef?.current?.()
     }
   }, [])
 

diff --git a/src/components/ProjectsPage/projects.util.js b/src/components/ProjectsPage/projects.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 { get } from 'lodash'
+import { get, omit } from 'lodash'
 
 import tasksApi from '../../api/tasks-api'
 import {
@@ -176,7 +176,11 @@ export const pollDeletingProjects = (terminatePollRef, deletingProjects, refresh
     )
 
     if (finishedTasks.length > 0) {
+      const tasksToExclude  = []
+
       finishedTasks.forEach(task => {
+        tasksToExclude.push(task.metadata.name)
+
         if (task.status.state === BG_TASK_SUCCEEDED) {
           dispatch(
             setNotification({
@@ -200,6 +204,7 @@ export const pollDeletingProjects = (terminatePollRef, deletingProjects, refresh
         }
       })
 
+      dispatch(projectsAction.setDeletingProjects(omit(deletingProjects, tasksToExclude)))
       refresh()
     }
 

diff --git a/src/constants.js b/src/constants.js
@@ -169,6 +169,7 @@ export const REMOVE_SCHEDULED_JOB_FAILURE = 'REMOVE_SCHEDULED_JOB_FAILURE'
 export const RUN_NEW_JOB_BEGIN = 'RUN_NEW_JOB_BEGIN'
 export const RUN_NEW_JOB_FAILURE = 'RUN_NEW_JOB_FAILURE'
 export const RUN_NEW_JOB_SUCCESS = 'RUN_NEW_JOB_SUCCESS'
+export const SET_DELETING_PROJECTS = 'SET_DELETING_PROJECTS'
 export const SET_JOBS_DATA = 'SET_JOBS_DATA'
 export const SET_JOBS_MONITORING_DATA = 'SET_JOBS_MONITORING_DATA'
 export const SET_MLRUN_IS_UNHEALTHY = 'SET_MLRUN_IS_UNHEALTHY'
@@ -641,4 +642,4 @@ export const CHART_TYPE_BAR = 'bar'
 /*=========== ARTIFACTS LIMITS =============*/
 export const ARTIFACT_MAX_CHUNK_SIZE = 1048576       // 1MB
 export const ARTIFACT_MAX_PREVIEW_SIZE = 10485760    // 10MB
-export const ARTIFACT_MAX_DOWNLOAD_SIZE = 104857600  // 100MB
+export const ARTIFACT_MAX_DOWNLOAD_SIZE = 104857600  // 100MB
diff --git a/src/reducers/projectReducer.js b/src/reducers/projectReducer.js
@@ -81,10 +81,12 @@ import {
   FETCH_PROJECT_SECRETS_SUCCESS,
   SET_JOBS_MONITORING_DATA,
   SET_MLRUN_IS_UNHEALTHY,
-  SET_MLRUN_UNHEALTHY_RETRYING
+  SET_MLRUN_UNHEALTHY_RETRYING,
+  SET_DELETING_PROJECTS
 } from '../constants'
 
 const initialState = {
+  deletingProjects: {},
   error: null,
   jobsMonitoringData: {
     jobs: {},
@@ -782,6 +784,13 @@ const projectReducer = (state = initialState, { type, payload }) => {
           error: null
         }
       }
+    case SET_DELETING_PROJECTS:
+      return {
+        ...state,
+        deletingProjects: {
+          ...payload
+        }
+      }
     case SET_JOBS_MONITORING_DATA:
       return {
         ...state,