@odigos/ui-kit 0.0.79 → 0.0.81

package/lib/containers.js

@@ -1,21 +1,21 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-90ccd949.js';
+import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, k as ImageErrorIcon, a0 as useDarkMode } from './index-86030474.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-b674f184.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, a3 as Toggle, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-ae53c3d8.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-6034549d.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-c8aab9c4.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-4dfaeaab.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-c1a8e92c.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
-import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-807be8bc.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-19b8f8bc.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-845f2100.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-a067d6e9.js';
-import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-ba4f9a19.js';
+import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-cac1649d.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-72089d6e.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-50d05c9b.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-f22371cb.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, t as sleep, g as formatBytes, i as getContainersIcons, n as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, s as mapDestinationFieldsForDisplay, c as compareCondition, p as getYamlFieldsForDestination, m as getMetricForEntity, o as getWorkloadId, q as hasUnhealthyInstances, h as getContainersInstrumentedCount, r as isOverTime } from './index-8b736e84.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-b9d7a992.js';
+import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-6bb0eb56.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -503,7 +503,7 @@ const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$i = styled.div `
+const Container$h = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -514,7 +514,7 @@ const FieldTitle$2 = styled(Text) `
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$i, null,
+    return (React.createElement(Container$h, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$2, null, "Status"),
             React.createElement(Segment, { options: [
@@ -875,6 +875,64 @@ const ConditionsStatuses = ({ conditions, id }) => {
     })));
 };
 
+const buildSearchResults = ({ instrumentationRules, sources, actions, destinations, searchText, selectedCategory }) => {
+    const filteredRules = !searchText ? instrumentationRules : instrumentationRules.filter((rule) => rule.type?.toLowerCase().includes(searchText) || rule.ruleName?.toLowerCase().includes(searchText));
+    const filteredSources = !searchText
+        ? sources
+        : sources.filter((source) => source.name?.toLowerCase().includes(searchText) || source.otelServiceName?.toLowerCase().includes(searchText) || source.namespace?.toLowerCase().includes(searchText));
+    const filteredActions = !searchText ? actions : actions.filter((action) => action.type?.toLowerCase().includes(searchText) || action.spec.actionName?.toLowerCase().includes(searchText));
+    const filteredDestinations = !searchText
+        ? destinations
+        : destinations.filter((destination) => destination.destinationType.displayName?.toLowerCase().includes(searchText) || destination.name?.toLowerCase().includes(searchText));
+    const categories = [
+        {
+            category: EntityTypes.Source,
+            label: 'Sources',
+            count: filteredSources.length,
+            entities: [],
+        },
+        {
+            category: EntityTypes.Action,
+            label: 'Actions',
+            count: filteredActions.length,
+            entities: [],
+        },
+        {
+            category: EntityTypes.Destination,
+            label: 'Destinations',
+            count: filteredDestinations.length,
+            entities: [],
+        },
+        {
+            category: EntityTypes.InstrumentationRule,
+            label: 'Instrumentation Rules',
+            count: filteredRules.length,
+            entities: [],
+        },
+    ];
+    categories.unshift({
+        category: 'all',
+        label: 'All',
+        count: filteredRules.length + filteredSources.length + filteredActions.length + filteredDestinations.length,
+        entities: [],
+    });
+    const searchResults = categories
+        .filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
+        .map((item) => ({
+        ...item,
+        entities: item.category === EntityTypes.InstrumentationRule
+            ? filteredRules
+            : item.category === EntityTypes.Source
+                ? filteredSources
+                : item.category === EntityTypes.Action
+                    ? filteredActions
+                    : item.category === EntityTypes.Destination
+                        ? filteredDestinations
+                        : [],
+    }));
+    return { categories, searchResults };
+};
+
 const columns$3 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
@@ -890,7 +948,14 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
     const filters = useFilterStore();
     const { actions, actionsLoading } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const filtered = useMemo(() => filterActions(actions, filters), [actions, filters]);
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules: [],
+        sources: [],
+        actions: filterActions(actions, filters),
+        destinations: [],
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.Action,
+    }).searchResults.find(({ category }) => category === EntityTypes.Action)?.entities || []), [actions, filters]);
     const rows = useMemo(() => filtered.map((act) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(act.conditions || []);
         return {
@@ -942,8 +1007,18 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
             ],
         };
     }), [filtered]);
