@odigos/ui-kit 0.0.95 → 0.0.98

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, 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-40dfa720.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-89edd01d.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, S as ScrollX } from './index-c529b896.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, T as ToggleCodeComponent, S as ScrollX } from './index-c8b542d8.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
-import { C as CheckCircledIcon, O as OdigosLogo, E as ErrorTriangleIcon } from './index-eff01b3d.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-a53852b3.js';
+import { C as CheckCircledIcon, O as OdigosLogo, W as WarningTriangleIcon, E as ErrorTriangleIcon } from './index-f18c8530.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, b as TraceViewIcon } from './index-77cf7846.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-2df374a9.js';
-import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-1bc2b507.js';
-import { D as DeleteWarning, C as CancelWarning } from './index-9a7beddb.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-d92ef50b.js';
-import { f as filterActions, l as getEntityLabel, k as getEntityIcon, u as sleep, e as formatBytes, i as getContainersIcons, o as getValueForRange, j as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, t as mapDestinationFieldsForDisplay, q as getYamlFieldsForDestination, m as getMetricForEntity, p as getWorkloadId, r as hasUnhealthyInstances, h as getContainersInstrumentedCount, s as isOverTime, n as getRecursiveValues, g as formatDuration } from './index-bf427e64.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-159c9af8.js';
+import { E as EditIcon, T as TrashIcon, S as SearchIcon, h as CheckIcon, P as PlusIcon, a as CopyIcon } from './index-d8fb5fed.js';
+import { D as DeleteWarning, C as CancelWarning } from './index-a3c0cecd.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-9475009f.js';
+import { f as filterActions, l as getEntityLabel, k as getEntityIcon, u as sleep, e as formatBytes, i as getContainersIcons, o as getValueForRange, j as getDestinationIcon, d as filterSourcesByStream, c as filterSources, b as filterDestinationsByStream, a as filterDestinations, t as mapDestinationFieldsForDisplay, q as getYamlFieldsForDestination, m as getMetricForEntity, p as getWorkloadId, r as hasUnhealthyInstances, h as getContainersInstrumentedCount, s as isOverTime, g as formatDuration, n as getRecursiveValues } from './index-c823fbfb.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-b0883db6.js';
+import { a6 as RulesIcon, a3 as SourcesIcon, a5 as ActionsIcon, a4 as DestinationsIcon } from './index-195415d4.js';
 import 'react-dom';
 
 const buildCard$3 = (action) => {
@@ -677,7 +677,7 @@ const FormContainer$4 = styled.div `
   overflow: overlay;
   overflow-y: auto;
 `;
-const DataContainer$4 = styled.div `
+const DataContainer$5 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -732,7 +732,7 @@ const ActionDrawer = ({ updateAction, deleteAction }) => {
         React.createElement(ActionForm, { isUpdate: true, action: thisOptionType, formData: formData, formErrors: formErrors, handleFormChange: (...params) => {
                 setIsFormDirty(true);
                 handleFormChange(...params);
-            } }))) : (React.createElement(DataContainer$4, null,
+            } }))) : (React.createElement(DataContainer$5, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.ACTION_DETAILS, data: !!thisItem ? buildCard$3(thisItem) : [] })))));
 };
@@ -2373,7 +2373,7 @@ const FormContainer$2 = styled.div `
   overflow: overlay;
   overflow-y: auto;
 `;
-const DataContainer$3 = styled.div `
+const DataContainer$4 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -2438,7 +2438,7 @@ const DestinationDrawer = ({ categories, updateDestination, deleteDestination, t
             }, dynamicFields: dynamicFields, setDynamicFields: (...params) => {
                 setIsFormDirty(true);
                 setDynamicFields(...params);
-            }, validateForm: validateForm, testConnection: testConnection }))) : (React.createElement(DataContainer$3, null,
+            }, validateForm: validateForm, testConnection: testConnection }))) : (React.createElement(DataContainer$4, null,
         thisItem.conditions?.length ? React.createElement(ConditionDetails, { conditions: thisItem.conditions }) : null,
         React.createElement(DataCard, { title: DISPLAY_TITLES.DESTINATION_DETAILS, data: !!thisItem ? buildCard$2(thisItem, yamlFields) : [] })))));
 };
@@ -4250,7 +4250,7 @@ const FormContainer = styled.div `
   overflow: overlay;
   overflow-y: auto;
 `;
