@odigos/ui-kit 0.0.67 → 0.0.69

package/lib/containers.js

@@ -1,21 +1,21 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
-import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-bd48e6e2.js';
-import { 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 { 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-8fc2f11e.js';
+import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, MountMethod, AgentEnvVarsInjectionMethod, Profile, 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-728cf83d.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-50101bec.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-c1df4281.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-89b23a82.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-35e207a1.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
-import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-c2aef0e4.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-391844c6.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-7074fb24.js';
-import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-58440c5c.js';
-import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-42f40e7c.js';
+import { u as useKeyDown, a as useOnClickOutside, b as useContainerSize, c as useClickNode, d as usePopup, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-26bd4722.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-fed7fc91.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-b3808507.js';
+import { g as getConditionsBooleans, m as mapConditions, b as getStatusIcon, h as splitCamelString, c as capitalizeFirstLetter, i as isStringABoolean, p as parseBooleanFromString } from './index-281d9862.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, v as sleep, n as getPlatformIcon, o as getPlatformLabel, g as formatBytes, i as getContainersIcons, p as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, u as mapDestinationFieldsForDisplay, c as compareCondition, r as getYamlFieldsForDestination, m as getMetricForEntity, q as getWorkloadId, s as hasUnhealthyInstances, h as getContainersInstrumentedCount, t as isOverTime } from './index-ed649685.js';
 import { m as mapExportedSignals } from './index-6a6bea6e.js';
 import { NoteBackToSummary, EditButton } from './snippets.js';
 import { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-acc7c7dd.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-5102bee6.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -4605,7 +4605,7 @@ const ExpiresAt = ({ expiresAt }) => {
         ")"));
 };
 
-const Relative = styled.div `
+const Relative$1 = styled.div `
   position: relative;
 `;
 const TokenActions = ({ token, saveToken }) => {
@@ -4627,7 +4627,7 @@ const TokenActions = ({ token, saveToken }) => {
     return (React.createElement(FlexRow, { "$gap": 0 },
         React.createElement(IconButton, { size: 32, onClick: () => clickCopy(token) }, isCopied ? React.createElement(SuccessIcon, null) : React.createElement(CopyIcon, null)),
         React.createElement(Divider, { orientation: 'vertical', length: '12px' }),
-        React.createElement(Relative, null,
+        React.createElement(Relative$1, null,
             React.createElement(IconButton, { size: 32, onClick: onOpenEdit },
                 React.createElement(EditIcon, null)),
             isEdit && (React.createElement(PopupForm, { flipX: true, clientX: 36, isOpen: isEdit, onClose: onCloseEdit, onSave: onSave, title: 'Enter a new API Token', titleTooltip: 'Contact us to generate a new one' },
@@ -4730,7 +4730,6 @@ var SettingsTabs;
     SettingsTabs["Rollback"] = "Rollback";
     SettingsTabs["CollectorNode"] = "Collector Node";
     SettingsTabs["CollectorGateway"] = "Collector Gateway";
-    SettingsTabs["Advanced"] = "Advanced";
 })(SettingsTabs || (SettingsTabs = {}));
 
 const Card = styled.div `
@@ -4753,48 +4752,101 @@ const RowOfFields = styled(FlexRow) `
   width: 100%;
   gap: 12px;
   align-items: flex-start;
+  justify-content: space-between;
 `;
 
-const UiSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+const UiSettings = forwardRef(({ isAdvanced, 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) => {
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "UI")),
+        React.createElement(Input, { title: 'Central Backend URL', tooltip: 'When running the Centralized UI, you need to specify the URL of the central backend. <a href="https://docs.odigos.io/features/central">Learn more</a>.', 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) => {
+        React.createElement(Input, { title: 'OIDC Tenant URL', tooltip: 'If you need to restrict access to the Community UI, you can setup an OIDC provider. To do so you need to specify the URL of the OIDC tenant. <a href="https://docs.odigos.io/features/oidc">Learn more</a>.', 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) => {
+        React.createElement(Input, { title: 'OIDC Client ID', tooltip: 'If you need to restrict access to the Community UI, you can setup an OIDC provider. To do so you need to specify the Client ID of the OIDC application. <a href="https://docs.odigos.io/features/oidc">Learn more</a>.', 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) => {
+        React.createElement(Input, { title: 'OIDC Client Secret', tooltip: 'If you need to restrict access to the Community UI, you can setup an OIDC provider. To do so you need to specify the Client Secret of the OIDC application. <a href="https://docs.odigos.io/features/oidc">Learn more</a>.', type: 'password', required: true, value: formData.oidc?.clientSecret || '', onChange: (e) => {
                 const { value } = e.target;
                 handleFormChange('oidc.clientSecret', value || null);
-            } })));
+            } }),
+        isAdvanced && (React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) UI Pagination Limit', tooltip: 'The pagination limit for fetching data from the UI backend. A larger limit means more data will be fetched at once, reducing the number of requests to the backend. This might increase or decrease the performance of the UI - depending on your environment.', type: 'number', required: true, value: formData.uiPaginationLimit?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('uiPaginationLimit', value === '' ? null : Number(value));
+            } }))));
 });
 UiSettings.displayName = UiSettings.name;
 
