@odigos/ui-kit 0.0.66 → 0.0.68

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.0.68](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.67...ui-kit-v0.0.68) (2025-07-23)
+
+
+### Features
+
+* toggle for advanced settings ([#271](https://github.com/odigos-io/ui-kit/issues/271)) ([53e9a0a](https://github.com/odigos-io/ui-kit/commit/53e9a0aedef964f4afea147eb98c3d1eb43ebe83))
+
+
+### Bug Fixes
+
+* dirty form state, and scroll pixels ([#269](https://github.com/odigos-io/ui-kit/issues/269)) ([c3d7a0e](https://github.com/odigos-io/ui-kit/commit/c3d7a0e61704d3dcb0882627c91004d0174ce461))
+
+## [0.0.67](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.66...ui-kit-v0.0.67) (2025-07-23)
+
+
+### Features
+
+* change system setting fields ([#267](https://github.com/odigos-io/ui-kit/issues/267)) ([25b483a](https://github.com/odigos-io/ui-kit/commit/25b483a8bc92bb07cb251f14859567d51631c641))
+
 ## [0.0.66](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.65...ui-kit-v0.0.66) (2025-07-22)
 
 

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

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import type { SVG } from '@/types';
+import type { SVG, StatusType } from '@/types';
 interface DropdownOption<T = string> {
     id?: T | null;
     value?: string | null;
@@ -19,6 +19,7 @@ interface DropdownProps {
     showSearch?: boolean;
     errorMessage?: string;
     hasError?: boolean;
+    status?: StatusType;
 }
 declare const Dropdown: FC<DropdownProps>;
 export { Dropdown, type DropdownProps, type DropdownOption };

package/lib/components/field-label/index.d.ts

@@ -1,9 +1,11 @@
 import { type FC, type CSSProperties } from 'react';
+import { StatusType } from '@/types';
 interface FieldLabelProps {
     title?: string;
     required?: boolean;
     tooltip?: string;
     style?: CSSProperties;
+    status?: StatusType;
 }
 declare const FieldLabel: FC<FieldLabelProps>;
 export { FieldLabel, type FieldLabelProps };

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

@@ -1,5 +1,5 @@
 import { type FC, type InputHTMLAttributes } from 'react';
-import { type SVG } from '@/types';
+import { StatusType, type SVG } from '@/types';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     title?: string;
     icon?: SVG;
@@ -9,6 +9,7 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     required?: boolean;
     hasError?: boolean;
     errorMessage?: string;
+    status?: StatusType;
 }
 declare const Input: FC<InputProps>;
 export { Input, type InputProps };

package/lib/components.js

@@ -1,6 +1,6 @@
-import { B as Button } from './index-f2da9ad4.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-f2da9ad4.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-7074fb24.js';
+import { B as Button } from './index-5772129e.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-5772129e.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-847d188f.js';
 import React, { createContext, Component, createElement } from 'react';
 import { T as Theme } from './index-bd48e6e2.js';
 import 'styled-components';

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

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
-import type { OdigosConfig } from '@/types';
+import { InstallationMethod, type OdigosConfig } from '@/types';
 interface SystemSettingsProps {
+    installationMethod: InstallationMethod;
     fetchSettings: () => Promise<OdigosConfig | undefined>;
     onSave: (payload: OdigosConfig) => Promise<void>;
 }

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

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

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type SettingsProps } from './types';
+declare const GeneralSettings: React.ForwardRefExoticComponent<SettingsProps & React.RefAttributes<HTMLDivElement>>;
+export { GeneralSettings };

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

@@ -1,7 +1,4 @@
 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>[];
+import { AgentEnvVarsInjectionMethod, MountMethod } from '@/types';
 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/rollback-settings.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type SettingsProps } from './types';
+declare const RollbackSettings: React.ForwardRefExoticComponent<SettingsProps & React.RefAttributes<HTMLDivElement>>;
+export { RollbackSettings };

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

@@ -1,2 +1,8 @@
 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>>;
+export declare const RowOfFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$gap" | "$alignItems" | "$justifyContent" | "$wrap"> & {
+    $gap?: number;
+    $alignItems?: import("styled-components").CSSProperties["alignItems"];
+    $justifyContent?: import("styled-components").CSSProperties["justifyContent"];
+    $wrap?: import("styled-components").CSSProperties["flexWrap"];
+}, never>> & string;

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

@@ -1,4 +1,11 @@
 import type { OdigosConfig } from '@/types';
+export declare enum SettingsTabs {
+    General = "General",
+    Ui = "UI",
+    Rollback = "Rollback",
+    CollectorNode = "Collector Node",
+    CollectorGateway = "Collector Gateway"
+}
 export interface SettingsProps {
     formData: OdigosConfig;
     handleFormChange: (key: keyof OdigosConfig | string, value: any) => void;

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

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

package/lib/containers.js

@@ -1,15 +1,15 @@
 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 { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, UiMode, ProgrammingLanguages, MountMethod, AgentEnvVarsInjectionMethod, Profile } 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-f2da9ad4.js';
+import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, MountMethod, AgentEnvVarsInjectionMethod, InstallationMethod } from './types.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-5772129e.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.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, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-c1df4281.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-c2aef0e4.js';
 import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-391844c6.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-7074fb24.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-847d188f.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, 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-42f40e7c.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
@@ -4723,6 +4723,15 @@ const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
                 React.createElement(Describe, { fetchDescribeOdigos: fetchDescribeOdigos })))));
 };
 
