@odigos/ui-kit 0.0.9 → 0.0.11

package/lib/containers.js

@@ -1,20 +1,20 @@
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef, useMemo, useId, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CZe2VX28.js';
-import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-Cu2uHOuh.js';
-import { ACTION_TYPE, ENTITY_TYPES, NOTIFICATION_TYPE, CRUD, OTHER_STATUS, NODE_TYPES, ADD_NODE_TYPES, EDGE_TYPES, FIELD_TYPES, SIGNAL_TYPE, CODE_ATTRIBUTES_KEY_TYPES, PAYLOAD_COLLECTION_KEY_TYPES, INSTRUMENTATION_RULE_TYPE } from './types.js';
-import { f as DATA_CARD_FIELD_TYPES, p as FieldLabel, b as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, U as Text, O as Segment, S as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, V as TextArea, k as Drawer, h as DeleteWarning, C as CancelWarning, d as ConditionDetails, D as DataCard, M as Modal, N as NavigationButtons, a2 as ModalBody, A as AutocompleteInput, i as Divider, Q as Status, _ as FlexRow, X as Tooltip, s as IconWrapped, G as MonitorsIcons, $ as FlexColumn, r as IconTitleBadge, y as InteractiveTable, a0 as CenterThis, J as NoDataFound, Y as TraceLoader, a as Badge, B as Button, E as ExtendArrow, n as Dropdown, a3 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, P as SkeletonLoader, W as Toggle, L as NotificationNote, R as Stepper, I as IconButton, e as DataCardFields, t as IconsNav, q as IconGroup } from './index-m62aT4IR.js';
-import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DIcomki-.js';
+import { A as ACTION_OPTIONS, M as MONITORS_OPTIONS, I as INSTRUMENTATION_RULE_OPTIONS } from './index-CJKFedQi.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-B_fzHjxk.js';
+import { g as usePendingStore, f as useNotificationStore, a as useDrawerStore, b as useEntityStore, e as useModalStore, c as useFilterStore, s as styleInject, h as useSelectedStore, d as useInstrumentStore, k as getEntityId, i as useSetupStore, u as useDarkMode } from './index-DYEcdkUF.js';
 import 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-ixs381n-.js';
+import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-9ObpINp4.js';
 import { C as CrossCircledIcon, E as EditIcon, O as OdigosLogoText, b as OverviewIcon, F as FilterIcon, N as NotificationIcon, S as SlackLogo, a as FolderIcon, K as KeyIcon, T as TerminalIcon } from './index-3KUV6Vlt.js';
