[FIX] Pipelines table components layout

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/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/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}

src/components/ModelsPage/RealTimePipelines/RealTimePipelinesCounters.jsx

@@ -16,7 +16,7 @@ limitations under the License.
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Loader } from 'igz-controls/components'
+import { Loader, Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
 import { FAILED_STATE, RUNNING_STATE } from '../../../constants'
 import StatsCard from '../../../common/StatsCard/StatsCard'
@@ -39,25 +39,35 @@ const RealTimePipelinesCounters = ({ statistics, loading }) => {
         <StatsCard.Header title="Root Functions Status" />
         <StatsCard.Row>
           <StatsCard.Col>
-            <StatsCard.MainCounter id="running-functions-counter" className={RUNNING_STATE}>
-              {loading ? <Loader section small secondary /> : statistics.runningFunctions}
-            </StatsCard.MainCounter>
-            <div className="stats__subtitle">
-              Running
-              <i className={`state-${RUNNING_STATE}`} />
-            </div>
+            <Tooltip className="data-ellipsis" template={<TextTooltipTemplate text="Running" />}>
+              <StatsCard.MainCounter id="running-functions-counter" className={RUNNING_STATE}>
+                {loading ? <Loader section small secondary /> : statistics.runningFunctions}
+              </StatsCard.MainCounter>
+
+              <div className="stats__subtitle">
+                Running
+                <i className={`state-${RUNNING_STATE}`} />
+              </div>
+            </Tooltip>
           </StatsCard.Col>
+
           <StatsCard.Col>
-            <StatsCard.MainCounter
-              id="failed-functions-counter"
-              className={statistics.failedFunctions > 0 ? FAILED_STATE : RUNNING_STATE}
+            <Tooltip
+              className="data-ellipsis"
+              template={<TextTooltipTemplate text="Error, Unhealthy" />}
             >
-              {loading ? <Loader section small secondary /> : statistics.failedFunctions}
-            </StatsCard.MainCounter>
-            <div className="stats__subtitle">
-              Failed
-              <i className={`state-${FAILED_STATE}`} />
-            </div>
+              <StatsCard.MainCounter
+                id="failed-functions-counter"
+                className={statistics.failedFunctions > 0 ? FAILED_STATE : RUNNING_STATE}
+              >
+                {loading ? <Loader section small secondary /> : statistics.failedFunctions}
+              </StatsCard.MainCounter>
+
+              <div className="stats__subtitle">
+                Failed
+                <i className={`state-${FAILED_STATE}`} />
+              </div>
+            </Tooltip>
           </StatsCard.Col>
         </StatsCard.Row>
       </StatsCard>

src/components/ModelsPage/RealTimePipelines/realTimePipelines.scss

@@ -64,22 +64,6 @@ $pipelinesRowHeightExtended: variables.$rowHeight;
         $pipelinesRowHeightExtended
       );
     }
-
-    &-full-space {
-      padding: 0;
-
-      .table__item_big {
-        padding: 0;
-
-        & > .item-header-wrapper {
-          padding: 20px 30px 0;
-        }
-
-        & > .item-info {
-          padding: 0;
-        }
-      }
-    }
   }
 }
 

src/components/ModelsPage/RealTimePipelines/realTimePipelines.util.js

@@ -46,7 +46,7 @@ export const filtersConfig = {
     initialValue: getDatePickerFilterValue(datePickerPastOptions, ANY_TIME_DATE_OPTION, true)
   },
   [DISPLAY_SYSTEM_PIPELINES_FILTER]: {
-    label: 'Display system pipelines:',
+    label: 'Display system pipelines',
     initialValue: false
   },
   [PIPELINE_TOPOLOGY_FILTER]: {

src/utils/createRealTimePipelinesContent.js

@@ -17,19 +17,20 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import FunctionPopUp from '../elements/DetailsPopUp/FunctionPopUp/FunctionPopUp'
 
 import { formatDatetime } from 'igz-controls/utils/datetime.util'
-import { openPopUp } from 'igz-controls/utils/common.util'
 import { DETAILS_MODEL_ENDPOINTS_TAB, MODELS_PAGE, REAL_TIME_PIPELINES_TAB } from '../constants'
 import { typesOfJob } from './jobs.util'
+import { generateNuclioLink } from './parseUri'
 
 const createRealTimePipelinesContent = (pipelines, projectName) =>
   pipelines.map(pipeline => {
     const modelEndpointsCount =
       Object.keys(pipeline.graph?.routes || {}).length ||
       pipeline.graph?.model_endpoints_names?.length // todo: add model endpoints count
 
+    const nuclioFunctionName = `${projectName}-${pipeline.name.toLowerCase()}`.slice(0, 63)
+
     return {
       data: {
         ...pipeline
@@ -49,14 +50,11 @@ const createRealTimePipelinesContent = (pipelines, projectName) =>
           headerId: 'rootFunction',
           headerLabel: 'Root function',
           value: pipeline.name,
-          className: 'table-cell-2',
+          className: 'table-cell-2 link-blue',
           showStatus: true,
           showTag: true,
-          handleClick: () =>
-            openPopUp(FunctionPopUp, {
-              funcUri: `${pipeline.project}/${pipeline.name}@${pipeline.hash}`,
-              funcTag: pipeline.tag
-            })
+          getLink: () =>
+            generateNuclioLink(`/projects/${projectName}/functions/${nuclioFunctionName}`)
         },
         {
           id: `topology.${pipeline.ui.identifierUnique}`,

src/utils/getNoDataMessage.js

@@ -66,7 +66,8 @@ import {
   LLM_PROMPTS_PAGE,
   MODEL_NAME_FILTER,
   MODEL_TAG_FILTER,
-  ME_MODE_FILTER
+  ME_MODE_FILTER,
+  PIPELINE_TOPOLOGY_FILTER
 } from '../constants'
 import { formatDatetime } from 'igz-controls/utils/datetime.util'
 
@@ -154,7 +155,7 @@ export const getNoDataMessage = (
 
     return visibleFilterTypes.length > 0
       ? generateNoEntriesFoundMessage(visibleFilterTypes, filtersConfig, filters, messageNames)
-      : `No ${messageNames.plural.toLocaleLowerCase()} found.`
+      : `No ${messageNames.plural.toLocaleLowerCase()} found`
   }
 }
 
@@ -202,7 +203,8 @@ const getVisibleFilterTypes = (filtersConfig, filters, filtersStore) => {
         type === LABELS_FILTER ||
         type === MODEL_NAME_FILTER ||
         type === MODEL_TAG_FILTER ||
-        type === NAME_FILTER) &&
+        type === NAME_FILTER ||
+        type === PIPELINE_TOPOLOGY_FILTER) &&
       filters[type]?.length > 0
     const isStatusVisible =
       type === STATUS_FILTER && !isEqual(filters[STATUS_FILTER], [FILTER_ALL_ITEMS])