@odigos/ui-kit 0.0.16 → 0.0.17

package/lib/containers.js

@@ -1,24 +1,31 @@
 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-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-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 { f as DataCardFieldTypes, q as FieldLabel, b as Checkbox, p as FieldError, w as Input, y as InputTable, K as KeyValueInputsList, x as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, G 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, a1 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, F as FlexRow, X as Tooltip, t as IconWrapped, H as MonitorsIcons, a2 as TableContainer, a3 as TableTitleWrap, s as IconTitleBadge, a4 as TableWrap, z as InteractiveTable, $ as CenterThis, J as NoDataFound, _ as FlexColumn, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a5 as getDefaultExportFromCjs, o as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, u as IconsNav, r as IconGroup } from './index-BiNX-Cge.js';
+import { A as ActionType, C as CodeAttributesKeyTypes, P as PayloadCollectionKeyTypes, I as InstrumentationRuleType } from './index-RBS1MqCQ.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-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-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 { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-KOMAv-TS.js';
+import { i as CheckCircledIcon, O as OdigosLogo } from './index-BsH_egEe.js';
+import { b as usePendingStore, u as useFilterStore, c as useSelectedStore, a as useInstrumentStore } from './useSelectedStore-93bIo1kE.js';
+import { c as useNotificationStore, u as useDrawerStore, a as useEntityStore, b as useModalStore, d as useSetupStore } from './useSetupStore-CoYx1UQw.js';
+import { b as useKeyDown, c as useOnClickOutside, u as useContainerSize, d as useTransition, a as useCopy } from './useTransition-D0wUpPGk.js';
+import { E as EntityTypes, S as StatusType, C as Crud, O as OtherStatus, F as FieldTypes } from './index-BVVVevuY.js';
+import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, e as useInstrumentationRuleFormData, h as useTimeAgo, b as useClickNotification, f as useSourceFormData, g as useSourceSelectionFormData } from './useTimeAgo-weEj7br6.js';
+import { A as ACTION_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-G4WmxXds.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-C3nz3TIx.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BxQTUOME.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-BQW5EUgp.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
-import { O as OdigosLogo } from './index-BGlk5VhF.js';
+import { N as NodeTypes, A as AddNodeTypes, E as EdgeTypes } from './index-B72aw6tI.js';
+import { g as getEntityId } from './index-BQs4sULy.js';
+import { M as MONITORS_OPTIONS } from './index-C1PCuZgw.js';
+import { S as SignalType } from './index-DbfrGXPH.js';
 import { R as RulesIcon, W as SourcesIcon, y as ActionsIcon, z as DestinationsIcon } from './index-DB8Djrsy.js';
+import { u as useDarkMode } from './useDarkMode-DxhIuVNi.js';
+import './index-BWqrekK4.js';
 import 'babel-runtime/helpers/extends';
 import 'babel-runtime/core-js/object/get-prototype-of';
 import 'babel-runtime/helpers/classCallCheck';
@@ -26,7 +33,37 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
-import './index-7-KCQK-x.js';
+import './react-CjImwkhV.js';
+import './index-Hz7AAE0t.js';
+import './index-CIXQeSHu.js';
+import './index-CIgHU72d.js';
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
 
 const buildCard$3 = (action) => {
     const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
@@ -307,7 +344,7 @@ const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$m = styled.div `
+const Container$l = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -318,7 +355,7 @@ const FieldTitle$1 = styled(Text) `
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$m, null,
+    return (React.createElement(Container$l, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$1, null, "Status"),
             React.createElement(Segment, { options: [
@@ -332,7 +369,7 @@ const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }
         React.createElement(TextArea, { title: 'Notes', value: formData['notes'], onChange: ({ target: { value } }) => handleFormChange('notes', value), errorMessage: formErrors['notes'] })));
 };
 
-const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, icon, iconSrc, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs }, drawerRef) => {
+const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip, icons, iconSrcs, isEdit = false, isFormDirty = false, isLastItem = false, onEdit, onSave, onDelete, onCancel, tabs }, drawerRef) => {
     const theme = Theme.useTheme();
     const { isThisPending } = usePendingStore();
     const { addNotification } = useNotificationStore();
@@ -420,8 +457,8 @@ const OverviewDrawer = forwardRef(({ children, width = 640, title, titleTooltip,
         });
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, { isOpen: true, onClose: isEdit ? clickCancel : closeDrawer, closeOnEscape: !isDeleteModalOpen && !isCancelModalOpen, width: `${width + 64}px`, header: {
-                icon,
-                iconSrc,
+                icons,
+                iconSrcs,
                 title,
                 titleTooltip,
                 replaceTitleWith: !isSource && isEdit ? React.createElement(EditTitle, { ref: titleRef, title: title }) : undefined,
@@ -528,7 +565,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.spec.actionName || thisItem.type, icon: getActionIcon(thisItem.type), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$3, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.spec.actionName || thisItem.type, icons: [getActionIcon(thisItem.type)], isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$3, null,
         React.createElement(ActionForm, { isUpdate: true, action: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -746,7 +783,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$l = styled(FlexColumn) `
+const Container$k = styled(FlexColumn) `
   // width: 100vw;
   // height: 100vh;
   gap: 64px;
@@ -780,7 +817,7 @@ const AwaitPipeline = () => {
     useEffect(() => {
         awaitPipeline();
     }, []);
-    return (React.createElement(Container$l, null,
+    return (React.createElement(Container$k, null,
         React.createElement(OdigosLogoText, { size: 100 }),
         React.createElement(TraceLoader, { width: 400 }),
         React.createElement(TextWrap, null,
@@ -1060,7 +1097,7 @@ const KindDropdown = ({ title = 'Kind', value, onSelect, onDeselect, ...props })
     return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
-const Container$k = styled.div `
+const Container$j = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -1080,7 +1117,7 @@ const ComputePlatformsActionsMenu = ({ connections }) => {
     useEffect(() => {
         return () => clearAll();
     }, [clearAll]);
-    return (React.createElement(Container$k, null,
+    return (React.createElement(Container$j, null,
         React.createElement(FlexRow, { "$gap": 16 },
             React.createElement(FlexRow, { "$gap": 12 },
                 React.createElement(Title$1, null, "Compute platforms"),
@@ -12332,7 +12369,7 @@ ControlsComponent.displayName = 'Controls';
  * @remarks To extend or customise the controls, you can use the [`<ControlButton />`](/api-reference/components/control-button) component
  *
  */
-const Controls$2 = memo(ControlsComponent);
+const Controls$1 = memo(ControlsComponent);
 
 function MiniMapNodeComponent({ id, x, y, width, height, style, color, strokeColor, strokeWidth, className, borderRadius, shapeRendering, selected, onClick, }) {
     const { background, backgroundColor } = style || {};
@@ -12643,7 +12680,7 @@ function ResizeControl({ nodeId, position, variant = ResizeControlVariant.Handle
  */
 memo(ResizeControl);
 
-const Container$j = styled(FlexColumn) `
+const Container$i = styled(FlexColumn) `
   align-items: center !important;
   justify-content: center;
   align-self: stretch;
@@ -12680,7 +12717,7 @@ const AddNode = memo(({ id: nodeId, data }) => {
     const { isThisPending } = usePendingStore();
     const entity = nodeId.split('-')[0];
     const isPending = isThisPending({ entityType: entity });
-    return (React.createElement(Container$j, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$i, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         isPending ? (React.createElement(Fragment, null,
             React.createElement(TitleWrapper, null,
                 React.createElement(FadeLoader, null),
@@ -12697,17 +12734,23 @@ const AddNode = memo(({ id: nodeId, data }) => {
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
 
-const Container$i = styled.div `
+const Container$h = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const BaseNode = memo(({ id: nodeId, data }) => {
+    const theme = Theme.useTheme();
     const { nodeWidth, id: entityId, type: entityType, status, faded, title, subTitle, icon, icons, iconSrc, iconSrcs, monitors, isActive, raw } = data;
     const isSource = entityType === EntityTypes.Source;
+    const hasActiveBoolean = typeof isActive === 'boolean';
     const { isThisPending } = usePendingStore();
     const isPending = isThisPending({ entityType, entityId });
     const renderActions = () => {
+        const StatusIcon = hasActiveBoolean ? getStatusIcon(isActive ? StatusType.Success : StatusType.Info, theme) : status && getStatusIcon(status, theme);
+        const statusTooltipText = hasActiveBoolean ? `${entityType} is ${isActive ? 'active' : 'inactive'}` : undefined;
         const sourceIsInstrumenting = isSource && (!raw.conditions?.length || raw.conditions?.some(({ status }) => status === 'loading'));
-        return (React.createElement(React.Fragment, null, isPending ? (React.createElement(FadeLoader, null)) : status === StatusType.Error ? (React.createElement(ErrorTriangleIcon, { size: 20 })) : status === StatusType.Warning ? (React.createElement(WarningTriangleIcon, { size: 20 })) : sourceIsInstrumenting ? (React.createElement(FadeLoader, null)) : null));
+        // TODO: handle action/icon to apply instrumentation-rules for individual sources (@Notion GEN-1650)
+        return isPending ? (React.createElement(FadeLoader, null)) : StatusIcon ? (React.createElement(Tooltip, { text: statusTooltipText },
+            React.createElement(StatusIcon, { size: 20 }))) : sourceIsInstrumenting ? (React.createElement(FadeLoader, null)) : null;
     };
     const { selectedSources, setSelectedSources } = useSelectedStore();
     const namespaces = { ...selectedSources };
@@ -12724,7 +12767,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         }
         setSelectedSources(namespaces);
     };
-    return (React.createElement(Container$i, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$h, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(DataTab, { title: title, subTitle: subTitle, onClick: () => { }, renderActions: renderActions, iconProps: {
                 icon: icon,
                 icons: icons,
@@ -12732,9 +12775,8 @@ const BaseNode = memo(({ id: nodeId, data }) => {
                 iconSrcs: iconSrcs,
             }, visualProps: {
                 status: status,
-                faded: faded,
+                faded: faded || (hasActiveBoolean && !isActive),
                 monitors: monitors,
-                isActive: isActive,
             }, checkboxProps: {
                 withCheckbox: isSource,
                 isChecked: sourceIndex !== -1,
@@ -12745,19 +12787,19 @@ const BaseNode = memo(({ id: nodeId, data }) => {
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } })));
 });
 
-const Container$h = styled.div `
+const Container$g = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   height: ${({ $nodeHeight }) => `${$nodeHeight}px`};
   opacity: 0;
 `;
 const EdgedNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$h, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$g, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 
-const Container$g = styled.div `
+const Container$f = styled.div `
   width: ${({ $nodeWidth }) => $nodeWidth}px;
   height: ${({ $nodeHeight }) => $nodeHeight}px;
   background: transparent;
@@ -12766,12 +12808,12 @@ const Container$g = styled.div `
 `;
 const FrameNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$g, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$f, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         React.createElement(Handle, { type: 'source', position: Position.Right, style: { visibility: 'hidden' } }),
         React.createElement(Handle, { type: 'target', position: Position.Left, style: { visibility: 'hidden' } })));
 });
 
-const Container$f = styled.div `
+const Container$e = styled.div `
   position: relative;
   z-index: 1;
   width: ${({ $nodeWidth }) => $nodeWidth}px;
@@ -12832,7 +12874,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         current?.addEventListener('scroll', handleScroll);
         return () => current?.removeEventListener('scroll', handleScroll);
     }, [onScroll]);
-    return (React.createElement(Container$f, { ref: containerRef, "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
+    return (React.createElement(Container$e, { ref: containerRef, "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight, className: 'nowheel nodrag' },
         items.map((item) => (React.createElement(BaseNodeWrapper, { key: item.id, "$framePadding": item.data.framePadding, onClick: (e) => {
                 e.stopPropagation();
                 // @ts-ignore
@@ -12842,7 +12884,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
         React.createElement(LoadMoreWrapper, { "$hide": isBottomOfList })));
 });
 
-const Container$e = styled.div `
+const Container$d = styled.div `
   position: relative;
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
   padding: 12px 0px 16px 0px;
@@ -12911,7 +12953,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
             setSelectedSources({});
         }
     };
-    return (React.createElement(Container$e, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$d, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         entityType === EntityTypes.Source && (React.createElement(SelectorWrapper, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelect, disabled: !sources?.length }))),
         React.createElement(IconTitleBadge, { icon: Icon, title: title, badge: isSourceAwaitingInstrumentation ? `${instrumentingPercent}%` : badge, badgeTooltip: badgeTooltip, loading: isFetching && !isSourceAwaitingInstrumentation }),
@@ -12973,12 +13015,12 @@ const LabeledEdge = memo(({ id, sourceX, sourceY, targetX, targetY, sourcePositi
                 React.createElement(Tooltip, { text: 'Heads up! The data-flow metrics you see are calculated over 10-second intervals.' }, data?.label)))));
 });
 
-const Container$d = styled.div `
+const Container$c = styled.div `
   width: ${({ $nodeWidth }) => `${$nodeWidth}px`};
 `;
 const SkeletonNode = memo(({ id: nodeId, data }) => {
     const { nodeWidth } = data;
-    return (React.createElement(Container$d, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
+    return (React.createElement(Container$c, { "data-id": nodeId, "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
         React.createElement(SkeletonLoader, { size: 3 })));
 });
 
@@ -13020,7 +13062,7 @@ const Flow = ({ nodes, edges, onNodesChange, onEdgesChange }) => {
     return (React.createElement(FlowWrapper, null,
         React.createElement(index, { fitView: false, zoomOnScroll: false, nodes: nodes, nodeTypes: nodeTypes, edges: edges, edgeTypes: edgeTypes, onNodeClick: onClickNode, onNodesChange: (changes) => setTimeout(() => onNodesChange(changes), 0), onEdgesChange: (changes) => setTimeout(() => onEdgesChange(changes), 0) },
             React.createElement(ControllerWrapper, null,
-                React.createElement(Controls$2, { position: 'bottom-right', orientation: 'horizontal', showInteractive: false, showZoom: true, showFitView: true, fitViewOptions: {
+                React.createElement(Controls$1, { position: 'bottom-right', orientation: 'horizontal', showInteractive: false, showZoom: true, showFitView: true, fitViewOptions: {
                         duration: 300,
                         padding: 0.02,
                         includeHiddenNodes: true,
@@ -13483,7 +13525,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
     return nodes;
 };
 
-const Container$c = styled.div `
+const Container$b = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -13556,7 +13598,7 @@ const DataFlow = ({ heightToRemove, metrics }) => {
         });
         handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
     }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule]]);
-    return (React.createElement(Container$c, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$b, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
 
@@ -13695,7 +13737,7 @@ const FormWrapper = styled.div `
   gap: 12px;
   padding: 12px;
 `;
-const ToggleWrapper$1 = styled.div `
+const ToggleWrapper = styled.div `
   padding: 12px 6px 6px 6px;
 `;
 const Actions = styled.div `
@@ -13768,7 +13810,7 @@ const Filters$1 = () => {
                 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 }),
-                React.createElement(ToggleWrapper$1, null,
+                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, { 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,
@@ -13778,7 +13820,7 @@ const Filters$1 = () => {
                     React.createElement(ActionButton$1, { variant: 'tertiary', onClick: onReset, "$color": theme.text.error }, "Reset"))))));
 };
 
-const Container$b = styled.div `
+const Container$a = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -13800,7 +13842,7 @@ const AddButton = styled(Button) `
 const DataFlowActionsMenu = ({ addEntity }) => {
     const theme = Theme.useTheme();
     const { setCurrentModal } = useModalStore();
-    return (React.createElement(Container$b, null,
+    return (React.createElement(Container$a, null,
         React.createElement(Search, null),
         React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
@@ -13864,7 +13906,7 @@ const DynamicFields = ({ fields, onChange, formErrors }) => {
             case FieldTypes.Input:
                 return React.createElement(Input, { key: field.name, ...rest, onChange: (e) => onChange(field.name, e.target.value), errorMessage: formErrors[field.name] });
             case FieldTypes.Dropdown:
-                return (React.createElement(Dropdown, { key: field.name, ...rest, value: { id: rest.value || '', value: rest.value || '' }, options: rest.options || [], onSelect: (option) => onChange(field.name, option.value), errorMessage: formErrors[field.name] }));
+                return (React.createElement(Dropdown, { key: field.name, ...rest, showSearch: true, value: { id: rest.value || '', value: rest.value || '' }, options: rest.options || [], onSelect: (option) => onChange(field.name, option.value), errorMessage: formErrors[field.name] }));
             case FieldTypes.MultiInput:
                 return (React.createElement(InputList, { key: field.name, ...rest, value: typeof rest.value === 'string' ? safeJsonParse(rest.value, []) : rest.value, onChange: (value) => onChange(field.name, JSON.stringify(value)), errorMessage: formErrors[field.name] }));
             case FieldTypes.KeyValuePair:
@@ -13918,7 +13960,7 @@ const TestConnection = ({ destination, disabled, status, onError, onSuccess, val
         React.createElement(Text, { family: 'secondary', decoration: 'underline', size: 14, color: !!status ? theme.text[status] : undefined }, testLoading ? 'Checking' : status === 'success' ? 'Connection OK' : status === 'error' ? 'Connection Failed' : 'Test Connection')));
 };
 
-const Container$a = styled.div `
+const Container$9 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -13988,7 +14030,7 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
             traces: signals.includes(SignalType.Traces),
         });
     };
-    return (React.createElement(Container$a, null,
+    return (React.createElement(Container$9, null,
         !isUpdate && (React.createElement(React.Fragment, null,
             React.createElement(SectionTitle, { title: 'Create connection', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, disabled: !isFormDirty, validateForm: validateForm, status: connectionStatus, testConnection: testConnection, testLoading: testLoading, testResult: testResult, onError: () => {
                         setIsFormDirty(false);
@@ -14096,7 +14138,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             setIsFormDirty(false);
         }
     };
-    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,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name || thisItem.destinationType.displayName, icons: icon ? [icon] : undefined, iconSrcs: iconSrc ? [iconSrc] : undefined, 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);
@@ -14152,7 +14194,7 @@ const PotentialDestinationsList = ({ items, setSelectedItem }) => {
         })));
 };
 
-const Container$9 = styled.div `
+const Container$8 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -14178,7 +14220,7 @@ const ListsContainer = styled.div `
     max-height: calc(100vh - 400px);
   }
 `;
-const NoDataFoundWrapper$2 = styled(Container$9) `
+const NoDataFoundWrapper$1 = styled(Container$8) `
   margin-top: 80px;
 `;
 const DROPDOWN_OPTIONS = [
@@ -14207,7 +14249,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
     }, [categories, search, selectedCategory, selectedMonitors]);
     if (hidden)
         return null;
-    return (React.createElement(Container$9, null,
+    return (React.createElement(Container$8, null,
         React.createElement(SectionTitle, { title: 'Choose destination', description: 'Add backend destination you want to connect with Odigos.' }),
         React.createElement(Filters, null,
             React.createElement(WidthConstraint, null,
@@ -14216,13 +14258,13 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
                 React.createElement(Dropdown, { options: DROPDOWN_OPTIONS, value: selectedCategory, onSelect: (opt) => setSelectedCategory(opt), onDeselect: () => { } })),
             React.createElement(MonitorsCheckboxes, { title: '', selectedSignals: selectedMonitors, setSelectedSignals: setSelectedMonitors })),
         React.createElement(Divider, null),
-        !filteredDestinations.length && !potentialDestinations.length ? (React.createElement(NoDataFoundWrapper$2, null,
+        !filteredDestinations.length && !potentialDestinations.length ? (React.createElement(NoDataFoundWrapper$1, null,
             React.createElement(NoDataFound, { title: 'No destinations found' }))) : (React.createElement(ListsContainer, null,
             React.createElement(PotentialDestinationsList, { items: potentialDestinations, setSelectedItem: onSelect }),
             React.createElement(DestinationsList, { items: filteredDestinations, setSelectedItem: onSelect })))));
 };
 
-const Container$8 = styled.div `
+const Container$7 = styled.div `
   display: flex;
 `;
 const SideMenuWrapper = styled.div `
@@ -14305,7 +14347,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
     };
     useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
     return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, header: { title: 'Add Destination' }, actionComponent: React.createElement(NavigationButtons, { buttons: renderHeaderButtons() }) },
-        React.createElement(Container$8, null,
+        React.createElement(Container$7, null,
             React.createElement(SideMenuWrapper, null,
                 React.createElement(Stepper, { currentStep: !!selectedItem ? 2 : 1, data: [
                         { stepNumber: 1, title: 'Destinations' },
@@ -14316,7 +14358,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                 !!selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection, testLoading: testLoading, testResult: testResult }))))));
 };
 
-const Container$7 = styled.div `
+const Container$6 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -14329,9 +14371,9 @@ const Container$7 = styled.div `
 `;
 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 })))));
+    return (React.createElement(Container$6, null, configuredDestinations.map(({ stored }, idx) => (React.createElement(ListItem, { key: `selected-destination-${stored.type}-${idx}`, "data-id": `selected-destination-${stored.type}`, item: stored, isLastItem: configuredDestinations.length === 1 })))));
 };
-const ListItem$1 = ({ item, isLastItem }) => {
+const ListItem = ({ item, isLastItem }) => {
     const { removeConfiguredDestination } = useSetupStore();
     const [deleteWarning, setDeleteWarning] = useState(false);
     const { icon, iconSrc } = getDestinationIcon(item.type);
@@ -14650,7 +14692,7 @@ const CustomFields = ({ ruleType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$6 = styled.div `
+const Container$5 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -14661,7 +14703,7 @@ const FieldTitle = styled(Text) `
 `;
 const InstrumentationRuleForm = ({ isUpdate, rule, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$6, null,
+    return (React.createElement(Container$5, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle, null, "Status"),
             React.createElement(Segment, { options: [
@@ -14750,7 +14792,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
             setIsFormDirty(false);
         }
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.ruleName || thisItem.type, icon: getInstrumentationRuleIcon(thisItem.type), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$1, null,
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.ruleName || thisItem.type, icons: [getInstrumentationRuleIcon(thisItem.type)], isEdit: isEditing, isFormDirty: isFormDirty, onEdit: handleEdit, onSave: handleSave, onDelete: handleDelete, onCancel: handleCancel }, isEditing && thisOptionType ? (React.createElement(FormContainer$1, null,
         React.createElement(InstrumentationRuleForm, { isUpdate: true, rule: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -14890,7 +14932,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$5 = styled.div `
+const Container$4 = styled.div `
   position: fixed;
   bottom: 0;
   left: 50%;
@@ -14907,7 +14949,7 @@ const Container$5 = styled.div `
 const MultiSourceControl = ({ totalSourceCount, uninstrumentSources }) => {
     const theme = Theme.useTheme();
     const Transition = useTransition({
-        container: Container$5,
+        container: Container$4,
         animateIn: Theme.animations.slide.in['center'],
         animateOut: Theme.animations.slide.out['center'],
     });
@@ -15256,14 +15298,14 @@ const buildCard = (source) => {
     return arr;
 };
 
-const Container$4 = styled.div `
+const Container$3 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 4px;
 `;
 const SourceForm = ({ formData, handleFormChange }) => {
-    return (React.createElement(Container$4, null,
+    return (React.createElement(Container$3, null,
         React.createElement(Input, { name: 'sourceName', title: 'Source name', tooltip: 'This overrides the default service name that runs in your cluster.', placeholder: 'Use a name that overrides the source name', value: formData.otelServiceName, onChange: ({ target: { value } }) => handleFormChange('otelServiceName', value) })));
 };
 
@@ -15331,7 +15373,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         setIsFormDirty(false);
         setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icon: getEntityIcon(EntityTypes.Source), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sources.length === 1, tabs: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sources.length === 1, tabs: [
             {
                 label: Tabs.Overview,
                 onClick: () => setSelectedTab(Tabs.Overview),
@@ -15352,7 +15394,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.length, description: DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION, data: containersData })))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
 };
 
-const Container$3 = styled.div `
+const Container$2 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -15396,7 +15438,7 @@ const AbsoluteWrapper = styled.div `
 const SelectionCount = styled(Text) `
   width: 18px;
 `;
-const NoDataFoundWrapper$1 = styled.div `
+const NoDataFoundWrapper = styled.div `
   padding: 50px 0;
   display: flex;
   flex-direction: column;
@@ -15406,14 +15448,14 @@ const NoDataFoundWrapper$1 = styled.div `
   max-height: calc(100vh - 360px);
   overflow-y: auto;
 `;
-const List$1 = ({ isModal = false, filterNamespaces, filterSources, selectedNamespace, onSelectNamespace, selectedSources, onSelectSource, selectedFutureApps, onSelectFutureApps, onSelectAll, }) => {
+const List = ({ 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' }));
+        return React.createElement(NoDataFoundWrapper, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 2 }) : React.createElement(NoDataFound, { title: 'No namespaces found' }));
     }
-    return (React.createElement(Container$3, { "$isModal": isModal }, namespaces.map(([namespace, sources]) => {
+    return (React.createElement(Container$2, { "$isModal": isModal }, namespaces.map(([namespace, sources]) => {
         const sourcesForNamespace = selectedSources[namespace] || [];
         const futureAppsForNamespace = selectedFutureApps[namespace] || false;
         const isNamespaceLoaded = !!sourcesForNamespace.length;
@@ -15449,11 +15491,11 @@ const List$1 = ({ isModal = false, filterNamespaces, filterSources, selectedName
                                     source.numberOfInstances !== 1 && 's',
                                     " \u00B7 ",
                                     source.kind))));
-                    }))) : (React.createElement(NoDataFoundWrapper$1, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 1.5 }) : React.createElement(NoDataFound, { title: 'No sources available in this namespace', subTitle: 'Try searching again or select another namespace.' }))))));
+                    }))) : (React.createElement(NoDataFoundWrapper, null, namespacesLoading ? React.createElement(FadeLoader, { scale: 1.5 }) : React.createElement(NoDataFound, { title: 'No sources available in this namespace', subTitle: 'Try searching again or select another namespace.' }))))));
     })));
 };
 