+var SettingsTabs;
+(function (SettingsTabs) {
+    SettingsTabs["General"] = "General";
+    SettingsTabs["Ui"] = "UI";
+    SettingsTabs["Rollback"] = "Rollback";
+    SettingsTabs["CollectorNode"] = "Collector Node";
+    SettingsTabs["CollectorGateway"] = "Collector Gateway";
+})(SettingsTabs || (SettingsTabs = {}));
+
 const Card = styled.div `
   align-self: stretch;
   display: flex;
@@ -4739,278 +4748,225 @@ const CardTitle = styled(Text) `
   font-weight: 600;
   line-height: 20px;
 `;
+const RowOfFields = styled(FlexRow) `
+  width: 100%;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+`;
 
-const UI_MODE_OPTIONS = [
-    { id: UiMode.Default, value: 'Default' },
-    { id: UiMode.ReadOnly, value: 'Read Only' },
-];
-const INSTRUMENTATION_LANG_OPTIONS = [
-    {
-        id: ProgrammingLanguages.Go,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.Go],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.Go),
-    },
-    {
-        id: ProgrammingLanguages.JavaScript,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.JavaScript],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.JavaScript),
-    },
-    {
-        id: ProgrammingLanguages.Python,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.Python],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.Python),
-    },
-    {
-        id: ProgrammingLanguages.Java,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.Java],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.Java),
-    },
-    {
-        id: ProgrammingLanguages.Php,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.Php],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.Php),
-    },
-    {
-        id: ProgrammingLanguages.Ruby,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.Ruby],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.Ruby),
-    },
-    {
-        id: ProgrammingLanguages.DotNet,
-        value: DISPLAY_LANGUAGES[ProgrammingLanguages.DotNet],
-        icon: getProgrammingLanguageIcon(ProgrammingLanguages.DotNet),
-    },
-];
-const MOUNT_METHOD_OPTIONS = [
-    { id: MountMethod.VirtualDevice, value: 'Virtual Device' },
-    { id: MountMethod.HostPath, value: 'Host Path' },
-    // { id: MountMethod.InitContainer, value: 'Init Container' },
-];
-const AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS = [
-    { id: AgentEnvVarsInjectionMethod.Loader, value: 'Loader' },
-    { id: AgentEnvVarsInjectionMethod.PodManifest, value: 'Pod Manifest' },
-    { id: AgentEnvVarsInjectionMethod.LoaderFallbackToPodManifest, value: 'Loader Fallback to Pod Manifest' },
-];
-const PROFILE_OPTIONS = [
-    // { id: Profile.CategoryAttributes, value: 'Category Attributes' },
-    { id: Profile.CodeAttributes, value: 'Code Attributes' },
-    // { id: Profile.CopyScope, value: 'Copy Scope' },
-    // { id: Profile.HostnameAsPodname, value: 'Hostname as Podname' },
-    { id: Profile.FullPayloadCollection, value: 'Full Payload Collection' },
-    { id: Profile.DbPayloadCollection, value: 'DB Payload Collection' },
-    { id: Profile.QueryOperationDetector, value: 'Query Operation Detector' },
-    // { id: Profile.Semconv, value: 'Semconv' },
-    // { id: Profile.ReduceSpanNameCardinality, value: 'Reduce Span Name Cardinality' },
-    { id: Profile.AllowConcurrentAgents, value: 'Allow Concurrent Agents' },
-    { id: Profile.JavaEbpfInstrumentations, value: 'Java EBPF Instrumentations' },
-    { id: Profile.JavaNativeInstrumentations, value: 'Java Native Instrumentations' },
-    // { id: Profile.LegacyDotnetInstrumentation, value: 'Legacy .NET Instrumentation' },
-    // { id: Profile.MountMethodK8sHostPath, value: 'Mount Method K8s Host Path' },
-    // { id: Profile.MountMethodK8sVirtualDevice, value: 'Mount Method K8s Virtual Device' },
-    // { id: Profile.PodManifestEnvVarInjection, value: 'Pod Manifest Env Var Injection' },
-    // { id: Profile.DisableGin, value: 'Disable Gin' },
-    // { id: Profile.SmallBatches, value: 'Small Batches' },
-    { id: Profile.SizeS, value: 'Size S' },
-    { id: Profile.SizeM, value: 'Size M' },
-    { id: Profile.SizeL, value: 'Size L' },
-];
-
-const UiSettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
-        React.createElement(CardTitle, null, "UI"),
-        React.createElement(Dropdown, { title: 'UI Mode', tooltip: 'Mode of the UI - default or readonly', options: UI_MODE_OPTIONS, value: formData.uiMode ? UI_MODE_OPTIONS.find((option) => option.id === formData.uiMode) : undefined, onSelect: (option) => handleFormChange('uiMode', option.id) }),
-        React.createElement(Input, { title: 'UI Pagination Limit', tooltip: 'Pagination limit for UI paginated fetching', type: 'number', value: formData.uiPaginationLimit?.toString() || '', onChange: (e) => {
+const UiSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.Ui },
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "UI"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(Input, { status: StatusType.Warning, title: 'UI Pagination Limit (Advanced)', tooltip: 'Pagination limit for fetching data from the UI backend, bigger limit means more data will be fetched at once, and less requests will be made to the backend', type: 'number', required: true, value: formData.uiPaginationLimit?.toString() || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('uiPaginationLimit', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Central Backend URL', tooltip: 'URL of the central backend', value: formData.centralBackendURL || '', onChange: (e) => {
+            } })),
+        React.createElement(Input, { title: 'Central Backend URL', tooltip: 'URL of the central backend', required: true, value: formData.centralBackendURL || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('centralBackendURL', value || null);
             } }),
-        React.createElement(Input, { title: 'OIDC Tenant URL', tooltip: 'URL of the OIDC tenant', value: formData.oidc?.tenantUrl || '', onChange: (e) => {
+        React.createElement(Input, { title: 'OIDC Tenant URL', tooltip: 'URL of the OIDC tenant', required: true, value: formData.oidc?.tenantUrl || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('oidc.tenantUrl', value || null);
             } }),
-        React.createElement(Input, { title: 'OIDC Client ID', tooltip: 'Client ID of the OIDC application', value: formData.oidc?.clientId || '', onChange: (e) => {
+        React.createElement(Input, { title: 'OIDC Client ID', tooltip: 'Client ID of the OIDC application', required: true, value: formData.oidc?.clientId || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('oidc.clientId', value || null);
             } }),
-        React.createElement(Input, { title: 'OIDC Client Secret', tooltip: 'Client Secret of the OIDC application', type: 'password', value: formData.oidc?.clientSecret || '', onChange: (e) => {
+        React.createElement(Input, { title: 'OIDC Client Secret', tooltip: 'Client Secret of the OIDC application', type: 'password', required: true, value: formData.oidc?.clientSecret || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('oidc.clientSecret', value || null);
             } })));
-};
+});
+UiSettings.displayName = UiSettings.name;
 
-const OtherSettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
-        React.createElement(CardTitle, null, "Other"),
-        React.createElement(Toggle, { title: 'Telemetry Enabled', tooltip: 'Enable anonymous telemetry collection', initialValue: formData.telemetryEnabled || false, onChange: (bool) => handleFormChange('telemetryEnabled', bool) }),
-        React.createElement(Toggle, { title: 'OpenShift Enabled', tooltip: 'Enable OpenShift-specific features', initialValue: formData.openshiftEnabled || false, onChange: (bool) => handleFormChange('openshiftEnabled', bool) }),
+const MOUNT_METHOD_OPTIONS = [
+    { id: MountMethod.VirtualDevice, value: 'Virtual Device' },
+    { id: MountMethod.HostPath, value: 'Host Path' },
+    { id: MountMethod.InitContainer, value: 'Init Container' },
+];
+const AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS = [
+    { id: AgentEnvVarsInjectionMethod.Loader, value: 'Loader' },
+    { id: AgentEnvVarsInjectionMethod.PodManifest, value: 'Pod Manifest' },
+    { id: AgentEnvVarsInjectionMethod.LoaderFallbackToPodManifest, value: 'Loader Fallback to Pod Manifest' },
+];
+
+const GeneralSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.General },
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "General"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(Dropdown, { status: StatusType.Warning, title: 'Mount Method (Advanced)', tooltip: 'Method used to mount volume', options: MOUNT_METHOD_OPTIONS, required: true, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod) || undefined, onSelect: (option) => handleFormChange('mountMethod', option.id) }),
+            React.createElement(Dropdown, { status: StatusType.Warning, title: 'Agent Envs Injection Method (Advanced)', tooltip: 'How to inject environment variables into agents', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, required: true, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod) || undefined, onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Odiglet Health Probe Bind Port (Advanced)', tooltip: 'Port to bind the health probe', type: 'number', required: true, value: formData.odigletHealthProbeBindPort?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('odigletHealthProbeBindPort', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Custom Container Runtime Socket Path (Advanced)', tooltip: 'Path to the custom container runtime socket', required: true, value: formData.customContainerRuntimeSocketPath || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('customContainerRuntimeSocketPath', value || null);
+                } }))),
         React.createElement(Toggle, { title: 'Karpenter Enabled', tooltip: 'Enable Karpenter support', initialValue: formData.karpenterEnabled || false, onChange: (bool) => handleFormChange('karpenterEnabled', bool) }),
-        React.createElement(Toggle, { title: 'PSP Enabled', tooltip: 'Enable Pod Security Policy support', initialValue: formData.psp || false, onChange: (bool) => handleFormChange('psp', bool) }),
         React.createElement(Toggle, { title: 'Allow Concurrent Agents', tooltip: 'Allow concurrent running agents', initialValue: formData.allowConcurrentAgents || false, onChange: (bool) => handleFormChange('allowConcurrentAgents', bool) }),
-        React.createElement(Toggle, { title: 'Skip Webhook Issuer Creation', tooltip: 'Skip creation of the webhook issuer', initialValue: formData.skipWebhookIssuerCreation || false, onChange: (bool) => handleFormChange('skipWebhookIssuerCreation', bool) }),
         React.createElement(Toggle, { title: 'Automatic Rollout Disabled', tooltip: 'Disable automatic rollout of pods after instrumentation', initialValue: formData.rollout?.automaticRolloutDisabled || false, onChange: (bool) => handleFormChange('rollout.automaticRolloutDisabled', bool) }),
-        React.createElement(Input, { title: 'Cluster Name', tooltip: 'Name of the cluster', value: formData.clusterName || '', onChange: (e) => {
+        React.createElement(Input, { title: 'Cluster Name', tooltip: 'Name of the cluster', required: true, value: formData.clusterName || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('clusterName', value || null);
             } }),
-        React.createElement(Input, { title: 'Image Prefix', tooltip: 'Image prefix for all Odigos components', value: formData.imagePrefix || '', onChange: (e) => {
+        React.createElement(Input, { title: 'Image Prefix', tooltip: 'Docker image prefix for all Odigos components', disabled: true, required: true, value: formData.imagePrefix || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('imagePrefix', value || null);
             } }),
-        React.createElement(InputList, { title: 'Ignored Namespaces', tooltip: 'List of namespaces to exclude from instrumentation', value: formData.ignoredNamespaces || [], onChange: (arr) => handleFormChange('ignoredNamespaces', arr) }),
-        React.createElement(InputList, { title: 'Ignored Containers', tooltip: 'List of container names to exclude from instrumentation', value: formData.ignoredContainers || [], onChange: (arr) => handleFormChange('ignoredContainers', arr) }),
-        React.createElement(Dropdown, { title: 'Profiles', tooltip: 'Profiles to enable', isMulti: true, options: PROFILE_OPTIONS, value: PROFILE_OPTIONS.filter((option) => formData.profiles?.includes(option.id)), onSelect: (option) => handleFormChange('profiles', [...(formData.profiles || []), option.id]), onDeselect: (option) => handleFormChange('profiles', formData.profiles?.filter((p) => p !== option.id) || []) }),
-        React.createElement(Dropdown, { title: 'Mount Method', tooltip: 'Method used to mount volume', options: MOUNT_METHOD_OPTIONS, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod) || undefined, onSelect: (option) => handleFormChange('mountMethod', option.id) }),
-        React.createElement(Dropdown, { title: 'Agent Env Vars Injection Method', tooltip: 'How to inject env vars into agents', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod) || undefined, onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
-        React.createElement(Input, { title: 'Custom Container Runtime Socket Path', tooltip: 'Path to the custom container runtime socket', value: formData.customContainerRuntimeSocketPath || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('customContainerRuntimeSocketPath', value || null);
-            } }),
-        React.createElement(Input, { title: 'Odiglet Health Probe Bind Port', tooltip: 'Port to bind the health probe', type: 'number', value: formData.odigletHealthProbeBindPort?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('odigletHealthProbeBindPort', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Toggle, { title: 'Rollback Disabled', tooltip: 'Disable rollback', initialValue: formData.rollbackDisabled || false, onChange: (bool) => handleFormChange('rollbackDisabled', bool) }),
-        React.createElement(Input, { title: 'Rollback Grace Time', tooltip: 'Grace time for rollback', value: formData.rollbackGraceTime || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('rollbackGraceTime', value || null);
-            } }),
-        React.createElement(Input, { title: 'Rollback Stability Window', tooltip: 'Stability window for rollback', value: formData.rollbackStabilityWindow || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('rollbackStabilityWindow', value || null);
-            } }),
-        React.createElement(KeyValueInputsList, { title: 'Node Selector', value: Object.entries(formData.nodeSelector || {}).map(([key, value]) => ({
-                key,
-                value,
-            })), onChange: (arr) => handleFormChange('nodeSelector', arr.reduce((acc, { key, value }) => ({
-                ...acc,
-                [key]: value,
-            }), {})) })));
-};
+        React.createElement(KeyValueInputsList, { title: 'Node Selector', tooltip: 'NodeSelector is a map of key-value Kubernetes NodeSelector labels to apply to all Odigos components. Note that Odigos will only be able to instrument applications on the same node. This setting can be applied only via the CLI.', disabled: true, required: true, value: Object.entries(formData.nodeSelector || {}).map(([key, value]) => ({ key, value })) }),
+        React.createElement(RowOfFields, null,
+            React.createElement(InputList, { title: 'Ignored Namespaces', tooltip: 'List of namespaces to exclude from instrumentation', required: true, value: formData.ignoredNamespaces || [], onChange: (arr) => handleFormChange('ignoredNamespaces', arr) }),
+            React.createElement(InputList, { title: 'Ignored Containers', tooltip: 'List of container names to exclude from instrumentation, this is a global setting and will be applied to all applications', required: true, value: formData.ignoredContainers || [], onChange: (arr) => handleFormChange('ignoredContainers', arr) }))));
+});
+GeneralSettings.displayName = GeneralSettings.name;
 
-const CollectorNodeSettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
-        React.createElement(CardTitle, null, "Collector Node"),
-        React.createElement(Input, { title: 'Collector Own Metrics Port', tooltip: "Port for the collector's own Prometheus metrics", type: 'number', value: formData.collectorNode?.collectorOwnMetricsPort?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.collectorOwnMetricsPort', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.requestMemoryMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.requestMemoryMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.limitMemoryMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.limitMemoryMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Request CPU (Millicores)', tooltip: 'Request CPU for the collector node in Millicores', type: 'number', value: formData.collectorNode?.requestCPUm?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.requestCPUm', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Limit CPU (Millicores)', tooltip: 'Limit CPU for the collector node in Millicores', type: 'number', value: formData.collectorNode?.limitCPUm?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.limitCPUm', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.memoryLimiterLimitMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.goMemLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.goMemLimitMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'K8s Node Logs Directory', tooltip: 'Target directory for K8s logs if `/var/log` is a symlink', value: formData.collectorNode?.k8sNodeLogsDirectory || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorNode.k8sNodeLogsDirectory', value || null);
-            } })));
-};
+const RollbackSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.Rollback },
+        React.createElement(CardTitle, null, "Rollback"),
+        React.createElement(Toggle, { title: 'Rollback Disabled', tooltip: 'Disable rollback', initialValue: formData.rollbackDisabled || false, onChange: (bool) => handleFormChange('rollbackDisabled', bool) }),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Rollback Grace Time', tooltip: 'Grace time for rollback', required: true, value: formData.rollbackGraceTime || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('rollbackGraceTime', value || null);
+                } }),
+            React.createElement(Input, { title: 'Rollback Stability Window', tooltip: 'Stability window for rollback', required: true, value: formData.rollbackStabilityWindow || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('rollbackStabilityWindow', value || null);
+                } }))));
+});
+RollbackSettings.displayName = RollbackSettings.name;
 
-const CollectorGatewaySettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
-        React.createElement(CardTitle, null, "Collector Gateway"),
-        React.createElement(Input, { title: 'Min. Replicas', tooltip: 'Minimum number of replicas for the collector gateway', type: 'number', value: formData.collectorGateway?.minReplicas?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.minReplicas', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Max. Replicas', tooltip: 'Maximum number of replicas for the collector gateway', type: 'number', value: formData.collectorGateway?.maxReplicas?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.maxReplicas', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.requestMemoryMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.requestMemoryMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.limitMemoryMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.limitMemoryMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Request CPU (Millicores)', tooltip: 'Request CPU for the collector gateway in Millicores', type: 'number', value: formData.collectorGateway?.requestCPUm?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.requestCPUm', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Limit CPU (Millicores)', tooltip: 'Limit CPU for the collector gateway in Millicores', type: 'number', value: formData.collectorGateway?.limitCPUm?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.limitCPUm', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
-            } }),
-        React.createElement(Input, { title: 'Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => {
-                const { value } = e.target;
-                handleFormChange('collectorGateway.goMemLimitMiB', value === '' ? null : Number(value));
-            } })));
-};
+const CollectorNodeSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorNode },
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "Collector Node"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(Input, { status: StatusType.Warning, title: 'K8s Node Logs Directory', tooltip: 'Target directory for K8s logs if `/var/log` is a symlink', required: true, value: formData.collectorNode?.k8sNodeLogsDirectory || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.k8sNodeLogsDirectory', value || null);
+                } }),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Own Metrics Port', tooltip: "Port for the collector node's own Prometheus metrics", type: 'number', required: true, value: formData.collectorNode?.collectorOwnMetricsPort?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.collectorOwnMetricsPort', value === '' ? null : Number(value));
+                } }),
+            React.createElement(RowOfFields, null,
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorNode.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    } }),
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    } })),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Node Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.goMemLimitMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.goMemLimitMiB', value === '' ? null : Number(value));
+                } }))),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.requestMemoryMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.requestMemoryMiB', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector node in Megabytes', type: 'number', required: true, value: formData.collectorNode?.limitMemoryMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.limitMemoryMiB', value === '' ? null : Number(value));
+                } })),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Request CPU (m)', tooltip: 'Request CPU for the collector node in Millicores', type: 'number', required: true, value: formData.collectorNode?.requestCPUm?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.requestCPUm', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { title: 'Limit CPU (m)', tooltip: 'Limit CPU for the collector node in Millicores', type: 'number', required: true, value: formData.collectorNode?.limitCPUm?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorNode.limitCPUm', value === '' ? null : Number(value));
+                } }))));
+});
+CollectorNodeSettings.displayName = CollectorNodeSettings.name;
 
-const UserInstrumentationEnvsSettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
-        React.createElement(CardTitle, null, "User Instrumentation Environment Variables"),
-        INSTRUMENTATION_LANG_OPTIONS.map(({ id, value, icon }) => (React.createElement(Card, { key: `${id}-card` },
-            React.createElement(FlexRow, { "$gap": 8, "$alignItems": 'flex-start' },
-                React.createElement(FlexRow, { "$gap": 8 },
-                    React.createElement(FlexRow, { "$gap": 8, style: { minWidth: '100px' } },
-                        React.createElement(IconWrapped, { icon: icon }),
-                        React.createElement(Text, { size: 14 }, value)),
-                    React.createElement(Tooltip, { text: 'enable/disable user instrumentation for this language' },
-                        React.createElement(Toggle, { initialValue: formData.userInstrumentationEnvs?.languages[id]?.enabled, onChange: (bool) => handleFormChange(`userInstrumentationEnvs.languages.${id}.enabled`, bool) }))),
-                React.createElement(KeyValueInputsList, { inputMaxWidth: 220, disabled: !formData.userInstrumentationEnvs?.languages[id]?.enabled, value: Object.entries(formData.userInstrumentationEnvs?.languages[id]?.env || {}).map(([k, v]) => ({
-                        key: k,
-                        value: v,
-                    })), onChange: (rows) => {
-                        handleFormChange(`userInstrumentationEnvs.languages.${id}.env`, rows.reduce((acc, { key, value }) => ({
-                            ...acc,
-                            [key]: value,
-                        }), {}));
-                    } })))))));
-};
+const CollectorGatewaySettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    const [isAdvanced, setIsAdvanced] = useState(false);
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorGateway },
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "Collector Gateway"),
+            React.createElement(Toggle, { title: 'Advanced Settings', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(RowOfFields, null,
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Gateway Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    } }),
+                React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Gateway Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    } })),
+            React.createElement(Input, { status: StatusType.Warning, title: 'Coll. Gateway Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.goMemLimitMiB', value === '' ? null : Number(value));
+                } }))),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Autoscaler Min. Replicas', tooltip: 'Minimum number of replicas for the collector gateway', type: 'number', required: true, value: formData.collectorGateway?.minReplicas?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.minReplicas', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { title: 'Autoscaler Max. Replicas', tooltip: 'Maximum number of replicas for the collector gateway', type: 'number', required: true, value: formData.collectorGateway?.maxReplicas?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.maxReplicas', value === '' ? null : Number(value));
+                } })),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.requestMemoryMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.requestMemoryMiB', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector gateway in Megabytes', type: 'number', required: true, value: formData.collectorGateway?.limitMemoryMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.limitMemoryMiB', value === '' ? null : Number(value));
+                } })),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Request CPU (m)', tooltip: 'Request CPU for the collector gateway in Millicores', type: 'number', required: true, value: formData.collectorGateway?.requestCPUm?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.requestCPUm', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { title: 'Limit CPU (m)', tooltip: 'Limit CPU for the collector gateway in Millicores', type: 'number', required: true, value: formData.collectorGateway?.limitCPUm?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.limitCPUm', value === '' ? null : Number(value));
+                } }))));
+});
+CollectorGatewaySettings.displayName = CollectorGatewaySettings.name;
 
 const DataContainer = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
+  max-height: 100vh;
+  overflow-y: auto;
 `;
 const DRAWER_WIDTH = '750px';
 const TITLE_TEXT = 'System Settings';
