@odigos/ui-kit 0.0.49 → 0.0.51

package/lib/containers.js

@@ -1,21 +1,21 @@
-import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback } from 'react';
+import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { l as DISPLAY_TITLES, T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, B as BUTTON_TEXTS, c as useEntityStore, A as ACTION_OPTIONS, m as getActionIcon, f as useModalStore, F as FORM_ALERTS, d as useFilterStore, M as MONITORS_OPTIONS, o as getInstrumentationRuleIcon, a as useDataStreamStore, e as useInstrumentStore, n as getEntityId, S as STORAGE_KEYS, k as DEFAULT_DATA_STREAM_NAME, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, i as useSelectedStore, u as useDarkMode } from './index-Bw7RE2T2.js';
+import { m as DISPLAY_TITLES, T as Theme, i as usePendingStore, h as useNotificationStore, c as useDrawerStore, B as BUTTON_TEXTS, d as useEntityStore, A as ACTION_OPTIONS, n as getActionIcon, g as useModalStore, F as FORM_ALERTS, e as useFilterStore, M as MONITORS_OPTIONS, p as getInstrumentationRuleIcon, b as useDataStreamStore, f as useInstrumentStore, o as getEntityId, S as STORAGE_KEYS, l as DEFAULT_DATA_STREAM_NAME, k as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, j as useSelectedStore, v as ImageErrorIcon, a as useDarkMode } from './index-BC03UmY5.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind } from './types.js';
-import { j as DataCardFieldTypes, v as FieldLabel, C as Checkbox, u as FieldError, K as Input, P as InputTable, R as KeyValueInputsList, O as InputList, a5 as Text, a0 as Segment, $ as SectionTitle, m as DocsButton, V as MonitorsCheckboxes, a6 as TextArea, o as Drawer, h as ConditionDetails, D as DataCard, ac as FlexColumn, U as Modal, X as NavigationButtons, ag as ModalBody, Z as NotificationNote, e as AutocompleteInput, l as Divider, a3 as Status, ab as FlexRow, a8 as Tooltip, z as IconWrapped, W as MonitorsIcons, ah as TableContainer, ai as TableTitleWrap, y as IconTitleBadge, aj as TableWrap, Q as InteractiveTable, ad as CenterThis, Y as NoDataFound, a9 as TraceLoader, f as Badge, s as ExtendArrow, ae as VerticalScroll, a1 as SelectionButton, d as Button, r as Dropdown, n as nodeConfig, ak as useNodesState, al as useEdgesState, F as Flow, am as applyNodeChanges, a7 as Toggle, I as IconButton, A as AddButton, t as FadeLoader, k as DataTab, a4 as Stepper, i as DataCardFields, an as MarkerType, G as IconsNav, x as IconGroup } from './index-C1V7D2ey.js';
+import { l as DataCardFieldTypes, z as FieldLabel, h as Checkbox, y as FieldError, U as Input, W as InputTable, Y as KeyValueInputsList, V as InputList, ad as Text, a7 as Segment, a6 as SectionTitle, r as DocsButton, _ as MonitorsCheckboxes, ae as TextArea, s as Drawer, j as ConditionDetails, D as DataCard, ak as FlexColumn, Z as Modal, a0 as NavigationButtons, ao as ModalBody, a2 as NotificationNote, f as AutocompleteInput, q as Divider, aa as Status, aj as FlexRow, ag as Tooltip, O as IconWrapped, $ as MonitorsIcons, ap as TableContainer, aq as TableTitleWrap, K as IconTitleBadge, ar as TableWrap, X as InteractiveTable, al as CenterThis, a1 as NoDataFound, ah as TraceLoader, g as Badge, w as ExtendArrow, am as VerticalScroll, a8 as SelectionButton, e as Button, v as Dropdown, n as nodeConfig, as as useNodesState, at as useEdgesState, F as Flow, au as applyNodeChanges, a3 as Popup, af as Toggle, I as IconButton, A as AddButton, x as FadeLoader, o as DataTab, ab as Stepper, k as DataCardFields, av as MarkerType, Q as IconsNav, C as CopyText, p as DescribeRow, P as PodContainer, d as SourceContainer, J as IconGroup, a4 as PopupForm } from './index-1-F2f04H.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BnvrwbRB.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-DxR7e2Cq.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-CeDmxXUE.js';
-import { u as useActionFormData, d as useSessionStorage, b as useDataStreamFormData, c as useDestinationFormData, a as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-C5VMfWEf.js';
-import { e as useKeyDown, f as useOnClickOutside, a as useContainerSize, u as useClickNode, d as useInstrumentationRuleFormData, h as useTransition, g as useTimeAgo, b as useCopy } from './useTransition-mupXsbop.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, A as ArrowIcon, P as PlusIcon, a as CopyIcon, i as CrossIcon } from './index-CkTdd3MS.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-DOU0EdZP.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-DsEoqSQn.js';
-import { f as filterActions, m as getEntityLabel, l as getEntityIcon, v as sleep, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, i as getContainersInstrumentedCount, t as isOverTime } from './index-w9lkC6fb.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-H8TwBQHm.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RetryIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-LgzkJ05H.js';
+import { u as useActionFormData, d as useSessionStorage, b as useDataStreamFormData, c as useDestinationFormData, a as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-CwggurLH.js';
+import { e as useKeyDown, f as useOnClickOutside, a as useContainerSize, u as useClickNode, g as usePopup, d as useInstrumentationRuleFormData, i as useTransition, h as useTimeAgo, b as useCopy, c as useGenericForm } from './useTransition-DmHfJSEP.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, A as ArrowIcon, P as PlusIcon, a as CopyIcon } from './index-CyHOJpMl.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-Coq_Nro0.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter, p as parseBooleanFromString } from './index-Dbs7YARA.js';
+import { f as filterActions, m as getEntityLabel, l as getEntityIcon, w as sleep, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, t as hasUnhealthyInstances, i as getContainersInstrumentedCount, u as isOverTime } from './index-CPMIZB66.js';
 import { m as mapExportedSignals } from './index-BlZKWuxe.js';
-import { N as NoteBackToSummary, E as EditButton } from './index-CeBxw8J4.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-4BmryHdH.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-ZTzxu5fz.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-CMsBAVAn.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -1032,7 +1032,7 @@ const PushToEnd$1 = styled.div `
 const RelativeContainer$3 = styled.div `
   position: relative;
 `;
-const AbsoluteContainer$3 = styled.div `
+const AbsoluteContainer = styled.div `
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
@@ -1070,7 +1070,7 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
             React.createElement(Title$2, null, selected?.name || selected?.id || 'no platform'),
             withSelect && (React.createElement(PushToEnd$1, null,
                 React.createElement(ExtendArrow, { extend: isOpen, align: 'right' })))),
