@odigos/ui-kit 0.0.32 → 0.0.34

package/lib/containers.js

@@ -1,27 +1,27 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, memo, useContext, createContext, useCallback, useLayoutEffect, Fragment } from 'react';
 import styled, { css } from 'styled-components';
-import { T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, A as ACTION_OPTIONS, k as getActionIcon, f as useModalStore, d as useFilterStore, M as MONITORS_OPTIONS, s as styleInject, i as useSelectedStore, e as useInstrumentStore, m as getInstrumentationRuleIcon, a as useDataStreamStore, l as getEntityId, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-ivnS3eWW.js';
-import { a as DISPLAY_TITLES, B as BUTTON_TEXTS, F as FORM_ALERTS, D as DEFAULT_DATA_STREAM_NAME } from './index-B9cvsYnj.js';
-import { ActionType, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, FieldTypes, SignalType, CodeAttributesKeyTypes, HeadersCollectionKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
-import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, I as IconButton, A as AddButton$1, U as Stepper, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-BxckQJom.js';
-import { i as isEmpty, s as safeJsonParse } from './index-BZS1ijMm.js';
-import { i as CheckCircledIcon, O as OdigosLogo } from './index-DuSmjoDs.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index-DR5ryS5d.js';
-import { u as useActionFormData, a as useClickNode, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-A5_zhn1C.js';
-import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-9tDdAS9s.js';
-import { E as EditIcon } from './index-B3j_QWzh.js';
-import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-DAbcw-wM.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-rbphz5kH.js';
-import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-C7YDojNh.js';
-import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, v as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, u as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, c as compareCondition, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, t as isOverTime } from './index-cG2lNgzz.js';
+import { T as Theme, h as usePendingStore, g as useNotificationStore, b as useDrawerStore, c as useEntityStore, A as ACTION_OPTIONS, k as getActionIcon, f as useModalStore, d as useFilterStore, M as MONITORS_OPTIONS, s as styleInject, i as useSelectedStore, e as useInstrumentStore, m as getInstrumentationRuleIcon, a as useDataStreamStore, l as getEntityId, j as useSetupStore, I as INSTRUMENTATION_RULE_OPTIONS, u as useDarkMode } from './index-DJGe2YeC.js';
+import { a as DISPLAY_TITLES, B as BUTTON_TEXTS, F as FORM_ALERTS } from './index-mOgS3e5E.js';
+import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, AddNodeTypes, EdgeTypes, SignalType, HeadersCollectionKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType } from './types.js';
+import { f as DataCardFieldTypes, o as FieldLabel, C as Checkbox, n as FieldError, u as Input, w as InputTable, K as KeyValueInputsList, v as InputList, V as Text, O as Segment, L as SectionTitle, i as DocsButton, y as MonitorsCheckboxes, W as TextArea, j as Drawer, d as ConditionDetails, D as DataCard, a0 as FlexColumn, M as Modal, N as NavigationButtons, a4 as ModalBody, J as NotificationNote, a as AutocompleteInput, h as Divider, R as Status, $ as FlexRow, Y as Tooltip, r as IconWrapped, z as MonitorsIcons, a5 as TableContainer, a6 as TableTitleWrap, q as IconTitleBadge, a7 as TableWrap, x as InteractiveTable, a1 as CenterThis, G as NoDataFound, Z as TraceLoader, b as Badge, E as ExtendArrow, a2 as VerticalScroll, P as SelectionButton, B as Button, m as Dropdown, a8 as getDefaultExportFromCjs, F as FadeLoader, g as DataTab, Q as SkeletonLoader, X as Toggle, A as AddButton$1, U as Stepper, I as IconButton, e as DataCardFields, s as IconsNav, p as IconGroup } from './index-BZq0yNL-.js';
+import { i as isEmpty, s as safeJsonParse } from './index-BV85P9UP.js';
+import { i as CheckCircledIcon, O as OdigosLogo } from './index-Bd8ZAEvq.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, a as OverviewIcon, F as FilterIcon, D as DataStreamsIcon, N as NotificationIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon } from './index--RecCPGA.js';
+import { u as useActionFormData, a as useClickNode, c as useDataStreamFormData, d as useDestinationFormData, b as useClickNotification, e as useSourceFormData, f as useSourceSelectionFormData } from './useSourceSelectionFormData-DBNf1uEe.js';
+import { d as useKeyDown, e as useOnClickOutside, u as useContainerSize, c as useInstrumentationRuleFormData, g as useTransition, f as useTimeAgo, a as useCopy } from './useTransition-dZ92VxT2.js';
+import { E as EditIcon } from './index-BWZT-ipR.js';
+import { T as TrashIcon, S as SearchIcon, P as PlusIcon$1, f as CheckIcon, A as ArrowIcon, a as CopyIcon, g as CrossIcon } from './index-CIKkezVt.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-a_WA-82O.js';
+import { m as mapConditions, b as getStatusIcon, c as capitalizeFirstLetter } from './index-ChYtqgBW.js';
+import { f as filterActions, i as getConditionsBooleans, n as getEntityLabel, m as getEntityIcon, x as sleep$1, p as getPlatformIcon, q as getPlatformLabel, h as formatBytes, k as getContainersIcons, r as getValueForRange, l as getDestinationIcon, w as mapExportedSignals, g as filterSourcesByStream, e as filterSources, b as filterDestinationsByStream, a as filterDestinations, v as mapDestinationFieldsForDisplay, c as compareCondition, t as getYamlFieldsForDestination, d as deepClone, o as getMetricForEntity, s as getWorkloadId, j as getContainersInstrumentedCount, u as isOverTime } from './index-BBjwRlta.js';
 import { createPortal } from 'react-dom';
-import { N as NoteBackToSummary, E as EditButton } from './index-DeD-SIlN.js';
+import { N as NoteBackToSummary, E as EditButton } from './index-ovjVbVQq.js';
 import { D as DESTINATION_CATEGORIES } from './index-Dqief9td.js';
-import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-PfG5pvFK.js';
-import './index-7-KCQK-x.js';
+import { a6 as RulesIcon, a7 as SourcesIcon, a3 as ActionsIcon, a4 as DestinationsIcon } from './index-Cq8NT9Hr.js';
+import './index-CnZlllYu.js';
 
 const buildCard$3 = (action) => {
-    const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, }, } = action;
+    const { type, spec: { actionName, notes, signals, disabled, collectContainerAttributes, collectReplicaSetAttributes, collectWorkloadId, collectClusterId, labelsAttributes, annotationsAttributes, clusterAttributes, attributeNamesToDelete, renames, piiCategories, fallbackSamplingRatio, samplingPercentage, endpointsFilters, servicesNameFilters, attributeFilters, }, } = action;
     const arr = [
         { title: DISPLAY_TITLES.TYPE, value: type },
         { type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
@@ -101,14 +101,39 @@ const buildCard$3 = (action) => {
             str += `Service Name: ${serviceName}\n`;
             str += `HTTP Route: ${httpRoute}\n`;
             str += `Min. Latency: ${minimumLatencyThreshold}\n`;
-            str += `Sampling Ratio: ${fallbackSamplingRatio}`;
+            str += `Fallback Sampling Ratio: ${fallbackSamplingRatio}`;
             arr.push({ title: `Endpoint${endpointsFilters.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
         });
     }
+    if (type === ActionType.ServiceNameSampler) {
+        servicesNameFilters?.forEach(({ serviceName, samplingRatio, fallbackSamplingRatio }, idx) => {
+            let str = '';
+            str += `Service Name: ${serviceName}\n`;
+            str += `Sampling Ratio: ${samplingRatio}\n`;
+            str += `Fallback Sampling Ratio: ${fallbackSamplingRatio}`;
+            arr.push({ title: `Filter${servicesNameFilters.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
+        });
+    }
+    if (type === ActionType.SpanAttributeSampler) {
+        attributeFilters?.forEach(({ serviceName, attributeKey, fallbackSamplingRatio, condition }, idx) => {
+            let str = '';
+            str += `Service Name: ${serviceName}\n`;
+            str += `Attribute Key: ${attributeKey}\n`;
+            str += `Fallback Sampling Ratio: ${fallbackSamplingRatio}\n`;
+            const conditionKey = Object.keys(condition)[0];
+            str += `Condition: ${conditionKey}\n`;
+            str += `Operation: ${condition[conditionKey]?.operation}\n`;
+            str += `Expected Value: ${condition[conditionKey]?.expectedValue}`;
+            if (conditionKey === 'jsonCondition') {
+                str += `\nJSON Path: ${condition[conditionKey].jsonPath}`;
+            }
+            arr.push({ title: `Filter${attributeFilters.length > 1 ? ` #${idx + 1}` : ''}`, value: str });
+        });
+    }
     return arr;
 };
 
-const KEY$6 = 'piiCategories';
+const KEY$8 = ActionKeyTypes.PiiCategories;
 const ListContainer$2 = styled.div `
   display: flex;
   flex-direction: row;
@@ -127,18 +152,18 @@ const PII_OPTIONS = [
     },
 ];
 const PiiMasking = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$6];
-    const mappedValue = value[KEY$6] || [];
+    const errorMessage = formErrors[KEY$8];
+    const mappedValue = value[KEY$8] || [];
     const [isLastSelection, setIsLastSelection] = useState(mappedValue.length === 1);
     const handleChange = (id, isAdd) => {
         const arr = isAdd ? [...mappedValue, id] : mappedValue.filter((str) => str !== id);
-        setValue(KEY$6, arr);
+        setValue(KEY$8, arr);
         setIsLastSelection(arr.length === 1);
     };
     useEffect(() => {
         if (!mappedValue.length) {
             const arr = PII_OPTIONS.map(({ id }) => id);
-            setValue(KEY$6, arr);
+            setValue(KEY$8, arr);
             setIsLastSelection(PII_OPTIONS.length === 1);
         }
         // eslint-disable-next-line
@@ -149,140 +174,316 @@ const PiiMasking = ({ value, setValue, formErrors }) => {
         !!errorMessage && React.createElement(FieldError, null, errorMessage)));
 };
 
-const KEY$5 = 'fallbackSamplingRatio', MIN$1 = 0, MAX$1 = 100;
+const KEY$7 = ActionKeyTypes.FallbackSamplingRatio, MIN$1 = 0, MAX$1 = 100;
 const ErrorSampler = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$5];
-    const mappedValue = value[KEY$5];
-    const handleChange = (val) => setValue(KEY$5, Math.max(MIN$1, Math.min(Number(val), MAX$1)) || MIN$1);
-    return (React.createElement(Input, { title: 'Fallback sampling ratio', required: true, type: 'number', min: MIN$1, max: MAX$1, value: !isEmpty(mappedValue) ? String(mappedValue) : '', onChange: ({ target: { value: v } }) => handleChange(v), errorMessage: errorMessage }));
+    const errorMessage = formErrors[KEY$7];
+    const mappedValue = value[KEY$7];
+    const handleChange = (val) => setValue(KEY$7, Math.max(MIN$1, Math.min(Number(val), MAX$1)) || MIN$1);
+    return (React.createElement(Input, { title: 'Fallback sampling ratio', required: true, type: InputTypes.Number, min: MIN$1, max: MAX$1, value: !isEmpty(mappedValue) ? String(mappedValue) : '', onChange: ({ target: { value: v } }) => handleChange(v), errorMessage: errorMessage }));
 };
 
+const LABEL_COLUMNS = [
+    {
+        title: 'Label Key',
+        keyName: 'labelKey',
+        placeholder: 'app.kubernetes.io/name',
+        required: true,
+    },
+    {
+        title: 'Attribute Key',
+        keyName: 'attributeKey',
+        placeholder: 'app.kubernetes.name',
+        required: true,
+    },
+];
+const ANNOTATION_COLUMNS = [
+    {
+        title: 'Annotation Key',
+        keyName: 'annotationKey',
+        placeholder: 'kubectl.kubernetes.io/restartedAt',
+        required: true,
+    },
+    {
+        title: 'Attribute Key',
+        keyName: 'attributeKey',
+        placeholder: 'kubectl.kubernetes.restartedAt',
+        required: true,
+    },
+];
 const K8sAttributes = ({ value, setValue, formErrors }) => {
     useEffect(() => {
-        if (!value.collectContainerAttributes && !value.collectWorkloadId && !value.collectReplicaSetAttributes && !value.collectClusterId && !value.labelsAttributes?.length && !value.annotationsAttributes?.length) {
-            setValue('collectContainerAttributes', true);
-            setValue('collectReplicaSetAttributes', true);
-            setValue('collectWorkloadId', true);
-            setValue('collectClusterId', true);
-            setValue('labelsAttributes', []);
-            setValue('annotationsAttributes', []);
+        if (!value[ActionKeyTypes.CollectContainerAttributes] &&
+            !value[ActionKeyTypes.CollectReplicaSetAttributes] &&
+            !value[ActionKeyTypes.CollectWorkloadId] &&
+            !value[ActionKeyTypes.CollectClusterId] &&
+            !value[ActionKeyTypes.LabelsAttributes]?.length &&
+            !value[ActionKeyTypes.AnnotationsAttributes]?.length) {
+            setValue(ActionKeyTypes.CollectContainerAttributes, true);
+            setValue(ActionKeyTypes.CollectReplicaSetAttributes, true);
+            setValue(ActionKeyTypes.CollectWorkloadId, true);
+            setValue(ActionKeyTypes.CollectClusterId, true);
+            setValue(ActionKeyTypes.LabelsAttributes, []);
+            setValue(ActionKeyTypes.AnnotationsAttributes, []);
         }
         // eslint-disable-next-line
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Checkbox, { title: 'Collect Container Attributes', value: value['collectContainerAttributes'] || false, onChange: (bool) => setValue('collectContainerAttributes', bool), errorMessage: formErrors['collectContainerAttributes'] }),
-        React.createElement(Checkbox, { title: 'Collect ReplicaSet Attributes', value: value['collectReplicaSetAttributes'] || false, onChange: (bool) => setValue('collectReplicaSetAttributes', bool), errorMessage: formErrors['collectReplicaSetAttributes'] }),
-        React.createElement(Checkbox, { title: 'Collect Workload ID', value: value['collectWorkloadId'] || false, onChange: (bool) => setValue('collectWorkloadId', bool), errorMessage: formErrors['collectWorkloadId'] }),
-        React.createElement(Checkbox, { title: 'Collect Cluster ID', value: value['collectClusterId'] || false, onChange: (bool) => setValue('collectClusterId', bool), errorMessage: formErrors['collectClusterId'] }),
-        React.createElement(InputTable, { columns: [
-                {
-                    title: 'Label Key',
-                    keyName: 'labelKey',
-                    placeholder: 'app.kubernetes.io/name',
-                    required: true,
-                },
-                {
-                    title: 'Attribute Key',
-                    keyName: 'attributeKey',
-                    placeholder: 'app.kubernetes.name',
-                    required: true,
-                },
-            ], value: value['labelsAttributes'] || [], onChange: (arr) => setValue('labelsAttributes', arr), errorMessage: formErrors['labelsAttributes'] }),
-        React.createElement(InputTable, { columns: [
-                {
-                    title: 'Annotation Key',
-                    keyName: 'annotationKey',
-                    placeholder: 'kubectl.kubernetes.io/restartedAt',
-                    required: true,
-                },
-                {
-                    title: 'Attribute Key',
-                    keyName: 'attributeKey',
-                    placeholder: 'kubectl.kubernetes.restartedAt',
-                    required: true,
-                },
-            ], value: value['annotationsAttributes'] || [], onChange: (arr) => setValue('annotationsAttributes', arr), errorMessage: formErrors['annotationsAttributes'] })));
+        React.createElement(Checkbox, { title: 'Collect Container Attributes', value: value[ActionKeyTypes.CollectContainerAttributes] || false, onChange: (bool) => setValue(ActionKeyTypes.CollectContainerAttributes, bool), errorMessage: formErrors[ActionKeyTypes.CollectContainerAttributes] }),
+        React.createElement(Checkbox, { title: 'Collect ReplicaSet Attributes', value: value[ActionKeyTypes.CollectReplicaSetAttributes] || false, onChange: (bool) => setValue(ActionKeyTypes.CollectReplicaSetAttributes, bool), errorMessage: formErrors[ActionKeyTypes.CollectReplicaSetAttributes] }),
+        React.createElement(Checkbox, { title: 'Collect Workload ID', value: value[ActionKeyTypes.CollectWorkloadId] || false, onChange: (bool) => setValue(ActionKeyTypes.CollectWorkloadId, bool), errorMessage: formErrors[ActionKeyTypes.CollectWorkloadId] }),
+        React.createElement(Checkbox, { title: 'Collect Cluster ID', value: value[ActionKeyTypes.CollectClusterId] || false, onChange: (bool) => setValue(ActionKeyTypes.CollectClusterId, bool), errorMessage: formErrors[ActionKeyTypes.CollectClusterId] }),
+        React.createElement(InputTable, { columns: LABEL_COLUMNS, value: value[ActionKeyTypes.LabelsAttributes] || [], onChange: (arr) => setValue(ActionKeyTypes.LabelsAttributes, arr), errorMessage: formErrors[ActionKeyTypes.LabelsAttributes] }),
+        React.createElement(InputTable, { columns: ANNOTATION_COLUMNS, value: value[ActionKeyTypes.AnnotationsAttributes] || [], onChange: (arr) => setValue(ActionKeyTypes.AnnotationsAttributes, arr), errorMessage: formErrors[ActionKeyTypes.AnnotationsAttributes] })));
 };
 
-const KEY$4 = 'endpointsFilters';
+const KEY$6 = ActionKeyTypes.EndpointsFilters;
+const COLUMNS$2 = [
+    {
+        title: 'Service',
+        keyName: 'serviceName',
+        placeholder: 'e.g. my-service',
+        tooltip: 'Service name: The rule applies to a specific service name. Only traces originating from this service’s root span will be considered.',
+        required: true,
+    },
+    {
+        title: 'HTTP route',
+        keyName: 'httpRoute',
+        placeholder: 'e.g. /api/v1/users',
+        tooltip: 'HTTP route: The specific HTTP route prefix to match for sampling. Only traces with routes beginning with this prefix will be considered. For instance, configuring /buy will also match /buy/product.',
+        required: true,
+    },
+    {
+        title: 'Threshold',
+        keyName: 'minimumLatencyThreshold',
+        placeholder: 'e.g. 1000',
+        tooltip: 'Minimum latency threshold (ms): Specifies the minimum latency in milliseconds; traces with latency below this threshold are ignored.',
+        required: true,
+        type: InputTypes.Number,
+    },
+    {
+        title: 'Fallback',
+        keyName: 'fallbackSamplingRatio',
+        placeholder: 'e.g. 100',
+        tooltip: 'Fallback sampling ratio: Specifies the percentage of traces that meet the service/http_route filter but fall below the threshold that you still want to retain. For example, if a rule is set for service A and http_route B with a minimum latency threshold of 1 second, you might still want to keep some traces below this threshold. Setting the ratio to 20% ensures that 20% of these traces will be retained.',
+        required: true,
+        type: InputTypes.Number,
+    },
+];
 const LatencySampler = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$4];
-    const mappedValue = value[KEY$4] || [];
-    const handleChange = (arr) => setValue(KEY$4, arr);
-    return (React.createElement(InputTable, { columns: [
-            {
-                title: 'Service',
-                keyName: 'serviceName',
-                placeholder: 'Choose service',
-                required: true,
-                tooltip: 'Service name: The rule applies to a specific service name. Only traces originating from this service’s root span will be considered.',
-            },
-            {
-                title: 'HTTP route',
-                keyName: 'httpRoute',
-                placeholder: 'e.g. /api/v1/users',
-                required: true,
-                tooltip: 'HTTP route: The specific HTTP route prefix to match for sampling. Only traces with routes beginning with this prefix will be considered. For instance, configuring /buy will also match /buy/product.',
-            },
-            {
-                title: 'Threshold',
-                keyName: 'minimumLatencyThreshold',
-                placeholder: 'e.g. 1000',
-                required: true,
-                type: 'number',
-                tooltip: 'Minimum latency threshold (ms): Specifies the minimum latency in milliseconds; traces with latency below this threshold are ignored.',
-            },
-            {
-                title: 'Fallback',
-                keyName: 'fallbackSamplingRatio',
-                placeholder: 'e.g. 20',
-                required: true,
-                type: 'number',
-                tooltip: 'Fallback sampling ratio: Specifies the percentage of traces that meet the service/http_route filter but fall below the threshold that you still want to retain. For example, if a rule is set for service A and http_route B with a minimum latency threshold of 1 second, you might still want to keep some traces below this threshold. Setting the ratio to 20% ensures that 20% of these traces will be retained.',
-            },
-        ], value: mappedValue, onChange: handleChange, errorMessage: errorMessage }));
+    const errorMessage = formErrors[KEY$6];
+    const mappedValue = value[KEY$6] || [];
+    const handleChange = (arr) => {
+        const mapped = arr.map(({ serviceName, httpRoute, minimumLatencyThreshold, fallbackSamplingRatio }) => {
+            const row = {
+                serviceName,
+                httpRoute,
+                minimumLatencyThreshold: Number(minimumLatencyThreshold),
+                fallbackSamplingRatio: Number(fallbackSamplingRatio),
+            };
+            return row;
+        });
+        setValue(KEY$6, mapped);
+    };
+    return React.createElement(InputTable, { columns: COLUMNS$2, value: mappedValue, onChange: handleChange, errorMessage: errorMessage });
 };
 
-const KEY$3 = 'clusterAttributes';
+const KEY$5 = ActionKeyTypes.ClusterAttributes;
 const AddClusterInfo = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$3];
-    const mappedValue = value[KEY$3]?.map((obj) => ({
+    const errorMessage = formErrors[KEY$5];
+    const mappedValue = value[KEY$5]?.map((obj) => ({
         key: obj.attributeName,
         value: obj.attributeStringValue,
     })) || [];
-    const handleChange = (arr) => setValue(KEY$3, arr.map((obj) => ({
+    const handleChange = (arr) => setValue(KEY$5, arr.map((obj) => ({
         attributeName: obj.key,
         attributeStringValue: obj.value,
     })));
     return React.createElement(KeyValueInputsList, { title: 'Resource Attributes', value: mappedValue, onChange: handleChange, required: true, errorMessage: errorMessage });
 };
 
-const KEY$2 = 'attributeNamesToDelete';
+const KEY$4 = ActionKeyTypes.AttributeNamesToDelete;
 const DeleteAttributes = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$2];
-    const mappedValue = value[KEY$2] || [];
-    const handleChange = (arr) => setValue(KEY$2, arr);
+    const errorMessage = formErrors[KEY$4];
+    const mappedValue = value[KEY$4] || [];
+    const handleChange = (arr) => setValue(KEY$4, arr);
     return React.createElement(InputList, { title: 'Attributes to delete', value: mappedValue, onChange: handleChange, required: true, errorMessage: errorMessage });
 };
 
-const KEY$1 = 'renames';
+const KEY$3 = ActionKeyTypes.Renames;
 const RenameAttributes = ({ value, setValue, formErrors }) => {
-    const errorMessage = formErrors[KEY$1];
-    const mappedValue = Object.entries(value[KEY$1] || {}).map(([k, v]) => ({ key: k, value: v }));
+    const errorMessage = formErrors[KEY$3];
+    const mappedValue = Object.entries(value[KEY$3] || {}).map(([k, v]) => ({ key: k, value: v }));
     const handleChange = (arr) => {
         const payload = {};
         arr.forEach((obj) => (payload[obj.key] = obj.value));
-        setValue(KEY$1, payload);
+        setValue(KEY$3, payload);
     };
     return React.createElement(KeyValueInputsList, { title: 'Attributes to rename', value: mappedValue, onChange: handleChange, required: true, errorMessage: errorMessage });
 };
 
-const KEY = 'samplingPercentage', MIN = 0, MAX = 100;
+const KEY$2 = ActionKeyTypes.ServicesNameFilters;
+const COLUMNS$1 = [
+    {
+        title: 'Service Name',
+        keyName: 'serviceName',
+        placeholder: 'e.g. my-service',
+        tooltip: 'Specifies the service name to search within the trace (Across all available spans).',
+        required: true,
+    },
+    {
+        title: 'Sampling Ratio',
+        keyName: 'samplingRatio',
+        placeholder: 'e.g. 10',
+        tooltip: 'Specifies the sample rate for all traces.',
+        required: true,
+        type: InputTypes.Number,
+    },
+    {
+        title: 'Fallback Sampling Ratio',
+        keyName: 'fallbackSamplingRatio',
+        placeholder: 'e.g. 100',
+        tooltip: 'Specifies the percentage of traces that don’t meet the service name filter and that you still like to retain.',
+        required: true,
+        type: InputTypes.Number,
+    },
+];
+const ServiceNameSampler = ({ value, setValue, formErrors }) => {
+    const errorMessage = formErrors[KEY$2];
+    const mappedValue = value[KEY$2] || [];
+    const handleChange = (arr) => {
+        const mapped = arr.map(({ serviceName, samplingRatio, fallbackSamplingRatio }) => {
+            const row = {
+                serviceName,
+                samplingRatio: Number(samplingRatio),
+                fallbackSamplingRatio: Number(fallbackSamplingRatio),
+            };
+            return row;
+        });
+        setValue(KEY$2, mapped);
+    };
+    return React.createElement(InputTable, { columns: COLUMNS$1, value: mappedValue, onChange: handleChange, errorMessage: errorMessage });
+};
+
+const KEY$1 = ActionKeyTypes.SamplingPercentage, MIN = 0, MAX = 100;
 const ProbabilisticSampler = ({ value, setValue, formErrors }) => {
+    const errorMessage = formErrors[KEY$1];
+    const mappedValue = value[KEY$1];
+    const handleChange = (val) => setValue(KEY$1, Math.max(MIN, Math.min(Number(val), MAX)) || MIN);
+    return (React.createElement(Input, { title: 'Sampling percentage', required: true, type: InputTypes.Number, min: MIN, max: MAX, value: !isEmpty(mappedValue) ? String(mappedValue) : '', onChange: ({ target: { value: v } }) => handleChange(v), errorMessage: errorMessage }));
+};
+
+const KEY = ActionKeyTypes.AttributeFilters;
+const COLUMNS = [
+    {
+        title: 'Service Name',
+        keyName: 'serviceName',
+        placeholder: 'e.g. my-service',
+        tooltip: 'Specifies the service name to search within the trace (across all available spans).',
+        required: true,
+    },
+    {
+        title: 'Attribute Key',
+        keyName: 'attributeKey',
+        placeholder: 'e.g. http.request.method',
+        tooltip: 'Specifies the attribute key inside of the span.',
+        required: true,
+    },
+    {
+        title: 'Fallback Sampling Ratio',
+        keyName: 'fallbackSamplingRatio',
+        placeholder: 'e.g. 100',
+        tooltip: 'Specifies the percentage of traces that don’t meet the service name filter and that you still like to retain.',
+        required: true,
+        type: InputTypes.Number,
+    },
+    {
+        title: 'Condition',
+        keyName: 'condition',
+        tooltip: 'An object representing the filters for span attributes filters.',
+        required: true,
+        componentType: FieldTypes.Dropdown,
+        options: [
+            { id: 'stringCondition', value: 'String Condition' },
+            { id: 'numberCondition', value: 'Number Condition' },
+            { id: 'booleanCondition', value: 'Boolean Condition' },
+            { id: 'jsonCondition', value: 'JSON Condition' },
+        ],
+    },
+    {
+        title: 'Operation',
+        keyName: 'operation',
+        tooltip: 'Specifies the operation to run against the attribute.',
+        required: true,
+        componentType: FieldTypes.Dropdown,
+        options: [
+            { id: 'exists', value: 'Exists' },
+            { id: 'equals', value: 'Equals' },
+            { id: 'not_equals', value: 'Not Equals' },
+            { id: 'contains', value: 'Contains' },
+            { id: 'not_contains', value: 'Not Contains' },
+            { id: 'regex', value: 'Regex' },
+            { id: 'greater_than', value: 'Greater Than' },
+            { id: 'less_than', value: 'Less Than' },
+            { id: 'greater_than_or_equal', value: 'Greater Than Or Equal' },
+            { id: 'less_than_or_equal', value: 'Less Than Or Equal' },
+            { id: 'is_valid_json', value: 'Is Valid JSON' },
+            { id: 'is_invalid_json', value: 'Is Invalid JSON' },
+            { id: 'jsonpath_exists', value: 'JSON Path Exists' },
+            { id: 'key_equals', value: 'Key Equals' },
+            { id: 'key_not_equals', value: 'Key Not Equals' },
+        ],
+    },
+    {
+        title: 'Expected Value',
+        keyName: 'expectedValue',
+        placeholder: 'e.g. GET',
+        tooltip: 'The values to test the attribute against.',
+        required: true,
+    },
+    {
+        title: 'JSON Path',
+        keyName: 'jsonPath',
+        placeholder: 'e.g. $.user.role',
+        tooltip: 'An expression used to navigate the JSON structure.',
+        required: false,
+        renderCondition: (row) => row.condition === 'jsonCondition',
+    },
+];
+const SpanAttributeSampler = ({ value, setValue, formErrors }) => {
     const errorMessage = formErrors[KEY];
-    const mappedValue = value[KEY];
-    const handleChange = (val) => setValue(KEY, Math.max(MIN, Math.min(Number(val), MAX)) || MIN);
-    return (React.createElement(Input, { title: 'Sampling percentage', required: true, type: 'number', min: MIN, max: MAX, value: !isEmpty(mappedValue) ? String(mappedValue) : '', onChange: ({ target: { value: v } }) => handleChange(v), errorMessage: errorMessage }));
+    const mappedValue = (value[KEY] || []).map(({ serviceName, attributeKey, fallbackSamplingRatio, condition }) => {
+        const conditionKey = Object.entries(condition).filter(([k, v]) => v)[0][0];
+        return {
+            serviceName,
+            attributeKey,
+            fallbackSamplingRatio,
+            condition: conditionKey,
+            operation: condition[conditionKey]?.operation,
+            expectedValue: condition[conditionKey]?.expectedValue,
+            jsonPath: condition[conditionKey]?.jsonPath,
+        };
+    });
+    const handleChange = (arr) => {
+        const mapped = arr.map(({ serviceName, attributeKey, fallbackSamplingRatio, condition, operation, expectedValue, jsonPath }) => {
+            const row = {
+                serviceName,
+                attributeKey,
+                fallbackSamplingRatio: Number(fallbackSamplingRatio),
+                condition: {
+                    [condition]: {
+                        operation,
+                        expectedValue,
+                    },
+                },
+            };
+            if (jsonPath) {
+                row.condition[condition].jsonPath = jsonPath;
+            }
+            return row;
+        });
+        setValue(KEY, mapped);
+    };
+    return React.createElement(InputTable, { columns: COLUMNS, value: mappedValue, onChange: handleChange, errorMessage: errorMessage, limitFieldsPerRow: 3 });
 };
 
 const componentsMap$1 = {
@@ -294,6 +495,8 @@ const componentsMap$1 = {
     [ActionType.ErrorSampler]: ErrorSampler,
     [ActionType.ProbabilisticSampler]: ProbabilisticSampler,
     [ActionType.LatencySampler]: LatencySampler,
+    [ActionType.ServiceNameSampler]: ServiceNameSampler,
+    [ActionType.SpanAttributeSampler]: SpanAttributeSampler,
 };
 const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     if (!actionType)
@@ -7115,8 +7318,8 @@ function onPointerDown(event, { connectionMode, connectionRadius, handleId, node
             // from stays the same
             ...previousConnection,
             isValid,
-            to: closestHandle && isValid
-                ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, transform)
+            to: result.toHandle && isValid
+                ? rendererPointToPoint({ x: result.toHandle.x, y: result.toHandle.y }, transform)
                 : position,
             toHandle: result.toHandle,
             toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],
@@ -7216,7 +7419,7 @@ function isValidHandle(event, { handle, connectionMode, fromNodeId, fromHandleId
                 ? (isTarget && handleType === 'source') || (!isTarget && handleType === 'target')
                 : handleNodeId !== fromNodeId || handleId !== fromHandleId);
         result.isValid = isValid && isValidConnection(connection);
-        result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, false);
+        result.toHandle = getHandle(handleNodeId, handleType, handleId, nodeLookup, connectionMode, true);
     }
     return result;
 }
@@ -9017,11 +9220,12 @@ keyCode = null, options = { target: defaultDoc, actInsideInputWithModifier: true
         return [[], []];
     }, [keyCode]);
     useEffect(() => {
-        const target = options?.target || defaultDoc;
+        const target = options?.target ?? defaultDoc;
+        const actInsideInputWithModifier = options?.actInsideInputWithModifier ?? true;
         if (keyCode !== null) {
             const downHandler = (event) => {
                 modifierPressed.current = event.ctrlKey || event.metaKey || event.shiftKey || event.altKey;
-                const preventAction = (!modifierPressed.current || (modifierPressed.current && !options.actInsideInputWithModifier)) &&
+                const preventAction = (!modifierPressed.current || (modifierPressed.current && !actInsideInputWithModifier)) &&
                     isInputDOMNode(event);
                 if (preventAction) {
                     return false;
@@ -9806,7 +10010,6 @@ function useReactFlow() {
 }
 
 const selected = (item) => item.selected;
-const deleteKeyOptions = { actInsideInputWithModifier: false };
 const win$1 = typeof window !== 'undefined' ? window : undefined;
 /**
  * Hook for handling global key events.
@@ -9816,7 +10019,7 @@ const win$1 = typeof window !== 'undefined' ? window : undefined;
 function useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode, }) {
     const store = useStoreApi();
     const { deleteElements } = useReactFlow();
-    const deleteKeyPressed = useKeyPress(deleteKeyCode, deleteKeyOptions);
+    const deleteKeyPressed = useKeyPress(deleteKeyCode, { actInsideInputWithModifier: false });
     const multiSelectionKeyPressed = useKeyPress(multiSelectionKeyCode, { target: win$1 });
     useEffect(() => {
         if (deleteKeyPressed) {
@@ -13940,9 +14143,9 @@ const Container$d = styled.div `
   gap: 24px;
   padding: 4px;
 `;
-const DataStreamForm = ({ formData, handleFormChange }) => {
+const DataStreamForm = ({ formData, handleFormChange, formErrors }) => {
     return (React.createElement(Container$d, null,
-        React.createElement(Input, { name: 'name', title: DISPLAY_TITLES.STREAM_NAME, required: true, value: formData.name, onChange: ({ target: { value } }) => handleFormChange('name', value) })));
+        React.createElement(Input, { name: 'name', title: DISPLAY_TITLES.STREAM_NAME, placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, value: formData.name, onChange: ({ target: { value } }) => handleFormChange('name', value), errorMessage: formErrors['name'] })));
 };
 
 const FormContainer$3 = styled.div `
@@ -13956,7 +14159,7 @@ const DataStreamDrawer = ({ isOpen, onClose, dataStreamName, updateDataStream })
     const { dataStreams } = useDataStreamStore();
     const drawerRef = useRef(null);
     const [isFormDirty, setIsFormDirty] = useState(false);
-    const { formData, handleFormChange, resetFormData, loadFormWithDrawerItem } = useDataStreamFormData({ name: dataStreamName });
+    const { formData, handleFormChange, formErrors, validateForm, resetFormData, loadFormWithDrawerItem } = useDataStreamFormData({ name: dataStreamName });
     const thisItem = useMemo(() => {
         if (!isOpen)
             return null;
@@ -13977,13 +14180,15 @@ const DataStreamDrawer = ({ isOpen, onClose, dataStreamName, updateDataStream })
         onClose();
     };
     const handleSave = () => {
-        updateDataStream(dataStreamName, formData);
-        setIsFormDirty(false);
-        onClose();
+        if (validateForm({ withAlert: true, alertTitle: Crud.Update })) {
+            updateDataStream(dataStreamName, formData);
+            setIsFormDirty(false);
+            onClose();
+        }
     };
     return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.name, icons: [DataStreamsIcon], hideEditTitleFromEdit: true, isEdit: true, isFormDirty: isFormDirty, onSave: handleSave, onCancel: handleCancel },
         React.createElement(FormContainer$3, null,
-            React.createElement(DataStreamForm, { formData: formData, handleFormChange: memoizedHandleFormChange }))));
+            React.createElement(DataStreamForm, { formData: formData, handleFormChange: memoizedHandleFormChange, formErrors: formErrors }))));
 };
 
 const RelativeContainer$1 = styled.div `
@@ -14023,7 +14228,9 @@ const SelectionRow = styled(FlexRow) `
 const Stretch = styled.div `
   width: 100%;
 `;
