@odigos/ui-kit 0.0.87 → 0.0.89

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.0.89](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.88...ui-kit-v0.0.89) (2025-08-21)
+
+
+### Features
+
+* add span durations ([#336](https://github.com/odigos-io/ui-kit/issues/336)) ([29c6be3](https://github.com/odigos-io/ui-kit/commit/29c6be353da5aa8f8789dae7b25aa8c1db9a2b7e))
+* build spans with child/parent relations, initial render of spans ([#334](https://github.com/odigos-io/ui-kit/issues/334)) ([0b3fc46](https://github.com/odigos-io/ui-kit/commit/0b3fc46accde6a9cdece208c7cf958ebd3571051))
+
+## [0.0.88](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.87...ui-kit-v0.0.88) (2025-08-20)
+
+
+### Features
+
+* enhance condition handling for dynamic fields and exported signals in destination forms ([#332](https://github.com/odigos-io/ui-kit/issues/332)) ([9938e0b](https://github.com/odigos-io/ui-kit/commit/9938e0be4f9b42ac62f64630f9fe05b0fd5910af))
+
 ## [0.0.87](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.86...ui-kit-v0.0.87) (2025-08-19)
 
 

package/lib/components.js

@@ -1,16 +1,16 @@
-import { B as Button } from './index-c766be17.js';
-export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-c766be17.js';
-export { C as CancelWarning, D as DeleteWarning } from './index-5dc10442.js';
+import { B as Button } from './index-ff2e118e.js';
+export { A as AutocompleteInput, a as Badge, a9 as CenterThis, C as Checkbox, b as Code, c as ConditionDetails, D as DataCard, e as DataCardFieldTypes, d as DataCardFields, f as DataFinger, g as DataTab, h as DescribeRow, i as Divider, j as DocsButton, k as Drawer, m as DrawerFooter, l as DrawerHeader, n as Dropdown, E as ExtendArrow, F as FadeLoader, o as FieldError, p as FieldLabel, a8 as FlexColumn, a7 as FlexRow, H as Header, I as IconButton, q as IconGroup, r as IconTitleBadge, s as IconWrapped, t as IconsNav, u as ImageControlled, v as Input, w as InputList, x as InputTable, y as InteractiveTable, K as KeyValueInputsList, M as Modal, ac as ModalBody, z as MonitorsCheckboxes, G as MonitorsIcons, N as NavigationButtons, J as NoDataFound, L as NotificationNote, ab as Overlay, P as Popup, O as PopupForm, S as ScrollX, Q as SectionTitle, R as Segment, U as SelectionButton, V as SkeletonLoader, W as Status, X as Stepper, Y as TabList, ad as TableContainer, ae as TableTitleWrap, af as TableWrap, Z as Tag, _ as Text, a2 as TextArea, a3 as Toggle, T as ToggleCodeComponent, a4 as Tooltip, a5 as TraceLoader, aa as VerticalScroll, a6 as WarningModal, $ as getLinksFromText, a0 as getStrongsFromText, a1 as renderText } from './index-ff2e118e.js';
+export { C as CancelWarning, D as DeleteWarning } from './index-ff2ca759.js';
 import React, { createContext, Component, createElement } from 'react';
-import { T as Theme } from './index-86030474.js';
+import { T as Theme } from './index-9436f4a7.js';
 import 'styled-components';
-import './index-72089d6e.js';
+import './index-430be181.js';
 import './types.js';
 import './index-5e5f7bda.js';
-import './index-d87a2c69.js';
-import './index-d30e26c2.js';
+import './index-ddf36942.js';
+import './index-2b6ae9c8.js';
 import 'react-dom';
-import './useTransition-cac1649d.js';
+import './useTransition-0f2cccf3.js';
 
 const ErrorBoundaryContext = createContext(null);
 

package/lib/constants.js

@@ -1,4 +1,4 @@
-export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-86030474.js';
+export { A as ACTION_OPTIONS, B as BUTTON_TEXTS, a as DEFAULT_DATA_STREAM_NAME, D as DISPLAY_LANGUAGES, b as DISPLAY_TITLES, F as FORM_ALERTS, I as INSTRUMENTATION_RULE_OPTIONS, L as LANGUAGE_OPTIONS, M as MONITORS_OPTIONS, S as STORAGE_KEYS } from './index-9436f4a7.js';
 export { D as DESTINATION_CATEGORIES } from './index-1cb4f9e2.js';
 import 'react';
 import './types.js';

package/lib/containers/data-flow-actions-menu/search/search-results/builder.d.ts

@@ -16,7 +16,7 @@ export declare const buildSearchResults: ({ instrumentationRules, sources, actio
         entities: InstrumentationRule[] | Source[] | Action[] | Destination[];
     }[];
     searchResults: {
-        entities: Action[] | Destination[] | Source[] | InstrumentationRule[];
+        entities: Source[] | Action[] | Destination[] | InstrumentationRule[];
         category: Category;
         label: string;
         count: number;

package/lib/containers/destination-form/dynamic-fields/index.d.ts

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
-import { type DestinationDynamicField } from '@/types';
+import { type DestinationDynamicField, SignalType } from '@/types';
 interface DynamicFieldsProps {
+    signals: SignalType[];
     fields: DestinationDynamicField[];
     onChange: (name: string, value: any) => void;
     formErrors: Record<string, string>;

package/lib/containers/index.d.ts

@@ -35,3 +35,4 @@ export * from './system-settings';
 export * from './table-cell-conditions';
 export * from './toast-list';
 export * from './toggle-dark-mode';
+export * from './trace-view';

package/lib/containers/trace-view/build-spans.d.ts

@@ -0,0 +1,2 @@
+import type { Trace, TraceSpan } from '@/types';
+export declare const buildSpans: (trace: Trace) => TraceSpan[];

package/lib/containers/trace-view/index.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import type { Trace } from '@/types';
+interface TraceViewProps {
+    traces: Trace[];
+}
+declare const TraceView: FC<TraceViewProps>;
+export { TraceView, type TraceViewProps };

package/lib/containers/trace-view/span/index.d.ts

@@ -0,0 +1,19 @@
+import React, { type FC } from 'react';
+import type { TraceSpan } from '@/types';
+interface SpanProps {
+    depth: number;
+    isHidden: boolean;
+    isOpen: boolean;
+    onToggleOpen: () => void;
+    withToggle: boolean;
+    span: TraceSpan;
+    maxDuration: number;
+    minStartTime: number;
+    maxEndTime: number;
+}
+declare const Span: FC<SpanProps>;
+declare const renderSpans: (spans: TraceSpan[], depth: number, minStartTime: number, maxEndTime: number, maxDuration: number, openSpanIdsState: {
+    value: string[];
+    set: React.Dispatch<React.SetStateAction<string[]>>;
+}) => React.JSX.Element[];
+export { Span, type SpanProps, renderSpans };

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 getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, k as ImageErrorIcon, a0 as useDarkMode } from './index-86030474.js';
+import { b as DISPLAY_TITLES, T as Theme, V as usePendingStore, W as useNotificationStore, Q as useDrawerStore, B as BUTTON_TEXTS, X as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, O as useModalStore, F as FORM_ALERTS, Y as useFilterStore, e as getInstrumentationRuleIcon, Z as useDataStreamStore, _ as useInstrumentStore, d as getEntityId, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, c as compareCondition, $ as useSetupStore, f as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, a0 as useSelectedStore, l as ImageErrorIcon, a1 as useDarkMode } from './index-9436f4a7.js';
 import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, ProgrammingLanguages, 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, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-c766be17.js';
+import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, a3 as Toggle, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, a2 as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a8 as FlexColumn, M as Modal, N as NavigationButtons, ac as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a7 as FlexRow, a4 as Tooltip, s as IconWrapped, G as MonitorsIcons, ad as TableContainer, ae as TableTitleWrap, r as IconTitleBadge, af as TableWrap, y as InteractiveTable, a9 as CenterThis, J as NoDataFound, a5 as TraceLoader, a as Badge, ag as nodeConfig, ah as useNodesState, ai as useEdgesState, aj as Flow, ak as applyNodeChanges, P as Popup, U as SelectionButton, aa as VerticalScroll, n as Dropdown, B as Button, I as IconButton, E as ExtendArrow, al as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, am as MarkerType, t as IconsNav, an as CopyText, h as DescribeRow, ao as PodContainer, ap as SourceContainer, q as IconGroup, O as PopupForm } from './index-ff2e118e.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo } from './index-d30e26c2.js';
-import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-59b6fb7a.js';
+import { C as CheckCircledIcon, O as OdigosLogo } from './index-2b6ae9c8.js';
+import { C as CrossCircledIcon, O as OdigosLogoText, F as FilterIcon, D as DataStreamsIcon, A as ArrowIcon, R as RefreshLeftArrowIcon, N as NotificationIcon, U as UserIcon, a as OverviewIcon, S as SlackLogo, K as KeyIcon, T as TerminalIcon, G as GearIcon } from './index-75412865.js';
 import { useActionFormData, useSessionStorage, useDataStreamFormData, useDestinationFormData, useClickNotification, useSourceFormData, useSourceSelectionFormData } from './hooks.js';
-import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-cac1649d.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-72089d6e.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-5dc10442.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-d87a2c69.js';
-import { f as filterActions, l as getEntityLabel, k as getEntityIcon, t as sleep, g as formatBytes, i as getContainersIcons, n as getValueForRange, j as getDestinationIcon, e as filterSourcesByStream, d as filterSources, b as filterDestinationsByStream, a as filterDestinations, s as mapDestinationFieldsForDisplay, c as compareCondition, p as getYamlFieldsForDestination, m as getMetricForEntity, o as getWorkloadId, q as hasUnhealthyInstances, h as getContainersInstrumentedCount, r as isOverTime } from './index-8b736e84.js';
+import { u as useKeyDown, a as useContainerSize, b as useClickNode, c as usePopup, d as useOnClickOutside, e as useInstrumentationRuleFormData, f as useTransition, g as useTimeAgo, h as useCopy, i as useGenericForm } from './useTransition-0f2cccf3.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-430be181.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-ff2ca759.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-ddf36942.js';
+import { f as filterActions, k as getEntityLabel, j as getEntityIcon, s as sleep, e as formatBytes, h as getContainersIcons, m as getValueForRange, i as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, r as mapDestinationFieldsForDisplay, o as getYamlFieldsForDestination, l as getMetricForEntity, n as getWorkloadId, p as hasUnhealthyInstances, g as getContainersInstrumentedCount, q as isOverTime } from './index-5fb023f6.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, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-6bb0eb56.js';
+import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-968d01e8.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -502,7 +502,7 @@ const CustomFields$1 = ({ actionType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$h = styled.div `
+const Container$i = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -513,7 +513,7 @@ const FieldTitle$2 = styled(Text) `
 `;
 const ActionForm = ({ isUpdate, action, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$h, null,
+    return (React.createElement(Container$i, null,
         isUpdate && (React.createElement("div", null,
             React.createElement(FieldTitle$2, null, "Status"),
             React.createElement(Segment, { options: [
@@ -1042,7 +1042,7 @@ const ActionTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$g = styled(FlexColumn) `
+const Container$h = styled(FlexColumn) `
   // width: 100vw;
   // height: 100vh;
   gap: 64px;
@@ -1076,7 +1076,7 @@ const AwaitPipeline = () => {
     useEffect(() => {
         awaitPipeline();
     }, []);
-    return (React.createElement(Container$g, null,
+    return (React.createElement(Container$h, null,
         React.createElement(OdigosLogoText, { size: 100 }),
         React.createElement(TraceLoader, { width: 400 }),
         React.createElement(TextWrap, null,
@@ -1612,7 +1612,7 @@ const buildDestinationNodes = ({ loading, entities, positions, unfilteredCount,
     return nodes;
 };
 
-const Container$f = styled.div `
+const Container$g = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -1694,7 +1694,7 @@ const DataFlow = ({ heightToRemove, metrics }) => {
         });
         handleNodesChanged(ruleNodes, EntityTypes.InstrumentationRule);
     }, [instrumentationRules, instrumentationRulesLoading, positions[EntityTypes.InstrumentationRule], containerHeight]);
-    return (React.createElement(Container$f, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$g, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange })));
 };
 
@@ -1958,7 +1958,7 @@ const Filters$1 = () => {
                 React.createElement(ErrorDropdown, { sources: sourcesByStream, value: filters['errors'], onSelect: (val) => setFilters((prev) => ({ ...prev, errors: [...(prev.errors || []), val] })), onDeselect: (val) => setFilters((prev) => ({ ...prev, errors: (prev.errors || []).filter((opt) => opt.id !== val.id) })), disabled: !filters['onlyErrors'], showSearch: true, required: true, isMulti: true })))));
 };
 
