@datalayer/core 1.0.2 → 1.0.3

package/lib/otel/types.d.ts

@@ -0,0 +1,190 @@
+/**
+ * TypeScript types for the OTEL React components.
+ *
+ * @module otel/types
+ */
+/** A single span in a trace. */
+export interface OtelSpan {
+    trace_id: string;
+    span_id: string;
+    parent_span_id?: string;
+    span_name: string;
+    service_name: string;
+    kind: string;
+    start_time: string;
+    end_time: string;
+    duration_ms: number;
+    status_code?: string;
+    status_message?: string;
+    otel_scope_name?: string;
+    attributes?: Record<string, unknown>;
+    events?: OtelSpanEvent[];
+    links?: OtelSpanLink[];
+    /** Nested children (computed client-side from parent_span_id). */
+    children?: OtelSpan[];
+    /** Depth in a span tree (computed client-side). */
+    depth?: number;
+}
+/** An event attached to a span. */
+export interface OtelSpanEvent {
+    name: string;
+    timestamp: string;
+    attributes?: Record<string, unknown>;
+}
+/** A link between spans. */
+export interface OtelSpanLink {
+    trace_id: string;
+    span_id: string;
+    attributes?: Record<string, unknown>;
+}
+/** A log record. */
+export interface OtelLog {
+    timestamp: string;
+    severity_text: string;
+    severity_number?: number;
+    body: string;
+    service_name: string;
+    trace_id?: string;
+    span_id?: string;
+    attributes?: Record<string, unknown>;
+}
+/** A metric data point. */
+export interface OtelMetric {
+    metric_name: string;
+    service_name: string;
+    value: number;
+    unit?: string;
+    timestamp: string;
+    attributes?: Record<string, unknown>;
+    metric_type?: string;
+}
+/** Signal type for the Live view tabs. */
+export type SignalType = 'traces' | 'logs' | 'metrics';
+/** Props for the main OtelLive orchestrator component. */
+export interface OtelLiveProps {
+    /**
+     * OTEL API base URL. When omitted, falls back to `otelRunUrl` from the
+     * Datalayer core configuration (defaults to "https://prod1.datalayer.run").
+     */
+    baseUrl?: string;
+    /**
+     * WebSocket base URL. When provided, the WebSocket connects directly to this
+     * URL instead of deriving it from `baseUrl`. Use this to bypass a dev proxy
+     * and connect directly to the OTEL service (e.g. "https://prod1.datalayer.run").
+     */
+    wsBaseUrl?: string;
+    /** Bearer token for authentication. */
+    token?: string;
+    /** Auto-refresh interval in ms. Set to 0 to disable. Default 5000. */
+    autoRefreshMs?: number;
+    /** Default signal tab. */
+    defaultSignal?: SignalType;
+    /** Maximum rows to fetch per signal type. */
+    limit?: number;
+    /**
+     * Callback invoked once with the internal signal setter so a parent
+     * component (e.g. a header with generate buttons) can programmatically
+     * navigate to a signal tab.
+     */
+    onSignalRef?: (setter: (s: SignalType) => void) => void;
+}
+/** Props for the traces table. */
+export interface OtelTracesListProps {
+    spans: OtelSpan[];
+    loading?: boolean;
+    selectedSpanId?: string | null;
+    onSelectSpan?: (span: OtelSpan) => void;
+}
+/** Props for the span detail panel. */
+export interface OtelSpanDetailProps {
+    span: OtelSpan | null;
+    /** All spans of the same trace for building the tree. */
+    traceSpans?: OtelSpan[];
+    onClose?: () => void;
+}
+/** Props for the timeline bar chart. */
+export interface OtelTimelineProps {
+    /** All spans belonging to a single trace, sorted by start_time. */
+    spans: OtelSpan[];
+    /** Height per span bar in px. Default 22. */
+    barHeight?: number;
+    /** Optional selected span id. */
+    selectedSpanId?: string | null;
+    /** Called when user clicks a bar. */
+    onSelectSpan?: (span: OtelSpan) => void;
+}
+/** Props for the span tree (nested view). */
+export interface OtelSpanTreeProps {
+    /** Root spans (with children pre-built). */
+    spans: OtelSpan[];
+    /** Currently selected span. */
+    selectedSpanId?: string | null;
+    /** Called when user selects a span node. */
+    onSelectSpan?: (span: OtelSpan) => void;
+    /** Default expanded depth. Default 2. */
+    defaultExpandDepth?: number;
+}
+/** Props for the logs list view. */
+export interface OtelLogsListProps {
+    logs: OtelLog[];
+    loading?: boolean;
+    selectedLogIndex?: number | null;
+    onSelectLog?: (log: OtelLog, index: number) => void;
+}
+/** Props for the metrics list view. */
+export interface OtelMetricsListProps {
+    metrics: OtelMetric[];
+    loading?: boolean;
+}
+/** Props for the timeline range slider. */
+export interface OtelTimelineRangeSliderProps {
+    /** Timeline start (left edge). */
+    timelineStart: Date;
+    /** Timeline end (right edge). */
+    timelineEnd: Date;
+    /** Current selected range start. */
+    selectedStart: Date;
+    /** Current selected range end. */
+    selectedEnd: Date;
+    /** Called continuously while dragging. */
+    onRangeChange: (start: Date, end: Date) => void;
+    /** Called once when dragging ends. */
+    onRangeCommit?: (start: Date, end: Date) => void;
+    /** Number of tick marks. Default 8. */
+    tickCount?: number;
+    /** Format a Date into a tick label string. */
+    formatTick?: (date: Date) => string;
+    /** Height of the slider in px. Default 56. */
+    height?: number;
+    /** Optional histogram data: array of { time: Date; count: number } */
+    histogram?: {
+        time: Date;
+        count: number;
+    }[];
+}
+/** A single row returned by the SQL query endpoint. */
+export type OtelQueryRow = Record<string, unknown>;
+/** Response shape from POST /api/otel/v1/query/ */
+export interface OtelQueryResult {
+    success: boolean;
+    data: OtelQueryRow[];
+    count: number;
+}
+/** Props for the search / filter bar. */
+export interface OtelSearchBarProps {
+    /** Current signal type. */
+    signal: SignalType;
+    onSignalChange: (signal: SignalType) => void;
+    /** List of known service names for filter dropdown. */
+    services: string[];
+    /** Currently selected service filter (empty = all). */
+    selectedService: string;
+    onServiceChange: (service: string) => void;
+    /** Search / filter query string. */
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** Called when user clicks refresh. */
+    onRefresh?: () => void;
+    /** Whether data is currently loading. */
+    loading?: boolean;
+}

