@odigos/ui-kit 0.0.8 → 0.0.10

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-CKUgKtl0.js';
+import { D as DISPLAY_TITLES, F as FORM_ALERTS } from './index-DnmWFsTQ.js';
+import { ACTION_TYPE, ENTITY_TYPES, STATUS_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, 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-Do8ODRlA.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 Theme from './theme.js';
 import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-DLKEpJJm.js';
+import { i as CheckCircledIcon, h as ErrorTriangleIcon, W as WarningTriangleIcon } from './index-ixs381n-.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 { u as useActionFormData, a as useClickNode, c as useDestinationFormData, b as useClickNotification, d as useSourceFormData, e as useSourceSelectionFormData } from './useSourceSelectionFormData-CxdOP9FT.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 { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, A as ArrowIcon, a as CopyIcon, f as CheckIcon, g as CrossIcon } from './index-BJxaoI0G.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-BulCzWQI.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-CKD2OX24.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-DB1gmCsH.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-eF2JXMVR.js';
 import require$$1 from 'use-sync-external-store/shim';
 import { createPortal } from 'react-dom';
 import { O as OdigosLogo } from './index-BGlk5VhF.js';
@@ -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: STATUS_TYPE.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) });
@@ -644,28 +645,23 @@ 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 errors = useMemo(() => conditions?.filter(({ status }) => status === STATUS_TYPE.ERROR) || [], [conditions]);
+    const warnings = useMemo(() => conditions?.filter(({ status }) => status === STATUS_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 }))));
+    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: STATUS_TYPE.SUCCESS, title: STATUS_TYPE.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 = STATUS_TYPE.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 },
@@ -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 ? STATUS_TYPE.ERROR : hasWarnings ? STATUS_TYPE.WARNING : undefined,
             faded: hasDisableds,
             cells: [
                 {
@@ -724,15 +720,17 @@ 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 ? STATUS_TYPE.ERROR : STATUS_TYPE.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(ENTITY_TYPES.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);
                     setDrawerEntityId(filtered[idx].id);
@@ -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, connectionStatus }, idx) => (React.createElement(SelectionButton, { key: `platform-${id}`, icon: () => getPlatformIcon(type)({ fill: connectionStatus === NOTIFICATION_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
-                    if (connectionStatus === 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 === STATUS_TYPE.SUCCESS ? theme.text.success : theme.text.error }), label: `${!!name ? name : getPlatformLabel(type)} (${id})`, isSelected: selected?.id === id, onClick: () => {
+                    if (status === STATUS_TYPE.SUCCESS) {
                         onSelect(filtered[idx]);
                     }
                     else {
                         addNotification({
-                            type: NOTIFICATION_TYPE.WARNING,
+                            type: STATUS_TYPE.WARNING,
                             title: 'Connection lost',
                             message: 'Cannot connect to this platform',
                             hideFromHistory: true,
@@ -918,9 +916,9 @@ const ComputePlatformSelect = ({ connections, selected, onSelect, onViewAll }) =
 
 const ComputePlatforms = ({ connections, onSelect }) => {
     const { searchText, platformTypes, statuses } = useFilterStore();
-    const filtered = connections.filter(({ id, type, connectionStatus }) => (!searchText || id.toLowerCase().includes(searchText)) &&
+    const filtered = connections.filter(({ id, type, status }) => (!searchText || id.toLowerCase().includes(searchText)) &&
         (!platformTypes?.length || platformTypes.find((opt) => opt.id === type)) &&
-        (!statuses?.length || statuses.find((opt) => opt.id === connectionStatus)));
+        (!statuses?.length || statuses.find((opt) => opt.id === status)));
     return (React.createElement(React.Fragment, null,
         React.createElement(InteractiveTable, { columns: [
                 { key: 'icon', title: '' },
@@ -928,7 +926,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
                 { key: 'type', title: 'Type' },
                 { key: 'status', title: 'Status' },
                 { key: 'id', title: 'Unique ID' },
-            ], rows: filtered.map(({ id, name, type, connectionStatus }) => ({
+            ], rows: filtered.map(({ id, name, type, status }) => ({
                 cells: [
                     { columnKey: 'id', value: id },
                     { columnKey: 'type', value: type },
@@ -937,7 +935,7 @@ const ComputePlatforms = ({ connections, onSelect }) => {
                     {
                         columnKey: 'status',
                         component: () => (React.createElement("div", { style: { lineHeight: 1 } },
-                            React.createElement(Status, { title: connectionStatus === NOTIFICATION_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: connectionStatus, withIcon: true, withBorder: true }))),
+                            React.createElement(Status, { title: status === STATUS_TYPE.SUCCESS ? 'connection alive' : 'connection lost', status: status, withIcon: true, withBorder: true }))),
                     },
                 ],
             })), onRowClick: (idx) => onSelect(filtered[idx]) }),
@@ -948,9 +946,9 @@ const ComputePlatforms = ({ connections, onSelect }) => {
 const ConnectionStatusDropdown = ({ connections, title = '', value, onSelect, onDeselect, ...props }) => {
     const options = useMemo(() => {
         const payload = [];
-        connections?.forEach(({ connectionStatus }) => {
-            if (!payload.find((opt) => opt.id === connectionStatus)) {
-                payload.push({ id: connectionStatus, value: connectionStatus });
+        connections?.forEach(({ status }) => {
+            if (!payload.find((opt) => opt.id === status)) {
+                payload.push({ id: status, value: status });
             }
         });
         return payload;
@@ -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 === STATUS_TYPE.ERROR && !payload.find((opt) => opt.id === message)) {
                     if (!!message) {
                         if (!payload.find((opt) => opt.id === message))
                             payload.push({ id: message, value: message });
@@ -12699,7 +12697,7 @@ const BaseNode = memo(({ id: nodeId, data }) => {
     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 === STATUS_TYPE.ERROR ? (React.createElement(ErrorTriangleIcon, { size: 20 })) : status === STATUS_TYPE.WARNING ? (React.createElement(WarningTriangleIcon, { size: 20 })) : sourceIsInstrumenting ? (React.createElement(FadeLoader, null)) : null));
     };
     const { selectedSources, setSelectedSources } = useSelectedStore();
     const namespaces = { ...selectedSources };
@@ -13041,7 +13039,7 @@ const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
                     animated: false,
                     isMultiTarget: false,
                     label: formatBytes(metric?.throughput),
-                    isError: status === NOTIFICATION_TYPE.ERROR,
+                    isError: status === STATUS_TYPE.ERROR,
                 }));
             }
         }
@@ -13052,7 +13050,7 @@ const buildEdges = ({ theme, nodes, metrics, containerHeight }) => {
                 animated: false,
                 isMultiTarget: true,
                 label: formatBytes(metric?.throughput),
-                isError: status === NOTIFICATION_TYPE.ERROR,
+                isError: status === STATUS_TYPE.ERROR,
             }));
         }
     });
@@ -13085,7 +13083,7 @@ const buildRuleNodes = ({ loading, entities, positions, unfilteredCount }) => {
         },
         data: {
             nodeWidth: nodeWidth$4,
-            title: 'Instrumentation Rules',
+            title: DISPLAY_TITLES.INSTRUMENTATION_RULES,
             icon: getEntityIcon(ENTITY_TYPES.INSTRUMENTATION_RULE),
             badge: unfilteredCount,
             isFetching: loading,
@@ -13165,7 +13163,7 @@ const buildActionNodes = ({ loading, entities, positions, unfilteredCount }) =>
         },
         data: {
             nodeWidth: nodeWidth$3,
-            title: 'Actions',
+            title: DISPLAY_TITLES.ACTIONS,
             icon: getEntityIcon(ENTITY_TYPES.ACTION),
             badge: unfilteredCount,
             isFetching: loading,
@@ -13247,7 +13245,7 @@ const mapToNodeData$1 = (entity) => {
         faded: hasDisableds,
         title: getEntityLabel(entity, ENTITY_TYPES.SOURCE, { extended: true }),
         subTitle: `${entity.namespace} • ${entity.kind}`,
-        iconSrcs: getContainersIcons(entity.containers),
+        icons: getContainersIcons(entity.containers),
         raw: entity,
     };
 };
@@ -13264,10 +13262,10 @@ const buildSourceNodes = ({ loading, entities, positions, unfilteredCount, conta
         },
         data: {
             nodeWidth: nodeWidth$2,
-            title: 'Sources',
+            title: DISPLAY_TITLES.SOURCES,
             icon: getEntityIcon(ENTITY_TYPES.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,
         },
@@ -13402,7 +13400,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount }
         },
         data: {
             nodeWidth,
-            title: 'Destinations',
+            title: DISPLAY_TITLES.DESTINATIONS,
             icon: getEntityIcon(ENTITY_TYPES.DESTINATION),
             badge: unfilteredCount,
             isFetching: loading,
@@ -13947,15 +13945,15 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         !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(STATUS_TYPE.ERROR);
                     }, onSuccess: () => {
                         setIsFormDirty(false);
-                        setConnectionStatus(NOTIFICATION_TYPE.SUCCESS);
+                        setConnectionStatus(STATUS_TYPE.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 === STATUS_TYPE.ERROR && React.createElement(NotificationNote, { type: STATUS_TYPE.ERROR, message: 'Connection failed. Please check your input and try again.' }),
+                testConnectionSupported && connectionStatus === STATUS_TYPE.SUCCESS && React.createElement(NotificationNote, { type: STATUS_TYPE.SUCCESS, message: 'Connection succeeded.' }),
+                autoFilled && React.createElement(NotificationNote, { type: STATUS_TYPE.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) => {
@@ -14305,7 +14303,7 @@ const DestinationSelectionForm = ({ categories, potentialDestinations, createDes
     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: STATUS_TYPE.WARNING, message: 'No sources selected. Please go back to select sources.', action: {
                     label: 'Select Sources',
                     onClick: goToSources,
                 } }))),
@@ -14318,11 +14316,6 @@ const DestinationSelectionForm = ({ categories, potentialDestinations, createDes
             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 },
@@ -14334,13 +14327,13 @@ const columns$2 = [
 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 ? STATUS_TYPE.ERROR : hasWarnings ? STATUS_TYPE.WARNING : undefined,
             faded: hasDisableds,
             cells: [
                 {
@@ -14372,10 +14365,12 @@ 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(ENTITY_TYPES.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);
                     setDrawerEntityId(filtered[idx].id);
@@ -14638,7 +14633,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
     const handleEdit = (bool) => {
         if (!thisItem.mutable && (bool || bool === undefined)) {
             addNotification({
-                type: NOTIFICATION_TYPE.WARNING,
+                type: STATUS_TYPE.WARNING,
                 title: FORM_ALERTS.FORBIDDEN,
                 message: FORM_ALERTS.CANNOT_EDIT_RULE,
                 crdType: ENTITY_TYPES.INSTRUMENTATION_RULE,
@@ -14658,7 +14653,7 @@ const InstrumentationRuleDrawer = ({ updateInstrumentationRule, deleteInstrument
     const handleDelete = () => {
         if (!thisItem.mutable) {
             addNotification({
-                type: NOTIFICATION_TYPE.WARNING,
+                type: STATUS_TYPE.WARNING,
                 title: FORM_ALERTS.FORBIDDEN,
                 message: FORM_ALERTS.CANNOT_DELETE_RULE,
                 crdType: ENTITY_TYPES.INSTRUMENTATION_RULE,
@@ -14724,7 +14719,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: STATUS_TYPE.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 +14744,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 +14756,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) => {
@@ -14806,20 +14796,20 @@ 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 ? STATUS_TYPE.ERROR : STATUS_TYPE.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: STATUS_TYPE.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(ENTITY_TYPES.ACTION), title: DISPLAY_TITLES.INSTRUMENTATION_RULES, 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);
                     setDrawerEntityId(instrumentationRules[idx].ruleId);
@@ -15013,7 +15003,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 ? STATUS_TYPE.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)),
@@ -15126,17 +15116,18 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
         return (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, describe.pods.map(({ podName, nodeName, phase, containers }) => {
-        const podHasErrors = phase.status !== NOTIFICATION_TYPE.SUCCESS ||
-            !!containers.find(({ instrumentationInstances }) => !!instrumentationInstances.find(({ healthy }) => healthy.status !== NOTIFICATION_TYPE.SUCCESS));
-        return (React.createElement(DataCard, { key: `pod-${podName.value}`, title: `Pod: ${podName.value}`, withExtend: true, action: () => (React.createElement(Status, { status: podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, title: podHasErrors ? NOTIFICATION_TYPE.ERROR : NOTIFICATION_TYPE.SUCCESS, withIcon: true, withBorder: true })), data: [
+    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 !== STATUS_TYPE.SUCCESS ||
+            containers.findIndex(({ instrumentationInstances }) => instrumentationInstances.findIndex(({ healthy }) => healthy.status !== STATUS_TYPE.SUCCESS) !== -1) !== -1;
+        const podStatus = podHasErrors ? STATUS_TYPE.ERROR : STATUS_TYPE.SUCCESS;
+        const divider = { type: DATA_CARD_FIELD_TYPES.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,
                     value: `kubectl get pod ${podName.value} -n ${describe?.namespace?.value || source.namespace}`,
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 {
                     type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
                     value: JSON.stringify({
@@ -15148,9 +15139,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                         },
                     }),
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 {
                     type: DATA_CARD_FIELD_TYPES.DESCRIBE_ROW,
                     value: JSON.stringify({
@@ -15162,9 +15151,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                         },
                     }),
                 },
-                {
-                    type: DATA_CARD_FIELD_TYPES.DIVIDER,
-                },
+                divider,
                 ...containers.map((container) => {
                     return {
                         type: DATA_CARD_FIELD_TYPES.POD_CONTAINER,
@@ -15184,7 +15171,7 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
                     };
                 }),
             ] }));
-    })));
+    }))));
 };
 
 const buildCard = (source) => {
@@ -15580,11 +15567,6 @@ 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 },
@@ -15597,10 +15579,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) => {
@@ -15611,7 +15603,7 @@ 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 });
                 if (!isPending) {
@@ -15628,7 +15620,7 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
         else {
             setSelectedSources({});
         }
-    }, [sources]);
+    }, [filtered]);
     const onSelectOne = useCallback((source) => {
         const { namespace, name, kind } = source;
         const payload = { ...selectedSources };
@@ -15643,23 +15635,20 @@ 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 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 ? STATUS_TYPE.ERROR : hasWarnings ? STATUS_TYPE.WARNING : undefined,
             faded: hasDisableds,
             cells: [
                 {
                     columnKey: 'checkbox-and-icon',
                     component: () => (React.createElement(FlexRow, { "$gap": 16 },
                         React.createElement(Checkbox, { disabled: isPending, value: isChecked, onChange: () => onSelectOne(source) }),
-                        React.createElement(IconGroup, { iconSrcs: getContainersIcons(source.containers) }))),
+                        React.createElement(IconGroup, { icons: getContainersIcons(source.containers) }))),
                 },
                 {
                     columnKey: 'name',
@@ -15687,15 +15676,17 @@ 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: STATUS_TYPE.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(ENTITY_TYPES.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);
@@ -15763,7 +15754,7 @@ const TokenActions = ({ token, saveToken }) => {
         setIsEdit(false);
         setInputValue(token);
     };
-    const SuccessIcon = getStatusIcon(NOTIFICATION_TYPE.SUCCESS, theme);
+    const SuccessIcon = getStatusIcon(STATUS_TYPE.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)),
@@ -15842,7 +15833,7 @@ const Describe = ({ fetchDescribeOdigos }) => {
         ]
         : [];
     return (React.createElement(React.Fragment, null,
-        React.createElement(DataCard, { title: 'General Information', withExtend: true, data: [
+        React.createElement(DataCard, { title: 'General Information', withExtend: true, initialExtended: true, data: [
                 { title: describe?.odigosVersion?.name, value: describe?.odigosVersion?.value },
                 { title: describe?.kubernetesVersion?.name, value: describe?.kubernetesVersion?.value },
                 { title: describe?.installationMethod?.name, value: describe?.installationMethod?.value },