@odigos/ui-kit 0.0.7 → 0.0.9

package/lib/containers.js

@@ -1,20 +1,20 @@
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, useId, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-Byh3BO6S.js';
+import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CZe2VX28.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-Cu2uHOuh.js';
 import { ACTION_TYPE, ENTITY_TYPES, NOTIFICATION_TYPE, CRUD, OTHER_STATUS, NODE_TYPES, ADD_NODE_TYPES, EDGE_TYPES, FIELD_TYPES, SIGNAL_TYPE, CODE_ATTRIBUTES_KEY_TYPES, PAYLOAD_COLLECTION_KEY_TYPES, INSTRUMENTATION_RULE_TYPE } from './types.js';
-import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, B as Badge, a as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-COMxdOJo.js';
-import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DRT_7tQl.js';
+import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-m62aT4IR.js';
+import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DIcomki-.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-DLKEpJJm.js';
+import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-ixs381n-.js';
 import { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, b as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, a as FolderIcon, K as KeyIcon, T as TerminalIcon } from './index-3KUV6Vlt.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BhCi-TxF.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-ClorQ_WP.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-5w3VnEhL.js';
-import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-4tCBQ2pl.js';
-import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-DUW6bkzG.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BY6B70Kf.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-Dfxjcy-C.js';
+import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-D_Qn2U89.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-Bc8gi9FH.js';
+import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-g6Twdelv.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
@@ -800,11 +800,19 @@ const StyledButton = styled(Button) `
     background-color: ${({ theme }) => theme.colors.majestic_blue + Theme.opacity.hex['048']};
   }
 `;
+const TextLimited = styled(Text) `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+`;
 const SelectionButton = ({ label, onClick, icon: Icon, iconSrc, badgeLabel, badgeFilled, isSelected, withBorder, color, hoverColor, style }) => {
     return (React.createElement(StyledButton, { onClick: onClick, className: isSelected ? 'selected' : 'not-selected', "$withBorder": withBorder, "$color": color, "$hoverColor": hoverColor, style: style },
-        Icon && React.createElement(Icon, null),
-        iconSrc && React.createElement("img", { src: iconSrc, alt: '', width: 16, height: 16 }),
-        React.createElement(Text, { size: 14, style: { whiteSpace: 'nowrap' } }, label),
+        Icon && (React.createElement("div", null,
+            React.createElement(Icon, null))),
+        iconSrc && (React.createElement("div", null,
+            React.createElement("img", { src: iconSrc, alt: '', width: 16, height: 16 }))),
+        React.createElement(TextLimited, null, label),
         badgeLabel !== undefined && React.createElement(Badge, { label: badgeLabel, filled: badgeFilled || isSelected })));
 };
 
@@ -867,7 +875,7 @@ const FootWrap = styled.div `
   border-top: ${({ theme }) => `1px solid ${theme.colors.border}`};
   padding: 12px;
 `;
