[FEAT] Changes to the real time pipeline screen

package.json

@@ -22,7 +22,7 @@
     "final-form-arrays": "^3.1.0",
     "fs-extra": "^10.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "iguazio.dashboard-react-controls": "3.2.7",
+    "iguazio.dashboard-react-controls": "3.2.8",
     "is-wsl": "^1.1.0",
     "js-base64": "^2.6.4",
     "js-yaml": "^4.1.0",
@@ -40,6 +40,7 @@
     "react-modal-promise": "^1.0.2",
     "react-redux": "^7.2.9",
     "react-refresh": "^0.11.0",
+    "react-resizable-panels": "^4.5.3",
     "react-router-dom": "6.30.3",
     "react-text-mask": "^5.4.3",
     "react-transition-group": "^4.4.5",

src/App.jsx

@@ -54,7 +54,6 @@ import {
   MONITOR_ALERTS_PAGE,
   MONITOR_JOBS_TAB,
   MONITOR_WORKFLOWS_TAB,
-  PIPELINE_SUB_PAGE,
   PROJECTS_SETTINGS_GENERAL_TAB,
   PROJECT_MONITOR,
   PROJECT_QUICK_ACTIONS_PAGE,
@@ -329,14 +328,13 @@ const App = () => {
                 </Fragment>
               )
             )}