-const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataStream }) => {
+const DataStreamSelect = ({ 
+// onClickNewDataStream,
+updateDataStream, deleteDataStream, }) => {
     const theme = Theme.useTheme();
     const { dataStreams, selectedStreamName, setSelectedStreamName } = useDataStreamStore();
     const [popupOpen, setPopupOpen] = useState(false);
@@ -14038,11 +14245,7 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
             React.createElement(SelectionButton, { label: name, isSelected: selectedStreamName === name, onClick: () => {
                     setSelectedStreamName(name);
                     setPopupOpen(false);
-                }, color: 'transparent', style: { width: '100%', justifyContent: 'flex-start' } })),
-        name !== DEFAULT_DATA_STREAM_NAME && (React.createElement(IconButton, { onClick: () => setDeleteOpenForDataStreamName(name), tooltip: BUTTON_TEXTS.DELETE },
-            React.createElement(TrashIcon, null))),
-        React.createElement(IconButton, { onClick: () => setEditOpenForDataStreamName(name), tooltip: BUTTON_TEXTS.EDIT },
-            React.createElement(EditIcon, null))))), [filteredDataStreams, selectedStreamName]);
+                }, color: 'transparent', style: { width: '100%', justifyContent: 'flex-start' } }))))), [filteredDataStreams, selectedStreamName]);
     return (React.createElement(React.Fragment, null,
         React.createElement(RelativeContainer$1, null,
             React.createElement(Container$c, { "$gap": 0 },
@@ -14052,9 +14255,7 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
                         "Data Stream: ",
                         selectedStreamName),
                     React.createElement(ExtendArrow, { extend: popupOpen }),
-                    React.createElement(Badge, { label: dataStreams.length })),
-                React.createElement(Divider, { orientation: 'vertical', length: '32px', thickness: 2, margin: '0' }),
-                React.createElement(AddButton$1, { onClick: onClickNewDataStream, label: BUTTON_TEXTS.NEW })),
+                    React.createElement(Badge, { label: dataStreams.length }))),
             popupOpen && (React.createElement(AbsoluteContainer$1, { ref: containerRef },
                 React.createElement(SelectionMenuHeader, null,
                     React.createElement(Input, { placeholder: 'Search...', icon: SearchIcon, value: searchText, onChange: (e) => setSearchText(e.target.value) })),
@@ -14092,8 +14293,7 @@ const DataFlowActionsMenu = ({ addEntity, onClickNewDataStream, updateDataStream
 };
 
 const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) => {
-    const { dataStreams, selectedStreamName } = useDataStreamStore();
-    const dataStreamOptions = useMemo(() => dataStreams.map(({ name }) => ({ label: name })), [dataStreams]);
+    const { selectedStreamName } = useDataStreamStore();
     const { formData, handleFormChange, formErrors, validateForm } = useDataStreamFormData({ name: selectedStreamName });
     useImperativeHandle(ref, () => ({
         validateForm,
@@ -14103,7 +14303,7 @@ const DataStreamSelectionForm = forwardRef(({ isModal, onClickSummary }, ref) =>
         React.createElement(FlexColumn, { "$gap": 24 },
             onClickSummary && React.createElement(NoteBackToSummary, { onClick: onClickSummary }),
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.NAME_YOUR_STREAM, description: DISPLAY_TITLES.STREAM_DESCRIPTION }),
-            React.createElement(AutocompleteInput, { placeholder: DISPLAY_TITLES.NAME_YOUR_STREAM_PLACEHOLDER, required: true, autoFocus: true, options: dataStreamOptions, defaultText: formData['name'], onTextChange: (v) => handleFormChange('name', v), errorMessage: formErrors['name'] }))));
+            React.createElement(DataStreamForm, { formData: formData, handleFormChange: handleFormChange, formErrors: formErrors }))));
 });
 
 const buildMonitorsList = (exportedSignals) => Object.keys(exportedSignals)
