@odigos/ui-kit 0.0.65 → 0.0.66

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.66](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.65...ui-kit-v0.0.66) (2025-07-22)
+
+
+### Bug Fixes
+
+* allow null values ([#265](https://github.com/odigos-io/ui-kit/issues/265)) ([cd92ec8](https://github.com/odigos-io/ui-kit/commit/cd92ec89e84893d69a126300ce8e6a232852223e))
+
 ## [0.0.65](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.64...ui-kit-v0.0.65) (2025-07-21)
 
 

package/lib/containers.js

@@ -4818,36 +4818,69 @@ const PROFILE_OPTIONS = [
 const UiSettings = ({ formData, handleFormChange }) => {
     return (React.createElement(Card, null,
         React.createElement(CardTitle, null, "UI"),
-        React.createElement(Dropdown, { title: 'UI Mode', tooltip: 'Mode of the UI - default or readonly', options: UI_MODE_OPTIONS, value: UI_MODE_OPTIONS.find((option) => option.id === formData.uiMode), onSelect: (option) => handleFormChange('uiMode', option.id) }),
-        React.createElement(Input, { title: 'UI Pagination Limit', tooltip: 'Pagination limit for UI paginated fetching', type: 'number', value: formData.uiPaginationLimit.toString(), onChange: (e) => handleFormChange('uiPaginationLimit', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Central Backend URL', tooltip: 'URL of the central backend', value: formData.centralBackendURL, onChange: (e) => handleFormChange('centralBackendURL', e.target.value) }),
-        React.createElement(Input, { title: 'OIDC Tenant URL', tooltip: 'URL of the OIDC tenant', value: formData.oidc?.tenantUrl, onChange: (e) => handleFormChange('oidc.tenantUrl', e.target.value) }),
-        React.createElement(Input, { title: 'OIDC Client ID', tooltip: 'Client ID of the OIDC application', value: formData.oidc?.clientId, onChange: (e) => handleFormChange('oidc.clientId', e.target.value) }),
-        React.createElement(Input, { title: 'OIDC Client Secret', tooltip: 'Client Secret of the OIDC application', type: 'password', value: formData.oidc?.clientSecret, onChange: (e) => handleFormChange('oidc.clientSecret', e.target.value) })));
+        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) => {
+                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) => {
+                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) => {
+                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) => {
+                const { value } = e.target;
+                handleFormChange('oidc.clientSecret', value || null);
+            } })));
 };
 
 const OtherSettings = ({ formData, handleFormChange }) => {
     return (React.createElement(Card, null,
         React.createElement(CardTitle, null, "Other"),
-        React.createElement(Toggle, { title: 'Telemetry Enabled', tooltip: 'Enable anonymous telemetry collection', initialValue: formData.telemetryEnabled, onChange: (bool) => handleFormChange('telemetryEnabled', bool) }),
-        React.createElement(Toggle, { title: 'OpenShift Enabled', tooltip: 'Enable OpenShift-specific features', initialValue: formData.openshiftEnabled, onChange: (bool) => handleFormChange('openshiftEnabled', bool) }),
-        React.createElement(Toggle, { title: 'Karpenter Enabled', tooltip: 'Enable Karpenter support', initialValue: formData.karpenterEnabled, onChange: (bool) => handleFormChange('karpenterEnabled', bool) }),
-        React.createElement(Toggle, { title: 'PSP Enabled', tooltip: 'Enable Pod Security Policy support', initialValue: formData.psp, onChange: (bool) => handleFormChange('psp', bool) }),
-        React.createElement(Toggle, { title: 'Allow Concurrent Agents', tooltip: 'Allow concurrent running agents', initialValue: formData.allowConcurrentAgents, onChange: (bool) => handleFormChange('allowConcurrentAgents', bool) }),
-        React.createElement(Toggle, { title: 'Skip Webhook Issuer Creation', tooltip: 'Skip creation of the webhook issuer', initialValue: formData.skipWebhookIssuerCreation, onChange: (bool) => handleFormChange('skipWebhookIssuerCreation', bool) }),
-        React.createElement(Toggle, { title: 'Automatic Rollout Disabled', tooltip: 'Disable automatic rollout of pods after instrumentation', initialValue: formData.rollout?.automaticRolloutDisabled, onChange: (bool) => handleFormChange('rollout.automaticRolloutDisabled', bool) }),
-        React.createElement(Input, { title: 'Cluster Name', tooltip: 'Name of the cluster', value: formData.clusterName, onChange: (e) => handleFormChange('clusterName', e.target.value) }),
-        React.createElement(Input, { title: 'Image Prefix', tooltip: 'Image prefix for all Odigos components', value: formData.imagePrefix, onChange: (e) => handleFormChange('imagePrefix', e.target.value) }),
-        React.createElement(InputList, { title: 'Ignored Namespaces', tooltip: 'List of namespaces to exclude from instrumentation', value: formData.ignoredNamespaces, onChange: (arr) => handleFormChange('ignoredNamespaces', arr) }),
-        React.createElement(InputList, { title: 'Ignored Containers', tooltip: 'List of container names to exclude from instrumentation', value: formData.ignoredContainers, onChange: (arr) => handleFormChange('ignoredContainers', arr) }),
-        React.createElement(Dropdown, { title: 'Profiles', tooltip: 'Profiles to enable', isMulti: true, options: PROFILE_OPTIONS, value: PROFILE_OPTIONS.filter((option) => formData.profiles.includes(option.id)), onSelect: (option) => handleFormChange('profiles', [...formData.profiles, option.id]), onDeselect: (option) => handleFormChange('profiles', formData.profiles.filter((p) => p !== option.id)) }),
-        React.createElement(Dropdown, { title: 'Mount Method', tooltip: 'Method used to mount volume', options: MOUNT_METHOD_OPTIONS, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod), onSelect: (option) => handleFormChange('mountMethod', option.id) }),
-        React.createElement(Dropdown, { title: 'Agent Env Vars Injection Method', tooltip: 'How to inject env vars into agents', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod), onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
-        React.createElement(Input, { title: 'Custom Container Runtime Socket Path', tooltip: 'Path to the custom container runtime socket', value: formData.customContainerRuntimeSocketPath, onChange: (e) => handleFormChange('customContainerRuntimeSocketPath', e.target.value) }),
-        React.createElement(Input, { title: 'Odiglet Health Probe Bind Port', tooltip: 'Port to bind the health probe', value: formData.odigletHealthProbeBindPort.toString(), onChange: (e) => handleFormChange('odigletHealthProbeBindPort', Number(e.target.value)) }),
-        React.createElement(Toggle, { title: 'Rollback Disabled', tooltip: 'Disable rollback', initialValue: formData.rollbackDisabled, onChange: (bool) => handleFormChange('rollbackDisabled', bool) }),
-        React.createElement(Input, { title: 'Rollback Grace Time', tooltip: 'Grace time for rollback', value: formData.rollbackGraceTime, onChange: (e) => handleFormChange('rollbackGraceTime', e.target.value) }),
-        React.createElement(Input, { title: 'Rollback Stability Window', tooltip: 'Stability window for rollback', value: formData.rollbackStabilityWindow, onChange: (e) => handleFormChange('rollbackStabilityWindow', e.target.value) }),
+        React.createElement(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) }),
+        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) => {
+                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) => {
+                const { value } = e.target;
+                handleFormChange('imagePrefix', value || null);
+            } }),
+        React.createElement(InputList, { title: 'Ignored Namespaces', tooltip: 'List of namespaces to exclude from instrumentation', value: formData.ignoredNamespaces || [], onChange: (arr) => handleFormChange('ignoredNamespaces', arr) }),
+        React.createElement(InputList, { title: 'Ignored Containers', tooltip: 'List of container names to exclude from instrumentation', value: formData.ignoredContainers || [], onChange: (arr) => handleFormChange('ignoredContainers', arr) }),
+        React.createElement(Dropdown, { title: 'Profiles', tooltip: 'Profiles to enable', isMulti: true, options: PROFILE_OPTIONS, value: PROFILE_OPTIONS.filter((option) => formData.profiles?.includes(option.id)), onSelect: (option) => handleFormChange('profiles', [...(formData.profiles || []), option.id]), onDeselect: (option) => handleFormChange('profiles', formData.profiles?.filter((p) => p !== option.id) || []) }),
+        React.createElement(Dropdown, { title: 'Mount Method', tooltip: 'Method used to mount volume', options: MOUNT_METHOD_OPTIONS, value: MOUNT_METHOD_OPTIONS.find((option) => option.id === formData.mountMethod) || undefined, onSelect: (option) => handleFormChange('mountMethod', option.id) }),
+        React.createElement(Dropdown, { title: 'Agent Env Vars Injection Method', tooltip: 'How to inject env vars into agents', options: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS, value: AGENT_ENV_VARS_INJECTION_METHOD_OPTIONS.find((option) => option.id === formData.agentEnvVarsInjectionMethod) || undefined, onSelect: (option) => handleFormChange('agentEnvVarsInjectionMethod', option.id) }),
+        React.createElement(Input, { title: 'Custom Container Runtime Socket Path', tooltip: 'Path to the custom container runtime socket', value: formData.customContainerRuntimeSocketPath || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('customContainerRuntimeSocketPath', value || null);
+            } }),
+        React.createElement(Input, { title: 'Odiglet Health Probe Bind Port', tooltip: 'Port to bind the health probe', type: 'number', value: formData.odigletHealthProbeBindPort?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('odigletHealthProbeBindPort', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Toggle, { title: 'Rollback Disabled', tooltip: 'Disable rollback', initialValue: formData.rollbackDisabled || false, onChange: (bool) => handleFormChange('rollbackDisabled', bool) }),
+        React.createElement(Input, { title: 'Rollback Grace Time', tooltip: 'Grace time for rollback', value: formData.rollbackGraceTime || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('rollbackGraceTime', value || null);
+            } }),
+        React.createElement(Input, { title: 'Rollback Stability Window', tooltip: 'Stability window for rollback', value: formData.rollbackStabilityWindow || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('rollbackStabilityWindow', value || null);
+            } }),
         React.createElement(KeyValueInputsList, { title: 'Node Selector', value: Object.entries(formData.nodeSelector || {}).map(([key, value]) => ({
                 key,
                 value,
@@ -4860,29 +4893,83 @@ const OtherSettings = ({ formData, handleFormChange }) => {
 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) => handleFormChange('collectorNode.collectorOwnMetricsPort', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.requestMemoryMiB?.toString() || '', onChange: (e) => handleFormChange('collectorNode.requestMemoryMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.limitMemoryMiB?.toString() || '', onChange: (e) => handleFormChange('collectorNode.limitMemoryMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Request CPU (Millicores)', tooltip: 'Request CPU for the collector node in Millicores', type: 'number', value: formData.collectorNode?.requestCPUm?.toString() || '', onChange: (e) => handleFormChange('collectorNode.requestCPUm', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Limit CPU (Millicores)', tooltip: 'Limit CPU for the collector node in Millicores', type: 'number', value: formData.collectorNode?.limitCPUm?.toString() || '', onChange: (e) => handleFormChange('collectorNode.limitCPUm', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => handleFormChange('collectorNode.memoryLimiterLimitMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => handleFormChange('collectorNode.memoryLimiterSpikeLimitMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector node in Megabytes', type: 'number', value: formData.collectorNode?.goMemLimitMiB?.toString() || '', onChange: (e) => handleFormChange('collectorNode.goMemLimitMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'K8s Node Logs Directory', tooltip: 'Target directory for K8s logs if `/var/log` is a symlink', value: formData.collectorNode?.k8sNodeLogsDirectory || '', onChange: (e) => handleFormChange('collectorNode.k8sNodeLogsDirectory', e.target.value) })));
+        React.createElement(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 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) => handleFormChange('collectorGateway.minReplicas', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Max. Replicas', tooltip: 'Maximum number of replicas for the collector gateway', type: 'number', value: formData.collectorGateway?.maxReplicas?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.maxReplicas', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.requestMemoryMiB?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.requestMemoryMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.limitMemoryMiB?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.limitMemoryMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Request CPU (Millicores)', tooltip: 'Request CPU for the collector gateway in Millicores', type: 'number', value: formData.collectorGateway?.requestCPUm?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.requestCPUm', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Limit CPU (Millicores)', tooltip: 'Limit CPU for the collector gateway in Millicores', type: 'number', value: formData.collectorGateway?.limitCPUm?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.limitCPUm', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.memoryLimiterLimitMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', Number(e.target.value)) }),
-        React.createElement(Input, { title: 'Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => handleFormChange('collectorGateway.goMemLimitMiB', Number(e.target.value)) })));
+        React.createElement(Input, { title: 'Min. Replicas', tooltip: 'Minimum number of replicas for the collector gateway', type: 'number', value: formData.collectorGateway?.minReplicas?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.minReplicas', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Max. Replicas', tooltip: 'Maximum number of replicas for the collector gateway', type: 'number', value: formData.collectorGateway?.maxReplicas?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.maxReplicas', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Request Memory (MB)', tooltip: 'Request memory for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.requestMemoryMiB?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.requestMemoryMiB', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Limit Memory (MB)', tooltip: 'Limit memory for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.limitMemoryMiB?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.limitMemoryMiB', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Request CPU (Millicores)', tooltip: 'Request CPU for the collector gateway in Millicores', type: 'number', value: formData.collectorGateway?.requestCPUm?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.requestCPUm', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Limit CPU (Millicores)', tooltip: 'Limit CPU for the collector gateway in Millicores', type: 'number', value: formData.collectorGateway?.limitCPUm?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.limitCPUm', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Memory Limiter Limit (MB)', tooltip: 'Memory limiter limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.memoryLimiterLimitMiB?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.memoryLimiterLimitMiB', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Memory Limiter Spike Limit (MB)', tooltip: 'Memory limiter spike limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.memoryLimiterSpikeLimitMiB?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.memoryLimiterSpikeLimitMiB', value === '' ? null : Number(value));
+            } }),
+        React.createElement(Input, { title: 'Go Memory Limit (MB)', tooltip: 'Go memory limit for the collector gateway in Megabytes', type: 'number', value: formData.collectorGateway?.goMemLimitMiB?.toString() || '', onChange: (e) => {
+                const { value } = e.target;
+                handleFormChange('collectorGateway.goMemLimitMiB', value === '' ? null : Number(value));
+            } })));
 };
 
 const UserInstrumentationEnvsSettings = ({ formData, handleFormChange }) => {

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

@@ -59,31 +59,31 @@ export interface OidcConfiguration {
     clientSecret: string;
 }
 export interface OdigosConfig {
-    telemetryEnabled: boolean;
-    openshiftEnabled: boolean;
-    karpenterEnabled: boolean;
-    psp: boolean;
-    allowConcurrentAgents: boolean;
-    skipWebhookIssuerCreation: boolean;
-    uiMode: UiMode;
-    uiPaginationLimit: number;
-    centralBackendURL: string;
-    oidc?: OidcConfiguration;
-    clusterName: string;
-    imagePrefix: string;
-    ignoredNamespaces: string[];
-    ignoredContainers: string[];
-    profiles: Profile[];
-    mountMethod: MountMethod;
-    agentEnvVarsInjectionMethod: AgentEnvVarsInjectionMethod;
-    customContainerRuntimeSocketPath: string;
-    odigletHealthProbeBindPort: number;
-    rollbackDisabled: boolean;
-    rollbackGraceTime: string;
-    rollbackStabilityWindow: string;
-    nodeSelector?: Record<string, string>;
-    rollout?: RolloutConfiguration;
-    collectorNode?: CollectorNode;
-    collectorGateway?: CollectorGateway;
-    userInstrumentationEnvs?: UserInstrumentationEnvs;
+    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;
+    clusterName: string | null;
+    imagePrefix: string | null;
+    ignoredNamespaces: string[] | null;
+    ignoredContainers: string[] | null;
+    profiles: Profile[] | null;
+    mountMethod: MountMethod | null;
+    agentEnvVarsInjectionMethod: AgentEnvVarsInjectionMethod | null;
+    customContainerRuntimeSocketPath: string | null;
+    odigletHealthProbeBindPort: number | null;
+    rollbackDisabled: boolean | null;
+    rollbackGraceTime: string | null;
+    rollbackStabilityWindow: string | null;
+    nodeSelector: Record<string, string> | null;
+    rollout: RolloutConfiguration | null;
+    collectorNode: CollectorNode | null;
+    collectorGateway: CollectorGateway | null;
+    userInstrumentationEnvs: UserInstrumentationEnvs | null;
 }

package/package.json

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