-            {[
-              `${REAL_TIME_PIPELINES_TAB}`,
-              `${REAL_TIME_PIPELINES_TAB}/${PIPELINE_SUB_PAGE}/:pipelineId`
-            ].map((path, index) => (
-              <Fragment key={index}>
-                <Route path={path} element={<RealTimePipelines />} />
-              </Fragment>
-            ))}
+            {[`${REAL_TIME_PIPELINES_TAB}`, `${REAL_TIME_PIPELINES_TAB}/:pipelineId/:tab`].map(
+              (path, index) => (
+                <Fragment key={index}>
+                  <Route path={path} element={<RealTimePipelines />} />
+                </Fragment>
+              )
+            )}
             <Route path="*" element={<Navigate to={MODELS_TAB} replace />} />
           </Route>
           {[

src/api/modelEndpoints-api.js

@@ -18,7 +18,13 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import { mainHttpClient } from '../httpClient'
-import { BATCH_FILTER, FILTER_ALL_ITEMS, ME_MODE_FILTER, REAL_TIME_FILTER } from '../constants'
+import {
+  BATCH_FILTER,
+  FILTER_ALL_ITEMS,
+  FUNCTION_NAME_FILTER,
+  ME_MODE_FILTER,
+  REAL_TIME_FILTER
+} from '../constants'
 
 const modelEndpointsApi = {
   getModelEndpoint: (project, name, uid) =>
@@ -43,6 +49,10 @@ const modelEndpointsApi = {
       newConfig.params.mode = modesMap[filters[ME_MODE_FILTER]]
     }
 
+    if (filters[FUNCTION_NAME_FILTER]) {
+      newConfig.params[FUNCTION_NAME_FILTER] = filters[FUNCTION_NAME_FILTER]
+    }
+
     return mainHttpClient.get(`/projects/${project}/model-endpoints`, newConfig)
   },
   getModelEndpointMetrics: (project, uid, type = 'all') =>

src/common/Breadcrumbs/breadcrumbs.util.js

@@ -118,14 +118,14 @@ export const generateTabsList = () => [
     label: FEATURES_TAB,
     id: FEATURES_TAB
   },
-  {
-    label: MODEL_ENDPOINTS_TAB,
-    id: MODEL_ENDPOINTS_TAB
-  },
   {
     label: REAL_TIME_PIPELINES_TAB,
     id: REAL_TIME_PIPELINES_TAB
   },
+  {
+    label: MODEL_ENDPOINTS_TAB,
+    id: MODEL_ENDPOINTS_TAB
+  },
   {
     label: MODELS_TAB,
     id: MODELS_TAB

src/common/CodeBlock/CodeBlock.jsx

@@ -49,7 +49,7 @@ const CodeBlock = ({ className = '', codeData = {}, label = '', language = 'json
 
 CodeBlock.propTypes = {
   className: PropTypes.string,
-  codeData: PropTypes.object,
+  codeData: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   label: PropTypes.string,
   language: PropTypes.string
 }

src/common/ReactFlow/MlCommonNode/MlCommonNode.jsx

@@ -0,0 +1,145 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+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 React from 'react'
+import PropTypes from 'prop-types'
+import { Handle, Position } from 'reactflow'
+
+import { Tooltip, TextTooltipTemplate } from 'igz-controls/components'
+import { SourceHandleComponent } from '../SmartHandle/SmartHandle'
+
+import { REACT_FLOW_NODE_DATA } from '../../../types'
+
+import ResponseIcon from 'igz-controls/images/response-indicator.svg?react'
+
+import './mlCommonNode.scss'
+
+const MlCommonNode = ({ data, isConnectable, hideHandles = false, id = '' }) => {
+  return (
+    <>
+      <div className="react-flow__node-content">
+        <div className="react-flow__node-content-icon">{data.badgeIcon || ''}</div>
+        <div className="react-flow__node-content-title">
+          <div className="react-flow__node-content-label">
+            <Tooltip hidden={!data.label} template={<TextTooltipTemplate text={data.label} />}>
+              {data.label}
+            </Tooltip>
+          </div>
+          <div className="react-flow__node-content-sub-label">
+            <Tooltip
+              hidden={!data.customData?.class_name}
+              template={<TextTooltipTemplate text={data.subLabel || data.customData?.class_name} />}
+            >
+              {data.subLabel || data.customData?.class_name}
+            </Tooltip>
+          </div>
+        </div>
+        {data.customData?.responder && (
+          <div className="react-flow__node--content-response-icon">
+            <Tooltip template={<TextTooltipTemplate text="Response indicator" />}>
+              <ResponseIcon />
+            </Tooltip>
+          </div>
+        )}
+      </div>
+      {!hideHandles && (
+        <>
+          {/* SOURCE HANDLES (Inputs) */}
+          <Handle
+            className={data.targetHandle?.className}
+            isConnectable={isConnectable}
+            type="target"
+            position={Position.Left}
+            id="left"
+          />
+          <Handle
+            className={data.targetHandle?.className}
+            isConnectable={isConnectable}
+            type="target"
+            position={Position.Top}
+            id="top"
+            style={{ left: '60%', visibility: 'hidden' }}
+          />
+          <Handle
+            className={data.targetHandle?.className}
+            isConnectable={isConnectable}
+            type="target"
+            position={Position.Bottom}
+            id="bottom"
+            style={{ left: '60%', visibility: 'hidden' }}
+          />
+          <Handle
+            className={data.targetHandle?.className}
+            isConnectable={isConnectable}
+            type="target"
+            position={Position.Top}
+            id="top-error-handler"
+            style={{ visibility: 'hidden' }}
+          />
+          {/* SOURCE HANDLES (Outputs) */}
+          <Handle
+            className={data.sourceHandle?.className}
+            isConnectable={isConnectable}
+            type="source"
+            position={Position.Right}
+            id="right"
+            style={{ visibility: data.isLastStep ? 'hidden' : 'visible' }}
+          />
+          <SourceHandleComponent
+            className={data.sourceHandle?.className}
+            isConnectable={isConnectable}
+            type="source"
+            position={Position.Top}
+            id="top-source"
+            style={{ left: '40%', visibility: 'hidden' }}
+            nodeId={id}
+            cycleTo={!!data.cycleTo}
+          />
+          <SourceHandleComponent
+            className={data.sourceHandle?.className}
+            isConnectable={isConnectable}
+            type="source"
+            position={Position.Bottom}
+            id="bottom-source"
+            style={{ left: '40%', visibility: 'hidden' }}
+            nodeId={id}
+            cycleTo={!!data.cycleTo}
+          />
+          <Handle
+            className={data.sourceHandle?.className}
+            isConnectable={isConnectable}
+            type="source"
+            position={Position.Bottom}
+            id="bottom-error-handler"
+            style={{ visibility: 'hidden' }}
+          />
+        </>
+      )}
+    </>
+  )
+}
+
+MlCommonNode.propTypes = {
+  data: REACT_FLOW_NODE_DATA.isRequired,
+  hideHandles: PropTypes.bool,
+  id: PropTypes.string,
+  isConnectable: PropTypes.bool.isRequired
+}
+
+export default React.memo(MlCommonNode)

src/common/ReactFlow/MlCommonNode/mlCommonNode.scss

@@ -0,0 +1,40 @@
+@use 'igz-controls/scss/colors';
+
+.react-flow__renderer,
+.react-flow__default-error-panel {
+  .react-flow__node.react-flow__node-ml-common-node {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .react-flow__node-content {
+      display: flex;
+      gap: 10px;
+      width: 100%;
+      stroke: initial;
+
+      &-title {
+        margin-right: auto;
+        margin-left: 10px;
+        overflow: hidden;
+      }
+
+      &-label {
+        font-size: 16px;
+      }
+
+      &-sub-label {
+        color: colors.$topaz;
+        font-size: 14px;
+      }
+
+      &-icon {
+        display: flex;
+        align-items: center;
+      }
+
+      &-response-icon {
+        margin-left: 10px;
+      }
+    }
+  }
+}

src/common/ReactFlow/MlDefaultErrorPanel/MlDefaultErrorPanel.jsx

@@ -0,0 +1,52 @@
+/*
+Copyright 2019 Iguazio Systems Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License") with
+an addition restriction as set forth herein. You may not use this
+file except in compliance with the License. You may obtain a copy of
+the License at http://www.apache.org/licenses/LICENSE-2.0.
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License.
+
+In addition, you may not use the software for any purposes that are
+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 React from 'react'
+import PropTypes from 'prop-types'
+import { Panel } from 'reactflow'
+import classNames from 'classnames'
+
+import MlCommonNode from '../MlCommonNode/MlCommonNode'
+
+import './MlDefaultErrorPanel.scss'
+
+const MlDefaultErrorPanel = ({ data, onNodeClick }) => {
+  const nodeClassName = classNames(
+    'react-flow__node react-flow__node-ml-common-node primary-pipeline-node selectable',
+    data.className
+  )
+  return (
+    <Panel position="top-left" className="react-flow__default-error-panel">
+      <div className="react-flow__default-error-handler__wrapper">
+        <p className="react-flow__default-error-handler__title">Default error handler</p>
+        <div className="separator" />
+        <div onClick={event => onNodeClick(event, { data, id: data.id })} className={nodeClassName}>
+          <MlCommonNode data={data} isConnectable={false} hideHandles />
+        </div>
+      </div>
+    </Panel>
+  )
+}
+
+MlDefaultErrorPanel.propTypes = {
+  data: PropTypes.object.isRequired,
+  onNodeClick: PropTypes.func.isRequired
+}
+
+export default React.memo(MlDefaultErrorPanel)

src/common/ReactFlow/MlDefaultErrorPanel/MlDefaultErrorPanel.scss

@@ -0,0 +1,46 @@
+@use 'igz-controls/scss/borders';
+@use 'igz-controls/scss/colors';
+
+.react-flow__panel.react-flow__default-error-panel {
+  .react-flow__default-error-handler__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 290px;
+    height: 130px;
+    padding: 16px;
+    color: colors.$primary;
+    background-color: colors.$white;
+    border: 2px solid colors.$autumnMalt;
+    border-radius: 12px;
+
+    .react-flow__default-error-handler__title {
+      margin: 0;
+      color: colors.$primary;
+      font-weight: 500;
+    }
+
+    .react-flow__node {
+      position: static;
+      width: 100%;
+      height: 60px;
+
+      .react-flow__node-content {
+        &-label {
+          font-size: 14px;
+        }
+
+        &-sub-label {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .separator {
+      width: 100%;
+      height: 1px;
+      background-color: colors.$autumnMalt;
+      border: none;
+    }
+  }
+}