-    const badge = useMemo(() => (filtered.length !== actions.length ? `${filtered.length}/${actions.length}` : actions.length), [filtered, actions]);
-    const badgeTooltip = useMemo(() => (filtered.length !== actions.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, actions]);
+    const { badge, badgeTooltip } = useMemo(() => {
+        if (filtered.length !== actions.length) {
+            return {
+                badge: `${filtered.length}/${actions.length}`,
+                badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
+            };
+        }
+        return {
+            badge: actions.length,
+            badgeTooltip: undefined,
+        };
+    }, [filtered, actions]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.ACTIONS, badge: badge, badgeTooltip: badgeTooltip, loading: actionsLoading })),
@@ -953,7 +1028,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$h = styled(FlexColumn) `
+const Container$g = styled(FlexColumn) `
   // width: 100vw;
   // height: 100vh;
   gap: 64px;
@@ -966,7 +1041,7 @@ const TextWrap = styled(FlexColumn) `
   align-items: center;
   justify-content: center;
 `;
-const Title$3 = styled(Text) `
+const Title$1 = styled(Text) `
   text-align: center;
   font-size: 24px;
 `;
@@ -987,292 +1062,16 @@ const AwaitPipeline = () => {
     useEffect(() => {
         awaitPipeline();
     }, []);
-    return (React.createElement(Container$h, null,
+    return (React.createElement(Container$g, null,
         React.createElement(OdigosLogoText, { size: 100 }),
         React.createElement(TraceLoader, { width: 400 }),
         React.createElement(TextWrap, null,
             React.createElement(FlexRow, { "$gap": 16 },
-                React.createElement(Title$3, null, "Preparing your workspace..."),
+                React.createElement(Title$1, null, "Preparing your workspace..."),
                 React.createElement(Badge, { label: `${progress}%` })),
             React.createElement(Description, null, "It can take up to a few minutes. Grab a cup of coffee, look out a window, and enjoy your free moment!"))));
 };
 
-const Tab = styled(FlexRow) `
-  width: 260px;
-  padding: 4px;
-  gap: 10px;
-  border: 1px solid ${({ theme }) => theme.colors.border};
-  border-radius: 32px;
-  cursor: ${({ $withSelect }) => ($withSelect ? 'pointer' : 'default')};
-
-  ${({ $withSelect }) => $withSelect &&
-    css `
-      &:hover {
-        border: 1px solid ${({ theme }) => theme.colors.secondary};
-      }
-    `}
-`;
-const Title$2 = styled(Text) `
-  font-size: 14px;
-  margin-right: 10px;
-  color: ${({ theme }) => theme.text.secondary};
-`;
-const LogoWrap = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  border-radius: 100%;
-  background-color: ${({ theme }) => theme.colors.info};
-`;
-const PushToEnd$1 = styled.div `
-  margin-left: auto;
-  margin-right: 6px;
-`;
-const RelativeContainer$3 = styled.div `
-  position: relative;
-`;
-const AbsoluteContainer = 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 HeadWrap = styled.div `
-  border-bottom: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  padding: 12px;
-`;
-const FootWrap = styled.div `
-  border-top: ${({ theme }) => `1px solid ${theme.colors.border}`};
-  padding: 12px;
-`;
-const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) => {
-    const theme = Theme.useTheme();
-    const { addNotification } = useNotificationStore();
-    const [isOpen, setIsOpen] = useState(false);
-    const [searchText, setSearchText] = useState('');
-    const onClose = () => {
-        setIsOpen(false);
-    };
-    const containerRef = useRef(null);
-    useOnClickOutside(containerRef, onClose);
-    useKeyDown({ key: 'Escape', active: isOpen }, onClose);
-    const withSelect = !!connections.length;
-    const filtered = connections.filter(({ id }) => id.toLowerCase().includes(searchText));
-    const Icon = !!selected?.type ? getPlatformIcon(selected.type) : null;
-    return (React.createElement(RelativeContainer$3, { ref: containerRef },
-        React.createElement(Tab, { "$withSelect": withSelect, onClick: () => setIsOpen((prev) => !prev) },
-            React.createElement(LogoWrap, null, !!Icon ? React.createElement(Icon, { size: 20, fill: theme.text.info }) : React.createElement(OverviewIcon, { fill: theme.text.info })),
-            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, 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: () => {
-                    if (status === StatusType.Success) {
-                        onSelect(filtered[idx]);
-                    }
-                    else {
-                        addNotification({
-                            type: StatusType.Warning,
-                            title: 'Connection lost',
-                            message: 'Cannot connect to this platform',
-                            hideFromHistory: true,
-                        });
-                    }
-                    onClose();
-                }, color: 'transparent', style: { width: '100%', justifyContent: 'flex-start' } })))),
-            React.createElement(FootWrap, null,
-                React.createElement(Button, { variant: 'secondary', style: { width: '100%' }, onClick: onViewAll }, "VIEW ALL"))))));
-};
-
-const ComputePlatforms = ({ connections, onSelect }) => {
-    const { searchText, platformTypes, statuses } = useFilterStore();
-    const filtered = useMemo(() => connections.filter(({ id, type, status }) => (!searchText || id.toLowerCase().includes(searchText)) &&
-        (!platformTypes?.length || platformTypes.find((opt) => opt.id === type)) &&
-        (!statuses?.length || statuses.find((opt) => opt.id === status))), [connections, searchText, platformTypes, statuses]);
-    const rows = useMemo(() => filtered.map((item) => ({
-        onClick: () => onSelect(item),
-        cells: [
-            { columnKey: 'id', value: item.id },
-            { columnKey: 'type', value: item.type },
-            { columnKey: 'name', value: item.name || getPlatformLabel(item.type) },
-            { columnKey: 'icon', icon: getPlatformIcon(item.type) },
-            {
-                columnKey: 'status',
-                component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                    React.createElement(Status, { title: status === StatusType.Success ? 'connection alive' : 'connection lost', status: item.status, withIcon: true, withBorder: true }))),
-            },
-        ],
-    })), [filtered]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InteractiveTable, { columns: [
-                { key: 'icon', title: '' },
-                { key: 'name', title: 'Name' },
-                { key: 'type', title: 'Type' },
-                { key: 'status', title: 'Status' },
-                { key: 'id', title: 'Unique ID' },
-            ], rows: rows }),
-        !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
-            React.createElement(NoDataFound, null)))));
-};
-
-const ConditionDropdown = ({ sources, title = 'Condition', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        sources.forEach(({ conditions }) => {
-            conditions?.forEach(({ type, reason }) => {
-                if (!payload.find((opt) => opt.id === `${type}#${reason}`)) {
-                    payload.push({ id: `${type}#${reason}`, value: `${splitCamelString(type)} - ${splitCamelString(reason)}` });
-                }
-            });
-        });
-        return payload.sort((a, b) => a.id?.localeCompare(b.id || '') || 0);
-    }, [sources]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const ConnectionStatusDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        connections?.forEach(({ status }) => {
-            if (!payload.find((opt) => opt.id === status)) {
-                payload.push({ id: status, value: status });
-            }
-        });
-        return payload;
-    }, [connections]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Statuses', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const ConnectionTypeDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        connections?.forEach(({ type }) => {
-            if (!payload.find((opt) => opt.id === type)) {
-                payload.push({ id: type, value: type });
-            }
-        });
-        return payload;
-    }, [connections]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All Types', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const ErrorDropdown = ({ sources, title = 'Error Message', value, onSelect, onDeselect, disabled, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        // !! note:
-        // conditions no longer have "message" being a required string,
-        // instead, it is now optional and we should fallback to "reason" which is also optional.
-        sources.forEach(({ conditions }) => {
-            mapConditions(conditions || []).forEach(({ status, message, reason }) => {
-                if (status === StatusType.Error && !payload.find((opt) => opt.id === message)) {
-                    if (!!message) {
-                        if (!payload.find((opt) => opt.id === message))
-                            payload.push({ id: message, value: message });
-                    }
-                    else if (!!reason) {
-                        if (!payload.find((opt) => opt.id === reason))
-                            payload.push({ id: reason, value: reason });
-                    }
-                }
-            });
-        });
-        return payload;
-    }, [sources]);
-    return React.createElement(Dropdown, { disabled: disabled || !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const LanguageDropdown = ({ sources, title = 'Programming Language', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        sources.forEach(({ containers }) => {
-            containers?.forEach(({ language }) => {
-                if (!payload.find((opt) => opt.id === language)) {
-                    payload.push({ id: language, value: DISPLAY_LANGUAGES[language] || language });
-                }
-            });
-        });
-        return payload.sort((a, b) => a.id?.localeCompare(b.id || '') || 0);
-    }, [sources]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const MonitorDropdown = ({ title = 'Monitors', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        MONITORS_OPTIONS.forEach(({ id, value }) => {
-            if (!payload.find((opt) => opt.id === id))
-                payload.push({ id, value });
-        });
-        return payload;
-    }, []);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const NamespaceDropdown = ({ namespaces, title = 'Namespace', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        namespaces?.forEach(({ name }) => {
-            if (!payload.find((opt) => opt.id === name)) {
-                payload.push({ id: name, value: name });
-            }
-        });
-        return payload;
-    }, [namespaces]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'Select namespace', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const KindDropdown = ({ sources, title = 'Kind', value, onSelect, onDeselect, ...props }) => {
-    const options = useMemo(() => {
-        const payload = [];
-        sources.forEach(({ kind: id }) => {
-            if (!payload.find((opt) => opt.id === id)) {
-                payload.push({ id, value: id });
-            }
-        });
-        return payload;
-    }, [sources]);
-    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
-};
-
-const Container$g = styled.div `
-  display: flex;
-  align-items: center;
-  margin: 20px 0;
-  padding: 0 16px;
-  gap: 8px;
-`;
-const Title$1 = styled(Text) `
-  font-size: 24px;
-  white-space: nowrap;
-`;
-const SearchAndFilterWrapper = styled.div `
-  width: 200px;
-`;
-const ComputePlatformsActionsMenu = ({ connections }) => {
-    const { searchText, setSearchText, statuses, setStatuses, clearAll } = useFilterStore();
-    // cleanup filters on unmount
-    useEffect(() => {
-        return () => clearAll();
-    }, [clearAll]);
-    return (React.createElement(Container$g, null,
-        React.createElement(FlexRow, { "$gap": 16 },
-            React.createElement(FlexRow, { "$gap": 12 },
-                React.createElement(Title$1, null, "Compute platforms"),
-                React.createElement(Badge, { label: connections.length, filled: !!connections.length })),
-            React.createElement(Divider, { orientation: 'vertical', length: '20px', margin: '0' }),
-            React.createElement(SearchAndFilterWrapper, null,
-                React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(SearchAndFilterWrapper, null,
-                React.createElement(ConnectionStatusDropdown, { connections: connections, value: statuses, onSelect: (val) => setStatuses([...(statuses || []), val]), onDeselect: (val) => setStatuses((statuses || []).filter((opt) => opt.id !== val.id)), showSearch: true, required: true, isMulti: true })))));
-};
-
 const { nodeHeight: nodeHeight$5, framePadding: framePadding$4 } = nodeConfig;
 const createEdge = (edgeId, params) => {
     const { theme, label, isMultiTarget, isError, animated } = params || {};
@@ -1902,72 +1701,15 @@ styled.div `
   border-radius: 24px;
 `;
 
-const buildSearchResults = ({ instrumentationRules, sources, actions, destinations, searchText, selectedCategory }) => {
-    const filteredRules = !searchText ? instrumentationRules : instrumentationRules.filter((rule) => rule.type?.toLowerCase().includes(searchText) || rule.ruleName?.toLowerCase().includes(searchText));
-    const filteredSources = !searchText
-        ? sources
-        : sources.filter((source) => source.name?.toLowerCase().includes(searchText) || source.otelServiceName?.toLowerCase().includes(searchText) || source.namespace?.toLowerCase().includes(searchText));
-    const filteredActions = !searchText ? actions : actions.filter((action) => action.type?.toLowerCase().includes(searchText) || action.spec.actionName?.toLowerCase().includes(searchText));
-    const filteredDestinations = !searchText
-        ? destinations
-        : destinations.filter((destination) => destination.destinationType.displayName?.toLowerCase().includes(searchText) || destination.name?.toLowerCase().includes(searchText));
-    const categories = [
-        {
-            category: EntityTypes.Source,
-            label: 'Sources',
-            count: filteredSources.length,
-            entities: [],
-        },
-        {
-            category: EntityTypes.Action,
-            label: 'Actions',
-            count: filteredActions.length,
-            entities: [],
-        },
-        {
-            category: EntityTypes.Destination,
-            label: 'Destinations',
-            count: filteredDestinations.length,
-            entities: [],
-        },
-        {
-            category: EntityTypes.InstrumentationRule,
-            label: 'Instrumentation Rules',
-            count: filteredRules.length,
-            entities: [],
-        },
-    ];
-    categories.unshift({
-        category: 'all',
-        label: 'All',
-        count: filteredRules.length + filteredSources.length + filteredActions.length + filteredDestinations.length,
-        entities: [],
-    });
-    const searchResults = categories
-        .filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
-        .map((item) => ({
-        ...item,
-        entities: item.category === EntityTypes.InstrumentationRule
-            ? filteredRules
-            : item.category === EntityTypes.Source
-                ? filteredSources
-                : item.category === EntityTypes.Action
-                    ? filteredActions
-                    : item.category === EntityTypes.Destination
-                        ? filteredDestinations
-                        : [],
-    }));
-    return { categories, searchResults };
-};
-
 const HorizontalScroll = styled.div `
   display: flex;
   align-items: center;
   overflow-x: scroll;
 `;
-const SearchResults = ({ searchText, onClose }) => {
+const SearchResults = ({ onClose }) => {
     const theme = Theme.useTheme();
     const { onClickNode } = useClickNode();
+    const { searchText } = useFilterStore();
     const { selectedStreamName } = useDataStreamStore();
     const { sources, destinations, actions, instrumentationRules } = useEntityStore();
     const { popupRef, popupOpen, setPopupOpen, popupPosition, handlePosition } = usePopup();
@@ -2002,19 +1744,113 @@ const SearchResults = ({ searchText, onClose }) => {
         React.createElement(Divider, { thickness: catIdx === searchResults.length - 1 ? 0 : 1, length: '90%', margin: '8px auto' }))))));
 };
 
-const Search = () => {
-    const [input, setInput] = useState('');
+const Search = ({ preventPopup = false }) => {
+    const { searchText, setSearchText } = useFilterStore();
     const [focused, setFocused] = useState(false);
+    const isOpen = !!searchText || focused;
     const onClose = () => {
-        setInput('');
+        setSearchText('');
         setFocused(false);
     };
     const containerRef = useRef(null);
-    useOnClickOutside(containerRef, () => setFocused(false));
-    useKeyDown({ key: 'Escape', active: !!input || focused }, onClose);
+    useOnClickOutside(containerRef, onClose);
+    useKeyDown({ key: 'Escape', active: isOpen }, onClose);
     return (React.createElement(RelativeContainer$2, { ref: containerRef },
-        React.createElement(Input, { placeholder: 'Search', icon: SearchIcon, value: input, onChange: (e) => setInput(e.target.value.toLowerCase()), onFocus: () => setFocused(true) }),
-        !!input || focused ? React.createElement(SearchResults, { searchText: input, onClose: onClose }) : null));
+        React.createElement(Input, { placeholder: 'Search', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()), onFocus: () => setFocused(true) }),
+        isOpen && !preventPopup ? React.createElement(SearchResults, { onClose: onClose }) : null));
+};
+
+const ConditionDropdown = ({ sources, title = 'Condition', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        sources.forEach(({ conditions }) => {
+            conditions?.forEach(({ type, reason }) => {
+                if (!payload.find((opt) => opt.id === `${type}#${reason}`)) {
+                    payload.push({ id: `${type}#${reason}`, value: `${splitCamelString(type)} - ${splitCamelString(reason)}` });
+                }
+            });
+        });
+        return payload.sort((a, b) => a.id?.localeCompare(b.id || '') || 0);
+    }, [sources]);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
+const ErrorDropdown = ({ sources, title = 'Error Message', value, onSelect, onDeselect, disabled, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        // !! note:
+        // conditions no longer have "message" being a required string,
+        // instead, it is now optional and we should fallback to "reason" which is also optional.
+        sources.forEach(({ conditions }) => {
+            mapConditions(conditions || []).forEach(({ status, message, reason }) => {
+                if (status === StatusType.Error && !payload.find((opt) => opt.id === message)) {
+                    if (!!message) {
+                        if (!payload.find((opt) => opt.id === message))
+                            payload.push({ id: message, value: message });
+                    }
+                    else if (!!reason) {
+                        if (!payload.find((opt) => opt.id === reason))
+                            payload.push({ id: reason, value: reason });
+                    }
+                }
+            });
+        });
+        return payload;
+    }, [sources]);
+    return React.createElement(Dropdown, { disabled: disabled || !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
+const LanguageDropdown = ({ sources, title = 'Programming Language', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        sources.forEach(({ containers }) => {
+            containers?.forEach(({ language }) => {
+                if (!payload.find((opt) => opt.id === language)) {
+                    payload.push({ id: language, value: DISPLAY_LANGUAGES[language] || language });
+                }
+            });
+        });
+        return payload.sort((a, b) => a.id?.localeCompare(b.id || '') || 0);
+    }, [sources]);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
+const MonitorDropdown = ({ title = 'Monitors', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        MONITORS_OPTIONS.forEach(({ id, value }) => {
+            if (!payload.find((opt) => opt.id === id))
+                payload.push({ id, value });
+        });
+        return payload;
+    }, []);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
+const NamespaceDropdown = ({ namespaces, title = 'Namespace', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        namespaces?.forEach(({ name }) => {
+            if (!payload.find((opt) => opt.id === name)) {
+                payload.push({ id: name, value: name });
+            }
+        });
+        return payload;
+    }, [namespaces]);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'Select namespace', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
+};
+
+const KindDropdown = ({ sources, title = 'Kind', value, onSelect, onDeselect, ...props }) => {
+    const options = useMemo(() => {
+        const payload = [];
+        sources.forEach(({ kind: id }) => {
+            if (!payload.find((opt) => opt.id === id)) {
+                payload.push({ id, value: id });
+            }
+        });
+        return payload;
+    }, [sources]);
+    return React.createElement(Dropdown, { disabled: !options?.length, title: title, placeholder: 'All', options: options, value: value, onSelect: onSelect, onDeselect: onDeselect, ...props });
 };
 
 const FormWrapper = styled.div `
@@ -2248,11 +2084,11 @@ const Container$c = styled.div `
 const PushToEnd = styled.div `
   margin-left: auto;
 `;
-const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
+const DataFlowActionsMenu = ({ addEntity, preventSearchPopup, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const { setCurrentModal } = useModalStore();
     return (React.createElement(Container$c, null,
         React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream, updateDataStream: updateDataStream, deleteDataStream: deleteDataStream }),
-        React.createElement(Search, null),
+        React.createElement(Search, { preventPopup: preventSearchPopup }),
         React.createElement(Filters$1, null),
         addEntity && (React.createElement(PushToEnd, null,
             React.createElement(AddButton, { "data-id": `add-${addEntity}`, onClick: () => setCurrentModal(addEntity), label: `${BUTTON_TEXTS.ADD} ${addEntity}`, variant: 'primary' })))));
@@ -2972,8 +2808,15 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const { destinations, destinationsLoading } = useEntityStore();
     const destinationsByStream = useMemo(() => filterDestinationsByStream(destinations, selectedStreamName), [destinations, selectedStreamName]);
-    const filteredDestinations = useMemo(() => filterDestinations(destinationsByStream, filters), [destinationsByStream, filters]);
-    const rows = useMemo(() => filteredDestinations.map((dest) => {
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules: [],
+        sources: [],
+        actions: [],
+        destinations: filterDestinations(destinationsByStream, filters),
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.Destination,
+    }).searchResults.find(({ category }) => category === EntityTypes.Destination)?.entities || []), [destinationsByStream, filters]);
+    const rows = useMemo(() => filtered.map((dest) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(dest.conditions || []);
         const { icon, iconSrc } = getDestinationIcon(dest.destinationType.type);
         return {
@@ -3017,11 +2860,11 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
             ],
         };
-    }), [filteredDestinations, metrics]);
+    }), [filtered, metrics]);
     const { badge, badgeTooltip } = useMemo(() => {
-        if (filteredDestinations.length !== destinationsByStream.length) {
+        if (filtered.length !== destinationsByStream.length) {
             return {
-                badge: `${filteredDestinations.length}/${destinationsByStream.length}`,
+                badge: `${filtered.length}/${destinationsByStream.length}`,
                 badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
             };
         }
@@ -3029,13 +2872,13 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
             badge: destinationsByStream.length,
             badgeTooltip: undefined,
         };
-    }, [filteredDestinations, destinationsByStream]);
+    }, [filtered, destinationsByStream]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Destination), title: DISPLAY_TITLES.DESTINATIONS, badge: badge, badgeTooltip: badgeTooltip, loading: destinationsLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$2, rows: rows })),
-        !filteredDestinations.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+        !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
@@ -3496,11 +3339,20 @@ const columns$1 = [
 ];
 const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