-const SystemSettings = ({ fetchSettings, onSave }) => {
+const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
+    const [isSaving, setIsSaving] = useState(false);
     const [settings, setSettings] = useState(undefined);
     const { formData, handleFormChange, resetFormData, isFormDirty } = useGenericForm(settings);
-    useEffect(() => {
-        fetchSettings().then(setSettings);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    const [isSaving, setIsSaving] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     const toggleOpen = () => setIsOpen((prev) => !prev);
+    useEffect(() => {
+        if (isOpen)
+            fetchSettings().then(setSettings);
+        else
+            setSettings(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
     const [cancelWarningOpen, setCancelWarningOpen] = useState(false);
     const [cancelApproveCallback, setCancelApproveCallback] = useState(null);
     const handleWithCancelWarning = (callback) => {
@@ -5022,12 +4978,94 @@ const SystemSettings = ({ fetchSettings, onSave }) => {
             callback();
         }
     };
+    const handleSave = async () => {
+        setIsSaving(true);
+        await onSave(formData);
+        setSettings(await fetchSettings());
+        setIsSaving(false);
+        toggleOpen();
+    };
+    const [selectedTab, setSelectedTab] = useState(SettingsTabs.General);
+    const scrollContainerRef = useRef(null);
+    const generalRef = useRef(null);
+    const uiRef = useRef(null);
+    const rollbackRef = useRef(null);
+    const collectorNodeRef = useRef(null);
+    const collectorGatewayRef = useRef(null);
+    const refsArray = [generalRef, uiRef, rollbackRef, collectorNodeRef, collectorGatewayRef];
+    const tabsArray = [SettingsTabs.General, SettingsTabs.Ui, SettingsTabs.Rollback, SettingsTabs.CollectorNode, SettingsTabs.CollectorGateway];
+    const scrollTo = (id) => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        let relativeTop = 0;
+        for (let i = 0; i < refsArray.length; i++) {
+            const curr = refsArray[i].current;
+            if (curr && curr.id === id) {
+                const containerRect = scrollContainer.getBoundingClientRect();
+                const targetRect = curr.getBoundingClientRect();
+                relativeTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
+                break;
+            }
+        }
+        scrollContainer.scrollTo({
+            top: id === SettingsTabs.General ? 0 : relativeTop,
+            behavior: 'smooth',
+        });
+    };
+    const onScroll = (e) => {
+        const scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        const scrollTop = e.currentTarget.scrollTop;
+        for (let i = 0; i < refsArray.length; i++) {
+            const curr = refsArray[i].current;
+            if (curr) {
+                const containerRect = scrollContainer.getBoundingClientRect();
+                const targetRect = curr.getBoundingClientRect();
+                const relativeTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
+                if (relativeTop <= scrollTop)
+                    setSelectedTab(tabsArray[i]);
+            }
+        }
+    };
+    const handleTabChange = (tab) => {
+        setSelectedTab(tab);
+        scrollTo(tab);
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { key: TITLE_TEXT, onClick: toggleOpen, tooltip: TITLE_TEXT },
             React.createElement(GearIcon, { size: 18 })),
         React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: isOpen, onClose: () => handleWithCancelWarning(toggleOpen), header: {
                 icons: [GearIcon],
                 title: TITLE_TEXT,
+                tabs: [
+                    {
+                        label: SettingsTabs.General,
+                        onClick: () => handleTabChange(SettingsTabs.General),
+                        selected: selectedTab === SettingsTabs.General,
+                    },
+                    {
+                        label: SettingsTabs.Ui,
+                        onClick: () => handleTabChange(SettingsTabs.Ui),
+                        selected: selectedTab === SettingsTabs.Ui,
+                    },
+                    {
+                        label: SettingsTabs.Rollback,
+                        onClick: () => handleTabChange(SettingsTabs.Rollback),
+                        selected: selectedTab === SettingsTabs.Rollback,
+                    },
+                    {
+                        label: SettingsTabs.CollectorNode,
+                        onClick: () => handleTabChange(SettingsTabs.CollectorNode),
+                        selected: selectedTab === SettingsTabs.CollectorNode,
+                    },
+                    {
+                        label: SettingsTabs.CollectorGateway,
+                        onClick: () => handleTabChange(SettingsTabs.CollectorGateway),
+                        selected: selectedTab === SettingsTabs.CollectorGateway,
+                    },
+                ],
             }, footer: {
                 isOpen: isFormDirty,
                 centerButtons: [
@@ -5040,22 +5078,17 @@ const SystemSettings = ({ fetchSettings, onSave }) => {
                     {
                         'data-id': 'drawer-save',
                         variant: 'primary',
-                        onClick: async () => {
-                            setIsSaving(true);
-                            await onSave(formData);
-                            setSettings(await fetchSettings());
-                            setIsSaving(false);
-                            toggleOpen();
-                        },
+                        onClick: handleSave,
                         children: BUTTON_TEXTS.SAVE,
                     },
                 ],
-            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer, null,
-            React.createElement(UserInstrumentationEnvsSettings, { formData: formData, handleFormChange: handleFormChange }),
-            React.createElement(UiSettings, { formData: formData, handleFormChange: handleFormChange }),
-            React.createElement(CollectorNodeSettings, { formData: formData, handleFormChange: handleFormChange }),
-            React.createElement(CollectorGatewaySettings, { formData: formData, handleFormChange: handleFormChange }),
-            React.createElement(OtherSettings, { formData: formData, handleFormChange: handleFormChange }))) : (React.createElement(CenterThis, null,
+            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer, { ref: scrollContainerRef, onScroll: onScroll },
+            installationMethod === InstallationMethod.Helm && React.createElement(NotificationNote, { type: StatusType.Warning, title: 'Helm', message: "Changes won't persist unless you update the `values.yaml` file" }),
+            React.createElement(GeneralSettings, { ref: generalRef, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(UiSettings, { ref: uiRef, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(RollbackSettings, { ref: rollbackRef, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(CollectorNodeSettings, { ref: collectorNodeRef, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(CollectorGatewaySettings, { ref: collectorGatewayRef, formData: formData, handleFormChange: handleFormChange }))) : (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, { scale: 1.2 })))),
         React.createElement(CancelWarning, { isOpen: cancelWarningOpen, name: TITLE_TEXT, onApprove: () => {
                 cancelApproveCallback?.();

package/lib/{index-f2da9ad4.js → index-5772129e.js}

@@ -17507,18 +17507,19 @@ const Title$5 = styled(Text) `
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  color: ${({ $status, theme }) => ($status ? theme.text[$status] : theme.text.secondary)};
 `;
 const OptionalText = styled(Text) `
   font-size: 12px;
   color: ${({ theme }) => theme.text.darker_grey};
   opacity: 0.8;
 `;
-const FieldLabel = ({ title, required, tooltip, style }) => {
+const FieldLabel = ({ title, required, tooltip, style, status }) => {
     if (!title)
         return null;
     return (React.createElement(Wrapper, { style: style },
         React.createElement(Tooltip, { text: tooltip, withIcon: true },
-            React.createElement(Title$5, null, title),
+            React.createElement(Title$5, { "$status": status }, title),
             !required && React.createElement(OptionalText, null, "(optional)"))));
 };
 
@@ -17543,14 +17544,19 @@ const InputWrapper$2 = styled.div `
       cursor: not-allowed;
       opacity: 0.6;
     `}
-  ${({ $hasError }) => $hasError &&
-    css `
-      border-color: ${({ theme }) => theme.text.error};
-    `}
-  ${({ $isActive }) => $isActive &&
-    css `
-      border-color: ${({ theme }) => theme.colors.secondary};
-    `}
+  ${({ $isActive, $hasError, $status }) => $isActive
+    ? css `
+          border-color: ${({ theme }) => theme.colors.secondary};
+        `
+    : $hasError
+        ? css `
+          border-color: ${({ theme }) => theme.text.error};
+        `
+        : $status
+            ? css `
+          border-color: ${({ theme }) => theme.text[$status]};
+        `
+            : ''}
   &:hover {
     border-color: ${({ theme }) => theme.colors.secondary};
   }
@@ -17612,7 +17618,7 @@ const Button$1 = styled.button `
     cursor: not-allowed;
   }
 `;
-const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, ...props }) => {
+const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage, title, tooltip, required, value, onChange, type = InputTypes.Text, name, status, ...props }) => {
     const theme = Theme.useTheme();
     const isSecret = type === InputTypes.Password;
     const [revealSecret, setRevealSecret] = useState(false);
@@ -17628,8 +17634,8 @@ const Input = ({ icon: Icon, buttonLabel, onButtonClick, hasError, errorMessage,
             e.stopPropagation();
     };
     return (React.createElement(Container$g, null,
-        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
-        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus },
+        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip, status: status }),
+        React.createElement(InputWrapper$2, { "$disabled": props.disabled, "$hasError": hasError || !!errorMessage, "$isActive": !!props.autoFocus, "$status": status },
             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 }),
@@ -17695,10 +17701,15 @@ const DropdownHeader = styled.div `
           background: transparent;
         `};
 
-  ${({ $hasError }) => $hasError &&
-    css `
-      border-color: ${({ theme }) => theme.text.error};
-    `}
+  ${({ $hasError, $status }) => $hasError
+    ? css `
+          border-color: ${({ theme }) => theme.text.error};
+        `
+    : $status
+        ? css `
+          border-color: ${({ theme }) => theme.text[$status]};
+        `
+        : ''}
 
   &:hover {
     border-color: ${({ $isMulti, $hasSelections, $disabled, theme }) => ($disabled ? 'auto' : $isMulti && $hasSelections ? theme.colors.border : theme.colors.secondary)};
@@ -17709,7 +17720,7 @@ const IconWrapper$1 = styled.div `
   align-items: center;
   gap: 4px;
 `;
-const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, }) => {
+const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeholder, disabled = false, isMulti = false, showSearch = false, required = false, errorMessage, hasError = false, status, }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [openUpwards, setOpenUpwards] = useState(false);
     const containerRef = useRef(null);
@@ -17727,9 +17738,9 @@ const Dropdown = ({ options, value, onSelect, onDeselect, title, tooltip, placeh
     };
     const arrLen = Array.isArray(value) ? value.length : 0;
     return (React.createElement(RootContainer, { "$disabled": disabled },
-        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip }),
+        React.createElement(FieldLabel, { title: title, required: required, tooltip: tooltip, status: status }),
         React.createElement(RelativeContainer, { ref: containerRef },
-            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
+            React.createElement(DropdownHeader, { "$isOpen": isOpen, "$isMulti": isMulti, "$hasSelections": Array.isArray(value) ? !!value.length : false, "$hasError": !!errorMessage || hasError, "$status": status, "$disabled": disabled, onClick: () => !disabled && toggleOpen() },
                 React.createElement(DropdownPlaceholder, { value: value, placeholder: placeholder, onDeselect: onDeselect }),
                 React.createElement(IconWrapper$1, null,
                     isMulti && React.createElement(Badge, { label: arrLen, filled: !!arrLen }),

package/lib/{index-7074fb24.js → index-847d188f.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { a3 as WarningModal } from './index-f2da9ad4.js';
+import { a3 as WarningModal } from './index-5772129e.js';
 import { StatusType, EntityTypes } from './types.js';
 import './index-bd48e6e2.js';
 import 'styled-components';

package/lib/snippets.js

@@ -1,5 +1,5 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-f2da9ad4.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-f2da9ad4.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-5772129e.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-5772129e.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-391844c6.js';

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

@@ -34,6 +34,11 @@ export declare enum PlatformType {
     K8s = "k8s",
     Vm = "vm"
 }
+export declare enum InstallationMethod {
+    Cli = "odigos-cli",
+    Helm = "helm",
+    Operator = "odigos-operator"
+}
 export declare enum ProgrammingLanguages {
     Go = "go",
     JavaScript = "javascript",

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

@@ -1,23 +1,8 @@
 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"
+    HostPath = "HostPath",
+    InitContainer = "InitContainer"
 }
 export declare enum AgentEnvVarsInjectionMethod {
     Loader = "loader",
@@ -59,13 +44,8 @@ export interface OidcConfiguration {
     clientSecret: string;
 }
 export interface OdigosConfig {
-    telemetryEnabled: boolean | null;
-    openshiftEnabled: boolean | null;
     karpenterEnabled: boolean | null;
-    psp: boolean | null;
     allowConcurrentAgents: boolean | null;
-    skipWebhookIssuerCreation: boolean | null;
-    uiMode: UiMode | null;
     uiPaginationLimit: number | null;
     centralBackendURL: string | null;
     oidc: OidcConfiguration | null;
@@ -73,7 +53,6 @@ export interface OdigosConfig {
     imagePrefix: string | null;
     ignoredNamespaces: string[] | null;
     ignoredContainers: string[] | null;
-    profiles: Profile[] | null;
     mountMethod: MountMethod | null;
     agentEnvVarsInjectionMethod: AgentEnvVarsInjectionMethod | null;
     customContainerRuntimeSocketPath: string | null;
@@ -85,5 +64,4 @@ export interface OdigosConfig {
     rollout: RolloutConfiguration | null;
     collectorNode: CollectorNode | null;
     collectorGateway: CollectorGateway | null;
-    userInstrumentationEnvs: UserInstrumentationEnvs | null;
 }

package/lib/types.js

@@ -91,6 +91,12 @@ var PlatformType;
     PlatformType["K8s"] = "k8s";
     PlatformType["Vm"] = "vm";
 })(PlatformType || (PlatformType = {}));
+var InstallationMethod;
+(function (InstallationMethod) {
+    InstallationMethod["Cli"] = "odigos-cli";
+    InstallationMethod["Helm"] = "helm";
+    InstallationMethod["Operator"] = "odigos-operator";
+})(InstallationMethod || (InstallationMethod = {}));
 var ProgrammingLanguages;
 (function (ProgrammingLanguages) {
     ProgrammingLanguages["Go"] = "go";
@@ -178,40 +184,11 @@ 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["InitContainer"] = "InitContainer";
 })(MountMethod || (MountMethod = {}));
 var AgentEnvVarsInjectionMethod;
 (function (AgentEnvVarsInjectionMethod) {
@@ -363,4 +340,4 @@ var K8sResourceKind;
     K8sResourceKind["CronJob"] = "CronJob";
 })(K8sResourceKind || (K8sResourceKind = {}));
 
-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 };
+export { ActionCategory, ActionKeyTypes, ActionType, AddNodeTypes, AgentEnvVarsInjectionMethod, BooleanOperation, CodeAttributesKeyTypes, Crud, CustomInstrumentationsKeyTypes, DestinationTypes, EdgeTypes, EntityTypes, FieldTypes, HeadersCollectionKeyTypes, InputTypes, InstallationMethod, InstrumentationRuleType, IntrumentationStatus, JsonOperation, K8sResourceKind, MountMethod, NodeTypes, NumberOperation, OtherEntityTypes, OtherStatus, PayloadCollectionKeyTypes, PlatformType, ProgrammingLanguages, SignalType, SortDirection, StatusType, StringOperation, Tier };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "author": "Odigos",
   "repository": {
     "type": "git",
@@ -105,22 +105,22 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-docs": "^9.0.16",
+    "@storybook/addon-docs": "^9.0.18",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "9.0.16",
-    "@types/node": "^24.0.14",
+    "@storybook/react-webpack5": "9.0.18",
+    "@types/node": "^24.1.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "babel-loader": "^10.0.0",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.31.0",
-    "eslint-config-next": "^15.4.1",
-    "eslint-plugin-storybook": "9.0.16",
-    "next": "^15.4.1",
+    "eslint-config-next": "^15.4.3",
+    "eslint-plugin-storybook": "9.0.18",
+    "next": "^15.4.3",
     "postcss": "^8.5.6",
     "rollup": "^3.29.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "9.0.16",
+    "storybook": "9.0.18",
     "typescript": "^5.8.3"
   }
 }

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

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

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

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