@odigos/ui-kit 0.0.15 → 0.0.16

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## [0.0.16](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.15...ui-kit-v0.0.16) (2025-03-25)
+
+
+### Features
+
+* destination icons as imported SVGs ([#51](https://github.com/odigos-io/ui-kit/issues/51)) ([9351568](https://github.com/odigos-io/ui-kit/commit/93515684b7fa464f526159092061f63a4b8675fb))
+* kill `crypto.randomUUID` (after killing `useId`) ([#49](https://github.com/odigos-io/ui-kit/issues/49)) ([f668cf7](https://github.com/odigos-io/ui-kit/commit/f668cf719c44ebf267138b6c565c81701f135a86))
+* move namespaces into entity store ([#47](https://github.com/odigos-io/ui-kit/issues/47)) ([4c96c3f](https://github.com/odigos-io/ui-kit/commit/4c96c3f746fcd2192e7b3c7cd69cf0d9c2dc6f6d))
+* refactor data-tab props ([#48](https://github.com/odigos-io/ui-kit/issues/48)) ([d81559a](https://github.com/odigos-io/ui-kit/commit/d81559ae8fc0268c52ab52fd4171fedd63060fb2))
+
 ## [0.0.15](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.14...ui-kit-v0.0.15) (2025-03-24)
 
 

package/lib/components/data-tab/index.d.ts

@@ -1,30 +1,42 @@
 import { type CSSProperties, type FC, type ReactNode } from 'react';
 import type { SVG } from '@/types';
 import { StatusType, SignalType } from '@/types';
-interface DataTabProps {
-    title: string;
-    subTitle?: string;
+interface IconProps {
     icon?: SVG;
     icons?: SVG[];
     iconSrc?: string;
     iconSrcs?: string[];
-    hoverText?: string;
+}
+interface VisualProps {
     status?: StatusType;
     faded?: boolean;
     bgColor?: CSSProperties['backgroundColor'];
     bgColorHover?: CSSProperties['backgroundColor'];
+    isActive?: boolean;
     monitors?: SignalType[];
     monitorsWithLabels?: boolean;
-    isActive?: boolean;
+}
+interface CheckboxProps {
     withCheckbox?: boolean;
     isCheckboxDisabled?: boolean;
     isChecked?: boolean;
     onCheckboxChange?: (value: boolean) => void;
+}
+interface ExtendableProps {
     withExtend?: boolean;
     isExtended?: boolean;
     renderExtended?: () => ReactNode;
-    renderActions?: () => ReactNode;
+}
+interface DataTabProps {
+    title: string;
+    subTitle?: string;
+    hoverText?: string;
     onClick?: () => void;
+    renderActions?: () => ReactNode;
+    iconProps?: IconProps;
+    visualProps?: VisualProps;
+    checkboxProps?: CheckboxProps;
+    extendableProps?: ExtendableProps;
 }
 declare const DataTab: FC<DataTabProps>;
 export { DataTab, type DataTabProps };

package/lib/components/icon-group/index.d.ts

@@ -6,6 +6,7 @@ interface IconGroupProps {
     iconSrcs?: string[];
     status?: StatusType;
     size?: number;
+    id: string;
 }
 declare const IconGroup: FC<IconGroupProps>;
 export { IconGroup, type IconGroupProps };

package/lib/components.js

@@ -1,18 +1,18 @@
-import { B as Button } from './index-zMKRaKMY.js';
-export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, $ as FlexColumn, _ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-zMKRaKMY.js';
+import { B as Button } from './index-D6cZdmUs.js';
+export { A as AutocompleteInput, a as Badge, C as CancelWarning, a0 as CenterThis, b as Checkbox, c as Code, d as ConditionDetails, D as DataCard, f as DataCardFieldTypes, e as DataCardFields, g as DataTab, h as DeleteWarning, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, $ as FlexColumn, _ as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a2 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a1 as Overlay, S as SectionTitle, O as Segment, P as SkeletonLoader, Q as Status, R as Stepper, a3 as TableContainer, a4 as TableTitleWrap, a5 as TableWrap, U as Text, V as TextArea, W as Toggle, T as ToggleCodeComponent, X as Tooltip, Y as TraceLoader, Z as WarningModal } from './index-D6cZdmUs.js';
 import React, { Component, createElement, createContext } from 'react';
 import Theme from './theme.js';
 import './types.js';
-import './index-DYEcdkUF.js';
+import './index-IvGLauAo.js';
 import 'styled-components';
-import './index-CYn62h8x.js';
+import './index-CKtl8KxE.js';
 import './index-BGlk5VhF.js';
-import './index-9ObpINp4.js';
+import './index-DM8CZWtL.js';
 import './index-BZS1ijMm.js';
 import './index-D_Qn2U89.js';
-import './index-CJKFedQi.js';
-import './index-Db_ZDrEr.js';
-import './useTransition-CFmm4scp.js';
+import './index-lL1o2K_5.js';
+import './index-CLOUNx6Z.js';
+import './useTransition-hWYVBuSi.js';
 import 'react-dom';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';

package/lib/constants.js

@@ -1,11 +1,11 @@
-export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-CJKFedQi.js';
+export { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS, M as MONITORS_OPTIONS } from './index-lL1o2K_5.js';
 export { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
 import './types.js';
-import './index-Db_ZDrEr.js';
+import './index-CLOUNx6Z.js';
 import './index-BGlk5VhF.js';
 import 'react';
 import './theme.js';
-import './index-DYEcdkUF.js';
+import './index-IvGLauAo.js';
 import 'styled-components';
 
 const TOKEN_ABOUT_TO_EXPIRE = 604800000; // 7 days in milliseconds

package/lib/containers/data-flow-actions-menu/filters/index.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
 interface Props {
-    namespaces: {
-        name: string;
-    }[];
 }
 export declare const Filters: React.FC<Props>;
 export {};

package/lib/containers/data-flow-actions-menu/index.d.ts

@@ -1,9 +1,6 @@
 import React from 'react';
 import { EntityTypes } from '@/types';
 interface DataFlowActionsMenuProps {
-    namespaces: {
-        name: string;
-    }[];
     addEntity?: EntityTypes;
 }
 declare const DataFlowActionsMenu: React.FC<DataFlowActionsMenuProps>;

package/lib/containers/dropdowns/namespace-dropdown/index.d.ts

@@ -1,9 +1,6 @@
 import { type FC } from 'react';
 import { type DropdownProps } from '@/components';
 interface NamespaceDropdownProps {
-    namespaces: {
-        name: string;
-    }[];
     title?: string;
     value?: DropdownProps['options'];
     onSelect: (val: DropdownProps['options'][0]) => void;

package/lib/containers/source-modal/index.d.ts

@@ -3,11 +3,9 @@ import { type Namespace, type PersistSources } from '@/types';
 import { type SourceSelectionFormProps } from '../source-selection-form';
 interface SourceModalProps {
     componentType?: SourceSelectionFormProps['componentType'];
-    namespaces: Namespace[];
-    namespace?: Namespace;
-    namespacesLoading: boolean;
     selectedNamespace: string;
     setSelectedNamespace: Dispatch<SetStateAction<string>>;
+    namespace?: Namespace;
     persistSources: PersistSources;
 }
 declare const SourceModal: FC<SourceModalProps>;

package/lib/containers/source-selection-form/fast/list/index.d.ts

@@ -2,7 +2,6 @@ import { type FC } from 'react';
 import type { UseSourceSelectionFormData } from '@/hooks';
 interface ListProps extends UseSourceSelectionFormData {
     isModal?: boolean;
-    namespacesLoading: boolean;
     selectedNamespace: string;
     onSelectNamespace: (namespace: string) => void;
 }

package/lib/containers/source-selection-form/index.d.ts

@@ -4,11 +4,9 @@ import type { AvailableSourcesByNamespace, NamespaceSelectionFormData, SourceSel
 interface SourceSelectionFormProps {
     componentType: 'SIMPLE' | 'FAST';
     isModal?: boolean;
-    namespaces: Namespace[];
-    namespace?: Namespace;
-    namespacesLoading: boolean;
     selectedNamespace: string;
     onSelectNamespace: (namespace: string) => void;
+    namespace?: Namespace;
 }
 interface SourceSelectionFormRef {
     getFormValues: () => {

package/lib/containers/source-selection-form/simple/controls/index.d.ts

@@ -1,9 +1,7 @@
 import { type FC } from 'react';
-import type { Namespace } from '@/types';
 import type { UseSourceSelectionFormData } from '@/hooks';
 interface ControlsProps extends UseSourceSelectionFormData {
     isModal?: boolean;
-    namespaces: Namespace[];
     selectedNamespace: string;
     onSelectNamespace: (namespace: string) => void;
 }

package/lib/containers/source-selection-form/simple/list/index.d.ts

@@ -2,7 +2,6 @@ import { type FC } from 'react';
 import type { UseSourceSelectionFormData } from '@/hooks';
 interface ListProps extends UseSourceSelectionFormData {
     isModal?: boolean;
-    namespacesLoading: boolean;
     selectedNamespace: string;
 }
 declare const List: FC<ListProps>;

package/lib/containers/table-cell-conditions/index.d.ts

@@ -2,6 +2,7 @@ import { type FC } from 'react';
 import { type Condition } from '@/types';
 interface TableCellConditionsProps {
     conditions: Condition[];
+    id: string;
 }
 declare const TableCellConditions: FC<TableCellConditionsProps>;
 export { TableCellConditions, type TableCellConditionsProps };

package/lib/containers.js

@@ -1,24 +1,24 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, 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-CJKFedQi.js';
+import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-lL1o2K_5.js';
 import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-C_0J5P9M.js';
 import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, 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, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 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-zMKRaKMY.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-DYEcdkUF.js';
+import { f as DataCardFieldTypes, 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, a3 as TableContainer, a4 as TableTitleWrap, r as IconTitleBadge, a5 as TableWrap, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, $ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a6 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-D6cZdmUs.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, j as getEntityId, i as useSetupStore, u as useDarkMode } from './index-IvGLauAo.js';
 import Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-9ObpINp4.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-Db_ZDrEr.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BnlRp8m3.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-CFmm4scp.js';
+import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-DM8CZWtL.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-DH2zLaey.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-CLOUNx6Z.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-R_uK7F7W.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-hWYVBuSi.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-CYn62h8x.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-BtuW12KL.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CKtl8KxE.js';
+import { f as filterActions, g as getConditionsBooleans, k as getEntityLabel, j as getEntityIcon, s as sleep$1, m as getPlatformIcon, n as getPlatformLabel, d as formatBytes, h as getContainersIcons, o as getValueForRange, i as getDestinationIcon, b as filterSources, a as filterDestinations, c as compareCondition, l as getMetricForEntity, p as getWorkloadId, e as getContainersInstrumentedCount, q as isOverTime } from './index-DiEc-llU.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
-import { R as RulesIcon, S as SourcesIcon, A as ActionsIcon, D as DestinationsIcon } from './index-BjJpYtF1.js';
+import { R as RulesIcon, W as SourcesIcon, y as ActionsIcon, z as DestinationsIcon } from './index-DB8Djrsy.js';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
 import 'babel-runtime/helpers/classCallCheck';
@@ -643,20 +643,27 @@ const buildSpecCell$1 = (action) => {
     return str;
 };
 
-const TableCellConditions = ({ conditions }) => {
+const TableCellConditions = ({ conditions, id }) => {
     const errors = useMemo(() => conditions?.filter(({ status }) => status === StatusType.Error) || [], [conditions]);
     const warnings = useMemo(() => conditions?.filter(({ status }) => status === StatusType.Warning) || [], [conditions]);
     const disableds = useMemo(() => conditions?.filter(({ status }) => status === OtherStatus.Disabled) || [], [conditions]);
     const isLoading = useMemo(() => !conditions?.length || !!conditions?.find(({ status }) => status === OtherStatus.Loading), [conditions]);
-    return (React.createElement("div", { style: { lineHeight: 1 } }, errors.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: errors })) : warnings.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: warnings })) : disableds.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: disableds })) : isLoading ? (React.createElement(Status, { status: OtherStatus.Loading, title: OtherStatus.Loading, withBorder: true, withIcon: true })) : (React.createElement(Status, { status: StatusType.Success, title: StatusType.Success, withBorder: true, withIcon: true }))));
+    const conditionsToShow = errors.length > 0 ? errors : warnings.length > 0 ? warnings : disableds.length > 0 ? disableds : [];
+    if (conditionsToShow.length > 0) {
+        return (React.createElement("div", { style: { lineHeight: 1 } },
+            React.createElement(ConditionsStatuses, { conditions: conditionsToShow, id: id })));
+    }
+    const elseStatus = isLoading ? OtherStatus.Loading : StatusType.Success;
+    return (React.createElement("div", { style: { lineHeight: 1 } },
+        React.createElement(Status, { status: elseStatus, title: elseStatus, withBorder: true, withIcon: true })));
 };
-const ConditionsStatuses = ({ conditions }) => {
+const ConditionsStatuses = ({ conditions, id }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(FlexRow, null, mapConditions(conditions).map(({ status, type, reason, message, lastTransitionTime }) => {
+    return (React.createElement(FlexRow, null, mapConditions(conditions).map(({ status, type, reason, message, lastTransitionTime }, i) => {
         if (status === 'loading' || status === 'disabled')
             status = StatusType.Info;
         const icon = getStatusIcon(status, theme);
-        return (React.createElement(Tooltip, { key: crypto.randomUUID(), titleIcon: icon, title: type, text: message || reason || '', timestamp: lastTransitionTime },
+        return (React.createElement(Tooltip, { key: `condition-${id}-${status}-${type}-${i}`, titleIcon: icon, title: type, text: message || reason || '', timestamp: lastTransitionTime },
             React.createElement(Status, { status: status, title: reason || type, withBorder: true, withIcon: true })));
     })));
 };
@@ -718,7 +725,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'conditions',
-                    component: () => React.createElement(TableCellConditions, { conditions: act.conditions || [] }),
+                    component: () => React.createElement(TableCellConditions, { conditions: act.conditions || [], id: act.id }),
                 },
                 {
                     columnKey: 'active-status',
@@ -1025,7 +1032,8 @@ const MonitorDropdown = ({ title = 'Monitors', value, onSelect, onDeselect, ...p
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const NamespaceDropdown = ({ namespaces, title = 'Namespace', value, onSelect, onDeselect, ...props }) => {
+const NamespaceDropdown = ({ title = 'Namespace', value, onSelect, onDeselect, ...props }) => {
+    const { namespaces } = useEntityStore();
     const options = useMemo(() => {
         const payload = [];
         namespaces?.forEach(({ name }) => {
@@ -12717,7 +12725,22 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         setSelectedSources(namespaces);
     };
     return (React.createElement(Container$i, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
-        React.createElement(DataTab, { title: title, subTitle: subTitle, icon: icon, icons: icons, iconSrc: iconSrc, iconSrcs: iconSrcs, status: status, faded: faded, monitors: monitors, isActive: isActive, withCheckbox: isSource, isChecked: sourceIndex !== -1, onCheckboxChange: onSelectSource, isCheckboxDisabled: isPending, renderActions: renderActions, onClick: () => { } }),
+        React.createElement(DataTab, { title: title, subTitle: subTitle, onClick: () => { }, renderActions: renderActions, iconProps: {
+                icon: icon,
+                icons: icons,
+                iconSrc: iconSrc,
+                iconSrcs: iconSrcs,
+            }, visualProps: {
+                status: status,
+                faded: faded,
+                monitors: monitors,
+                isActive: isActive,
+            }, checkboxProps: {
+                withCheckbox: isSource,
+                isChecked: sourceIndex !== -1,
+                onCheckboxChange: onSelectSource,
+                isCheckboxDisabled: isPending,
+            } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
@@ -13349,6 +13372,10 @@ const getNodePositions = ({ containerWidth }) => {
     const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth$1 - startX;
     const getY = (idx) => nodeHeight * ((idx || 0) + 1);
     const positions = {
+        [EntityTypes.Namespace]: {
+            x: 0,
+            y: () => 0,
+        },
         [EntityTypes.InstrumentationRule]: {
             x: startX,
             y: getY,
@@ -13378,6 +13405,7 @@ const getNodePositions = ({ containerWidth }) => {
 const { nodeWidth } = nodeConfig;
 const mapToNodeData = (entity) => {
     const { hasDisableds, priorotizedStatus } = getConditionsBooleans(entity.conditions || []);
+    const { icon, iconSrc } = getDestinationIcon(entity.destinationType.type);
     return {
         nodeWidth,
         id: entity.id,
@@ -13386,7 +13414,8 @@ const mapToNodeData = (entity) => {
         faded: hasDisableds,
         title: getEntityLabel(entity, EntityTypes.Destination, { prioritizeDisplayName: true }),
         subTitle: entity.destinationType.displayName,
-        iconSrc: entity.destinationType.imageUrl,
+        icon,
+        iconSrc,
         monitors: Object.keys(entity.exportedSignals).filter((signal) => entity.exportedSignals[signal] === true),
         raw: entity,
     };
@@ -13693,7 +13722,7 @@ const getFilterCount = (params) => {
         count++;
     return count;
 };
-const Filters$1 = ({ namespaces: namespaceItems }) => {
+const Filters$1 = () => {
     const theme = Theme.useTheme();
     const { namespaces, kinds, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
     // We need local state, because we want to keep the filters in the store only when the user clicks on apply
@@ -13735,7 +13764,7 @@ const Filters$1 = ({ namespaces: namespaceItems }) => {
         React.createElement(SelectionButton, { label: 'Filters', icon: FilterIcon, badgeLabel: filterCount, badgeFilled: !!filterCount, withBorder: true, color: 'transparent', onClick: toggleFocused }),
         React.createElement(AbsoluteContainer$1, { "$hidden": !focused },
             React.createElement(FormWrapper, null,
-                React.createElement(NamespaceDropdown, { namespaces: namespaceItems, value: filters['namespaces'], onSelect: (val) => setFilters((prev) => ({ ...prev, namespaces: [...(prev.namespaces || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, namespaces: (prev.namespaces || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
+                React.createElement(NamespaceDropdown, { value: filters['namespaces'], onSelect: (val) => setFilters((prev) => ({ ...prev, namespaces: [...(prev.namespaces || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, namespaces: (prev.namespaces || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(KindDropdown, { value: filters['kinds'], onSelect: (val) => setFilters((prev) => ({ ...prev, kinds: [...(prev.kinds || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, kinds: (prev.kinds || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(LanguageDropdown, { value: filters['languages'], onSelect: (val) => setFilters((prev) => ({ ...prev, languages: [...(prev.languages || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, languages: (prev.languages || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
                 React.createElement(MonitorDropdown, { value: filters['monitors'], onSelect: (val) => setFilters((prev) => ({ ...prev, monitors: [...(prev.monitors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, monitors: (prev.monitors || []).filter((opt) => opt.id !== val.id) })), showSearch: true, required: true, isMulti: true }),
@@ -13768,12 +13797,12 @@ const AddButton = styled(Button) `
   min-width: 160px;
   padding-right: 24px;
 `;
-const DataFlowActionsMenu = ({ namespaces, addEntity }) => {
+const DataFlowActionsMenu = ({ addEntity }) => {
     const theme = Theme.useTheme();
     const { setCurrentModal } = useModalStore();
     return (React.createElement(Container$b, null,
         React.createElement(Search, null),
-        React.createElement(Filters$1, { namespaces: namespaces }),
+        React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
             React.createElement(AddButton, { "data-id": `add-${addEntity}`, onClick: () => setCurrentModal(addEntity) },
                 React.createElement(PlusIcon$1, { fill: theme.colors.primary }),
@@ -14041,6 +14070,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
     if (!thisItem)
         return null;
     const thisOptionType = categories.map(({ items }) => items.filter(({ type }) => type === thisItem.destinationType.type)).filter((arr) => !!arr.length)?.[0]?.[0];
+    const { icon, iconSrc } = getDestinationIcon(thisOptionType.type);
     const handleEdit = (bool) => {
         setIsEditing(typeof bool === 'boolean' ? bool : true);
     };
@@ -14066,7 +14096,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name || thisItem.destinationType.displayName, iconSrc: thisItem.destinationType.imageUrl, isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel, isLastItem: destinations.length === 1 }, isEditing ? (React.createElement(FormContainer$2, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name || thisItem.destinationType.displayName, icon: icon, iconSrc: iconSrc, isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel, isLastItem: destinations.length === 1 }, isEditing ? (React.createElement(FormContainer$2, null,
         React.createElement(DestinationForm, { isUpdate: true, categoryItem: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -14087,7 +14117,16 @@ const DestinationsList = ({ items, setSelectedItem }) => {
     return items.map((category) => {
         return (React.createElement(ListsWrapper$1, { key: `category-${category.name}` },
             React.createElement(SectionTitle, { size: 'small', title: capitalizeFirstLetter(category.name), description: category.description }),
-            category.items.map((item, idx) => (React.createElement(DataTab, { key: `select-destination-${item.type}-${idx}`, "data-id": `select-destination-${item.type}`, title: item.displayName, iconSrc: item.imageUrl, hoverText: 'Select', monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported), monitorsWithLabels: true, onClick: () => setSelectedItem(item) })))));
+            category.items.map((item, idx) => {
+                const { icon, iconSrc } = getDestinationIcon(item.type);
+                return (React.createElement(DataTab, { key: `select-destination-${item.type}-${idx}`, "data-id": `select-destination-${item.type}`, title: item.displayName, hoverText: 'Select', onClick: () => setSelectedItem(item), iconProps: {
+                        icon,
+                        iconSrc,
+                    }, visualProps: {
+                        monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported),
+                        monitorsWithLabels: true,
+                    } }));
+            })));
     });
 };
 
@@ -14101,7 +14140,16 @@ const PotentialDestinationsList = ({ items, setSelectedItem }) => {
         return null;
     return (React.createElement(ListsWrapper, null,
         React.createElement(SectionTitle, { size: 'small', icon: OdigosLogo, title: 'Detected by Odigos', description: 'Odigos detects destinations for which automatic connection is available. All data will be filled out automatically.' }),
-        items.map((item, idx) => (React.createElement(DataTab, { key: `select-potential-destination-${item.type}-${idx}`, "data-id": `select-potential-destination-${item.type}`, title: item.displayName, iconSrc: item.imageUrl, hoverText: 'Select', monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported), monitorsWithLabels: true, onClick: () => setSelectedItem(item) })))));
+        items.map((item, idx) => {
+            const { icon, iconSrc } = getDestinationIcon(item.type);
+            return (React.createElement(DataTab, { key: `select-potential-destination-${item.type}-${idx}`, "data-id": `select-potential-destination-${item.type}`, title: item.displayName, hoverText: 'Select', onClick: () => setSelectedItem(item), iconProps: {
+                    icon,
+                    iconSrc,
+                }, visualProps: {
+                    monitors: Object.keys(item.supportedSignals).filter((signal) => item.supportedSignals[signal].supported),
+                    monitorsWithLabels: true,
+                } }));
+        })));
 };
 
 const Container$9 = styled.div `
@@ -14223,9 +14271,8 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                 value: formData.name,
             });
             const storedDestination = {
-                type: selectedItem?.type || '',
-                displayName: selectedItem?.displayName || '',
-                imageUrl: selectedItem?.imageUrl || '',
+                type: selectedItem.type,
+                displayName: selectedItem.displayName,
                 exportedSignals: formData.exportedSignals,
                 destinationTypeDetails,
                 category: '', // Could be handled in a more dynamic way if needed
@@ -14284,12 +14331,22 @@ const ConfiguredList = () => {
     const { configuredDestinations } = useSetupStore();
     return (React.createElement(Container$7, null, configuredDestinations.map(({ stored }, idx) => (React.createElement(ListItem$1, { key: `selected-destination-${stored.type}-${idx}`, "data-id": `selected-destination-${stored.type}`, item: stored, isLastItem: configuredDestinations.length === 1 })))));
 };
-const ListItem$1 = ({ item, isLastItem, ...props }) => {
+const ListItem$1 = ({ item, isLastItem }) => {
     const { removeConfiguredDestination } = useSetupStore();
     const [deleteWarning, setDeleteWarning] = useState(false);
+    const { icon, iconSrc } = getDestinationIcon(item.type);
     return (React.createElement(React.Fragment, null,
-        React.createElement(DataTab, { title: item.displayName, iconSrc: item.imageUrl, monitors: Object.keys(item.exportedSignals).filter((signal) => item.exportedSignals[signal] === true), monitorsWithLabels: true, withExtend: true, renderExtended: () => React.createElement(DataCardFields, { data: item.destinationTypeDetails }), renderActions: () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
-                React.createElement(TrashIcon, null))), ...props }),
+        React.createElement(DataTab, { title: item.displayName, iconProps: {
+                icon,
+                iconSrc,
+            }, visualProps: {
+                monitors: Object.keys(item.exportedSignals).filter((signal) => item.exportedSignals[signal] === true),
+                monitorsWithLabels: true,
+            }, extendableProps: {
+                withExtend: true,
+                renderExtended: () => React.createElement(DataCardFields, { data: item.destinationTypeDetails }),
+            }, renderActions: () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
+                React.createElement(TrashIcon, null))) }),
         React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.displayName || item.type, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) })));
 };
 
@@ -14347,6 +14404,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
     const filtered = useMemo(() => filterDestinations(destinations, filters), [destinations, filters]);
     const rows = useMemo(() => filtered.map((dest) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(dest.conditions || []);
+        const { icon, iconSrc } = getDestinationIcon(dest.destinationType.type);
         return {
             status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
@@ -14357,7 +14415,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
             cells: [
                 {
                     columnKey: 'icon',
-                    component: () => React.createElement(IconWrapped, { src: dest.destinationType.imageUrl }),
+                    component: () => React.createElement(IconWrapped, { icon: icon, src: iconSrc }),
                 },
                 {
                     columnKey: 'name',
@@ -14375,7 +14433,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'conditions',
-                    component: () => React.createElement(TableCellConditions, { conditions: dest.conditions || [] }),
+                    component: () => React.createElement(TableCellConditions, { conditions: dest.conditions || [], id: dest.id }),
                 },
                 {
                     columnKey: 'signals',
@@ -15348,9 +15406,10 @@ const NoDataFoundWrapper$1 = styled.div `
   max-height: calc(100vh - 360px);
   overflow-y: auto;
 `;
-const List$1 = ({ isModal = false, filterNamespaces, filterSources, namespacesLoading, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, onSelectAll, }) => {
+const List$1 = ({ isModal = false, filterNamespaces, filterSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, onSelectAll, }) => {
     const theme = Theme.useTheme();
     const namespaces = filterNamespaces();
+    const { namespacesLoading } = useEntityStore();
     if (!namespaces.length) {
         return React.createElement(NoDataFoundWrapper$1, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 2 }) : React.createElement(NoDataFound, { title: 'No namespaces found' }));
     }
@@ -15467,7 +15526,8 @@ const NoDataFoundWrapper = styled.div `
   max-height: calc(100vh - 360px);
   overflow-y: auto;
 `;
-const List = ({ isModal = false, namespacesLoading, selectedNamespace, selectedSources, onSelectSource, filterSources, }) => {
+const List = ({ isModal = false, selectedNamespace, selectedSources, onSelectSource, filterSources, }) => {
+    const { namespacesLoading } = useEntityStore();
     const sources = selectedSources[selectedNamespace] || [];
     if (!sources.length) {
         return React.createElement(NoDataFoundWrapper, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 2 }) : React.createElement(NoDataFound, { title: 'No sources found' }));
@@ -15501,7 +15561,7 @@ const ToggleWrapper = styled.div `
   align-items: center;
   gap: 32px;
 `;
-const Controls = ({ namespaces, selectedNamespace, onSelectNamespace, selectedSources, onSelectAll, selectedFutureApps, onSelectFutureApps, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly, }) => {
+const Controls = ({ selectedNamespace, onSelectNamespace, selectedSources, onSelectAll, selectedFutureApps, onSelectFutureApps, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly, }) => {
     const futureApps = selectedFutureApps[selectedNamespace] || false;
     const sources = selectedSources[selectedNamespace] || [];
     const selectedAppsCount = sources.filter(({ selected }) => selected).length;
@@ -15509,7 +15569,7 @@ const Controls = ({ namespaces, selectedNamespace, onSelectNamespace, selectedSo
         React.createElement(SectionTitle, { title: 'Choose sources', description: "Apps will be automatically instrumented, and data will be sent to the relevant APM's destinations." }),
         React.createElement(FlexContainer, { style: { marginTop: 24 } },
             React.createElement(Input, { placeholder: 'Search for sources', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) }),
-            React.createElement(NamespaceDropdown, { namespaces: namespaces, title: '', value: selectedNamespace ? [{ value: selectedNamespace, id: selectedNamespace }] : [], onSelect: ({ id }) => !!id && onSelectNamespace(id), onDeselect: ({ id }) => !!id && onSelectNamespace(id) })),
+            React.createElement(NamespaceDropdown, { title: '', value: selectedNamespace ? [{ value: selectedNamespace, id: selectedNamespace }] : [], onSelect: ({ id }) => !!id && onSelectNamespace(id), onDeselect: ({ id }) => !!id && onSelectNamespace(id) })),
         React.createElement(Divider, { margin: '16px 0' }),
         React.createElement(FlexContainer, null,
             React.createElement(FlexContainer, null,
@@ -15528,8 +15588,8 @@ const Simple = (props) => {
         React.createElement(List, { ...props })));
 };
 
-const SourceSelectionForm = forwardRef(({ componentType, isModal, namespaces, namespace, namespacesLoading, selectedNamespace, onSelectNamespace }, ref) => {
-    const formState = useSourceSelectionFormData({ namespaces, namespace, selectedNamespace, onSelectNamespace });
+const SourceSelectionForm = forwardRef(({ componentType, isModal, selectedNamespace, onSelectNamespace, namespace }, ref) => {
+    const formState = useSourceSelectionFormData({ selectedNamespace, onSelectNamespace, namespace });
     const { recordedInitialSources, getApiSourcesPayload, getApiFutureAppsPayload } = formState;
     useImperativeHandle(ref, () => ({
         getFormValues: () => ({
@@ -15540,15 +15600,15 @@ const SourceSelectionForm = forwardRef(({ componentType, isModal, namespaces, na
     }));
     switch (componentType) {
         case 'SIMPLE':
-            return React.createElement(Simple, { isModal: isModal, namespaces: namespaces, namespacesLoading: namespacesLoading, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, ...formState });
+            return React.createElement(Simple, { isModal: isModal, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, ...formState });
         case 'FAST':
-            return React.createElement(Fast, { isModal: isModal, namespacesLoading: namespacesLoading, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, ...formState });
+            return React.createElement(Fast, { isModal: isModal, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, ...formState });
         default:
             return null;
     }
 });
 
-const SourceModal = ({ componentType = 'FAST', namespaces, namespace, namespacesLoading, selectedNamespace, setSelectedNamespace, persistSources }) => {
+const SourceModal = ({ componentType = 'FAST', selectedNamespace, setSelectedNamespace, namespace, persistSources }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.Source;
     const onSelectNamespace = (ns) => {
@@ -15574,7 +15634,7 @@ const SourceModal = ({ componentType = 'FAST', namespaces, namespace, namespaces
                     onClick: handleSubmit,
                 },
             ] }) },
-        React.createElement(SourceSelectionForm, { ref: formRef, componentType: componentType, isModal: true, namespaces: namespaces, namespace: namespace, namespacesLoading: namespacesLoading, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace })));
+        React.createElement(SourceSelectionForm, { ref: formRef, componentType: componentType, isModal: true, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, namespace: namespace })));
 };
 
 const columns = [
@@ -15646,7 +15706,8 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         setSelectedSources(payload);
     }, [selectedSources]);
     const rows = useMemo(() => filtered.map((source) => {
-        const id = { namespace: source.namespace, name: source.name, kind: source.kind };
+        const id = getWorkloadId(source);
+        const idString = JSON.stringify(id);
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(source.conditions || []);
         const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
         const isChecked = !!selectedSources[id.namespace]?.find((x) => x.namespace === id.namespace && x.name === id.name && x.kind === id.kind);
@@ -15662,7 +15723,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, { icons: getContainersIcons(source.containers) }))),
+                        React.createElement(IconGroup, { icons: getContainersIcons(source.containers), id: idString }))),
                 },
                 {
                     columnKey: 'name',
@@ -15685,7 +15746,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'conditions',
-                    component: () => React.createElement(TableCellConditions, { conditions: source.conditions || [] }),
+                    component: () => React.createElement(TableCellConditions, { conditions: source.conditions || [], id: idString }),
                 },
                 {
                     columnKey: 'containers',