[feature/ig4] Merge changes from the development branch

eslint.config.mjs

@@ -38,7 +38,6 @@ export default [
         version: 'detect'
       }
     },
-
     rules: {
       ...reactHooks.configs.recommended.rules,
       ...react.configs.recommended.rules,

package.json

@@ -34,7 +34,7 @@
     "prismjs": "^1.29.0",
     "prompts": "^2.4.2",
     "prop-types": "^15.8.1",
-    "qs": "^6.14.1",
+    "qs": "^6.15.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-final-form": "^6.5.9",
@@ -58,7 +58,12 @@
     "uuid": "^9.0.1"
   },
   "overrides": {
-    "minimist": "^1.2.8"
+    "jsonpath": "^1.2.0",
+    "minimist": "^1.2.8",
+    "minimatch": "^10.2.1",
+    "postcss": "^8.4.49",
+    "qs": "^6.15.0",
+    "tmp": "^0.2.5"
   },
   "scripts": {
     "start": "vite",
@@ -95,7 +100,7 @@
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.13.12",
     "@babel/register": "^7.13.14",
-    "@cucumber/cucumber": "^10.3.1",
+    "@cucumber/cucumber": "^12.6.0",
     "@eslint/js": "^9.19.0",
     "@storybook/addon-actions": "^8.0.1",
     "@storybook/addon-essentials": "^8.0.1",
@@ -142,7 +147,7 @@
     "node": "22.21.1",
     "nodemon": "^3.1.2",
     "pandas-js": "^0.2.4",
-    "postcss": "^8.4.36",
+    "postcss": "^8.4.49",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-normalize": "^10.0.1",
     "postcss-preset-env": "^9.5.2",

src/api/jobs-api.js

@@ -78,7 +78,9 @@ const jobsApi = {
 
     return mainHttpClient.get(`/projects/${project}/logs/${id}`, {
       params,
-      signal
+      signal,
+      responseType: 'stream',
+      adapter: 'fetch'
     })
   },
   getScheduledJobs: (project, newConfig) => {

src/components/ApplicationMetrics/ApplicationMetrics.jsx

@@ -274,7 +274,7 @@ const ApplicationMetrics = () => {
               detailsStore.loadingCounter > 0) && <Loader />}
             {artifactsStore.modelEndpoints.loading ||
             applicationsStore.loading ? null : modelEndpoints.length === 0 ? (
-              <NoData message={requestErrorMessage || 'No model endpoints found.'} />
+              <NoData message={requestErrorMessage || 'No model endpoints found'} />
             ) : (
               <>
                 <div className="list-view__section list-view__section-list">

src/components/Artifacts/Artifacts.jsx

@@ -413,10 +413,10 @@ const Artifacts = ({
   const tableHeaders = useMemo(() => tableContent[0]?.content ?? [], [tableContent])
 
   useEffect(() => {
-    if (params.id && pageData.details.menu.length > 0) {
+    if (params.id && !isEmpty(selectedArtifact) && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
-  }, [navigate, location, pageData.details.menu, params.tab, params.id])
+  }, [navigate, location, pageData.details.menu, params.tab, params.id, selectedArtifact])
 
   useEffect(() => {
     if (isEmpty(selectedArtifact)) {

src/components/Details/details.util.js

@@ -302,14 +302,19 @@ export const generateAlertsContent = selectedItem => {
 }
 
 export const generateRealTimePipelinesContent = selectedItem => {
+  const nuclioFunctionName = `${selectedItem.project}-${selectedItem.name.toLowerCase()}`.slice(
+    0,
+    63
+  )
+
   return {
     name: {
       value: selectedItem.name
     },
     rootFunction: {
       value: selectedItem.name,
       status: selectedItem.state.value,
-      link: generateNuclioLink(`/projects/${selectedItem.project}/functions/${selectedItem.name}`)
+      link: generateNuclioLink(`/projects/${selectedItem.project}/functions/${nuclioFunctionName}`)
     },
     childFunction: {
       value: (selectedItem.function_refs ?? []).map(item => item.name).join(', ')

src/components/DetailsPipeline/DetailsPipeline.jsx

@@ -72,7 +72,7 @@ const DetailsPipeline = ({ selectedItem }) => {
   const [stepIsSelected, setStepIsSelected] = useState(false)
   const [defaultErrorHandlerData, setDefaultErrorHandlerData] = useState(null)
   const defaultErrorHandlerIdRef = React.useRef(null)
-  const functionsStore = useSelector(store => store.functionsStore)
+  const isPipelineLoading = useSelector(store => store.artifactsStore.pipelines.loading)
   const { handleMonitoring, toggleConvertedYaml, frontendSpec } = useModelsPage()
   const reactFlowStoreApi = useStoreApi()
 
@@ -439,11 +439,12 @@ const DetailsPipeline = ({ selectedItem }) => {
             </Group>
           </div>
         )
-      ) : functionsStore.funcLoading ? (
+      ) : isPipelineLoading ? (
         <Loader />
       ) : (
-        <NoData message="The ingestion function has no steps and therefore no graph." />
+        <NoData message="The ingestion function has no steps and therefore no graph" />
       )}
+      {isPipelineLoading && !isEmpty(selectedItem?.graph) && <Loader />}
     </div>
   )
 }

src/components/DetailsPipeline/detailsPipeline.scss

@@ -7,6 +7,11 @@
   flex-direction: column;
   container-type: size;
   container-name: pipeline-container;
+  position: absolute;
+  top: 130px;
+  left: 0;
+  right: 0;
+  bottom: 0;
 
   .pipeline-header {
     display: flex;

src/components/DetailsPipeline/pipeline.utils.jsx

@@ -42,21 +42,21 @@ import ConnectionIcon from 'igz-controls/images/connections-icon.svg?react'
 import RouterStepIcon from 'igz-controls/images/router-step-badge.svg?react'
 
 export const STEPS_TYPES = {
-  MODEL_RUNNER: 'Model runner',
+  MODEL_RUNNER: 'ModelRunner',
   QUEUE: 'Queue',
-  ERROR_STEP: 'Error handler',
-  HUB_STEP: 'MLRun hub',
+  ERROR_STEP: 'ErrorHandler',
+  HUB_STEP: 'MLRunHub',
   EXTEND: 'Extend',
-  FLAT_MAP: 'Flat Map',
+  FLAT_MAP: 'FlatMap',
   FLATTEN: 'Flatten',
-  MAP_WITH_STATE: 'Map with state',
+  MAP_WITH_STATE: 'MapWithState',
   CHOICE: 'Choice',
-  CHOICE_BY_FIELD: 'Choice by field',
+  CHOICE_BY_FIELD: 'ChoiceByField',
   BATCH: 'Batch',
-  FOR_EACH: 'For each',
+  FOR_EACH: 'ForEach',
   FILTER: 'Filter',
-  SAMPLE_WINDOW: 'Sample window',
-  REMOTE_STEP: 'Remote',
+  SAMPLE_WINDOW: 'SampleWindow',
+  REMOTE_STEP: 'RemoteStep',
   CUSTOM_STEP: 'Custom',
   ROUTER_STEP: 'Router'
 }
@@ -92,7 +92,8 @@ const NODE_TYPE_DATA_BY_KIND_MAP = {
   [ERROR_STEP_KIND]: {
     nodeType: ML_COMMON_NODE,
     badgeIcon: <ErrorStepIcon />,
-    stepType: STEPS_TYPES.ERROR_STEP
+    stepType: STEPS_TYPES.ERROR_STEP,
+    subLabel: 'Error handler'
   },
   [HUB_STEP_KIND]: {
     nodeType: ML_COMMON_NODE,

src/components/FeatureStore/FeatureSets/FeatureSets.jsx

@@ -20,7 +20,7 @@ such restriction.
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, isEmpty } from 'lodash'
 
 import FeatureSetsView from './FeatureSetsView'
 import { FeatureStoreContext } from '../FeatureStore'
@@ -391,10 +391,23 @@ const FeatureSets = () => {
   }, [featureStore.featureSets.allData, navigate, params.name, params.projectName, params.tag])
 
   useEffect(() => {
-    if (params.name && params.tag && pageData.details.menu.length > 0) {
+    if (
+      params.name &&
+      params.tag &&
+      !isEmpty(selectedFeatureSet) &&
+      pageData.details.menu.length > 0
+    ) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
-  }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab])
+  }, [
+    navigate,
+    location,
+    pageData.details.menu,
+    params.name,
+    params.tag,
+    params.tab,
+    selectedFeatureSet
+  ])
 
   useEffect(() => {
     checkTabIsValid(navigate, params, selectedFeatureSet, FEATURE_SETS_TAB)

src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx

@@ -458,10 +458,23 @@ const FeatureVectors = () => {
   }, [featureStore.featureVectors?.allData, navigate, params.name, params.projectName, params.tag])
 
   useEffect(() => {
-    if (params.name && params.tag && pageData.details.menu.length > 0) {
+    if (
+      params.name &&
+      params.tag &&
+      !isEmpty(selectedFeatureVector) &&
+      pageData.details.menu.length > 0
+    ) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
-  }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab])
+  }, [
+    navigate,
+    location,
+    pageData.details.menu,
+    params.name,
+    params.tag,
+    params.tab,
+    selectedFeatureVector
+  ])
 
   useEffect(() => {
     checkTabIsValid(navigate, params, setSelectedFeatureVector, FEATURE_VECTORS_TAB)

src/components/FunctionsPage/Functions.jsx

@@ -503,10 +503,10 @@ const Functions = ({ isAllVersions = false }) => {
   }, [params.projectName])
 
   useEffect(() => {
-    if (params.id && pageData.details.menu.length > 0) {
+    if (params.id && !isEmpty(selectedFunction) && pageData.details.menu.length > 0) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
-  }, [navigate, pageData.details.menu, location, params.id, params.tab])
+  }, [navigate, pageData.details.menu, location, params.id, params.tab, selectedFunction])
 
   useEffect(() => {
     dispatch(setFilters({ groupBy: GROUP_BY_NONE }))

src/components/FunctionsPageOld/FunctionsOld.jsx

@@ -537,10 +537,22 @@ const Functions = () => {
   }, [params.projectName])
 
   useEffect(() => {
-    if ((params.funcName || params.hash) && pageData.details.menu.length > 0) {
+    if (
+      (params.funcName || params.hash) &&
+      !isEmpty(selectedFunction) &&
+      pageData.details.menu.length > 0
+    ) {
       isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
     }
-  }, [navigate, pageData.details.menu, location, params.hash, params.funcName, params.tab])
+  }, [
+    navigate,
+    pageData.details.menu,
+    location,
+    params.hash,
+    params.funcName,
+    params.tab,
+    selectedFunction
+  ])
 
   useEffect(() => {
     checkForSelectedFunction(

src/components/JobWizard/JobWizard.util.js

@@ -169,7 +169,7 @@ export const generateJobWizardData = (
       inputPath: null,
       outputPath:
         currentProject?.spec?.artifact_path ||
-        frontendSpec.default_artifact_path ||
+        (frontendSpec.ce?.version && frontendSpec.default_artifact_path) ||
         JOB_DEFAULT_OUTPUT_PATH,
       accessKey: true,
       accessKeyInput: '',

src/components/JobWizard/JobWizardSteps/JobWizardFunctionSelection/JobWizardFunctionSelection.jsx

@@ -331,6 +331,10 @@ const JobWizardFunctionSelection = ({
             hubFunctionLoadedRef.current = true
           }
         })
+        .catch(() => {
+          setTemplatesCategories([])
+          setTemplates([])
+        })
     }
   }, [activeTab, dispatch, formState.initialValues, setTemplates, setTemplatesCategories])
 

src/components/ModelsPage/ModelEndpoints/ModelEndpointsTable.jsx

@@ -21,6 +21,7 @@ import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import PropTypes from 'prop-types'
+import { isEmpty } from 'lodash'
 
 import ActionBar from '../../ActionBar/ActionBar'
 import ArtifactsTableRow from '../../../elements/ArtifactsTableRow/ArtifactsTableRow'
@@ -205,10 +206,23 @@ const ModelEndpointsTable = React.forwardRef(
     ])
 
     useEffect(() => {
-      if (params.name && params.tag && pageData.details.menu.length > 0) {
+      if (
+        params.name &&
+        params.tag &&
+        !isEmpty(selectedModelEndpoint) &&
+        pageData.details.menu.length > 0
+      ) {
         isDetailsTabExists(params.tab, pageData.details.menu, navigate, location)
       }
-    }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab])
+    }, [
+      navigate,
+      location,
+      pageData.details.menu,
+      params.name,
+      params.tag,
+      params.tab,
+      selectedModelEndpoint
+    ])
 
     const tableContent = useMemo(() => {
       return modelEndpoints.map(contentItem =>

src/components/ModelsPage/RealTimePipelines/RealTimePipelines.jsx

@@ -43,8 +43,7 @@ import {
   DISPLAY_SYSTEM_PIPELINES_FILTER,
   PIPELINE_TOPOLOGY_FILTER,
   FILTER_ALL_ITEMS,
-  PIPELINE_FLOW_TOPOLOGY,
-  DETAILS_REALTIME_PIPELINE_TAB
+  PIPELINE_FLOW_TOPOLOGY
 } from '../../../constants'
 import createRealTimePipelinesContent from '../../../utils/createRealTimePipelinesContent'
 import {
@@ -92,6 +91,7 @@ const RealTimePipelines = () => {
   const { toggleConvertedYaml } = useModelsPage()
   const [, setSearchParams] = useSearchParams()
   const filters = useFiltersFromSearchParams(filtersConfig)
+  const isPipelineLoading = useSelector(store => store.artifactsStore.pipelines.loading)
 
   const pipelinesRowHeight = useMemo(() => getScssVariableValue('--pipelinesRowHeight'), [])
   const pipelinesRowHeightExtended = useMemo(
@@ -103,10 +103,7 @@ const RealTimePipelines = () => {
     []
   )
 
-  const filterMenuClassNames = classnames(
-    'content__action-bar-wrapper',
-    params.pipelineId && 'content__action-bar-wrapper_hidden'
-  )
+  const filterMenuClassNames = classnames('content__action-bar-wrapper')
 
   const actionsMenu = useMemo(
     () => [
@@ -313,20 +310,12 @@ const RealTimePipelines = () => {
               <RealTimePipelinesFilters />
             </ActionBar>
           </div>
-          {!params.pipelineId && (
-            <RealTimePipelinesCounters loading={isLoading} statistics={statistics} />
-          )}
+          <RealTimePipelinesCounters loading={isLoading} statistics={statistics} />
           <div className="real-time-pipelines__section">
-            <div
-              className={classnames(
-                'real-time-pipelines__section-item',
-                params.tab === DETAILS_REALTIME_PIPELINE_TAB &&
-                  'real-time-pipelines__section-item-full-space'
-              )}
-            >
+            <div className="real-time-pipelines__section-item">
               <div className="section-item_title">
                 <span>All Serving Pipelines</span>
-                <Tip text="This data is relevant to the root function." />
+                <Tip text="This data is relevant to the root function" />
               </div>
               {isLoading ? null : pipelines.length === 0 ? (
                 <NoData
@@ -362,6 +351,7 @@ const RealTimePipelines = () => {
                         )
                     )}
                   </Table>
+                  {isPipelineLoading && isEmpty(selectedPipeline) && <Loader />}
                   {!isEmpty(selectedPipeline) && (
                     <Details
                       actionsMenu={actionsMenu}