+    const filters = useFilterStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const { instrumentationRules, instrumentationRulesLoading } = useEntityStore();
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules,
+        sources: [],
+        actions: [],
+        destinations: [],
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.InstrumentationRule,
+    }).searchResults.find(({ category }) => category === EntityTypes.InstrumentationRule)?.entities || []), [instrumentationRules, filters]);
     const rows = useMemo(() => 
     // note: rules do not have filters yet
-    instrumentationRules.map((rule) => {
+    filtered.map((rule) => {
         return {
             onClick: () => {
                 setDrawerType(EntityTypes.InstrumentationRule);
@@ -3549,13 +3401,25 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
                 },
             ],
         };
-    }), [instrumentationRules]);
+    }), [filtered]);
+    const { badge, badgeTooltip } = useMemo(() => {
+        if (filtered.length !== instrumentationRules.length) {
+            return {
+                badge: `${filtered.length}/${instrumentationRules.length}`,
+                badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
+            };
+        }
+        return {
+            badge: instrumentationRules.length,
+            badgeTooltip: undefined,
+        };
+    }, [filtered, instrumentationRules]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.INSTRUMENTATION_RULES, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.INSTRUMENTATION_RULES, badge: badge, badgeTooltip: badgeTooltip, loading: instrumentationRulesLoading })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$1, rows: rows })),
-        !instrumentationRules.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+        !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null)))));
 };
 