-const GeneralSettings = forwardRef(({ formData, handleFormChange }, ref) => {
+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 GeneralSettings = forwardRef(({ isAdvanced, 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) => {
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "General")),
+        React.createElement(Input, { title: 'Cluster Name', tooltip: 'Name of the cluster, this is optional, but required in the Centralized UI. <a href="https://docs.odigos.io/features/central">Learn more</a>.', 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) => {
+        React.createElement(Toggle, { title: 'Enable the Karpenter Integration', tooltip: '<a href="https://docs.odigos.io/setup/odigos-with-karpenter">Learn how to configure Karpenter</a>. Once the Karpenter tainting setup is complete, inform Odigos to disable node affinity and rely on the taint mechanism.', initialValue: formData.karpenterEnabled || false, onChange: (bool) => handleFormChange('karpenterEnabled', bool) }),
+        React.createElement(Toggle, { title: 'Allow Odigos Alongisde Other Agents', tooltip: 'By default Odigos does not instrument applications that are already instrumented by other agents. If you want to allow Odigos to instrument applications that are already instrumented by other agents, enable this option. Note: this is not recommended and should be used only if you know what you are doing.', initialValue: formData.allowConcurrentAgents || false, onChange: (bool) => handleFormChange('allowConcurrentAgents', bool) }),
+        React.createElement(Toggle, { title: 'Disable Automatic Rollout', tooltip: 'By default, Odigos automatically rolls out the pods after the instrumentation is complete. If you want to disable rollouts and do it manually, toggle this option.', initialValue: formData.rollout?.automaticRolloutDisabled || false, onChange: (bool) => handleFormChange('rollout.automaticRolloutDisabled', bool) }),
+        React.createElement(Input, { title: 'Image Prefix', tooltip: 'Docker image prefix for all Odigos components. This is disabled because this setting requires a CLI update.', 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(Dropdown, { title: 'Profiles', tooltip: 'Enable custom profiles to customize the Odigos instrumentation.', 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(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) }))));
+            React.createElement(InputList, { title: 'Ignored Namespaces', tooltip: 'List of namespaces to exclude from instrumentation. Note: you cannot remove the default namespaces from the list, but you are able to add more namespaces.', 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) })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(Dropdown, { status: StatusType.Warning, title: '(Advanced) Mount Method', tooltip: 'For Odigos agents to run inside instrumented pod containers, certain files must be mounted into the container. In Kubernetes, these files are mounted under `/var/odigos` directory, with subdirectories for each agent. <a href="https://docs.odigos.io/instrumentations/configuration/mount-method#agent-mount-method">Learn more</a>.', options: MOUNT_METHOD_OPTIONS, required: true, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod) || undefined, onSelect: (option) => handleFormChange('mountMethod', option.id) }),
+            React.createElement(Dropdown, { status: StatusType.Warning, title: '(Advanced) Agent Envs Injection Method', tooltip: 'In order for Odigos to instrument applications, it needs to inject environment variables into the application. This setting controls how Odigos injects these environment variables.', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, required: true, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod) || undefined, onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
+            React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Odiglet Health Probe Port', tooltip: 'If the Odiglet is running with a host network, it may conflict with the port of other processes. This setting allows you to specify a different port for the health probe.', type: 'number', required: true, value: formData.odigletHealthProbeBindPort?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('odigletHealthProbeBindPort', value === '' ? null : Number(value));
+                } }),
+            React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Custom Container Runtime Socket Path', tooltip: 'If containerd is located in a different path than the default supported path by Odigos, then you can specify the socket path here.', required: true, value: formData.customContainerRuntimeSocketPath || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('customContainerRuntimeSocketPath', value || null);
+                } })))));
 });
 GeneralSettings.displayName = GeneralSettings.name;
 