-const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll }) => {
+const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) => {
     const theme = Theme.useTheme();
     const { addNotification } = useNotificationStore();
     const [isOpen, setIsOpen] = useState(false);
@@ -878,8 +886,8 @@ const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll
     const containerRef = useRef(null);
     useOnClickOutside(containerRef, onClose);
     useKeyDown({ key: 'Escape', active: isOpen }, onClose);
-    const withSelect = !!computePlatforms.length;
-    const filtered = computePlatforms.filter(({ id }) => id.toLowerCase().includes(searchText));
+    const withSelect = !!connections.length;
+    const filtered = connections.filter(({ id }) => id.toLowerCase().includes(searchText));
     const Icon = !!selected?.type ? getPlatformIcon(selected.type) : null;
     return (React.createElement(RelativeContainer$2, { ref: containerRef },
         React.createElement(Tab, { "$withSelect": withSelect, onClick: () => setIsOpen((prev) => !prev) },
@@ -890,8 +898,8 @@ const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll
         isOpen && withSelect && (React.createElement(AbsoluteContainer$2, null,
             React.createElement(HeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, connectionStatus }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: connectionStatus === NOTIFICATION_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
-                    if (connectionStatus === NOTIFICATION_TYPE.SUCCESS) {
+            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === NOTIFICATION_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
+                    if (status === NOTIFICATION_TYPE.SUCCESS) {
                         onSelect(filtered[idx]);
                     }
                     else {
@@ -908,11 +916,11 @@ const ComputePlatformSelect = ({ computePlatforms, selected, onSelect, onViewAll
                 React.createElement(Button, { variant: 'secondary', style: { width: '100%' }, onClick: onViewAll }, "VIEW ALL"))))));
 };
 
-const ComputePlatforms = ({ computePlatforms, onSelect }) => {
+const ComputePlatforms = ({ connections, onSelect }) => {
     const { searchText, platformTypes, statuses } = useFilterStore();
-    const filtered = computePlatforms.filter(({ id, type, connectionStatus }) => (!searchText || id.toLowerCase().includes(searchText)) &&
+    const filtered = connections.filter(({ id, type, status }) => (!searchText || id.toLowerCase().includes(searchText)) &&
         (!platformTypes?.length || platformTypes.find((opt) => opt.id === type)) &&
-        (!statuses?.length || statuses.find((opt) => opt.id === connectionStatus)));
+        (!statuses?.length || statuses.find((opt) => opt.id === status)));
     return (React.createElement(React.Fragment, null,
         React.createElement(InteractiveTable, { columns: [
                 { key: 'icon', title: '' },
@@ -920,7 +928,7 @@ const ComputePlatforms = ({ computePlatforms, onSelect }) => {
                 { key: 'type', title: 'Type' },
                 { key: 'status', title: 'Status' },
                 { key: 'id', title: 'Unique ID' },
-            ], rows: filtered.map(({ id, name, type, connectionStatus }) => ({
+            ], rows: filtered.map(({ id, name, type, status }) => ({
                 cells: [
                     { columnKey: 'id', value: id },
                     { columnKey: 'type', value: type },
@@ -929,7 +937,7 @@ const ComputePlatforms = ({ computePlatforms, onSelect }) => {
                     {
                         columnKey: 'status',
                         component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                            React.createElement(Status, { title: connectionStatus === NOTIFICATION_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: connectionStatus, withIcon: true, withBorder: true }))),
+                            React.createElement(Status, { title: status === NOTIFICATION_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
                     },
                 ],
             })), onRowClick: (idx) => onSelect(filtered[idx]) }),
@@ -937,19 +945,32 @@ const ComputePlatforms = ({ computePlatforms, onSelect }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const ConnectionStatusDropdown = ({ computePlatforms, title = '', value, onSelect, onDeselect, ...props }) => {
+const ConnectionStatusDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
-        computePlatforms?.forEach(({ connectionStatus }) => {
-            if (!payload.find((opt) => opt.id === connectionStatus)) {
-                payload.push({ id: connectionStatus, value: connectionStatus });
+        connections?.forEach(({ status }) => {
+            if (!payload.find((opt) => opt.id === status)) {
+                payload.push({ id: status, value: status });
             }
         });
         return payload;
-    }, [computePlatforms]);
+    }, [connections]);
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Statuses', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
+const ConnectionTypeDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        connections?.forEach(({ type }) => {
+            if (!payload.find((opt) => opt.id === type)) {
+                payload.push({ id: type, value: type });
+            }
+        });
+        return payload;
+    }, [connections]);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Types', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
 const ErrorDropdown = ({ title = 'Error Message', value, onSelect, onDeselect, disabled, ...props }) => {
     const { sources } = useEntityStore();
     const options = useMemo(() => {
@@ -1017,19 +1038,6 @@ const NamespaceDropdown = ({ namespaces, title = 'Namespace', value, onSelect, o
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'Select namespace', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const PlatformTypesDropdown = ({ computePlatforms, title = '', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        computePlatforms?.forEach(({ type }) => {
-            if (!payload.find((opt) => opt.id === type)) {
-                payload.push({ id: type, value: type });
-            }
-        });
-        return payload;
-    }, [computePlatforms]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Types', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
 const KindDropdown = ({ title = 'Kind', value, onSelect, onDeselect, ...props }) => {
     const { sources } = useEntityStore();
     const options = useMemo(() => {
@@ -1058,7 +1066,7 @@ const Title$1 = styled(Text) `
 const SearchAndFilterWrapper = styled.div `
   width: 200px;
 `;
-const ComputePlatformsActionsMenu = ({ computePlatforms }) => {
+const ComputePlatformsActionsMenu = ({ connections }) => {
     const { searchText, setSearchText, statuses, setStatuses, clearAll } = useFilterStore();
     // cleanup filters on unmount
     useEffect(() => {
@@ -1068,12 +1076,12 @@ const ComputePlatformsActionsMenu = ({ computePlatforms }) => {
         React.createElement(FlexRow, { "$gap": 16 },
             React.createElement(FlexRow, { "$gap": 12 },
                 React.createElement(Title$1, null, "Compute platforms"),
-                React.createElement(Badge, { label: computePlatforms.length, filled: !!computePlatforms.length })),
+                React.createElement(Badge, { label: connections.length, filled: !!connections.length })),
             React.createElement(Divider, { orientation: 'vertical', length: '20px', margin: '0' }),
             React.createElement(SearchAndFilterWrapper, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
             React.createElement(SearchAndFilterWrapper, null,
-                React.createElement(ConnectionStatusDropdown, { computePlatforms: computePlatforms, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
+                React.createElement(ConnectionStatusDropdown, { connections: connections, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
 };
 
 var css_248z = "/* this gets exported as style.css and can be used for the default theming */\n/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */\n.react-flow {\n  direction: ltr;\n\n  --xy-edge-stroke-default: #b1b1b7;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #555;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);\n\n  --xy-minimap-background-color-default: #fff;\n  --xy-minimap-mask-background-color-default: rgb(240, 240, 240, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #e2e2e2;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: transparent;\n  --xy-background-pattern-dots-color-default: #91919a;\n  --xy-background-pattern-lines-color-default: #eee;\n  --xy-background-pattern-cross-color-default: #e2e2e2;\n  background-color: var(--xy-background-color, var(--xy-background-color-default));\n  --xy-node-color-default: inherit;\n  --xy-node-border-default: 1px solid #1a192b;\n  --xy-node-background-color-default: #fff;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;\n  --xy-node-border-radius-default: 3px;\n\n  --xy-handle-background-color-default: #1a192b;\n  --xy-handle-border-color-default: #fff;\n\n  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #fefefe;\n  --xy-controls-button-background-color-hover-default: #f4f4f4;\n  --xy-controls-button-color-default: inherit;\n  --xy-controls-button-color-hover-default: inherit;\n  --xy-controls-button-border-color-default: #eee;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #ffffff;\n  --xy-edge-label-color-default: inherit;\n  --xy-resize-background-color-default: #3367d9;\n}\n.react-flow.dark {\n  --xy-edge-stroke-default: #3e3e3e;\n  --xy-edge-stroke-width-default: 1;\n  --xy-edge-stroke-selected-default: #727272;\n\n  --xy-connectionline-stroke-default: #b1b1b7;\n  --xy-connectionline-stroke-width-default: 1;\n\n  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);\n\n  --xy-minimap-background-color-default: #141414;\n  --xy-minimap-mask-background-color-default: rgb(60, 60, 60, 0.6);\n  --xy-minimap-mask-stroke-color-default: transparent;\n  --xy-minimap-mask-stroke-width-default: 1;\n  --xy-minimap-node-background-color-default: #2b2b2b;\n  --xy-minimap-node-stroke-color-default: transparent;\n  --xy-minimap-node-stroke-width-default: 2;\n\n  --xy-background-color-default: #141414;\n  --xy-background-pattern-dots-color-default: #777;\n  --xy-background-pattern-lines-color-default: #777;\n  --xy-background-pattern-cross-color-default: #777;\n  --xy-node-color-default: #f8f8f8;\n  --xy-node-border-default: 1px solid #3c3c3c;\n  --xy-node-background-color-default: #1e1e1e;\n  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);\n  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);\n  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;\n\n  --xy-handle-background-color-default: #bebebe;\n  --xy-handle-border-color-default: #1e1e1e;\n\n  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);\n  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);\n\n  --xy-controls-button-background-color-default: #2b2b2b;\n  --xy-controls-button-background-color-hover-default: #3e3e3e;\n  --xy-controls-button-color-default: #f8f8f8;\n  --xy-controls-button-color-hover-default: #fff;\n  --xy-controls-button-border-color-default: #5b5b5b;\n  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);\n\n  --xy-edge-label-background-color-default: #141414;\n  --xy-edge-label-color-default: #f8f8f8;\n}\n.react-flow__background {\n  background-color: var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));\n  pointer-events: none;\n  z-index: -1;\n}\n.react-flow__container {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n}\n.react-flow__pane {\n  z-index: 1;\n}\n.react-flow__pane.draggable {\n    cursor: grab;\n  }\n.react-flow__pane.dragging {\n    cursor: grabbing;\n  }\n.react-flow__pane.selection {\n    cursor: pointer;\n  }\n.react-flow__viewport {\n  transform-origin: 0 0;\n  z-index: 2;\n  pointer-events: none;\n}\n.react-flow__renderer {\n  z-index: 4;\n}\n.react-flow__selection {\n  z-index: 6;\n}\n.react-flow__nodesselection-rect:focus,\n.react-flow__nodesselection-rect:focus-visible {\n  outline: none;\n}\n.react-flow__edge-path {\n  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));\n  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));\n  fill: none;\n}\n.react-flow__connection-path {\n  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));\n  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));\n  fill: none;\n}\n.react-flow .react-flow__edges {\n  position: absolute;\n}\n.react-flow .react-flow__edges svg {\n    overflow: visible;\n    position: absolute;\n    pointer-events: none;\n  }\n.react-flow__edge {\n  pointer-events: visibleStroke;\n}\n.react-flow__edge.selectable {\n    cursor: pointer;\n  }\n.react-flow__edge.animated path {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\n.react-flow__edge.animated path.react-flow__edge-interaction {\n    stroke-dasharray: none;\n    animation: none;\n  }\n.react-flow__edge.inactive {\n    pointer-events: none;\n  }\n.react-flow__edge.selected,\n  .react-flow__edge:focus,\n  .react-flow__edge:focus-visible {\n    outline: none;\n  }\n.react-flow__edge.selected .react-flow__edge-path,\n  .react-flow__edge.selectable:focus .react-flow__edge-path,\n  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {\n    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));\n  }\n.react-flow__edge-textwrapper {\n    pointer-events: all;\n  }\n.react-flow__edge .react-flow__edge-text {\n    pointer-events: none;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__connection {\n  pointer-events: none;\n}\n.react-flow__connection .animated {\n    stroke-dasharray: 5;\n    animation: dashdraw 0.5s linear infinite;\n  }\nsvg.react-flow__connectionline {\n  z-index: 1001;\n  overflow: visible;\n  position: absolute;\n}\n.react-flow__nodes {\n  pointer-events: none;\n  transform-origin: 0 0;\n}\n.react-flow__node {\n  position: absolute;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  pointer-events: all;\n  transform-origin: 0 0;\n  box-sizing: border-box;\n  cursor: default;\n}\n.react-flow__node.selectable {\n    cursor: pointer;\n  }\n.react-flow__node.draggable {\n    cursor: grab;\n    pointer-events: all;\n  }\n.react-flow__node.draggable.dragging {\n      cursor: grabbing;\n    }\n.react-flow__nodesselection {\n  z-index: 3;\n  transform-origin: left top;\n  pointer-events: none;\n}\n.react-flow__nodesselection-rect {\n    position: absolute;\n    pointer-events: all;\n    cursor: grab;\n  }\n.react-flow__handle {\n  position: absolute;\n  pointer-events: none;\n  min-width: 5px;\n  min-height: 5px;\n  width: 6px;\n  height: 6px;\n  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));\n  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));\n  border-radius: 100%;\n}\n.react-flow__handle.connectingfrom {\n    pointer-events: all;\n  }\n.react-flow__handle.connectionindicator {\n    pointer-events: all;\n    cursor: crosshair;\n  }\n.react-flow__handle-bottom {\n    top: auto;\n    left: 50%;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n.react-flow__handle-top {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-left {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n.react-flow__handle-right {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n.react-flow__edgeupdater {\n  cursor: move;\n  pointer-events: all;\n}\n.react-flow__panel {\n  position: absolute;\n  z-index: 5;\n  margin: 15px;\n}\n.react-flow__panel.top {\n    top: 0;\n  }\n.react-flow__panel.bottom {\n    bottom: 0;\n  }\n.react-flow__panel.left {\n    left: 0;\n  }\n.react-flow__panel.right {\n    right: 0;\n  }\n.react-flow__panel.center {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n.react-flow__attribution {\n  font-size: 10px;\n  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));\n  padding: 2px 3px;\n  margin: 0;\n}\n.react-flow__attribution a {\n    text-decoration: none;\n    color: #999;\n  }\n@keyframes dashdraw {\n  from {\n    stroke-dashoffset: 10;\n  }\n}\n.react-flow__edgelabel-renderer {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  left: 0;\n  top: 0;\n}\n.react-flow__viewport-portal {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.react-flow__minimap {\n  background: var(\n    --xy-minimap-background-color-props,\n    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))\n  );\n}\n.react-flow__minimap-svg {\n    display: block;\n  }\n.react-flow__minimap-mask {\n    fill: var(\n      --xy-minimap-mask-background-color-props,\n      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-mask-stroke-color-props,\n      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-mask-stroke-width-props,\n      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))\n    );\n  }\n.react-flow__minimap-node {\n    fill: var(\n      --xy-minimap-node-background-color-props,\n      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))\n    );\n    stroke: var(\n      --xy-minimap-node-stroke-color-props,\n      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))\n    );\n    stroke-width: var(\n      --xy-minimap-node-stroke-width-props,\n      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))\n    );\n  }\n.react-flow__background-pattern.dots {\n    fill: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))\n    );\n  }\n.react-flow__background-pattern.lines {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))\n    );\n  }\n.react-flow__background-pattern.cross {\n    stroke: var(\n      --xy-background-pattern-color-props,\n      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))\n    );\n  }\n.react-flow__controls {\n  display: flex;\n  flex-direction: column;\n  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));\n}\n.react-flow__controls.horizontal {\n    flex-direction: row;\n  }\n.react-flow__controls-button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 26px;\n    width: 26px;\n    padding: 4px;\n    border: none;\n    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));\n    border-bottom: 1px solid\n      var(\n        --xy-controls-button-border-color-props,\n        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))\n      );\n    color: var(\n      --xy-controls-button-color-props,\n      var(--xy-controls-button-color, var(--xy-controls-button-color-default))\n    );\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n.react-flow__controls-button svg {\n      width: 100%;\n      max-width: 12px;\n      max-height: 12px;\n      fill: currentColor;\n    }\n.react-flow__edge.updating .react-flow__edge-path {\n      stroke: #777;\n    }\n.react-flow__edge-text {\n    font-size: 10px;\n  }\n.react-flow__node.selectable:focus,\n  .react-flow__node.selectable:focus-visible {\n    outline: none;\n  }\n.react-flow__node-input,\n.react-flow__node-default,\n.react-flow__node-output,\n.react-flow__node-group {\n  padding: 10px;\n  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));\n  width: 150px;\n  font-size: 12px;\n  color: var(--xy-node-color, var(--xy-node-color-default));\n  text-align: center;\n  border: var(--xy-node-border, var(--xy-node-border-default));\n  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));\n}\n.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {\n      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));\n    }\n.react-flow__node-input.selectable.selected,\n    .react-flow__node-input.selectable:focus,\n    .react-flow__node-input.selectable:focus-visible,\n    .react-flow__node-default.selectable.selected,\n    .react-flow__node-default.selectable:focus,\n    .react-flow__node-default.selectable:focus-visible,\n    .react-flow__node-output.selectable.selected,\n    .react-flow__node-output.selectable:focus,\n    .react-flow__node-output.selectable:focus-visible,\n    .react-flow__node-group.selectable.selected,\n    .react-flow__node-group.selectable:focus,\n    .react-flow__node-group.selectable:focus-visible {\n      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));\n    }\n.react-flow__node-group {\n  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));\n}\n.react-flow__nodesselection-rect,\n.react-flow__selection {\n  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));\n  border: var(--xy-selection-border, var(--xy-selection-border-default));\n}\n.react-flow__nodesselection-rect:focus,\n  .react-flow__nodesselection-rect:focus-visible,\n  .react-flow__selection:focus,\n  .react-flow__selection:focus-visible {\n    outline: none;\n  }\n.react-flow__controls-button:hover {\n      background: var(\n        --xy-controls-button-background-color-hover-props,\n        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))\n      );\n      color: var(\n        --xy-controls-button-color-hover-props,\n        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))\n      );\n    }\n.react-flow__controls-button:disabled {\n      pointer-events: none;\n    }\n.react-flow__controls-button:disabled svg {\n        fill-opacity: 0.4;\n      }\n.react-flow__controls-button:last-child {\n    border-bottom: none;\n  }\n.react-flow__resize-control {\n  position: absolute;\n}\n.react-flow__resize-control.left,\n.react-flow__resize-control.right {\n  cursor: ew-resize;\n}\n.react-flow__resize-control.top,\n.react-flow__resize-control.bottom {\n  cursor: ns-resize;\n}\n.react-flow__resize-control.top.left,\n.react-flow__resize-control.bottom.right {\n  cursor: nwse-resize;\n}\n.react-flow__resize-control.bottom.left,\n.react-flow__resize-control.top.right {\n  cursor: nesw-resize;\n}\n/* handle styles */\n.react-flow__resize-control.handle {\n  width: 4px;\n  height: 4px;\n  border: 1px solid #fff;\n  border-radius: 1px;\n  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  transform: translate(-50%, -50%);\n}\n.react-flow__resize-control.handle.left {\n  left: 0;\n  top: 50%;\n}\n.react-flow__resize-control.handle.right {\n  left: 100%;\n  top: 50%;\n}\n.react-flow__resize-control.handle.top {\n  left: 50%;\n  top: 0;\n}\n.react-flow__resize-control.handle.bottom {\n  left: 50%;\n  top: 100%;\n}\n.react-flow__resize-control.handle.top.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.bottom.left {\n  left: 0;\n}\n.react-flow__resize-control.handle.top.right {\n  left: 100%;\n}\n.react-flow__resize-control.handle.bottom.right {\n  left: 100%;\n}\n/* line styles */\n.react-flow__resize-control.line {\n  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));\n  border-width: 0;\n  border-style: solid;\n}\n.react-flow__resize-control.line.left,\n.react-flow__resize-control.line.right {\n  width: 1px;\n  transform: translate(-50%, 0);\n  top: 0;\n  height: 100%;\n}\n.react-flow__resize-control.line.left {\n  left: 0;\n  border-left-width: 1px;\n}\n.react-flow__resize-control.line.right {\n  left: 100%;\n  border-right-width: 1px;\n}\n.react-flow__resize-control.line.top,\n.react-flow__resize-control.line.bottom {\n  height: 1px;\n  transform: translate(0, -50%);\n  left: 0;\n  width: 100%;\n}\n.react-flow__resize-control.line.top {\n  top: 0;\n  border-top-width: 1px;\n}\n.react-flow__resize-control.line.bottom {\n  border-bottom-width: 1px;\n  top: 100%;\n}\n.react-flow__edge-textbg {\n  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));\n}\n.react-flow__edge-text {\n  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));\n}\n";
@@ -12844,7 +12852,7 @@ const Progress = styled.div `
   transition: width 0.3s;
 `;
 const HeaderNode = memo(({ id: nodeId, data }) => {
-    const { nodeWidth, title, icon: Icon, tagValue, isFetching, sources } = data;
+    const { nodeWidth, title, icon: Icon, badge, badgeTooltip, isFetching, sources } = data;
     const entityType = nodeId.split('-')[0];
     const { isAwaitingInstrumentation, sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted } = useInstrumentStore();
     const isSourceAwaitingInstrumentation = entityType === ENTITY_TYPES.SOURCE && isAwaitingInstrumentation;
@@ -12882,7 +12890,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
     return (React.createElement(Container$e, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         entityType === ENTITY_TYPES.SOURCE && (React.createElement(SelectorWrapper, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
-        React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : tagValue, loading: isFetching && !isSourceAwaitingInstrumentation }),
+        React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
         React.createElement(Actions$1, { entityType: entityType }),
         isSourceAwaitingInstrumentation && React.createElement(Progress, { percent: instrumentingPercent })));
 });
@@ -13079,7 +13087,7 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
             nodeWidth: nodeWidth$4,
             title: 'Instrumentation Rules',
             icon: getEntityIcon(ENTITY_TYPES.INSTRUMENTATION_RULE),
-            tagValue: unfilteredCount,
+            badge: unfilteredCount,
             isFetching: loading,
         },
     });
@@ -13159,7 +13167,7 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
             nodeWidth: nodeWidth$3,
             title: 'Actions',
             icon: getEntityIcon(ENTITY_TYPES.ACTION),
-            tagValue: unfilteredCount,
+            badge: unfilteredCount,
             isFetching: loading,
         },
     });
@@ -13239,13 +13247,14 @@ const mapToNodeData$1 = (entity) => {
         faded: hasDisableds,
         title: getEntityLabel(entity, ENTITY_TYPES.SOURCE, { extended: true }),
         subTitle: `${entity.namespace} • ${entity.kind}`,
-        iconSrcs: getContainersIcons(entity.containers),
+        icons: getContainersIcons(entity.containers),
         raw: entity,
     };
 };
 const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
     const nodes = [];
     const position = positions[ENTITY_TYPES.SOURCE];
+    const hasFiltersApplied = entities.length !== unfilteredCount;
     nodes.push({
         id: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.HEADER}`,
         type: NODE_TYPES.HEADER,
@@ -13257,7 +13266,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
             nodeWidth: nodeWidth$2,
             title: 'Sources',
             icon: getEntityIcon(ENTITY_TYPES.SOURCE),
-            tagValue: entities.length !== unfilteredCount ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
+            badge: hasFiltersApplied ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
+            badgeTooltip: hasFiltersApplied ? 'Represents filtered amount, out of total amount' : undefined,
             isFetching: loading,
             sources: entities,
         },
@@ -13394,7 +13404,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
             nodeWidth,
             title: 'Destinations',
             icon: getEntityIcon(ENTITY_TYPES.DESTINATION),
-            tagValue: unfilteredCount,
+            badge: unfilteredCount,
             isFetching: loading,
         },
     });
@@ -15116,17 +15126,18 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
         return (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, describe.pods.map(({ podName, nodeName, phase, containers }) => {
+    return (React.createElement(FlexColumn, { "$gap": 12 }, !describe.pods?.length ? (React.createElement(CenterThis, null,
+        React.createElement(NoDataFound, { subTitle: 'Check if you have any running pods and try again' }))) : (describe.pods.map(({ podName, nodeName, phase, containers }) => {
         const podHasErrors = phase.status !== NOTIFICATION_TYPE.SUCCESS ||
-            !!containers.find(({ instrumentationInstances }) => !!instrumentationInstances.find(({ healthy }) => healthy.status !== NOTIFICATION_TYPE.SUCCESS));
-        return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => (React.createElement(Status, { status: podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, title: podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, withIcon: true, withBorder: true })), data: [
+            containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== NOTIFICATION_TYPE.SUCCESS) !== -1) !== -1;
+        const podStatus = podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS;
+        const divider = { type: DATA_CARD_FIELD_TYPES.DIVIDER };
+        return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => React.createElement(Status, { status: podStatus, title: podStatus, withIcon: true, withBorder: true }), data: [
                 {
                     type: DATA_CARD_FIELD_TYPES.COPY_TEXT,
                     value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`,
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 {
                     type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
                     value: JSON.stringify({
@@ -15138,9 +15149,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                         },
                     }),
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 {
                     type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
                     value: JSON.stringify({
@@ -15152,9 +15161,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                         },
                     }),
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 ...containers.map((container) => {
                     return {
                         type: DATA_CARD_FIELD_TYPES.POD_CONTAINER,
@@ -15174,7 +15181,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                     };
                 }),
             ] }));
-    })));
+    }))));
 };
 
 const buildCard = (source) => {
@@ -15649,7 +15656,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                     columnKey: 'checkbox-and-icon',
                     component: () => (React.createElement(FlexRow, { "$gap": 16 },
                         React.createElement(Checkbox, { disabled: isPending, value: isChecked, onChange: () => onSelectOne(source) }),
-                        React.createElement(IconGroup, { iconSrcs: getContainersIcons(source.containers) }))),
+                        React.createElement(IconGroup, { icons: getContainersIcons(source.containers) }))),
                 },
                 {
                     columnKey: 'name',
@@ -15832,7 +15839,7 @@ const Describe = ({ fetchDescribeOdigos }) => {
         ]
         : [];
     return (React.createElement(React.Fragment, null,
-        React.createElement(DataCard, { title: 'General Information', withExtend: true, data: [
+        React.createElement(DataCard, { title: 'General Information', withExtend: true, initialExtended: true, data: [
                 { title: describe?.odigosVersion?.name, value: describe?.odigosVersion?.value },
                 { title: describe?.kubernetesVersion?.name, value: describe?.kubernetesVersion?.value },
                 { title: describe?.installationMethod?.name, value: describe?.installationMethod?.value },
@@ -15949,4 +15956,4 @@ const ToggleDarkMode = () => {
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NAV_ICON_IDS, NamespaceDropdown, NotificationManager, OverviewDrawer, PlatformTypesDropdown, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NAV_ICON_IDS, NamespaceDropdown, NotificationManager, OverviewDrawer, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };

package/lib/data/sources/index.d.ts

@@ -6,6 +6,7 @@ export declare const MOCK_SOURCE_JAEGER: {
     kind: K8S_RESOURCE_KIND;
     selected: boolean;
     otelServiceName: string;
+    numberOfInstances: number;
     containers: {
         containerName: string;
         language: PROGRAMMING_LANGUAGES;

package/lib/functions/get-containers-icons/index.d.ts

@@ -1,2 +1,2 @@
-import type { Source } from '@/types';
-export declare const getContainersIcons: (containers: Source["containers"]) => string[];
+import type { Source, SVG } from '@/types';
+export declare const getContainersIcons: (containers: Source["containers"]) => SVG[];

package/lib/functions/get-platform-icon/index.d.ts

@@ -1,2 +1,2 @@
 import { PLATFORM_TYPE, type SVG } from '@/types';
-export declare const getPlatformIcon: (type: PLATFORM_TYPE) => SVG;
+export declare const getPlatformIcon: (type?: PLATFORM_TYPE) => SVG;

package/lib/functions/get-platform-label/index.d.ts

@@ -1,2 +1,2 @@
 import { PLATFORM_TYPE } from '@/types';
-export declare const getPlatformLabel: (type: PLATFORM_TYPE) => string;
+export declare const getPlatformLabel: (type?: PLATFORM_TYPE) => string;

package/lib/functions/get-programming-language-icon/index.d.ts

@@ -1,2 +1,2 @@
-import { PROGRAMMING_LANGUAGES } from '@/types';
-export declare const getProgrammingLanguageIcon: (language: PROGRAMMING_LANGUAGES) => string;
+import { PROGRAMMING_LANGUAGES, type SVG } from '@/types';
+export declare const getProgrammingLanguageIcon: (language: PROGRAMMING_LANGUAGES) => SVG;

package/lib/functions.js

@@ -1,15 +1,15 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-4tCBQ2pl.js';
-export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getEntityIcon, j as getEntityLabel, k as getMetricForEntity, l as getPlatformIcon, m as getPlatformLabel, n as getValueForRange, o as isOverTime, s as sleep } from './index-DUW6bkzG.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getMonitorIcon, a as getProgrammingLanguageIcon, b as getStatusIcon, m as mapConditions, p as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, d as splitCamelString } from './index-Bc8gi9FH.js';
+export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterSources, d as formatBytes, g as getConditionsBooleans, h as getContainersIcons, e as getContainersInstrumentedCount, i as getEntityIcon, j as getEntityLabel, k as getMetricForEntity, l as getPlatformIcon, m as getPlatformLabel, n as getValueForRange, o as isOverTime, s as sleep } from './index-g6Twdelv.js';
 import { INSTRUMENTATION_RULE_TYPE, ENTITY_TYPES } from './types.js';
-export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BhCi-TxF.js';
-export { k as getEntityId, l as isTimeElapsed } from './index-DRT_7tQl.js';
+export { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
+export { k as getEntityId, l as isTimeElapsed } from './index-DIcomki-.js';
 export { g as getIdFromSseTarget } from './index-BFct3S32.js';
 export { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
 import 'react';
 import 'styled-components';
-import './index-DLKEpJJm.js';
-import './theme.js';
 import './index-BGlk5VhF.js';
+import './theme.js';
+import './index-ixs381n-.js';
 import './index-BjJpYtF1.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {

package/lib/hooks/useCopy.d.ts

@@ -1,6 +1,6 @@
 declare const useCopy: () => {
     isCopied: boolean;
     copiedIndex: number;
-    clickCopy: (str: string, idx?: number) => void;
+    clickCopy: (str: string, idx?: number) => Promise<void>;
 };
 export { useCopy };

package/lib/hooks.js

@@ -1,12 +1,12 @@
-export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-ClorQ_WP.js';
-export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-5w3VnEhL.js';
+export { u as useActionFormData, a as useClickNode, b as useClickNotification, c as useDestinationFormData, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BY6B70Kf.js';
+export { u as useContainerSize, a as useCopy, b as useGenericForm, c as useInstrumentationRuleFormData, d as useKeyDown, e as useOnClickOutside, f as useTimeAgo, g as useTransition } from './useTransition-Dfxjcy-C.js';
 import './types.js';
 import 'react';
-import './index-DRT_7tQl.js';
+import './index-DIcomki-.js';
 import 'styled-components';
 import './index-BZS1ijMm.js';
-import './index-Byh3BO6S.js';
-import './index-BhCi-TxF.js';
+import './index-CZe2VX28.js';
+import './index-BumPE6cF.js';
 import './index-BGlk5VhF.js';
 import './theme.js';
 import './index-Cu2uHOuh.js';

package/lib/icons/common/image-error-icon/image-error-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/common/image-error-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const ImageErrorIcon: SVG;

package/lib/icons/common/index.d.ts

@@ -7,6 +7,7 @@ export * from './edit-icon/index';
 export * from './extend-arrow-icon/index';
 export * from './filter-icon/index';
 export * from './folder-icon/index';
+export * from './image-error-icon/index';
 export * from './key-icon/index';
 export * from './list-icon/index';
 export * from './no-data-icon/index';

package/lib/icons/index.d.ts

@@ -7,5 +7,6 @@ export * from './math';
 export * from './monitors';
 export * from './on-off';
 export * from './overview';
+export * from './programming-languages';
 export * from './social';
 export * from './status';

package/lib/icons/overview/connections-icon/connections-icon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/overview/connections-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const ConnectionsIcon: SVG;

package/lib/icons/overview/index.d.ts

@@ -1,6 +1,7 @@
 export * from './overview-icon/index';
 export * from './service-map-icon/index';
 export * from './trace-view-icon/index';
+export * from './connections-icon/index';
 export * from './actions-icon/index';
 export * from './destinations-icon/index';
 export * from './rules-icon/index';

package/lib/icons/programming-languages/c-plus-plus-logo/c-plus-plus-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/c-plus-plus-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const CPlusPlusLogo: SVG;

package/lib/icons/programming-languages/c-sharp-logo/c-sharp-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/c-sharp-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const CSharpLogo: SVG;

package/lib/icons/programming-languages/dotnet-logo/dotnet-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/dotnet-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const DotnetLogo: SVG;

package/lib/icons/programming-languages/elixir-logo/elixir-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/elixir-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const ElixirLogo: SVG;

package/lib/icons/programming-languages/go-logo/go-logo.stories.d.ts

@@ -0,0 +1,8 @@
+import type { SVG } from '@/types';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: SVG;
+};
+export default _default;
+export declare const Default: StoryFn<SVG>;

package/lib/icons/programming-languages/go-logo/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const GoLogo: SVG;