@odigos/ui-kit 0.0.72 → 0.0.73

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.0.73](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.72...ui-kit-v0.0.73) (2025-08-06)
+
+
+### Features
+
+* source-drawer libraries ([#289](https://github.com/odigos-io/ui-kit/issues/289)) ([fd46802](https://github.com/odigos-io/ui-kit/commit/fd468023aeb5a44a322eb28720020946943c47e9))
+
 ## [0.0.72](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.71...ui-kit-v0.0.72) (2025-08-05)
 
 

package/lib/containers/source-drawer/describe/index.d.ts

@@ -2,7 +2,7 @@ import { type FC } from 'react';
 import { type DescribeSource, type Source, type WorkloadId } from '@/types';
 interface DescribeProps {
     source: Source;
-    fetchDescribeSource: (req: {
+    fetchSourceDescribe: (req: {
         variables: WorkloadId;
     }) => Promise<{
         data?: {

package/lib/containers/source-drawer/index.d.ts

@@ -1,16 +1,14 @@
 import { type FC } from 'react';
-import { type DescribeSource, type PersistSources, type SourceFormData, type WorkloadId } from '@/types';
+import { type DescribeProps } from './describe';
+import { type LibrariesProps } from './libraries';
+import { type PersistSources, type SourceFormData, type WorkloadId, type Source } from '@/types';
 interface SourceDrawerProps {
     persistSources: PersistSources;
     updateSource: (sourceId: WorkloadId, payload: SourceFormData) => Promise<void>;
-    fetchDescribeSource: (req: {
-        variables: WorkloadId;
-    }) => Promise<{
-        data?: {
-            describeSource: DescribeSource;
-        };
-    }>;
     restartWorkloads: (sourceIds: WorkloadId[]) => Promise<void>;
+    fetchSourceById: (id: WorkloadId, bypassPaginationLoader?: boolean) => Promise<Source | undefined>;
+    fetchSourceDescribe: DescribeProps['fetchSourceDescribe'];
+    fetchSourceLibraries: LibrariesProps['fetchSourceLibraries'];
 }
 declare const SourceDrawer: FC<SourceDrawerProps>;
 export { SourceDrawer, type SourceDrawerProps };

package/lib/containers/source-drawer/libraries/index.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import { type InstrumentationInstanceComponent, type Source, type WorkloadId } from '@/types';
+interface LibrariesProps {
+    source: Source;
+    fetchSourceLibraries: (req: {
+        variables: WorkloadId;
+    }) => Promise<{
+        data?: {
+            instrumentationInstanceComponents: InstrumentationInstanceComponent[];
+        };
+    }>;
+}
+declare const Libraries: FC<LibrariesProps>;
+export { Libraries, type LibrariesProps };

package/lib/containers.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle, useMemo, Fragment, useCallback, Children } from 'react';
 import styled, { css } from 'styled-components';
 import { b as DISPLAY_TITLES, T as Theme, U as usePendingStore, V as useNotificationStore, O as useDrawerStore, B as BUTTON_TEXTS, W as useEntityStore, A as ACTION_OPTIONS, g as getActionIcon, z as useModalStore, F as FORM_ALERTS, X as useFilterStore, D as DISPLAY_LANGUAGES, M as MONITORS_OPTIONS, d as getInstrumentationRuleIcon, Y as useDataStreamStore, Z as useInstrumentStore, c as getEntityId, S as STORAGE_KEYS, a as DEFAULT_DATA_STREAM_NAME, _ as useSetupStore, e as getProgrammingLanguageIcon, I as INSTRUMENTATION_RULE_OPTIONS, $ as useSelectedStore, j as ImageErrorIcon, a0 as useDarkMode } from './index-fdf3a268.js';
-import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, K8sResourceKind, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
+import { ActionType, ActionKeyTypes, InputTypes, FieldTypes, EntityTypes, StatusType, Crud, OtherStatus, NodeTypes, EdgeTypes, AddNodeTypes, SignalType, HeadersCollectionKeyTypes, CustomInstrumentationsKeyTypes, CodeAttributesKeyTypes, PayloadCollectionKeyTypes, InstrumentationRuleType, MountMethod, AgentEnvVarsInjectionMethod, Profile, InstallationMethod } from './types.js';
 import { e as DataCardFieldTypes, p as FieldLabel, C as Checkbox, o as FieldError, v as Input, x as InputTable, K as KeyValueInputsList, w as InputList, _ as Text, R as Segment, Q as SectionTitle, j as DocsButton, z as MonitorsCheckboxes, $ as TextArea, k as Drawer, c as ConditionDetails, D as DataCard, a5 as FlexColumn, M as Modal, N as NavigationButtons, a9 as ModalBody, L as NotificationNote, A as AutocompleteInput, i as Divider, W as Status, a4 as FlexRow, a1 as Tooltip, s as IconWrapped, G as MonitorsIcons, aa as TableContainer, ab as TableTitleWrap, r as IconTitleBadge, ac as TableWrap, y as InteractiveTable, a6 as CenterThis, J as NoDataFound, a2 as TraceLoader, a as Badge, E as ExtendArrow, a7 as VerticalScroll, U as SelectionButton, B as Button, n as Dropdown, ad as nodeConfig, ae as useNodesState, af as useEdgesState, ag as Flow, ah as applyNodeChanges, P as Popup, a0 as Toggle, I as IconButton, ai as AddButton, F as FadeLoader, g as DataTab, X as Stepper, d as DataCardFields, Z as Tag, aj as MarkerType, t as IconsNav, ak as CopyText, h as DescribeRow, al as PodContainer, am as SourceContainer, q as IconGroup, O as PopupForm } from './index-a1b59a38.js';
 import { i as isEmpty, s as safeJsonParse, d as deepClone } from './index-5e5f7bda.js';
 import { C as CheckCircledIcon, O as OdigosLogo } from './index-1d5c06a0.js';
@@ -4193,26 +4193,59 @@ const SlackInvite = ({}) => {
         React.createElement(SlackLogo, null)));
 };
 
-const Describe$1 = ({ source, fetchDescribeSource }) => {
+const buildCard = (source) => {
+    const { name, kind, namespace } = source;
+    const arr = [
+        { title: DISPLAY_TITLES.NAMESPACE, value: namespace },
+        { title: DISPLAY_TITLES.KIND, value: kind },
+        { title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' },
+        { type: DataCardFieldTypes.Divider },
+        {
+            type: DataCardFieldTypes.CopyText,
+            value: `kubectl get ${kind} ${name} -n ${namespace}`.toLowerCase(),
+        },
+    ];
+    return arr;
+};
+
+const Container$2 = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 4px;
+`;
+const SourceForm = ({ formData, handleFormChange }) => {
+    return (React.createElement(Container$2, 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) })));
+};
+
+const Describe$1 = ({ source, fetchSourceDescribe }) => {
+    const [failed, setFailed] = useState(false);
     const [describe, setDescribe] = useState(null);
     useEffect(() => {
         if (!source)
             return;
-        fetchDescribeSource({
+        fetchSourceDescribe({
             variables: {
                 namespace: source.namespace,
                 name: source.name,
                 kind: source.kind,
             },
         }).then(({ data }) => {
-            setDescribe(data?.describeSource || null);
+            if (data?.describeSource) {
+                setDescribe(data.describeSource);
+            }
+            else {
+                setFailed(true);
+            }
         });
-    }, [fetchDescribeSource, source]);
-    if (!describe) {
+    }, [fetchSourceDescribe, source]);
+    if (!describe && !failed) {
         return (React.createElement(CenterThis, null,
             React.createElement(FadeLoader, null)));
     }
-    return (React.createElement(FlexColumn, { "$gap": 12 }, !describe.pods?.length ? (React.createElement(CenterThis, null,
+    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, null,
+        React.createElement(NoDataFound, { subTitle: 'Could not fetch describe for this source' }))) : !describe?.pods?.length ? (React.createElement(CenterThis, null,
         React.createElement(NoDataFound, { subTitle: 'Check if you have any running pods and try again' }))) : (describe.pods.map(({ podName, nodeName, phase, agentInjected, runningLatestWorkloadRevision, containers }) => {
         const podHasErrors = phase.status !== StatusType.Success || hasUnhealthyInstances(containers);
         const podStatus = podHasErrors ? StatusType.Error : StatusType.Success;
@@ -4248,36 +4281,65 @@ const Describe$1 = ({ source, fetchDescribeSource }) => {
     }))));
 };
 
-const buildCard = (source) => {
-    const { name, kind, namespace } = source;
-    const arr = [
-        { title: DISPLAY_TITLES.NAMESPACE, value: namespace },
-        { title: DISPLAY_TITLES.KIND, value: kind },
-        { title: DISPLAY_TITLES.NAME, value: name, tooltip: 'K8s resource name' },
-        { type: DataCardFieldTypes.Divider },
-        {
-            type: DataCardFieldTypes.CopyText,
-            value: `kubectl get ${kind} ${name} -n ${namespace}`.toLowerCase(),
-        },
-    ];
-    return arr;
-};
-
-const Container$2 = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  padding: 4px;
+const Row = styled(FlexRow) `
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
 `;
-const SourceForm = ({ formData, handleFormChange }) => {
-    return (React.createElement(Container$2, 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) })));
+const Libraries = ({ source, fetchSourceLibraries }) => {
+    const theme = Theme.useTheme();
+    const [failed, setFailed] = useState(false);
+    const [libraries, setLibraries] = useState(null);
+    useEffect(() => {
+        if (!source)
+            return;
+        fetchSourceLibraries({
+            variables: {
+                namespace: source.namespace,
+                name: source.name,
+                kind: source.kind,
+            },
+        }).then(({ data }) => {
+            if (data?.instrumentationInstanceComponents) {
+                setLibraries(data.instrumentationInstanceComponents);
+            }
+            else {
+                setFailed(true);
+            }
+        });
+    }, [fetchSourceLibraries, source]);
+    if (!libraries && !failed) {
+        return (React.createElement(CenterThis, null,
+            React.createElement(FadeLoader, null)));
+    }
+    return (React.createElement(FlexColumn, { "$gap": 12 }, failed ? (React.createElement(CenterThis, null,
+        React.createElement(NoDataFound, { subTitle: 'Could not fetch libraries for this source' }))) : !libraries?.length ? (React.createElement(CenterThis, { "$gap": 12 },
+        React.createElement(NoDataFound, { title: 'No libraries found', subTitle: '' }),
+        React.createElement(NotificationNote, { type: StatusType.Warning, message: 'This feature is in early development, and has very limited support' }))) : (React.createElement(DataCard, { title: 'Instrumented Libraries' }, libraries
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map(({ name, nonIdentifyingAttributes }, i) => (React.createElement(Fragment, { key: `library-${name}` },
+        React.createElement(Row, null,
+            React.createElement(Text, { size: 12, color: theme.text.grey }, name),
+            React.createElement(FlexRow, { "$gap": 4 }, nonIdentifyingAttributes.map(({ key, value }) => {
+                if (isStringABoolean(value) && parseBooleanFromString(value)) {
+                    switch (key) {
+                        case 'is_standard_lib':
+                            return React.createElement(Status, { key: `${name}-${key}`, status: StatusType.Default, title: 'STANDARD', withBorder: true });
+                        default:
+                            console.warn(`Unhandled non-identifying attribute: ${key}`);
+                            return null;
+                    }
+                }
+                return null;
+            }))),
+        i !== libraries.length - 1 && React.createElement(Divider, { length: '100%', margin: '0' }))))))));
 };
 
 var Tabs;
 (function (Tabs) {
     Tabs["Overview"] = "Overview";
     Tabs["Pods"] = "Pods";
+    Tabs["Libraries"] = "Libraries";
 })(Tabs || (Tabs = {}));
 const FormContainer = styled.div `
   width: 100%;
@@ -4291,7 +4353,7 @@ const DataContainer$2 = styled.div `
   flex-direction: column;
   gap: 12px;
 `;
-const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, restartWorkloads }) => {
+const SourceDrawer = ({ persistSources, updateSource, restartWorkloads, fetchSourceById, fetchSourceDescribe, fetchSourceLibraries }) => {
     const { sources } = useEntityStore();
     const { selectedStreamName } = useDataStreamStore();
     const { drawerType, drawerEntityId } = useDrawerStore();
@@ -4301,15 +4363,23 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
     const [isEditing, setIsEditing] = useState(false);
     const [isFormDirty, setIsFormDirty] = useState(false);
     const [selectedTab, setSelectedTab] = useState(Tabs.Overview);
+    const [fetchedSource, setFetchedSource] = useState(null);
+    // this is used to fetch the source on drawer open, so we ensure we have the latest data
+    useEffect(() => {
+        if (!drawerEntityId)
+            return;
+        fetchSourceById(drawerEntityId).then((source) => setFetchedSource(source || null));
+    }, [drawerEntityId]);
     const { formData, handleFormChange, resetFormData, loadFormWithDrawerItem } = useSourceFormData();
     const thisItem = useMemo(() => {
         if (isOpen)
             return null;
-        const found = sourcesByStream?.find((x) => x.namespace === drawerEntityId.namespace && x.name === drawerEntityId.name && x.kind === drawerEntityId.kind);
+        const found = fetchedSource ||
+            sourcesByStream?.find((x) => x.namespace === drawerEntityId.namespace && x.name === drawerEntityId.name && x.kind === drawerEntityId.kind);
         if (!!found)
             loadFormWithDrawerItem(found);
         return found;
-    }, [isOpen, drawerEntityId, sourcesByStream]);
+    }, [isOpen, drawerEntityId, sourcesByStream, fetchedSource]);
     const containersData = useMemo(() => {
         const runtimeCondition = thisItem?.conditions?.find(({ type }) => type === 'RuntimeDetection');
         return {
@@ -4318,23 +4388,6 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
             containers: thisItem?.containers || [],
         };
     }, [thisItem]);
-    const tabs = useMemo(() => {
-        const arr = [
-            {
-                label: Tabs.Overview,
-                onClick: () => setSelectedTab(Tabs.Overview),
-                selected: selectedTab === Tabs.Overview,
-            },
-        ];
-        if (thisItem?.kind !== K8sResourceKind.CronJob) {
-            arr.push({
-                label: Tabs.Pods,
-                onClick: () => setSelectedTab(Tabs.Pods),
-                selected: selectedTab === Tabs.Pods,
-            });
-        }
-        return arr;
-    }, [thisItem?.kind, selectedTab]);
     if (!thisItem)
         return null;
     const handleEdit = (bool) => {
@@ -4361,7 +4414,23 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
         setIsFormDirty(false);
         setIsEditing(false);
     };
-    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: tabs, headerActionButtons: [
+    return (React.createElement(OverviewDrawer, { ref: drawerRef, title: thisItem.otelServiceName || thisItem.name, titleTooltip: 'This attribute is used to identify the name of the service (service.name) that is generating telemetry data.', hideEditTitleFromEdit: true, icons: getContainersIcons(thisItem.containers), isEdit: isEditing, isFormDirty: isFormDirty, onEdit: selectedTab === Tabs.Overview ? handleEdit : undefined, onSave: handleSave, onDelete: selectedTab === Tabs.Overview ? handleDelete : undefined, onCancel: handleCancel, isLastItem: sourcesByStream.length === 1, tabs: [
+            {
+                label: Tabs.Overview,
+                onClick: () => setSelectedTab(Tabs.Overview),
+                selected: selectedTab === Tabs.Overview,
+            },
+            {
+                label: Tabs.Pods,
+                onClick: () => setSelectedTab(Tabs.Pods),
+                selected: selectedTab === Tabs.Pods,
+            },
+            {
+                label: Tabs.Libraries,
+                onClick: () => setSelectedTab(Tabs.Libraries),
+                selected: selectedTab === Tabs.Libraries,
+            },
+        ], headerActionButtons: [
             {
                 'data-id': 'rollout-restart',
                 variant: 'tertiary',
@@ -4378,7 +4447,7 @@ const SourceDrawer = ({ persistSources, updateSource, fetchDescribeSource, resta
             } }))) : (React.createElement(DataContainer$2, 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) }))))))) : (React.createElement(Describe$1, { source: thisItem, fetchDescribeSource: fetchDescribeSource }))));
+        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 }))));
 };
 
 const SearchWrapper = styled.div `

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

@@ -2,6 +2,7 @@ export * from './actions';
 export * from './config';
 export * from './describe';
 export * from './destinations';
+export * from './instrumentation-instances';
 export * from './instrumentation-rules';
 export * from './namespaces';
 export * from './service-map';

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

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

package/lib/types/index.d.ts

@@ -6,6 +6,7 @@ export * from './data-flow';
 export * from './data-streams';
 export * from './describe';
 export * from './destinations';
+export * from './instrumentation-instances';
 export * from './instrumentation-rules';
 export * from './metrics';
 export * from './namespaces';

package/lib/types/instrumentation-instances/index.d.ts

@@ -0,0 +1,7 @@
+export interface InstrumentationInstanceComponent {
+    name: string;
+    nonIdentifyingAttributes: {
+        key: string;
+        value: string;
+    }[];
+}

package/package.json

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