@@ -4803,136 +4855,109 @@ const RollbackSettings = forwardRef(({ formData, handleFormChange }, ref) => {
         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) => {
+            React.createElement(Input, { title: 'Rollback Grace Time', tooltip: 'This is the amount of time that a pod should be in the `CrashLoopBackoff` state before it is rolled back. Pods that are in the `CrashLoopBackoff` state for longer than this time will be rolled back.', 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) => {
+            React.createElement(Input, { title: 'Rollback Stability Window', tooltip: 'This is the time-window in which the pod should be in the `CrashLoopBackoff` state before it is rolled back. Pods that are in the `CrashLoopBackoff` state after this window will not be rolled back.', required: true, value: formData.rollbackStabilityWindow || '', onChange: (e) => {
                     const { value } = e.target;
                     handleFormChange('rollbackStabilityWindow', value || null);
                 } }))));
 });
 RollbackSettings.displayName = RollbackSettings.name;
 
-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 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));
-            } }),
+const CollectorNodeSettings = forwardRef(({ isAdvanced, formData, handleFormChange }, ref) => {
+    return (React.createElement(Card, { ref: ref, id: SettingsTabs.CollectorNode },
+        React.createElement(RowOfFields, null,
+            React.createElement(CardTitle, null, "Collector Node")),
         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) => {
+            React.createElement(Input, { title: 'Request Memory', tooltip: 'You can optionally specify how much memory the collector node should request (in megabytes).', type: 'number', required: true, value: formData.collectorNode?.requestMemoryMiB?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorNode.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.requestMemoryMiB', 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) => {
+            React.createElement(Input, { title: 'Limit Memory', tooltip: 'You can optionally specify how much memory the collector node should limit (in megabytes).', type: 'number', required: true, value: formData.collectorNode?.limitMemoryMiB?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.limitMemoryMiB', 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) => {
+            React.createElement(Input, { title: 'Request CPU', tooltip: 'You can optionally specify how much CPU the collector node should request (in millicores).', type: 'number', required: true, value: formData.collectorNode?.requestCPUm?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.requestCPUm', 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) => {
+            React.createElement(Input, { title: 'Limit CPU', tooltip: 'You can optionally specify how much CPU the collector node should limit (in millicores).', type: 'number', required: true, value: formData.collectorNode?.limitCPUm?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.limitCPUm', 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 = 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) => {
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) K8s Node Logs Directory', tooltip: 'If `/var/log` is a symlink, you can specify the target directory for Kubernetes logs here.', required: true, value: formData.collectorNode?.k8sNodeLogsDirectory || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorNode.requestMemoryMiB', value === '' ? null : Number(value));
+                    handleFormChange('collectorNode.k8sNodeLogsDirectory', value || null);
                 } }),
-            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) => {
+            React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Own Metrics Port', tooltip: 'If the collector node is running with a host network, it may conflict with the port of other processes. This setting allows you to specify a different port for the own metrics.', type: 'number', required: true, value: formData.collectorNode?.collectorOwnMetricsPort?.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));
+                    handleFormChange('collectorNode.collectorOwnMetricsPort', 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) => {
+            React.createElement(RowOfFields, null,
+                React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Memory Limiter Limit', tooltip: 'You can optionally specify how much memory the collector node should limit (in megabytes).', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorNode.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    } }),
+                React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Memory Limiter Spike Limit', tooltip: 'You can optionally specify how much memory the collector node should limit (in megabytes).', type: 'number', required: true, value: formData.collectorNode?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    } })),
+            React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Go Memory Limit', tooltip: 'Sets the GOMEMLIMIT environment variable to control Go runtime memory usage. This soft memory limit helps the garbage collector prevent out-of-memory conditions in Kubernetes by triggering more aggressive garbage collection as memory usage approaches the limit (in megabytes).', type: 'number', required: true, value: formData.collectorNode?.goMemLimitMiB?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
-                    handleFormChange('collectorNode.limitCPUm', value === '' ? null : Number(value));
-                } }))));
+                    handleFormChange('collectorNode.goMemLimitMiB', value === '' ? null : Number(value));
+                } })))));
 });
 CollectorNodeSettings.displayName = CollectorNodeSettings.name;
 