-const FlexContainer$1 = styled.div `
+const FlexContainer = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -15462,133 +15504,19 @@ const FlexContainer$1 = styled.div `
 const SearchWrapper = styled.div `
   width: 444px;
 `;
-const Controls$1 = ({ selectedSources, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly }) => {
+const Controls = ({ selectedSources, searchText, setSearchText, showSelectedOnly, setShowSelectedOnly }) => {
     const selectedAppsCount = Object.values(selectedSources).reduce((prev, curr) => prev + curr.filter((s) => s.selected).length, 0);
     return (React.createElement(React.Fragment, null,
         React.createElement(SectionTitle, { title: 'Select Sources for Instrumentation', badgeLabel: selectedAppsCount, description: 'Select apps to monitor in each namespace. Odigos will instrument them and send telemetry data to your destinations.' }),
-        React.createElement(FlexContainer$1, { style: { marginTop: 24 } },
+        React.createElement(FlexContainer, { style: { marginTop: 24 } },
             React.createElement(SearchWrapper, null,
                 React.createElement(Input, { placeholder: 'Search Kubernetes Namespaces', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
             React.createElement(Toggle, { title: 'Show selected only', initialValue: showSelectedOnly, onChange: setShowSelectedOnly })),
         React.createElement(Divider, { margin: '16px 0' })));
 };
 
-const Fast = ({ isModal, ...props }) => {
-    return (React.createElement(ModalBody, { "$isNotModal": !isModal },
-        React.createElement(Controls$1, { ...props }),
-        React.createElement(List$1, { ...props })));
-};
-
-const Container$2 = styled.div `
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 12px;
-  height: fit-content;
-  padding-bottom: ${({ $isModal }) => ($isModal ? '48px' : '0')};
-  overflow-y: scroll;
-`;
-const ListItem = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 16px 0px;
-  transition: background 0.3s;
-  border-radius: 16px;
-  cursor: pointer;
-  background: ${({ $selected, theme }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['024'] : theme.colors.dropdown_bg_2 + Theme.opacity.hex['040'])};
-  &:hover {
-    background: ${({ $selected, theme }) => ($selected ? theme.colors.majestic_blue + Theme.opacity.hex['040'] : theme.colors.dropdown_bg_2 + Theme.opacity.hex['080'])};
-  }
-`;
-const ListItemContent = styled.div `
-  margin-left: 16px;
-  display: flex;
-  gap: 12px;
-`;
-const TextWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  height: 36px;
-  justify-content: space-between;
-`;
-const SelectedTextWrapper = styled.div `
-  margin-right: 24px;
-`;
-const NoDataFoundWrapper = styled.div `
-  margin-top: 80px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  height: 100%;
-  max-height: calc(100vh - 360px);
-  overflow-y: auto;
-`;
-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' }));
-    }
-    return (React.createElement(Container$2, { "$isModal": isModal }, filterSources().map((source) => {
-        const isSelected = selectedSources[selectedNamespace].find(({ name }) => name === source.name)?.selected || false;
-        return (React.createElement(ListItem, { key: `source-${source.name}`, "$selected": isSelected, onClick: () => onSelectSource(source) },
-            React.createElement(ListItemContent, null,
-                React.createElement(IconWrapped, { icon: FolderIcon }),
-                React.createElement(TextWrapper, null,
-                    React.createElement(Text, null, source.name),
-                    React.createElement(Text, { opacity: 0.8, size: 10 },
-                        source.numberOfInstances,
-                        " running instance",
-                        source.numberOfInstances !== 1 && 's',
-                        " \u00B7 ",
-                        source.kind))),
-            isSelected && (React.createElement(SelectedTextWrapper, null,
-                React.createElement(Checkbox, { value: true, allowPropagation: true })))));
-    })));
-};
-
-const FlexContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-`;
-const ToggleWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  gap: 32px;
-`;
-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;
-    return (React.createElement(React.Fragment, null,
-        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, { 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,
-                React.createElement(Text, null, "Selected apps"),
-                React.createElement(Badge, { label: selectedAppsCount, filled: !!selectedAppsCount })),
-            React.createElement(ToggleWrapper, null,
-                React.createElement(Toggle, { title: 'Select all', initialValue: !!selectedAppsCount && selectedAppsCount === sources.length, onChange: onSelectAll }),
-                React.createElement(Toggle, { title: 'Show selected only', initialValue: showSelectedOnly, onChange: setShowSelectedOnly }),
-                React.createElement(Checkbox, { title: 'Future apps', tooltip: 'Automatically instrument all future apps', value: futureApps, onChange: onSelectFutureApps }))),
-        React.createElement(Divider, { margin: '16px 0 24px' })));
-};
-
-const Simple = (props) => {
-    return (React.createElement(ModalBody, { "$isNotModal": !props.isModal },
-        React.createElement(Controls, { ...props }),
-        React.createElement(List, { ...props })));
-};
-
-const SourceSelectionForm = forwardRef(({ componentType, isModal, selectedNamespace, onSelectNamespace, namespace }, ref) => {
+const SourceSelectionForm = forwardRef((props, ref) => {
+    const { isModal, selectedNamespace, onSelectNamespace, namespace } = props;
     const formState = useSourceSelectionFormData({ selectedNamespace, onSelectNamespace, namespace });
     const { recordedInitialSources, getApiSourcesPayload, getApiFutureAppsPayload } = formState;
     useImperativeHandle(ref, () => ({
@@ -15598,17 +15526,12 @@ const SourceSelectionForm = forwardRef(({ componentType, isModal, selectedNamesp
             futureApps: getApiFutureAppsPayload(),
         }),
     }));
-    switch (componentType) {
-        case 'SIMPLE':
-            return React.createElement(Simple, { isModal: isModal, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, ...formState });
-        case 'FAST':
-            return React.createElement(Fast, { isModal: isModal, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, ...formState });
-        default:
-            return null;
-    }
+    return (React.createElement(ModalBody, { "$isNotModal": !isModal },
+        React.createElement(Controls, { ...props, ...formState }),
+        React.createElement(List, { ...props, ...formState })));
 });
 
-const SourceModal = ({ componentType = 'FAST', selectedNamespace, setSelectedNamespace, namespace, persistSources }) => {
+const SourceModal = ({ selectedNamespace, setSelectedNamespace, namespace, persistSources }) => {
     const { currentModal, setCurrentModal } = useModalStore();
     const isOpen = currentModal === EntityTypes.Source;
     const onSelectNamespace = (ns) => {
@@ -15634,7 +15557,7 @@ const SourceModal = ({ componentType = 'FAST', selectedNamespace, setSelectedNam
                     onClick: handleSubmit,
                 },
             ] }) },
-        React.createElement(SourceSelectionForm, { ref: formRef, componentType: componentType, isModal: true, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, namespace: namespace })));
+        React.createElement(SourceSelectionForm, { ref: formRef, isModal: true, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace, namespace: namespace })));
 };
 
 const columns = [
@@ -15935,7 +15858,7 @@ const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
         React.createElement(IconButton, { key: 'cli', onClick: toggleOpen, tooltip: TITLE_TEXT },
             React.createElement(TerminalIcon, { size: 18 })),
         React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: isOpen, onClose: toggleOpen, header: {
-                icon: TerminalIcon,
+                icons: [TerminalIcon],
                 title: TITLE_TEXT,
             }, footer: {
                 isOpen: false,