Merge branch 'development' of https://github.com/mlrun/ui into ML-4215

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlrun.ui",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "private": true,
   "homepage": "/mlrun",
   "dependencies": {
@@ -19,11 +19,12 @@
     "dagre": "^0.8.5",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
+    "file-saver": "^2.0.5",
     "final-form": "^4.20.7",
     "final-form-arrays": "^3.0.2",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "1.3.0",
+    "iguazio.dashboard-react-controls": "1.5.1",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.5.2",
     "js-yaml": "^3.13.1",
@@ -41,13 +42,13 @@
     "react-final-form": "^6.5.9",
     "react-final-form-arrays": "^3.1.3",
     "react-final-form-listeners": "^1.0.3",
-    "react-flow-renderer": "^8.6.0",
     "react-modal-promise": "^1.0.2",
     "react-redux": "^7.1.3",
     "react-refresh": "^0.11.0",
     "react-router-dom": "6.2.2",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.3.0",
+    "reactflow": "^11.8.3",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
@@ -130,7 +131,7 @@
     "body-parser": "^1.19.0",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "chai": "^4.3.4",
-    "chromedriver": "^113.0.0",
+    "chromedriver": "^117.0.0",
     "crypto": "^1.0.1",
     "css-loader": "^6.5.1",
     "cucumber-html-reporter": "^5.3.0",

src/App.js

@@ -39,10 +39,13 @@ import {
   MONITOR_WORKFLOWS_TAB,
   PIPELINE_SUB_PAGE,
   PROJECTS_SETTINGS_GENERAL_TAB,
+  PROJECT_MONITOR,
+  PROJECT_QUICK_ACTIONS_PAGE,
   REAL_TIME_PIPELINES_TAB,
   SCHEDULE_TAB
 } from './constants'
 
+import 'reactflow/dist/style.css'
 import 'igz-controls/scss/common.scss'
 import './scss/main.scss'
 
@@ -115,17 +118,25 @@ const App = () => {
             >
               <Route path="projects" element={<Projects />} />
 
-              <Route path="projects/:projectName" element={<ProjectOverview />} />
-              <Route path="projects/:projectName/monitor" element={<ProjectMonitor />} />
+              <Route path="projects/:projectName" element={<Navigate replace to="monitor" />} />
+              <Route
+                path={`projects/:projectName/${PROJECT_MONITOR}`}
+                element={<ProjectMonitor />}
+              />
+
               {!isNuclioModeDisabled && (
                 <Route
                   path="projects/:projectName/monitor/consumer-groups/*"
                   element={<ConsumerGroupsWrapper />}
                 >
                   <Route path="" exact element={<ConsumerGroups />} />
-                  <Route path=":consumerGroupName" exact element={<ConsumerGroup />} />
+                  <Route path=":functionName/:streamName" exact element={<ConsumerGroup />} />
                 </Route>
               )}
+              <Route
+                path={`projects/:projectName/${PROJECT_QUICK_ACTIONS_PAGE}`}
+                element={<ProjectOverview />}
+              />
               <Route
                 path="projects/:projectName/settings"
                 element={<Navigate to={`${PROJECTS_SETTINGS_GENERAL_TAB}`} replace />}

src/actions/details.js

@@ -94,11 +94,11 @@ const detailsActions = {
     type: FETCH_MODEL_FEATURE_VECTOR_SUCCESS,
     payload: featureSets
   }),
-  fetchJobPods: (project, uid) => dispatch => {
+  fetchJobPods: (project, uid, kind) => dispatch => {
     dispatch(detailsActions.fetchPodsBegin())
 
     return detailsApi
-      .getJobPods(project)
+      .getJobPods(project, uid, kind)
       .then(({ data }) => {
         let podsData = generatePods(project, uid, data)
 

src/actions/functions.js

@@ -27,6 +27,10 @@ import {
   FETCH_FUNCTION_TEMPLATE_BEGIN,
   FETCH_FUNCTION_TEMPLATE_FAILURE,
   FETCH_FUNCTION_TEMPLATE_SUCCESS,
+  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,
@@ -39,6 +43,7 @@ import {
   SET_NEW_FUNCTION_IMAGE,
   SET_NEW_FUNCTION_BASE_IMAGE,
   SET_NEW_FUNCTION_COMMANDS,
+  SET_NEW_FUNCTION_REQUIREMENTS,
   SET_NEW_FUNCTION_VOLUME_MOUNTS,
   SET_NEW_FUNCTION_VOLUMES,
   SET_NEW_FUNCTION_RESOURCES,
@@ -71,12 +76,16 @@ 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
+  SET_NEW_FUNCTION_PRIORITY_CLASS_NAME,
+  FETCH_FUNCTIONS_TEMPLATES_FAILURE,
+  FETCH_HUB_FUNCTIONS_FAILURE,
+  SET_HUB_FUNCTIONS
 } from '../constants'
 import { FORBIDDEN_ERROR_STATUS_CODE } from 'igz-controls/constants'
-import { generateCategories } from '../utils/generateTemplatesCategories'
+import { generateCategories, generateHubCategories } from '../utils/generateTemplatesCategories'
 import { setNotification } from '../reducers/notificationReducer'
 
 const functionsActions = {
@@ -97,8 +106,6 @@ const functionsActions = {
             : error.message
 
         dispatch(functionsActions.createNewFunctionFailure(message))
-
-        throw error
       })
   },
   createNewFunctionBegin: () => ({
@@ -161,20 +168,63 @@ const functionsActions = {
   fetchFunctionLogsSuccess: () => ({
     type: FETCH_FUNCTION_LOGS_SUCCESS
   }),
-  fetchFunctions: (project, filters) => dispatch => {
-    dispatch(functionsActions.fetchFunctionsBegin())
+  fetchFunctionTemplate: path => dispatch => {
+    dispatch(functionsActions.fetchFunctionTemplateBegin())
 
     return functionsApi
-      .getFunctions(project, filters)
-      .then(({ data }) => {
-        dispatch(functionsActions.fetchFunctionsSuccess(data.funcs))
+      .getFunctionTemplate(path)
+      .then(response => {
+        let parsedData = yaml.safeLoad(response.data)
+        const templates = {
+          name: parsedData.metadata.name,
+          functions: parsedData.spec.entry_point ? [] : [parsedData]
+        }
 
-        return data.funcs
+        dispatch(functionsActions.fetchFunctionTemplateSuccess(templates))
+
+        return templates
       })
-      .catch(err => {
-        dispatch(functionsActions.fetchFunctionsFailure(err.message))
+      .catch(error => {
+        const errorMsg = get(error, 'response.data.detail', "Function's template failed to load")
+
+        dispatch(functionsActions.fetchFunctionTemplateFailure(error))
+        dispatch(
+          setNotification({
+            status: error.response?.status || 400,
+            id: Math.random(),
+            message: errorMsg,
+            error
+          })
+        )
       })
   },
+  fetchFunctionTemplateSuccess: selectFunction => ({
+    type: FETCH_FUNCTION_TEMPLATE_SUCCESS,
+    payload: selectFunction
+  }),
+  fetchFunctionTemplateBegin: () => ({
+    type: FETCH_FUNCTION_TEMPLATE_BEGIN
+  }),
+  fetchFunctionTemplateFailure: err => ({
+    type: FETCH_FUNCTION_TEMPLATE_FAILURE,
+    payload: err
+  }),
+  fetchFunctions:
+    (project, filters, withoutLoader = false) =>
+    dispatch => {
+      dispatch(functionsActions.fetchFunctionsBegin(withoutLoader))
+
+      return functionsApi
+        .getFunctions(project, filters)
+        .then(({ data }) => {
+          dispatch(functionsActions.fetchFunctionsSuccess(data.funcs))
+
+          return data.funcs
+        })
+        .catch(err => {
+          dispatch(functionsActions.fetchFunctionsFailure(err.message))
+        })
+    },
   fetchFunctionsBegin: () => ({
     type: FETCH_FUNCTIONS_BEGIN
   }),
@@ -196,28 +246,62 @@ const functionsActions = {
 
         return templatesData
       })
-      .catch(error => dispatch(functionsActions.fetchJobLogsFailure(error)))
+      .catch(error => {
+        dispatch(functionsActions.fetchFunctionsTemplatesFailure(error))
+      })
   },
-  fetchFunctionTemplate: path => dispatch => {
-    dispatch(functionsActions.fetchFunctionTemplateBegin())
+  fetchFunctionsTemplatesFailure: err => ({
+    type: FETCH_FUNCTIONS_TEMPLATES_FAILURE,
+    payload: err
+  }),
+  fetchHubFunction: hubFunctionName => dispatch => {
+    dispatch(functionsActions.fetchHubFunctionTemplateBegin())
 
     return functionsApi
-      .getFunctionTemplate(path)
+      .getHubFunction(hubFunctionName)
       .then(response => {
-        let parsedData = yaml.safeLoad(response.data)
-        const templates = {
-          name: parsedData.metadata.name,
-          functions: parsedData.spec.entry_point ? [] : [parsedData]
-        }
+        dispatch(functionsActions.fetchHubFunctionTemplateSuccess())
+        return response.data
+      })
+      .catch(error => {
+        const errorMsg = get(error, 'response.data.detail', 'The function failed to load')
+        dispatch(functionsActions.fetchHubFunctionTemplateFailure(error))
 
-        dispatch(functionsActions.fetchFunctionTemplateSuccess(templates))
+        dispatch(
+          setNotification({
+            status: error.response?.status || 400,
+            id: Math.random(),
+            message: errorMsg,
+            error
+          })
+        )
+      })
+  },
+  fetchHubFunctionTemplateSuccess: () => ({
+    type: FETCH_HUB_FUNCTION_TEMPLATE_SUCCESS
+  }),
+  fetchHubFunctionTemplateBegin: () => ({
+    type: FETCH_HUB_FUNCTION_TEMPLATE_BEGIN
+  }),
+  fetchHubFunctionTemplateFailure: err => ({
+    type: FETCH_HUB_FUNCTION_TEMPLATE_FAILURE,
+    payload: err
+  }),
+  fetchHubFunctions: () => dispatch => {
+    dispatch(functionsActions.fetchHubFunctionsBegin())
 
-        return templates
+    return functionsApi
+      .getHubFunctions()
+      .then(({ data: functionTemplates }) => {
+        const templatesData = generateHubCategories(functionTemplates.catalog)
+
+        dispatch(functionsActions.setHubFunctions(templatesData))
+
+        return templatesData
       })
       .catch(error => {
-        const errorMsg = get(error, 'response.data.detail', "Function's template failed to load")
+        const errorMsg = get(error, 'response.data.detail', 'Functions failed to load')
 
-        dispatch(functionsActions.fetchFunctionTemplateFailure(error))
         dispatch(
           setNotification({
             status: error.response?.status || 400,
@@ -226,26 +310,21 @@ const functionsActions = {
             error
           })
         )
-
-        throw error
       })
   },
-  fetchFunctionTemplateSuccess: selectFunction => ({
-    type: FETCH_FUNCTION_TEMPLATE_SUCCESS,
-    payload: selectFunction
-  }),
-  fetchFunctionTemplateBegin: () => ({
-    type: FETCH_FUNCTION_TEMPLATE_BEGIN
+
+  fetchHubFunctionsBegin: () => ({
+    type: FETCH_HUB_FUNCTIONS_BEGIN
   }),
-  fetchFunctionTemplateFailure: err => ({
-    type: FETCH_FUNCTION_TEMPLATE_FAILURE,
+  fetchHubFunctionsFailure: err => ({
+    type: FETCH_HUB_FUNCTIONS_FAILURE,
     payload: err
   }),
-  getFunction: (project, name, hash) => dispatch => {
+  getFunction: (project, name, hash, tag) => dispatch => {
     dispatch(functionsActions.getFunctionBegin())
 
     return functionsApi
-      .getFunction(project, name, hash)
+      .getFunction(project, name, hash, tag)
       .then(result => {
         dispatch(functionsActions.getFunctionSuccess(result.data.func))
 
@@ -270,6 +349,9 @@ const functionsActions = {
   removeFunction: () => ({
     type: REMOVE_FUNCTION
   }),
+  removeHubFunctions: () => ({
+    type: REMOVE_HUB_FUNCTIONS
+  }),
   removeFunctionTemplate: () => ({
     type: REMOVE_FUNCTION_TEMPLATE
   }),
@@ -286,6 +368,10 @@ const functionsActions = {
     type: SET_FUNCTIONS_TEMPLATES,
     payload
   }),
+  setHubFunctions: payload => ({
+    type: SET_HUB_FUNCTIONS,
+    payload
+  }),
   setLoading: loading => ({
     type: SET_LOADING,
     payload: loading
@@ -306,6 +392,10 @@ const functionsActions = {
     type: SET_NEW_FUNCTION_COMMANDS,
     payload: commands
   }),
+  setNewFunctionRequirements: requirements => ({
+    type: SET_NEW_FUNCTION_REQUIREMENTS,
+    payload: requirements
+  }),
   setNewFunctionDefaultClass: default_class => ({
     type: SET_NEW_FUNCTION_DEFAULT_CLASS,
     payload: default_class