-        isOpen && withSelect && (React.createElement(AbsoluteContainer$3, null,
+        isOpen && withSelect && (React.createElement(AbsoluteContainer, null,
             React.createElement(HeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
             React.createElement(VerticalScroll, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === StatusType.Success ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
@@ -1873,7 +1873,7 @@ const RelativeContainer$2 = styled.div `
   position: relative;
   max-width: 200px;
 `;
-const AbsoluteContainer$2 = styled.div `
+styled.div `
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
@@ -1947,8 +1947,6 @@ const buildSearchResults = ({ instrumentationRules, sources, actions, destinatio
 const HorizontalScroll = styled.div `
   display: flex;
   align-items: center;
-  padding: 12px;
-  border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
   overflow-x: scroll;
 `;
 const SearchResults = ({ searchText, onClose }) => {
@@ -1956,6 +1954,13 @@ const SearchResults = ({ searchText, onClose }) => {
     const { onClickNode } = useClickNode();
     const { selectedStreamName } = useDataStreamStore();
     const { sources, destinations, actions, instrumentationRules } = useEntityStore();
+    const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup();
+    useEffect(() => {
+        if (!popupOpen) {
+            handlePosition(0, 50);
+            setPopupOpen(true);
+        }
+    }, [popupOpen]);
     const [selectedCategory, setSelectedCategory] = useState('all');
     const { categories, searchResults } = useMemo(() => buildSearchResults({
         instrumentationRules,
@@ -1966,21 +1971,19 @@ const SearchResults = ({ searchText, onClose }) => {
         selectedCategory,
     }), [instrumentationRules, sources, actions, destinations, selectedStreamName, searchText, selectedCategory]);
     if (!searchResults.length) {
-        return (React.createElement(AbsoluteContainer$2, { "$padding": '12px' },
+        return (React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left },
             React.createElement(NoDataFound, null)));
     }
-    return (React.createElement(AbsoluteContainer$2, null,
-        React.createElement(HorizontalScroll, { style: { borderBottom: `1px solid ${!searchResults.length ? 'transparent' : theme.colors.border}` } }, categories.map(({ category, label, count }) => !!count && (React.createElement(SelectionButton, { key: `category-select-${category}`, label: label, badgeLabel: count, isSelected: selectedCategory === category, onClick: () => setSelectedCategory(category) })))),
-        searchResults.map(({ category, label, entities }, catIdx) => !!entities.length && (React.createElement(Fragment, { key: `category-list-${category}` },
-            React.createElement(VerticalScroll, { style: { maxHeight: selectedCategory !== 'all' ? '240px' : '140px' } },
-                React.createElement(Text, { size: 12, family: 'secondary', color: theme.text.darker_grey, style: { marginLeft: '16px' } }, label),
-                entities.map((item, entIdx) => (React.createElement(SelectionButton, { key: `entity-${catIdx}-${entIdx}`, icon: getEntityIcon(category), label: getEntityLabel(item, category, { extended: true }), onClick: () => {
-                        const id = getEntityId(item);
-                        // @ts-expect-error - expects an event, but we don't need it, so null is fine, also expects full node, we only need the given values
-                        onClickNode(null, { data: { type: category, id } });
-                        onClose();
-                    }, style: { width: '100%', justifyContent: 'flex-start' }, color: 'transparent' })))),
-            React.createElement(Divider, { thickness: catIdx === searchResults.length - 1 ? 0 : 1, length: '90%', margin: '8px auto' }))))));
+    return (React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, maxWidth: '420px', header: React.createElement(HorizontalScroll, null, categories.map(({ category, label, count }) => !!count && (React.createElement(SelectionButton, { key: `category-select-${category}`, label: label, badgeLabel: count, isSelected: selectedCategory === category, onClick: () => setSelectedCategory(category) })))) }, searchResults.map(({ category, label, entities }, catIdx) => !!entities.length && (React.createElement(Fragment, { key: `category-list-${category}` },
+        React.createElement(VerticalScroll, { style: { maxHeight: selectedCategory !== 'all' ? '240px' : '140px', padding: '12px 0' } },
+            React.createElement(Text, { size: 12, family: 'secondary', color: theme.text.darker_grey, style: { marginLeft: '16px' } }, label),
+            entities.map((item, entIdx) => (React.createElement(SelectionButton, { key: `entity-${catIdx}-${entIdx}`, icon: getEntityIcon(category), label: getEntityLabel(item, category, { extended: true }), onClick: () => {
+                    const id = getEntityId(item);
+                    // @ts-expect-error - expects an event, but we don't need it, so null is fine, also expects full node, we only need the given values
+                    onClickNode(null, { data: { type: category, id } });
+                    onClose();
+                }, style: { width: '100%', justifyContent: 'flex-start' }, color: 'transparent' })))),
+        React.createElement(Divider, { thickness: catIdx === searchResults.length - 1 ? 0 : 1, length: '90%', margin: '8px auto' }))))));
 };
 
 const Search = () => {
@@ -2007,12 +2010,6 @@ const FormWrapper = styled.div `
 const ToggleWrapper = styled.div `
   padding: 12px 6px 6px 6px;
 `;
-const Actions = styled.div `
-  display: flex;
-  align-items: center;
-  padding: 12px;
-  border-top: ${({ theme }) => `1px solid ${theme.colors.border}`};
-`;
 const ActionButton$1 = styled(Button) `
   font-size: 14px;
   ${({ $color }) => `color: ${$color};`}
@@ -2037,45 +2034,51 @@ const Filters$1 = () => {
     const { selectedStreamName } = useDataStreamStore();
     const { getItemSS, setItemSS, removeItemSS } = useSessionStorage();
     const { namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors, setAll, clearAll, getEmptyState } = useFilterStore();
+    const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup();
     const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
     // We need local state, because we want to keep the filters in the store only when the user clicks on apply
     const [filters, setFilters] = useState({ namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors });
     const [filterCount, setFilterCount] = useState(getFilterCount(filters));
-    const [focused, setFocused] = useState(false);
-    const toggleFocused = () => setFocused((prev) => !prev);
     useEffect(() => {
         const storedFilters = getItemSS(STORAGE_KEYS.OVERVIEW_FILTERS, getEmptyState());
         setAll(storedFilters);
     }, []);
     useEffect(() => {
-        if (!focused) {
+        if (!popupOpen) {
             const payload = { namespaces: namespaceFilters, kinds, monitors, languages, errors, onlyErrors };
             setFilters(payload);
             setFilterCount(getFilterCount(payload));
         }
-    }, [focused, namespaceFilters, kinds, monitors, errors, onlyErrors]);
+    }, [popupOpen, namespaceFilters, kinds, monitors, errors, onlyErrors]);
     const onApply = () => {
         setItemSS(STORAGE_KEYS.OVERVIEW_FILTERS, filters);
         setAll(filters);
         setFilterCount(getFilterCount(filters));
-        setFocused(false);
+        setPopupOpen(false);
     };
     const onReset = () => {
         removeItemSS(STORAGE_KEYS.OVERVIEW_FILTERS);
         clearAll();
         setFilters(getEmptyState());
         setFilterCount(0);
-        setFocused(false);
+        setPopupOpen(false);
     };
     const onCancel = () => {
-        setFocused(false);
+        setPopupOpen(false);
     };
     const ref = useRef(null);
     useOnClickOutside(ref, onCancel);
-    useKeyDown({ key: 'Escape', active: focused }, onCancel);
+    useKeyDown({ key: 'Escape', active: popupOpen }, onCancel);
     return (React.createElement(RelativeContainer$2, { ref: ref },
-        React.createElement(SelectionButton, { label: 'Filters', icon: FilterIcon, badgeLabel: filterCount, badgeFilled: !!filterCount, withBorder: true, color: 'transparent', onClick: toggleFocused }),
-        React.createElement(AbsoluteContainer$2, { "$hidden": !focused },
+        React.createElement(SelectionButton, { label: 'Filters', icon: FilterIcon, badgeLabel: filterCount, badgeFilled: !!filterCount, withBorder: true, color: 'transparent', onClick: () => {
+                handlePosition(0, 50);
+                setPopupOpen(true);
+            } }),
+        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, width: '420px', footer: React.createElement(FlexRow, null,
+                React.createElement(ActionButton$1, { variant: 'primary', onClick: onApply }, "Apply"),
+                React.createElement(ActionButton$1, { variant: 'secondary', onClick: onCancel }, "Cancel"),
+                React.createElement(PushRight, null,
+                    React.createElement(ActionButton$1, { variant: 'tertiary', onClick: onReset, "$color": theme.text.error }, "Reset"))) },
             React.createElement(FormWrapper, null,
                 React.createElement(NamespaceDropdown, { namespaces: namespaces, 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, { sources: sourcesByStream, 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 }),
@@ -2083,12 +2086,7 @@ const Filters$1 = () => {
                 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 }),
                 React.createElement(ToggleWrapper, null,
                     React.createElement(Toggle, { title: 'Show only sources with errors', initialValue: filters['onlyErrors'], onChange: (bool) => setFilters((prev) => ({ ...prev, errors: [], onlyErrors: bool })) })),
-                React.createElement(ErrorDropdown, { sources: sourcesByStream, value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })),
-            React.createElement(Actions, null,
-                React.createElement(ActionButton$1, { variant: 'primary', onClick: onApply }, "Apply"),
-                React.createElement(ActionButton$1, { variant: 'secondary', onClick: onCancel }, "Cancel"),
-                React.createElement(PushRight, null,
-                    React.createElement(ActionButton$1, { variant: 'tertiary', onClick: onReset, "$color": theme.text.error }, "Reset"))))));
+                React.createElement(ErrorDropdown, { sources: sourcesByStream, value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })))));
 };
 
 const Container$e = styled.div `
@@ -2162,22 +2160,9 @@ const Container$d = styled(FlexRow) `
 const Title = styled(Text) `
   text-wrap: nowrap;
 `;
-const AbsoluteContainer$1 = styled.div `
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 0;
-  z-index: 1;
-  background-color: ${({ theme }) => theme.colors.dropdown_bg};
-  border: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  border-radius: 24px;
-  width: 420px;
-`;
-const SelectionMenuHeader = styled.div `
-  border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  padding: 12px;
-`;
-const SelectionContent = styled(VerticalScroll) `
+const PopupBody$1 = styled(VerticalScroll) `
   max-height: 240px;
+  padding: 0px !important;
 `;
 const SelectionRow = styled(FlexRow) `
   width: 100%;
@@ -2188,9 +2173,7 @@ const Stretch = styled.div `
 const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const theme = Theme.useTheme();
     const { dataStreams, selectedStreamName, setSelectedStreamName } = useDataStreamStore();
-    const [popupOpen, setPopupOpen] = useState(false);
-    const containerRef = useRef(null);
-    useOnClickOutside(containerRef, () => setPopupOpen(false));
+    const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup();
     const [editOpenForDataStreamName, setEditOpenForDataStreamName] = useState('');
     const [deleteOpenForDataStreamName, setDeleteOpenForDataStreamName] = useState('');
     const [searchText, setSearchText] = useState('');
@@ -2209,7 +2192,10 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
     return (React.createElement(React.Fragment, null,
         React.createElement(RelativeContainer$1, null,
             React.createElement(Container$d, { "$gap": 0 },
-                React.createElement(Button, { variant: 'tertiary', onClick: () => setPopupOpen((prev) => !prev) },
+                React.createElement(Button, { variant: 'tertiary', onClick: () => {
+                        handlePosition(0, 50);
+                        setPopupOpen((prev) => !prev);
+                    } },
                     React.createElement(DataStreamsIcon, { fill: theme.text.info }),
                     React.createElement(Title, null,
                         "Data Stream: ",
@@ -2221,10 +2207,8 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
                         setSelectedStreamName('');
                         onClickNewDataStream();
                     }, label: BUTTON_TEXTS.NEW })),
-            popupOpen && (React.createElement(AbsoluteContainer$1, { ref: containerRef },
-                React.createElement(SelectionMenuHeader, null,
-                    React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value) })),
-                React.createElement(SelectionContent, null, rows)))),
+            React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: popupPosition.top, left: popupPosition.left, header: React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value) }) },
+                React.createElement(PopupBody$1, null, rows))),
         React.createElement(DeleteWarning, { isOpen: deleteOpenForDataStreamName !== '', name: deleteOpenForDataStreamName, onApprove: () => {
                 deleteDataStream(deleteOpenForDataStreamName);
                 setDeleteOpenForDataStreamName('');
@@ -3612,32 +3596,13 @@ const RelativeContainer = styled.div `
   position: relative;
   width: fit-content;
 `;
-const AbsoluteContainer = styled.div `
-  position: absolute;
-  top: 40px;
-  left: ${({ $left }) => $left}px;
-  z-index: 1;
-  width: 370px;
-  height: 400px;
-  background-color: ${({ theme }) => theme.colors.dropdown_bg};
-  border: 1px solid ${({ theme }) => theme.colors.border};
-  border-radius: 24px;
-  box-shadow: 0px 10px 15px -3px ${({ theme }) => theme.colors.primary}, 0px 4px 6px -2px ${({ theme }) => theme.colors.primary};
-`;
-const PopupHeader = styled.div `
-  display: flex;
-  align-items: center;
+const PopupHeader = styled(FlexRow) `
   gap: 12px;
-  padding: 12px 24px;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+  padding: 0 12px;
 `;
-const PopupBody = styled.div `
-  display: flex;
-  flex-direction: column;
+const PopupBody = styled(FlexColumn) `
   gap: 12px;
-  padding: 12px;
-  height: calc(100% - 74px);
-  border-radius: 24px;
+  max-height: 400px;
   overflow-y: auto;
 `;
 const PopupShadow = styled.div `
@@ -3663,36 +3628,29 @@ const NotificationManager = () => {
     const notifications = n.filter(({ hideFromHistory }) => !hideFromHistory);
     const unseen = notifications.filter(({ seen }) => !seen);
     const unseenCount = unseen.length;
-    const [isOpen, setIsOpen] = useState(false);
-    const [popupPosition, setPopupPosition] = useState({ left: 0 });
-    const containerRef = useRef(null);
-    useOnClickOutside(containerRef, () => {
-        if (isOpen) {
-            setIsOpen(false);
-            if (!!unseenCount)
+    const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup({
+        defaultClientHeight: 420,
+        defaultClientwidth: 400,
+        onClickOutside: () => {
+            if (unseenCount)
                 unseen.forEach(({ id }) => markAsSeen(id));
-        }
+        },
     });
     const toggleOpen = (e) => {
-        const { clientX } = e;
-        const { innerWidth } = window;
-        let left = 0;
-        if (clientX >= innerWidth / 2)
-            left = -350;
-        setPopupPosition({ left });
-        setIsOpen((prev) => !prev);
+        const { clientX, clientY } = e;
+        handlePosition(clientX, clientY);
+        setPopupOpen((prev) => !prev);
     };
-    return (React.createElement(RelativeContainer, { ref: containerRef },
-        React.createElement(IconButton, { "data-id": 'notif-manager-button', onClick: toggleOpen, tooltip: 'Notifications', withPing: !!unseenCount, pingColor: theme.colors.orange_og },
+    return (React.createElement(RelativeContainer, null,
+        React.createElement(IconButton, { onClick: toggleOpen, tooltip: 'Notifications', withPing: !!unseenCount, pingColor: theme.colors.orange_og },
             React.createElement(NotificationIcon, { size: 18 })),
-        isOpen && (React.createElement(AbsoluteContainer, { "data-id": 'notif-manager-content', "$left": popupPosition.left },
-            React.createElement(PopupHeader, null,
+        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, asPortal: true, left: popupPosition.left, maxWidth: '400px', header: React.createElement(PopupHeader, null,
                 React.createElement(Text, { size: 20 }, "Notifications"),
                 !!unseenCount && (React.createElement(NewCount, { size: 12, family: 'secondary' },
                     unseenCount,
-                    " new"))),
-            React.createElement(PopupBody, null, !notifications.length ? (React.createElement(NoDataFound, { title: 'No notifications', subTitle: '' })) : (notifications.map((notif) => React.createElement(NotificationListItem, { key: `notification-${notif.id}`, ...notif, onClick: () => setIsOpen(false) })))),
-            React.createElement(PopupShadow, null)))));
+                    " new"))) },
+            React.createElement(PopupBody, null, !notifications.length ? (React.createElement(NoDataFound, { title: 'No notifications', subTitle: '' })) : (notifications.map((notif) => React.createElement(NotificationListItem, { key: `notification-${notif.id}`, ...notif, onClick: () => setPopupOpen(false) })))),
+            React.createElement(PopupShadow, null))));
 };
 const NotifCard = styled.div `
   display: flex;
@@ -3779,117 +3737,131 @@ const buildEdges = ({ theme, nodes, serviceMap }) => {
     return edges;
 };
 
-const mapToNodeData = (entity, serviceMapEntry, isUserSource) => {
-    const { priorotizedStatus } = getConditionsBooleans(entity.conditions || []);
-    return {
-        id: entity.otelServiceName || entity.name,
-        title: getEntityLabel(entity, EntityTypes.Source, { extended: true }),
-        icons: isUserSource ? [UserIcon] : getContainersIcons(entity.containers),
-        status: priorotizedStatus,
-        serviceMapEntry,
-    };
-};
-const generatePosition = (existingPositions, containerWidth, containerHeight) => {
-    const spacing = 150; // Spacing between nodes
-    const centerX = containerWidth / 2 - 100;
-    const centerY = containerHeight / 2 - 100;
-    const padding = 50; // Optional: keep nodes away from edges
-    // True spiral grid algorithm
-    function getTrueSpiralGridOffset(n) {
-        if (n === 0)
-            return { gridX: 0, gridY: 0 };
-        let x = 0, y = 0;
-        let dx = 1, dy = 0;
-        let segmentLength = 1;
-        let segmentCount = 0;
-        let steps = 0;
-        for (let i = 1; i <= n; i++) {
-            x += dx;
-            y += dy;
-            steps++;
-            if (steps === segmentLength) {
-                steps = 0;
-                // Rotate direction left: right->up->left->down->right...
-                const temp = dx;
-                dx = -dy;
-                dy = temp;
-                segmentCount++;
-                if (segmentCount % 2 === 0) {
-                    segmentLength++;
+const generateDAGPositions = (serviceMap, containerWidth, containerHeight) => {
+    const positions = new Map();
+    const nodeSpacing = 150; // Vertical spacing between nodes
+    const layerSpacing = 200; // Horizontal spacing between layers
+    const padding = 100; // Padding from container edges
+    // Build adjacency list and calculate in-degrees for topological sorting
+    const adjacencyList = new Map();
+    const inDegrees = new Map();
+    const allServices = new Set();
+    // Initialize all services
+    serviceMap.forEach((entry) => {
+        allServices.add(entry.serviceName);
+        entry.services.forEach((target) => {
+            allServices.add(target.serviceName);
+        });
+    });
+    // Initialize adjacency list and in-degrees
+    allServices.forEach((service) => {
+        adjacencyList.set(service, []);
+        inDegrees.set(service, 0);
+    });
+    // Build the graph
+    serviceMap.forEach((entry) => {
+        entry.services.forEach((target) => {
+            adjacencyList.get(entry.serviceName)?.push(target.serviceName);
+            const currentInDegree = inDegrees.get(target.serviceName) || 0;
+            inDegrees.set(target.serviceName, currentInDegree + 1);
+        });
+    });
+    // Topological sort to determine layers
+    const layers = [];
+    const queue = [];
+    // Add all nodes with in-degree 0 to the queue
+    allServices.forEach((service) => {
+        if ((inDegrees.get(service) || 0) === 0) {
+            queue.push(service);
+        }
+    });
+    // Process nodes in topological order
+    while (queue.length > 0) {
+        const currentLayer = [];
+        const layerSize = queue.length;
+        for (let i = 0; i < layerSize; i++) {
+            const current = queue.shift();
+            currentLayer.push(current);
+            // Process neighbors
+            adjacencyList.get(current)?.forEach((neighbor) => {
+                const neighborInDegree = inDegrees.get(neighbor) || 0;
+                inDegrees.set(neighbor, neighborInDegree - 1);
+                if (neighborInDegree - 1 === 0) {
+                    queue.push(neighbor);
                 }
-            }
+            });
         }
-        return { gridX: x, gridY: y };
-    }
-    // Build a set of all possible grid positions within the container
-    const maxGridX = Math.floor((containerWidth / 2 - padding) / spacing);
-    const maxGridY = Math.floor((containerHeight / 2 - padding) / spacing);
-    const inBoundsPositions = new Set();
-    for (let gx = -maxGridX; gx <= maxGridX; gx++) {
-        for (let gy = -maxGridY; gy <= maxGridY; gy++) {
-            const x = centerX + gx * spacing;
-            const y = centerY + gy * spacing;
-            if (x >= padding && x <= containerWidth - padding && y >= padding && y <= containerHeight - padding) {
-                inBoundsPositions.add(`${gx},${gy}`);
-            }
+        if (currentLayer.length > 0) {
+            layers.push(currentLayer);
         }
     }
-    // Track used grid positions to avoid overlap
-    const usedPositions = new Set(existingPositions.map((pos) => `${Math.round((pos.x - centerX) / spacing)},${Math.round((pos.y - centerY) / spacing)}`));
-    // Find the first available spiral grid position that is in bounds and not already used
-    let n = 0;
-    while (true) {
-        const { gridX, gridY } = getTrueSpiralGridOffset(n);
-        const key = `${gridX},${gridY}`;
-        const x = centerX + gridX * spacing;
-        const y = centerY + gridY * spacing;
-        if (inBoundsPositions.has(key) && !usedPositions.has(key)) {
-            return { x, y };
-        }
-        n++;
-        // If we've exhausted all in-bounds positions, allow out-of-bounds placement
-        if (n > inBoundsPositions.size + 100) {
-            // Find the next unused spiral position, even if out of bounds
-            let m = n;
-            while (true) {
-                const { gridX: outGridX, gridY: outGridY } = getTrueSpiralGridOffset(m);
-                const outKey = `${outGridX},${outGridY}`;
-                const outX = centerX + outGridX * spacing;
-                const outY = centerY + outGridY * spacing;
-                if (!usedPositions.has(outKey)) {
-                    return { x: outX, y: outY };
-                }
-                m++;
+    // Handle any remaining nodes (cycles or isolated nodes)
+    allServices.forEach((service) => {
+        if (!layers.flat().includes(service)) {
+            if (layers.length === 0) {
+                layers.push([service]);
+            }
+            else {
+                layers[layers.length - 1].push(service);
             }
         }
-    }
+    });
+    // Calculate positions for each layer
+    layers.forEach((layer, layerIndex) => {
+        const layerX = padding + layerIndex * layerSpacing;
+        const layerHeight = (layer.length - 1) * nodeSpacing;
+        const layerStartY = (containerHeight - layerHeight) / 2;
+        layer.forEach((service, serviceIndex) => {
+            const x = layerX;
+            const y = layerStartY + serviceIndex * nodeSpacing;
+            positions.set(service, { x, y });
+        });
+    });
+    return positions;
 };
-const userSource = {
-    namespace: '',
-    name: '',
-    kind: '',
-    otelServiceName: 'user',
-    selected: true,
-    numberOfInstances: 0,
-    dataStreamNames: [],
-    containers: [],
-    conditions: [],
+
+const mapToNodeData = (serviceMapEntry, source, isUserSource) => {
+    const serviceName = serviceMapEntry?.serviceName || source?.otelServiceName || source?.name;
+    const icons = isUserSource ? [UserIcon] : getContainersIcons(source?.containers || []);
+    const { priorotizedStatus } = getConditionsBooleans(source?.conditions || []);
+    return {
+        id: serviceName,
+        title: serviceName,
+        icons: icons.length ? icons : [ImageErrorIcon],
+        status: priorotizedStatus,
+        serviceMapEntry,
+    };
 };
 const buildMapNodes = ({ sources, serviceMap, containerHeight, containerWidth }) => {
     const nodes = [];
-    const existingPositions = [];
-    if (sources.length) {
-        [userSource].concat(sources).forEach((source) => {
-            const serviceMapEntry = serviceMap.find((sm) => sm.serviceName === source.otelServiceName || sm.serviceName === source.name);
+    const dagPositions = generateDAGPositions(serviceMap, containerWidth, containerHeight);
+    if (serviceMap.length && sources.length) {
+        // first we map the service map nodes (to include services traced, but not instrumented by Odigos)
+        serviceMap.forEach((serviceMapEntry) => {
+            const source = sources.find((src) => serviceMapEntry.serviceName === src.otelServiceName || serviceMapEntry.serviceName === src.name);
+            const isUserSource = source?.otelServiceName === 'user' && !source?.namespace && !source?.name && !source?.kind;
+            nodes.push({
+                id: `${EntityTypes.Source}-${serviceMapEntry.serviceName}-${NodeTypes.MapItem}`,
+                type: NodeTypes.MapItem,
+                position: dagPositions.get(serviceMapEntry.serviceName),
+                data: mapToNodeData(serviceMapEntry, source, isUserSource),
+            });
+        });
+        // then we look for any sources that are not in the service map (to include services not traced)
+        let currentX = 10;
+        sources.forEach((source) => {
+            const serviceName = source.otelServiceName || source.name;
             const isUserSource = source.otelServiceName === 'user' && !source.namespace && !source.name && !source.kind;
-            const position = generatePosition(existingPositions, containerWidth, containerHeight);
-            existingPositions.push(position);
+            const foundNode = nodes.find((n) => n.id === `${EntityTypes.Source}-${serviceName}-${NodeTypes.MapItem}`);
+            if (foundNode)
+                return;
             nodes.push({
-                id: `${EntityTypes.Source}-${source.otelServiceName || source.name}-${NodeTypes.MapItem}`,
+                id: `${EntityTypes.Source}-${serviceName}-${NodeTypes.MapItem}`,
                 type: NodeTypes.MapItem,
-                position,
-                data: mapToNodeData(source, serviceMapEntry, isUserSource),
+                position: { x: currentX, y: 10 },
+                data: mapToNodeData(undefined, source, isUserSource),
             });
+            currentX += 120;
         });
     }
     // else if (sourcesLoading) {
@@ -3904,7 +3876,7 @@ const buildMapNodes = ({ sources, serviceMap, containerHeight, containerWidth })
                 y: containerHeight / 2 - 50,
             },
             data: {
-                subTitle: 'Are your services instrumented?',
+                subTitle: 'Are your services instrumented & producing traces?',
             },
         });
     }
@@ -3916,18 +3888,57 @@ const Container$5 = styled.div `
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
 `;
+const userSource = {
+    namespace: '',
+    name: '',
+    kind: '',
+    otelServiceName: 'user',
+    selected: true,
+    numberOfInstances: 0,
+    dataStreamNames: [],
+    containers: [],
+    conditions: [],
+};
 const ServiceMap = ({ heightToRemove, serviceMap }) => {
     const theme = Theme.useTheme();
     const { sources, sourcesLoading } = useEntityStore();
     const { containerRef, containerHeight, containerWidth } = useContainerSize();
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const handleNodesChanged = (currNodes) => {
+        setNodes((prevNodes) => {
+            const mutatedNodes = currNodes.map((cn) => {
+                const pn = prevNodes.find((pn) => pn.id === cn.id);
+                cn.position = pn?.position || cn.position;
+                return {
+                    id: cn.id,
+                    item: cn,
+                    type: pn ? 'replace' : 'add',
+                };
+            });
+            const noDataNode = prevNodes.find((pn) => pn.id === `${EntityTypes.Source}-${NodeTypes.NoData}`);
+            if (noDataNode) {
+                mutatedNodes.push({
+                    id: `${EntityTypes.Source}-${NodeTypes.NoData}`,
+                    type: 'remove',
+                });
+            }
+            return applyNodeChanges(mutatedNodes, prevNodes);
+        });
+    };
+    useEffect(() => {
+        const newNodes = buildMapNodes({ serviceMap, sources: [userSource].concat(sources), containerHeight, containerWidth });
+        // greater than 1, because at the very least we would have a 'no data' node
+        if (nodes.length > 1) {
+            handleNodesChanged(newNodes);
+        }
+        else {
+            setNodes(newNodes);
+        }
+    }, [serviceMap, sources, sourcesLoading, containerHeight, containerWidth]);
     useEffect(() => {
         setEdges(buildEdges({ theme, nodes, serviceMap }));
     }, [theme, nodes, serviceMap]);
-    useEffect(() => {
-        setNodes(buildMapNodes({ sources, serviceMap, containerHeight, containerWidth }));
-    }, [sources, sourcesLoading, serviceMap, containerHeight, containerWidth]);
     return (React.createElement(Container$5, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, zoomOnScroll: true })));
 };
@@ -4164,95 +4175,37 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
     }
     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, agentInjected, runningLatestWorkloadRevision, containers }) => {
-        const podHasErrors = phase.status !== StatusType.Success ||
-            containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== StatusType.Success) !== -1) !== -1;
+        const podHasErrors = phase.status !== StatusType.Success || hasUnhealthyInstances(containers);
         const podStatus = podHasErrors ? StatusType.Error : StatusType.Success;
-        const divider = { type: DataCardFieldTypes.Divider };
-        const data = [];
-        data.push({
-            type: DataCardFieldTypes.CopyText,
-            value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`.toLowerCase(),
-        });
-        data.push(divider);
-        data.push({
-            type: DataCardFieldTypes.DescribeRow,
-            value: JSON.stringify({
-                title: nodeName.name,
-                tooltip: nodeName.explain,
-                value: {
-                    text: nodeName.value,
-                    status: undefined,
-                },
-            }),
-        });
-        data.push(divider);
-        data.push({
-            type: DataCardFieldTypes.DescribeRow,
-            value: JSON.stringify({
-                title: phase.name,
-                tooltip: phase.explain,
-                value: {
-                    text: phase.value,
-                    status: phase.status,
-                },
-            }),
-        });
-        data.push(divider);
-        data.push({
-            type: DataCardFieldTypes.DescribeRow,
-            value: JSON.stringify({
-                title: agentInjected.name,
-                tooltip: agentInjected.explain,
-                value: {
-                    text: agentInjected.value,
-                    status: agentInjected.status,
-                },
-            }),
-        });
-        data.push(divider);
+        const cardChildren = [];
+        cardChildren.push(React.createElement(CopyText, { value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`.toLowerCase() }));
+        cardChildren.push(React.createElement(Divider, { length: '100%', margin: '0' }));
+        cardChildren.push(React.createElement(DescribeRow, { title: nodeName.name, tooltip: nodeName.explain || '', value: {
+                status: nodeName.status || undefined,
+                text: nodeName.value,
+            } }));
+        cardChildren.push(React.createElement(Divider, { length: '100%', margin: '0' }));
+        cardChildren.push(React.createElement(DescribeRow, { title: phase.name, tooltip: phase.explain || '', value: {
+                status: phase.status || undefined,
+                text: phase.value,
+            } }));
+        cardChildren.push(React.createElement(Divider, { length: '100%', margin: '0' }));
+        cardChildren.push(React.createElement(DescribeRow, { title: agentInjected.name, tooltip: agentInjected.explain || '', value: {
+                status: agentInjected.status || undefined,
+                text: agentInjected.value,
+            } }));
+        cardChildren.push(React.createElement(Divider, { length: '100%', margin: '0' }));
         if (runningLatestWorkloadRevision?.name) {
-            data.push({
-                type: DataCardFieldTypes.DescribeRow,
-                value: JSON.stringify({
-                    title: runningLatestWorkloadRevision?.name || '',
-                    tooltip: runningLatestWorkloadRevision?.explain || '',
-                    value: {
-                        text: runningLatestWorkloadRevision?.value || '',
-                        status: runningLatestWorkloadRevision?.status || '',
-                    },
-                }),
-            });
-            data.push(divider);
+            cardChildren.push(React.createElement(DescribeRow, { title: runningLatestWorkloadRevision.name, tooltip: runningLatestWorkloadRevision.explain || undefined, value: {
+                    status: runningLatestWorkloadRevision.status || undefined,
+                    text: runningLatestWorkloadRevision.value,
+                } }));
+            cardChildren.push(React.createElement(Divider, { length: '100%', margin: '0' }));
         }
-        data.push(...containers.map((container) => {
-            return {
-                type: DataCardFieldTypes.PodContainer,
-                value: JSON.stringify({
-                    containerName: container.containerName.value,
-                    actualDevice: {
-                        title: container.actualDevices.name,
-                        subTitle: container.actualDevices.value,
-                        tooltip: container.actualDevices.explain,
-                    },
-                    started: {
-                        title: container.started?.name || '',
-                        subTitle: container.started?.value || '',
-                        tooltip: container.started?.explain || '',
-                    },
-                    ready: {
-                        title: container.ready?.name || '',
-                        subTitle: container.ready?.value || '',
-                        tooltip: container.ready?.explain || '',
-                    },
-                    processes: container.instrumentationInstances.map((instance) => ({
-                        health: instance.healthy.status,
-                        message: instance.message?.value || '',
-                        identifyingAttributes: instance.identifyingAttributes || [],
-                    })),
-                }),
-            };
-        }));
-        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: data });
+        containers.forEach((container) => {
+            cardChildren.push(React.createElement(PodContainer, { ...container }));
+        });
+        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 }) }, Children.toArray(cardChildren)));
     }))));
 };
 
@@ -4319,18 +4272,13 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
         return found;
     }, [isOpen, drawerEntityId, sourcesByStream]);
     const containersData = useMemo(() => {
-        const mappedContainers = thisItem?.containers?.map((container) => ({
-            type: DataCardFieldTypes.SourceContainer,
-            value: JSON.stringify(container),
-            callback: async (payload) => await updateSource(drawerEntityId, payload),
-        })) || [];
         const runtimeCondition = thisItem?.conditions?.find(({ type }) => type === 'RuntimeDetection');
         return {
             description: runtimeCondition?.message,
             isLoading: runtimeCondition?.status === OtherStatus.Loading,
-            items: mappedContainers,
+            containers: thisItem?.containers || [],
         };
-    }, [thisItem, drawerEntityId]);
+    }, [thisItem]);
     const tabs = useMemo(() => {
         const arr = [
             {
@@ -4391,7 +4339,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
             } }))) : (React.createElement(DataContainer$1, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.SOURCE_DETAILS, data: !!thisItem ? buildCard(thisItem) : [] }),
-        React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.isLoading ? OtherStatus.Loading : containersData.items.length, description: containersData.description || DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION, data: containersData.items })))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
+        React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.isLoading ? OtherStatus.Loading : containersData.containers.length, description: containersData.description || DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION }, containersData.containers.map((container) => (React.createElement(SourceContainer, { key: `source-container-${container.containerName}`, ...container, callbackRuntimeOverride: async (payload) => await updateSource(drawerEntityId, payload) }))))))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
 };
 
 const ActionsRow = styled(FlexRow) `
@@ -4621,59 +4569,30 @@ const ExpiresAt = ({ expiresAt }) => {
 const Relative = styled.div `
   position: relative;
 `;
-const TokenPopover = styled(FlexColumn) `
-  position: absolute;
-  bottom: 32px;
-  right: 0;
-  z-index: 1;
-  gap: 8px;
-  padding: 24px;
-  background-color: ${({ theme }) => theme.colors.info};
-  border: 1px solid ${({ theme }) => theme.colors.border};
-  border-radius: 24px;
-`;
-const PopoverFormWrapper = styled(FlexRow) `
-  width: 100%;
-  gap: 12px;
-`;
-const PopoverFormButton = styled(Button) `
-  width: 36px;
-  padding: 0;
-`;
 const TokenActions = ({ token, saveToken }) => {
     const theme = Theme.useTheme();
     const { isCopied, clickCopy } = useCopy();
+    const { formData, handleFormChange, resetFormData } = useGenericForm({ token });
     const [isEdit, setIsEdit] = useState(false);
-    const [inputValue, setInputValue] = useState(token);
-    const popupRef = useRef(null);
     const onSave = () => {
-        saveToken(inputValue).then(onCloseEdit);
+        saveToken(formData.token).then(onCloseEdit);
     };
     const onOpenEdit = () => {
         setIsEdit(true);
     };
     const onCloseEdit = () => {
         setIsEdit(false);
-        setInputValue(token);
+        resetFormData();
     };
     const SuccessIcon = getStatusIcon(StatusType.Success, theme);
-    useOnClickOutside(popupRef, onCloseEdit);
     return (React.createElement(FlexRow, { "$gap": 0 },
         React.createElement(IconButton, { size: 32, onClick: () => clickCopy(token) }, isCopied ? React.createElement(SuccessIcon, null) : React.createElement(CopyIcon, null)),
         React.createElement(Divider, { orientation: 'vertical', length: '12px' }),
         React.createElement(Relative, null,
             React.createElement(IconButton, { size: 32, onClick: onOpenEdit },
                 React.createElement(EditIcon, null)),
-            isEdit && (React.createElement(TokenPopover, { ref: popupRef },
-                React.createElement(Tooltip, { text: 'Contact us to generate a new one', withIcon: true },
-                    React.createElement(Text, { size: 14, style: { lineHeight: '20px', display: 'flex' } }, "Enter a new API Token:")),
-                React.createElement(PopoverFormWrapper, null,
-                    React.createElement(Input, { placeholder: 'API Token', type: 'password', value: inputValue, onChange: (e) => setInputValue(e.target.value) }),
-                    React.createElement(FlexRow, null,
-                        React.createElement(PopoverFormButton, { variant: 'primary', onClick: onSave },
-                            React.createElement(CheckIcon, { fill: theme.text.primary })),
-                        React.createElement(PopoverFormButton, { variant: 'secondary', onClick: onCloseEdit },
-                            React.createElement(CrossIcon, null)))))))));
+            isEdit && (React.createElement(PopupForm, { flipX: true, clientX: 36, isOpen: isEdit, onClose: onCloseEdit, onSave: onSave, title: 'Enter a new API Token', titleTooltip: 'Contact us to generate a new one' },
+                React.createElement(Input, { placeholder: 'API Token', type: 'password', value: formData.token, onChange: (e) => handleFormChange('token', e.target.value) }))))));
 };
 
 const Tokens = ({ tokens, saveToken }) => {
@@ -4719,19 +4638,13 @@ const Describe = ({ fetchDescribeOdigos }) => {
         return (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, null)));
     }
