@datalayer/core 1.0.1 → 1.0.3

package/lib/otel/OtelLogsList.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelLogsList – Tabular log-records view with severity colour coding,
+ * expandable body/attributes, and trace correlation links.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelLogsList
+ */
+import React, { useState } from 'react';
+import { Box, Text, Label, Spinner } from '@primer/react';
+import { Blankslate } from '@primer/react/experimental';
+import { LogIcon } from '@primer/octicons-react';
+import { formatTime, severityVariant } from './utils';
+// ── helpers ─────────────────────────────────────────────────────────
+/** Severity badge using Primer Label, centered in its grid cell. */
+const Severity = ({ text }) => (_jsx(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: _jsx(Label, { size: "small", variant: severityVariant(text), children: text }) }));
+/** Expandable row detail for a single log record. */
+const LogDetail = ({ log }) => (_jsxs(Box, { sx: {
+        gridColumn: '1 / -1',
+        bg: 'canvas.subtle',
+        borderBottom: '1px solid',
+        borderColor: 'border.default',
+        p: 3,
+    }, children: [_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: {
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                        color: 'fg.muted',
+                        display: 'block',
+                        mb: 1,
+                    }, children: "Body" }), _jsx(Box, { as: "pre", sx: {
+                        fontSize: 1,
+                        fontFamily: 'mono',
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                        m: 0,
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 2,
+                    }, children: log.body })] }), log.trace_id && (_jsxs(Box, { sx: { display: 'flex', gap: 3, mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                        color: 'fg.muted',
+                        display: 'block',
+                        mb: 1,
+                    }, children: "Attributes" }), _jsx(Box, { sx: {
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        p: 2,
+                    }, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            py: 1,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: [_jsx(Text, { sx: {
+                                    color: 'accent.fg',
+                                    fontSize: 0,
+                                    fontFamily: 'mono',
+                                    minWidth: 150,
+                                }, children: k }), _jsx(Text, { sx: {
+                                    fontSize: 0,
+                                    fontFamily: 'mono',
+                                    wordBreak: 'break-word',
+                                }, children: typeof v === 'string' ? v : JSON.stringify(v) })] }, k))) })] }))] }));
+// ── Main component ──────────────────────────────────────────────────
+export const OtelLogsList = ({ logs, loading, selectedLogIndex, onSelectLog, }) => {
+    const [expandedIdx, setExpandedIdx] = useState(null);
+    const colTemplate = '140px 80px 160px 1fr';
+    if (loading && logs.length === 0) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 5 }, children: _jsx(Spinner, { size: "medium" }) }));
+    }
+    if (!loading && logs.length === 0) {
+        return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(LogIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "No log records found" }), _jsx(Blankslate.Description, { children: "Send some log data first." })] }));
+    }
+    return (_jsxs(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: [_jsx(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: colTemplate,
+                    bg: 'canvas.subtle',
+                    borderBottom: '2px solid',
+                    borderColor: 'border.default',
+                    px: 3,
+                    py: 1,
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 1,
+                }, children: ['Time', 'Severity', 'Service', 'Body'].map(h => (_jsx(Text, { sx: {
+                        fontSize: 0,
+                        fontWeight: 'bold',
+                        color: 'fg.muted',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                        textAlign: h === 'Severity' ? 'center' : undefined,
+                    }, children: h }, h))) }), logs.map((log, idx) => {
+                const selected = idx === selectedLogIndex;
+                const expanded = idx === expandedIdx;
+                return (_jsxs(React.Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'grid',
+                                gridTemplateColumns: colTemplate,
+                                px: 3,
+                                py: '5px',
+                                borderBottom: '1px solid',
+                                borderColor: 'border.muted',
+                                cursor: 'pointer',
+                                bg: selected
+                                    ? 'accent.subtle'
+                                    : expanded
+                                        ? 'canvas.subtle'
+                                        : 'canvas.default',
+                                ':hover': {
+                                    bg: selected || expanded ? undefined : 'canvas.subtle',
+                                },
+                            }, onClick: () => {
+                                setExpandedIdx(expanded ? null : idx);
+                                onSelectLog?.(log, idx);
+                            }, children: [_jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono', color: 'fg.default' }, children: formatTime(log.timestamp) }), _jsx(Severity, { text: log.severity_text }), _jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        color: 'fg.muted',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: log.service_name }), _jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: log.body })] }), expanded && _jsx(LogDetail, { log: log })] }, idx));
+            })] }));
+};