-const CollectorGatewaySettings = forwardRef(({ formData, handleFormChange }, ref) => {
+const CollectorGatewaySettings = forwardRef(({ isAdvanced, 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) => {
+            React.createElement(CardTitle, null, "Collector Gateway")),
+        React.createElement(RowOfFields, null,
+            React.createElement(Input, { title: 'Autoscaler Min. Replicas', tooltip: 'You can optionally specify the 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) => {
+            React.createElement(Input, { title: 'Autoscaler Max. Replicas', tooltip: 'You can optionally specify the 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) => {
+            React.createElement(Input, { title: 'Request Memory', tooltip: 'You can optionally specify how much memory the collector gateway should request (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) => {
+            React.createElement(Input, { title: 'Limit Memory', tooltip: 'You can optionally specify how much memory the collector gateway should limit (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) => {
+            React.createElement(Input, { title: 'Request CPU', tooltip: 'You can optionally specify how much CPU the collector gateway should request (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) => {
+            React.createElement(Input, { title: 'Limit CPU', tooltip: 'You can optionally specify how much CPU the collector gateway should limit (in millicores).', type: 'number', required: true, value: formData.collectorGateway?.limitCPUm?.toString() || '', onChange: (e) => {
                     const { value } = e.target;
                     handleFormChange('collectorGateway.limitCPUm', value === '' ? null : Number(value));
-                } }))));
+                } })),
+        isAdvanced && (React.createElement(React.Fragment, null,
+            React.createElement(RowOfFields, null,
+                React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Memory Limiter Limit', tooltip: 'You can optionally specify how much memory the collector gateway should limit (in megabytes).', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+                    } }),
+                React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Memory Limiter Spike Limit', tooltip: 'You can optionally specify how much memory the collector gateway should limit (in megabytes).', type: 'number', required: true, value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                        const { value } = e.target;
+                        handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+                    } })),
+            React.createElement(Input, { status: StatusType.Warning, title: '(Advanced) Go Memory Limit', tooltip: 'Sets the GOMEMLIMIT environment variable to control Go runtime memory usage. This soft memory limit helps the garbage collector prevent out-of-memory conditions in Kubernetes by triggering more aggressive garbage collection as memory usage approaches the limit (in megabytes).', type: 'number', required: true, value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => {
+                    const { value } = e.target;
+                    handleFormChange('collectorGateway.goMemLimitMiB', value === '' ? null : Number(value));
+                } })))));
 });
 CollectorGatewaySettings.displayName = CollectorGatewaySettings.name;
 
@@ -4943,18 +4968,26 @@ const DataContainer = styled.div `
   max-height: 100vh;
   overflow-y: auto;
 `;
+const Relative = styled.div `
+  position: relative;
+`;
 const DRAWER_WIDTH = '750px';
 const TITLE_TEXT = 'System Settings';
 const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     const [settings, setSettings] = useState(undefined);
-    const { formData, handleFormChange, resetFormData, isFormDirty } = useGenericForm(settings);
-    useEffect(() => {
-        fetchSettings().then(setSettings);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     const [isSaving, setIsSaving] = useState(false);
+    const [isAdvanced, setIsAdvanced] = useState(false);
     const [isOpen, setIsOpen] = useState(false);
     const toggleOpen = () => setIsOpen((prev) => !prev);
+    const { popupRef, popupOpen, setPopupOpen } = usePopup();
+    const { formData, handleFormChange, resetFormData, isFormDirty } = useGenericForm(settings);
+    useEffect(() => {
+        if (isOpen)
+            fetchSettings().then(setSettings);
+        else
+            setSettings(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
     const [cancelWarningOpen, setCancelWarningOpen] = useState(false);
     const [cancelApproveCallback, setCancelApproveCallback] = useState(null);
     const handleWithCancelWarning = (callback) => {
@@ -4980,9 +5013,8 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     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 refsArray = [generalRef, uiRef, rollbackRef, collectorNodeRef, collectorGatewayRef];
+    const tabsArray = [SettingsTabs.General, SettingsTabs.Ui, SettingsTabs.Rollback, SettingsTabs.CollectorNode, SettingsTabs.CollectorGateway];
     const scrollTo = (id) => {
         const scrollContainer = scrollContainerRef.current;
         if (!scrollContainer)
@@ -4993,7 +5025,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
             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
+                relativeTop = targetRect.top - containerRect.top + scrollContainer.scrollTop;
                 break;
             }
         }
@@ -5002,22 +5034,21 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
             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]);
-            }
-        }
-    };
+    // Note: this is commented out because the different sections are too small (they don't cover the entire drawer height), due to this the "selected tab" logic is not working as expected
+    // const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    //   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);
@@ -5028,37 +5059,17 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
         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,
-                    },
+                tabs: tabsArray.map((tab) => ({
+                    label: tab,
+                    onClick: () => handleTabChange(tab),
+                    selected: selectedTab === tab,
+                })),
+                actions: [
+                    React.createElement(Relative, { key: 'actions' },
+                        React.createElement(IconButton, { withBorder: true, onClick: () => setPopupOpen((prev) => !prev) },
+                            React.createElement(Text, { size: 10 }, "\u2022\u2022\u2022")),
+                        React.createElement(Popup, { ref: popupRef, isOpen: popupOpen, top: 36, right: 0, padding: '24px', width: '270px' },
+                            React.createElement(Toggle, { title: 'Enable Advanced Mode', tooltip: 'Show advanced settings. Note: these are not recommended to be changed unless you know what you are doing.', initialValue: isAdvanced, onChange: () => setIsAdvanced((prev) => !prev), flipHorizontally: true }))),
                 ],
             }, footer: {
                 isOpen: isFormDirty,
@@ -5076,14 +5087,13 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
                         children: BUTTON_TEXTS.SAVE,
                     },
                 ],
-            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer, { ref: scrollContainerRef, onScroll: onScroll },
+            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer, { ref: scrollContainerRef },
             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(GeneralSettings, { ref: generalRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(UiSettings, { ref: uiRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(RollbackSettings, { ref: rollbackRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(CollectorNodeSettings, { ref: collectorNodeRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
+            React.createElement(CollectorGatewaySettings, { ref: collectorGatewayRef, isAdvanced: isAdvanced, 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/functions/get-status-icon/index.d.ts

@@ -1,2 +1,3 @@
 import { StatusType, type SVG } from '@/types';
-export declare const getStatusIcon: (type: StatusType, theme: Record<"text", Record<StatusType, string>>) => SVG;
+import type { DefaultTheme } from 'styled-components';
+export declare const getStatusIcon: (type: StatusType, theme: DefaultTheme) => SVG;

package/lib/functions.js

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