@odigos/ui-kit 0.0.63 → 0.0.64

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.64](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.63...ui-kit-v0.0.64) (2025-07-21)
+
+
+### Features
+
+* add drawer for "system settings" ([#261](https://github.com/odigos-io/ui-kit/issues/261)) ([cd3eb2e](https://github.com/odigos-io/ui-kit/commit/cd3eb2e986ffdf4796c4d98423405cfa7f1bfc2c))
+
 ## [0.0.63](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.62...ui-kit-v0.0.63) (2025-07-21)
 
 

package/lib/components/key-value-input-list/index.d.ts

@@ -9,10 +9,12 @@ interface KeyValueInputsListProps {
     onChange?: (validKeyValuePairs: Row[]) => void;
     title?: string;
     tooltip?: string;
+    disabled?: boolean;
     required?: boolean;
     errorMessage?: string;
     keyPlaceholder?: string;
     valuePlaceholder?: string;
+    inputMaxWidth?: number;
 }
 declare const KeyValueInputsList: FC<KeyValueInputsListProps>;
 export { KeyValueInputsList, type KeyValueInputsListProps };

package/lib/components/toggle/index.d.ts

@@ -1,6 +1,6 @@
 import { type FC } from 'react';
 interface ToggleProps {
-    title: string;
+    title?: string;
     tooltip?: string;
     initialValue?: boolean;
     onChange?: (value: boolean) => void;

package/lib/components.js

@@ -1,16 +1,16 @@
-import { B as Button } from './index-61caa474.js';
-export { A as AutocompleteInput, a as Badge, a6 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a5 as FlexColumn, a4 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a9 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a8 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, aa as TableContainer, ab as TableTitleWrap, ac as TableWrap, Z as Tag, _ as Text, $ as TextArea, a0 as Toggle, T as ToggleCodeComponent, a1 as Tooltip, a2 as TraceLoader, a7 as VerticalScroll, a3 as WarningModal } from './index-61caa474.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-eb03f43f.js';
+import { B as Button } from './index-13d8ebb2.js';
+export { A as AutocompleteInput, a as Badge, a6 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a5 as FlexColumn, a4 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, a9 as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, a8 as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, aa as TableContainer, ab as TableTitleWrap, ac as TableWrap, Z as Tag, _ as Text, $ as TextArea, a0 as Toggle, T as ToggleCodeComponent, a1 as Tooltip, a2 as TraceLoader, a7 as VerticalScroll, a3 as WarningModal } from './index-13d8ebb2.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-53f817d1.js';
 import React, { createContext, Component, createElement } from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
-import './types.js';
-import './index-1fcb0269.js';
-import './index-58440c5c.js';
+import { T as Theme } from './index-8dad36e5.js';
 import 'styled-components';
-import './index-50101bec.js';
-import './index-ec555530.js';
+import './index-b44c0701.js';
+import './types.js';
+import './index-5e5f7bda.js';
+import './index-23b2865d.js';
+import './index-4e685db0.js';
 import 'react-dom';
-import './useTransition-750816e0.js';
+import './useTransition-985cc4a8.js';
 
 const ErrorBoundaryContext = createContext(null);
 

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-bd48e6e2.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-8dad36e5.js';
 export { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
 import 'react';
 import './types.js';

package/lib/containers/system-settings/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import type { OdigosConfig } from '@/types';
+interface SystemSettingsProps {
+    settings: OdigosConfig;
+    onSave: (payload: OdigosConfig) => void;
+}
+declare const SystemSettings: FC<SystemSettingsProps>;
+export { SystemSettings, type SystemSettingsProps };

package/lib/containers/system-settings/settings/collector-gateway-settings.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { SettingsProps } from './types';
+declare const CollectorGatewaySettings: FC<SettingsProps>;
+export { CollectorGatewaySettings };

package/lib/containers/system-settings/settings/collector-node-settings.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { SettingsProps } from './types';
+declare const CollectorNodeSettings: FC<SettingsProps>;
+export { CollectorNodeSettings };

package/lib/containers/system-settings/settings/options.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownOption } from '@/components';
+import { AgentEnvVarsInjectionMethod, MountMethod, Profile, ProgrammingLanguages, UiMode } from '@/types';
+export declare const UI_MODE_OPTIONS: DropdownOption<UiMode>[];
+export declare const INSTRUMENTATION_LANG_OPTIONS: DropdownOption<ProgrammingLanguages>[];
+export declare const MOUNT_METHOD_OPTIONS: DropdownOption<MountMethod>[];
+export declare const AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS: DropdownOption<AgentEnvVarsInjectionMethod>[];
+export declare const PROFILE_OPTIONS: DropdownOption<Profile>[];

package/lib/containers/system-settings/settings/other-settings.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { SettingsProps } from './types';
+declare const OtherSettings: FC<SettingsProps>;
+export { OtherSettings };

package/lib/containers/system-settings/settings/styled.d.ts

@@ -0,0 +1,2 @@
+export declare const Card: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/components").TextProps, never>> & string & Omit<import("react").FC<import("@/components").TextProps>, keyof import("react").Component<any, {}, any>>;

package/lib/containers/system-settings/settings/types.d.ts

@@ -0,0 +1,5 @@
+import type { OdigosConfig } from '@/types';
+export interface SettingsProps {
+    formData: OdigosConfig;
+    handleFormChange: (key: keyof OdigosConfig | string, value: any) => void;
+}

package/lib/containers/system-settings/settings/ui-settings.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { SettingsProps } from './types';
+declare const UiSettings: FC<SettingsProps>;
+export { UiSettings };

package/lib/containers/system-settings/settings/user-instrumnetation-envs-settings.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import type { SettingsProps } from './types';
+declare const UserInstrumentationEnvsSettings: FC<SettingsProps>;
+export { UserInstrumentationEnvsSettings };

package/lib/containers.js

@@ -1,21 +1,21 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-bd48e6e2.js';
+import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, k as ImageErrorIcon, a0 as useDarkMode } from './index-8dad36e5.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind } from './types.js';
-import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-61caa474.js';
-import { i as isEmpty, s as safeJsonParse } from './index-ec555530.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-50101bec.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-56ab40b8.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-13d8ebb2.js';
+import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-4e685db0.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-d78c60e1.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
-import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-750816e0.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, A as ArrowIcon, P as PlusIcon, a as CopyIcon } from './index-1fcb0269.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-eb03f43f.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-58440c5c.js';
-import { f as filterActions, m as getEntityLabel, l as getEntityIcon, w as sleep, o as getPlatformIcon, p as getPlatformLabel, h as formatBytes, j as getContainersIcons, q as getValueForRange, k as getDestinationIcon, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, s as getYamlFieldsForDestination, d as deepClone, n as getMetricForEntity, r as getWorkloadId, t as hasUnhealthyInstances, i as getContainersInstrumentedCount, u as isOverTime } from './index-9e56485b.js';
+import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-985cc4a8.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-b44c0701.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-53f817d1.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-23b2865d.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-cfdd4195.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-acc7c7dd.js';
+import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-ff8fcc81.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -4710,7 +4710,7 @@ const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
     const [isOpen, setIsOpen] = useState(false);
     const toggleOpen = () => setIsOpen((prev) => !prev);
     return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { key: 'cli', onClick: toggleOpen, tooltip: TITLE_TEXT },
+        React.createElement(IconButton, { key: TITLE_TEXT, onClick: toggleOpen, tooltip: TITLE_TEXT },
             React.createElement(TerminalIcon, { size: 18 })),
         React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: isOpen, onClose: toggleOpen, header: {
                 icons: [TerminalIcon],

package/lib/functions.js

@@ -1,13 +1,13 @@
-export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-58440c5c.js';
-export { c as compareCondition, d as deepClone, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, e as filterSources, g as filterSourcesByStream, h as formatBytes, j as getContainersIcons, i as getContainersInstrumentedCount, k as getDestinationIcon, l as getEntityIcon, m as getEntityLabel, n as getMetricForEntity, o as getPlatformIcon, p as getPlatformLabel, q as getValueForRange, r as getWorkloadId, s as getYamlFieldsForDestination, t as hasUnhealthyInstances, u as isOverTime, v as mapDestinationFieldsForDisplay, w as sleep } from './index-9e56485b.js';
-export { g as getActionIcon, c as getEntityId, d as getInstrumentationRuleIcon, e as getProgrammingLanguageIcon } from './index-bd48e6e2.js';
+export { c as capitalizeFirstLetter, f as flattenObjectKeys, g as getConditionsBooleans, a as getMonitorIcon, b as getStatusIcon, i as isStringABoolean, d as isValidVersion, m as mapConditions, n as numbersOnly, p as parseBooleanFromString, e as parseJsonStringToPrettyString, r as removeEmptyValuesFromObject, s as safeJsonStringify, h as splitCamelString } from './index-23b2865d.js';
+export { c as compareCondition, f as filterActions, a as filterDestinations, b as filterDestinationsByStream, d as filterSources, e as filterSourcesByStream, g as formatBytes, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getPlatformIcon, o as getPlatformLabel, p as getValueForRange, q as getWorkloadId, r as getYamlFieldsForDestination, s as hasUnhealthyInstances, t as isOverTime, u as mapDestinationFieldsForDisplay, v as sleep } from './index-cfdd4195.js';
+export { d as deepClone, i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
+export { g as getActionIcon, c as getEntityId, d as getInstrumentationRuleIcon, e as getProgrammingLanguageIcon } from './index-8dad36e5.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 import { ProgrammingLanguages, EntityTypes } from './types.js';
-export { i as isEmpty, s as safeJsonParse } from './index-ec555530.js';
 import 'react';
 import 'styled-components';
-import './index-50101bec.js';
-import './index-acc7c7dd.js';
+import './index-4e685db0.js';
+import './index-ff8fcc81.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/hooks.js

@@ -1,10 +1,10 @@
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
-import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-bd48e6e2.js';
+import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-8dad36e5.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
-import { i as isEmpty, s as safeJsonParse } from './index-ec555530.js';
-import { i as useGenericForm } from './useTransition-750816e0.js';
-export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-750816e0.js';
+import { i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
+import { i as useGenericForm } from './useTransition-985cc4a8.js';
+export { c as useClickNode, b as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, a as useOnClickOutside, d as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-985cc4a8.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 
 const INITIAL$2 = {

package/lib/icons/common/gear-icon/index.d.ts

@@ -0,0 +1,2 @@
+import type { SVG } from '@/types';
+export declare const GearIcon: SVG;

package/lib/icons/common/index.d.ts

@@ -9,6 +9,7 @@ export * from './edited-icon';
 export * from './extend-arrow-icon';
 export * from './filter-icon';
 export * from './folder-icon';
+export * from './gear-icon';
 export * from './image-error-icon';
 export * from './key-icon';
 export * from './list-icon';

package/lib/icons.js

@@ -1,10 +1,10 @@
-import { T as Theme } from './index-bd48e6e2.js';
-export { f as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, h as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, j as ImageErrorIcon, J as JavaLogo, K as K8sLogo, k as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, i as SamplerIcon, y as SwiftLogo } from './index-bd48e6e2.js';
-export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-50101bec.js';
-export { C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-56ab40b8.js';
-export { A as ArrowIcon, h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-1fcb0269.js';
+import { T as Theme } from './index-8dad36e5.js';
+export { h as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, i as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, k as ImageErrorIcon, J as JavaLogo, f as K8sLogo, K as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, j as SamplerIcon, y as SwiftLogo } from './index-8dad36e5.js';
+export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-4e685db0.js';
+export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-d78c60e1.js';
 import React from 'react';
-export { a3 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AwsCloudwatchLogo, d as AwsS3Logo, e as AwsXrayLogo, f as AxiomLogo, B as BetterStackLogo, g as BlobStorageLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, a4 as DestinationsIcon, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, G as GigapipeLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, a5 as NamespacesIcon, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, F as OpenTelemetryLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, T as QuickwitLogo, a6 as RulesIcon, U as SeqLogo, W as SignozLogo, a7 as SourcesIcon, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, V as VmLogo } from './index-acc7c7dd.js';
+export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-b44c0701.js';
+export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo, a7 as VmLogo } from './index-ff8fcc81.js';
 import './types.js';
 import 'styled-components';
 
@@ -36,6 +36,14 @@ const FolderIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M1.5 7.96504C1.5 6.28488 1.5 5.4448 1.82698 4.80307C2.1146 4.23858 2.57354 3.77964 3.13803 3.49202C3.77976 3.16504 4.61984 3.16504 6.3 3.16504H6.53667C6.88887 3.16504 7.06498 3.16504 7.22483 3.21358C7.36634 3.25656 7.49799 3.32702 7.61225 3.42093C7.74131 3.527 7.83899 3.67353 8.03436 3.96658L8.46564 4.6135C8.66101 4.90655 8.75869 5.05308 8.88775 5.15915C9.00201 5.25306 9.13366 5.32352 9.27517 5.36649C9.43502 5.41504 9.61113 5.41504 9.96333 5.41504H11.7C13.3802 5.41504 14.2202 5.41504 14.862 5.74202C15.4265 6.02964 15.8854 6.48858 16.173 7.05307C16.5 7.6948 16.5 8.53488 16.5 10.215V11.865C16.5 13.5452 16.5 14.3853 16.173 15.027C15.8854 15.5915 15.4265 16.0504 14.862 16.3381C14.2202 16.665 13.3802 16.665 11.7 16.665H6.3C4.61984 16.665 3.77976 16.665 3.13803 16.3381C2.57354 16.0504 2.1146 15.5915 1.82698 15.027C1.5 14.3853 1.5 13.5452 1.5 11.865V7.96504Z' })));
 };
 
+const GearIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M10.3982 4.27916C10.7851 2.57361 13.2149 2.57361 13.6018 4.27916L13.6531 4.50528C13.9038 5.61045 15.1719 6.13573 16.1306 5.53151L16.3268 5.40789C17.8064 4.47545 19.5246 6.19363 18.5921 7.6732L18.4685 7.86935C17.8643 8.82809 18.3895 10.0962 19.4947 10.3469L19.7208 10.3982C21.4264 10.7851 21.4264 13.2149 19.7208 13.6018L19.4947 13.6531C18.3895 13.9038 17.8643 15.1719 18.4685 16.1306L18.5921 16.3268C19.5246 17.8064 17.8064 19.5246 16.3268 18.5921L16.1306 18.4685C15.1719 17.8643 13.9038 18.3895 13.6531 19.4947L13.6018 19.7208C13.2149 21.4264 10.7851 21.4264 10.3982 19.7208L10.3469 19.4947C10.0962 18.3895 8.82809 17.8643 7.86935 18.4685L7.6732 18.5921C6.19363 19.5246 4.47545 17.8064 5.40789 16.3268L5.53151 16.1306C6.13573 15.1719 5.61045 13.9038 4.50528 13.6531L4.27916 13.6018C2.57361 13.2149 2.57361 10.7851 4.27916 10.3982L4.50528 10.3469C5.61045 10.0962 6.13573 8.82809 5.53151 7.86935L5.40789 7.6732C4.47544 6.19363 6.19363 4.47545 7.6732 5.40789L7.86935 5.53151C8.82809 6.13573 10.0962 5.61045 10.3469 4.50528L10.3982 4.27916Z' }),
+        React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M10.9909 12C10.9909 11.4477 11.4478 11 12 11C12.5523 11 13.0092 11.4477 13.0092 12C13.0092 12.5523 12.5523 13 12 13C11.4478 13 10.9909 12.5523 10.9909 12Z' })));
+};
+
 const RefreshArrowsIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -167,4 +175,4 @@ const ErrorRoundIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth =
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 8.33673V6.00339M7 10.3055V10.3061M12.25 7.97266C12.25 10.8722 9.89949 13.2227 7 13.2227C4.1005 13.2227 1.75 10.8721 1.75 7.97265C1.75 5.07316 4.10051 2.72266 7 2.72266C9.8995 2.72266 12.25 5.07316 12.25 7.97266Z' })));
 };
 
-export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };
+export { AvatarIcon, CodeBracketsIcon, CommandIcon, ConnectionsIcon, ErrorRoundIcon, FolderIcon, GearIcon, GoogleCloudStorageLogo, LightOffIcon, LightOnIcon, MinusCircledIcon, MoonIcon, PlusCircledIcon, RefreshArrowsIcon, RefreshRightArrowIcon, RotateArrowsIcon, SentryLogo, ServiceMapIcon, SunIcon, TraceViewIcon, UserGroupIcon, UserSettingsIcon };

package/lib/{index-61caa474.js → index-13d8ebb2.js}

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useRef, forwardRef, useMemo, createElement, useCallback, Fragment, createContext, memo, useContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, j as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-bd48e6e2.js';
-import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
-import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon, A as ArrowIcon } from './index-1fcb0269.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-58440c5c.js';
+import { T as Theme, B as BUTTON_TEXTS, k as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-8dad36e5.js';
 import styled, { css } from 'styled-components';
-import { s as safeJsonParse, i as isEmpty } from './index-ec555530.js';
+import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-b44c0701.js';
+import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
+import { s as safeJsonParse, i as isEmpty } from './index-5e5f7bda.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-23b2865d.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-750816e0.js';
-import { I as InfoIcon } from './index-50101bec.js';
+import { d as usePopup, h as useCopy, c as useClickNode, i as useGenericForm, b as useContainerSize, f as useTransition, u as useKeyDown, a as useOnClickOutside } from './useTransition-985cc4a8.js';
+import { I as InfoIcon } from './index-4e685db0.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};
@@ -39,7 +39,7 @@ const AutocompleteContainer = styled.div `
   position: relative;
   width: 100%;
 `;
-const InputWrapper$2 = styled.div `
+const InputWrapper$3 = styled.div `
   width: calc(100% - 16px);
   display: flex;
   align-items: center;
@@ -187,7 +187,7 @@ const AutocompleteInput = ({ placeholder = 'Type to search...', options, selecte
         return;
     };
     return (React.createElement(AutocompleteContainer, { style: style },
-        React.createElement(InputWrapper$2, { "$hasError": !!errorMessage },
+        React.createElement(InputWrapper$3, { "$hasError": !!errorMessage },
             Icon && React.createElement(Icon, null),
             React.createElement(StyledInput$1, { type: 'text', value: query, placeholder: placeholder, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, onBlur: () => !disabled && setShowOptions(false), onFocus: () => !disabled && setShowOptions(true), ...props })),
         showOptions && filteredOptions.length ? (React.createElement(OptionsList, null, filteredOptions.map((option) => (React.createElement(OptionItem, { key: option.type || option.label, option: option, onClick: handleOptionClick }))))) : null,
@@ -17391,7 +17391,7 @@ const Title$6 = styled(Text) `
   white-space: nowrap;
   text-overflow: ellipsis;
 `;
-const ActionButton$1 = styled(Button$4) `
+const ActionButton$3 = styled(Button$4) `
   gap: 8px;
 `;
 const CloseButton = styled(Button$4) ``;
@@ -17412,7 +17412,7 @@ const DrawerHeader = ({ onClose, icons, iconSrcs, title, titleTooltip, replaceTi
                 renderReplaceTitleWith() || (React.createElement(Tooltip, { text: titleTooltip, withIcon: true }, title && React.createElement(Title$6, null, title)))),
             React.createElement(SectionItemsWrapper, { "$gap": 2 },
                 actions,
-                actionButtons.map((btn, i) => (React.createElement(ActionButton$1, { key: `header-action-button-${i}`, ...btn }))),
+                actionButtons.map((btn, i) => (React.createElement(ActionButton$3, { key: `header-action-button-${i}`, ...btn }))),
                 React.createElement(CloseButton, { "data-id": 'drawer-close', variant: 'secondary', onClick: onClose },
                     React.createElement(XIcon, { size: 12 })))),
         React.createElement(TabList, { tabs: tabs, hideBorder: true })));
@@ -17529,7 +17529,7 @@ const Container$g = styled.div `
   position: relative;
   width: 100%;
 `;
-const InputWrapper$1 = styled.div `
+const InputWrapper$2 = styled.div `
   width: 100%;
   display: flex;
   align-items: center;
@@ -17540,7 +17540,6 @@ const InputWrapper$1 = styled.div `
   border: 1px solid ${({ theme }) => theme.colors.border};
   ${({ $disabled }) => $disabled &&
     css `
-      background-color: ${({ theme }) => theme.colors.border};
       cursor: not-allowed;
       opacity: 0.6;
     `}
@@ -17562,6 +17561,8 @@ const InputWrapper$1 = styled.div `
 const StyledInput = styled.input `
   padding-left: ${({ $hasIcon }) => ($hasIcon ? '0' : '16px')};
   flex: 1;
+  min-width: 150px;
+  width: 100%;
   border: none;
   outline: none;
   background: none;
@@ -17578,8 +17579,8 @@ const StyledInput = styled.input `
     line-height: 22px; /* 157.143% */
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.colors.border};
     cursor: not-allowed;
+    opacity: 0.6;
   }
   &::-webkit-inner-spin-button,
   &::-webkit-outer-spin-button {
@@ -17628,7 +17629,7 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
     };
     return (React.createElement(Container$g, null,
         React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
-        React.createElement(InputWrapper$1, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
+        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
             isSecret ? (React.createElement(IconWrapperClickable, { onClick: () => setRevealSecret((prev) => !prev) }, revealSecret ? React.createElement(EyeClosedIcon, { size: 14, fill: theme.text.grey }) : React.createElement(EyeOpenIcon, { size: 14, fill: theme.text.grey }))) : Icon ? (React.createElement(IconWrapper$2, null,
                 React.createElement(Icon, { size: 14, fill: theme.text.grey }))) : null,
             React.createElement(StyledInput, { "data-id": name, type: revealSecret ? InputTypes.Text : type === InputTypes.Number ? InputTypes.Text : type, "$hasIcon": !!Icon || isSecret, name: name, value: value, onChange: handleInputChange, onKeyDown: handleKeyDown, ...props }),
@@ -17918,11 +17919,9 @@ const RowWrapper$1 = styled.div `
   align-items: center;
   gap: 16px;
 `;
-const DeleteButton$2 = styled.button `
-  background: none;
-  border: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+const ActionButton$2 = styled(IconButton) `
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
 `;
 const INITIAL_ROW$1 = '';
 const InputList = ({ initialValues = [], value, onChange, title, tooltip, required, errorMessage }) => {
@@ -17943,23 +17942,28 @@ const InputList = ({ initialValues = [], value, onChange, title, tooltip, requir
                 onChange(validRows);
         }
     }, [validRows, onChange]);
-    const handleAddInput = () => {
+    const handleChange = (val, idx) => {
         setRows((prev) => {
             const payload = [...prev];
-            payload.push(INITIAL_ROW$1);
+            payload[idx] = val;
             return payload;
         });
     };
-    const handleDeleteInput = (idx) => {
-        setRows((prev) => prev.filter((_, i) => i !== idx));
-    };
-    const handleInputChange = (val, idx) => {
+    const handleAdd = () => {
         setRows((prev) => {
             const payload = [...prev];
-            payload[idx] = val;
+            payload.push(INITIAL_ROW$1);
             return payload;
         });
     };
+    const handleDelete = (idx) => {
+        if (isMinRows) {
+            handleChange('', idx);
+        }
+        else {
+            setRows((prev) => prev.filter((_, i) => i !== idx));
+        }
+    };
     // Check if any input field is empty
     const isMinRows = rows.length <= 1;
     const isAddButtonDisabled = rows.some((input) => input.trim() === '');
@@ -17969,19 +17973,13 @@ const InputList = ({ initialValues = [], value, onChange, title, tooltip, requir
         React.createElement(ListContainer$2, null, rows.map((val, idx) => {
             const isLast = idx === rows.length - 1;
             return (React.createElement(RowWrapper$1, { key: `input-list-${idx}` },
-                React.createElement(Input, { value: val, onChange: (e) => handleInputChange(e.target.value, idx), hasError: !!errorMessage, autoFocus: isEmpty(val) && !isMinRows && isLast }),
-                React.createElement(DeleteButton$2, { disabled: isDelButtonDisabled, onClick: () => {
-                        if (isMinRows) {
-                            handleInputChange('', idx);
-                        }
-                        else {
-                            handleDeleteInput(idx);
-                        }
-                    } },
+                React.createElement(Input, { value: val, onChange: (e) => handleChange(e.target.value, idx), hasError: !!errorMessage, autoFocus: isEmpty(val) && !isMinRows && isLast }),
+                idx === rows.length - 1 && (React.createElement(ActionButton$2, { withBorder: true, size: 30, "$disabled": isAddButtonDisabled, onClick: isAddButtonDisabled ? undefined : () => handleAdd() },
+                    React.createElement(PlusIcon$1, null))),
+                React.createElement(ActionButton$2, { size: 30, "$disabled": isDelButtonDisabled, onClick: isDelButtonDisabled ? undefined : () => handleDelete(idx) },
                     React.createElement(TrashIcon, null))));
         })),
-        !!errorMessage && React.createElement(FieldError, null, errorMessage),
-        React.createElement(AddButton$1, { onClick: handleAddInput, disabled: isAddButtonDisabled })));
+        !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 
 const ColumnsToFields = ({ col, colIdx, row, rowIdx, rowsLength, maxWidth, handleChange, errorMessage, limitFieldsPerRow }) => {
@@ -18010,7 +18008,7 @@ const Container$b = styled.div `
   flex-direction: column;
   width: 100%;
 `;
-const DeleteButton$1 = styled.button `
+const DeleteButton = styled.button `
   margin-top: ${({ $marginTop }) => $marginTop};
   background: none;
   border: none;
@@ -18110,7 +18108,7 @@ const InputTable = ({ columns, initialValues = [], value, onChange, errorMessage
                 matrixColumns.map((cols, colIdx) => (React.createElement("tr", { key: `input-table-matrix-${rowIdx}-${colIdx}` },
                     cols.map((obj, colIdx) => (React.createElement(ColumnsToFields, { key: `input-table-row-${rowIdx}-col-${colIdx}`, col: obj, colIdx: colIdx, row: row, rowIdx: rowIdx, rowsLength: rows.length, maxWidth: maxWidth, limitFieldsPerRow: limitFieldsPerRow, errorMessage: errorMessage, handleChange: handleChange }))),
                     colIdx === 0 && (React.createElement("td", null,
-                        React.createElement(DeleteButton$1, { "$marginTop": limitFieldsPerRow ? '24px' : '0', onClick: () => handleDeleteRow(rowIdx) },
+                        React.createElement(DeleteButton, { "$marginTop": limitFieldsPerRow ? '24px' : '0', onClick: () => handleDeleteRow(rowIdx) },
                             React.createElement(TrashIcon, null)))))))))))),
         !!errorMessage && React.createElement(FieldError, null, errorMessage),
         React.createElement(AddButton$1, { onClick: handleAddRow, disabled: isAddButtonDisabled })));
@@ -18129,21 +18127,21 @@ const ListContainer$1 = styled.div `
 const RowWrapper = styled.div `
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
 `;
-const DeleteButton = styled.button `
-  background: none;
-  border: none;
-  cursor: pointer;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+const InputWrapper$1 = styled.div `
+  width: 100%;
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : 'unset')};
+`;
+const ActionButton$1 = styled(IconButton) `
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
 `;
 const INITIAL_ROW = {
     key: '',
     value: '',
 };
-const KeyValueInputsList = ({ initialKeyValuePairs = [], value, onChange, title, tooltip, required, errorMessage, keyPlaceholder = 'Attribute name', valuePlaceholder = 'Attribute value' }) => {
-    const theme = Theme.useTheme();
+const KeyValueInputsList = ({ initialKeyValuePairs = [], value, onChange, title, tooltip, disabled, required, errorMessage, keyPlaceholder = 'Key', valuePlaceholder = 'Value', inputMaxWidth = 300, }) => {
     const [rows, setRows] = useState(value || initialKeyValuePairs);
     useEffect(() => {
         if (!rows.length)
@@ -18161,46 +18159,45 @@ const KeyValueInputsList = ({ initialKeyValuePairs = [], value, onChange, title,
                 onChange(validRows);
         }
     }, [validRows, onChange]);
-    const handleAddRow = () => {
+    const handleChange = (key, val, idx) => {
         setRows((prev) => {
             const payload = [...prev];
-            payload.push({ ...INITIAL_ROW });
+            payload[idx][key] = val;
             return payload;
         });
     };
-    const handleDeleteRow = (idx) => {
-        setRows((prev) => prev.filter((_, i) => i !== idx));
-    };
-    const handleChange = (key, val, idx) => {
+    const handleAddRow = () => {
         setRows((prev) => {
             const payload = [...prev];
-            payload[idx][key] = val;
+            payload.push({ ...INITIAL_ROW });
             return payload;
         });
     };
+    const handleDeleteRow = (idx) => {
+        if (isMinRows) {
+            handleChange('key', '', idx);
+            handleChange('value', '', idx);
+        }
+        else {
+            setRows((prev) => prev.filter((_, i) => i !== idx));
+        }
+    };
     // Check if any key or value field is empty
     const isMinRows = rows.length <= 1;
-    const isAddButtonDisabled = rows.some(({ key, value }) => key.trim() === '' || value.trim() === '');
-    const isDelButtonDisabled = isMinRows && isAddButtonDisabled;
+    const isAddButtonDisabled = disabled || rows.some(({ key, value }) => key.trim() === '' || value.trim() === '');
+    const isDelButtonDisabled = disabled || (isMinRows && isAddButtonDisabled);
     return (React.createElement(Container$a, null,
         React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
         React.createElement(ListContainer$1, null, rows.map(({ key, value }, idx) => (React.createElement(RowWrapper, { key: `key-value-input-list-${idx}` },
-            React.createElement(Input, { placeholder: keyPlaceholder, value: key, onChange: (e) => handleChange('key', e.target.value, idx), hasError: !!errorMessage && (!required || (required && !key)), autoFocus: isEmpty(value) && !isMinRows && idx === rows.length - 1 }),
-            React.createElement("div", null,
-                React.createElement(ArrowIcon, { rotate: 180, fill: theme.text.darker_grey })),
-            React.createElement(Input, { placeholder: valuePlaceholder, value: value, onChange: (e) => handleChange('value', e.target.value, idx), hasError: !!errorMessage && (!required || (required && isEmpty(value))), autoFocus: false }),
-            React.createElement(DeleteButton, { disabled: isDelButtonDisabled, onClick: () => {
-                    if (isMinRows) {
-                        handleChange('key', '', idx);
-                        handleChange('value', '', idx);
-                    }
-                    else {
-                        handleDeleteRow(idx);
-                    }
-                } },
+            React.createElement(InputWrapper$1, { "$maxWidth": inputMaxWidth },
+                React.createElement(Input, { placeholder: keyPlaceholder, disabled: disabled, value: key, onChange: (e) => handleChange('key', e.target.value, idx), hasError: !!errorMessage && (!required || (required && !key)), autoFocus: isEmpty(value) && !isMinRows && idx === rows.length - 1 })),
+            React.createElement(InputWrapper$1, { "$maxWidth": idx === rows.length - 1 ? inputMaxWidth - 38 : inputMaxWidth },
+                React.createElement(Input, { placeholder: valuePlaceholder, disabled: disabled, value: value, onChange: (e) => handleChange('value', e.target.value, idx), hasError: !!errorMessage && (!required || (required && isEmpty(value))), autoFocus: false })),
+            idx === rows.length - 1 && (React.createElement(ActionButton$1, { withBorder: true, size: 30, "$disabled": isAddButtonDisabled, onClick: isAddButtonDisabled ? undefined : () => handleAddRow() },
+                React.createElement(PlusIcon$1, null))),
+            React.createElement(ActionButton$1, { size: 30, "$disabled": isDelButtonDisabled, onClick: isDelButtonDisabled ? undefined : () => handleDeleteRow(idx) },
                 React.createElement(TrashIcon, null)))))),
-        !!errorMessage && React.createElement(FieldError, null, errorMessage),
-        React.createElement(AddButton$1, { onClick: handleAddRow, disabled: isAddButtonDisabled })));
+        !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 
 const Container$9 = styled.div `
@@ -18849,8 +18846,7 @@ const Toggle = ({ title, tooltip, initialValue = false, onChange, disabled, allo
     };
     return (React.createElement(Container$2, { "$disabled": disabled, onClick: handleToggle },
         !flipHorizontally && React.createElement(ToggleSwitch, { "$disabled": disabled, "$isActive": isActive }),
-        React.createElement(Tooltip, { text: tooltip, withIcon: true },
-            React.createElement(Text, { size: 14 }, title)),
+        (title || tooltip) && (React.createElement(Tooltip, { text: tooltip, withIcon: true }, title && React.createElement(Text, { size: 14 }, title))),
         flipHorizontally && React.createElement(ToggleSwitch, { "$disabled": disabled, "$isActive": isActive })));
 };
 

package/lib/{index-58440c5c.js → index-23b2865d.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-bd48e6e2.js';
+import './index-8dad36e5.js';
 import 'styled-components';
-import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-50101bec.js';
+import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-4e685db0.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-50101bec.js → index-4e685db0.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8dad36e5.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-eb03f43f.js → index-53f817d1.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { a3 as WarningModal } from './index-61caa474.js';
+import { a3 as WarningModal } from './index-13d8ebb2.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-bd48e6e2.js';
+import './index-8dad36e5.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-ec555530.js → index-5e5f7bda.js}

@@ -1,3 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const deepClone = (item) => {
+    return JSON.parse(JSON.stringify(item));
+};
+
 function safeJsonParse(val, fallback) {
     if (!val)
         return fallback;
@@ -31,4 +36,4 @@ const isEmpty = (val) => {
     }
 };
 
-export { isEmpty as i, safeJsonParse as s };
+export { deepClone as d, isEmpty as i, safeJsonParse as s };

package/lib/{index-bd48e6e2.js → index-8dad36e5.js}

@@ -1911,4 +1911,4 @@ var animations = /*#__PURE__*/Object.freeze({
 
 const Theme = { Provider, useTheme, opacity, animations };
 
-export { useSelectedStore as $, ACTION_OPTIONS as A, BUTTON_TEXTS as B, CodeAttributesIcon as C, DISPLAY_LANGUAGES as D, ElixirLogo as E, FORM_ALERTS as F, GoLogo as G, HeadersCollectionIcon as H, INSTRUMENTATION_RULE_OPTIONS as I, JavaLogo as J, K8sLogo as K, LANGUAGE_OPTIONS as L, MONITORS_OPTIONS as M, NginxLogo as N, useDrawerStore as O, PiiMaskingIcon as P, useActiveNodeStore as Q, RenameAttributeIcon as R, STORAGE_KEYS as S, Theme as T, usePendingStore as U, useNotificationStore as V, useEntityStore as W, useFilterStore as X, useDataStreamStore as Y, useInstrumentStore as Z, useSetupStore as _, DEFAULT_DATA_STREAM_NAME as a, useDarkMode as a0, styleInject as a1, DISPLAY_TITLES as b, getEntityId as c, getInstrumentationRuleIcon as d, getProgrammingLanguageIcon as e, AddClusterInfoIcon as f, getActionIcon as g, DeleteAttributeIcon as h, SamplerIcon as i, ImageErrorIcon as j, KafkaLogo as k, CustomInstrumentationIcon as l, PayloadCollectionIcon as m, CPlusPlusLogo as n, CSharpLogo as o, DotnetLogo as p, MysqlLogo as q, NodejsLogo as r, PhpLogo as s, PostgresLogo as t, PythonLogo as u, RedisLogo as v, RubyLogo as w, RustLogo as x, SwiftLogo as y, useModalStore as z };
+export { useSelectedStore as $, ACTION_OPTIONS as A, BUTTON_TEXTS as B, CodeAttributesIcon as C, DISPLAY_LANGUAGES as D, ElixirLogo as E, FORM_ALERTS as F, GoLogo as G, HeadersCollectionIcon as H, INSTRUMENTATION_RULE_OPTIONS as I, JavaLogo as J, KafkaLogo as K, LANGUAGE_OPTIONS as L, MONITORS_OPTIONS as M, NginxLogo as N, useDrawerStore as O, PiiMaskingIcon as P, useActiveNodeStore as Q, RenameAttributeIcon as R, STORAGE_KEYS as S, Theme as T, usePendingStore as U, useNotificationStore as V, useEntityStore as W, useFilterStore as X, useDataStreamStore as Y, useInstrumentStore as Z, useSetupStore as _, DEFAULT_DATA_STREAM_NAME as a, useDarkMode as a0, styleInject as a1, DISPLAY_TITLES as b, getEntityId as c, getInstrumentationRuleIcon as d, getProgrammingLanguageIcon as e, K8sLogo as f, getActionIcon as g, AddClusterInfoIcon as h, DeleteAttributeIcon as i, SamplerIcon as j, ImageErrorIcon as k, CustomInstrumentationIcon as l, PayloadCollectionIcon as m, CPlusPlusLogo as n, CSharpLogo as o, DotnetLogo as p, MysqlLogo as q, NodejsLogo as r, PhpLogo as s, PostgresLogo as t, PythonLogo as u, RedisLogo as v, RubyLogo as w, RustLogo as x, SwiftLogo as y, useModalStore as z };

package/lib/{index-1fcb0269.js → index-b44c0701.js}

@@ -1,12 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
-
-const ArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
-    const theme = Theme.useTheme();
-    const fill = f || theme.text.secondary;
-    return (React.createElement("svg", { width: size * (9 / 13.5), height: size, viewBox: '0 0 9 13.5', xmlns: 'http://www.w3.org/2000/svg', fill: fill, style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
-        React.createElement("path", { d: 'M0.616717 8.03169L0.616717 5.70699L16.1519 5.70699L16.1519 8.03169L0.616717 8.03169ZM8.11144 -2.81613L9.7262 -1.10502L1.45534 6.87054L9.7262 14.9097L8.17631 16.6208L-1.19268 7.5802L-1.19268 6.1921L8.11144 -2.81613Z' })));
-};
+import { T as Theme } from './index-8dad36e5.js';
 
 const CodeIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
@@ -142,4 +135,4 @@ const CrossIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 })
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M4 12L8 8M8 8L12 4M8 8L4 4M8 8L12 12' })));
 };
 
-export { ArrowIcon as A, CodeIcon as C, EditIcon as E, ListIcon as L, MinusIcon as M, NoDataIcon as N, PlusIcon as P, SearchIcon as S, TrashIcon as T, XIcon as X, CopyIcon as a, EditedIcon as b, ExtendArrowIcon as c, NotebookIcon as d, SortArrowsIcon as e, EyeClosedIcon as f, EyeOpenIcon as g, CheckIcon as h, CrossIcon as i };
+export { CodeIcon as C, EditIcon as E, ListIcon as L, MinusIcon as M, NoDataIcon as N, PlusIcon as P, SearchIcon as S, TrashIcon as T, XIcon as X, CopyIcon as a, EditedIcon as b, ExtendArrowIcon as c, NotebookIcon as d, SortArrowsIcon as e, EyeClosedIcon as f, EyeOpenIcon as g, CheckIcon as h, CrossIcon as i };

package/lib/{index-9e56485b.js → index-cfdd4195.js}

@@ -1,10 +1,10 @@
 import { StatusType, DestinationTypes, EntityTypes, PlatformType } from './types.js';
-import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, k as KafkaLogo, K as K8sLogo } from './index-bd48e6e2.js';
+import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, K as KafkaLogo, f as K8sLogo } from './index-8dad36e5.js';
 import 'react';
 import 'styled-components';
-import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, f as AxiomLogo, g as BlobStorageLogo, B as BetterStackLogo, h as BonreeLogo, C as CauselyLogo, i as ChecklyLogo, j as ChronosphereLogo, k as ClickhouseLogo, c as AwsCloudwatchLogo, l as CoralogixLogo, D as Dash0Logo, m as DatadogLogo, F as OpenTelemetryLogo, n as DynatraceLogo, E as ElasticApmLogo, o as ElasticSearchLogo, p as GoogleCloudPlatformLogo, q as GrafanaLogo, r as GreptimeLogo, s as GroundcoverLogo, H as HoneycombLogo, t as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, u as LightstepLogo, v as LogzioLogo, w as LokiLogo, x as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, O as ObserveLogo, y as OneUptimeLogo, z as OpenObserveLogo, P as OpsVerseLogo, Q as OracleLogo, R as PrometheusLogo, S as QrynLogo, G as GigapipeLogo, T as QuickwitLogo, d as AwsS3Logo, U as SeqLogo, W as SignozLogo, X as SplunkLogo, Y as SumoLogicLogo, Z as TelemetryHubLogo, _ as TempoLogo, $ as TingyunLogo, a0 as TraceloopLogo, a1 as UptraceLogo, a2 as VictoriaMetricsLogo, e as AwsXrayLogo, a5 as NamespacesIcon, a7 as SourcesIcon, a4 as DestinationsIcon, a3 as ActionsIcon, a6 as RulesIcon, V as VmLogo } from './index-acc7c7dd.js';
-import { O as OdigosLogo } from './index-50101bec.js';
-import { s as safeJsonParse } from './index-ec555530.js';
+import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AxiomLogo, B as BlobStorageLogo, d as BetterStackLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, i as AwsCloudwatchLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, O as OpenTelemetryLogo, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, F as GigapipeLogo, R as QuickwitLogo, S as AwsS3Logo, T as SeqLogo, U as SignozLogo, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo, a1 as AwsXrayLogo, a2 as NamespacesIcon, a3 as SourcesIcon, a4 as DestinationsIcon, a5 as ActionsIcon, a6 as RulesIcon, a7 as VmLogo } from './index-ff8fcc81.js';
+import { O as OdigosLogo } from './index-4e685db0.js';
+import { s as safeJsonParse } from './index-5e5f7bda.js';
 
 const compareCondition = (renderCondition, fields) => {
     if (!renderCondition || !renderCondition.length)
@@ -38,11 +38,6 @@ const compareCondition = (renderCondition, fields) => {
     }
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const deepClone = (item) => {
-    return JSON.parse(JSON.stringify(item));
-};
-
 const filterActions = (actions, filters) => {
     let filtered = [...actions];
     if (!!filters.monitors?.length)
@@ -327,4 +322,4 @@ const mapDestinationFieldsForDisplay = (destination, yamlFields) => {
 
 const sleep = async (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export { filterDestinations as a, filterDestinationsByStream as b, compareCondition as c, deepClone as d, filterSources as e, filterActions as f, filterSourcesByStream as g, formatBytes as h, getContainersInstrumentedCount as i, getContainersIcons as j, getDestinationIcon as k, getEntityIcon as l, getEntityLabel as m, getMetricForEntity as n, getPlatformIcon as o, getPlatformLabel as p, getValueForRange as q, getWorkloadId as r, getYamlFieldsForDestination as s, hasUnhealthyInstances as t, isOverTime as u, mapDestinationFieldsForDisplay as v, sleep as w };
+export { filterDestinations as a, filterDestinationsByStream as b, compareCondition as c, filterSources as d, filterSourcesByStream as e, filterActions as f, formatBytes as g, getContainersInstrumentedCount as h, getContainersIcons as i, getDestinationIcon as j, getEntityIcon as k, getEntityLabel as l, getMetricForEntity as m, getPlatformIcon as n, getPlatformLabel as o, getValueForRange as p, getWorkloadId as q, getYamlFieldsForDestination as r, hasUnhealthyInstances as s, isOverTime as t, mapDestinationFieldsForDisplay as u, sleep as v };

package/lib/{index-56ab40b8.js → index-d78c60e1.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8dad36e5.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();
@@ -21,6 +21,13 @@ const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
             React.createElement("path", { d: 'M36.6756 64.0307C43.4071 64.0307 48.8641 58.5737 48.8641 51.8422C48.8641 45.1108 43.4071 39.6538 36.6756 39.6538C29.9441 39.6538 24.4872 45.1108 24.4872 51.8422C24.4872 58.5737 29.9441 64.0307 36.6756 64.0307Z' }))));
 };
 
+const ArrowIcon = ({ size = 16, fill: f, rotate = 0, onClick }) => {
+    const theme = Theme.useTheme();
+    const fill = f || theme.text.secondary;
+    return (React.createElement("svg", { width: size * (9 / 13.5), height: size, viewBox: '0 0 9 13.5', xmlns: 'http://www.w3.org/2000/svg', fill: fill, style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },
+        React.createElement("path", { d: 'M0.616717 8.03169L0.616717 5.70699L16.1519 5.70699L16.1519 8.03169L0.616717 8.03169ZM8.11144 -2.81613L9.7262 -1.10502L1.45534 6.87054L9.7262 14.9097L8.17631 16.6208L-1.19268 7.5802L-1.19268 6.1921L8.11144 -2.81613Z' })));
+};
+
 const FilterIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
     const fill = f || theme.text.secondary;
@@ -97,4 +104,4 @@ const CrossCircledIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.75049 10.0005L8.75049 8.00049M8.75049 8.00049L10.7505 6.00049M8.75049 8.00049L6.75049 6.00049M8.75049 8.00049L10.7505 10.0005M8.75039 14.1004C5.38145 14.1004 2.65039 11.3693 2.65039 8.00039C2.65039 4.63145 5.38145 1.90039 8.75039 1.90039C12.1193 1.90039 14.8504 4.63145 14.8504 8.00039C14.8504 11.3693 12.1193 14.1004 8.75039 14.1004Z' })));
 };
 
-export { CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a };
+export { ArrowIcon as A, CrossCircledIcon as C, DataStreamsIcon as D, FilterIcon as F, KeyIcon as K, NotificationIcon as N, OdigosLogoText as O, RefreshLeftArrowIcon as R, SlackLogo as S, TerminalIcon as T, UserIcon as U, OverviewIcon as a };

package/lib/{index-acc7c7dd.js → index-ff8fcc81.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-bd48e6e2.js';
+import { T as Theme } from './index-8dad36e5.js';
 
 const VmLogo = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();
@@ -680,4 +680,4 @@ const SourcesIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1
         React.createElement("path", { stroke: fill, strokeWidth: strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M13.3332 3.8V8M13.3332 3.8C13.3332 4.79411 10.9454 5.6 7.99984 5.6C5.05432 5.6 2.6665 4.79411 2.6665 3.8M13.3332 3.8C13.3332 2.80589 10.9454 2 7.99984 2C5.05432 2 2.6665 2.80589 2.6665 3.8M13.3332 8V12.0875C13.3332 13.1437 10.9454 14 7.99984 14C5.05432 14 2.6665 13.1437 2.6665 12.0875V8M13.3332 8C13.3332 8.99413 10.9454 9.8 7.99984 9.8C5.05432 9.8 2.6665 8.99413 2.6665 8M2.6665 8V3.8M10.6665 7.33333H10.6732M10.6665 11.3333H10.6732' })));
 };
 
-export { TingyunLogo as $, AlaudaLogo as A, BetterStackLogo as B, CauselyLogo as C, Dash0Logo as D, ElasticApmLogo as E, OpenTelemetryLogo as F, GigapipeLogo as G, HoneycombLogo as H, InstanaLogo as I, JaegerLogo as J, KloudmateLogo as K, Last9Logo as L, MiddlewareLogo as M, NewRelicLogo as N, ObserveLogo as O, OpsVerseLogo as P, OracleLogo as Q, PrometheusLogo as R, QrynLogo as S, QuickwitLogo as T, SeqLogo as U, VmLogo as V, SignozLogo as W, SplunkLogo as X, SumoLogicLogo as Y, TelemetryHubLogo as Z, TempoLogo as _, AlibabaCloudLogo as a, TraceloopLogo as a0, UptraceLogo as a1, VictoriaMetricsLogo as a2, ActionsIcon as a3, DestinationsIcon as a4, NamespacesIcon as a5, RulesIcon as a6, SourcesIcon as a7, AppDynamicsLogo as b, AwsCloudwatchLogo as c, AwsS3Logo as d, AwsXrayLogo as e, AxiomLogo as f, BlobStorageLogo as g, BonreeLogo as h, ChecklyLogo as i, ChronosphereLogo as j, ClickhouseLogo as k, CoralogixLogo as l, DatadogLogo as m, DynatraceLogo as n, ElasticSearchLogo as o, GoogleCloudPlatformLogo as p, GrafanaLogo as q, GreptimeLogo as r, GroundcoverLogo as s, HyperDxLogo as t, LightstepLogo as u, LogzioLogo as v, LokiLogo as w, LumigoLogo as x, OneUptimeLogo as y, OpenObserveLogo as z };
+export { UptraceLogo as $, AlaudaLogo as A, BlobStorageLogo as B, CauselyLogo as C, Dash0Logo as D, ElasticApmLogo as E, GigapipeLogo as F, GoogleCloudPlatformLogo as G, HoneycombLogo as H, InstanaLogo as I, JaegerLogo as J, KloudmateLogo as K, Last9Logo as L, MiddlewareLogo as M, NewRelicLogo as N, OpenTelemetryLogo as O, PrometheusLogo as P, QrynLogo as Q, QuickwitLogo as R, AwsS3Logo as S, SeqLogo as T, SignozLogo as U, SplunkLogo as V, SumoLogicLogo as W, TelemetryHubLogo as X, TempoLogo as Y, TingyunLogo as Z, TraceloopLogo as _, AlibabaCloudLogo as a, VictoriaMetricsLogo as a0, AwsXrayLogo as a1, NamespacesIcon as a2, SourcesIcon as a3, DestinationsIcon as a4, ActionsIcon as a5, RulesIcon as a6, VmLogo as a7, AppDynamicsLogo as b, AxiomLogo as c, BetterStackLogo as d, BonreeLogo as e, ChecklyLogo as f, ChronosphereLogo as g, ClickhouseLogo as h, AwsCloudwatchLogo as i, CoralogixLogo as j, DatadogLogo as k, DynatraceLogo as l, ElasticSearchLogo as m, GrafanaLogo as n, GreptimeLogo as o, GroundcoverLogo as p, HyperDxLogo as q, LightstepLogo as r, LogzioLogo as s, LokiLogo as t, LumigoLogo as u, ObserveLogo as v, OneUptimeLogo as w, OpenObserveLogo as x, OpsVerseLogo as y, OracleLogo as z };

package/lib/mock-data/config/index.d.ts

@@ -0,0 +1,2 @@
+import { type OdigosConfig } from '@/types';
+export declare const MOCK_ODIGOS_CONFIG: OdigosConfig;

package/lib/mock-data/index.d.ts

@@ -1,4 +1,5 @@
 export * from './actions';
+export * from './config';
 export * from './describe';
 export * from './destinations';
 export * from './instrumentation-rules';

package/lib/snippets.js

@@ -1,15 +1,15 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-61caa474.js';
-export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-61caa474.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-13d8ebb2.js';
+export { ai as AddButton, an as AddNode, ao as BaseNode, ak as CopyText, ap as EdgedNode, ag as Flow, aq as FrameNode, ar as HeaderNode, aw as LabeledEdge, as as MapItemNode, at as NoDataNode, al as PodContainer, au as ScrollNode, av as SkeletonNode, am as SourceContainer, ad as nodeConfig } from './index-13d8ebb2.js';
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-bd48e6e2.js';
-import { E as EditIcon } from './index-1fcb0269.js';
+import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-8dad36e5.js';
+import { E as EditIcon } from './index-b44c0701.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-50101bec.js';
-import './index-58440c5c.js';
-import './index-ec555530.js';
+import { I as InfoIcon } from './index-4e685db0.js';
+import './index-5e5f7bda.js';
+import './index-23b2865d.js';
 import 'react-dom';
-import './useTransition-750816e0.js';
+import './useTransition-985cc4a8.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/store.js

@@ -1,4 +1,4 @@
-export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-bd48e6e2.js';
+export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-8dad36e5.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-bd48e6e2.js';
+export { T as default } from './index-8dad36e5.js';
 import 'styled-components';
 import 'react';
 import './types.js';

package/lib/types/config/index.d.ts

@@ -0,0 +1,89 @@
+import { ProgrammingLanguages } from '..';
+export declare enum UiMode {
+    Default = "default",
+    ReadOnly = "readonly"
+}
+export declare enum Profile {
+    CodeAttributes = "code-attributes",
+    FullPayloadCollection = "full-payload-collection",
+    DbPayloadCollection = "db-payload-collection",
+    QueryOperationDetector = "query-operation-detector",
+    AllowConcurrentAgents = "allow_concurrent_agents",
+    JavaEbpfInstrumentations = "java-ebpf-instrumentations",
+    JavaNativeInstrumentations = "java-native-instrumentations",
+    SizeS = "size_s",
+    SizeM = "size_m",
+    SizeL = "size_l"
+}
+export declare enum MountMethod {
+    VirtualDevice = "VirtualDevice",
+    HostPath = "HostPath"
+}
+export declare enum AgentEnvVarsInjectionMethod {
+    Loader = "loader",
+    PodManifest = "pod-manifest",
+    LoaderFallbackToPodManifest = "loader-fallback-to-pod-manifest"
+}
+export interface CollectorNode {
+    collectorOwnMetricsPort: number;
+    requestMemoryMiB: number;
+    limitMemoryMiB: number;
+    requestCPUm: number;
+    limitCPUm: number;
+    memoryLimiterLimitMiB: number;
+    memoryLimiterSpikeLimitMiB: number;
+    goMemLimitMiB: number;
+    k8sNodeLogsDirectory: string;
+}
+export interface CollectorGateway extends Omit<CollectorNode, 'collectorOwnMetricsPort' | 'k8sNodeLogsDirectory'> {
+    minReplicas: number;
+    maxReplicas: number;
+}
+export interface UserInstrumentationEnvsLanguage {
+    enabled: boolean;
+    env: {
+        [key: string]: string;
+    };
+}
+export interface UserInstrumentationEnvs {
+    languages: {
+        [key in ProgrammingLanguages]?: UserInstrumentationEnvsLanguage;
+    };
+}
+export interface RolloutConfiguration {
+    automaticRolloutDisabled: boolean;
+}
+export interface OidcConfiguration {
+    tenantUrl: string;
+    clientId: string;
+    clientSecret: string;
+}
+export interface OdigosConfig {
+    telemetryEnabled: boolean;
+    openshiftEnabled: boolean;
+    karpenterEnabled: boolean;
+    psp: boolean;
+    allowConcurrentAgents: boolean;
+    skipWebhookIssuerCreation: boolean;
+    uiMode: UiMode;
+    uiPaginationLimit: number;
+    centralBackendURL: string;
+    oidc?: OidcConfiguration;
+    clusterName: string;
+    imagePrefix: string;
+    ignoredNamespaces: string[];
+    ignoredContainers: string[];
+    profiles: Profile[];
+    mountMethod: MountMethod;
+    agentEnvVarsInjectionMethod: AgentEnvVarsInjectionMethod;
+    customContainerRuntimeSocketPath: string;
+    odigletHealthProbeBindPort: number;
+    rollbackDisabled: boolean;
+    rollbackGraceTime: string;
+    rollbackStabilityWindow: string;
+    nodeSelector?: Record<string, string>;
+    rollout?: RolloutConfiguration;
+    collectorNode?: CollectorNode;
+    collectorGateway?: CollectorGateway;
+    userInstrumentationEnvs?: UserInstrumentationEnvs;
+}

package/lib/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from './actions';
 export * from './common';
+export * from './config';
 export * from './connection';
 export * from './data-flow';
 export * from './data-streams';

package/lib/types.js

@@ -178,6 +178,48 @@ var SortDirection;
     SortDirection["Descending"] = "desc";
 })(SortDirection || (SortDirection = {}));
 
+var UiMode;
+(function (UiMode) {
+    UiMode["Default"] = "default";
+    UiMode["ReadOnly"] = "readonly";
+})(UiMode || (UiMode = {}));
+var Profile;
+(function (Profile) {
+    // CategoryAttributes = 'category-attributes',
+    Profile["CodeAttributes"] = "code-attributes";
+    // CopyScope = 'copy-scope',
+    // HostnameAsPodname = 'hostname-as-podname',
+    Profile["FullPayloadCollection"] = "full-payload-collection";
+    Profile["DbPayloadCollection"] = "db-payload-collection";
+    Profile["QueryOperationDetector"] = "query-operation-detector";
+    // Semconv = 'semconv',
+    // ReduceSpanNameCardinality = 'reduce-span-name-cardinality',
+    Profile["AllowConcurrentAgents"] = "allow_concurrent_agents";
+    Profile["JavaEbpfInstrumentations"] = "java-ebpf-instrumentations";
+    Profile["JavaNativeInstrumentations"] = "java-native-instrumentations";
+    // LegacyDotnetInstrumentation = 'legacy-dotnet-instrumentation',
+    // MountMethodK8sHostPath = 'mount-method-k8s-host-path',
+    // MountMethodK8sVirtualDevice = 'mount-method-k8s-virtual-device',
+    // PodManifestEnvVarInjection = 'pod-manifest-env-var-injection',
+    // DisableGin = 'disable-gin',
+    // SmallBatches = 'small-batches',
+    Profile["SizeS"] = "size_s";
+    Profile["SizeM"] = "size_m";
+    Profile["SizeL"] = "size_l";
+})(Profile || (Profile = {}));
+var MountMethod;
+(function (MountMethod) {
+    MountMethod["VirtualDevice"] = "VirtualDevice";
+    MountMethod["HostPath"] = "HostPath";
+    // InitContainer = 'InitContainer',
+})(MountMethod || (MountMethod = {}));
+var AgentEnvVarsInjectionMethod;
+(function (AgentEnvVarsInjectionMethod) {
+    AgentEnvVarsInjectionMethod["Loader"] = "loader";
+    AgentEnvVarsInjectionMethod["PodManifest"] = "pod-manifest";
+    AgentEnvVarsInjectionMethod["LoaderFallbackToPodManifest"] = "loader-fallback-to-pod-manifest";
+})(AgentEnvVarsInjectionMethod || (AgentEnvVarsInjectionMethod = {}));
+
 var NodeTypes;
 (function (NodeTypes) {
     NodeTypes["Header"] = "header";
@@ -321,4 +363,4 @@ var K8sResourceKind;
     K8sResourceKind["CronJob"] = "CronJob";
 })(K8sResourceKind || (K8sResourceKind = {}));
 
-export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, BooleanOperation, CodeAttributesKeyTypes, Crud, CustomInstrumentationsKeyTypes, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, NodeTypes, NumberOperation, OtherEntityTypes, OtherStatus, PayloadCollectionKeyTypes, PlatformType, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier };
+export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, AgentEnvVarsInjectionMethod, BooleanOperation, CodeAttributesKeyTypes, Crud, CustomInstrumentationsKeyTypes, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, MountMethod, NodeTypes, NumberOperation, OtherEntityTypes, OtherStatus, PayloadCollectionKeyTypes, PlatformType, Profile, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier, UiMode };

package/lib/{useTransition-750816e0.js → useTransition-985cc4a8.js}

@@ -1,7 +1,8 @@
-import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-bd48e6e2.js';
+import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-8dad36e5.js';
 import { AddNodeTypes, EntityTypes, PayloadCollectionKeyTypes, CodeAttributesKeyTypes, CustomInstrumentationsKeyTypes } from './types.js';
 import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
+import { d as deepClone } from './index-5e5f7bda.js';
 
 const useGenericForm = (initialFormData) => {
     function copyInitial() {
@@ -17,16 +18,28 @@ const useGenericForm = (initialFormData) => {
         if (key) {
             // this is for cases where the form contains objects such as "exportedSignals",
             // the object's child is targeted with a "." for example: "exportedSignals.logs"
-            const [parentKey, childKey] = key.toString().split('.');
-            setFormData((prev) => ({
-                ...prev,
-                [parentKey]: childKey
-                    ? {
-                        ...prev[parentKey],
-                        [childKey]: val,
+            const splittedKeys = key.toString().split('.');
+            if (splittedKeys.length === 1) {
+                setFormData((prev) => ({ ...prev, [key]: val }));
+            }
+            else {
+                setFormData((prev) => {
+                    const payload = deepClone(prev);
+                    let current = payload;
+                    // Navigate to the parent of the final key, creating objects as needed
+                    for (let i = 0; i < splittedKeys.length - 1; i++) {
+                        const key = splittedKeys[i];
+                        if (!current[key] || typeof current[key] !== 'object') {
+                            current[key] = {};
+                        }
+                        current = current[key];
                     }
-                    : val,
-            }));
+                    // Set the final value
+                    const finalKey = splittedKeys[splittedKeys.length - 1];
+                    current[finalKey] = val;
+                    return payload;
+                });
+            }
         }
         else if (obj) {
             setFormData({ ...obj });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "author": "Odigos",
   "repository": {
     "type": "git",