package/lib/otel/types.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/otel/utils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Helper utilities for OTEL components.
+ *
+ * @module otel/utils
+ */
+import type { OtelSpan } from './types';
+/** Parse an ISO timestamp or nanosecond/microsecond epoch to milliseconds. */
+export declare function toMs(ts: string | number): number;
+/** Format a duration in ms to a human-readable string. */
+export declare function formatDuration(ms: number | undefined | null): string;
+/** Format an ISO timestamp or nanosecond epoch to local time string. */
+export declare function formatTime(ts: string | number | undefined | null): string;
+/** Return a deterministic color for a service name (via simple hash). */
+export declare function serviceColor(serviceName: string): string;
+/** Kind-based color for the span kind indicator dot. */
+export declare function kindColor(kind: string): string;
+/** Severity-based color for log severity labels. */
+export declare function severityColor(severity: string): string;
+/**
+ * Map severity text to a Primer `Label` variant string.
+ * Used by OtelLogsList for severity badges.
+ */
+export declare function severityVariant(severity: string): 'danger' | 'attention' | 'accent' | 'secondary' | 'primary';
+/**
+ * Build a span tree from a flat list of spans.
+ * Returns root spans (those without a parent or whose parent is not in the list)
+ * with `children` populated recursively and `depth` set.
+ */
+export declare function buildSpanTree(spans: OtelSpan[]): OtelSpan[];
+/**
+ * Flatten a span tree back to a flat list (depth-first) preserving depth info.
+ */
+export declare function flattenSpanTree(roots: OtelSpan[]): OtelSpan[];

package/lib/otel/utils.js