-import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-BumPE6cF.js';
-import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BY6B70Kf.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-Dfxjcy-C.js';
+import { g as getActionIcon, a as getInstrumentationRuleIcon } from './index-Db_ZDrEr.js';
+import { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-BnlRp8m3.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-CFmm4scp.js';
 import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-D_Qn2U89.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-Bc8gi9FH.js';
-import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-g6Twdelv.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-CYn62h8x.js';
+import { f as filterActions, g as getConditionsBooleans, j as getEntityLabel, i as getEntityIcon, s as sleep$1, l as getPlatformIcon, m as getPlatformLabel, d as formatBytes, h as getContainersIcons, n as getValueForRange, b as filterSources, a as filterDestinations, c as compareCondition, k as getMetricForEntity, e as getContainersInstrumentedCount, o as isOverTime } from './index-BtuW12KL.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
@@ -26,24 +26,24 @@ import 'babel-runtime/helpers/createClass';
 import 'babel-runtime/helpers/possibleConstructorReturn';
 import 'babel-runtime/helpers/inherits';
 import 'object-assign';
-import './index-BFct3S32.js';
+import './index-7-KCQK-x.js';
 
 const buildCard$3 = (action) => {
     const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
     const arr = [
         { title: DISPLAY_TITLES.TYPE, value: type },
-        { type: DATA_CARD_FIELD_TYPES.ACTIVE_STATUS, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
-        { type: DATA_CARD_FIELD_TYPES.MONITORS, title: DISPLAY_TITLES.SIGNALS_FOR_PROCESSING, value: signals.map((str) => str.toLowerCase()).join(', ') },
+        { type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
+        { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.SIGNALS_FOR_PROCESSING, value: signals.map((str) => str.toLowerCase()).join(', ') },
         { title: DISPLAY_TITLES.NAME, value: actionName },
         { title: DISPLAY_TITLES.NOTES, value: notes },
-        { type: DATA_CARD_FIELD_TYPES.DIVIDER },
+        { type: DataCardFieldTypes.Divider },
     ];
-    if (type === ACTION_TYPE.K8S_ATTRIBUTES) {
+    if (type === ActionType.K8sAttributes) {
         arr.push({ title: 'Collect Container Attributes', value: String(collectContainerAttributes) });
         arr.push({ title: 'Collect Workload ID', value: String(collectWorkloadId) });
         arr.push({ title: 'Collect Cluster ID', value: String(collectClusterId) });
         if (!!labelsAttributes?.length)
-            arr.push({ type: DATA_CARD_FIELD_TYPES.DIVIDER });
+            arr.push({ type: DataCardFieldTypes.Divider });
         labelsAttributes?.forEach(({ labelKey, attributeKey }, idx) => {
             let str = '';
             str += `Label Key: ${labelKey}\n`;
@@ -51,7 +51,7 @@ const buildCard$3 = (action) => {
             arr.push({ title: `Label${labelsAttributes.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
         });
         if (!!annotationsAttributes?.length)
-            arr.push({ type: DATA_CARD_FIELD_TYPES.DIVIDER });
+            arr.push({ type: DataCardFieldTypes.Divider });
         annotationsAttributes?.forEach(({ annotationKey, attributeKey }, idx) => {
             let str = '';
             str += `Annotation Key: ${annotationKey}\n`;
@@ -59,7 +59,7 @@ const buildCard$3 = (action) => {
             arr.push({ title: `Annotation${annotationsAttributes.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
         });
     }
-    if (type === ACTION_TYPE.ADD_CLUSTER_INFO) {
+    if (type === ActionType.AddClusterInfo) {
         let str = '';
         clusterAttributes?.forEach(({ attributeName, attributeStringValue }, idx) => {
             str += `${attributeName}: ${attributeStringValue}`;
@@ -68,7 +68,7 @@ const buildCard$3 = (action) => {
         });
         arr.push({ title: 'Attributes', value: str });
     }
-    if (type === ACTION_TYPE.DELETE_ATTRIBUTES) {
+    if (type === ActionType.DeleteAttributes) {
         let str = '';
         attributeNamesToDelete?.forEach((attributeName, idx) => {
             str += attributeName;
@@ -77,7 +77,7 @@ const buildCard$3 = (action) => {
         });
         arr.push({ title: 'Attributes', value: str });
     }
-    if (type === ACTION_TYPE.RENAME_ATTRIBUTES) {
+    if (type === ActionType.RenameAttributes) {
         let str = '';
         const entries = Object.entries(renames || {});
         entries.forEach(([oldName, newName], idx) => {
@@ -87,7 +87,7 @@ const buildCard$3 = (action) => {
         });
         arr.push({ title: 'Attributes', value: str });
     }
-    if (type === ACTION_TYPE.PII_MASKING) {
+    if (type === ActionType.PiiMasking) {
         let str = '';
         piiCategories?.forEach((attributeName, idx) => {
             str += attributeName;
@@ -96,13 +96,13 @@ const buildCard$3 = (action) => {
         });
         arr.push({ title: 'Categories', value: str });
     }
-    if (type === ACTION_TYPE.ERROR_SAMPLER) {
+    if (type === ActionType.ErrorSampler) {
         arr.push({ title: 'Sampling Ratio', value: String(fallbackSamplingRatio) });
     }
-    if (type === ACTION_TYPE.PROBABILISTIC_SAMPLER) {
+    if (type === ActionType.ProbabilisticSampler) {
         arr.push({ title: 'Sampling Percentage', value: String(samplingPercentage) });
     }
-    if (type === ACTION_TYPE.LATENCY_SAMPLER) {
+    if (type === ActionType.LatencySampler) {
         endpointsFilters?.forEach(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }, idx) => {
             let str = '';
             str += `Service Name: ${serviceName}\n`;
@@ -291,14 +291,14 @@ const ProbabilisticSampler = ({ value, setValue, formErrors }) => {
 };
 
 const componentsMap$1 = {
-    [ACTION_TYPE.K8S_ATTRIBUTES]: K8sAttributes,
-    [ACTION_TYPE.ADD_CLUSTER_INFO]: AddClusterInfo,
-    [ACTION_TYPE.DELETE_ATTRIBUTES]: DeleteAttributes,
-    [ACTION_TYPE.RENAME_ATTRIBUTES]: RenameAttributes,
-    [ACTION_TYPE.PII_MASKING]: PiiMasking,
-    [ACTION_TYPE.ERROR_SAMPLER]: ErrorSampler,
-    [ACTION_TYPE.PROBABILISTIC_SAMPLER]: ProbabilisticSampler,
-    [ACTION_TYPE.LATENCY_SAMPLER]: LatencySampler,
+    [ActionType.K8sAttributes]: K8sAttributes,
+    [ActionType.AddClusterInfo]: AddClusterInfo,
+    [ActionType.DeleteAttributes]: DeleteAttributes,
+    [ActionType.RenameAttributes]: RenameAttributes,
+    [ActionType.PiiMasking]: PiiMasking,
+    [ActionType.ErrorSampler]: ErrorSampler,
+    [ActionType.ProbabilisticSampler]: ProbabilisticSampler,
+    [ActionType.LatencySampler]: LatencySampler,
 };
 const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     if (!actionType)
@@ -341,7 +341,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [isCancelModalOpen, setIsCancelModalOpen] = useState(false);
     const titleRef = useRef(null);
-    const isSource = drawerType === ENTITY_TYPES.SOURCE;
+    const isSource = drawerType === EntityTypes.Source;
     const closeDrawer = () => {
         setDrawerType(null);
         setDrawerEntityId(null);
@@ -361,7 +361,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
         closeWarningModals();
     };
     const clickCancel = () => {
-        const isTitleDirty = titleRef.current?.getTitle() !== title;
+        const isTitleDirty = titleRef.current?.isTitleDirty();
         if (isFormDirty || isTitleDirty) {
             setIsCancelModalOpen(true);
         }
@@ -391,7 +391,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
     }, [drawerType, drawerEntityId]);
     const handlePending = (action) => {
         addNotification({
-            type: NOTIFICATION_TYPE.WARNING,
+            type: StatusType.Warning,
             title: 'Pending',
             message: `Cannot click ${action}, ${drawerType} is pending`,
             hideFromHistory: true,
@@ -422,7 +422,7 @@ const OverviewDrawer = ({ children, width = 640, title, titleTooltip, icon, icon
                 iconSrc,
                 title,
                 titleTooltip,
-                replaceTitleWith: !isSource && isEdit ? () => React.createElement(EditTitle, { ref: titleRef, title: title }) : undefined,
+                replaceTitleWith: !isSource && isEdit ? React.createElement(EditTitle, { ref: titleRef, title: title }) : undefined,
                 actionButtons,
                 tabs,
             }, footer: {
@@ -461,7 +461,8 @@ const EditTitle = forwardRef(({ title }, ref) => {
         setInputValue(title);
     }, [title]);
     useImperativeHandle(ref, () => ({
-        getTitle: () => inputValue,
+        getTitle: () => inputValue || title,
+        isTitleDirty: () => inputValue !== title,
         clearTitle: () => setInputValue(title),
     }));
     return React.createElement(Input, { "data-id": 'title', value: inputValue, onChange: (e) => setInputValue(e.target.value) });
@@ -482,7 +483,7 @@ const DataContainer$3 = styled.div `
 const ActionDrawer = ({ updateAction, deleteAction }) => {
     const { actions } = useEntityStore();
     const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
-    const isOpen = drawerType !== ENTITY_TYPES.ACTION;
+    const isOpen = drawerType !== EntityTypes.Action;
     const onClose = () => {
         setDrawerType(null);
         setDrawerEntityId(null);
@@ -520,7 +521,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
         onClose();
     };
     const handleSave = (newTitle) => {
-        if (validateForm({ withAlert: true, alertTitle: CRUD.UPDATE })) {
+        if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
             const title = newTitle !== thisItem.type ? newTitle : '';
             handleFormChange('name', title);
             updateAction(drawerEntityId, { ...formData, name: title });
@@ -539,7 +540,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
 
 const ActionModal = ({ createAction }) => {
     const { currentModal, setCurrentModal } = useModalStore();
-    const isOpen = currentModal === ENTITY_TYPES.ACTION;
+    const isOpen = currentModal === EntityTypes.Action;
     const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useActionFormData();
     const [selectedItem, setSelectedItem] = useState(undefined);
     const handleClose = () => {
@@ -553,7 +554,7 @@ const ActionModal = ({ createAction }) => {
         setSelectedItem(item);
     };
     const handleSubmit = () => {
-        const isFormOk = validateForm({ withAlert: true, alertTitle: CRUD.CREATE });
+        const isFormOk = validateForm({ withAlert: true, alertTitle: Crud.Create });
         if (!isFormOk)
             return null;
         createAction(formData);
@@ -579,7 +580,7 @@ const ActionModal = ({ createAction }) => {
 const buildSpecCell$1 = (action) => {
     const { type, spec: { collectContainerAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
     let str = '';
-    if (type === ACTION_TYPE.K8S_ATTRIBUTES) {
+    if (type === ActionType.K8sAttributes) {
         if (collectContainerAttributes)
             str += 'Container Attributes, ';
         if (collectWorkloadId)
@@ -595,21 +596,21 @@ const buildSpecCell$1 = (action) => {
                 ;
         });
     }
-    if (type === ACTION_TYPE.ADD_CLUSTER_INFO) {
+    if (type === ActionType.AddClusterInfo) {
         clusterAttributes?.forEach(({ attributeName, attributeStringValue }, idx) => {
             str += `${attributeName}: ${attributeStringValue}`;
             if (idx < clusterAttributes.length - 1)
                 str += ', ';
         });
     }
-    if (type === ACTION_TYPE.DELETE_ATTRIBUTES) {
+    if (type === ActionType.DeleteAttributes) {
         attributeNamesToDelete?.forEach((attributeName, idx) => {
             str += attributeName;
             if (idx < attributeNamesToDelete.length - 1)
                 str += ', ';
         });
     }
-    if (type === ACTION_TYPE.RENAME_ATTRIBUTES) {
+    if (type === ActionType.RenameAttributes) {
         const entries = Object.entries(renames || {});
         entries.forEach(([oldName, newName], idx) => {
             str += `${oldName}: ${newName}`;
@@ -617,21 +618,21 @@ const buildSpecCell$1 = (action) => {
                 str += ', ';
         });
     }
-    if (type === ACTION_TYPE.PII_MASKING) {
+    if (type === ActionType.PiiMasking) {
         piiCategories?.forEach((attributeName, idx) => {
             str += attributeName;
             if (idx < piiCategories.length - 1)
                 str += ', ';
         });
     }
-    if (type === ACTION_TYPE.ERROR_SAMPLER) {
+    if (type === ActionType.ErrorSampler) {
         str += String(fallbackSamplingRatio);
     }
-    if (type === ACTION_TYPE.PROBABILISTIC_SAMPLER) {
+    if (type === ActionType.ProbabilisticSampler) {
         str += String(samplingPercentage);
         str += '%';
     }
-    if (type === ACTION_TYPE.LATENCY_SAMPLER) {
+    if (type === ActionType.LatencySampler) {
         endpointsFilters?.forEach(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }, idx) => {
             str += `Endpoint${endpointsFilters.length > 1 ? ` #${idx + 1}` : ''}=${serviceName}${httpRoute}`;
             str += ` Latency=${minimumLatencyThreshold}`;
@@ -644,32 +645,27 @@ const buildSpecCell$1 = (action) => {
 };
 
 const TableCellConditions = ({ conditions }) => {
-    const errors = useMemo(() => conditions?.filter(({ status }) => status === NOTIFICATION_TYPE.ERROR) || [], [conditions]);
-    const warnings = useMemo(() => conditions?.filter(({ status }) => status === NOTIFICATION_TYPE.WARNING) || [], [conditions]);
-    const disableds = useMemo(() => conditions?.filter(({ status }) => status === OTHER_STATUS.DISABLED) || [], [conditions]);
-    const isLoading = useMemo(() => !conditions?.length || !!conditions?.find(({ status }) => status === OTHER_STATUS.LOADING), [conditions]);
-    return (React.createElement("div", { style: { lineHeight: 1 } }, errors.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: errors })) : warnings.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: warnings })) : disableds.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: disableds })) : isLoading ? (React.createElement(Status, { status: OTHER_STATUS.LOADING, title: OTHER_STATUS.LOADING, withBorder: true, withIcon: true })) : (React.createElement(Status, { status: NOTIFICATION_TYPE.SUCCESS, title: NOTIFICATION_TYPE.SUCCESS, withBorder: true, withIcon: true }))));
+    const errors = useMemo(() => conditions?.filter(({ status }) => status === StatusType.Error) || [], [conditions]);
+    const warnings = useMemo(() => conditions?.filter(({ status }) => status === StatusType.Warning) || [], [conditions]);
+    const disableds = useMemo(() => conditions?.filter(({ status }) => status === OtherStatus.Disabled) || [], [conditions]);
+    const isLoading = useMemo(() => !conditions?.length || !!conditions?.find(({ status }) => status === OtherStatus.Loading), [conditions]);
+    return (React.createElement("div", { style: { lineHeight: 1 } }, errors.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: errors })) : warnings.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: warnings })) : disableds.length > 0 ? (React.createElement(ConditionsStatuses, { conditions: disableds })) : isLoading ? (React.createElement(Status, { status: OtherStatus.Loading, title: OtherStatus.Loading, withBorder: true, withIcon: true })) : (React.createElement(Status, { status: StatusType.Success, title: StatusType.Success, withBorder: true, withIcon: true }))));
 };
 const ConditionsStatuses = ({ conditions }) => {
     const theme = Theme.useTheme();
     return (React.createElement(FlexRow, null, mapConditions(conditions).map(({ status, type, reason, message, lastTransitionTime }) => {
         if (status === 'loading' || status === 'disabled')
-            status = NOTIFICATION_TYPE.INFO;
+            status = StatusType.Info;
         const icon = getStatusIcon(status, theme);
         return (React.createElement(Tooltip, { key: useId(), titleIcon: icon, title: type, text: message || reason || '', timestamp: lastTransitionTime },
             React.createElement(Status, { status: status, title: reason || type, withBorder: true, withIcon: true })));
     })));
 };
 
-const TableWrap$3 = styled.div `
-  width: 100%;
-  max-height: ${({ $maxHeight }) => $maxHeight || 'unset'};
-  overflow-y: auto;
-`;
 const columns$3 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
-    { key: 'signals', title: DISPLAY_TITLES.MONITORS },
+    { key: 'signals', title: DISPLAY_TITLES.Monitors },
     { key: 'active-status', title: DISPLAY_TITLES.STATUS },
     { key: 'conditions', title: 'Conditions' },
     { key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
@@ -679,13 +675,13 @@ const columns$3 = [
 const ActionTable = ({ maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
     const filters = useFilterStore();
-    const { actions } = useEntityStore();
+    const { actions, actionsLoading } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const filtered = useMemo(() => filterActions(actions, filters), [actions, filters]);
     const rows = useMemo(() => filtered.map((act) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(act.conditions || []);
         return {
-            status: hasErrors ? NOTIFICATION_TYPE.ERROR : hasWarnings ? NOTIFICATION_TYPE.WARNING : undefined,
+            status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
             cells: [
                 {
@@ -694,7 +690,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'name',
-                    value: getEntityLabel(act, ENTITY_TYPES.ACTION, { prioritizeDisplayName: true }),
+                    value: getEntityLabel(act, EntityTypes.Action, { prioritizeDisplayName: true }),
                 },
                 {
                     columnKey: 'type',
@@ -724,17 +720,19 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
                 {
                     columnKey: 'active-status',
                     component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                        React.createElement(Status, { status: act.spec.disabled ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, title: act.spec.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
+                        React.createElement(Status, { status: act.spec.disabled ? StatusType.Error : StatusType.Success, title: act.spec.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
                 },
             ],
         };
     }), [filtered]);
-    return (React.createElement(FlexColumn, { style: { maxWidth: maxWidth || 'unset', width: '100%' } },
-        React.createElement(FlexRow, { "$gap": 16, style: { padding: '16px' } },
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(ENTITY_TYPES.ACTION), title: 'Actions', badge: filtered.length !== actions.length ? `${filtered.length}/${actions.length}` : actions.length })),
-        React.createElement(TableWrap$3, { "$maxHeight": maxHeight },
+    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]);
+    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 })),
+        React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$3, rows: rows, onRowClick: (idx) => {
-                    setDrawerType(ENTITY_TYPES.ACTION);
+                    setDrawerType(EntityTypes.Action);
                     setDrawerEntityId(filtered[idx].id);
                 } })),
         !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
@@ -898,13 +896,13 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
         isOpen && withSelect && (React.createElement(AbsoluteContainer$2, null,
             React.createElement(HeadWrap, null,
                 React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value.toLowerCase()) })),
-            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === NOTIFICATION_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
-                    if (status === NOTIFICATION_TYPE.SUCCESS) {
+            React.createElement(VerticalScroll$1, { style: { maxHeight: '240px' } }, filtered.map(({ id, type, name, status }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: status === 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: NOTIFICATION_TYPE.WARNING,
+                            type: StatusType.Warning,
                             title: 'Connection lost',
                             message: 'Cannot connect to this platform',
                             hideFromHistory: true,
@@ -937,7 +935,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
                     {
                         columnKey: 'status',
                         component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                            React.createElement(Status, { title: status === NOTIFICATION_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
+                            React.createElement(Status, { title: status === StatusType.Success ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
                     },
                 ],
             })), onRowClick: (idx) => onSelect(filtered[idx]) }),
@@ -980,7 +978,7 @@ const ErrorDropdown = ({ title = 'Error Message', value, onSelect, onDeselect, d
         // 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 === NOTIFICATION_TYPE.ERROR && !payload.find((opt) => opt.id === message)) {
+                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 });
@@ -12694,12 +12692,12 @@ const Container$i = styled.div `
 `;
 const BaseNode = memo(({ id: nodeId, data }) => {
     const { nodeWidth, id: entityId, type: entityType, status, faded, title, subTitle, icon, icons, iconSrc, iconSrcs, monitors, isActive, raw } = data;
-    const isSource = entityType === ENTITY_TYPES.SOURCE;
+    const isSource = entityType === EntityTypes.Source;
     const { isThisPending } = usePendingStore();
     const isPending = isThisPending({ entityType, entityId });
     const renderActions = () => {
         const sourceIsInstrumenting = isSource && (!raw.conditions?.length || raw.conditions?.some(({ status }) => status === 'loading'));
-        return (React.createElement(React.Fragment, null, isPending ? (React.createElement(FadeLoader, null)) : status === NOTIFICATION_TYPE.ERROR ? (React.createElement(ErrorTriangleIcon, { size: 20 })) : status === NOTIFICATION_TYPE.WARNING ? (React.createElement(WarningTriangleIcon, { size: 20 })) : sourceIsInstrumenting ? (React.createElement(FadeLoader, null)) : null));
+        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));
     };
     const { selectedSources, setSelectedSources } = useSelectedStore();
     const namespaces = { ...selectedSources };
@@ -12729,7 +12727,7 @@ const Container$h = styled.div `
 `;
 const EdgedNode = memo(({ data }) => {
     const { nodeWidth, nodeHeight } = data;
-    return (React.createElement(Container$h, { "$nodeWidth": nodeWidth, "$nodeHeight": nodeHeight },
+    return (React.createElement(Container$h, { "$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' } })));
 });
@@ -12750,6 +12748,7 @@ const FrameNode = memo(({ data }) => {
 
 const Container$f = styled.div `
   position: relative;
+  z-index: 1;
   width: ${({ $nodeWidth }) => $nodeWidth}px;
   height: ${({ $nodeHeight }) => $nodeHeight}px;
   background: transparent;
@@ -12814,7 +12813,7 @@ const ScrollNode = memo(({ data, ...rest }) => {
                 // @ts-ignore
                 onClickNode(e, item);
             } },
-            React.createElement(BaseNode, { ...rest, type: NODE_TYPES.BASE, id: item.id, data: item.data })))),
+            React.createElement(BaseNode, { ...rest, type: NodeTypes.Base, id: item.id, data: item.data })))),
         React.createElement(LoadMoreWrapper, { "$hide": isBottomOfList })));
 });
 
@@ -12855,7 +12854,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
     const { nodeWidth, title, icon: Icon, badge, badgeTooltip, isFetching, sources } = data;
     const entityType = nodeId.split('-')[0];
     const { isAwaitingInstrumentation, sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted } = useInstrumentStore();
-    const isSourceAwaitingInstrumentation = entityType === ENTITY_TYPES.SOURCE && isAwaitingInstrumentation;
+    const isSourceAwaitingInstrumentation = entityType === EntityTypes.Source && isAwaitingInstrumentation;
     const instrumentingPercent = (!!sourcesToCreate ? Math.floor((100 / sourcesToCreate) * sourcesCreated) : !!sourcesToDelete ? Math.floor((100 / sourcesToDelete) * sourcesDeleted) : 0) || 1;
     const { selectedSources, setSelectedSources } = useSelectedStore();
     const { isThisPending } = usePendingStore();
@@ -12871,7 +12870,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
             const payload = {};
             sources?.forEach((source) => {
                 const id = { namespace: source.namespace, name: source.name, kind: source.kind };
-                const isPending = isThisPending({ entityType: ENTITY_TYPES.SOURCE, entityId: id });
+                const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
                 if (!isPending) {
                     if (!payload[source.namespace]) {
                         payload[source.namespace] = [source];
@@ -12888,7 +12887,7 @@ const HeaderNode = memo(({ id: nodeId, data }) => {
         }
     };
     return (React.createElement(Container$e, { "$nodeWidth": nodeWidth, className: 'nowheel nodrag' },
-        entityType === ENTITY_TYPES.SOURCE && (React.createElement(SelectorWrapper, null,
+        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 }),
         React.createElement(Actions$1, { entityType: entityType }),
@@ -12903,13 +12902,13 @@ const Actions$1 = memo(({ entityType }) => {
                 // @ts-ignore
                 onClickNode(undefined, {
                     data: {
-                        type: entityType === ENTITY_TYPES.SOURCE
-                            ? ADD_NODE_TYPES.ADD_SOURCE
-                            : entityType === ENTITY_TYPES.DESTINATION
-                                ? ADD_NODE_TYPES.ADD_DESTINATION
-                                : entityType === ENTITY_TYPES.ACTION
-                                    ? ADD_NODE_TYPES.ADD_ACTION
-                                    : ADD_NODE_TYPES.ADD_RULE,
+                        type: entityType === EntityTypes.Source
+                            ? AddNodeTypes.AddSource
+                            : entityType === EntityTypes.Destination
+                                ? AddNodeTypes.AddDestination
+                                : entityType === EntityTypes.Action
+                                    ? AddNodeTypes.AddAction
+                                    : AddNodeTypes.AddRule,
                     },
                 });
             } },
@@ -12980,16 +12979,16 @@ const ControllerWrapper = styled.div `
   }
 `;
 const nodeTypes = {
-    [NODE_TYPES.HEADER]: HeaderNode,
-    [NODE_TYPES.ADD]: AddNode,
-    [NODE_TYPES.BASE]: BaseNode,
-    [NODE_TYPES.EDGED]: EdgedNode,
-    [NODE_TYPES.FRAME]: FrameNode,
-    [NODE_TYPES.SCROLL]: ScrollNode,
-    [NODE_TYPES.SKELETON]: SkeletonNode,
+    [NodeTypes.Header]: HeaderNode,
+    [NodeTypes.Add]: AddNode,
+    [NodeTypes.Base]: BaseNode,
+    [NodeTypes.Edged]: EdgedNode,
+    [NodeTypes.Frame]: FrameNode,
+    [NodeTypes.Scroll]: ScrollNode,
+    [NodeTypes.Skeleton]: SkeletonNode,
 };
 const edgeTypes = {
-    [EDGE_TYPES.LABELED]: LabeledEdge,
+    [EdgeTypes.Labeled]: LabeledEdge,
 };
 const Flow = ({ nodes, edges, onNodesChange, onEdgesChange }) => {
     const { onClickNode } = useClickNode();
@@ -13018,7 +13017,7 @@ const createEdge = (edgeId, params) => {
     const [sourceNodeId, targetNodeId] = edgeId.split('-to-');
     return {
         id: edgeId,
-        type: !!label ? EDGE_TYPES.LABELED : 'default',
+        type: !!label ? EdgeTypes.Labeled : 'default',
         source: sourceNodeId,
         target: targetNodeId,
         animated,
@@ -13028,9 +13027,9 @@ const createEdge = (edgeId, params) => {
 };
 const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
     const edges = [];
-    const actionNodeId = nodes.find(({ id: nodeId }) => [`${ENTITY_TYPES.ACTION}-${NODE_TYPES.FRAME}`, `${ENTITY_TYPES.ACTION}-${NODE_TYPES.ADD}`].includes(nodeId))?.id;
+    const actionNodeId = nodes.find(({ id: nodeId }) => [`${EntityTypes.Action}-${NodeTypes.Frame}`, `${EntityTypes.Action}-${NodeTypes.Add}`].includes(nodeId))?.id;
     nodes.forEach(({ type: nodeType, id: nodeId, data: { type: entityType, id: entityId, status }, position }) => {
-        if (nodeType === NODE_TYPES.EDGED && entityType === ENTITY_TYPES.SOURCE) {
+        if (nodeType === NodeTypes.Edged && entityType === EntityTypes.Source) {
             const { namespace, name, kind } = entityId;
             const metric = metrics?.sources.find((m) => m.kind === kind && m.name === name && m.namespace === namespace);
             const topLimit = -80 / 2 + framePadding$2;
@@ -13041,18 +13040,18 @@ const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
                     animated: false,
                     isMultiTarget: false,
                     label: formatBytes(metric?.throughput),
-                    isError: status === NOTIFICATION_TYPE.ERROR,
+                    isError: status === StatusType.Error,
                 }));
             }
         }
-        if (nodeType === NODE_TYPES.BASE && entityType === ENTITY_TYPES.DESTINATION) {
+        if (nodeType === NodeTypes.Base && entityType === EntityTypes.Destination) {
             const metric = metrics?.destinations.find((m) => m.id === entityId);
             edges.push(createEdge(`${actionNodeId}-to-${nodeId}`, {
                 theme,
                 animated: false,
                 isMultiTarget: true,
                 label: formatBytes(metric?.throughput),
-                isError: status === NOTIFICATION_TYPE.ERROR,
+                isError: status === StatusType.Error,
             }));
         }
     });
@@ -13064,9 +13063,9 @@ const mapToNodeData$3 = (entity) => {
     return {
         nodeWidth: nodeWidth$4,
         id: entity.ruleId,
-        type: ENTITY_TYPES.INSTRUMENTATION_RULE,
+        type: EntityTypes.InstrumentationRule,
         status: undefined,
-        title: getEntityLabel(entity, ENTITY_TYPES.INSTRUMENTATION_RULE, { prioritizeDisplayName: true }),
+        title: getEntityLabel(entity, EntityTypes.InstrumentationRule, { prioritizeDisplayName: true }),
         subTitle: entity.type,
         icon: getInstrumentationRuleIcon(entity.type),
         isActive: !entity.disabled,
@@ -13075,18 +13074,18 @@ const mapToNodeData$3 = (entity) => {
 };
 const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
     const nodes = [];
-    const position = positions[ENTITY_TYPES.INSTRUMENTATION_RULE];
+    const position = positions[EntityTypes.InstrumentationRule];
     nodes.push({
-        id: `${ENTITY_TYPES.INSTRUMENTATION_RULE}-${NODE_TYPES.HEADER}`,
-        type: NODE_TYPES.HEADER,
+        id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Header}`,
+        type: NodeTypes.Header,
         position: {
-            x: positions[ENTITY_TYPES.INSTRUMENTATION_RULE]['x'],
+            x: positions[EntityTypes.InstrumentationRule]['x'],
             y: 0,
         },
         data: {
             nodeWidth: nodeWidth$4,
-            title: 'Instrumentation Rules',
-            icon: getEntityIcon(ENTITY_TYPES.INSTRUMENTATION_RULE),
+            title: DISPLAY_TITLES.InstrumentationRules,
+            icon: getEntityIcon(EntityTypes.InstrumentationRule),
             badge: unfilteredCount,
             isFetching: loading,
         },
@@ -13094,8 +13093,8 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
     if (!!entities.length) {
         entities.forEach((rule, idx) => {
             nodes.push({
-                id: `${ENTITY_TYPES.INSTRUMENTATION_RULE}-${idx}`,
-                type: NODE_TYPES.BASE,
+                id: `${EntityTypes.InstrumentationRule}-${idx}`,
+                type: NodeTypes.Base,
                 position: {
                     x: position['x'],
                     y: position['y'](idx),
@@ -13106,8 +13105,8 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
     }
     else if (loading) {
         nodes.push({
-            id: `${ENTITY_TYPES.INSTRUMENTATION_RULE}-${NODE_TYPES.SKELETON}`,
-            type: NODE_TYPES.SKELETON,
+            id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Skeleton}`,
+            type: NodeTypes.Skeleton,
             position: {
                 x: position['x'],
                 y: position['y'](),
@@ -13119,15 +13118,15 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
     }
     else {
         nodes.push({
-            id: `${ENTITY_TYPES.INSTRUMENTATION_RULE}-${NODE_TYPES.ADD}`,
-            type: NODE_TYPES.ADD,
+            id: `${EntityTypes.InstrumentationRule}-${NodeTypes.Add}`,
+            type: NodeTypes.Add,
             position: {
                 x: position['x'],
                 y: position['y'](),
             },
             data: {
                 nodeWidth: nodeWidth$4,
-                type: ADD_NODE_TYPES.ADD_RULE,
+                type: AddNodeTypes.AddRule,
                 title: 'ADD RULE',
                 subTitle: 'To modify OpenTelemetry data',
             },
@@ -13142,10 +13141,10 @@ const mapToNodeData$2 = (entity) => {
     return {
         nodeWidth: nodeWidth$3,
         id: entity.id,
-        type: ENTITY_TYPES.ACTION,
+        type: EntityTypes.Action,
         status: priorotizedStatus,
         faded: hasDisableds,
-        title: getEntityLabel(entity, ENTITY_TYPES.ACTION, { prioritizeDisplayName: true }),
+        title: getEntityLabel(entity, EntityTypes.Action, { prioritizeDisplayName: true }),
         subTitle: entity.type,
         icon: getActionIcon(entity.type),
         monitors: entity.spec.signals,
@@ -13155,26 +13154,26 @@ const mapToNodeData$2 = (entity) => {
 };
 const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) => {
     const nodes = [];
-    const position = positions[ENTITY_TYPES.ACTION];
+    const position = positions[EntityTypes.Action];
     nodes.push({
-        id: `${ENTITY_TYPES.ACTION}-${NODE_TYPES.HEADER}`,
-        type: NODE_TYPES.HEADER,
+        id: `${EntityTypes.Action}-${NodeTypes.Header}`,
+        type: NodeTypes.Header,
         position: {
-            x: positions[ENTITY_TYPES.ACTION]['x'],
+            x: positions[EntityTypes.Action]['x'],
             y: 0,
         },
         data: {
             nodeWidth: nodeWidth$3,
-            title: 'Actions',
-            icon: getEntityIcon(ENTITY_TYPES.ACTION),
+            title: DISPLAY_TITLES.Actions,
+            icon: getEntityIcon(EntityTypes.Action),
             badge: unfilteredCount,
             isFetching: loading,
         },
     });
     if (!!entities.length) {
         nodes.push({
-            id: `${ENTITY_TYPES.ACTION}-${NODE_TYPES.FRAME}`,
-            type: NODE_TYPES.FRAME,
+            id: `${EntityTypes.Action}-${NodeTypes.Frame}`,
+            type: NodeTypes.Frame,
             position: {
                 x: position['x'] - framePadding$1,
                 y: position['y']() - framePadding$1,
@@ -13186,10 +13185,10 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
         });
         entities.forEach((action, idx) => {
             nodes.push({
-                id: `${ENTITY_TYPES.ACTION}-${idx}`,
-                type: NODE_TYPES.BASE,
+                id: `${EntityTypes.Action}-${idx}`,
+                type: NodeTypes.Base,
                 extent: 'parent',
-                parentId: `${ENTITY_TYPES.ACTION}-${NODE_TYPES.FRAME}`,
+                parentId: `${EntityTypes.Action}-${NodeTypes.Frame}`,
                 position: {
                     x: framePadding$1,
                     y: position['y'](idx) - (nodeHeight$2 - framePadding$1),
@@ -13200,8 +13199,8 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
     }
     else if (loading) {
         nodes.push({
-            id: `${ENTITY_TYPES.ACTION}-${NODE_TYPES.SKELETON}`,
-            type: NODE_TYPES.SKELETON,
+            id: `${EntityTypes.Action}-${NodeTypes.Skeleton}`,
+            type: NodeTypes.Skeleton,
             position: {
                 x: position['x'],
                 y: position['y'](),
@@ -13213,16 +13212,16 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
     }
     else {
         nodes.push({
-            id: `${ENTITY_TYPES.ACTION}-${NODE_TYPES.ADD}`,
-            type: NODE_TYPES.ADD,
+            id: `${EntityTypes.Action}-${NodeTypes.Add}`,
+            type: NodeTypes.Add,
             position: {
                 x: position['x'],
                 y: position['y'](),
             },
             data: {
                 nodeWidth: nodeWidth$3,
-                type: ADD_NODE_TYPES.ADD_ACTION,
-                title: 'ADD ACTION',
+                type: AddNodeTypes.AddAction,
+                title: 'ADD Action',
                 subTitle: 'To modify OpenTelemetry data',
             },
         });
@@ -13242,10 +13241,10 @@ const mapToNodeData$1 = (entity) => {
             name: entity.name,
             kind: entity.kind,
         },
-        type: ENTITY_TYPES.SOURCE,
+        type: EntityTypes.Source,
         status: priorotizedStatus,
         faded: hasDisableds,
-        title: getEntityLabel(entity, ENTITY_TYPES.SOURCE, { extended: true }),
+        title: getEntityLabel(entity, EntityTypes.Source, { extended: true }),
         subTitle: `${entity.namespace} • ${entity.kind}`,
         icons: getContainersIcons(entity.containers),
         raw: entity,
@@ -13253,29 +13252,29 @@ const mapToNodeData$1 = (entity) => {
 };
 const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, containerHeight, onScroll }) => {
     const nodes = [];
-    const position = positions[ENTITY_TYPES.SOURCE];
+    const position = positions[EntityTypes.Source];
     const hasFiltersApplied = entities.length !== unfilteredCount;
     nodes.push({
-        id: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.HEADER}`,
-        type: NODE_TYPES.HEADER,
+        id: `${EntityTypes.Source}-${NodeTypes.Header}`,
+        type: NodeTypes.Header,
         position: {
-            x: positions[ENTITY_TYPES.SOURCE]['x'],
+            x: positions[EntityTypes.Source]['x'],
             y: 0,
         },
         data: {
             nodeWidth: nodeWidth$2,
-            title: 'Sources',
-            icon: getEntityIcon(ENTITY_TYPES.SOURCE),
+            title: DISPLAY_TITLES.Sources,
+            icon: getEntityIcon(EntityTypes.Source),
             badge: hasFiltersApplied ? `${entities.length}/${unfilteredCount}` : unfilteredCount,
-            badgeTooltip: hasFiltersApplied ? 'Represents filtered amount, out of total amount' : undefined,
+            badgeTooltip: hasFiltersApplied ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined,
             isFetching: loading,
             sources: entities,
         },
     });
     if (!!entities.length) {
         nodes.push({
-            id: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.SCROLL}`,
-            type: NODE_TYPES.SCROLL,
+            id: `${EntityTypes.Source}-${NodeTypes.Scroll}`,
+            type: NodeTypes.Scroll,
             position: {
                 x: position['x'],
                 y: position['y']() - framePadding,
@@ -13287,7 +13286,7 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
                 nodeWidth: nodeWidth$2,
                 nodeHeight: containerHeight - nodeHeight$1 + framePadding * 2,
                 items: entities.map((source, idx) => ({
-                    id: `${ENTITY_TYPES.SOURCE}-${idx}`,
+                    id: `${EntityTypes.Source}-${idx}`,
                     data: mapToNodeData$1(source),
                 })),
                 onScroll,
@@ -13295,10 +13294,10 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
         });
         entities.forEach((source, idx) => {
             nodes.push({
-                id: `${ENTITY_TYPES.SOURCE}-${idx}-hidden`,
-                type: NODE_TYPES.EDGED,
+                id: `${EntityTypes.Source}-${idx}-hidden`,
+                type: NodeTypes.Edged,
                 extent: 'parent',
-                parentId: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.SCROLL}`,
+                parentId: `${EntityTypes.Source}-${NodeTypes.Scroll}`,
                 position: {
                     x: framePadding,
                     y: position['y'](idx) - (nodeHeight$1 - framePadding / 2),
@@ -13312,8 +13311,8 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
     }
     else if (loading) {
         nodes.push({
-            id: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.SKELETON}`,
-            type: NODE_TYPES.SKELETON,
+            id: `${EntityTypes.Source}-${NodeTypes.Skeleton}`,
+            type: NodeTypes.Skeleton,
             position: {
                 x: position['x'],
                 y: position['y'](),
@@ -13325,16 +13324,16 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
     }
     else {
         nodes.push({
-            id: `${ENTITY_TYPES.SOURCE}-${NODE_TYPES.ADD}`,
-            type: NODE_TYPES.ADD,
+            id: `${EntityTypes.Source}-${NodeTypes.Add}`,
+            type: NodeTypes.Add,
             position: {
                 x: position['x'],
                 y: position['y'](),
             },
             data: {
                 nodeWidth: nodeWidth$2,
-                type: ADD_NODE_TYPES.ADD_SOURCE,
-                title: 'ADD SOURCE',
+                type: AddNodeTypes.AddSource,
+                title: 'ADD Source',
                 subTitle: 'To collect OpenTelemetry data',
             },
         });
@@ -13348,25 +13347,25 @@ const getNodePositions = ({ containerWidth }) => {
     const endX = (containerWidth <= 1500 ? 1500 : containerWidth) - nodeWidth$1 - startX;
     const getY = (idx) => nodeHeight * ((idx || 0) + 1);
     const positions = {
-        [ENTITY_TYPES.INSTRUMENTATION_RULE]: {
+        [EntityTypes.InstrumentationRule]: {
             x: startX,
             y: getY,
         },
-        [ENTITY_TYPES.SOURCE]: {
+        [EntityTypes.Source]: {
             x: getValueForRange(containerWidth, [
                 [0, 1600, endX / 3.5],
                 [1600, null, endX / 4],
             ]),
             y: getY,
         },
-        [ENTITY_TYPES.ACTION]: {
+        [EntityTypes.Action]: {
             x: getValueForRange(containerWidth, [
                 [0, 1600, endX / 1.55],
                 [1600, null, endX / 1.6],
             ]),
             y: getY,
         },
-        [ENTITY_TYPES.DESTINATION]: {
+        [EntityTypes.Destination]: {
             x: endX,
             y: getY,
         },
@@ -13380,10 +13379,10 @@ const mapToNodeData = (entity) => {
     return {
         nodeWidth,
         id: entity.id,
-        type: ENTITY_TYPES.DESTINATION,
+        type: EntityTypes.Destination,
         status: priorotizedStatus,
         faded: hasDisableds,
-        title: getEntityLabel(entity, ENTITY_TYPES.DESTINATION, { prioritizeDisplayName: true }),
+        title: getEntityLabel(entity, EntityTypes.Destination, { prioritizeDisplayName: true }),
         subTitle: entity.destinationType.displayName,
         iconSrc: entity.destinationType.imageUrl,
         monitors: Object.keys(entity.exportedSignals).filter((signal) => entity.exportedSignals[signal] === true),
@@ -13392,18 +13391,18 @@ const mapToNodeData = (entity) => {
 };
 const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }) => {
     const nodes = [];
-    const position = positions[ENTITY_TYPES.DESTINATION];
+    const position = positions[EntityTypes.Destination];
     nodes.push({
-        id: `${ENTITY_TYPES.DESTINATION}-${NODE_TYPES.HEADER}`,
-        type: NODE_TYPES.HEADER,
+        id: `${EntityTypes.Destination}-${NodeTypes.Header}`,
+        type: NodeTypes.Header,
         position: {
-            x: positions[ENTITY_TYPES.DESTINATION]['x'],
+            x: positions[EntityTypes.Destination]['x'],
             y: 0,
         },
         data: {
             nodeWidth,
-            title: 'Destinations',
-            icon: getEntityIcon(ENTITY_TYPES.DESTINATION),
+            title: DISPLAY_TITLES.Destinations,
+            icon: getEntityIcon(EntityTypes.Destination),
             badge: unfilteredCount,
             isFetching: loading,
         },
@@ -13411,8 +13410,8 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
     if (!!entities.length) {
         entities.forEach((destination, idx) => {
             nodes.push({
-                id: `${ENTITY_TYPES.DESTINATION}-${idx}`,
-                type: NODE_TYPES.BASE,
+                id: `${EntityTypes.Destination}-${idx}`,
+                type: NodeTypes.Base,
                 position: {
                     x: position['x'],
                     y: position['y'](idx),
@@ -13423,8 +13422,8 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
     }
     else if (loading) {
         nodes.push({
-            id: `${ENTITY_TYPES.DESTINATION}-${NODE_TYPES.SKELETON}`,
-            type: NODE_TYPES.SKELETON,
+            id: `${EntityTypes.Destination}-${NodeTypes.Skeleton}`,
+            type: NodeTypes.Skeleton,
             position: {
                 x: position['x'],
                 y: position['y'](),
@@ -13436,16 +13435,16 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
     }
     else {
         nodes.push({
-            id: `${ENTITY_TYPES.DESTINATION}-${NODE_TYPES.ADD}`,
-            type: NODE_TYPES.ADD,
+            id: `${EntityTypes.Destination}-${NodeTypes.Add}`,
+            type: NodeTypes.Add,
             position: {
                 x: position['x'],
                 y: position['y'](),
             },
             data: {
                 nodeWidth,
-                type: ADD_NODE_TYPES.ADD_DESTINATION,
-                title: 'ADD DESTINATION',
+                type: AddNodeTypes.AddDestination,
+                title: 'ADD Destination',
                 subTitle: 'To monitor OpenTelemetry data',
             },
         });
@@ -13477,7 +13476,7 @@ const DataFlow = ({ heightToRemove, metrics }) => {
     };
     const handleNodesScrolled = (currNodes, key, yOffset) => {
         setNodes((prevNodes) => applyNodeChanges(currNodes
-            .filter((node) => node.extent === 'parent' && node.parentId === `${key}-${NODE_TYPES.SCROLL}`)
+            .filter((node) => node.extent === 'parent' && node.parentId === `${key}-${NodeTypes.Scroll}`)
             .map((node) => ({
             id: node.id,
             type: 'position',
@@ -13494,10 +13493,10 @@ const DataFlow = ({ heightToRemove, metrics }) => {
             unfilteredCount: sources.length,
             positions,
             containerHeight,
-            onScroll: ({ scrollTop }) => handleNodesScrolled(sourceNodes, ENTITY_TYPES.SOURCE, scrollTop),
+            onScroll: ({ scrollTop }) => handleNodesScrolled(sourceNodes, EntityTypes.Source, scrollTop),
         });
-        handleNodesChanged(sourceNodes, ENTITY_TYPES.SOURCE);
-    }, [sources, sourcesLoading, isAwaitingInstrumentation, positions.source, filters, containerHeight]);
+        handleNodesChanged(sourceNodes, EntityTypes.Source);
+    }, [sources, sourcesLoading, isAwaitingInstrumentation, positions[EntityTypes.Source], filters, containerHeight]);
     useEffect(() => {
         const destinationNodes = buildDestinationNodes({
             entities: filterDestinations(destinations, filters),
@@ -13505,8 +13504,8 @@ const DataFlow = ({ heightToRemove, metrics }) => {
             unfilteredCount: destinations.length,
             positions,
         });
-        handleNodesChanged(destinationNodes, ENTITY_TYPES.DESTINATION);
-    }, [destinations, destinationsLoading, positions.destination, filters]);
+        handleNodesChanged(destinationNodes, EntityTypes.Destination);
+    }, [destinations, destinationsLoading, positions[EntityTypes.Destination], filters]);
     useEffect(() => {
         const actionNodes = buildActionNodes({
             entities: filterActions(actions, filters),
@@ -13514,8 +13513,8 @@ const DataFlow = ({ heightToRemove, metrics }) => {
             unfilteredCount: actions.length,
             positions,
         });
-        handleNodesChanged(actionNodes, ENTITY_TYPES.ACTION);
-    }, [actions, actionsLoading, positions.action, filters]);
+        handleNodesChanged(actionNodes, EntityTypes.Action);
+    }, [actions, actionsLoading, positions[EntityTypes.Action], filters]);
     useEffect(() => {
         // note: rules do not have filters yet
         const ruleNodes = buildRuleNodes({
@@ -13524,8 +13523,8 @@ const DataFlow = ({ heightToRemove, metrics }) => {
             unfilteredCount: instrumentationRules.length,
             positions,
         });
-        handleNodesChanged(ruleNodes, ENTITY_TYPES.INSTRUMENTATION_RULE);
-    }, [instrumentationRules, instrumentationRulesLoading, positions.rule]);
+        handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
+    }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule]]);
     return (React.createElement(Container$c, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
@@ -13556,25 +13555,25 @@ const buildSearchResults = ({ instrumentationRules, sources, actions, destinatio
         : destinations.filter((destination) => destination.destinationType.displayName?.toLowerCase().includes(searchText) || destination.name?.toLowerCase().includes(searchText));
     const categories = [
         {
-            category: ENTITY_TYPES.SOURCE,
+            category: EntityTypes.Source,
             label: 'Sources',
             count: filteredSources.length,
             entities: [],
         },
         {
-            category: ENTITY_TYPES.ACTION,
+            category: EntityTypes.Action,
             label: 'Actions',
             count: filteredActions.length,
             entities: [],
         },
         {
-            category: ENTITY_TYPES.DESTINATION,
+            category: EntityTypes.Destination,
             label: 'Destinations',
             count: filteredDestinations.length,
             entities: [],
         },
         {
-            category: ENTITY_TYPES.INSTRUMENTATION_RULE,
+            category: EntityTypes.InstrumentationRule,
             label: 'Instrumentation Rules',
             count: filteredRules.length,
             entities: [],
@@ -13590,13 +13589,13 @@ const buildSearchResults = ({ instrumentationRules, sources, actions, destinatio
         .filter(({ count, category }) => !!count && category !== 'all' && ['all', category].includes(selectedCategory))
         .map((item) => ({
         ...item,
-        entities: item.category === ENTITY_TYPES.INSTRUMENTATION_RULE
+        entities: item.category === EntityTypes.InstrumentationRule
             ? filteredRules
-            : item.category === ENTITY_TYPES.SOURCE
+            : item.category === EntityTypes.Source
                 ? filteredSources
-                : item.category === ENTITY_TYPES.ACTION
+                : item.category === EntityTypes.Action
                     ? filteredActions
-                    : item.category === ENTITY_TYPES.DESTINATION
+                    : item.category === EntityTypes.Destination
                         ? filteredDestinations
                         : [],
     }));
@@ -13774,8 +13773,8 @@ const buildCard$2 = (destination, yamlFields) => {
     const arr = [
         { title: DISPLAY_TITLES.NAME, value: destinationType.displayName },
         { title: DISPLAY_TITLES.TYPE, value: destinationType.type },
-        { type: DATA_CARD_FIELD_TYPES.MONITORS, title: DISPLAY_TITLES.MONITORS, value: buildMonitorsList(exportedSignals) },
-        { type: DATA_CARD_FIELD_TYPES.DIVIDER },
+        { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.Monitors, value: buildMonitorsList(exportedSignals) },
+        { type: DataCardFieldTypes.Divider },
     ];
     const parsedFields = safeJsonParse(fields, {});
     const sortedParsedFields = yamlFields.map((field) => ({ key: field.name, value: parsedFields[field.name] ?? null })).filter((item) => item.value !== null) ||
@@ -13816,17 +13815,17 @@ const DynamicFields = ({ fields, onChange, formErrors }) => {
         if (!shouldRender)
             return null;
         switch (componentType) {
-            case FIELD_TYPES.INPUT:
+            case FieldTypes.Input:
                 return React.createElement(Input, { key: field.name, ...rest, onChange: (e) => onChange(field.name, e.target.value), errorMessage: formErrors[field.name] });
-            case FIELD_TYPES.DROPDOWN:
+            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] }));
-            case FIELD_TYPES.MULTI_INPUT:
+            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 FIELD_TYPES.KEY_VALUE_PAIR:
+            case FieldTypes.KeyValuePair:
                 return (React.createElement(KeyValueInputsList, { 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 FIELD_TYPES.TEXTAREA:
+            case FieldTypes.TextArea:
                 return React.createElement(TextArea, { key: field.name, ...rest, onChange: (e) => onChange(field.name, e.target.value), errorMessage: formErrors[field.name] });
-            case FIELD_TYPES.CHECKBOX:
+            case FieldTypes.Checkbox:
                 return React.createElement(Checkbox, { key: field.name, ...rest, value: rest.value == 'true', onChange: (bool) => onChange(field.name, String(bool)), errorMessage: formErrors[field.name] });
             default:
                 return null;
@@ -13917,45 +13916,45 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         const { logs, metrics, traces } = supportedSignals || {};
         const arr = [];
         if (logs?.supported)
-            arr.push(SIGNAL_TYPE.LOGS);
+            arr.push(SignalType.Logs);
         if (metrics?.supported)
-            arr.push(SIGNAL_TYPE.METRICS);
+            arr.push(SignalType.Metrics);
         if (traces?.supported)
-            arr.push(SIGNAL_TYPE.TRACES);
+            arr.push(SignalType.Traces);
         return arr;
     }, [supportedSignals]);
     const selectedMonitors = useMemo(() => {
         const { logs, metrics, traces } = formData['exportedSignals'] || {};
         const arr = [];
         if (logs)
-            arr.push(SIGNAL_TYPE.LOGS);
+            arr.push(SignalType.Logs);
         if (metrics)
-            arr.push(SIGNAL_TYPE.METRICS);
+            arr.push(SignalType.Metrics);
         if (traces)
-            arr.push(SIGNAL_TYPE.TRACES);
+            arr.push(SignalType.Traces);
         return arr;
     }, [formData['exportedSignals']]);
     const handleSelectedSignals = (signals) => {
         dirtyForm();
         handleFormChange('exportedSignals', {
-            logs: signals.includes(SIGNAL_TYPE.LOGS),
-            metrics: signals.includes(SIGNAL_TYPE.METRICS),
-            traces: signals.includes(SIGNAL_TYPE.TRACES),
+            logs: signals.includes(SignalType.Logs),
+            metrics: signals.includes(SignalType.Metrics),
+            traces: signals.includes(SignalType.Traces),
         });
     };
     return (React.createElement(Container$a, 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);
-                        setConnectionStatus(NOTIFICATION_TYPE.ERROR);
+                        setConnectionStatus(StatusType.Error);
                     }, onSuccess: () => {
                         setIsFormDirty(false);
-                        setConnectionStatus(NOTIFICATION_TYPE.SUCCESS);
+                        setConnectionStatus(StatusType.Success);
                     } })) }),
             (testConnectionSupported || autoFilled) && (React.createElement(NotesWrapper, null,
-                testConnectionSupported && connectionStatus === NOTIFICATION_TYPE.ERROR && (React.createElement(NotificationNote, { type: NOTIFICATION_TYPE.ERROR, message: 'Connection failed. Please check your input and try again.' })),
-                testConnectionSupported && connectionStatus === NOTIFICATION_TYPE.SUCCESS && React.createElement(NotificationNote, { type: NOTIFICATION_TYPE.SUCCESS, message: 'Connection succeeded.' }),
-                autoFilled && React.createElement(NotificationNote, { type: NOTIFICATION_TYPE.DEFAULT, message: `Odigos autocompleted ${displayName} connection details.` }))),
+                testConnectionSupported && connectionStatus === StatusType.Error && React.createElement(NotificationNote, { type: StatusType.Error, message: 'Connection failed. Please check your input and try again.' }),
+                testConnectionSupported && connectionStatus === StatusType.Success && React.createElement(NotificationNote, { type: StatusType.Success, message: 'Connection succeeded.' }),
+                autoFilled && React.createElement(NotificationNote, { type: StatusType.Default, message: `Odigos autocompleted ${displayName} connection details.` }))),
             React.createElement(Divider, null))),
         React.createElement(MonitorsCheckboxes, { title: isUpdate ? '' : 'This connection will monitor:', required: true, allowedSignals: supportedMonitors, selectedSignals: selectedMonitors, setSelectedSignals: handleSelectedSignals, errorMessage: formErrors['exportedSignals'] }),
         !isUpdate && (React.createElement(Input, { title: 'Destination name', placeholder: 'Enter destination name', value: formData['name'], onChange: (e) => {
@@ -13990,7 +13989,7 @@ const DataContainer$2 = styled.div `
 const DestinationDrawer = ({ categories, updateDestination, deleteDestination, testConnection, testLoading, testResult }) => {
     const { destinations } = useEntityStore();
     const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
-    const isOpen = drawerType !== ENTITY_TYPES.DESTINATION;
+    const isOpen = drawerType !== EntityTypes.Destination;
     const onClose = () => {
         setDrawerType(null);
         setDrawerEntityId(null);
@@ -14045,7 +14044,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
         onClose();
     };
     const handleSave = async (newTitle) => {
-        if (validateForm({ withAlert: true, alertTitle: CRUD.UPDATE })) {
+        if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
             const title = newTitle !== thisItem.destinationType.displayName ? newTitle : '';
             handleFormChange('name', title);
             updateDestination(drawerEntityId, { ...formData, name: title });
@@ -14126,7 +14125,7 @@ const DROPDOWN_OPTIONS = [
     { value: 'Self-hosted', id: 'self hosted' },
 ];
 const DEFAULT_CATEGORY = DROPDOWN_OPTIONS[0];
-const DEFAULT_MONITORS = [SIGNAL_TYPE.LOGS, SIGNAL_TYPE.METRICS, SIGNAL_TYPE.TRACES];
+const DEFAULT_MONITORS = [SignalType.Logs, SignalType.Metrics, SignalType.Traces];
 const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSelect }) => {
     const [search, setSearch] = useState('');
     const [selectedCategory, setSelectedCategory] = useState(DEFAULT_CATEGORY);
@@ -14175,7 +14174,7 @@ const SideMenuWrapper = styled.div `
 const DestinationModal = ({ isOnboarding, categories, potentialDestinations, createDestination, testConnection, testLoading, testResult }) => {
     const { addConfiguredDestination } = useSetupStore();
     const { currentModal, setCurrentModal } = useModalStore();
-    const isOpen = currentModal === ENTITY_TYPES.DESTINATION;
+    const isOpen = currentModal === EntityTypes.Destination;
     const [selectedItem, setSelectedItem] = useState(undefined);
     const { formData, formErrors, handleFormChange, resetFormData, validateForm, setYamlFields, dynamicFields, setDynamicFields } = useDestinationFormData({
         supportedSignals: selectedItem?.supportedSignals,
@@ -14197,13 +14196,13 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         setSelectedItem(item);
     };
     const handleSubmit = async () => {
-        const isFormOk = validateForm({ withAlert: !isOnboarding, alertTitle: CRUD.CREATE });
+        const isFormOk = validateForm({ withAlert: !isOnboarding, alertTitle: Crud.Create });
         if (!isFormOk)
             return null;
         if (isOnboarding) {
             const destinationTypeDetails = dynamicFields.map((field) => ({
                 title: field.title || '',
-                value: (field.componentType === FIELD_TYPES.DROPDOWN ? field.value?.value || '' : field.value),
+                value: (field.componentType === FieldTypes.Dropdown ? field.value?.value || '' : field.value),
             }));
             destinationTypeDetails.unshift({
                 title: 'Destination name',
@@ -14248,7 +14247,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
         React.createElement(Container$8, null,
             React.createElement(SideMenuWrapper, null,
                 React.createElement(Stepper, { currentStep: !!selectedItem ? 2 : 1, data: [
-                        { stepNumber: 1, title: 'DESTINATIONS' },
+                        { stepNumber: 1, title: 'Destinations' },
                         { stepNumber: 2, title: 'CONNECTION' },
                     ] })),
             React.createElement(ModalBody, { style: { margin: '32px 24px 12px 24px' } },
@@ -14277,7 +14276,7 @@ const ListItem$1 = ({ item, isLastItem, ...props }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(DataTab, { title: item.displayName, iconSrc: item.imageUrl, monitors: Object.keys(item.exportedSignals).filter((signal) => item.exportedSignals[signal] === true), monitorsWithLabels: true, withExtend: true, renderExtended: () => React.createElement(DataCardFields, { data: item.destinationTypeDetails }), renderActions: () => (React.createElement(IconButton, { onClick: () => setDeleteWarning(true) },
                 React.createElement(TrashIcon, null))), ...props }),
-        React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.displayName || item.type, type: ENTITY_TYPES.DESTINATION, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) })));
+        React.createElement(DeleteWarning, { isOpen: deleteWarning, name: item.displayName || item.type, type: EntityTypes.Destination, isLastItem: isLastItem, onApprove: () => removeConfiguredDestination(item), onDeny: () => setDeleteWarning(false) })));
 };
 
 const ContentWrapper = styled.div `
@@ -14301,46 +14300,41 @@ const StyledAddDestinationButton = styled(Button) `
 const DestinationSelectionForm = ({ categories, potentialDestinations, createDestination, isLoading, testConnection, testLoading, testResult, isSourcesListEmpty, goToSources, }) => {
     const theme = Theme.useTheme();
     const { setCurrentModal } = useModalStore();
-    const onOpen = () => setCurrentModal(ENTITY_TYPES.DESTINATION);
+    const onOpen = () => setCurrentModal(EntityTypes.Destination);
     return (React.createElement(ContentWrapper, null,
         React.createElement(SectionTitle, { title: 'Configure destinations', description: 'Select destinations where telemetry data will be sent and configure their settings.' }),
         !isLoading && isSourcesListEmpty && (React.createElement(NotificationNoteWrapper, null,
-            React.createElement(NotificationNote, { type: NOTIFICATION_TYPE.WARNING, message: 'No sources selected. Please go back to select sources.', action: {
+            React.createElement(NotificationNote, { type: StatusType.Warning, message: 'No sources selected. Please go back to select sources.', action: {
                     label: 'Select Sources',
                     onClick: goToSources,
                 } }))),
         React.createElement(AddDestinationButtonWrapper, null,
             React.createElement(StyledAddDestinationButton, { variant: 'secondary', disabled: isLoading, onClick: onOpen },
                 React.createElement(PlusIcon$1, null),
-                React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, "ADD DESTINATION")),
+                React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, "ADD Destination")),
             React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, createDestination: createDestination, testConnection: testConnection, testLoading: testLoading, testResult: testResult })),
         isLoading ? (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, { scale: 2, cssOverride: { marginTop: '3rem' } }))) : (React.createElement(ConfiguredList, null))));
 };
 
-const TableWrap$2 = styled.div `
-  width: 100%;
-  max-height: ${({ $maxHeight }) => $maxHeight || 'unset'};
-  overflow-y: auto;
-`;
 const columns$2 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
     { key: 'type', title: DISPLAY_TITLES.TYPE, sortable: true },
-    { key: 'signals', title: DISPLAY_TITLES.MONITORS },
+    { key: 'signals', title: DISPLAY_TITLES.Monitors },
     { key: 'conditions', title: 'Conditions' },
     { key: 'throughput', title: 'Throughput', sortable: true },
 ];
 const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
     const filters = useFilterStore();
-    const { destinations } = useEntityStore();
+    const { destinations, destinationsLoading } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const filtered = useMemo(() => filterDestinations(destinations, filters), [destinations, filters]);
     const rows = useMemo(() => filtered.map((dest) => {
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(dest.conditions || []);
         return {
-            status: hasErrors ? NOTIFICATION_TYPE.ERROR : hasWarnings ? NOTIFICATION_TYPE.WARNING : undefined,
+            status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
             cells: [
                 {
@@ -14349,7 +14343,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'name',
-                    value: getEntityLabel(dest, ENTITY_TYPES.DESTINATION, { prioritizeDisplayName: true }),
+                    value: getEntityLabel(dest, EntityTypes.Destination, { prioritizeDisplayName: true }),
                 },
                 {
                     columnKey: 'type',
@@ -14358,7 +14352,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'throughput',
-                    value: formatBytes(getMetricForEntity(metrics, ENTITY_TYPES.DESTINATION, dest.id).throughput),
+                    value: formatBytes(getMetricForEntity(metrics, EntityTypes.Destination, dest.id).throughput),
                     textColor: theme.text.info,
                 },
                 {
@@ -14372,12 +14366,14 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
             ],
         };
     }), [filtered, metrics]);
-    return (React.createElement(FlexColumn, { style: { maxWidth: maxWidth || 'unset', width: '100%' } },
-        React.createElement(FlexRow, { "$gap": 16, style: { padding: '16px' } },
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(ENTITY_TYPES.DESTINATION), title: 'Destinations', badge: filtered.length !== destinations.length ? `${filtered.length}/${destinations.length}` : destinations.length })),
-        React.createElement(TableWrap$2, { "$maxHeight": maxHeight },
+    const badge = useMemo(() => (filtered.length !== destinations.length ? `${filtered.length}/${destinations.length}` : destinations.length), [filtered, destinations]);
+    const badgeTooltip = useMemo(() => (filtered.length !== destinations.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, destinations]);
+    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, onRowClick: (idx) => {
-                    setDrawerType(ENTITY_TYPES.DESTINATION);
+                    setDrawerType(EntityTypes.Destination);
                     setDrawerEntityId(filtered[idx].id);
                 } })),
         !filtered.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
@@ -14388,11 +14384,11 @@ const buildCard$1 = (rule) => {
     const { type, ruleName, notes, disabled, profileName, payloadCollection, codeAttributes } = rule;
     const arr = [
         { title: DISPLAY_TITLES.TYPE, value: type },
-        { type: DATA_CARD_FIELD_TYPES.ACTIVE_STATUS, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
+        { type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
         { title: DISPLAY_TITLES.NAME, value: ruleName },
         { title: DISPLAY_TITLES.NOTES, value: notes },
         { title: DISPLAY_TITLES.MANAGED_BY_PROFILE, value: profileName },
-        { type: DATA_CARD_FIELD_TYPES.DIVIDER },
+        { type: DataCardFieldTypes.Divider },
     ];
     if (!!payloadCollection) {
         const str = Object.entries(payloadCollection)
@@ -14427,34 +14423,34 @@ const ListContainer$1 = styled.div `
 `;
 const recommendedList = [
     {
-        id: CODE_ATTRIBUTES_KEY_TYPES.FILE_PATH,
+        id: CodeAttributesKeyTypes.FilePath,
         label: 'Collect File Path',
         tooltip: 'Indicates whether to record the `code.filepath` attribute.',
     },
     {
-        id: CODE_ATTRIBUTES_KEY_TYPES.FUNCTION,
+        id: CodeAttributesKeyTypes.Function,
         label: 'Collect Function',
         tooltip: 'Indicates whether to record the `code.function` attribute.',
     },
     {
-        id: CODE_ATTRIBUTES_KEY_TYPES.LINE_NUMBER,
+        id: CodeAttributesKeyTypes.LineNumber,
         label: 'Collect Line Number',
         tooltip: 'Indicates whether to record the `code.lineno` attribute.',
     },
 ];
 const verboseList = [
     {
-        id: CODE_ATTRIBUTES_KEY_TYPES.COLUMN,
+        id: CodeAttributesKeyTypes.Column,
         label: 'Collect Column',
         tooltip: 'Indicates whether to record the `code.column` attribute.',
     },
     {
-        id: CODE_ATTRIBUTES_KEY_TYPES.NAMESPACE,
+        id: CodeAttributesKeyTypes.Namespace,
         label: 'Collect Namespace',
         tooltip: 'Indicates whether to record the `code.namespace` attribute.',
     },
     {
-        id: CODE_ATTRIBUTES_KEY_TYPES.STACKTRACE,
+        id: CodeAttributesKeyTypes.StackTrace,
         label: 'Collect Stacktrace',
         tooltip: 'Indicates whether to record the `code.stacktrace` attribute.',
     },
@@ -14468,12 +14464,12 @@ const CodeAttributes = ({ value, setValue, formErrors }) => {
     useEffect(() => {
         if (!mappedValue.length) {
             const payload = {
-                [CODE_ATTRIBUTES_KEY_TYPES.COLUMN]: null,
-                [CODE_ATTRIBUTES_KEY_TYPES.FILE_PATH]: true,
-                [CODE_ATTRIBUTES_KEY_TYPES.FUNCTION]: true,
-                [CODE_ATTRIBUTES_KEY_TYPES.LINE_NUMBER]: true,
-                [CODE_ATTRIBUTES_KEY_TYPES.NAMESPACE]: null,
-                [CODE_ATTRIBUTES_KEY_TYPES.STACKTRACE]: null,
+                [CodeAttributesKeyTypes.Column]: null,
+                [CodeAttributesKeyTypes.FilePath]: true,
+                [CodeAttributesKeyTypes.Function]: true,
+                [CodeAttributesKeyTypes.LineNumber]: true,
+                [CodeAttributesKeyTypes.Namespace]: null,
+                [CodeAttributesKeyTypes.StackTrace]: null,
             };
             setValue('codeAttributes', payload);
             setIsLastSelection(false);
@@ -14482,7 +14478,7 @@ const CodeAttributes = ({ value, setValue, formErrors }) => {
     }, []);
     const handleChange = (id, isAdd) => {
         const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
-        const payload = Object.values(CODE_ATTRIBUTES_KEY_TYPES).reduce((acc, attribute) => {
+        const payload = Object.values(CodeAttributesKeyTypes).reduce((acc, attribute) => {
             // @ts-ignore - TS doesn't know that `acc` is initialized 2 rows below
             acc[attribute] = arr.includes(attribute) ? true : null;
             return acc;
@@ -14517,19 +14513,19 @@ const ListContainer = styled.div `
 `;
 const strictPicklist = [
     {
-        id: PAYLOAD_COLLECTION_KEY_TYPES.HTTP_REQUEST,
+        id: PayloadCollectionKeyTypes.HttpRequest,
         label: 'Collect HTTP Request',
     },
     {
-        id: PAYLOAD_COLLECTION_KEY_TYPES.HTTP_RESPONSE,
+        id: PayloadCollectionKeyTypes.HttpResponse,
         label: 'Collect HTTP Response',
     },
     {
-        id: PAYLOAD_COLLECTION_KEY_TYPES.DB_QUERY,
+        id: PayloadCollectionKeyTypes.DbQuery,
         label: 'Collect DB Query',
     },
     {
-        id: PAYLOAD_COLLECTION_KEY_TYPES.MESSAGING,
+        id: PayloadCollectionKeyTypes.Messaging,
         label: 'Collect Messaging',
     },
 ];
@@ -14542,10 +14538,10 @@ const PayloadCollection = ({ value, setValue, formErrors }) => {
     useEffect(() => {
         if (!mappedValue.length) {
             const payload = {
-                [PAYLOAD_COLLECTION_KEY_TYPES.HTTP_REQUEST]: {},
-                [PAYLOAD_COLLECTION_KEY_TYPES.HTTP_RESPONSE]: {},
-                [PAYLOAD_COLLECTION_KEY_TYPES.DB_QUERY]: {},
-                [PAYLOAD_COLLECTION_KEY_TYPES.MESSAGING]: {},
+                [PayloadCollectionKeyTypes.HttpRequest]: {},
+                [PayloadCollectionKeyTypes.HttpResponse]: {},
+                [PayloadCollectionKeyTypes.DbQuery]: {},
+                [PayloadCollectionKeyTypes.Messaging]: {},
             };
             setValue('payloadCollection', payload);
             setIsLastSelection(false);
@@ -14555,10 +14551,10 @@ const PayloadCollection = ({ value, setValue, formErrors }) => {
     const handleChange = (id, isAdd) => {
         const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
         const payload = {
-            [PAYLOAD_COLLECTION_KEY_TYPES.HTTP_REQUEST]: arr.includes(PAYLOAD_COLLECTION_KEY_TYPES.HTTP_REQUEST) ? {} : null,
-            [PAYLOAD_COLLECTION_KEY_TYPES.HTTP_RESPONSE]: arr.includes(PAYLOAD_COLLECTION_KEY_TYPES.HTTP_RESPONSE) ? {} : null,
-            [PAYLOAD_COLLECTION_KEY_TYPES.DB_QUERY]: arr.includes(PAYLOAD_COLLECTION_KEY_TYPES.DB_QUERY) ? {} : null,
-            [PAYLOAD_COLLECTION_KEY_TYPES.MESSAGING]: arr.includes(PAYLOAD_COLLECTION_KEY_TYPES.MESSAGING) ? {} : null,
+            [PayloadCollectionKeyTypes.HttpRequest]: arr.includes(PayloadCollectionKeyTypes.HttpRequest) ? {} : null,
+            [PayloadCollectionKeyTypes.HttpResponse]: arr.includes(PayloadCollectionKeyTypes.HttpResponse) ? {} : null,
+            [PayloadCollectionKeyTypes.DbQuery]: arr.includes(PayloadCollectionKeyTypes.DbQuery) ? {} : null,
+            [PayloadCollectionKeyTypes.Messaging]: arr.includes(PayloadCollectionKeyTypes.Messaging) ? {} : null,
         };
         setValue('payloadCollection', payload);
         setIsLastSelection(arr.length === 1);
@@ -14570,9 +14566,9 @@ const PayloadCollection = ({ value, setValue, formErrors }) => {
 };
 
 const componentsMap = {
-    [INSTRUMENTATION_RULE_TYPE.PAYLOAD_COLLECTION]: PayloadCollection,
-    [INSTRUMENTATION_RULE_TYPE.CODE_ATTRIBUTES]: CodeAttributes,
-    [INSTRUMENTATION_RULE_TYPE.UNKNOWN_TYPE]: null,
+    [InstrumentationRuleType.PayloadCollection]: PayloadCollection,
+    [InstrumentationRuleType.CodeAttributes]: CodeAttributes,
+    [InstrumentationRuleType.UnknownType]: null,
 };
 const CustomFields = ({ ruleType, value, setValue, formErrors }) => {
     if (!ruleType)
@@ -14616,7 +14612,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
     const { instrumentationRules } = useEntityStore();
     const { addNotification } = useNotificationStore();
     const { drawerType, drawerEntityId, setDrawerType, setDrawerEntityId } = useDrawerStore();
-    const isOpen = drawerType !== ENTITY_TYPES.INSTRUMENTATION_RULE;
+    const isOpen = drawerType !== EntityTypes.InstrumentationRule;
     const onClose = () => {
         setDrawerType(null);
         setDrawerEntityId(null);
@@ -14638,10 +14634,10 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
     const handleEdit = (bool) => {
         if (!thisItem.mutable && (bool || bool === undefined)) {
             addNotification({
-                type: NOTIFICATION_TYPE.WARNING,
+                type: StatusType.Warning,
                 title: FORM_ALERTS.FORBIDDEN,
                 message: FORM_ALERTS.CANNOT_EDIT_RULE,
-                crdType: ENTITY_TYPES.INSTRUMENTATION_RULE,
+                crdType: EntityTypes.InstrumentationRule,
                 target: drawerEntityId,
                 hideFromHistory: true,
             });
@@ -14658,10 +14654,10 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
     const handleDelete = () => {
         if (!thisItem.mutable) {
             addNotification({
-                type: NOTIFICATION_TYPE.WARNING,
+                type: StatusType.Warning,
                 title: FORM_ALERTS.FORBIDDEN,
                 message: FORM_ALERTS.CANNOT_DELETE_RULE,
-                crdType: ENTITY_TYPES.INSTRUMENTATION_RULE,
+                crdType: EntityTypes.InstrumentationRule,
                 target: drawerEntityId,
                 hideFromHistory: true,
             });
@@ -14676,7 +14672,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
         }
     };
     const handleSave = (newTitle) => {
-        if (validateForm({ withAlert: true, alertTitle: CRUD.UPDATE })) {
+        if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
             const title = newTitle !== thisItem.type ? newTitle : '';
             handleFormChange('ruleName', title);
             updateInstrumentationRule(drawerEntityId, { ...formData, ruleName: title });
@@ -14693,7 +14689,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
 
 const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) => {
     const { currentModal, setCurrentModal } = useModalStore();
-    const isOpen = currentModal === ENTITY_TYPES.INSTRUMENTATION_RULE;
+    const isOpen = currentModal === EntityTypes.InstrumentationRule;
     const { formData, formErrors, handleFormChange, resetFormData, validateForm } = useInstrumentationRuleFormData();
     const [selectedItem, setSelectedItem] = useState(undefined);
     const handleClose = () => {
@@ -14706,7 +14702,7 @@ const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) =
         setSelectedItem(item);
     };
     const handleSubmit = () => {
-        const isFormOk = validateForm({ withAlert: true, alertTitle: CRUD.CREATE });
+        const isFormOk = validateForm({ withAlert: true, alertTitle: Crud.Create });
         if (!isFormOk)
             return null;
         createInstrumentationRule(formData);
@@ -14724,7 +14720,7 @@ const InstrumentationRuleModal = ({ isEnterprise, createInstrumentationRule }) =
             ] }) },
         React.createElement(ModalBody, null,
             React.createElement(SectionTitle, { title: 'Select Instrumentation Rule', description: 'Define how telemetry is recorded from your application. Choose a rule type and configure the details.' }),
-            !isEnterprise && React.createElement(NotificationNote, { type: NOTIFICATION_TYPE.DEFAULT, message: FORM_ALERTS.ENTERPRISE_ONLY('Instrumentation Rules'), style: { marginTop: '24px' } }),
+            !isEnterprise && React.createElement(NotificationNote, { type: StatusType.Default, message: FORM_ALERTS.ENTERPRISE_ONLY('Instrumentation Rules'), style: { marginTop: '24px' } }),
             React.createElement(AutocompleteInput, { options: INSTRUMENTATION_RULE_OPTIONS, selectedOption: selectedItem, onOptionSelect: (opt) => handleSelect(opt), style: { marginTop: isEnterprise ? '24px' : '12px' }, autoFocus: !selectedItem?.type }),
             !!selectedItem?.type ? (React.createElement("div", null,
                 React.createElement(Divider, { margin: '16px 0' }),
@@ -14749,11 +14745,6 @@ const buildSpecCell = (rule) => {
     return str;
 };
 
-const TableWrap$1 = styled.div `
-  width: 100%;
-  max-height: ${({ $maxHeight }) => $maxHeight || 'unset'};
-  overflow-y: auto;
-`;
 const columns$1 = [
     { key: 'icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
@@ -14766,8 +14757,8 @@ const columns$1 = [
 ];
 const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
-    const { instrumentationRules } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
+    const { instrumentationRules, instrumentationRulesLoading } = useEntityStore();
     const rows = useMemo(() => 
     // note: rules do not have filters yet
     instrumentationRules.map((rule) => {
@@ -14779,7 +14770,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'name',
-                    value: getEntityLabel(rule, ENTITY_TYPES.INSTRUMENTATION_RULE, { prioritizeDisplayName: true }),
+                    value: getEntityLabel(rule, EntityTypes.InstrumentationRule, { prioritizeDisplayName: true }),
                 },
                 {
                     columnKey: 'type',
@@ -14806,22 +14797,22 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
                 {
                     columnKey: 'active-status',
                     component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                        React.createElement(Status, { status: rule.disabled ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, title: rule.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
+                        React.createElement(Status, { status: rule.disabled ? StatusType.Error : StatusType.Success, title: rule.disabled ? 'Inactive' : 'Active', withIcon: true, withBorder: true }))),
                 },
                 {
                     columnKey: 'source-count',
                     component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                        React.createElement(Status, { status: NOTIFICATION_TYPE.INFO, title: 'all sources', withBorder: true }))),
+                        React.createElement(Status, { status: StatusType.Info, title: 'all sources', withBorder: true }))),
                 },
             ],
         };
     }), [instrumentationRules]);
-    return (React.createElement(FlexColumn, { style: { maxWidth: maxWidth || 'unset', width: '100%' } },
-        React.createElement(FlexRow, { "$gap": 16, style: { padding: '16px' } },
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(ENTITY_TYPES.ACTION), title: 'Instrumentation Rules', badge: instrumentationRules.length })),
-        React.createElement(TableWrap$1, { "$maxHeight": maxHeight },
+    return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
+        React.createElement(TableTitleWrap, null,
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Action), title: DISPLAY_TITLES.InstrumentationRules, badge: instrumentationRules.length, loading: instrumentationRulesLoading })),
+        React.createElement(TableWrap, { "$maxHeight": maxHeight },
             React.createElement(InteractiveTable, { columns: columns$1, rows: rows, onRowClick: (idx) => {
-                    setDrawerType(ENTITY_TYPES.INSTRUMENTATION_RULE);
+                    setDrawerType(EntityTypes.InstrumentationRule);
                     setDrawerEntityId(instrumentationRules[idx].ruleId);
                 } })),
         !instrumentationRules.length && (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
@@ -14876,7 +14867,7 @@ const MultiSourceControl = ({ totalSourceCount, uninstrumentSources }) => {
             React.createElement(Button, { variant: 'tertiary', onClick: () => setIsWarnModalOpen(true) },
                 React.createElement(TrashIcon, null),
                 React.createElement(Text, { family: 'secondary', decoration: 'underline', color: theme.text.error }, "Uninstrument"))),
-        React.createElement(DeleteWarning, { isOpen: isWarnModalOpen, name: `${totalSelected} sources`, type: ENTITY_TYPES.SOURCE, isLastItem: totalSelected === totalSourceCount, onApprove: onDelete, onDeny: () => setIsWarnModalOpen(false) })));
+        React.createElement(DeleteWarning, { isOpen: isWarnModalOpen, name: `${totalSelected} sources`, type: EntityTypes.Source, isLastItem: totalSelected === totalSourceCount, onApprove: onDelete, onDeny: () => setIsWarnModalOpen(false) })));
 };
 
 const RelativeContainer = styled.div `
@@ -15005,7 +14996,7 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
     const timeAgo = useTimeAgo();
     const { onClickNotification } = useClickNotification();
     const canClick = !!crdType && !!target;
-    const isDeleted = title?.toLowerCase().includes(CRUD.DELETE.toLowerCase()) || false;
+    const isDeleted = title?.toLowerCase().includes(Crud.Delete.toLowerCase()) || false;
     const Icon = getStatusIcon(type, theme);
     return (React.createElement(NotifCard, { key: `notification-${id}`, className: canClick ? 'click-enabled' : '', onClick: () => {
             if (canClick) {
@@ -15013,7 +15004,7 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
                 onClickNotification({ id, crdType, target });
             }
         } },
-        React.createElement(StatusIcon, { "$type": isDeleted ? NOTIFICATION_TYPE.ERROR : type }, isDeleted ? React.createElement(TrashIcon, null) : React.createElement(Icon, null)),
+        React.createElement(StatusIcon, { "$type": isDeleted ? StatusType.Error : type }, isDeleted ? React.createElement(TrashIcon, null) : React.createElement(Icon, null)),
         React.createElement(NotifTextWrap, null,
             React.createElement(NotifHeaderTextWrap, null,
                 React.createElement(Text, { size: 14 }, message)),
@@ -15024,24 +15015,24 @@ const NotificationListItem = ({ id, seen, type, title, message, time, crdType, t
                     React.createElement(Text, { size: 10, color: theme.colors.orange_soft }, "new")))))));
 };
 
-var NAV_ICON_IDS;
-(function (NAV_ICON_IDS) {
-    NAV_ICON_IDS["OVERVIEW"] = "overview";
-    NAV_ICON_IDS["INSTRUMENTATION_RULES"] = "instrumentation-rules";
-    NAV_ICON_IDS["SOURCES"] = "sources";
-    NAV_ICON_IDS["ACTIONS"] = "actions";
-    NAV_ICON_IDS["DESTINATIONS"] = "destinations";
-})(NAV_ICON_IDS || (NAV_ICON_IDS = {}));
+var NavIconIds;
+(function (NavIconIds) {
+    NavIconIds["Overview"] = "overview";
+    NavIconIds["InstrumentationRules"] = "instrumentation rule";
+    NavIconIds["Sources"] = "source";
+    NavIconIds["Actions"] = "action";
+    NavIconIds["Destinations"] = "destination";
+})(NavIconIds || (NavIconIds = {}));
 const SideNav = ({ onClickId, defaultSelectedId, extendedNavIcons }) => {
     const [selectedId, setSelectedId] = useState(defaultSelectedId || '');
     const mainIcons = useMemo(() => [
         {
-            id: NAV_ICON_IDS.OVERVIEW,
+            id: NavIconIds.Overview,
             icon: OverviewIcon,
-            selected: selectedId === NAV_ICON_IDS.OVERVIEW,
+            selected: selectedId === NavIconIds.Overview,
             onClick: () => {
-                setSelectedId(NAV_ICON_IDS.OVERVIEW);
-                onClickId(NAV_ICON_IDS.OVERVIEW);
+                setSelectedId(NavIconIds.Overview);
+                onClickId(NavIconIds.Overview);
             },
             tooltip: 'Overview',
         },
@@ -15054,45 +15045,45 @@ const SideNav = ({ onClickId, defaultSelectedId, extendedNavIcons }) => {
             },
         })),
     ], [selectedId]);
-    const subIcons = useMemo(() => [NAV_ICON_IDS.OVERVIEW, NAV_ICON_IDS.INSTRUMENTATION_RULES, NAV_ICON_IDS.SOURCES, NAV_ICON_IDS.ACTIONS, NAV_ICON_IDS.DESTINATIONS].includes(selectedId)
+    const subIcons = useMemo(() => [NavIconIds.Overview, NavIconIds.InstrumentationRules, NavIconIds.Sources, NavIconIds.Actions, NavIconIds.Destinations].includes(selectedId)
         ? [
             {
-                id: NAV_ICON_IDS.INSTRUMENTATION_RULES,
+                id: NavIconIds.InstrumentationRules,
                 icon: RulesIcon,
-                selected: selectedId === NAV_ICON_IDS.INSTRUMENTATION_RULES,
+                selected: selectedId === NavIconIds.InstrumentationRules,
                 onClick: () => {
-                    setSelectedId(NAV_ICON_IDS.INSTRUMENTATION_RULES);
-                    onClickId(NAV_ICON_IDS.INSTRUMENTATION_RULES);
+                    setSelectedId(NavIconIds.InstrumentationRules);
+                    onClickId(NavIconIds.InstrumentationRules);
                 },
                 tooltip: 'Instrumentation Rules',
             },
             {
-                id: NAV_ICON_IDS.SOURCES,
+                id: NavIconIds.Sources,
                 icon: SourcesIcon,
-                selected: selectedId === NAV_ICON_IDS.SOURCES,
+                selected: selectedId === NavIconIds.Sources,
                 onClick: () => {
-                    setSelectedId(NAV_ICON_IDS.SOURCES);
-                    onClickId(NAV_ICON_IDS.SOURCES);
+                    setSelectedId(NavIconIds.Sources);
+                    onClickId(NavIconIds.Sources);
                 },
                 tooltip: 'Sources',
             },
             {
-                id: NAV_ICON_IDS.ACTIONS,
+                id: NavIconIds.Actions,
                 icon: ActionsIcon,
-                selected: selectedId === NAV_ICON_IDS.ACTIONS,
+                selected: selectedId === NavIconIds.Actions,
                 onClick: () => {
-                    setSelectedId(NAV_ICON_IDS.ACTIONS);
-                    onClickId(NAV_ICON_IDS.ACTIONS);
+                    setSelectedId(NavIconIds.Actions);
+                    onClickId(NavIconIds.Actions);
                 },
                 tooltip: 'Actions',
             },
             {
-                id: NAV_ICON_IDS.DESTINATIONS,
+                id: NavIconIds.Destinations,
                 icon: DestinationsIcon,
-                selected: selectedId === NAV_ICON_IDS.DESTINATIONS,
+                selected: selectedId === NavIconIds.Destinations,
                 onClick: () => {
-                    setSelectedId(NAV_ICON_IDS.DESTINATIONS);
-                    onClickId(NAV_ICON_IDS.DESTINATIONS);
+                    setSelectedId(NavIconIds.Destinations);
+                    onClickId(NavIconIds.Destinations);
                 },
                 tooltip: 'Destinations',
             },
@@ -15128,18 +15119,18 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
     }
     return (React.createElement(FlexColumn, { "$gap": 12 }, !describe.pods?.length ? (React.createElement(CenterThis, null,
         React.createElement(NoDataFound, { subTitle: 'Check if you have any running pods and try again' }))) : (describe.pods.map(({ podName, nodeName, phase, containers }) => {
-        const podHasErrors = phase.status !== NOTIFICATION_TYPE.SUCCESS ||
-            containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== NOTIFICATION_TYPE.SUCCESS) !== -1) !== -1;
-        const podStatus = podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS;
-        const divider = { type: DATA_CARD_FIELD_TYPES.DIVIDER };
+        const podHasErrors = phase.status !== StatusType.Success ||
+            containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== StatusType.Success) !== -1) !== -1;
+        const podStatus = podHasErrors ? StatusType.Error : StatusType.Success;
+        const divider = { type: DataCardFieldTypes.Divider };
         return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => React.createElement(Status, { status: podStatus, title: podStatus, withIcon: true, withBorder: true }), data: [
                 {
-                    type: DATA_CARD_FIELD_TYPES.COPY_TEXT,
+                    type: DataCardFieldTypes.CopyText,
                     value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`,
                 },
                 divider,
                 {
-                    type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
+                    type: DataCardFieldTypes.DescribeRow,
                     value: JSON.stringify({
                         title: nodeName.name,
                         tooltip: nodeName.explain,
@@ -15151,7 +15142,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                 },
                 divider,
                 {
-                    type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
+                    type: DataCardFieldTypes.DescribeRow,
                     value: JSON.stringify({
                         title: phase.name,
                         tooltip: phase.explain,
@@ -15164,7 +15155,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                 divider,
                 ...containers.map((container) => {
                     return {
-                        type: DATA_CARD_FIELD_TYPES.POD_CONTAINER,
+                        type: DataCardFieldTypes.PodContainer,
                         value: JSON.stringify({
                             containerName: container.containerName.value,
                             actualDevice: {
@@ -15187,7 +15178,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
 const buildCard = (source) => {
     const { name, kind, namespace } = source;
     const arr = [
-        { title: DISPLAY_TITLES.NAMESPACE, value: namespace },
+        { title: DISPLAY_TITLES.Namespace, value: namespace },
         { title: DISPLAY_TITLES.KIND, value: kind },
         { title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' },
     ];
@@ -15205,11 +15196,11 @@ const SourceForm = ({ formData, handleFormChange }) => {
         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) })));
 };
 
-var TABS;
-(function (TABS) {
-    TABS["OVERVIEW"] = "Overview";
-    TABS["PODS"] = "Pods";
-})(TABS || (TABS = {}));
+var Tabs;
+(function (Tabs) {
+    Tabs["Overview"] = "Overview";
+    Tabs["Pods"] = "Pods";
+})(Tabs || (Tabs = {}));
 const FormContainer = styled.div `
   width: 100%;
   height: 100%;
@@ -15225,10 +15216,10 @@ const DataContainer$1 = styled.div `
 const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) => {
     const { sources } = useEntityStore();
     const { drawerType, drawerEntityId, setDrawerEntityId, setDrawerType } = useDrawerStore();
-    const [selectedTab, setSelectedTab] = useState(TABS.OVERVIEW);
-    const isOpen = drawerType !== ENTITY_TYPES.SOURCE;
+    const [selectedTab, setSelectedTab] = useState(Tabs.Overview);
+    const isOpen = drawerType !== EntityTypes.Source;
     const onClose = () => {
-        setSelectedTab(TABS.OVERVIEW);
+        setSelectedTab(Tabs.Overview);
         setDrawerType(null);
         setDrawerEntityId(null);
     };
@@ -15246,7 +15237,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
     if (!thisItem)
         return null;
     const containersData = thisItem.containers?.map((container) => ({
-        type: DATA_CARD_FIELD_TYPES.SOURCE_CONTAINER,
+        type: DataCardFieldTypes.SourceContainer,
         value: JSON.stringify(container),
     })) || [];
     const handleEdit = (bool) => {
@@ -15273,18 +15264,18 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource }) =>
         setIsEditing(false);
         setIsFormDirty(false);
     };
-    return (React.createElement(OverviewDrawer, { 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(ENTITY_TYPES.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, { 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: [
             {
-                label: TABS.OVERVIEW,
-                onClick: () => setSelectedTab(TABS.OVERVIEW),
-                selected: selectedTab === TABS.OVERVIEW,
+                label: Tabs.Overview,
+                onClick: () => setSelectedTab(Tabs.Overview),
+                selected: selectedTab === Tabs.Overview,
             },
             {
-                label: TABS.PODS,
-                onClick: () => setSelectedTab(TABS.PODS),
-                selected: selectedTab === TABS.PODS,
+                label: Tabs.Pods,
+                onClick: () => setSelectedTab(Tabs.Pods),
+                selected: selectedTab === Tabs.Pods,
             },
-        ] }, selectedTab === TABS.OVERVIEW ? (isEditing ? (React.createElement(FormContainer, null,
+        ] }, selectedTab === Tabs.Overview ? (isEditing ? (React.createElement(FormContainer, null,
         React.createElement(SourceForm, { formData: formData, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
@@ -15550,7 +15541,7 @@ const SourceSelectionForm = forwardRef(({ componentType, isModal, namespaces, na
 
 const SourceModal = ({ componentType = 'FAST', namespaces, namespace, namespacesLoading, selectedNamespace, setSelectedNamespace, persistSources }) => {
     const { currentModal, setCurrentModal } = useModalStore();
-    const isOpen = currentModal === ENTITY_TYPES.SOURCE;
+    const isOpen = currentModal === EntityTypes.Source;
     const onSelectNamespace = (ns) => {
         setSelectedNamespace((prev) => (prev === ns ? '' : ns));
     };
@@ -15577,16 +15568,11 @@ const SourceModal = ({ componentType = 'FAST', namespaces, namespace, namespaces
         React.createElement(SourceSelectionForm, { ref: formRef, componentType: componentType, isModal: true, namespaces: namespaces, namespace: namespace, namespacesLoading: namespacesLoading, selectedNamespace: selectedNamespace, onSelectNamespace: onSelectNamespace })));
 };
 
-const TableWrap = styled.div `
-  width: 100%;
-  max-height: ${({ $maxHeight }) => $maxHeight || 'unset'};
-  overflow-y: auto;
-`;
 const columns = [
     { key: 'checkbox-and-icon', title: '' },
     { key: 'name', title: DISPLAY_TITLES.NAME, sortable: true },
     { key: 'type', title: 'Kubernetes Type', sortable: true },
-    { key: 'namespace', title: DISPLAY_TITLES.NAMESPACE, sortable: true },
+    { key: 'namespace', title: DISPLAY_TITLES.Namespace, sortable: true },
     { key: 'containers', title: DISPLAY_TITLES.DETECTED_CONTAINERS },
     { key: 'conditions', title: 'Conditions' },
     { key: 'throughput', title: 'Throughput', sortable: true },
@@ -15594,10 +15580,20 @@ const columns = [
 const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     const theme = Theme.useTheme();
     const filters = useFilterStore();
-    const { sources } = useEntityStore();
     const { isThisPending } = usePendingStore();
+    const { sources, sourcesLoading } = useEntityStore();
     const { setDrawerType, setDrawerEntityId } = useDrawerStore();
     const { selectedSources, setSelectedSources } = useSelectedStore();
+    const { isAwaitingInstrumentation, sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted } = useInstrumentStore();
+    const instrumentingPercent = useMemo(() => {
+        const calculateProgress = (total, completed) => (total > 0 ? Math.floor((100 / total) * completed) || 1 : 1);
+        if (sourcesToCreate)
+            return calculateProgress(sourcesToCreate, sourcesCreated);
+        if (sourcesToDelete)
+            return calculateProgress(sourcesToDelete, sourcesDeleted);
+        return 1;
+    }, [sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted]);
+    const filtered = useMemo(() => filterSources(sources, filters), [sources, filters]);
     const [hasSelected, totalSelectedSources] = useMemo(() => {
         let num = 0;
         Object.values(selectedSources).forEach((selectedSources) => {
@@ -15608,9 +15604,9 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     const onSelectAll = useCallback((bool) => {
         if (bool) {
             const payload = {};
-            sources?.forEach((source) => {
+            filtered.forEach((source) => {
                 const id = { namespace: source.namespace, name: source.name, kind: source.kind };
-                const isPending = isThisPending({ entityType: ENTITY_TYPES.SOURCE, entityId: id });
+                const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
                 if (!isPending) {
                     if (!payload[source.namespace]) {
                         payload[source.namespace] = [source];
@@ -15625,7 +15621,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         else {
             setSelectedSources({});
         }
-    }, [sources]);
+    }, [filtered]);
     const onSelectOne = useCallback((source) => {
         const { namespace, name, kind } = source;
         const payload = { ...selectedSources };
@@ -15640,16 +15636,13 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         }
         setSelectedSources(payload);
     }, [selectedSources]);
-    const { isAwaitingInstrumentation, sourcesToCreate, sourcesCreated, sourcesToDelete, sourcesDeleted } = useInstrumentStore();
-    const instrumentingPercent = (!!sourcesToCreate ? Math.floor((100 / sourcesToCreate) * sourcesCreated) : !!sourcesToDelete ? Math.floor((100 / sourcesToDelete) * sourcesDeleted) : 0) || 1;
-    const filtered = useMemo(() => filterSources(sources, filters), [sources, filters]);
     const rows = useMemo(() => filtered.map((source) => {
         const id = { namespace: source.namespace, name: source.name, kind: source.kind };
         const { hasErrors, hasWarnings, hasDisableds } = getConditionsBooleans(source.conditions || []);
-        const isPending = isThisPending({ entityType: ENTITY_TYPES.SOURCE, entityId: id });
+        const isPending = isThisPending({ entityType: EntityTypes.Source, entityId: id });
         const isChecked = !!selectedSources[id.namespace]?.find((x) => x.namespace === id.namespace && x.name === id.name && x.kind === id.kind);
         return {
-            status: hasErrors ? NOTIFICATION_TYPE.ERROR : hasWarnings ? NOTIFICATION_TYPE.WARNING : undefined,
+            status: hasErrors ? StatusType.Error : hasWarnings ? StatusType.Warning : undefined,
             faded: hasDisableds,
             cells: [
                 {
@@ -15660,7 +15653,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'name',
-                    value: getEntityLabel(source, ENTITY_TYPES.SOURCE, { extended: true }),
+                    value: getEntityLabel(source, EntityTypes.Source, { extended: true }),
                 },
                 {
                     columnKey: 'type',
@@ -15674,7 +15667,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 },
                 {
                     columnKey: 'throughput',
-                    value: formatBytes(getMetricForEntity(metrics, ENTITY_TYPES.SOURCE, id).throughput),
+                    value: formatBytes(getMetricForEntity(metrics, EntityTypes.Source, id).throughput),
                     textColor: theme.text.info,
                 },
                 {
@@ -15684,18 +15677,20 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
                 {
                     columnKey: 'containers',
                     component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                        React.createElement(Status, { status: NOTIFICATION_TYPE.INFO, title: getContainersInstrumentedCount(source.containers), withBorder: true }))),
+                        React.createElement(Status, { status: StatusType.Info, title: getContainersInstrumentedCount(source.containers), withBorder: true }))),
                 },
             ],
         };
     }), [filtered, selectedSources, metrics, onSelectOne]);
-    return (React.createElement(FlexColumn, { style: { maxWidth: maxWidth || 'unset', width: '100%' } },
-        React.createElement(FlexRow, { "$gap": 16, style: { padding: '16px' } },
-            React.createElement(Checkbox, { partiallyChecked: hasSelected && sources?.length !== totalSelectedSources, value: hasSelected && sources?.length === totalSelectedSources, onChange: onSelectAll, disabled: !sources?.length }),
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(ENTITY_TYPES.SOURCE), title: 'Sources', badge: filtered.length !== sources.length ? `${filtered.length}/${sources.length}` : sources.length })),
+    const badge = useMemo(() => (filtered.length !== sources.length ? `${filtered.length}/${sources.length}` : sources.length), [filtered, sources]);
+    const badgeTooltip = useMemo(() => (filtered.length !== sources.length ? DISPLAY_TITLES.FILTERED_COUNT_TOOLTIP : undefined), [filtered, sources]);
+    return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
+        React.createElement(TableTitleWrap, null,
+            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, onRowClick: (idx) => {
-                    setDrawerType(ENTITY_TYPES.SOURCE);
+                    setDrawerType(EntityTypes.Source);
                     setDrawerEntityId({ namespace: filtered[idx].namespace, name: filtered[idx].name, kind: filtered[idx].kind });
                 } })),
         isAwaitingInstrumentation ? (React.createElement(CenterThis, { style: { marginTop: '2rem', gap: '24px' } },
@@ -15760,7 +15755,7 @@ const TokenActions = ({ token, saveToken }) => {
         setIsEdit(false);
         setInputValue(token);
     };
-    const SuccessIcon = getStatusIcon(NOTIFICATION_TYPE.SUCCESS, theme);
+    const SuccessIcon = getStatusIcon(StatusType.Success, theme);
     useOnClickOutside(popupRef, onCloseEdit);
     return (React.createElement(FlexRow, { "$gap": 0 },
         React.createElement(IconButton, { size: 32, onClick: () => clickCopy(token) }, isCopied ? React.createElement(SuccessIcon, null) : React.createElement(CopyIcon, null)),
@@ -15783,7 +15778,7 @@ const TokenActions = ({ token, saveToken }) => {
 const Tokens = ({ tokens, saveToken }) => {
     return (React.createElement(DataCard, { title: 'Authorization Tokens', titleBadge: tokens.length, data: [
             {
-                type: DATA_CARD_FIELD_TYPES.TABLE,
+                type: DataCardFieldTypes.Table,
                 value: {
                     columns: [
                         { key: 'icon', title: '' },
@@ -15826,10 +15821,10 @@ const Describe = ({ fetchDescribeOdigos }) => {
     const mapObjectToCardFields = (obj) => !!obj?.name
         ? [
             {
-                type: DATA_CARD_FIELD_TYPES.DIVIDER,
+                type: DataCardFieldTypes.Divider,
             },
             {
-                type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
+                type: DataCardFieldTypes.DescribeRow,
                 value: JSON.stringify({
                     title: obj.name,
                     subTitle: obj.explain,
@@ -15956,4 +15951,4 @@ const ToggleDarkMode = () => {
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NAV_ICON_IDS, NamespaceDropdown, NotificationManager, OverviewDrawer, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ComputePlatformSelect, ComputePlatforms, ComputePlatformsActionsMenu, ConnectionStatusDropdown, ConnectionTypeDropdown, DataFlow, DataFlowActionsMenu, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, ToastList, ToggleDarkMode };