@odigos/ui-kit 0.0.34 → 0.0.36

package/lib/containers.js

@@ -1,24 +1,23 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, A as ACTION_OPTIONS, k as getActionIcon, f as useModalStore, d as useFilterStore, M as MONITORS_OPTIONS, s as styleInject, i as useSelectedStore, e as useInstrumentStore, m as getInstrumentationRuleIcon, a as useDataStreamStore, l as getEntityId, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-DJGe2YeC.js';
-import { a as DISPLAY_TITLES, B as BUTTON_TEXTS, F as FORM_ALERTS } from './index-mOgS3e5E.js';
+import { k as DISPLAY_TITLES, T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, B as BUTTON_TEXTS, c as useEntityStore, A as ACTION_OPTIONS, l as getActionIcon, f as useModalStore, F as FORM_ALERTS, d as useFilterStore, M as MONITORS_OPTIONS, t as styleInject, i as useSelectedStore, e as useInstrumentStore, n as getInstrumentationRuleIcon, a as useDataStreamStore, m as getEntityId, S as STORAGE_KEYS, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-aRNtyuuU.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, SignalType, HeadersCollectionKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-BZq0yNL-.js';
+import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-Be0m3TUg.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
-import { i as CheckCircledIcon, O as OdigosLogo } from './index-Bd8ZAEvq.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index--RecCPGA.js';
-import { u as useActionFormData, a as useClickNode, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-DBNf1uEe.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-dZ92VxT2.js';
-import { E as EditIcon } from './index-BWZT-ipR.js';
-import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-CIKkezVt.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-a_WA-82O.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-ChYtqgBW.js';
-import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, x as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, w as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, t as getYamlFieldsForDestination, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, u as isOverTime } from './index-BBjwRlta.js';
+import { i as CheckCircledIcon, O as OdigosLogo } from './index-7YZOplrB.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-DJpBLpwG.js';
+import { u as useActionFormData, a as useClickNode, e as useSessionStorage, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useSourceSelectionFormData-CH2xUOpu.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-0Rz0QKmh.js';
+import { E as EditIcon } from './index-t3OxxFsp.js';
+import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-D8AnbGCE.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-CNbTSsNJ.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BbEmZ4Wj.js';
+import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, w as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, t as getYamlFieldsForDestination, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, u as isOverTime } from './index-CrethNg6.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-ovjVbVQq.js';
+import { m as mapExportedSignals } from './index-BlZKWuxe.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-oEjS7cX3.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-Cq8NT9Hr.js';
-import './index-CnZlllYu.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-BGzxan6E.js';
 
 const buildCard$3 = (action) => {
     const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, servicesNameFilters, attributeFilters, }, } = action;
@@ -13146,7 +13145,7 @@ const nodeConfig = {
     framePadding: 12,
 };
 
-const { framePadding: framePadding$3 } = nodeConfig;
+const { framePadding: framePadding$5 } = nodeConfig;
 const Container$h = styled.div `
   position: relative;
   z-index: 1;
@@ -13158,7 +13157,7 @@ const Container$h = styled.div `
   overflow-x: hidden;
 `;
 const BaseNodeWrapper = styled.div `
-  margin: ${framePadding$3}px 0;
+  margin: ${framePadding$5}px 0;
 `;
 const BottomOverlay = styled.div `
   position: fixed;
@@ -13390,7 +13389,7 @@ const Flow = ({ nodes, edges, onNodesChange, onEdgesChange }) => {
                     } })))));
 };
 