package/lib/otel/OtelMetricsChart.d.ts

@@ -0,0 +1,22 @@
+/**
+ * OtelMetricsChart – Type-aware ECharts visualisation for OTEL metrics.
+ *
+ * Renders one chart section per `metric_type` (`sum`, `histogram`, `gauge`,
+ * and any other type present) with an appropriate chart style:
+ *
+ * - **sum** (counters): area-line chart with gradient fill
+ * - **histogram**: bar chart with grouped series
+ * - **gauge**: plain line chart (no area fill)
+ * - **other**: falls back to area-line
+ *
+ * @module otel/OtelMetricsChart
+ */
+import React from 'react';
+import type { OtelMetric } from './types';
+export interface OtelMetricsChartProps {
+    metrics: OtelMetric[];
+    /** Height per chart panel in px. Default 240. */
+    height?: number;
+}
+export declare const OtelMetricsChart: React.FC<OtelMetricsChartProps>;
+export default OtelMetricsChart;

package/lib/otel/OtelMetricsChart.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as echarts from 'echarts';
+import ReactECharts from 'echarts-for-react';
+import { Box, Text, Label } from '@primer/react';
+// ── Gradient palette ────────────────────────────────────────────────
+const SERIES_COLORS = [
+    {
+        line: '#5470C6',
+        gradientStart: 'rgba(84,112,198,0.7)',
+        gradientEnd: 'rgba(84,112,198,0.02)',
+    },
+    {
+        line: '#91CC75',
+        gradientStart: 'rgba(145,204,117,0.7)',
+        gradientEnd: 'rgba(145,204,117,0.02)',
+    },
+    {
+        line: '#EE6666',
+        gradientStart: 'rgba(238,102,102,0.7)',
+        gradientEnd: 'rgba(238,102,102,0.02)',
+    },
+    {
+        line: '#FAC858',
+        gradientStart: 'rgba(250,200,88,0.7)',
+        gradientEnd: 'rgba(250,200,88,0.02)',
+    },
+    {
+        line: '#73C0DE',
+        gradientStart: 'rgba(115,192,222,0.7)',
+        gradientEnd: 'rgba(115,192,222,0.02)',
+    },
+    {
+        line: '#FC8452',
+        gradientStart: 'rgba(252,132,82,0.7)',
+        gradientEnd: 'rgba(252,132,82,0.02)',
+    },
+    {
+        line: '#9A60B4',
+        gradientStart: 'rgba(154,96,180,0.7)',
+        gradientEnd: 'rgba(154,96,180,0.02)',
+    },
+    {
+        line: '#EA7CCC',
+        gradientStart: 'rgba(234,124,204,0.7)',
+        gradientEnd: 'rgba(234,124,204,0.02)',
+    },
+];
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Group metrics by metric_type, then by metric_name within each type. */
+function groupByType(metrics) {
+    const byType = new Map();
+    for (const m of metrics) {
+        const mtype = m.metric_type || 'other';
+        if (!byType.has(mtype))
+            byType.set(mtype, new Map());
+        const nameMap = byType.get(mtype);
+        const key = m.metric_name || '(unnamed)';
+        if (!nameMap.has(key))
+            nameMap.set(key, []);
+        nameMap.get(key).push({
+            ts: new Date(m.timestamp).getTime(),
+            value: m.value,
+        });
+    }
+    // Sort points chronologically within each name group.
+    for (const nameMap of byType.values()) {
+        for (const points of nameMap.values()) {
+            points.sort((a, b) => a.ts - b.ts);
+        }
+    }
+    return byType;
+}
+/** Human-friendly label for a metric type. */
+function typeTitle(mtype) {
+    switch (mtype) {
+        case 'sum':
+            return 'Counters (sum)';
+        case 'histogram':
+            return 'Histograms';
+        case 'gauge':
+            return 'Gauges';
+        case 'exponentialHistogram':
+            return 'Exponential Histograms';
+        default:
+            return mtype.charAt(0).toUpperCase() + mtype.slice(1);
+    }
+}
+/** Label variant for the type badge. */
+function typeVariant(mtype) {
+    switch (mtype) {
+        case 'gauge':
+            return 'accent';
+        case 'sum':
+            return 'attention';
+        case 'histogram':
+            return 'secondary';
+        case 'exponentialHistogram':
+            return 'success';
+        default:
+            return 'primary';
+    }
+}
+/** Preferred display order. Types not listed appear at the end. */
+const TYPE_ORDER = {
+    sum: 0,
+    histogram: 1,
+    gauge: 2,
+    exponentialHistogram: 3,
+};
+// ── Build ECharts option per type ──────────────────────────────────
+function buildOption(mtype, nameMap) {
+    const names = [...nameMap.keys()];
+    const baseLegend = {
+        data: names,
+        top: 6,
+        textStyle: { fontSize: 11 },
+    };
+    const baseGrid = { left: 50, right: 20, top: 40, bottom: 30 };
+    const baseTooltip = {
+        trigger: 'axis',
+        axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
+    };
+    const baseXAxis = {
+        type: 'time',
+        boundaryGap: false,
+        axisLine: { lineStyle: { color: '#ccc' } },
+        axisLabel: { fontSize: 10 },
+    };
+    const baseYAxis = {
+        type: 'value',
+        splitLine: { lineStyle: { type: 'dashed', color: '#e8e8e8' } },
+        axisLine: { show: false },
+        axisLabel: { fontSize: 10 },
+    };
+    if (mtype === 'histogram' || mtype === 'exponentialHistogram') {
+        // ── Bar chart ──
+        const series = names.map((name, idx) => {
+            const palette = SERIES_COLORS[idx % SERIES_COLORS.length];
+            const points = nameMap.get(name) ?? [];
+            return {
+                name,
+                type: 'bar',
+                barMaxWidth: 20,
+                itemStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: palette.gradientStart },
+                        { offset: 1, color: palette.line },
+                    ]),
+                    borderRadius: [2, 2, 0, 0],
+                },
+                emphasis: { focus: 'series' },
+                data: points.map(p => [p.ts, p.value]),
+            };
+        });
+        return {
+            tooltip: baseTooltip,
+            legend: baseLegend,
+            grid: baseGrid,
+            xAxis: { ...baseXAxis, boundaryGap: true },
+            yAxis: baseYAxis,
+            series,
+        };
+    }
+    if (mtype === 'gauge') {
+        // ── Simple line chart (no area) ──
+        const series = names.map((name, idx) => {
+            const palette = SERIES_COLORS[idx % SERIES_COLORS.length];
+            const points = nameMap.get(name) ?? [];
+            return {
+                name,
+                type: 'line',
+                smooth: true,
+                symbol: 'circle',
+                symbolSize: 5,
+                showSymbol: true,
+                lineStyle: { width: 2, color: palette.line },
+                itemStyle: { color: palette.line },
+                emphasis: { focus: 'series' },
+                data: points.map(p => [p.ts, p.value]),
+            };
+        });
+        return {
+            tooltip: baseTooltip,
+            legend: baseLegend,
+            grid: baseGrid,
+            xAxis: baseXAxis,
+            yAxis: baseYAxis,
+            series,
+        };
+    }
+    // ── Default (sum / other): area-line with gradient ──
+    const series = names.map((name, idx) => {
+        const palette = SERIES_COLORS[idx % SERIES_COLORS.length];
+        const points = nameMap.get(name) ?? [];
+        return {
+            name,
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: { width: 2, color: palette.line },
+            itemStyle: { color: palette.line },
+            areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    { offset: 0, color: palette.gradientStart },
+                    { offset: 1, color: palette.gradientEnd },
+                ]),
+            },
+            emphasis: { focus: 'series' },
+            data: points.map(p => [p.ts, p.value]),
+        };
+    });
+    return {
+        tooltip: baseTooltip,
+        legend: baseLegend,
+        grid: baseGrid,
+        xAxis: baseXAxis,
+        yAxis: baseYAxis,
+        series,
+    };
+}
+function computeStats(nameMap) {
+    let total = 0;
+    let count = 0;
+    let startTs = null;
+    let endTs = null;
+    for (const points of nameMap.values()) {
+        for (const p of points) {
+            total += p.value;
+            count += 1;
+            if (startTs === null || p.ts < startTs)
+                startTs = p.ts;
+            if (endTs === null || p.ts > endTs)
+                endTs = p.ts;
+        }
+    }
+    return { total, count, startTs, endTs };
+}
+function formatTs(ts) {
+    return new Date(ts).toLocaleTimeString(undefined, {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+}
+function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    const s = Math.round(ms / 1000);
+    if (s < 60)
+        return `${s}s`;
+    const m = Math.floor(s / 60);
+    const rem = s % 60;
+    return rem > 0 ? `${m}m ${rem}s` : `${m}m`;
+}
+// ── Component ───────────────────────────────────────────────────────
+export const OtelMetricsChart = ({ metrics, height = 240, }) => {
+    if (!metrics || metrics.length === 0) {
+        return (_jsx(ReactECharts, { echarts: echarts, option: {
+                title: {
+                    text: 'No metrics data',
+                    left: 'center',
+                    top: 'center',
+                    textStyle: { color: '#999', fontSize: 14, fontWeight: 'normal' },
+                },
+            }, style: { width: '100%', height: `${height}px` }, notMerge: true }));
+    }
+    const byType = groupByType(metrics);
+    // Sort types in a stable, user-friendly order.
+    const sortedTypes = [...byType.keys()].sort((a, b) => (TYPE_ORDER[a] ?? 99) - (TYPE_ORDER[b] ?? 99));
+    return (_jsx(Box, { sx: {
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: 2,
+        }, children: sortedTypes.map(mtype => {
+            const nameMap = byType.get(mtype);
+            const option = buildOption(mtype, nameMap);
+            const stats = computeStats(nameMap);
+            const durationMs = stats.startTs !== null && stats.endTs !== null
+                ? stats.endTs - stats.startTs
+                : null;
+            return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            px: 1,
+                            mb: 1,
+                        }, children: [_jsx(Label, { size: "small", variant: typeVariant(mtype), children: mtype }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.muted' }, children: typeTitle(mtype) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["(", [...nameMap.keys()].join(', '), ")"] })] }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 3,
+                            px: 1,
+                            mb: 1,
+                        }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Sum:" }), ' ', stats.total.toLocaleString(undefined, {
+                                        maximumFractionDigits: 4,
+                                    })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Points:" }), ' ', stats.count] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Interval:" }), ' ', formatTs(stats.startTs), " \u2192 ", formatTs(stats.endTs), durationMs !== null && durationMs > 0 && (_jsxs(Text, { as: "span", sx: { color: 'fg.subtle' }, children: [' ', "(", formatDuration(durationMs), ")"] }))] }))] }), _jsx(ReactECharts, { echarts: echarts, option: option, style: { width: '100%', height: `${height}px` }, notMerge: true })] }, mtype));
+        }) }));
+};
+export default OtelMetricsChart;

package/lib/otel/OtelMetricsList.d.ts

@@ -0,0 +1,15 @@
+/**
+ * OtelMetricsList – Tabular view of metric data points grouped by
+ * metric name, with expandable rows showing individual data points.
+ *
+ * Uses Primer React components for consistent theming.
+ *
+ * @module otel/OtelMetricsList
+ */
+import React from 'react';
+import type { OtelMetric } from './types';
+export interface OtelMetricsListProps {
+    metrics: OtelMetric[];
+    loading?: boolean;
+}
+export declare const OtelMetricsList: React.FC<OtelMetricsListProps>;