Fix [Batch Run] UI should not try to fetch hub functions without navi…

…gating to "Hub" tab (#2040)
mlrun · Oct 23, 2023 · ed75e9c · ed75e9c
1 parent e1290ed
commit ed75e9c
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 105 deletions.
diff --git a/src/actions/functions.js b/src/actions/functions.js
@@ -30,6 +30,7 @@ import {
   FETCH_HUB_FUNCTION_TEMPLATE_BEGIN,
   FETCH_HUB_FUNCTION_TEMPLATE_FAILURE,
   FETCH_HUB_FUNCTION_TEMPLATE_SUCCESS,
+  FETCH_HUB_FUNCTIONS_BEGIN,
   REMOVE_FUNCTION_TEMPLATE,
   SET_FUNCTIONS_TEMPLATES,
   SET_LOADING,
@@ -75,6 +76,7 @@ import {
   GET_FUNCTION_FAILURE,
   GET_FUNCTION_BEGIN,
   REMOVE_FUNCTION,
+  REMOVE_HUB_FUNCTIONS,
   SET_NEW_FUNCTION_FORCE_BUILD,
   SET_NEW_FUNCTION_PREEMTION_MODE,
   SET_NEW_FUNCTION_PRIORITY_CLASS_NAME,
@@ -207,20 +209,22 @@ const functionsActions = {
     type: FETCH_FUNCTION_TEMPLATE_FAILURE,
     payload: err
   }),
-  fetchFunctions: (project, filters, withoutLoader = false) => dispatch => {
-    dispatch(functionsActions.fetchFunctionsBegin(withoutLoader))
+  fetchFunctions:
+    (project, filters, withoutLoader = false) =>
+    dispatch => {
+      dispatch(functionsActions.fetchFunctionsBegin(withoutLoader))
 
-    return functionsApi
-      .getFunctions(project, filters)
-      .then(({ data }) => {
-        dispatch(functionsActions.fetchFunctionsSuccess(data.funcs))
+      return functionsApi
+        .getFunctions(project, filters)
+        .then(({ data }) => {
+          dispatch(functionsActions.fetchFunctionsSuccess(data.funcs))
 
-        return data.funcs
-      })
-      .catch(err => {
-        dispatch(functionsActions.fetchFunctionsFailure(err.message))
-      })
-  },
+          return data.funcs
+        })
+        .catch(err => {
+          dispatch(functionsActions.fetchFunctionsFailure(err.message))
+        })
+    },
   fetchFunctionsBegin: () => ({
     type: FETCH_FUNCTIONS_BEGIN
   }),
@@ -284,25 +288,34 @@ const functionsActions = {
     payload: err
   }),
   fetchHubFunctions: () => dispatch => {
-    return functionsApi.getHubFunctions().then(({ data: functionTemplates }) => {
-      const templatesData = generateHubCategories(functionTemplates.catalog)
+    dispatch(functionsActions.fetchHubFunctionsBegin())
 
-      dispatch(functionsActions.setHubFunctions(templatesData))
+    return functionsApi
+      .getHubFunctions()
+      .then(({ data: functionTemplates }) => {
+        const templatesData = generateHubCategories(functionTemplates.catalog)
 
-      return templatesData
-    }).catch((error) => {
-      const errorMsg = get(error, 'response.data.detail', 'Functions failed to load')
+        dispatch(functionsActions.setHubFunctions(templatesData))
 
-      dispatch(
-        setNotification({
-          status: error.response?.status || 400,
-          id: Math.random(),
-          message: errorMsg,
-          error
-        })
-      )
-    })
+        return templatesData
+      })
+      .catch(error => {
+        const errorMsg = get(error, 'response.data.detail', 'Functions failed to load')
+
+        dispatch(
+          setNotification({
+            status: error.response?.status || 400,
+            id: Math.random(),
+            message: errorMsg,
+            error
+          })
+        )
+      })
   },
+
+  fetchHubFunctionsBegin: () => ({
+    type: FETCH_HUB_FUNCTIONS_BEGIN
+  }),
   fetchHubFunctionsFailure: err => ({
     type: FETCH_HUB_FUNCTIONS_FAILURE,
     payload: err
@@ -336,6 +349,9 @@ const functionsActions = {
   removeFunction: () => ({
     type: REMOVE_FUNCTION
   }),
+  removeHubFunctions: () => ({
+    type: REMOVE_HUB_FUNCTIONS
+  }),
   removeFunctionTemplate: () => ({
     type: REMOVE_FUNCTION_TEMPLATE
   }),

diff --git a/src/components/JobWizard/JobWizard.js b/src/components/JobWizard/JobWizard.js
@@ -77,6 +77,7 @@ const JobWizard = ({
   onWizardClose,
   params,
   removeJobFunction,
+  removeHubFunctions,
   runNewJob,
   wizardTitle
 }) => {
@@ -92,7 +93,6 @@ const JobWizard = ({
   const [filteredFunctions, setFilteredFunctions] = useState([])
   const [filteredTemplates, setFilteredTemplates] = useState([])
   const [functions, setFunctions] = useState([])
-  const [isLoading, setIsLoading] = useState(false)
   const [templatesCategories, setTemplatesCategories] = useState([])
   const [templates, setTemplates] = useState([])
   const [jobAdditionalData, setJobAdditionalData] = useState({})
@@ -179,8 +179,12 @@ const JobWizard = ({
   useEffect(() => {
     return () => {
       setFunctions([])
+      setTemplatesCategories([])
+      setTemplates([])
+
+      removeHubFunctions()
     }
-  }, [setFunctions])
+  }, [removeHubFunctions, setFunctions])
 
   useEffect(() => {
     if (isBatchInference) {
@@ -298,7 +302,6 @@ const JobWizard = ({
       {formState => {
         return (
           <>
-            {isLoading && <Loader />}
             <Wizard
               className="form"
               formState={formState}
@@ -331,15 +334,13 @@ const JobWizard = ({
                   frontendSpec={frontendSpec}
                   functions={functions}
                   isEditMode={isEditMode}
-                  isLoading={isLoading}
                   params={params}
                   selectedFunctionData={selectedFunctionData}
                   selectedFunctionTab={selectedFunctionTab}
                   setActiveTab={setActiveTab}
                   setFilteredFunctions={setFilteredFunctions}
                   setFilteredTemplates={setFilteredTemplates}
                   setFunctions={setFunctions}
-                  setIsLoading={setIsLoading}
                   setJobAdditionalData={setJobAdditionalData}
                   setSelectedFunctionData={setSelectedFunctionData}
                   setSelectedFunctionTab={setSelectedFunctionTab}