-const Container$e = styled.div `
+const Container$f = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -1967,7 +1967,7 @@ const Container$e = styled.div `
 const DataStreamForm = ({ formData, handleFormChange, formErrors }) => {
     const { dataStreams, selectedStreamName } = useDataStreamStore();
     const existingDS = useMemo(() => dataStreams.find((s) => s.name === formData.name && s.name !== selectedStreamName), [dataStreams, formData.name, selectedStreamName]);
-    return (React.createElement(Container$e, null,
+    return (React.createElement(Container$f, null,
         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'] }),
         existingDS && React.createElement(NotificationNote, { type: StatusType.Warning, message: DISPLAY_TITLES.DATA_STREAM_EXISTS_WARNING(selectedStreamName, existingDS.name) })));
 };
@@ -2018,7 +2018,7 @@ const DataStreamDrawer = ({ isOpen, onClose, dataStreamName, updateDataStream })
 const RelativeContainer$1 = styled.div `
   position: relative;
 `;
-const Container$d = styled(FlexRow) `
+const Container$e = styled(FlexRow) `
   border: 1px solid ${({ theme }) => theme.colors.border};
   border-radius: 32px;
 
@@ -2060,7 +2060,7 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
             React.createElement(EditIcon, null))))), [dataStreams, selectedStreamName, searchText]);
     return (React.createElement(React.Fragment, null,
         React.createElement(RelativeContainer$1, null,
-            React.createElement(Container$d, { "$gap": 0 },
+            React.createElement(Container$e, { "$gap": 0 },
                 React.createElement(Button, { variant: 'tertiary', onClick: () => {
                         handlePosition(0, 50);
                         setPopupOpen((prev) => !prev);
@@ -2089,7 +2089,7 @@ const DataStreamSelect = ({ onClickNewDataStream, updateDataStream, deleteDataSt
             }, dataStreamName: editOpenForDataStreamName, updateDataStream: updateDataStream })));
 };
 
-const Container$c = styled.div `
+const Container$d = styled.div `
   display: flex;
   align-items: center;
   margin: 20px 0;
@@ -2102,7 +2102,7 @@ const PushToEnd = styled.div `
 `;
 const DataFlowActionsMenu = ({ addEntity, preventSearchPopup, onClickNewDataStream, updateDataStream, deleteDataStream }) => {
     const { setCurrentModal } = useModalStore();
-    return (React.createElement(Container$c, null,
+    return (React.createElement(Container$d, null,
         React.createElement(DataStreamSelect, { onClickNewDataStream: onClickNewDataStream, updateDataStream: updateDataStream, deleteDataStream: deleteDataStream }),
         React.createElement(Search, { preventPopup: preventSearchPopup }),
         React.createElement(Filters$1, null),
@@ -2140,7 +2140,7 @@ const buildCard$2 = (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;
+        const shouldHide = !!hideFromReadData?.length ? compareCondition(hideFromReadData, mapExportedSignals(exportedSignals), mappedFieldsForConditionCompare) : false;
         if (!shouldHide) {
             const { type } = safeJsonParse(componentProperties, { type: '' });
             const secretPlaceholder = (secret || type === 'password') && !!value.length ? new Array(10).fill('•').join('') : '';
@@ -2166,10 +2166,10 @@ const buildCard$2 = (destination, yamlFields) => {
     return arr;
 };
 
-const DynamicFields = ({ fields, onChange, formErrors }) => {
+const DynamicFields = ({ signals, fields, onChange, formErrors }) => {
     return fields?.map((field) => {
         const { componentType, renderCondition, ...rest } = field;
-        const shouldRender = renderCondition ? compareCondition(renderCondition, fields) : true;
+        const shouldRender = renderCondition ? compareCondition(renderCondition, signals, fields) : true;
         if (!shouldRender)
             return null;
         switch (componentType) {
@@ -2240,7 +2240,7 @@ const TestConnection = ({ destination, validateForm, status, testConnection, onS
         React.createElement(Text, { family: 'secondary', decoration: 'underline', size: 14, color: !!status ? theme.text[status] : undefined }, loading ? 'Checking' : status === StatusType.Success ? 'Connection OK' : status === 'error' ? 'Connection Failed' : 'Test Connection')));
 };
 
-const Container$b = styled(FlexColumn) `
+const Container$c = styled(FlexColumn) `
   align-items: unset;
   padding: 0 4px;
 `;
@@ -2293,7 +2293,7 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         return arr;
     }, [supportedSignals]);
     const selectedMonitors = useMemo(() => {
-        const { logs, metrics, traces } = formData['exportedSignals'] || {};
+        const { logs, metrics, traces } = formData.exportedSignals || {};
         const arr = [];
         if (logs)
             arr.push(SignalType.Logs);
@@ -2302,7 +2302,7 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
         if (traces)
             arr.push(SignalType.Traces);
         return arr;
-    }, [formData]);
+    }, [formData.exportedSignals]);
     const dirtyForm = () => {
         setAutoFilled(false);
         setIsFormDirty(true);
@@ -2332,8 +2332,8 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
             message: testResult?.message || '',
         });
     };
-    return (React.createElement(Container$b, { "$gap": 24 },
-        React.createElement(Container$b, { "$gap": 12 },
+    return (React.createElement(Container$c, { "$gap": 24 },
+        React.createElement(Container$c, { "$gap": 12 },
             React.createElement(SectionTitle, { title: isUpdate ? 'Update destination' : 'Create destination', description: `Connect ${displayName} with Odigos.`, actionButton: testConnectionSupported && (React.createElement(TestConnection, { destination: formData, validateForm: validateForm, status: connection?.type, testConnection: testConnection, onError: onTestConnectionError, onSuccess: onTestConnectionSuccess })) }),
             React.createElement(NotesWrapper, null,
                 testConnectionSupported && connection && React.createElement(NotificationNote, { type: connection.type, title: connection.title, message: connection.message }),
@@ -2352,7 +2352,7 @@ const DestinationForm = ({ isUpdate, categoryItem, formData, formErrors, validat
                 dirtyForm();
                 handleFormChange('name', e.target.value);
             }, errorMessage: formErrors['name'] })),
-        React.createElement(DynamicFields, { fields: dynamicFields, onChange: (name, value) => {
+        React.createElement(DynamicFields, { signals: selectedMonitors, fields: dynamicFields, onChange: (name, value) => {
                 dirtyForm();
                 setDynamicFields((prev) => {
                     const payload = [...prev];
@@ -2471,7 +2471,7 @@ const DestinationsList = ({ items, onSelectNew, onSelectConfigured, isLoadingFor
     });
 };
 
-const Container$a = styled.div `
+const Container$b = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -2497,7 +2497,7 @@ const ListsContainer = styled.div `
     max-height: calc(100vh - 400px);
   }
 `;
-const NoDataFoundWrapper = styled(Container$a) `
+const NoDataFoundWrapper = styled(Container$b) `
   margin-top: 80px;
 `;
 const { MANAGED, SELF_HOSTED, DETECTED, EXISTS } = DESTINATION_CATEGORIES;
@@ -2564,7 +2564,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
     }, [categories, potentialDestinations, destinations, search, selectedCategory, selectedMonitors, selectedStreamName, configuredDestinations, configuredDestinationsUpdateOnly]);
     if (hidden)
         return null;
-    return (React.createElement(Container$a, null,
+    return (React.createElement(Container$b, null,
         React.createElement(SectionTitle, { title: 'Choose destination', description: 'Add backend destination you want to connect with Odigos.' }),
         React.createElement(Filters, null,
             React.createElement(WidthConstraint, null,
@@ -2578,7 +2578,7 @@ const ChooseDestinationBody = ({ hidden, categories, potentialDestinations, onSe
             React.createElement(DestinationsList, { items: filteredDestinations, onSelectNew: (dest) => onSelectNew(dest, selectedMonitors), onSelectConfigured: onSelectConfigured, isLoadingForDestinationIds: isLoadingForDestinationIds })))));
 };
 
-const Container$9 = styled.div `
+const Container$a = styled.div `
   display: flex;
 `;
 const SideMenuWrapper = styled.div `
@@ -2721,7 +2721,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
     };
     useKeyDown({ key: 'Enter', active: isOpen }, () => handleSubmit());
     return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, header: { title: DISPLAY_TITLES.ADD_DESTINATION }, actionComponent: React.createElement(NavigationButtons, { buttons: renderHeaderButtons() }) },
-        React.createElement(Container$9, null,
+        React.createElement(Container$a, null,
             React.createElement(SideMenuWrapper, null,
                 React.createElement(Stepper, { currentStep: selectedItem ? 2 : 1, data: [
                         { stepNumber: 1, title: DISPLAY_TITLES.DESTINATIONS },
@@ -2732,7 +2732,7 @@ const DestinationModal = ({ isOnboarding, categories, potentialDestinations, cre
                 selectedItem && (React.createElement(DestinationForm, { categoryItem: selectedItem, formData: formData, formErrors: formErrors, handleFormChange: handleFormChange, dynamicFields: dynamicFields, setDynamicFields: setDynamicFields, validateForm: validateForm, testConnection: testConnection }))))));
 };
 
-const Container$8 = styled.div `
+const Container$9 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2748,7 +2748,7 @@ const DestinationList = ({ categories, withDelete }) => {
         return (React.createElement(CenterThis, null,
             React.createElement(NoDataFound, { title: 'No destinations', subTitle: 'Please add a destination' })));
     }
-    return (React.createElement(Container$8, 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 })))));
+    return (React.createElement(Container$9, 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, yamlFields, isLastItem, withDelete }) => {
     const [deleteWarning, setDeleteWarning] = useState(false);
@@ -3160,7 +3160,7 @@ const CustomFields = ({ ruleType, value, setValue, formErrors }) => {
     return Component ? React.createElement(Component, { value: value, setValue: setValue, formErrors: formErrors }) : null;
 };
 
-const Container$7 = styled.div `
+const Container$8 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -3171,7 +3171,7 @@ const FieldTitle = styled(Text) `
 `;
 const InstrumentationRuleForm = ({ isUpdate, rule, formData, formErrors, handleFormChange }) => {
     const theme = Theme.useTheme();
-    return (React.createElement(Container$7, null,
+    return (React.createElement(Container$8, null,
         React.createElement(FlexRow, null, rule.supportedLanguages.map((lang) => (React.createElement(Tag, { key: lang, icon: getProgrammingLanguageIcon(lang), type: StatusType.Info }, lang)))),
         isUpdate ? (React.createElement("div", null,
             React.createElement(FieldTitle, null, "Status"),
@@ -3439,7 +3439,7 @@ const InstrumentationRuleTable = ({ maxHeight, maxWidth }) => {
             React.createElement(NoDataFound, null)))));
 };
 
-const Container$6 = styled.div `
+const Container$7 = styled.div `
   position: fixed;
   bottom: 0;
   left: 50%;
@@ -3456,7 +3456,7 @@ const Container$6 = styled.div `
 const MultiSourceControl = ({ totalSourceCount, uninstrumentSources, restartWorkloads }) => {
     const theme = Theme.useTheme();
     const Transition = useTransition({
-        container: Container$6,
+        container: Container$7,
         animateIn: Theme.animations.slide.in['center'],
         animateOut: Theme.animations.slide.out['center'],
     });
@@ -3819,7 +3819,7 @@ const buildMapNodes = ({ sources, serviceMap, containerHeight, containerWidth })
     return nodes;
 };
 
-const Container$5 = styled.div `
+const Container$6 = styled.div `
   width: 100%;
   height: ${({ $heightToRemove }) => `calc(100vh - ${$heightToRemove})`};
   position: relative;
@@ -3877,11 +3877,11 @@ const ServiceMap = ({ heightToRemove, serviceMap }) => {
     useEffect(() => {
         setEdges(buildEdges({ theme, nodes, serviceMap }));
     }, [theme, nodes, serviceMap]);
-    return (React.createElement(Container$5, { ref: containerRef, "$heightToRemove": heightToRemove },
+    return (React.createElement(Container$6, { ref: containerRef, "$heightToRemove": heightToRemove },
         React.createElement(Flow, { nodes: nodes, edges: edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, zoomOnScroll: true })));
 };
 
-const Container$4 = styled.div `
+const Container$5 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -3939,7 +3939,7 @@ const SourceList = ({ isModal = false, withInstances = true, isFetchingEachNames
         return (React.createElement(CenterThis, null, namespacesLoading ? (React.createElement(FadeLoader, null)) : (React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_SOURCES, subTitle: onSelectNamespace ? DISPLAY_TITLES.PLEASE_MAKE_SURE_UNIGNORED_NAMESPACES : DISPLAY_TITLES.PLEASE_ADD_SOURCE }))));
     }
     const NamespaceIcon = getEntityIcon(EntityTypes.Namespace);
-    return (React.createElement(Container$4, { "$isModal": isModal },
+    return (React.createElement(Container$5, { "$isModal": isModal },
         matrix.map(([namespace, sources]) => {
             const sourcesForNamespace = selectedSources?.[namespace] || [];
             const futureAppsForNamespace = selectedFutureApps?.[namespace]?.selected || false;
@@ -3986,7 +3986,7 @@ const SourceRow = ({ withInstances, source, namespace, isSelected, onSelect, })
                     ` • ${source.kind}`)))));
 };
 
-const Container$3 = styled.div `
+const Container$4 = styled.div `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -4003,7 +4003,7 @@ const SetupSummary = ({ onEditStream, onEditSources, onEditDestinations, categor
     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(Container$4, 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 })),
@@ -4109,14 +4109,14 @@ const buildCard = (source) => {
     return arr;
 };
 
-const Container$2 = styled.div `
+const Container$3 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding: 4px;
 `;
 const SourceForm = ({ formData, handleFormChange }) => {
-    return (React.createElement(Container$2, null,
+    return (React.createElement(Container$3, null,
         React.createElement(Input, { name: 'sourceName', title: 'Source name', tooltip: 'This overrides the default service name that runs in your cluster.', placeholder: 'Use a name that overrides the source name', value: formData.otelServiceName, onChange: ({ target: { value } }) => handleFormChange('otelServiceName', value) })));
 };
 
@@ -5091,7 +5091,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
             } })));
 };
 
-const Container$1 = styled.div `
+const Container$2 = styled.div `
   position: fixed;
   bottom: 12px;
   left: 12px;
@@ -5109,7 +5109,7 @@ const ToastList = () => {
         if (asSeen)
             markAsSeen(id);
     };
-    return (React.createElement(Container$1, null, notifications
+    return (React.createElement(Container$2, null, notifications
         .filter(({ dismissed }) => !dismissed)
         .map(({ id, type, title, message, crdType, target }) => (React.createElement(NotificationNote, { key: `toast-${id}`, id: id, type: type, title: title, message: message, action: crdType && target
             ? {
@@ -5125,7 +5125,7 @@ const ToastList = () => {
             : undefined, onClose: () => onClose({ id, asSeen: true }) })))));
 };
 
-const Container = styled.div `
+const Container$1 = styled.div `
   position: relative;
   display: flex;
   align-items: center;
@@ -5162,10 +5162,156 @@ const Svg = ({ path }) => {
 };
 const ToggleDarkMode = () => {
     const { darkMode, setDarkMode } = useDarkMode();
-    return (React.createElement(Container, { onClick: () => setDarkMode(!darkMode) },
+    return (React.createElement(Container$1, { onClick: () => setDarkMode(!darkMode) },
         React.createElement(Svg, { path: 'M14 7.977A4.333 4.333 0 1 1 8.023 2H8a6 6 0 1 0 6 6v-.023Z' }),
         React.createElement(Svg, { path: 'M8 15.333v-.666m-5.185-1.482.471-.471M.666 8h.667m1.482-5.185.471.47M8 1.334V.667m4.714 2.619.471-.471M14.667 8h.666m-2.619 4.714.471.471M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z' }),
         React.createElement(Background, { "$darkMode": darkMode })));
 };
 
-export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ConditionDropdown, DataFlow, DataFlowActionsMenu, DataStreamDrawer, DataStreamForm, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, ServiceMap, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, SystemSettings, TableCellConditions, ToastList, ToggleDarkMode };
+const LEFT_MAX_WIDTH = 370;
+const Container = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 12px 2px;
+`;
+const Left = styled(FlexRow) `
+  align-items: center;
+  gap: 4px;
+  padding-left: ${({ $depth }) => $depth * 16}px;
+  width: calc(${LEFT_MAX_WIDTH}px - ${({ $depth }) => $depth * 16}px);
+  overflow: auto;
+`;
+const Right = styled(FlexRow) `
+  align-items: center;
+  gap: 4px;
+  width: calc(100% - ${LEFT_MAX_WIDTH}px);
+  position: relative;
+`;
+const DurationBar = styled.div `
+  position: absolute;
+  left: ${({ $startTime, $minStartTime, $maxEndTime }) => `${(($startTime - $minStartTime) / ($maxEndTime - $minStartTime)) * 100}%`};
+  width: ${({ $duration, $maxDuration }) => `${($duration / $maxDuration) * 100}%`};
+  height: 12px;
+  border-radius: 32px;
+  background-color: ${({ theme }) => theme.colors.majestic_blue};
+`;
+const Span = ({ depth, isHidden, isOpen, onToggleOpen, withToggle, span, maxDuration, minStartTime, maxEndTime }) => {
+    const theme = Theme.useTheme();
+    if (isHidden)
+        return null;
+    return (React.createElement(Container, null,
+        React.createElement(Left, { "$depth": depth },
+            withToggle ? (React.createElement(IconButton, { onClick: onToggleOpen, size: 24 },
+                React.createElement(ExtendArrow, { extend: isOpen }))) : (React.createElement("div", { style: { width: '24px' } })),
+            React.createElement(Text, null, span.processID),
+            React.createElement(Text, { size: 12, color: theme.text.grey }, span.operationName)),
+        React.createElement(Right, null,
+            React.createElement(DurationBar, { "$duration": span.duration, "$maxDuration": maxDuration, "$startTime": span.startTime, "$minStartTime": minStartTime, "$maxEndTime": maxEndTime }))));
+};
+const getChildSpanIds = (span) => {
+    return span.spans?.map((s) => [s.spanID, ...getChildSpanIds(s)]).flat() ?? [];
+};
+const renderSpans = (spans, depth, minStartTime, maxEndTime, maxDuration, openSpanIdsState) => {
+    if (!minStartTime) {
+        // is equal left: 0%;
+        minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
+    }
+    if (!maxEndTime) {
+        // is equal left: 100%;
+        maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
+    }
+    return spans.map((span) => {
+        const id = span.spanID;
+        const isOpen = openSpanIdsState.value.includes(id);
+        const hasChildSpans = !!(span.spans?.length ?? 0);
+        return (React.createElement(Fragment, { key: id },
+            React.createElement(Span, { depth: depth, isHidden: false, isOpen: isOpen, withToggle: hasChildSpans, onToggleOpen: () => openSpanIdsState.set((prev) => {
+                    const alreadyOpen = prev.some((st) => st === id);
+                    if (alreadyOpen)
+                        return prev.filter((st) => st != id);
+                    return [...prev, id, ...getChildSpanIds(span)];
+                }), span: span, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime }),
+            isOpen && hasChildSpans ? renderSpans(span.spans || [], depth + 1, minStartTime, maxEndTime, maxDuration, openSpanIdsState) : null));
+    });
+};
+
+// This function builds a tree structure of spans from a trace.
+// It does this by first creating a map of all spans for easy lookup.
+// Then, it builds the tree structure by iterating over each span and adding it to the tree.
+// It checks if the span is a root span by checking if it has no references or if it has a CHILD_OF reference that points to a span that exists in the map.
+// If the span is a root span, it adds it to the rootSpans array.
+// If the span is not a root span, it finds the direct parent and adds this span as its child.
+// Finally, it returns the rootSpans array sorted by startTime.
+const buildSpans = (trace) => {
+    const { spans } = trace;
+    // Create a map of all spans for easy lookup
+    const allSpansMap = new Map();
+    // Initialize all spans with empty children arrays
+    spans.forEach((span) => {
+        allSpansMap.set(span.spanID, {
+            ...span,
+            spans: [],
+        });
+    });
+    // Build the tree structure
+    const rootSpans = [];
+    spans.forEach((span) => {
+        const spanWithChildren = allSpansMap.get(span.spanID);
+        // Check if this is a root span
+        let isRootSpan = false;
+        if (!span.references.length) {
+            // No references at all - definitely a root span
+            isRootSpan = true;
+        }
+        else {
+            // Find the CHILD_OF reference
+            const childOfRef = span.references.find((r) => r.refType === 'CHILD_OF');
+            if (!childOfRef || !childOfRef.spanID || !allSpansMap.has(childOfRef.spanID)) {
+                // Either no CHILD_OF reference, empty spanID, or parent doesn't exist in this trace
+                isRootSpan = true;
+            }
+        }
+        if (isRootSpan) {
+            rootSpans.push(spanWithChildren);
+        }
+        else {
+            // Find the direct parent and add this span as its child
+            const childOfRef = span.references.find((r) => r.refType === 'CHILD_OF');
+            if (childOfRef) {
+                const parent = allSpansMap.get(childOfRef.spanID);
+                if (parent) {
+                    // Add this span as a child of its parent
+                    parent.spans = parent.spans || [];
+                    parent.spans.push(spanWithChildren);
+                    parent.spans = parent.spans.sort((a, b) => a.startTime - b.startTime);
+                }
+            }
+        }
+    });
+    return rootSpans.sort((a, b) => a.startTime - b.startTime);
+};
+
+const ContainSpans = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+`;
+const TraceView = ({ traces }) => {
+    const [openSpanIds, setOpenSpanIds] = useState([]);
+    const finalTraces = useMemo(() => {
+        const sorted = traces.sort((a, b) => b.spans[0].startTime - a.spans[0].startTime);
+        const mapped = sorted.map((trace) => ({ ...trace, spans: buildSpans(trace) }));
+        return mapped;
+    }, [traces]);
+    const maxDuration = useMemo(() => {
+        return finalTraces.reduce((max, trace) => {
+            return Math.max(max, trace.spans.reduce((max, span) => max + span.duration, 0));
+        }, 0);
+    }, [finalTraces]);
+    return (React.createElement(ContainSpans, null, finalTraces.map((trace) => renderSpans(trace.spans, 0, 0, 0, maxDuration, {
+        value: openSpanIds,
+        set: setOpenSpanIds,
+    }))));
+};
+
+export { ActionDrawer, ActionForm, ActionModal, ActionTable, AwaitPipeline, ConditionDropdown, DataFlow, DataFlowActionsMenu, DataStreamDrawer, DataStreamForm, DataStreamSelectionForm, DestinationDrawer, DestinationForm, DestinationModal, DestinationSelectionForm, DestinationTable, ErrorDropdown, InstrumentationRuleDrawer, InstrumentationRuleForm, InstrumentationRuleModal, InstrumentationRuleTable, KindDropdown, LanguageDropdown, MonitorDropdown, MultiSourceControl, NamespaceDropdown, NavIconIds, NotificationManager, OverviewDrawer, ServiceMap, SetupSummary, SideNav, SlackInvite, SourceDrawer, SourceForm, SourceModal, SourceSelectionForm, SourceTable, SystemOverview, SystemSettings, TableCellConditions, ToastList, ToggleDarkMode, TraceView };

package/lib/functions/compare-condition/index.d.ts

@@ -1,5 +1,5 @@
-export type Comparison = '===' | '==' | '!==' | '!=' | '>' | '<' | '>=' | '<=';
-export declare const compareCondition: (renderCondition: [string, Comparison, string] | ["true" | "false"], fields: {
+import { SignalType, YamlCompareArr } from '@/types';
+export declare const compareCondition: (renderCondition: YamlCompareArr, signals: SignalType[], fields: {
     name: string;
     value?: string;
 }[]) => boolean;

package/lib/functions.js

@@ -1,15 +1,15 @@
-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-d87a2c69.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 getValueForRange, o as getWorkloadId, p as getYamlFieldsForDestination, q as hasUnhealthyInstances, r as isOverTime, s as mapDestinationFieldsForDisplay, t as sleep } from './index-8b736e84.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-ddf36942.js';
+import { K as K8sLogo } from './index-9436f4a7.js';
+export { c as compareCondition, g as getActionIcon, d as getEntityId, e as getInstrumentationRuleIcon, f as getProgrammingLanguageIcon } from './index-9436f4a7.js';
 export { d as deepClone, i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-import { K as K8sLogo } from './index-86030474.js';
-export { g as getActionIcon, c as getEntityId, d as getInstrumentationRuleIcon, e as getProgrammingLanguageIcon } from './index-86030474.js';
+export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, h as getContainersIcons, g as getContainersInstrumentedCount, i as getDestinationIcon, j as getEntityIcon, k as getEntityLabel, l as getMetricForEntity, m as getValueForRange, n as getWorkloadId, o as getYamlFieldsForDestination, p as hasUnhealthyInstances, q as isOverTime, r as mapDestinationFieldsForDisplay, s as sleep } from './index-5fb023f6.js';
 export { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 import { ProgrammingLanguages, PlatformType, EntityTypes } from './types.js';
 import 'react';
 import 'styled-components';
-import { O as OdigosLogo } from './index-d30e26c2.js';
-import { V as VmLogo } from './index-1b05e560.js';
-import './index-6bb0eb56.js';
+import { O as OdigosLogo } from './index-2b6ae9c8.js';
+import { V as VmLogo } from './index-6344746d.js';
+import './index-968d01e8.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/hooks.js

@@ -1,10 +1,10 @@
+import { W as useNotificationStore, F as FORM_ALERTS, Q as useDrawerStore, X as useEntityStore, Z as useDataStreamStore, $ as useSetupStore } from './index-9436f4a7.js';
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
-import { V as useNotificationStore, F as FORM_ALERTS, O as useDrawerStore, W as useEntityStore, Y as useDataStreamStore, _ as useSetupStore } from './index-86030474.js';
 import { useState, useEffect, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-import { i as useGenericForm } from './useTransition-cac1649d.js';
-export { b as useClickNode, a as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, d as useOnClickOutside, c as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-cac1649d.js';
+import { i as useGenericForm } from './useTransition-0f2cccf3.js';
+export { b as useClickNode, a as useContainerSize, h as useCopy, e as useInstrumentationRuleFormData, u as useKeyDown, d as useOnClickOutside, c as usePopup, g as useTimeAgo, f as useTransition } from './useTransition-0f2cccf3.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 
 const INITIAL$2 = {

package/lib/icons.js

@@ -1,11 +1,11 @@
-import { T as Theme } from './index-86030474.js';
-export { h as AddClusterInfoIcon, n as CPlusPlusLogo, o as CSharpLogo, C as CodeAttributesIcon, l as CustomInstrumentationIcon, i as DeleteAttributeIcon, p as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, k as ImageErrorIcon, J as JavaLogo, K as K8sLogo, f as KafkaLogo, q as MysqlLogo, N as NginxLogo, r as NodejsLogo, m as PayloadCollectionIcon, s as PhpLogo, P as PiiMaskingIcon, t as PostgresLogo, u as PythonLogo, v as RedisLogo, R as RenameAttributeIcon, w as RubyLogo, x as RustLogo, j as SamplerIcon, y as SwiftLogo } from './index-86030474.js';
-export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-d30e26c2.js';
-export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-59b6fb7a.js';
+import { T as Theme } from './index-9436f4a7.js';
+export { i as AddClusterInfoIcon, o as CPlusPlusLogo, p as CSharpLogo, C as CodeAttributesIcon, m as CustomInstrumentationIcon, j as DeleteAttributeIcon, q as DotnetLogo, E as ElixirLogo, G as GoLogo, H as HeadersCollectionIcon, l as ImageErrorIcon, J as JavaLogo, K as K8sLogo, h as KafkaLogo, r as MysqlLogo, N as NginxLogo, s as NodejsLogo, n as PayloadCollectionIcon, t as PhpLogo, P as PiiMaskingIcon, u as PostgresLogo, v as PythonLogo, w as RedisLogo, R as RenameAttributeIcon, x as RubyLogo, y as RustLogo, k as SamplerIcon, z as SwiftLogo } from './index-9436f4a7.js';
+export { C as CheckCircledIcon, E as ErrorTriangleIcon, I as InfoIcon, L as LogsIcon, M as MetricsIcon, O as OdigosLogo, T as TracesIcon, W as WarningTriangleIcon } from './index-2b6ae9c8.js';
+export { A as ArrowIcon, C as CrossCircledIcon, D as DataStreamsIcon, F as FilterIcon, G as GearIcon, K as KeyIcon, N as NotificationIcon, O as OdigosLogoText, a as OverviewIcon, R as RefreshLeftArrowIcon, S as SlackLogo, T as TerminalIcon, U as UserIcon } from './index-75412865.js';
 import React from 'react';
-export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-72089d6e.js';
-export { V as VmLogo } from './index-1b05e560.js';
-export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo } from './index-6bb0eb56.js';
+export { h as CheckIcon, C as CodeIcon, a as CopyIcon, i as CrossIcon, E as EditIcon, b as EditedIcon, c as ExtendArrowIcon, f as EyeClosedIcon, g as EyeOpenIcon, L as ListIcon, M as MinusIcon, N as NoDataIcon, d as NotebookIcon, P as PlusIcon, S as SearchIcon, e as SortArrowsIcon, T as TrashIcon, X as XIcon } from './index-430be181.js';
+export { V as VmLogo } from './index-6344746d.js';
+export { a5 as ActionsIcon, A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, i as AwsCloudwatchLogo, S as AwsS3Logo, a1 as AwsXrayLogo, c as AxiomLogo, d as BetterStackLogo, B as BlobStorageLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, a4 as DestinationsIcon, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, F as GigapipeLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, a2 as NamespacesIcon, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, O as OpenTelemetryLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, R as QuickwitLogo, a6 as RulesIcon, T as SeqLogo, U as SignozLogo, a3 as SourcesIcon, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo } from './index-968d01e8.js';
 import './types.js';
 import 'styled-components';
 

package/lib/{index-d30e26c2.js → index-2b6ae9c8.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-86030474.js';
+import { T as Theme } from './index-9436f4a7.js';
 
 const OdigosLogo = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-72089d6e.js → index-430be181.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-86030474.js';
+import { T as Theme } from './index-9436f4a7.js';
 
 const CodeIcon = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-8b736e84.js → index-5fb023f6.js}

@@ -1,42 +1,10 @@
 import { StatusType, DestinationTypes, EntityTypes } from './types.js';
-import { a as DEFAULT_DATA_STREAM_NAME, e as getProgrammingLanguageIcon, f as KafkaLogo } from './index-86030474.js';
+import { a as DEFAULT_DATA_STREAM_NAME, f as getProgrammingLanguageIcon, h as KafkaLogo } from './index-9436f4a7.js';
 import 'react';
 import 'styled-components';
-import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AxiomLogo, B as BlobStorageLogo, d as BetterStackLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, i as AwsCloudwatchLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, O as OpenTelemetryLogo, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, F as GigapipeLogo, R as QuickwitLogo, S as AwsS3Logo, T as SeqLogo, U as SignozLogo, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo, a1 as AwsXrayLogo, a2 as NamespacesIcon, a3 as SourcesIcon, a4 as DestinationsIcon, a5 as ActionsIcon, a6 as RulesIcon } from './index-6bb0eb56.js';
+import { A as AlaudaLogo, a as AlibabaCloudLogo, b as AppDynamicsLogo, c as AxiomLogo, B as BlobStorageLogo, d as BetterStackLogo, e as BonreeLogo, C as CauselyLogo, f as ChecklyLogo, g as ChronosphereLogo, h as ClickhouseLogo, i as AwsCloudwatchLogo, j as CoralogixLogo, D as Dash0Logo, k as DatadogLogo, O as OpenTelemetryLogo, l as DynatraceLogo, E as ElasticApmLogo, m as ElasticSearchLogo, G as GoogleCloudPlatformLogo, n as GrafanaLogo, o as GreptimeLogo, p as GroundcoverLogo, H as HoneycombLogo, q as HyperDxLogo, I as InstanaLogo, J as JaegerLogo, K as KloudmateLogo, L as Last9Logo, r as LightstepLogo, s as LogzioLogo, t as LokiLogo, u as LumigoLogo, M as MiddlewareLogo, N as NewRelicLogo, v as ObserveLogo, w as OneUptimeLogo, x as OpenObserveLogo, y as OpsVerseLogo, z as OracleLogo, P as PrometheusLogo, Q as QrynLogo, F as GigapipeLogo, R as QuickwitLogo, S as AwsS3Logo, T as SeqLogo, U as SignozLogo, V as SplunkLogo, W as SumoLogicLogo, X as TelemetryHubLogo, Y as TempoLogo, Z as TingyunLogo, _ as TraceloopLogo, $ as UptraceLogo, a0 as VictoriaMetricsLogo, a1 as AwsXrayLogo, a2 as NamespacesIcon, a3 as SourcesIcon, a4 as DestinationsIcon, a5 as ActionsIcon, a6 as RulesIcon } from './index-968d01e8.js';
 import { s as safeJsonParse } from './index-5e5f7bda.js';
 
-const compareCondition = (renderCondition, fields) => {
-    if (!renderCondition || !renderCondition.length)
-        return true;
-    if (renderCondition.length === 1)
-        return renderCondition[0] == 'true';
-    const [key, cond, val] = renderCondition;
-    const field = fields.find((field) => field.name === key);
-    if (!field) {
-        console.warn(`Field with name ${key} not found, condition will be skipped`);
-        return true;
-    }
-    switch (cond) {
-        case '===':
-        case '==':
-            return field.value === val;
-        case '!==':
-        case '!=':
-            return field.value !== val;
-        case '>':
-            return Number(field.value) > Number(val);
-        case '<':
-            return Number(field.value) < Number(val);
-        case '>=':
-            return Number(field.value) >= Number(val);
-        case '<=':
-            return Number(field.value) <= Number(val);
-        default:
-            console.warn(`Invalid condition ${cond}, condition will be skipped`);
-            return true;
-    }
-};
-
 const filterActions = (actions, filters) => {
     let filtered = [...actions];
     if (!!filters.monitors?.length)
@@ -301,4 +269,4 @@ const mapDestinationFieldsForDisplay = (destination, yamlFields) => {
 
 const sleep = async (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
 
-export { filterDestinations as a, filterDestinationsByStream as b, compareCondition as c, filterSources as d, filterSourcesByStream as e, filterActions as f, formatBytes as g, getContainersInstrumentedCount as h, getContainersIcons as i, getDestinationIcon as j, getEntityIcon as k, getEntityLabel as l, getMetricForEntity as m, getValueForRange as n, getWorkloadId as o, getYamlFieldsForDestination as p, hasUnhealthyInstances as q, isOverTime as r, mapDestinationFieldsForDisplay as s, sleep as t };
+export { filterDestinations as a, filterDestinationsByStream as b, filterSources as c, filterSourcesByStream as d, formatBytes as e, filterActions as f, getContainersInstrumentedCount as g, getContainersIcons as h, getDestinationIcon as i, getEntityIcon as j, getEntityLabel as k, getMetricForEntity as l, getValueForRange as m, getWorkloadId as n, getYamlFieldsForDestination as o, hasUnhealthyInstances as p, isOverTime as q, mapDestinationFieldsForDisplay as r, sleep as s };

package/lib/{index-1b05e560.js → index-6344746d.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-86030474.js';
+import { T as Theme } from './index-9436f4a7.js';
 
 const VmLogo = ({ size = 16, fill: f, rotate = 0, onClick, strokeWidth = 1 }) => {
     const theme = Theme.useTheme();

package/lib/{index-59b6fb7a.js → index-75412865.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-86030474.js';
+import { T as Theme } from './index-9436f4a7.js';
 
 const OdigosLogoText = ({ size = 16, fill: f, rotate = 0, onClick }) => {
     const theme = Theme.useTheme();

package/lib/{index-86030474.js → index-9436f4a7.js}

@@ -774,6 +774,53 @@ const MONITORS_OPTIONS = [
     },
 ];
 
+var KeyType;
+(function (KeyType) {
+    KeyType["SIGNALS"] = "SIGNALS";
+})(KeyType || (KeyType = {}));
+const compareCondition = (renderCondition, signals, fields) => {
+    if (!renderCondition || !renderCondition.length)
+        return true;
+    if (renderCondition.length === 1)
+        return renderCondition[0] == 'true';
+    const [key, cond, val] = renderCondition;
+    if (key === KeyType.SIGNALS) {
+        switch (cond) {
+            case 'INCLUDES':
+                return signals?.includes(val);
+            case 'EXCLUDES':
+                return !signals?.includes(val);
+            default:
+                console.warn(`Invalid condition ${cond}, condition will be skipped`);
+                return true;
+        }
+    }
+    const field = fields.find((field) => field.name === key);
+    if (!field) {
+        console.warn(`Field with name ${key} not found, condition will be skipped`);
+        return true;
+    }
+    switch (cond) {
+        case '===':
+        case '==':
+            return field.value === val;
+        case '!==':
+        case '!=':
+            return field.value !== val;
+        case '>':
+            return Number(field.value) > Number(val);
+        case '<':
+            return Number(field.value) < Number(val);
+        case '>=':
+            return Number(field.value) >= Number(val);
+        case '<=':
+            return Number(field.value) <= Number(val);
+        default:
+            console.warn(`Invalid condition ${cond}, condition will be skipped`);
+            return true;
+    }
+};
+
 const getProgrammingLanguageIcon = (language) => {
     const LOGOS = {
         [ProgrammingLanguages.Java]: JavaLogo,
@@ -1915,4 +1962,4 @@ var animations = /*#__PURE__*/Object.freeze({
 
 const Theme = { Provider, useTheme, opacity, animations };
 
-export { useSelectedStore as $, ACTION_OPTIONS as A, BUTTON_TEXTS as B, CodeAttributesIcon as C, DISPLAY_LANGUAGES as D, ElixirLogo as E, FORM_ALERTS as F, GoLogo as G, HeadersCollectionIcon as H, INSTRUMENTATION_RULE_OPTIONS as I, JavaLogo as J, K8sLogo as K, LANGUAGE_OPTIONS as L, MONITORS_OPTIONS as M, NginxLogo as N, useDrawerStore as O, PiiMaskingIcon as P, useActiveNodeStore as Q, RenameAttributeIcon as R, STORAGE_KEYS as S, Theme as T, usePendingStore as U, useNotificationStore as V, useEntityStore as W, useFilterStore as X, useDataStreamStore as Y, useInstrumentStore as Z, useSetupStore as _, DEFAULT_DATA_STREAM_NAME as a, useDarkMode as a0, styleInject as a1, DISPLAY_TITLES as b, getEntityId as c, getInstrumentationRuleIcon as d, getProgrammingLanguageIcon as e, KafkaLogo as f, getActionIcon as g, AddClusterInfoIcon as h, DeleteAttributeIcon as i, SamplerIcon as j, ImageErrorIcon as k, CustomInstrumentationIcon as l, PayloadCollectionIcon as m, CPlusPlusLogo as n, CSharpLogo as o, DotnetLogo as p, MysqlLogo as q, NodejsLogo as r, PhpLogo as s, PostgresLogo as t, PythonLogo as u, RedisLogo as v, RubyLogo as w, RustLogo as x, SwiftLogo as y, useModalStore as z };
+export { useSetupStore as $, ACTION_OPTIONS as A, BUTTON_TEXTS as B, CodeAttributesIcon as C, DISPLAY_LANGUAGES as D, ElixirLogo as E, FORM_ALERTS as F, GoLogo as G, HeadersCollectionIcon as H, INSTRUMENTATION_RULE_OPTIONS as I, JavaLogo as J, K8sLogo as K, LANGUAGE_OPTIONS as L, MONITORS_OPTIONS as M, NginxLogo as N, useModalStore as O, PiiMaskingIcon as P, useDrawerStore as Q, RenameAttributeIcon as R, STORAGE_KEYS as S, Theme as T, useActiveNodeStore as U, usePendingStore as V, useNotificationStore as W, useEntityStore as X, useFilterStore as Y, useDataStreamStore as Z, useInstrumentStore as _, DEFAULT_DATA_STREAM_NAME as a, useSelectedStore as a0, useDarkMode as a1, styleInject as a2, DISPLAY_TITLES as b, compareCondition as c, getEntityId as d, getInstrumentationRuleIcon as e, getProgrammingLanguageIcon as f, getActionIcon as g, KafkaLogo as h, AddClusterInfoIcon as i, DeleteAttributeIcon as j, SamplerIcon as k, ImageErrorIcon as l, CustomInstrumentationIcon as m, PayloadCollectionIcon as n, CPlusPlusLogo as o, CSharpLogo as p, DotnetLogo as q, MysqlLogo as r, NodejsLogo as s, PhpLogo as t, PostgresLogo as u, PythonLogo as v, RedisLogo as w, RubyLogo as x, RustLogo as y, SwiftLogo as z };

package/lib/{index-6bb0eb56.js → index-968d01e8.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { T as Theme } from './index-86030474.js';
+import { T as Theme } from './index-9436f4a7.js';
 
 const AlaudaLogo = ({ size = 16, fill, rotate = 0, onClick }) => {
     return (React.createElement("svg", { width: size, height: size, viewBox: '0 0 43 43', xmlns: 'http://www.w3.org/2000/svg', fill: 'none', style: { transform: `rotate(${rotate}deg)` }, onClick: onClick },

package/lib/{index-d87a2c69.js → index-ddf36942.js}

@@ -1,8 +1,8 @@
 import { StatusType, OtherStatus, SignalType } from './types.js';
 import 'react';
-import './index-86030474.js';
+import './index-9436f4a7.js';
 import 'styled-components';
-import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-d30e26c2.js';
+import { L as LogsIcon, M as MetricsIcon, T as TracesIcon, C as CheckCircledIcon, E as ErrorTriangleIcon, W as WarningTriangleIcon, I as InfoIcon, O as OdigosLogo } from './index-2b6ae9c8.js';
 
 const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1);

package/lib/{index-5dc10442.js → index-ff2ca759.js}

@@ -1,7 +1,7 @@
 import React from 'react';
-import { a6 as WarningModal } from './index-c766be17.js';
+import { a6 as WarningModal } from './index-ff2e118e.js';
 import { StatusType, EntityTypes } from './types.js';
-import './index-86030474.js';
+import './index-9436f4a7.js';
 import 'styled-components';
 
 const CancelWarning = ({ isOpen, noOverlay, name, onApprove, onDeny }) => {

package/lib/{index-c766be17.js → index-ff2e118e.js}

@@ -1,13 +1,13 @@
 import React, { Fragment, useMemo, useState, useEffect, useRef, forwardRef, createElement, useCallback, createContext, memo, useContext, useLayoutEffect } from 'react';
-import { T as Theme, B as BUTTON_TEXTS, k as ImageErrorIcon, M as MONITORS_OPTIONS, a1 as styleInject, U as usePendingStore, $ as useSelectedStore, Z as useInstrumentStore, Q as useActiveNodeStore, V as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, e as getProgrammingLanguageIcon } from './index-86030474.js';
+import { T as Theme, B as BUTTON_TEXTS, l as ImageErrorIcon, M as MONITORS_OPTIONS, a2 as styleInject, V as usePendingStore, a0 as useSelectedStore, _ as useInstrumentStore, U as useActiveNodeStore, W as useNotificationStore, b as DISPLAY_TITLES, L as LANGUAGE_OPTIONS, F as FORM_ALERTS, D as DISPLAY_LANGUAGES, f as getProgrammingLanguageIcon } from './index-9436f4a7.js';
 import styled, { css } from 'styled-components';
-import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-72089d6e.js';
+import { M as MinusIcon$1, h as CheckIcon, L as ListIcon, C as CodeIcon, c as ExtendArrowIcon, P as PlusIcon$1, a as CopyIcon, E as EditIcon, b as EditedIcon, e as SortArrowsIcon, d as NotebookIcon, X as XIcon, f as EyeClosedIcon, g as EyeOpenIcon, N as NoDataIcon, i as CrossIcon, S as SearchIcon, T as TrashIcon } from './index-430be181.js';
 import { StatusType, OtherStatus, EntityTypes, NodeTypes, AddNodeTypes, EdgeTypes, ProgrammingLanguages, IntrumentationStatus, SortDirection, InputTypes, FieldTypes } from './types.js';
 import { s as safeJsonParse, i as isEmpty } from './index-5e5f7bda.js';
-import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-d87a2c69.js';
+import { b as getStatusIcon, r as removeEmptyValuesFromObject, s as safeJsonStringify, f as flattenObjectKeys, m as mapConditions, g as getConditionsBooleans, c as capitalizeFirstLetter, a as getMonitorIcon, i as isStringABoolean, p as parseBooleanFromString, d as isValidVersion, h as splitCamelString, e as parseJsonStringToPrettyString, n as numbersOnly } from './index-ddf36942.js';
 import ReactDOM, { createPortal } from 'react-dom';
-import { c as usePopup, h as useCopy, b as useClickNode, i as useGenericForm, a as useContainerSize, f as useTransition, u as useKeyDown, d as useOnClickOutside } from './useTransition-cac1649d.js';
-import { I as InfoIcon } from './index-d30e26c2.js';
+import { c as usePopup, h as useCopy, b as useClickNode, i as useGenericForm, a as useContainerSize, f as useTransition, u as useKeyDown, d as useOnClickOutside } from './useTransition-0f2cccf3.js';
+import { I as InfoIcon } from './index-2b6ae9c8.js';
 
 const TextWrapper$2 = styled.div `
   color: ${({ $color, theme }) => $color || theme.text.secondary};

package/lib/mock-data/index.d.ts

@@ -8,3 +8,4 @@ export * from './namespaces';
 export * from './service-map';
 export * from './sources';
 export * from './tokens';
+export * from './traces';

package/lib/mock-data/traces/index.d.ts

@@ -0,0 +1,2 @@
+import type { Trace } from '@/types';
+export declare const MOCK_TRACES: Trace[];

package/lib/snippets.js

@@ -1,15 +1,15 @@
-import { B as Button, _ as Text, L as NotificationNote } from './index-c766be17.js';
-export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-c766be17.js';
+import { B as Button, _ as Text, L as NotificationNote } from './index-ff2e118e.js';
+export { al as AddButton, aq as AddNode, ar as BaseNode, an as CopyText, as as EdgedNode, aj as Flow, at as FrameNode, au as HeaderNode, az as LabeledEdge, av as MapItemNode, aw as NoDataNode, ao as PodContainer, ax as ScrollNode, ay as SkeletonNode, ap as SourceContainer, ag as nodeConfig } from './index-ff2e118e.js';
 import React from 'react';
-import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-86030474.js';
-import { E as EditIcon } from './index-72089d6e.js';
+import { T as Theme, B as BUTTON_TEXTS, b as DISPLAY_TITLES } from './index-9436f4a7.js';
+import { E as EditIcon } from './index-430be181.js';
 import { StatusType } from './types.js';
 import 'styled-components';
-import { I as InfoIcon } from './index-d30e26c2.js';
+import { I as InfoIcon } from './index-2b6ae9c8.js';
 import './index-5e5f7bda.js';
-import './index-d87a2c69.js';
+import './index-ddf36942.js';
 import 'react-dom';
-import './useTransition-cac1649d.js';
+import './useTransition-0f2cccf3.js';
 
 const EditButton = ({ label, onClick, variant = 'tertiary', ...props }) => {
     const theme = Theme.useTheme();

package/lib/store.js

@@ -1,4 +1,4 @@
-export { Q as useActiveNodeStore, a0 as useDarkMode, Y as useDataStreamStore, O as useDrawerStore, W as useEntityStore, X as useFilterStore, Z as useInstrumentStore, z as useModalStore, V as useNotificationStore, U as usePendingStore, $ as useSelectedStore, _ as useSetupStore } from './index-86030474.js';
+export { U as useActiveNodeStore, a1 as useDarkMode, Z as useDataStreamStore, Q as useDrawerStore, X as useEntityStore, Y as useFilterStore, _ as useInstrumentStore, O as useModalStore, W as useNotificationStore, V as usePendingStore, a0 as useSelectedStore, $ as useSetupStore } from './index-9436f4a7.js';
 import 'react';
 import './types.js';
 import 'styled-components';

package/lib/theme.js

@@ -1,4 +1,4 @@
-export { T as default } from './index-86030474.js';
+export { T as default } from './index-9436f4a7.js';
 import 'styled-components';
 import 'react';
 import './types.js';

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

@@ -1,4 +1,3 @@
-import type { Comparison } from '@/functions';
 import type { DropdownProps } from '@/components';
 import { type Condition, FieldTypes, SVG } from '../common';
 export declare enum DestinationTypes {
@@ -95,7 +94,9 @@ export interface Destination {
         };
     };
 }
-type YamlCompareArr = [string, Comparison, string] | ['true' | 'false'];
+export type ComparisonStrings = '===' | '==' | '!==' | '!=' | '>' | '<' | '>=' | '<=';
+export type ComparisonArrays = 'INCLUDES' | 'EXCLUDES';
+export type YamlCompareArr = [string | 'SIGNALS', ComparisonStrings | ComparisonArrays, string] | ['true' | 'false'];
 export interface DestinationYamlProperties {
     name: string;
     componentType: FieldTypes;
@@ -155,4 +156,3 @@ export interface TestConnectionResponse {
     destinationType?: DestinationTypes;
 }
 export type TestConnectionFunc = (payload: DestinationFormData) => Promise<TestConnectionResponse | undefined>;
-export {};

package/lib/types/index.d.ts

@@ -13,3 +13,4 @@ export * from './service-map';
 export * from './signals';
 export * from './sources';
 export * from './tokens';
+export * from './traces';

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

@@ -0,0 +1,38 @@
+interface TraceTag {
+    key: string;
+    type: string;
+    value: string;
+}
+interface TraceReference {
+    refType: string;
+    traceID: string;
+    spanID: string;
+}
+interface TraceLog {
+    timestamp: number;
+    fields: TraceTag[];
+}
+export interface TraceSpan {
+    traceID: string;
+    spanID: string;
+    operationName: string;
+    references: TraceReference[];
+    startTime: number;
+    duration: number;
+    tags: TraceTag[];
+    logs: TraceLog[];
+    processID: string;
+    warnings: string;
+    spans?: TraceSpan[];
+}
+interface TraceProcess {
+    serviceName: string;
+    tags: TraceTag[];
+}
+export interface Trace {
+    traceID: string;
+    spans: TraceSpan[];
+    processes: TraceProcess[];
+    warnings: string;
+}
+export {};

package/lib/{useTransition-cac1649d.js → useTransition-0f2cccf3.js}

@@ -1,4 +1,4 @@
-import { z as useModalStore, O as useDrawerStore, Q as useActiveNodeStore } from './index-86030474.js';
+import { O as useModalStore, Q as useDrawerStore, U as useActiveNodeStore } from './index-9436f4a7.js';
 import { AddNodeTypes, EntityTypes, PayloadCollectionKeyTypes, CodeAttributesKeyTypes, CustomInstrumentationsKeyTypes } from './types.js';
 import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
 import styled from 'styled-components';

package/package.json

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