Merge latest development upstream changes into feature/ig4 branch to sync updates

package.json

@@ -25,7 +25,7 @@
     "final-form-arrays": "^3.1.0",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "3.2.16",
+    "iguazio.dashboard-react-controls": "3.2.18",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.6.4",
     "js-yaml": "^4.1.0",

src/common/DatePicker/DatePickerView.jsx

@@ -175,7 +175,12 @@ const DatePickerView = React.forwardRef(
                   name={option.id}
                   key={option.id}
                   onClick={() => {
-                    onSelectOption(option)
+                    if (
+                      option.id !== selectedOption?.id ||
+                      option.id === CUSTOM_RANGE_DATE_OPTION
+                    ) {
+                      onSelectOption(option)
+                    }
                   }}
                   withSelectedIcon
                   selectedId={selectedOption && selectedOption.id}

src/common/ProjectDetailsHeader/ProjectDetailsHeader.jsx

@@ -38,7 +38,7 @@ const ProjectDetailsHeader = ({ projectData, projectName }) => {
       {projectData && (
         <div>
           <span className="project-details__details-label">
-            Created: {formatDatetime(projectData.metadata.created + 'Z')}
+            Created: {formatDatetime(projectData.metadata.created.replace('+00:00', '') + 'Z')}
           </span>
           {projectData.spec.owner && !frontendSpec.ce?.version && (
             <span className="project-details__details-label">Owner: {projectData.spec.owner}</span>

src/components/Details/details.util.js

@@ -302,10 +302,9 @@ export const generateAlertsContent = selectedItem => {
 }
 
 export const generateRealTimePipelinesContent = selectedItem => {
-  const nuclioFunctionName = `${selectedItem.project}-${selectedItem.name.toLowerCase()}`.slice(
-    0,
-    63
-  )
+  const nuclioFunctionName =
+    selectedItem.nuclio_name ||
+    `${selectedItem.project}-${selectedItem.name.toLowerCase()}`.slice(0, 63)
 
   return {
     name: {
@@ -314,6 +313,7 @@ export const generateRealTimePipelinesContent = selectedItem => {
     rootFunction: {
       value: selectedItem.name,
       status: selectedItem.state.value,
+      className: selectedItem.state.className,
       link: generateNuclioLink(
         `/projects/${selectedItem.project}/real-time-functions/${nuclioFunctionName}`
       )

src/components/DetailsLLMPrompts/detailsLLMPrompts.util.jsx

@@ -26,12 +26,7 @@ import { openPopUp } from 'igz-controls/utils/common.util'
 import { parseChipsData } from '../../utils/convertChipsData'
 import { formatDatetime } from 'igz-controls/utils/datetime.util'
 import JobPopUp from '../../elements/DetailsPopUp/JobPopUp/JobPopUp'
-import {
-  FORCE_REFRESH,
-  LLM_PROMPTS_PAGE,
-  MODEL_NAME_FILTER,
-  MODEL_TAG_FILTER
-} from '../../constants'
+import { FORCE_REFRESH, LLM_PROMPTS_PAGE, MODEL_NAME_FILTER } from '../../constants'
 
 export const LLM_PROMPTS_DISPLAY_LIMIT = 100
 
@@ -132,7 +127,6 @@ export const generateLLMPromptsTabContent = (artifacts, params, isDetailsPopUp =
 export const navigateToLLMPromptsPage = (navigate, projectName, selectedItem, handleCancel) => {
   const filters = {
     [MODEL_NAME_FILTER]: selectedItem.db_key || selectedItem.key,
-    [MODEL_TAG_FILTER]: selectedItem.tag,
     [FORCE_REFRESH]: true
   }
 

src/components/DetailsPipeline/DetailsPipeline.jsx

@@ -25,13 +25,7 @@ import { useSelector } from 'react-redux'
 import { Group, Panel } from 'react-resizable-panels'
 import { Position, ReactFlowProvider, useStoreApi } from 'reactflow'
 
-import {
-  Tooltip,
-  TextTooltipTemplate,
-  RoundedIcon,
-  Loader,
-  CopyToClipboard
-} from 'igz-controls/components'
+import { Tooltip, TextTooltipTemplate, RoundedIcon, CopyToClipboard } from 'igz-controls/components'
 import Accordion from '../../common/Accordion/Accordion'
 import ArtifactPopUp from '../../elements/DetailsPopUp/ArtifactPopUp/ArtifactPopUp'
 import CodeBlock from '../../common/CodeBlock/CodeBlock'
@@ -441,12 +435,11 @@ const DetailsPipeline = ({ selectedItem }) => {
             </Group>
           </div>
         )
-      ) : isPipelineLoading ? (
-        <Loader />
       ) : (
-        <NoData message="The ingestion function has no steps and therefore no graph" />
+        !isPipelineLoading && (
+          <NoData message="The ingestion function has no steps and therefore no graph" />
+        )
       )}
-      {isPipelineLoading && !isEmpty(selectedItem?.graph) && <Loader />}
     </div>
   )
 }

src/components/ModelsPage/RealTimePipelines/RealTimePipelines.jsx

@@ -112,11 +112,15 @@ const RealTimePipelines = () => {
     if (isEmpty(selectedPipeline)) return null
 
     const childFunctions = childPipelinesMap[selectedPipeline.name]
+    const correctStatusBasedOnNuclioFunction =
+      pipelines?.find(pipeline => pipeline.name === selectedPipeline.name)?.state ||
+      selectedPipeline.state
 
-    if (isNil(childFunctions)) return selectedPipeline
+    if (isNil(childFunctions))
+      return { ...selectedPipeline, state: correctStatusBasedOnNuclioFunction }
 
-    return { ...selectedPipeline, childFunctions }
-  }, [childPipelinesMap, selectedPipeline])
+    return { ...selectedPipeline, childFunctions, state: correctStatusBasedOnNuclioFunction }
+  }, [childPipelinesMap, pipelines, selectedPipeline])
 
   const filterMenuClassNames = classnames('content__action-bar-wrapper')
 
@@ -179,7 +183,8 @@ const RealTimePipelines = () => {
               key.includes('parent-function')
             )?.[1]
             const showSystems = filters[DISPLAY_SYSTEM_PIPELINES_FILTER]
-            const isMonitoringInfra = func.labels['mlrun__type'] === 'mlrun__model-monitoring-infra'
+            const isMonitoringInfra =
+              func.labels?.['mlrun__type'] === 'mlrun__model-monitoring-infra'
             const topology = (func.graph?.kind || PIPELINE_FLOW_TOPOLOGY).toLowerCase()
             const isCorrectTopology =
               topology === filters[PIPELINE_TOPOLOGY_FILTER] ||
@@ -192,12 +197,6 @@ const RealTimePipelines = () => {
               ]
             }
 
-            const filteredFunc = !parent && (showSystems || !isMonitoringInfra) && isCorrectTopology
-
-            if (!filteredFunc) return pipelinesList
-
-            totalPipelines += 1
-
             const nuclioFuncState = !isEmpty(nuclioFunc)
               ? (getNuclioFuncState(nuclioFunc) || '').toLocaleLowerCase()
               : ''
@@ -212,6 +211,12 @@ const RealTimePipelines = () => {
 
             set(func, 'state', getState(state, FUNCTIONS_PAGE, 'nuclioFunctions'))
 
+            const filteredFunc = !parent && (showSystems || !isMonitoringInfra) && isCorrectTopology
+
+            if (!filteredFunc) return pipelinesList
+
+            totalPipelines += 1
+
             const modelEndpointsMainCount =
               Object.keys(func.graph?.routes || {}).length ||
               func.graph?.model_endpoints_names?.length ||
@@ -395,7 +400,7 @@ const RealTimePipelines = () => {
                         )
                     )}
                   </Table>
-                  {isPipelineLoading && isEmpty(selectedPipelineWithChildren) && <Loader />}
+                  {isPipelineLoading && <Loader />}
                   {!isEmpty(selectedPipelineWithChildren) && (
                     <Details
                       actionsMenu={actionsMenu}

src/components/Project/ProjectOverview/ProjectOverview.util.jsx

@@ -392,7 +392,7 @@ export const getInitialCards = (params, navigate, isDemoMode) => {
           icon: <RTFunctionIcon />,
           label: 'Create real-time function',
           handleClick: () => ({
-            path: generateNuclioLink(`${base_url}/create-function`),
+            path: generateNuclioLink(`${base_url}/real-time-functions/create-function`),
             externalLink: true
           }),
           tooltip:

src/components/Project/project.utils.jsx

@@ -114,7 +114,9 @@ export const generateCreateNewOptions = (
     id: 'createRealTimeFunction',
     icon: <Realtime />,
     handler: () => {
-      const url = generateNuclioLink(`/projects/${params.projectName}/create-function`)
+      const url = generateNuclioLink(
+        `/projects/${params.projectName}/real-time-functions/create-function`
+      )
 
       if (window.top && window.top !== window.self) {
         window.top.location.assign(url)

src/elements/DetailsInfoItem/DetailsInfoItem.jsx

@@ -43,6 +43,7 @@ import { getValidationRules } from 'igz-controls/utils/validation.util'
 import Checkmark from 'igz-controls/images/checkmark2.svg?react'
 import Close from 'igz-controls/images/close.svg?react'
 import Edit from 'igz-controls/images/edit.svg?react'
+import classNames from 'classnames'
 
 const DetailsInfoItem = React.forwardRef(
   (
@@ -216,14 +217,24 @@ const DetailsInfoItem = React.forwardRef(
           {(Array.isArray(info) ? info : [info]).map((infoItem, index) => {
             if (!infoItem) return null
 
+            const statusClassName = classNames(
+              item.className || `state-${item.status}-function`,
+              'status-icon'
+            )
+
             return item.link ? (
               item.linkIsExternal ? (
-                <a href={item.link} className="details-item__data details-item__link" target="_top">
+                <a
+                  href={item.link}
+                  className="details-item__data details-item__link"
+                  target="_top"
+                  key={index}
+                >
                   <Tooltip template={<TextTooltipTemplate text={infoItem} />}>{infoItem}</Tooltip>
                   {item.status && (
                     <div className="details-item__data details-item__status">
                       <Tooltip template={<TextTooltipTemplate text={item.status} />}>
-                        <i className={`state-${item.status}-function status-icon`} />
+                        <i className={statusClassName} />
                       </Tooltip>
                     </div>
                   )}
@@ -234,7 +245,7 @@ const DetailsInfoItem = React.forwardRef(
                   {item.status && (
                     <div className="details-item__data details-item__status">
                       <Tooltip template={<TextTooltipTemplate text={item.status} />}>
-                        <i className={`state-${item.status}-function status-icon`} />
+                        <i className={statusClassName} />
                       </Tooltip>
                     </div>
                   )}
@@ -302,14 +313,18 @@ const DetailsInfoItem = React.forwardRef(
       return (
         <div className="details-item__functions-wrapper">
           {item.value.map((itemFunc, index) => {
-            let name = itemFunc.func?.name || itemFunc.name || ''
-            let status = itemFunc.nuclioFunc?.status?.state || itemFunc.state?.value || ''
+            const name = itemFunc.func?.name || itemFunc.name || ''
+            const status = itemFunc.func?.state?.value || itemFunc.state?.value || ''
+            const statusClassName = classNames(
+              itemFunc.func?.state?.className || `state-${status}-function`,
+              'status-icon'
+            )
             return (
               <span key={index} className="details-item__functions-item">
                 <Tooltip template={<TextTooltipTemplate text={name} />}>{name}</Tooltip>
                 {status && (
                   <Tooltip template={<TextTooltipTemplate text={status} />}>
-                    <i className={`state-${status}-function status-icon`} />
+                    <i className={statusClassName} />
                   </Tooltip>
                 )}
                 {index < item.value.length - 1 && (

src/elements/ProjectDataCard/ProjectDataCard.jsx

@@ -36,7 +36,6 @@ const ProjectDataCard = ({
   hasUpdateDate = false,
   href = '',
   link = '',
-  params,
   statistics = {},
   subTitle,
   table = {},
@@ -82,7 +81,7 @@ const ProjectDataCard = ({
         <NoData />
       ) : (
         <>
-          <SectionTable params={params} table={table} />
+          <SectionTable table={table} />
           {href ? (
             <a href={href} target="_top" className="link project-data-card__see-all-link">
               {footerLinkText}
@@ -105,7 +104,6 @@ ProjectDataCard.propTypes = {
   hasUpdateDate: PropTypes.bool,
   href: PropTypes.string,
   link: PropTypes.string,
-  params: PropTypes.object.isRequired,
   statistics: PropTypes.object,
   subTitle: PropTypes.string,
   table: PropTypes.object,

src/elements/ProjectFunctions/ProjectFunctions.jsx

@@ -19,6 +19,7 @@ such restriction.
 */
 import React, { useEffect, useMemo } from 'react'
 import PropTypes from 'prop-types'
+import { has } from 'lodash'
 
 import classnames from 'classnames'
 import { useParams } from 'react-router-dom'
@@ -144,7 +145,10 @@ const ProjectFunctions = ({ nuclioStreamsAreEnabled, project }) => {
 
         return {
           name: {
-            value: func.metadata.name,
+            value: has(func.metadata.labels || {}, 'mlrun/class')
+              ? // if nuclio func is generated by MLRun then name only in this case starts with project name and we need to slice it
+                func.metadata.name.slice(params.projectName.length + 1)
+              : func.metadata.name,
             href: generateNuclioLink(
               `/projects/${params.projectName}/real-time-functions/${func.metadata.name}`
             ),
@@ -174,7 +178,6 @@ const ProjectFunctions = ({ nuclioStreamsAreEnabled, project }) => {
       }}
       footerLinkText="All real-time functions"
       href={generateNuclioLink(`/projects/${params.projectName}/real-time-functions`)}
-      params={params}
       statistics={functions}
       subTitle="Recent real-time functions"
       table={functionsTable}

src/elements/SectionTable/SectionTable.jsx

@@ -27,7 +27,7 @@ import { TextTooltipTemplate, Tooltip, Tip, Loader, ReadOnlyChips } from 'igz-co
 
 import './SectionTable.scss'
 
-const SectionTable = ({ loading = false, params, table }) => {
+const SectionTable = ({ loading = false, table }) => {
   return loading ? (
     <Loader section secondary />
   ) : (
@@ -55,10 +55,6 @@ const SectionTable = ({ loading = false, params, table }) => {
         </thead>
         <tbody className="section-table__table-body">
           {table?.body?.map((body, index) => {
-            const extractedItemName = body['name'].value.startsWith(params.projectName)
-              ? body['name'].value.slice(params.projectName.length + 1)
-              : body['name'].value
-
             return (
               <tr key={index} className="section-table__table-row">
                 <>
@@ -89,10 +85,10 @@ const SectionTable = ({ loading = false, params, table }) => {
                                 >
                                   <Tooltip
                                     className="item-name"
-                                    template={<TextTooltipTemplate text={extractedItemName} />}
+                                    template={<TextTooltipTemplate text={body[key].value} />}
                                     textShow={true}
                                   >
-                                    {extractedItemName}
+                                    {body[key].value}
                                   </Tooltip>
                                 </a>
                               ) : body[key].link ? (
@@ -189,7 +185,6 @@ const SectionTable = ({ loading = false, params, table }) => {
 
 SectionTable.propTypes = {
   loading: PropTypes.bool,
-  params: PropTypes.object.isRequired,
   table: PropTypes.object.isRequired
 }
 

src/scss/main.scss

@@ -192,6 +192,7 @@ main {
 .state-created-function,
 .state-creating-function,
 .state-standby-function,
+.state-standby-nuclioFunctions,
 .state-pending-job {
   @include mixins.statusState(colors.$topaz, false);
 }