@odigos/ui-kit 0.0.65 → 0.0.67

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* allow null values ([#265](https://github.com/odigos-io/ui-kit/issues/265)) ([cd92ec8](https://github.com/odigos-io/ui-kit/commit/cd92ec89e84893d69a126300ce8e6a232852223e))
+
 ## [0.0.65](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.64...ui-kit-v0.0.65) (2025-07-21)
 
 

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/advanced-settings.d.ts

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

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,12 @@
 import type { OdigosConfig } from '@/types';
+export declare enum SettingsTabs {
+    General = "General",
+    Ui = "UI",
+    Rollback = "Rollback",
+    CollectorNode = "Collector Node",
+    CollectorGateway = "Collector Gateway",
+    Advanced = "Advanced"
+}
 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,7 +1,7 @@
 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 { 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-f2da9ad4.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';
@@ -4723,6 +4723,16 @@ 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["Advanced"] = "Advanced";
+})(SettingsTabs || (SettingsTabs = {}));
+
 const Card = styled.div `
   align-self: stretch;
   display: flex;
@@ -4739,182 +4749,203 @@ const CardTitle = styled(Text) `
   font-weight: 600;
   line-height: 20px;
 `;
+const RowOfFields = styled(FlexRow) `
+  width: 100%;
+  gap: 12px;
+  align-items: flex-start;
+`;
+
+const UiSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.Ui },
+        React.createElement(CardTitle, null, "UI"),
+        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', 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', 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', required: true, value: formData.oidc?.clientSecret || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('oidc.clientSecret', value || null);
+            } })));
+});
+UiSettings.displayName = UiSettings.name;
+
+const GeneralSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.General },
+        React.createElement(CardTitle, null, "General"),
+        React.createElement(Toggle, { title: 'Karpenter Enabled', tooltip: 'Enable Karpenter support', initialValue: formData.karpenterEnabled || false, onChange: (bool) => handleFormChange('karpenterEnabled', 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: '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', required: true, value: formData.clusterName || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('clusterName', value || null);
+            } }),
+        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(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 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 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' },
+    { 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: UI_MODE_OPTIONS.find((option) => option.id === formData.uiMode), 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) => handleFormChange('uiPaginationLimit', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Central Backend URL', tooltip: 'URL of the central backend', value: formData.centralBackendURL, onChange: (e) => handleFormChange('centralBackendURL', e.target.value) }),
-        React.createElement(Input, { title: 'OIDC Tenant URL', tooltip: 'URL of the OIDC tenant', value: formData.oidc?.tenantUrl, onChange: (e) => handleFormChange('oidc.tenantUrl', e.target.value) }),
-        React.createElement(Input, { title: 'OIDC Client ID', tooltip: 'Client ID of the OIDC application', value: formData.oidc?.clientId, onChange: (e) => handleFormChange('oidc.clientId', e.target.value) }),
-        React.createElement(Input, { title: 'OIDC Client Secret', tooltip: 'Client Secret of the OIDC application', type: 'password', value: formData.oidc?.clientSecret, onChange: (e) => handleFormChange('oidc.clientSecret', e.target.value) })));
-};
 
-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, onChange: (bool) => handleFormChange('telemetryEnabled', bool) }),
-        React.createElement(Toggle, { title: 'OpenShift Enabled', tooltip: 'Enable OpenShift-specific features', initialValue: formData.openshiftEnabled, onChange: (bool) => handleFormChange('openshiftEnabled', bool) }),
-        React.createElement(Toggle, { title: 'Karpenter Enabled', tooltip: 'Enable Karpenter support', initialValue: formData.karpenterEnabled, onChange: (bool) => handleFormChange('karpenterEnabled', bool) }),
-        React.createElement(Toggle, { title: 'PSP Enabled', tooltip: 'Enable Pod Security Policy support', initialValue: formData.psp, onChange: (bool) => handleFormChange('psp', bool) }),
-        React.createElement(Toggle, { title: 'Allow Concurrent Agents', tooltip: 'Allow concurrent running agents', initialValue: formData.allowConcurrentAgents, onChange: (bool) => handleFormChange('allowConcurrentAgents', bool) }),
-        React.createElement(Toggle, { title: 'Skip Webhook Issuer Creation', tooltip: 'Skip creation of the webhook issuer', initialValue: formData.skipWebhookIssuerCreation, onChange: (bool) => handleFormChange('skipWebhookIssuerCreation', bool) }),
-        React.createElement(Toggle, { title: 'Automatic Rollout Disabled', tooltip: 'Disable automatic rollout of pods after instrumentation', initialValue: formData.rollout?.automaticRolloutDisabled, onChange: (bool) => handleFormChange('rollout.automaticRolloutDisabled', bool) }),
-        React.createElement(Input, { title: 'Cluster Name', tooltip: 'Name of the cluster', value: formData.clusterName, onChange: (e) => handleFormChange('clusterName', e.target.value) }),
-        React.createElement(Input, { title: 'Image Prefix', tooltip: 'Image prefix for all Odigos components', value: formData.imagePrefix, onChange: (e) => handleFormChange('imagePrefix', e.target.value) }),
-        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), 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), 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) => handleFormChange('customContainerRuntimeSocketPath', e.target.value) }),
-        React.createElement(Input, { title: 'Odiglet Health Probe Bind Port', tooltip: 'Port to bind the health probe', value: formData.odigletHealthProbeBindPort.toString(), onChange: (e) => handleFormChange('odigletHealthProbeBindPort', Number(e.target.value)) }),
-        React.createElement(Toggle, { title: 'Rollback Disabled', tooltip: 'Disable rollback', initialValue: formData.rollbackDisabled, onChange: (bool) => handleFormChange('rollbackDisabled', bool) }),
-        React.createElement(Input, { title: 'Rollback Grace Time', tooltip: 'Grace time for rollback', value: formData.rollbackGraceTime, onChange: (e) => handleFormChange('rollbackGraceTime', e.target.value) }),
-        React.createElement(Input, { title: 'Rollback Stability Window', tooltip: 'Stability window for rollback', value: formData.rollbackStabilityWindow, onChange: (e) => handleFormChange('rollbackStabilityWindow', e.target.value) }),
-        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,
-            }), {})) })));
-};
+const AdvancedSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.Advanced },
+        React.createElement(CardTitle, null, "Advanced"),
+        React.createElement(Input, { title: 'UI Pagination Limit', 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(Dropdown, { title: 'Mount Method', 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, { title: 'Agent Env Vars Injection Method', tooltip: 'How to inject env vars 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, { title: 'Odiglet Health Probe Bind Port', 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, { title: 'Custom Container Runtime Socket Path', 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(Input, { 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, { 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, { 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, { 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, { 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: '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, { 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, { 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));
+            } })));
+});
+AdvancedSettings.displayName = AdvancedSettings.name;
 
-const CollectorNodeSettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
+const CollectorNodeSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorNode },
         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) => handleFormChange('collectorNode.collectorOwnMetricsPort', Number(e.target.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) => handleFormChange('collectorNode.requestMemoryMiB', Number(e.target.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) => handleFormChange('collectorNode.limitMemoryMiB', Number(e.target.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) => handleFormChange('collectorNode.requestCPUm', Number(e.target.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) => handleFormChange('collectorNode.limitCPUm', Number(e.target.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) => handleFormChange('collectorNode.memoryLimiterLimitMiB', Number(e.target.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) => handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', Number(e.target.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) => handleFormChange('collectorNode.goMemLimitMiB', Number(e.target.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) => handleFormChange('collectorNode.k8sNodeLogsDirectory', e.target.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 CollectorGatewaySettings = ({ formData, handleFormChange }) => {
-    return (React.createElement(Card, null,
+const CollectorGatewaySettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorGateway },
         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) => handleFormChange('collectorGateway.minReplicas', Number(e.target.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) => handleFormChange('collectorGateway.maxReplicas', Number(e.target.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) => handleFormChange('collectorGateway.requestMemoryMiB', Number(e.target.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) => handleFormChange('collectorGateway.limitMemoryMiB', Number(e.target.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) => handleFormChange('collectorGateway.requestCPUm', Number(e.target.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) => handleFormChange('collectorGateway.limitCPUm', Number(e.target.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) => handleFormChange('collectorGateway.memoryLimiterLimitMiB', Number(e.target.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) => handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', Number(e.target.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) => handleFormChange('collectorGateway.goMemLimitMiB', Number(e.target.value)) })));
-};
-
-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,
-                        }), {}));
-                    } })))))));
-};
+        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 [settings, setSettings] = useState(undefined);
     const { formData, handleFormChange, resetFormData, isFormDirty } = useGenericForm(settings);
     useEffect(() => {
@@ -4935,12 +4966,100 @@ 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 advancedRef = useRef(null);
+    const refsArray = [generalRef, uiRef, rollbackRef, collectorNodeRef, collectorGatewayRef, advancedRef];
+    const tabsArray = [SettingsTabs.General, SettingsTabs.Ui, SettingsTabs.Rollback, SettingsTabs.CollectorNode, SettingsTabs.CollectorGateway, SettingsTabs.Advanced];
+    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 - 20; // -20px offset for better visual spacing
+                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,
+                    },
+                    {
+                        label: SettingsTabs.Advanced,
+                        onClick: () => handleTabChange(SettingsTabs.Advanced),
+                        selected: selectedTab === SettingsTabs.Advanced,
+                    },
+                ],
             }, footer: {
                 isOpen: isFormDirty,
                 centerButtons: [
@@ -4953,22 +5072,18 @@ 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(AdvancedSettings, { ref: advancedRef, 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/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,31 +44,24 @@ export interface OidcConfiguration {
     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;
+    karpenterEnabled: boolean | null;
+    allowConcurrentAgents: boolean | null;
+    uiPaginationLimit: number | null;
+    centralBackendURL: string | null;
+    oidc: OidcConfiguration | null;
+    clusterName: string | null;
+    imagePrefix: string | null;
+    ignoredNamespaces: string[] | null;
+    ignoredContainers: string[] | null;
+    mountMethod: MountMethod | null;
+    agentEnvVarsInjectionMethod: AgentEnvVarsInjectionMethod | null;
+    customContainerRuntimeSocketPath: string | null;
+    odigletHealthProbeBindPort: number | null;
+    rollbackDisabled: boolean | null;
+    rollbackGraceTime: string | null;
+    rollbackStabilityWindow: string | null;
+    nodeSelector: Record<string, string> | null;
+    rollout: RolloutConfiguration | null;
+    collectorNode: CollectorNode | null;
+    collectorGateway: CollectorGateway | 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.65",
+  "version": "0.0.67",
   "author": "Odigos",
   "repository": {
     "type": "git",

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 };