@@ -4262,11 +4126,11 @@ const Describe$1 = ({ source, fetchSourceDescribe }) => {
         });
     }, [fetchSourceDescribe, source]);
     if (!describe && !failed) {
-        return (React.createElement(CenterThis, null,
+        return (React.createElement(CenterThis, { "$height": '70vh' },
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, null,
-        React.createElement(NoDataFound, { subTitle: 'Could not fetch describe for this source' }))) : !describe?.pods?.length ? (React.createElement(CenterThis, null,
+    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, { "$height": '70vh' },
+        React.createElement(NoDataFound, { subTitle: 'Could not fetch describe for this source' }))) : !describe?.pods?.length ? (React.createElement(CenterThis, { "$height": '70vh' },
         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 || hasUnhealthyInstances(containers);
         const podStatus = podHasErrors ? StatusType.Error : StatusType.Success;
@@ -4330,11 +4194,11 @@ const Libraries = ({ source, fetchSourceLibraries }) => {
         });
     }, [fetchSourceLibraries, source]);
     if (!libraries && !failed) {
-        return (React.createElement(CenterThis, null,
+        return (React.createElement(CenterThis, { "$height": '70vh' },
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, null,
-        React.createElement(NoDataFound, { subTitle: 'Could not fetch libraries for this source' }))) : !libraries?.length ? (React.createElement(CenterThis, { "$gap": 12 },
+    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, { "$height": '70vh' },
+        React.createElement(NoDataFound, { subTitle: 'Could not fetch libraries for this source' }))) : !libraries?.length ? (React.createElement(CenterThis, { "$height": '70vh', "$gap": 12 },
         React.createElement(NoDataFound, { title: 'No libraries found', subTitle: '' }),
         React.createElement(NotificationNote, { type: StatusType.Warning, message: 'This feature is in early development, and has very limited support' }))) : (React.createElement(DataCard, { title: 'Instrumented Libraries' }, libraries.map(({ name, nonIdentifyingAttributes }, i) => (React.createElement(Fragment, { key: `library-${name}` },
         React.createElement(Row, null,
@@ -4387,10 +4251,10 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
     const [fetchedSource, setFetchedSource] = useState(null);
     // this is used to fetch the source on drawer open, so we ensure we have the latest data
     useEffect(() => {
-        if (!isOpen || !drawerEntityId)
+        if (!isOpen || !drawerEntityId || !!fetchedSource)
             return;
         fetchSourceById(drawerEntityId).then((source) => setFetchedSource(source || null));
-    }, [isOpen, drawerEntityId]);
+    }, [isOpen, drawerEntityId, fetchedSource]);
     const { formData, handleFormChange, resetFormData, loadFormWithDrawerItem } = useSourceFormData();
     const thisItem = useMemo(() => {
         if (!isOpen)
@@ -4446,6 +4310,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
     const handleDelete = async () => {
         const { namespace } = thisItem;
         persistSources({ [namespace]: [{ ...thisItem, selected: false, currentStreamName: selectedStreamName }] }, {});
+        setFetchedSource(null);
         setIsFormDirty(false);
         setIsEditing(false);
         resetFormData();
@@ -4456,6 +4321,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
         const title = formData.otelServiceName !== thisItem.name ? formData.otelServiceName : '';
         handleFormChange('otelServiceName', title);
         await updateSource(drawerEntityId, { ...formData, otelServiceName: title });
+        setFetchedSource(null);
         setIsFormDirty(false);
         setIsEditing(false);
     };
@@ -4567,7 +4433,14 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         return 1;
     }, [sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted]);
     const sourcesByStream = useMemo(() => filterSourcesByStream(sources, selectedStreamName), [sources, selectedStreamName]);
-    const filteredSources = useMemo(() => filterSources(sourcesByStream, filters), [sourcesByStream, filters]);
+    const filtered = useMemo(() => (buildSearchResults({
+        instrumentationRules: [],
+        sources: filterSources(sourcesByStream, filters),
+        actions: [],
+        destinations: [],
+        searchText: filters.searchText,
+        selectedCategory: EntityTypes.Source,
+    }).searchResults.find(({ category }) => category === EntityTypes.Source)?.entities || []), [sourcesByStream, filters]);
     const [hasSelected, totalSelectedSources] = useMemo(() => {
         let num = 0;
         Object.values(selectedSources).forEach((selectedSources) => {
@@ -4578,7 +4451,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     const onSelectAll = useCallback((bool) => {
         if (bool) {
             const payload = {};
-            filteredSources.forEach((source) => {
+            filtered.forEach((source) => {
                 const id = { namespace: source.namespace, name: source.name, kind: source.kind };
                 const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
                 if (!isPending) {
@@ -4595,7 +4468,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         else {
             setSelectedSources({});
         }
-    }, [filteredSources]);
+    }, [filtered]);
     const onSelectOne = useCallback((source) => {
         const { namespace, name, kind } = source;
         const payload = { ...selectedSources };
@@ -4610,7 +4483,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         }
         setSelectedSources(payload);
     }, [selectedSources]);
-    const rows = useMemo(() => filteredSources.map((source) => {
+    const rows = useMemo(() => filtered.map((source) => {
         const id = getWorkloadId(source);
         const idString = JSON.stringify(id);
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(source.conditions || []);
@@ -4660,11 +4533,11 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
             ],
         };
-    }), [filteredSources, selectedSources, metrics, onSelectOne]);
+    }), [filtered, selectedSources, metrics, onSelectOne]);
     const { badge, badgeTooltip } = useMemo(() => {
-        if (filteredSources.length !== sourcesByStream.length) {
+        if (filtered.length !== sourcesByStream.length) {
             return {
-                badge: `${filteredSources.length}/${sourcesByStream.length}`,
+                badge: `${filtered.length}/${sourcesByStream.length}`,
                 badgeTooltip: DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP,
             };
         }
@@ -4672,10 +4545,10 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
             badge: sourcesByStream.length,
             badgeTooltip: undefined,
         };
-    }, [filteredSources, sourcesByStream]);
+    }, [filtered, sourcesByStream]);
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
-            React.createElement(Checkbox, { partiallyChecked: hasSelected && filteredSources?.length !== totalSelectedSources, value: hasSelected && filteredSources?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filteredSources?.length }),
+            React.createElement(Checkbox, { partiallyChecked: hasSelected && filtered?.length !== totalSelectedSources, value: hasSelected && filtered?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filtered?.length }),
             React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.SOURCES, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows })),
@@ -4685,7 +4558,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 React.createElement(Text, { color: theme.text.info },
                     !!sourcesToCreate ? 'Instrumenting' : 'Uninstrumenting',
                     " workloads..."),
-                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filteredSources.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filtered.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null))) : null));
 };
 
@@ -5279,4 +5152,4 @@ const ToggleDarkMode = () => {
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConditionDropdown, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DataStreamDrawer, DataStreamForm, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, ServiceMap, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, SystemSettings, TableCellConditions, ToastList, ToggleDarkMode };
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ConditionDropdown, DataFlow, DataFlowActionsMenu, DataStreamDrawer, DataStreamForm, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, ServiceMap, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, SystemSettings, TableCellConditions, ToastList, ToggleDarkMode };