@@ -0,0 +1,181 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** Parse an ISO timestamp or nanosecond/microsecond epoch to milliseconds. */
+export function toMs(ts) {
+    const n = Number(ts);
+    if (!isNaN(n) && n > 1e15)
+        return n / 1e6; // nanos → ms
+    if (!isNaN(n) && n > 1e12)
+        return n / 1e3; // micros → ms
+    if (!isNaN(n))
+        return n; // already ms
+    return new Date(String(ts)).getTime();
+}
+/** Format a duration in ms to a human-readable string. */
+export function formatDuration(ms) {
+    if (ms === undefined || ms === null)
+        return '—';
+    if (ms < 0.001)
+        return '<1µs';
+    if (ms < 1)
+        return `${(ms * 1000).toFixed(0)}µs`;
+    if (ms < 1000)
+        return `${ms.toFixed(1)}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(2)}s`;
+    return `${(ms / 60000).toFixed(1)}m`;
+}
+/** Format an ISO timestamp or nanosecond epoch to local time string. */
+export function formatTime(ts) {
+    if (ts === undefined || ts === null || ts === '')
+        return '—';
+    try {
+        const ms = toMs(ts);
+        const d = new Date(ms);
+        if (isNaN(d.getTime()))
+            return String(ts);
+        return d.toLocaleTimeString(undefined, {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            fractionalSecondDigits: 3,
+        });
+    }
+    catch {
+        return String(ts);
+    }
+}
+/** Deterministic color palette for service names. */
+const PALETTE = [
+    '#0969da', // blue
+    '#1a7f37', // green
+    '#cf222e', // red
+    '#8250df', // purple
+    '#bf8700', // amber
+    '#0550ae', // dark blue
+    '#116329', // dark green
+    '#a40e26', // dark red
+    '#6639ba', // dark purple
+    '#953800', // brown
+    '#0e8a16', // lime
+    '#e36209', // orange
+];
+/** Return a deterministic color for a service name (via simple hash). */
+export function serviceColor(serviceName) {
+    let hash = 0;
+    for (let i = 0; i < serviceName.length; i++) {
+        hash = (hash * 31 + serviceName.charCodeAt(i)) | 0;
+    }
+    return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+/** Kind-based color for the span kind indicator dot. */
+export function kindColor(kind) {
+    switch (kind?.toUpperCase()) {
+        case 'SERVER':
+            return '#0969da';
+        case 'CLIENT':
+            return '#1a7f37';
+        case 'PRODUCER':
+            return '#8250df';
+        case 'CONSUMER':
+            return '#bf8700';
+        case 'INTERNAL':
+        default:
+            return '#656d76';
+    }
+}
+/** Severity-based color for log severity labels. */
+export function severityColor(severity) {
+    switch (severity?.toUpperCase()) {
+        case 'ERROR':
+        case 'FATAL':
+            return 'danger.fg';
+        case 'WARN':
+        case 'WARNING':
+            return 'attention.fg';
+        case 'INFO':
+            return 'accent.fg';
+        case 'DEBUG':
+        case 'TRACE':
+            return 'fg.muted';
+        default:
+            return 'fg.default';
+    }
+}
+/**
+ * Map severity text to a Primer `Label` variant string.
+ * Used by OtelLogsList for severity badges.
+ */
+export function severityVariant(severity) {
+    switch (severity?.toUpperCase()) {
+        case 'ERROR':
+        case 'FATAL':
+            return 'danger';
+        case 'WARN':
+        case 'WARNING':
+            return 'attention';
+        case 'INFO':
+            return 'accent';
+        case 'DEBUG':
+        case 'TRACE':
+            return 'secondary';
+        default:
+            return 'primary';
+    }
+}
+/**
+ * Build a span tree from a flat list of spans.
+ * Returns root spans (those without a parent or whose parent is not in the list)
+ * with `children` populated recursively and `depth` set.
+ */
+export function buildSpanTree(spans) {
+    const byId = new Map();
+    const enriched = spans.map(s => ({
+        ...s,
+        children: [],
+        depth: 0,
+    }));
+    for (const s of enriched) {
+        byId.set(s.span_id, s);
+    }
+    const roots = [];
+    for (const s of enriched) {
+        if (s.parent_span_id && byId.has(s.parent_span_id)) {
+            const parent = byId.get(s.parent_span_id);
+            parent.children = parent.children ?? [];
+            parent.children.push(s);
+        }
+        else {
+            roots.push(s);
+        }
+    }
+    // Set depths
+    function setDepth(node, depth) {
+        node.depth = depth;
+        for (const child of node.children ?? []) {
+            setDepth(child, depth + 1);
+        }
+    }
+    for (const root of roots) {
+        setDepth(root, 0);
+    }
+    return roots;
+}
+/**
+ * Flatten a span tree back to a flat list (depth-first) preserving depth info.
+ */
+export function flattenSpanTree(roots) {
+    const result = [];
+    function walk(node) {
+        result.push(node);
+        for (const child of node.children ?? []) {
+            walk(child);
+        }
+    }
+    for (const root of roots) {
+        walk(root);
+    }
+    return result;
+}

package/lib/state/storage/IAMStorage.d.ts

@@ -9,7 +9,8 @@ export type IJWTToken = {
     iss: string;
     jti: number;
     roles: Array<string>;
-    sub: IUser;
+    sub: string;
+    user: IUser;
 };
 /**
  * Return the user from the local storage.

package/lib/state/substates/CoreState.js

@@ -23,6 +23,7 @@ let initialConfiguration = {
     aiagentsRunUrl: 'https://prod1.datalayer.run',
     aiinferenceRunUrl: 'https://prod1.datalayer.run',
     mcpserversRunUrl: 'https://prod1.datalayer.run',
+    otelRunUrl: 'https://prod1.datalayer.run',
     growthRunUrl: 'https://prod1.datalayer.run',
     inboundsRunUrl: 'https://prod1.datalayer.run',
     successRunUrl: 'https://prod1.datalayer.run',

package/lib/utils/Jwt.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Lightweight JWT payload utilities.
+ *
+ * Decodes a JWT without verification (client-side display only).
+ * Never use for security-critical checks.
+ */
+export interface DatalayerJwtUser {
+    id: string;
+    uid: string;
+    handle: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    avatarUrl: string;
+    roles: string[];
+}
+/** Full Datalayer JWT payload shape. */
+export interface DatalayerJwtPayload {
+    jti: string;
+    iss: string;
+    iat: number;
+    exp: number;
+    sub: string;
+    user: DatalayerJwtUser;
+    /** Legacy top-level roles array (some tokens). */
+    roles?: string[];
+}
+/**
+ * Decode the payload of a JWT without verifying the signature.
+ * Returns `null` on any error (malformed token, invalid base64, etc.).
+ */
+export declare function parseJwtPayload<T = DatalayerJwtPayload>(token: string): T | null;
+/**
+ * Extract the Datalayer user object from a JWT, returning `null` if the
+ * token is missing or cannot be decoded.
+ */
+export declare function getDatalayerJwtUser(token: string | null | undefined): DatalayerJwtUser | null;
+/**
+ * Format a human-readable display name from a JWT user.
+ * Prefers "FirstName LastName", falls back to handle.
+ */
+export declare function getDatalayerDisplayName(user: DatalayerJwtUser | null | undefined, fallback?: string): string;

package/lib/utils/Jwt.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// ── Utilities ─────────────────────────────────────────────────────
+/**
+ * Decode the payload of a JWT without verifying the signature.
+ * Returns `null` on any error (malformed token, invalid base64, etc.).
+ */
+export function parseJwtPayload(token) {
+    try {
+        const parts = token.split('.');
+        if (parts.length < 2)
+            return null;
+        // Base64Url → Base64 → JSON
+        const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), '=');
+        const json = atob(padded);
+        return JSON.parse(json);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Extract the Datalayer user object from a JWT, returning `null` if the
+ * token is missing or cannot be decoded.
+ */
+export function getDatalayerJwtUser(token) {
+    if (!token)
+        return null;
+    const payload = parseJwtPayload(token);
+    return payload?.user ?? null;
+}
+/**
+ * Format a human-readable display name from a JWT user.
+ * Prefers "FirstName LastName", falls back to handle.
+ */
+export function getDatalayerDisplayName(user, fallback = '') {
+    if (!user)
+        return fallback;
+    const full = `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim();
+    return full || user.handle || fallback;
+}

package/lib/utils/index.d.ts

@@ -11,6 +11,7 @@ export * from './Env';
 export * from './File';
 export * from './Format';
 export * from './Ids';
+export * from './Jwt';
 export * from './Jupyter';
 export * from './Lazy';
 export * from './Msc';

package/lib/utils/index.js

@@ -15,6 +15,7 @@ export * from './Env';
 export * from './File';
 export * from './Format';
 export * from './Ids';
+export * from './Jwt';
 export * from './Jupyter';
 export * from './Lazy';
 export * from './Msc';

package/lib/views/iam/SignInSimple.d.ts

@@ -0,0 +1,38 @@
+/**
+ * SignInSimple – Generic handle + password sign-in form.
+ *
+ * Posts to `loginUrl` (default `/api/iam/v1/login`) with
+ * `{ handle, password }`, then calls `onSignIn(token, handle)` on
+ * success so the caller can persist credentials as needed.
+ *
+ * @module views/signin
+ */
+import React from 'react';
+export interface SignInSimpleProps {
+    /**
+     * Called after a successful login with the JWT and the user handle.
+     * Typically used to store credentials in a Zustand / context store.
+     */
+    onSignIn: (token: string, handle: string) => void;
+    /**
+     * Login endpoint.  Defaults to `/api/iam/v1/login`.
+     * The endpoint must accept `POST { handle, password }` and return
+     * `{ success: boolean; token?: string; message?: string }`.
+     */
+    loginUrl?: string;
+    /**
+     * Optional heading text.  Defaults to `"Datalayer OTEL"`.
+     */
+    title?: string;
+    /**
+     * Optional subtitle / description.
+     */
+    description?: string;
+    /**
+     * Leading icon element rendered next to the title.
+     * Defaults to `<TelescopeIcon size={24} />`.
+     */
+    leadingIcon?: React.ReactNode;
+}
+export declare const SignInSimple: React.FC<SignInSimpleProps>;
+export default SignInSimple;

package/lib/views/iam/SignInSimple.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * SignInSimple – Generic handle + password sign-in form.
+ *
+ * Posts to `loginUrl` (default `/api/iam/v1/login`) with
+ * `{ handle, password }`, then calls `onSignIn(token, handle)` on
+ * success so the caller can persist credentials as needed.
+ *
+ * @module views/signin
+ */
+import { useState, useCallback } from 'react';
+import { Box, Button, FormControl, Heading, Text, TextInput, } from '@primer/react';
+import { EyeIcon, EyeClosedIcon, TelescopeIcon } from '@primer/octicons-react';
+// ── Component ────────────────────────────────────────────────────────
+export const SignInSimple = ({ onSignIn, loginUrl = '/api/iam/v1/login', title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', leadingIcon = _jsx(TelescopeIcon, { size: 24 }), }) => {
+    const [handle, setHandle] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const submit = useCallback(async () => {
+        if (!handle || !password || loading)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const resp = await fetch(loginUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ handle, password }),
+            });
+            if (!resp.ok) {
+                throw new Error(`HTTP ${resp.status}`);
+            }
+            const data = await resp.json();
+            if (data.success && data.token) {
+                onSignIn(data.token, handle);
+            }
+            else {
+                setError(data.message || 'Invalid username or password.');
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [handle, password, loading, loginUrl, onSignIn]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter')
+            submit();
+    }, [submit]);
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+            bg: 'canvas.default',
+            color: 'fg.default',
+        }, children: _jsxs(Box, { sx: {
+                width: 360,
+                p: 4,
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'border.default',
+                bg: 'canvas.subtle',
+            }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        mb: 4,
+                        justifyContent: 'center',
+                    }, children: [leadingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: title })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mb: 3, textAlign: 'center' }, children: description }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mb: 3, display: 'block' }, children: error })), _jsx(Button, { variant: "primary", block: true, disabled: loading || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' })] }) }));
+};
+export default SignInSimple;

package/lib/views/iam/index.d.ts

@@ -0,0 +1,2 @@
+export { SignInSimple } from './SignInSimple';
+export type { SignInSimpleProps } from './SignInSimple';

package/lib/views/iam/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export { SignInSimple } from './SignInSimple';