-    const mapObjectToCardFields = (obj) => !!obj?.name
+    const mapObjectToCardChildren = (obj) => !!obj?.name
         ? [
-            {
-                type: DataCardFieldTypes.Divider,
-            },
-            {
-                type: DataCardFieldTypes.DescribeRow,
-                value: JSON.stringify({
-                    title: obj.name,
-                    subTitle: obj.explain,
-                    value: { text: obj.value, status: obj.status },
-                }),
-            },
+            React.createElement(Divider, { key: `divider-${obj.name}` }),
+            React.createElement(DescribeRow, { key: `describe-row-${obj.name}`, title: obj.name, subTitle: obj.explain || undefined, value: {
+                    status: obj.status || parseBooleanFromString(obj.value) ? StatusType.Success : StatusType.Error,
+                    text: obj.value,
+                } }),
         ]
         : [];
     return (React.createElement(React.Fragment, null,
@@ -4743,12 +4656,8 @@ const Describe = ({ fetchDescribeOdigos }) => {
                 { title: '# of sources', value: describe?.numberOfSources?.toString() },
                 { title: '# of destinations', value: describe?.numberOfDestinations?.toString() },
             ] }),
-        React.createElement(DataCard, { title: 'Cluster Collector', withExtend: true, data: Object.values(describe?.clusterCollector || {})
-                .map(mapObjectToCardFields)
-                .flat() }),
-        React.createElement(DataCard, { title: 'Node Collector', withExtend: true, data: Object.values(describe?.nodeCollector || {})
-                .map(mapObjectToCardFields)
-                .flat() })));
+        React.createElement(DataCard, { title: 'Cluster Collector', withExtend: true }, Object.values(describe?.clusterCollector || {}).map(mapObjectToCardChildren)),
+        React.createElement(DataCard, { title: 'Node Collector', withExtend: true }, Object.values(describe?.nodeCollector || {}).map(mapObjectToCardChildren))));
 };
 
 const DataContainer = styled.div `