-const { nodeHeight: nodeHeight$3, framePadding: framePadding$2 } = nodeConfig;
+const { nodeHeight: nodeHeight$5, framePadding: framePadding$4 } = nodeConfig;
 const createEdge = (edgeId, params) => {
     const { theme, label, isMultiTarget, isError, animated } = params || {};
     const [sourceNodeId, targetNodeId] = edgeId.split('-to-');
@@ -13407,13 +13406,14 @@ const createEdge = (edgeId, params) => {
 const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
     const edges = [];
     const actionNodeId = nodes.find(({ id: nodeId }) => [`${EntityTypes.Action}-${NodeTypes.Frame}`, `${EntityTypes.Action}-${NodeTypes.Add}`].includes(nodeId))?.id;
+    const scrollTopLimit = -80 / 2 + framePadding$4;
+    const scrollBottomLimit = Math.floor(containerHeight / nodeHeight$5) * nodeHeight$5 - (nodeHeight$5 / 2 + framePadding$4);
+    const isBaseNode = (nodeType) => nodeType === NodeTypes.Base || nodeType === NodeTypes.Edged;
     nodes.forEach(({ type: nodeType, id: nodeId, data: { type: entityType, id: entityId, status }, position }) => {
-        if (nodeType === NodeTypes.Edged && entityType === EntityTypes.Source) {
+        if (entityType === EntityTypes.Source && isBaseNode(nodeType)) {
             const { namespace, name, kind } = entityId;
             const metric = metrics?.sources.find((m) => m.kind === kind && m.name === name && m.namespace === namespace);
-            const topLimit = -80 / 2 + framePadding$2;
-            const bottomLimit = Math.floor(containerHeight / nodeHeight$3) * nodeHeight$3 - (nodeHeight$3 / 2 + framePadding$2);
-            if (position.y >= topLimit && position.y <= bottomLimit) {
+            if (position.y >= scrollTopLimit && position.y <= scrollBottomLimit) {
                 edges.push(createEdge(`${nodeId}-to-${actionNodeId}`, {
                     theme,
                     animated: false,
@@ -13423,24 +13423,27 @@ const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
                 }));
             }
         }
-        if (nodeType === NodeTypes.Base && entityType === EntityTypes.Destination) {
+        if (entityType === EntityTypes.Destination && isBaseNode(nodeType)) {
             const metric = metrics?.destinations.find((m) => m.id === entityId);
-            edges.push(createEdge(`${actionNodeId}-to-${nodeId}`, {
-                theme,
-                animated: false,
-                isMultiTarget: true,
-                label: formatBytes(metric?.throughput),
-                isError: status === StatusType.Error,
-            }));
+            if (position.y >= scrollTopLimit && position.y <= scrollBottomLimit) {
+                edges.push(createEdge(`${actionNodeId}-to-${nodeId}`, {
+                    theme,
+                    animated: false,
+                    isMultiTarget: true,
+                    label: formatBytes(metric?.throughput),
+                    isError: status === StatusType.Error,
+                }));
+            }
         }
     });
     return edges;
 };
 
-const { nodeWidth: nodeWidth$4 } = nodeConfig;
+const { nodeWidth: nodeWidth$4, nodeHeight: nodeHeight$4, framePadding: framePadding$3 } = nodeConfig;
 const mapToNodeData$3 = (entity) => {
     return {
         nodeWidth: nodeWidth$4,
+        nodeHeight: nodeHeight$4, // for edged node
         id: entity.ruleId,
         type: EntityTypes.InstrumentationRule,
         status: undefined,
@@ -13451,7 +13454,7 @@ const mapToNodeData$3 = (entity) => {
         raw: entity,
     };
 };
-const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
+const buildRuleNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
     const nodes = [];
     const position = positions[EntityTypes.InstrumentationRule];
     nodes.push({
@@ -13470,13 +13473,38 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
         },
     });
     if (!!entities.length) {
+        nodes.push({
+            id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Scroll}`,
+            type: NodeTypes.Scroll,
+            position: {
+                x: position['x'],
+                y: position['y']() - framePadding$3,
+            },
+            style: {
+                zIndex: 1,
+            },
+            data: {
+                nodeWidth: nodeWidth$4,
+                nodeHeight: containerHeight - nodeHeight$4 + framePadding$3 * 2,
+                items: entities.map((rule, idx) => ({
+                    id: `${EntityTypes.InstrumentationRule}-${idx}`,
+                    data: mapToNodeData$3(rule),
+                })),
+                onScroll,
+            },
+        });
         entities.forEach((rule, idx) => {
             nodes.push({
-                id: `${EntityTypes.InstrumentationRule}-${idx}`,
-                type: NodeTypes.Base,
+                id: `${EntityTypes.InstrumentationRule}-${idx}-hidden`,
+                type: NodeTypes.Edged,
+                extent: 'parent',
+                parentId: `${EntityTypes.InstrumentationRule}-${NodeTypes.Scroll}`,
                 position: {
-                    x: position['x'],
-                    y: position['y'](idx),
+                    x: framePadding$3,
+                    y: position['y'](idx) - (nodeHeight$4 - framePadding$3 / 2),
+                },
+                style: {
+                    zIndex: -1,
                 },
                 data: mapToNodeData$3(rule),
             });
@@ -13514,11 +13542,12 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
     return nodes;
 };
 
-const { nodeWidth: nodeWidth$3, nodeHeight: nodeHeight$2, framePadding: framePadding$1 } = nodeConfig;
+const { nodeWidth: nodeWidth$3, nodeHeight: nodeHeight$3, framePadding: framePadding$2 } = nodeConfig;
 const mapToNodeData$2 = (entity) => {
     const { hasDisableds, priorotizedStatus } = getConditionsBooleans(entity.conditions || []);
     return {
         nodeWidth: nodeWidth$3,
+        nodeHeight: nodeHeight$3, // for edged node
         id: entity.id,
         type: EntityTypes.Action,
         status: priorotizedStatus,
@@ -13531,7 +13560,7 @@ const mapToNodeData$2 = (entity) => {
         raw: entity,
     };
 };
-const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) => {
+const buildActionNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
     const nodes = [];
     const position = positions[EntityTypes.Action];
     nodes.push({
@@ -13551,30 +13580,53 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
     });
     if (!!entities.length) {
         nodes.push({
-            id: `${EntityTypes.Action}-${NodeTypes.Frame}`,
-            type: NodeTypes.Frame,
+            id: `${EntityTypes.Action}-${NodeTypes.Scroll}`,
+            type: NodeTypes.Scroll,
             position: {
-                x: position['x'] - framePadding$1,
-                y: position['y']() - framePadding$1,
+                x: position['x'],
+                y: position['y']() - framePadding$2,
+            },
+            style: {
+                zIndex: 1,
             },
             data: {
-                nodeWidth: nodeWidth$3 + 2 * framePadding$1,
-                nodeHeight: nodeHeight$2 * entities.length + framePadding$1,
+                nodeWidth: nodeWidth$3,
+                nodeHeight: containerHeight - nodeHeight$3 + framePadding$2 * 2,
+                items: entities.map((action, idx) => ({
+                    id: `${EntityTypes.Action}-${idx}`,
+                    data: mapToNodeData$2(action),
+                })),
+                onScroll,
             },
         });
         entities.forEach((action, idx) => {
             nodes.push({
-                id: `${EntityTypes.Action}-${idx}`,
-                type: NodeTypes.Base,
+                id: `${EntityTypes.Action}-${idx}-hidden`,
+                type: NodeTypes.Edged,
                 extent: 'parent',
-                parentId: `${EntityTypes.Action}-${NodeTypes.Frame}`,
+                parentId: `${EntityTypes.Action}-${NodeTypes.Scroll}`,
                 position: {
-                    x: framePadding$1,
-                    y: position['y'](idx) - (nodeHeight$2 - framePadding$1),
+                    x: framePadding$2,
+                    y: position['y'](idx) - (nodeHeight$3 - framePadding$2 / 2),
+                },
+                style: {
+                    zIndex: -1,
                 },
                 data: mapToNodeData$2(action),
             });
         });
+        nodes.push({
+            id: `${EntityTypes.Action}-${NodeTypes.Frame}`,
+            type: NodeTypes.Frame,
+            position: {
+                x: position['x'] - framePadding$2,
+                y: position['y']() - framePadding$2,
+            },
+            data: {
+                nodeWidth: nodeWidth$3 + 2 * framePadding$2,
+                nodeHeight: Math.min(containerHeight, nodeHeight$3 * entities.length + framePadding$2),
+            },
+        });
     }
     else if (loading) {
         nodes.push({
@@ -13608,12 +13660,12 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
     return nodes;
 };
 
-const { nodeWidth: nodeWidth$2, nodeHeight: nodeHeight$1, framePadding } = nodeConfig;
+const { nodeWidth: nodeWidth$2, nodeHeight: nodeHeight$2, framePadding: framePadding$1 } = nodeConfig;
 const mapToNodeData$1 = (entity) => {
     const { priorotizedStatus, hasDisableds } = getConditionsBooleans(entity.conditions || []);
     return {
         nodeWidth: nodeWidth$2,
-        nodeHeight: nodeHeight$1, // for edged node
+        nodeHeight: nodeHeight$2, // for edged node
         id: {
             namespace: entity.namespace,
             name: entity.name,
@@ -13655,14 +13707,14 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
             type: NodeTypes.Scroll,
             position: {
                 x: position['x'],
-                y: position['y']() - framePadding,
+                y: position['y']() - framePadding$1,
             },
             style: {
                 zIndex: 1,
             },
             data: {
                 nodeWidth: nodeWidth$2,
-                nodeHeight: containerHeight - nodeHeight$1 + framePadding * 2,
+                nodeHeight: containerHeight - nodeHeight$2 + framePadding$1 * 2,
                 items: entities.map((source, idx) => ({
                     id: `${EntityTypes.Source}-${idx}`,
                     data: mapToNodeData$1(source),
@@ -13677,8 +13729,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
                 extent: 'parent',
                 parentId: `${EntityTypes.Source}-${NodeTypes.Scroll}`,
                 position: {
-                    x: framePadding,
-                    y: position['y'](idx) - (nodeHeight$1 - framePadding / 2),
+                    x: framePadding$1,
+                    y: position['y'](idx) - (nodeHeight$2 - framePadding$1 / 2),
                 },
                 style: {
                     zIndex: -1,
@@ -13719,11 +13771,11 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
     return nodes;
 };
 
-const { nodeWidth: nodeWidth$1, nodeHeight } = nodeConfig;
+const { nodeWidth: nodeWidth$1, nodeHeight: nodeHeight$1 } = nodeConfig;
 const getNodePositions = ({ containerWidth }) => {
     const startX = 24;
     const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth$1 - startX;
-    const getY = (idx) => nodeHeight * ((idx || 0) + 1);
+    const getY = (idx) => nodeHeight$1 * ((idx || 0) + 1);
     const positions = {
         [EntityTypes.Namespace]: {
             x: 0,
@@ -13755,12 +13807,13 @@ const getNodePositions = ({ containerWidth }) => {
     return positions;
 };
 
-const { nodeWidth } = nodeConfig;
+const { nodeWidth, nodeHeight, framePadding } = nodeConfig;
 const mapToNodeData = (entity) => {
     const { hasDisableds, priorotizedStatus } = getConditionsBooleans(entity.conditions || []);
     const { icon, iconSrc } = getDestinationIcon(entity.destinationType.type);
     return {
         nodeWidth,
+        nodeHeight, // for edged node
         id: entity.id,
         type: EntityTypes.Destination,
         status: priorotizedStatus,
@@ -13773,7 +13826,7 @@ const mapToNodeData = (entity) => {
         raw: entity,
     };
 };
-const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }) => {
+const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
     const nodes = [];
     const position = positions[EntityTypes.Destination];
     nodes.push({
@@ -13792,13 +13845,38 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
         },
     });
     if (!!entities.length) {
+        nodes.push({
+            id: `${EntityTypes.Destination}-${NodeTypes.Scroll}`,
+            type: NodeTypes.Scroll,
+            position: {
+                x: position['x'],
+                y: position['y']() - framePadding,
+            },
+            style: {
+                zIndex: 1,
+            },
+            data: {
+                nodeWidth,
+                nodeHeight: containerHeight - nodeHeight + framePadding * 2,
+                items: entities.map((destination, idx) => ({
+                    id: `${EntityTypes.Destination}-${idx}`,
+                    data: mapToNodeData(destination),
+                })),
+                onScroll,
+            },
+        });
         entities.forEach((destination, idx) => {
             nodes.push({
-                id: `${EntityTypes.Destination}-${idx}`,
-                type: NodeTypes.Base,
+                id: `${EntityTypes.Destination}-${idx}-hidden`,
+                type: NodeTypes.Edged,
+                extent: 'parent',
+                parentId: `${EntityTypes.Destination}-${NodeTypes.Scroll}`,
                 position: {
-                    x: position['x'],
-                    y: position['y'](idx),
+                    x: framePadding,
+                    y: position['y'](idx) - (nodeHeight - framePadding / 2),
+                },
+                style: {
+                    zIndex: -1,
                 },
                 data: mapToNodeData(destination),
             });
@@ -13890,28 +13968,34 @@ const DataFlow = ({ heightToRemove, metrics }) => {
             loading: destinationsLoading,
             unfilteredCount: destinationsByStream.length,
             positions,
+            containerHeight,
+            onScroll: ({ scrollTop }) => handleNodesScrolled(destinationNodes, EntityTypes.Destination, scrollTop),
         });
         handleNodesChanged(destinationNodes, EntityTypes.Destination);
-    }, [selectedStreamName, destinations, destinationsLoading, positions[EntityTypes.Destination], filters]);
+    }, [selectedStreamName, destinations, destinationsLoading, positions[EntityTypes.Destination], filters, containerHeight]);
     useEffect(() => {
         const actionNodes = buildActionNodes({
             entities: filterActions(actions, filters),
             loading: actionsLoading,
             unfilteredCount: actions.length,
             positions,
+            containerHeight,
+            onScroll: ({ scrollTop }) => handleNodesScrolled(actionNodes, EntityTypes.Action, scrollTop),
         });
         handleNodesChanged(actionNodes, EntityTypes.Action);
-    }, [actions, actionsLoading, positions[EntityTypes.Action], filters]);
+    }, [actions, actionsLoading, positions[EntityTypes.Action], filters, containerHeight]);
     useEffect(() => {
-        // note: rules do not have filters yet
         const ruleNodes = buildRuleNodes({
+            // note: rules do not have filters yet
             entities: instrumentationRules,
             loading: instrumentationRulesLoading,
             unfilteredCount: instrumentationRules.length,
             positions,
+            containerHeight,
+            onScroll: ({ scrollTop }) => handleNodesScrolled(ruleNodes, EntityTypes.InstrumentationRule, scrollTop),
         });
         handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
-    }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule]]);
+    }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule], containerHeight]);
     return (React.createElement(Container$e, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
@@ -14082,6 +14166,7 @@ const Filters$1 = () => {
     const theme = Theme.useTheme();
     const { namespaces, sources } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
+    const { getItemSS, setItemSS, removeItemSS } = useSessionStorage();
     const { namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
     const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
     // We need local state, because we want to keep the filters in the store only when the user clicks on apply
@@ -14089,6 +14174,10 @@ const Filters$1 = () => {
     const [filterCount, setFilterCount] = useState(getFilterCount(filters));
     const [focused, setFocused] = useState(false);
     const toggleFocused = () => setFocused((prev) => !prev);
+    useEffect(() => {
+        const storedFilters = getItemSS(STORAGE_KEYS.OVERVIEW_FILTERS, getEmptyState());
+        setAll(storedFilters);
+    }, []);
     useEffect(() => {
         if (!focused) {
             const payload = { namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors };
@@ -14097,17 +14186,13 @@ const Filters$1 = () => {
         }
     }, [focused, namespaceFilters, kinds, monitors, errors, onlyErrors]);
     const onApply = () => {
-        // TODO: remove trycatch after debugging
-        try {
-            setAll(filters);
-            setFilterCount(getFilterCount(filters));
-            setFocused(false);
-        }
-        catch (error) {
-            console.error(error);
-        }
+        setItemSS(STORAGE_KEYS.OVERVIEW_FILTERS, filters);
+        setAll(filters);
+        setFilterCount(getFilterCount(filters));
+        setFocused(false);
     };
     const onReset = () => {
+        removeItemSS(STORAGE_KEYS.OVERVIEW_FILTERS);
         clearAll();
         setFilters(getEmptyState());
         setFilterCount(0);
@@ -14397,8 +14482,15 @@ const TestConnection = ({ destination, disabled, validateForm, status, testConne
         if (validateForm()) {
             setLoading(true);
             const testResult = await testConnection(destination);
+            // 1st if - check if we got a response (if undefined, then Apollo Client caught an error)
             if (testResult) {
-                testResult.succeeded ? onSuccess(testResult) : onError(testResult);
+                // 2nd if - check if the test was successful or not
+                if (testResult.succeeded) {
+                    onSuccess(testResult);
+                }
+                else {
+                    onError(testResult);
+                }
             }
             setLoading(false);
         }
@@ -14418,8 +14510,11 @@ const NotesWrapper = styled.div `
   flex-direction: column;
   gap: 12px;
 `;
+const SignalsAndDocsWrapper = styled(FlexRow) `
+  justify-content: space-between;
+`;
 const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validateForm, handleFormChange, dynamicFields, setDynamicFields, testConnection }) => {
-    const { supportedSignals, testConnectionSupported, displayName } = categoryItem || {};
+    const { type, displayName, supportedSignals, testConnectionSupported } = categoryItem || {};
     const [autoFilled, setAutoFilled] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     const [connection, setConnection] = useState(undefined);
@@ -14443,10 +14538,6 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
             setAutoFilled(didAutoFill);
         }
     }, [dynamicFields, isFormDirty]);
-    const dirtyForm = () => {
-        setIsFormDirty(true);
-        setConnection(undefined);
-    };
     const supportedMonitors = useMemo(() => {
         const { logs, metrics, traces } = supportedSignals || {};
         const arr = [];
@@ -14468,7 +14559,12 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         if (traces)
             arr.push(SignalType.Traces);
         return arr;
-    }, [formData['exportedSignals']]);
+    }, [formData]);
+    const dirtyForm = () => {
+        setAutoFilled(false);
+        setIsFormDirty(true);
+        setConnection(undefined);
+    };
     const handleSelectedSignals = (signals) => {
         dirtyForm();
         handleFormChange('exportedSignals', {
@@ -14495,12 +14591,14 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
     };
     return (React.createElement(Container$a, { "$gap": 24 },
         React.createElement(Container$a, { "$gap": 12 },
-            React.createElement(SectionTitle, { title: isUpdate ? 'Update destination' : 'Create destination', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, disabled: !isFormDirty, validateForm: validateForm, status: connection?.type, testConnection: testConnection, onError: onTestConnectionError, onSuccess: onTestConnectionSuccess })) }),
+            React.createElement(SectionTitle, { title: isUpdate ? 'Update destination' : 'Create destination', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, disabled: !isFormDirty && !autoFilled, validateForm: validateForm, status: connection?.type, testConnection: testConnection, onError: onTestConnectionError, onSuccess: onTestConnectionSuccess })) }),
             React.createElement(NotesWrapper, null,
                 testConnectionSupported && connection && React.createElement(NotificationNote, { type: connection.type, title: connection.title, message: connection.message }),
                 autoFilled && !connection && !isUpdate && React.createElement(NotificationNote, { type: StatusType.Default, message: `Odigos autocompleted ${displayName} destination details.` })),
             React.createElement(Divider, null)),
-        React.createElement(MonitorsCheckboxes, { title: isUpdate ? '' : 'This connection will monitor:', required: true, allowedSignals: supportedMonitors, selectedSignals: selectedMonitors, setSelectedSignals: handleSelectedSignals, errorMessage: formErrors['exportedSignals'] }),
+        React.createElement(SignalsAndDocsWrapper, null,
+            React.createElement(MonitorsCheckboxes, { title: isUpdate ? '' : 'This connection will monitor:', required: true, allowedSignals: supportedMonitors, selectedSignals: selectedMonitors, setSelectedSignals: handleSelectedSignals, errorMessage: formErrors['exportedSignals'] }),
+            !isUpdate && React.createElement(DocsButton, { endpoint: `/backends/${type}` })),
         !isUpdate && (React.createElement(Input, { title: 'Destination name', placeholder: 'Enter destination name', value: formData['name'], onChange: (e) => {
                 dirtyForm();
                 handleFormChange('name', e.target.value);
@@ -14600,7 +14698,7 @@ const ListsWrapper = styled.div `
   flex-direction: column;
   gap: 12px;
 `;
-const DestinationsList = ({ items, onSelectOption, onSelectConfigured }) => {
+const DestinationsList = ({ items, onSelectNew, onSelectConfigured }) => {
     const { configuredDestinationsUpdateOnly } = useSetupStore();
     return items.map((category) => {
         const isAlreadyExisting = category.name === DESTINATION_CATEGORIES['EXISTS']['TITLE'];
@@ -14611,7 +14709,7 @@ const DestinationsList = ({ items, onSelectOption, onSelectConfigured }) => {
                 const key = `select-${category.name.replaceAll(' ', '')}-destination-${item.type}`;
                 const isChecked = item.selected || configuredDestinationsUpdateOnly.some((dest) => dest.id === item.id);
                 const monitors = Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported);
-                const onClick = isAlreadyExisting ? () => onSelectConfigured(item.id) : () => onSelectOption(item);
+                const onClick = isAlreadyExisting ? () => onSelectConfigured(item.id) : () => onSelectNew(item);
                 const { icon, iconSrc } = getDestinationIcon(item.type);
                 return (React.createElement(DataTab, { key: key, "data-id": key, title: item.displayName, hoverText: BUTTON_TEXTS.SELECT, onClick: onClick, iconProps: { icon, iconSrc }, visualProps: { monitors, monitorsWithLabels: true }, checkboxProps: {
                         withCheckbox: isAlreadyExisting,
@@ -14679,7 +14777,7 @@ const createConfiguredItems = (destinations, selectedStreamName, configuredDesti
         },
     };
 });
-const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelectOption, onSelectConfigured }) => {
+const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelectNew, onSelectConfigured }) => {
     const { destinations } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
@@ -14712,7 +14810,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
             return { ...category, items: filteredItems };
         })
             .filter(({ items }) => !!items.length); // Filter out empty categories
-    }, [categories, potentialDestinations, destinations, search, selectedCategory, selectedMonitors, selectedStreamName, configuredDestinations]);
+    }, [categories, potentialDestinations, destinations, search, selectedCategory, selectedMonitors, selectedStreamName, configuredDestinations, configuredDestinationsUpdateOnly]);
     if (hidden)
         return null;
     return (React.createElement(Container$9, null,
@@ -14726,7 +14824,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
         React.createElement(Divider, null),
         !filteredDestinations.length ? (React.createElement(NoDataFoundWrapper, null,
             React.createElement(NoDataFound, { title: 'No destinations found' }))) : (React.createElement(ListsContainer, null,
-            React.createElement(DestinationsList, { items: filteredDestinations, onSelectOption: onSelectOption, onSelectConfigured: onSelectConfigured })))));
+            React.createElement(DestinationsList, { items: filteredDestinations, onSelectNew: (dest) => onSelectNew(dest, selectedMonitors), onSelectConfigured: onSelectConfigured })))));
 };
 
 const Container$8 = styled.div `
@@ -14810,10 +14908,17 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         resetFormData();
         setSelectedItem(undefined);
     };
-    const handleSelectOption = (item) => {
+    const handleSelectNew = (item, selectedMonitors) => {
         resetFormData();
         handleFormChange('type', item?.type || '');
         handleFormChange('currentStreamName', selectedStreamName);
+        const exportedSignals = {
+            logs: false,
+            metrics: false,
+            traces: false,
+        };
+        selectedMonitors.filter((monitor) => item.supportedSignals[monitor].supported).forEach((monitor) => (exportedSignals[monitor] = true));
+        handleFormChange('exportedSignals', exportedSignals);
         setYamlFields(item?.fields || []);
         setSelectedItem(item);
     };
@@ -14859,7 +14964,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                         { stepNumber: 2, title: DISPLAY_TITLES.CONNECTION },
                     ] })),
             React.createElement(ModalBody, { style: { margin: '32px 24px 12px 24px' } },
-                React.createElement(ChooseDestinationBody, { hidden: selectedItem !== undefined, categories: categories, potentialDestinations: potentialDestinations, onSelectOption: handleSelectOption, onSelectConfigured: handleSelectConfigured }),
+                React.createElement(ChooseDestinationBody, { hidden: selectedItem !== undefined, categories: categories, potentialDestinations: potentialDestinations, onSelectNew: handleSelectNew, onSelectConfigured: handleSelectConfigured }),
                 selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection }))))));
 };
 