@@ -14116,17 +14316,14 @@ const buildCard$2 = (destination, yamlFields) => {
         { title: DISPLAY_TITLES.TYPE, value: destinationType.type },
         { type: DataCardFieldTypes.Monitors, title: DISPLAY_TITLES.MONITORS, value: buildMonitorsList(exportedSignals) },
     ];
-    const parsedFields = safeJsonParse(fields, {});
-    const sortedParsedFields = yamlFields.map((field) => ({ key: field.name, value: parsedFields[field.name] ?? null })).filter((item) => item.value !== null) ||
-        Object.entries(parsedFields).map(([key, value]) => ({ key, value }));
-    sortedParsedFields.map(({ key, value }) => {
-        const { displayName, secret, componentProperties, hideFromReadData, customReadDataLabels } = yamlFields.find((field) => field.name === key) || {};
-        const shouldHide = !!hideFromReadData?.length
-            ? compareCondition(hideFromReadData, yamlFields.map((field) => ({ name: field.name, value: parsedFields[field.name] ?? null })))
-            : false;
+    const mappedFields = mapDestinationFieldsForDisplay(destination, yamlFields);
+    const mappedFieldsForConditionCompare = mappedFields.map((field) => ({ name: field.key, value: field.value }));
+    mappedFields.map(({ key, name, value }) => {
+        const { secret, componentProperties, hideFromReadData, customReadDataLabels } = yamlFields.find((field) => field.name === key) || {};
+        const shouldHide = !!hideFromReadData?.length ? compareCondition(hideFromReadData, mappedFieldsForConditionCompare) : false;
         if (!shouldHide) {
             const { type } = safeJsonParse(componentProperties, { type: '' });
-            const isSecret = (secret || type === 'password') && !!value.length ? new Array(10).fill('•').join('') : '';
+            const secretPlaceholder = (secret || type === 'password') && !!value.length ? new Array(10).fill('•').join('') : '';
             arr.push({ type: DataCardFieldTypes.Divider });
             if (!!customReadDataLabels?.length) {
                 customReadDataLabels.forEach(({ condition, ...custom }) => {
@@ -14140,8 +14337,8 @@ const buildCard$2 = (destination, yamlFields) => {
             }
             else {
                 arr.push({
-                    title: displayName || key,
-                    value: isSecret || value,
+                    title: name,
+                    value: secretPlaceholder || value,
                 });
             }
         }
@@ -14342,7 +14539,6 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
     const isOpen = drawerType !== EntityTypes.Destination;
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
-    // const [thisItem, setThisItem] = useState<Destination | undefined>(undefined)
     const { formData, formErrors, handleFormChange, resetFormData, validateForm, loadFormWithDrawerItem, yamlFields, setYamlFields, dynamicFields, setDynamicFields } = useDestinationFormData({
     // preLoadedFields: thisItem?.fields,
     // TODO: supportedSignals: thisDestination?.supportedSignals,
@@ -14354,19 +14550,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
         const found = destinationsByStream?.find((x) => x.id === drawerEntityId);
         if (!!found) {
             loadFormWithDrawerItem(found);
-            const fields = [];
-            const parsedCategories = JSON.parse(JSON.stringify(categories));
-            for (const category of parsedCategories) {
-                const autoFilledFields = safeJsonParse(found.fields, {});
-                const idx = category.items.findIndex((item) => item.type === found.destinationType.type);
-                if (idx !== -1) {
-                    fields.push(...category.items[idx].fields.map((field) => ({
-                        ...field,
-                        initialValue: autoFilledFields[field.name],
-                    })));
-                }
-            }
-            setYamlFields(fields);
+            setYamlFields(getYamlFieldsForDestination(categories, found));
         }
         return found;
     }, [isOpen, drawerEntityId, destinationsByStream]);
@@ -14689,21 +14873,21 @@ const Container$7 = styled.div `
   height: fit-content;
   overflow-y: scroll;
 `;
-const DestinationList = ({ withDelete }) => {
+const DestinationList = ({ categories, withDelete }) => {
     const { configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     if (!configuredDestinations.length && !configuredDestinationsUpdateOnly.length) {
         return (React.createElement(CenterThis, null,
             React.createElement(NoDataFound, { title: 'No destinations', subTitle: 'Please add a destination' })));
     }
-    return (React.createElement(Container$7, null, configuredDestinations.concat(configuredDestinationsUpdateOnly).map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, isLastItem: configuredDestinations.length + configuredDestinationsUpdateOnly.length === 1, withDelete: withDelete })))));
+    return (React.createElement(Container$7, null, configuredDestinations.concat(configuredDestinationsUpdateOnly).map((dest, idx) => (React.createElement(ListItem, { key: `configured-destination-${dest.destinationType.type}-${idx}`, "data-id": `configured-destination-${dest.destinationType.type}`, item: dest, yamlFields: getYamlFieldsForDestination(categories, dest), isLastItem: configuredDestinations.length + configuredDestinationsUpdateOnly.length === 1, withDelete: withDelete })))));
 };
-const ListItem = ({ item, isLastItem, withDelete }) => {
+const ListItem = ({ item, yamlFields, isLastItem, withDelete }) => {
     const [deleteWarning, setDeleteWarning] = useState(false);
     const { icon, iconSrc } = getDestinationIcon(item.destinationType.type);
     const { removeConfiguredDestination, removeConfiguredDestinationUpdateOnly } = useSetupStore();
-    const mappedFields = useMemo(() => Object.entries(safeJsonParse(item.fields, {})).map(([k, v]) => ({ title: k, value: v })) || [], [item.fields]);
+    const mappedFields = useMemo(() => mapDestinationFieldsForDisplay(item, yamlFields).map((f) => ({ title: f.name, value: f.value })), [item, yamlFields]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(DataTab, { title: item.destinationType.displayName || item.name, subTitle: item.destinationType.type, iconProps: { icon, iconSrc }, visualProps: {
+        React.createElement(DataTab, { title: item.name || item.destinationType.displayName, subTitle: item.destinationType.type, iconProps: { icon, iconSrc }, visualProps: {
                 monitors: mapExportedSignals(item.exportedSignals),
                 monitorsWithLabels: true,
             }, extendableProps: {
@@ -14751,7 +14935,7 @@ const DestinationSelectionForm = ({ isSourcesListEmpty, goToSources, categories,
                     React.createElement(LargeAndWideAddButton, { variant: 'secondary', onClick: onOpen },
                         React.createElement(PlusIcon$1, null),
                         React.createElement(Text, { color: theme.colors.secondary, size: 14, decoration: 'underline', family: 'secondary' }, DISPLAY_TITLES.ADD_DESTINATION))),
-                React.createElement(DestinationList, { withDelete: true }))),
+                React.createElement(DestinationList, { categories: categories, withDelete: true }))),
         React.createElement(DestinationModal, { isOnboarding: true, categories: categories, potentialDestinations: potentialDestinations, updateDestination: () => { }, createDestination: () => { }, testConnection: testConnection })));
 };
 
@@ -14833,7 +15017,7 @@ const DestinationTable = ({ metrics, maxHeight, maxWidth }) => {
 };
 
 const buildCard$1 = (rule) => {
-    const { type, ruleName, notes, disabled, profileName, payloadCollection, codeAttributes } = rule;
+    const { type, ruleName, notes, disabled, profileName, payloadCollection, codeAttributes, headersCollection } = rule;
     const arr = [
         { title: DISPLAY_TITLES.TYPE, value: type },
         { type: DataCardFieldTypes.ActiveStatus, title: DISPLAY_TITLES.STATUS, value: String(!disabled) },
@@ -14842,20 +15026,25 @@ const buildCard$1 = (rule) => {
         { title: DISPLAY_TITLES.MANAGED_BY_PROFILE, value: profileName },
         { type: DataCardFieldTypes.Divider },
     ];
-    if (!!payloadCollection) {
+    if (payloadCollection) {
         const str = Object.entries(payloadCollection)
-            .filter(([key, val]) => !!val)
+            .filter(([key, val]) => val)
             .map(([key, val]) => key)
             .join(', ');
-        if (!!str)
+        if (str)
             arr.push({ title: 'Collect', value: str });
     }
-    if (!!codeAttributes) {
+    if (codeAttributes) {
         const str = Object.entries(codeAttributes)
-            .filter(([key, val]) => !!val)
+            .filter(([key, val]) => val)
             .map(([key, val]) => key)
             .join(', ');
-        if (!!str)
+        if (str)
+            arr.push({ title: 'Collect', value: str });
+    }
+    if (headersCollection) {
+        const str = (headersCollection[HeadersCollectionKeyTypes.HeaderKeys] || []).filter((val) => val).join(', ');
+        if (str)
             arr.push({ title: 'Collect', value: str });
     }
     return arr;
@@ -15576,7 +15765,7 @@ const SourceList = ({ isModal = false, withInstances = true, filteredNamespacesA
             (isNamespaceSelected || !onSelectNamespace) &&
                 (hasSources ? (React.createElement(RelativeWrapper, { "$addPadding": !onSelectSource },
                     React.createElement(AbsoluteWrapper, null,
-                        React.createElement(Divider, { orientation: 'vertical', length: `${onlyOneSource ? 24 : (sources.length) * 34}px` })),
+                        React.createElement(Divider, { orientation: 'vertical', length: `${onlyOneSource ? 24 : sources.length * 34}px` })),
                     sources.map((source) => {
                         const isSourceSelected = onlySelectedSources.some(({ name }) => name === source.name);
                         return React.createElement(SourceRow, { key: `source-${source.name}`, withInstances: withInstances, source: source, namespace: namespace, isSelected: isSourceSelected, onSelect: onSelectSource });
@@ -15604,19 +15793,20 @@ const Container$3 = styled.div `
   height: fit-content;
   overflow-y: scroll;
 `;
-const SetupSummary = ({ onEditStream, onEditSources, onEditDestinations }) => {
-    const { selectedStreamName } = useDataStreamStore();
+const SetupSummary = ({ 
+// onEditStream,
+onEditSources, onEditDestinations, categories, }) => {
+    // const { selectedStreamName } = useDataStreamStore();
     const { configuredSources, configuredDestinations, configuredDestinationsUpdateOnly } = useSetupStore();
     const sourceCount = useMemo(() => Object.values(configuredSources).reduce((total, sourceList) => total + sourceList.filter((s) => s.selected).length, 0), [configuredSources]);
     return (React.createElement(ModalBody, { "$isNotModal": true },
         React.createElement(FlexColumn, { "$gap": 12 },
             React.createElement(SectionTitle, { title: DISPLAY_TITLES.SUMMARY, description: DISPLAY_TITLES.STREAM_CONFIRM }),
             React.createElement(Container$3, null,
-                React.createElement(DataCard, { title: DISPLAY_TITLES.STREAM_NAME, action: () => React.createElement(EditButton, { onClick: onEditStream }), data: [{ title: '', value: selectedStreamName }] }),
                 React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_SOURCES, titleBadge: sourceCount, action: () => React.createElement(EditButton, { onClick: onEditSources }) },
                     React.createElement(SourceList, { filteredNamespacesAndSources: configuredSources, withInstances: false })),
                 React.createElement(DataCard, { title: DISPLAY_TITLES.SELECTED_DESTINATIONS, titleBadge: configuredDestinations.length + configuredDestinationsUpdateOnly.length, action: () => React.createElement(EditButton, { onClick: onEditDestinations }) },
-                    React.createElement(DestinationList, null))))));
+                    React.createElement(DestinationList, { categories: categories }))))));
 };
 
 var NavIconIds;