npm - @odigos/ui-kit - Versions diffs - 0.0.66 → 0.0.67 - Mend

@odigos/ui-kit 0.0.66 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # 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)

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,269 +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 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,
+const UiSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.Ui },
         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 { 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 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: '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(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(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(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 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 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 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 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('collectorGateway.requestMemoryMiB', value === '' ? null : Number(value));
+                handleFormChange('uiPaginationLimit', 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) => {
+        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('collectorGateway.limitMemoryMiB', value === '' ? null : Number(value));
+                handleFormChange('odigletHealthProbeBindPort', 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) => {
+        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('collectorGateway.requestCPUm', value === '' ? null : Number(value));
+                handleFormChange('customContainerRuntimeSocketPath', value || null);
             } }),
-        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) => {
+        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('collectorGateway.limitCPUm', value === '' ? null : Number(value));
+                handleFormChange('collectorNode.k8sNodeLogsDirectory', value || null);
             } }),
-        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) => {
+        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('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                handleFormChange('collectorNode.collectorOwnMetricsPort', 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) => {
+        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('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                handleFormChange('collectorNode.goMemLimitMiB', 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) => {
+        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 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 CollectorNodeSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorNode },
+        React.createElement(CardTitle, null, "Collector Node"),
+        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 = forwardRef(({ formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorGateway },
+        React.createElement(CardTitle, null, "Collector Gateway"),
+        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(() => {
@@ -5022,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: [
@@ -5040,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 DELETED Viewed

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