@@ -15975,6 +16080,11 @@ const buildCard = (source) => {
         { title: DISPLAY_TITLES.NAMESPACE, value: namespace },
         { title: DISPLAY_TITLES.KIND, value: kind },
         { title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' },
+        { type: DataCardFieldTypes.Divider },
+        {
+            type: DataCardFieldTypes.CopyText,
+            value: `kubectl get ${kind} ${name} -n ${namespace}`,
+        },
     ];
     return arr;
 };
@@ -16026,12 +16136,27 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
             loadFormWithDrawerItem(found);
         return found;
     }, [isOpen, drawerEntityId, sourcesByStream]);
+    const containersData = useMemo(() => {
+        const isDisabled = thisItem?.conditions?.some(({ status }) => status === OtherStatus.Disabled);
+        const runtimeCondition = thisItem?.conditions?.find(({ type }) => type === 'RuntimeDetection');
+        const mappedContainers = thisItem?.containers?.map((container) => {
+            const value = {
+                ...container,
+                isDisabled,
+            };
+            return {
+                type: DataCardFieldTypes.SourceContainer,
+                value: JSON.stringify(value),
+            };
+        }) || [];
+        return {
+            description: runtimeCondition?.message,
+            isLoading: runtimeCondition?.status === OtherStatus.Loading,
+            items: mappedContainers,
+        };
+    }, [thisItem]);
     if (!thisItem)
         return null;
-    const containersData = thisItem.containers?.map((container) => ({
-        type: DataCardFieldTypes.SourceContainer,
-        value: JSON.stringify(container),
-    })) || [];
     const handleEdit = (bool) => {
         setIsEditing(typeof bool === 'boolean' ? bool : true);
     };
@@ -16075,7 +16200,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
             } }))) : (React.createElement(DataContainer$1, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.SOURCE_DETAILS, data: !!thisItem ? buildCard(thisItem) : [] }),
-        React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.length, description: DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION, data: containersData })))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
+        React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.isLoading ? OtherStatus.Loading : containersData.items.length, description: containersData.description || DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION, data: containersData.items })))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
 };
 
 const ActionsRow = styled(FlexRow) `