-const DataContainer$2 = styled.div `
+const DataContainer$3 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -4359,7 +4359,7 @@ const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSou
                 setIsFormDirty(true);
                 handleFormChange(...params);
                 handleFormChange('currentStreamName', selectedStreamName);
-            } }))) : (React.createElement(DataContainer$2, null,
+            } }))) : (React.createElement(DataContainer$3, null,
         React.createElement(ConditionDetails, { conditions: thisItem.conditions || [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.SOURCE_DETAILS, data: !!thisItem ? buildCard(thisItem) : [] }),
         React.createElement(DataCard, { title: DISPLAY_TITLES.DETECTED_CONTAINERS, titleBadge: containersData.isLoading ? OtherStatus.Loading : containersData.containers.length, description: containersData.description || DISPLAY_TITLES.DETECTED_CONTAINERS_DESCRIPTION }, containersData.containers.map((container) => (React.createElement(SourceContainer, { key: `source-container-${container.containerName}`, ...container, callbackRuntimeOverride: async (payload) => await updateSource(drawerEntityId, payload) }))))))) : selectedTab === Tabs.Pods ? (React.createElement(Describe$1, { source: thisItem, fetchSourceDescribe: fetchSourceDescribe })) : (React.createElement(Libraries, { source: thisItem, fetchSourceLibraries: fetchSourceLibraries }))));
@@ -4372,7 +4372,7 @@ const SearchWrapper = styled.div `
 const SourceSelectionForm = forwardRef(({ isModal, fetchSingleNamespace, onClickSummary }, ref) => {
     const theme = Theme.useTheme();
     const formState = useSourceSelectionFormData({ fetchSingleNamespace });
-    const { availableSources, selectedSources, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, searchBy, setSearchBy, showSelectedOnly, setShowSelectedOnly, showRunningOnly, setShowRunningOnly, } = formState;
+    const { availableSources, selectedSources, isFetchingEachNamespace, selectedAllNamespaces, onSelectAllNamespaces, getApiSourcesPayload, getApiFutureAppsPayload, searchText, setSearchText, searchBy, setSearchBy, showSelectedOnly, setShowSelectedOnly, showRunningOnly, setShowRunningOnly, } = formState;
     useImperativeHandle(ref, () => ({
         getFormValues: () => ({
             initial: availableSources,
@@ -4394,6 +4394,7 @@ const SourceSelectionForm = forwardRef(({ isModal, fetchSingleNamespace, onClick
                             { label: DISPLAY_TITLES.NAMESPACE, value: EntityTypes.Namespace, selectedBgColor: theme.text.secondary, selectedTextColor: theme.text.primary },
                         ], selected: searchBy, setSelected: setSearchBy })),
                 React.createElement(FlexRow, { "$gap": 36 },
+                    React.createElement(Toggle, { title: DISPLAY_TITLES.SELECT_ALL, initialValue: selectedAllNamespaces, onChange: onSelectAllNamespaces, disabled: isFetchingEachNamespace }),
                     React.createElement(Toggle, { title: DISPLAY_TITLES.ONLY_SELECTED, initialValue: showSelectedOnly, onChange: setShowSelectedOnly }),
                     React.createElement(Toggle, { title: DISPLAY_TITLES.ONLY_RUNNING_INSTANCES, initialValue: showRunningOnly, onChange: setShowRunningOnly }))),
             React.createElement(Divider, null),
@@ -4416,6 +4417,8 @@ const SourceModal = ({ fetchSingleNamespace, persistSources }) => {
     };
     const formRef = useRef(null);
     useKeyDown({ key: 'Enter', active: isOpen }, handleSubmit);
+    if (!isOpen)
+        return null;
     return (React.createElement(Modal, { isOpen: isOpen, onClose: handleClose, header: { title: 'Add Source' }, actionComponent: React.createElement(NavigationButtons, { buttons: [
                 {
                     label: 'DONE',
@@ -4569,16 +4572,16 @@ const SourceTable = ({ metrics, maxHeight, maxWidth }) => {
     return (React.createElement(TableContainer, { "$maxWidth": maxWidth },
         React.createElement(TableTitleWrap, null,
             React.createElement(Checkbox, { partiallyChecked: hasSelected && filtered?.length !== totalSelectedSources, value: hasSelected && filtered?.length === totalSelectedSources, onChange: onSelectAll, disabled: !filtered?.length }),
-            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.SOURCES, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading && !isAwaitingInstrumentation })),
+            React.createElement(IconTitleBadge, { icon: getEntityIcon(EntityTypes.Source), title: DISPLAY_TITLES.SOURCES, badge: badge, badgeTooltip: badgeTooltip, loading: sourcesLoading || isAwaitingInstrumentation })),
         React.createElement(TableWrap, { "$maxHeight": maxHeight },
-            React.createElement(InteractiveTable, { columns: columns, rows: isAwaitingInstrumentation ? [] : rows })),
-        isAwaitingInstrumentation ? (React.createElement(CenterThis, { style: { marginTop: '2rem', gap: '24px' } },
+            React.createElement(InteractiveTable, { columns: columns, rows: rows })),
+        isAwaitingInstrumentation && !rows.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem', gap: '24px' } },
             React.createElement(TraceLoader, { width: 420 }),
             React.createElement(FlexRow, { "$gap": 16 },
                 React.createElement(Text, { color: theme.text.info },
                     !!sourcesToCreate ? 'Instrumenting' : 'Uninstrumenting',
                     " workloads..."),
-                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !filtered.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
+                React.createElement(Badge, { label: `${instrumentingPercent}%` })))) : !rows.length ? (React.createElement(CenterThis, { style: { marginTop: '2rem' } },
             React.createElement(NoDataFound, null))) : null));
 };
 
@@ -4690,12 +4693,12 @@ const Describe = ({ fetchDescribeOdigos }) => {
         React.createElement(DataCard, { title: 'Node Collector', withExtend: true }, Object.values(describe?.nodeCollector || {}).map(mapObjectToCardChildren))));
 };
 
-const DataContainer$1 = styled.div `
+const DataContainer$2 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
 `;
-const DRAWER_WIDTH$1 = '750px';
+const DRAWER_WIDTH$2 = '750px';
 const TITLE_TEXT$1 = 'System Overview';
 const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -4703,13 +4706,13 @@ const SystemOverview = ({ tokens, saveToken, fetchDescribeOdigos }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { key: TITLE_TEXT$1, onClick: toggleOpen, tooltip: TITLE_TEXT$1 },
             React.createElement(TerminalIcon, { size: 18 })),
-        React.createElement(Drawer, { width: DRAWER_WIDTH$1, isOpen: isOpen, onClose: toggleOpen, header: {
+        React.createElement(Drawer, { width: DRAWER_WIDTH$2, isOpen: isOpen, onClose: toggleOpen, header: {
                 icons: [TerminalIcon],
                 title: TITLE_TEXT$1,
             }, footer: {
                 isOpen: false,
             } },
-            React.createElement(DataContainer$1, null,
+            React.createElement(DataContainer$2, null,
                 !!tokens?.length && React.createElement(Tokens, { tokens: tokens, saveToken: saveToken }),
                 React.createElement(Describe, { fetchDescribeOdigos: fetchDescribeOdigos })))));
 };
@@ -4952,7 +4955,7 @@ const CollectorGatewaySettings = forwardRef(({ isAdvanced, formData, handleFormC
 });
 CollectorGatewaySettings.displayName = CollectorGatewaySettings.name;
 
-const DataContainer = styled.div `
+const DataContainer$1 = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
@@ -4962,7 +4965,7 @@ const DataContainer = styled.div `
 const Relative = styled.div `
   position: relative;
 `;
-const DRAWER_WIDTH = '750px';
+const DRAWER_WIDTH$1 = '750px';
 const TITLE_TEXT = 'System Settings';
 const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     const [settings, setSettings] = useState(undefined);
@@ -5048,7 +5051,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { key: TITLE_TEXT, onClick: toggleOpen, tooltip: TITLE_TEXT },
             React.createElement(GearIcon, { size: 18 })),
-        React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: isOpen, onClose: () => handleWithCancelWarning(toggleOpen), header: {
+        React.createElement(Drawer, { width: DRAWER_WIDTH$1, isOpen: isOpen, onClose: () => handleWithCancelWarning(toggleOpen), header: {
                 icons: [GearIcon],
                 title: TITLE_TEXT,
                 tabs: tabsArray.map((tab) => ({
@@ -5079,7 +5082,7 @@ const SystemSettings = ({ installationMethod, fetchSettings, onSave }) => {
                         children: BUTTON_TEXTS.SAVE,
                     },
                 ],
-            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer, { ref: scrollContainerRef },
+            } }, formData?.imagePrefix !== undefined && !isSaving ? (React.createElement(DataContainer$1, { ref: scrollContainerRef },
             installationMethod === InstallationMethod.Helm && React.createElement(NotificationNote, { type: StatusType.Warning, title: 'Helm', message: "Changes won't persist unless you update the `values.yaml` file" }),
             React.createElement(GeneralSettings, { ref: generalRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
             React.createElement(UiSettings, { ref: uiRef, isAdvanced: isAdvanced, formData: formData, handleFormChange: handleFormChange }),
@@ -5228,6 +5231,100 @@ const buildSpans = (trace) => {
     return rootSpans.sort((a, b) => a.startTime - b.startTime);
 };
 
+const buildTagsCard = (span, isPrettyMode) => {
+    const { tags } = span;
+    const jsonTags = {};
+    const arr = [];
+    tags.forEach((tag) => {
+        jsonTags[tag.key] = tag.value;
+    });
+    arr.push({
+        type: DataCardFieldTypes.Code,
+        value: {
+            language: 'json',
+            code: JSON.stringify(jsonTags, null, 2),
+            pretty: isPrettyMode,
+        },
+    });
+    return arr;
+};
+
+const buildLogsCard = (span) => {
+    const { logs } = span;
+    const arr = [];
+    logs.forEach((log, i) => {
+        log.fields.forEach((field) => {
+            arr.push({
+                title: field.key,
+                value: field.value,
+            });
+        });
+        if (i !== logs.length - 1) {
+            arr.push({ type: DataCardFieldTypes.Divider });
+        }
+    });
+    return arr;
+};
+
+const buildDetailsCard = (span) => {
+    const { traceID, spanID, processID, operationName, duration, startTime, warnings } = span;
+    const arr = [];
+    arr.push({ type: DataCardFieldTypes.CopyText, title: 'Trace ID', value: traceID });
+    arr.push({ type: DataCardFieldTypes.CopyText, title: 'Span ID', value: spanID });
+    arr.push({ type: DataCardFieldTypes.Divider });
+    arr.push({ title: 'Service', value: processID });
+    arr.push({ title: 'Operation', value: operationName });
+    arr.push({ title: 'Duration', value: formatDuration(duration) });
+    arr.push({ title: 'Start time', value: new Date(startTime / 1000).toLocaleString() });
+    if (warnings.length) {
+        arr.push({ type: DataCardFieldTypes.Divider });
+        arr.push({ title: 'Warnings', titleIcon: WarningTriangleIcon, value: warnings });
+    }
+    return arr;
+};
+
+const buildProcessCard = (process, isPrettyMode) => {
+    const { tags } = process;
+    const jsonTags = {};
+    const arr = [];
+    tags.forEach((tag) => {
+        jsonTags[tag.key] = tag.value;
+    });
+    arr.push({
+        type: DataCardFieldTypes.Code,
+        value: {
+            language: 'json',
+            code: JSON.stringify(jsonTags, null, 2),
+            pretty: isPrettyMode,
+        },
+    });
+    return arr;
+};
+
+const DataContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-height: 100vh;
+  overflow-y: auto;
+`;
+const DRAWER_WIDTH = '750px';
+const SpanDrawer = ({ span, process, onClose }) => {
+    const [isTagsCodePretty, setIsTagsCodePretty] = useState(true);
+    const [isProcessCodePretty, setIsProcessCodePretty] = useState(true);
+    return (React.createElement(Drawer, { width: DRAWER_WIDTH, isOpen: true, onClose: onClose, header: {
+            icons: [TraceViewIcon],
+            title: span.operationName,
+        }, footer: {
+            isOpen: false,
+        } },
+        React.createElement(DataContainer, null,
+            React.createElement(DataCard, { title: 'Details', data: buildDetailsCard(span) }),
+            span.logs.length > 0 && React.createElement(DataCard, { title: 'Errors', titleBadge: span.logs.length, titleIcon: ErrorTriangleIcon, data: buildLogsCard(span) }),
+            React.createElement(DataCard, { title: 'Tags', data: buildTagsCard(span, isTagsCodePretty), action: React.createElement(ToggleCodeComponent, { isPrettyMode: isTagsCodePretty, setIsPrettyMode: setIsTagsCodePretty }) }),
+            process && (React.createElement(DataCard, { title: `Process (${process.serviceName})`, data: buildProcessCard(process, isProcessCodePretty), action: React.createElement(ToggleCodeComponent, { isPrettyMode: isProcessCodePretty, setIsPrettyMode: setIsProcessCodePretty }) })))));
+};
+
 const LEFT_MAX_WIDTH = 370;
 const DURATION_COLORS = ['#33DCA7', '#50F6E8', '#444AD9', '#8B55FF', '#FF7CA9'].reverse();
 const Container$1 = styled.div `
@@ -5235,6 +5332,10 @@ const Container$1 = styled.div `
   align-items: center;
   width: ${LEFT_MAX_WIDTH}px;
   background-color: ${({ $withErrors, theme }) => ($withErrors ? theme.colors.error + Theme.opacity.hex['042'] : theme.colors.dark_grey)};
+  &:hover {
+    ${({ $withErrors, $preventHover, theme }) => !$preventHover && `background-color: ${$withErrors ? theme.colors.error : theme.colors.secondary + Theme.opacity.hex['010']};`}
+    cursor: ${({ $preventHover }) => ($preventHover ? 'default' : 'pointer')};
+  }
 `;
 const Left = styled(FlexRow) `
   align-items: center;
@@ -5266,8 +5367,9 @@ const DurationText = styled(Text) `
   font-family: ${({ theme }) => theme.font_family.secondary};
   white-space: nowrap;
 `;
-const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen }) => {
+const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, withErrors, errorTooltip, isOpen, withToggle, onToggleOpen, onSelect }) => {
     const theme = Theme.useTheme();
+    const [isButtonHovered, setIsButtonHovered] = useState(false);
     const textMaxWidth = LEFT_MAX_WIDTH -
         // 12px times depth is the left padding, 12px is the right padding
         12 * depth -
@@ -5276,11 +5378,15 @@ const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTim
         // 16px is the width of the error icon, 4px is the gap between the text and the error icon
         (withErrors ? 16 - 4 : 0);
     const withErrorIcon = withErrors && (depth === 1 || span.logs.length > 0);
-    return (React.createElement(Container$1, { className: 'span-container', "$withErrors": withErrors },
+    return (React.createElement(Container$1, { className: 'span-container', "$withErrors": withErrors, "$preventHover": isButtonHovered, onClick: onSelect },
         React.createElement(Left, { "$depth": depth, className: 'span-left' },
             React.createElement(FlexRow, { "$gap": 4, "$alignItems": 'center' },
-                withToggle ? (React.createElement(IconButton, { onClick: onToggleOpen, size: 24 },
-                    React.createElement(ExtendArrow, { extend: isOpen ?? false }))) : (React.createElement("div", { style: { width: '24px' } })),
+                withToggle ? (React.createElement("div", { onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false) },
+                    React.createElement(IconButton, { onClick: (e) => {
+                            e.stopPropagation();
+                            onToggleOpen?.();
+                        }, size: 24 },
+                        React.createElement(ExtendArrow, { extend: isOpen ?? false })))) : (React.createElement("div", { style: { width: '24px' } })),
                 React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: span.processID, textSize: 14 }),
                 React.createElement(Text, { size: 12, color: theme.text.darker_grey }, "\u2022"),
                 React.createElement(ScrollX, { maxWidth: textMaxWidth / 2, text: span.operationName, textSize: 12, textColor: theme.text.darker_grey })),
@@ -5293,7 +5399,7 @@ const Span = ({ span, depth, indexInMatrix, maxDuration, minStartTime, maxEndTim
             React.createElement(DurationBar, { "$indexInMatrix": indexInMatrix, "$duration": span.duration, "$maxDuration": maxDuration, "$startTime": span.startTime, "$minStartTime": minStartTime, "$maxEndTime": maxEndTime },
                 React.createElement(DurationText, null, formatDuration(span.duration))))));
 };
-const RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState }) => {
+const RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minStartTime, maxEndTime, openSpanIdsState, selectedSpanState }) => {
     const theme = Theme.useTheme();
     return spans.map((span, i) => {
         const id = span.spanID;
@@ -5313,8 +5419,12 @@ const RecursiveSpans = ({ spans, logs, depth, indexInMatrix, maxDuration, minSta
                     if (alreadyOpen)
                         return prev.filter((st) => st != id);
                     return [...prev, id, ...getRecursiveValues(span, 'spans', 'spanID')];
+                }), onSelect: () => selectedSpanState.set((prev) => {
+                    if (prev?.spanID === id)
+                        return null;
+                    return span;
                 }) }),
-            isOpen && hasChildSpans ? (React.createElement(RecursiveSpans, { spans: span.spans || [], logs: allLogs, depth: depth + 1, indexInMatrix: indexInMatrix + i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: openSpanIdsState })) : null));
+            isOpen && hasChildSpans ? (React.createElement(RecursiveSpans, { spans: span.spans || [], logs: allLogs, depth: depth + 1, indexInMatrix: indexInMatrix + i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: openSpanIdsState, selectedSpanState: selectedSpanState })) : null));
     });
 };
 
@@ -5354,8 +5464,9 @@ const DurationTitle = styled(Text) `
   padding-left: 12px;
   white-space: nowrap;
 `;
-const TraceView = ({ heightToRemove, traces }) => {
+const TraceView = ({ heightToRemove, traces, isLoading }) => {
     const [openSpanIds, setOpenSpanIds] = useState([]);
+    const [selectedSpan, setSelectedSpan] = useState(null);
     const finalTraces = useMemo(() => {
         const sorted = deepClone(traces).sort((a, b) => b.spans[0].startTime - a.spans[0].startTime);
         const mapped = sorted.map((trace) => ({ ...trace, spans: buildSpans(trace) }));
@@ -5366,23 +5477,34 @@ const TraceView = ({ heightToRemove, traces }) => {
             return Math.max(max, trace.spans.reduce((max, span) => max + span.duration, 0));
         }, 0);
     }, [finalTraces]);
-    return (React.createElement(Container, { "$heightToRemove": heightToRemove }, finalTraces.length ? (React.createElement(ContainSpans, { "$heightToRemove": heightToRemove },
-        React.createElement(ContainTitle, null,
-            React.createElement(Text, null, "Service & operation")),
-        new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, "$heightToRemove": heightToRemove, index: i },
-            React.createElement(DurationTitle, null, formatDuration((maxDuration / NUM_OF_DURATION_DIVIDERS) * i))))),
-        finalTraces.map((trace, i) => {
-            const { spans } = trace;
-            // is equal CSS left: 0%;
-            const minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
-            // is equal CSS left: 100%;
-            const maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
-            return (React.createElement(RecursiveSpans, { key: `recursive-spans-${trace.traceID}`, spans: spans, logs: [], depth: 1, indexInMatrix: i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: {
-                    value: openSpanIds,
-                    set: setOpenSpanIds,
-                } }));
-        }))) : (React.createElement(CenterThis, { "$height": '50vh' },
-        React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_TRACES_FOUND, subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC })))));
+    const selectedSpanProcess = useMemo(() => {
+        const foundTrace = finalTraces.find((t) => t.spans.some((s) => s.spanID === selectedSpan?.spanID));
+        const foundProcess = foundTrace?.processes.find((p) => p.serviceName === selectedSpan?.processID);
+        return foundProcess;
+    }, [finalTraces, selectedSpan]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, { "$heightToRemove": heightToRemove }, isLoading ? (React.createElement(CenterThis, { "$height": '50vh' },
+            React.createElement(FadeLoader, { scale: 1.5 }))) : !finalTraces.length ? (React.createElement(CenterThis, { "$height": '50vh' },
+            React.createElement(NoDataFound, { title: DISPLAY_TITLES.NO_TRACES_FOUND, subTitle: DISPLAY_TITLES.ARE_SERVICES_INSTRUMENTED_AND_PRODUCING_TRAFFIC }))) : (React.createElement(ContainSpans, { "$heightToRemove": heightToRemove },
+            React.createElement(ContainTitle, null,
+                React.createElement(Text, null, "Service & operation")),
+            new Array(NUM_OF_DURATION_DIVIDERS).fill(null).map((_, i) => (React.createElement(DurationDivider, { key: `${i}-divider`, "$heightToRemove": heightToRemove, index: i },
+                React.createElement(DurationTitle, null, formatDuration((maxDuration / NUM_OF_DURATION_DIVIDERS) * i))))),
+            finalTraces.map((trace, i) => {
+                const { spans } = trace;
+                // is equal CSS left: 0%;
+                const minStartTime = spans.reduce((min, span) => Math.min(min, span.startTime), Number.MAX_SAFE_INTEGER);
+                // is equal CSS left: 100%;
+                const maxEndTime = spans.reduce((max, span) => Math.max(max, span.startTime + span.duration), 0);
+                return (React.createElement(RecursiveSpans, { key: `recursive-spans-${trace.traceID}`, spans: spans, logs: [], depth: 1, indexInMatrix: i, maxDuration: maxDuration, minStartTime: minStartTime, maxEndTime: maxEndTime, openSpanIdsState: {
+                        value: openSpanIds,
+                        set: setOpenSpanIds,
+                    }, selectedSpanState: {
+                        value: selectedSpan,
+                        set: setSelectedSpan,
+                    } }));
+            })))),
+        selectedSpan && React.createElement(SpanDrawer, { span: selectedSpan, process: selectedSpanProcess, onClose: () => setSelectedSpan(null) })));
 };
 
 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.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-d92ef50b.js';
-import { K as K8sLogo } from './index-40dfa720.js';
-export { c as compareCondition, g as getActionIcon, d as getEntityId, e as getInstrumentationRuleIcon, f as getProgrammingLanguageIcon } from './index-40dfa720.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-9475009f.js';
+import { K as K8sLogo } from './index-89edd01d.js';
+export { c as compareCondition, g as getActionIcon, d as getEntityId, e as getInstrumentationRuleIcon, f as getProgrammingLanguageIcon } from './index-89edd01d.js';
 export { d as deepClone, i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, g as formatDuration, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getRecursiveValues, o as getValueForRange, p as getWorkloadId, q as getYamlFieldsForDestination, r as hasUnhealthyInstances, s as isOverTime, t as mapDestinationFieldsForDisplay, u as sleep } from './index-bf427e64.js';
+export { f as filterActions, a as filterDestinations, b as filterDestinationsByStream, c as filterSources, d as filterSourcesByStream, e as formatBytes, g as formatDuration, i as getContainersIcons, h as getContainersInstrumentedCount, j as getDestinationIcon, k as getEntityIcon, l as getEntityLabel, m as getMetricForEntity, n as getRecursiveValues, o as getValueForRange, p as getWorkloadId, q as getYamlFieldsForDestination, r as hasUnhealthyInstances, s as isOverTime, t as mapDestinationFieldsForDisplay, u as sleep } from './index-c823fbfb.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-eff01b3d.js';
-import { V as VmLogo } from './index-333086d8.js';
-import './index-b0883db6.js';
+import { O as OdigosLogo } from './index-f18c8530.js';
+import { V as VmLogo } from './index-0a77c1be.js';
+import './index-195415d4.js';
 
 const cleanObjectEmptyStringsValues = (obj) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/lib/hooks/useSourceSelectionFormData.d.ts

@@ -14,6 +14,8 @@ export interface UseSourceSelectionFormData {
     getApiFutureAppsPayload: () => NamespaceSelectionFormData;
     selectedNamespace: string;
     onSelectNamespace: (namespace: NamespaceName, selectAll?: boolean) => void;
+    selectedAllNamespaces: boolean;
+    onSelectAllNamespaces: (selected: boolean) => void;
     selectedSources: SourceSelectionFormData;
     onSelectSource: (source: AvailableSource, namespace?: NamespaceName) => void;
     selectedFutureApps: NamespaceSelectionFormData;

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-40dfa720.js';
+import { W as useNotificationStore, F as FORM_ALERTS, Q as useDrawerStore, X as useEntityStore, Z as useDataStreamStore, $ as useSetupStore } from './index-89edd01d.js';
 import { ActionKeyTypes, ActionType, StatusType, EntityTypes, FieldTypes } from './types.js';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import 'styled-components';
 import { i as isEmpty, s as safeJsonParse } from './index-5e5f7bda.js';
-import { i as useGenericForm } from './useTransition-2df374a9.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-2df374a9.js';
+import { i as useGenericForm } from './useTransition-159c9af8.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-159c9af8.js';
 import { g as getIdFromSseTarget, i as isLegalK8sLabel, m as mapExportedSignals } from './index-6a6bea6e.js';
 
 const INITIAL$2 = {
@@ -469,34 +469,49 @@ const useSourceSelectionFormData = (params) => {
     const { fetchSingleNamespace } = params || {};
     const { namespaces } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
+    const mountedRef = useRef(false);
     // only for "onboarding" - get unsaved values and set to state
     // (this is to persist the values when user navigates back to this page)
     const { configuredSources, configuredFutureApps, availableSources: availableSourcesFromStore } = useSetupStore();
     // Keeps intial values fetched from API, so we can later filter the user-specific-selections, therebey minimizing the amount of data sent to the API on "persist sources".
     const [availableSources, setRecordedInitialSources] = useState(availableSourcesFromStore);
     const [isFetchingEachNamespace, setIsFetchingEachNamespace] = useState(false);
+    const [selectedAllNamespaces, setSelectedAllNamespaces] = useState(false);
     const [fetchedNamespaces, setFetchedNamespaces] = useState([]);
     const [selectedNamespace, setSelectedNamespace] = useState('');
     const [selectedFutureApps, setSelectedFutureApps] = useState(configuredFutureApps);
     const [selectedSources, setSelectedSources] = useState(mergeAvailableAndSelectedSources(availableSourcesFromStore, configuredSources, selectedStreamName));
     const fetchAndSetThisNamespace = async (ns, selectAll) => {
         if (fetchSingleNamespace) {
-            const { data } = await fetchSingleNamespace({ variables: { namespaceName: ns.name } });
-            const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
-            if (!name)
-                return;
-            setFetchedNamespaces((prev) => [...prev, name]);
-            setRecordedInitialSources((prev) => ({
-                ...prev,
-                [name]: sources.map((s) => mapToAvailableSource(s, selectedStreamName)),
-            }));
-            setSelectedSources((prev) => ({
-                ...prev,
-                [name]: typeof selectAll !== 'boolean' && prev[name]?.length ? prev[name] : sources.map((s) => mapToSelectedSource(s, selectedStreamName, selectAll)),
-            }));
+            if (fetchedNamespaces.includes(ns.name)) {
+                setSelectedSources((prev) => ({
+                    ...prev,
+                    [ns.name]: prev[ns.name].map((s) => ({
+                        ...s,
+                        selected: typeof selectAll === 'boolean' ? selectAll : s.selected,
+                        currentStreamName: selectedStreamName,
+                    })),
+                }));
+            }
+            else {
+                const { data } = await fetchSingleNamespace({ variables: { namespaceName: ns.name } });
+                const { name, sources = [] } = data?.computePlatform?.k8sActualNamespace || {};
+                if (!name)
+                    return;
+                setFetchedNamespaces((prev) => [...prev, name]);
+                setRecordedInitialSources((prev) => ({
+                    ...prev,
+                    [name]: sources.map((s) => mapToAvailableSource(s, selectedStreamName)),
+                }));
+                setSelectedSources((prev) => ({
+                    ...prev,
+                    [name]: typeof selectAll !== 'boolean' && prev[name]?.length ? prev[name] : sources.map((s) => mapToSelectedSource(s, selectedStreamName, selectAll)),
+                }));
+            }
         }
     };
     useEffect(() => {
+        mountedRef.current = true;
         if (!!namespaces?.length) {
             // initialize empty states to avoid undefined errors
             setRecordedInitialSources((prev) => {
@@ -517,16 +532,24 @@ const useSourceSelectionFormData = (params) => {
             (async () => {
                 setIsFetchingEachNamespace(true);
                 for await (const ns of namespaces)
-                    await fetchAndSetThisNamespace(ns);
+                    if (mountedRef.current)
+                        await fetchAndSetThisNamespace(ns);
                 setIsFetchingEachNamespace(false);
             })();
         }
+        return () => {
+            mountedRef.current = false;
+        };
     }, [namespaces, selectedStreamName]);
     // form filters
     const [searchText, setSearchText] = useState('');
     const [searchBy, setSearchBy] = useState(EntityTypes.Source);
     const [showSelectedOnly, setShowSelectedOnly] = useState(false);
     const [showRunningOnly, setShowRunningOnly] = useState(false);
+    const onSelectAllNamespaces = (selected) => {
+        setSelectedAllNamespaces(selected);
+        namespaces.forEach((ns) => fetchAndSetThisNamespace(ns, selected));
+    };
     const onSelectNamespace = (nsName, selectAll) => {
         const ns = namespaces.find((namespace) => namespace.name === nsName);
         if (ns) {
@@ -606,6 +629,8 @@ const useSourceSelectionFormData = (params) => {
         getApiFutureAppsPayload,
         selectedNamespace,
         onSelectNamespace,
+        selectedAllNamespaces,
+        onSelectAllNamespaces,
         selectedSources,
         onSelectSource,
         selectedFutureApps,