Conversation
❌ Deploy Preview for datalayer-core failed.
|
There was a problem hiding this comment.
Pull request overview
Adds OTEL (OpenTelemetry) support across the TypeScript library, Python client/CLI, docs, and example apps, plus IAM token deletion UX improvements.
Changes:
- Introduces
src/otel/*React components/hooks/types and OTEL API client exports (src/api/otel/*), and exports them from the package entrypoints. - Adds reusable IAM/profile views (
SignInSimple,UserBadge) and JWT utilities (src/utils/Jwt.ts) to support authentication flows. - Expands examples (OTEL FastAPI+Vite app, Next.js app, Streamlit/FastAPI/PyTorch/simple Python examples) and documentation updates (Docusaurus OTEL section).
Reviewed changes
Copilot reviewed 84 out of 126 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/profile/index.ts | Exports UserBadge view. |
| src/views/profile/UserBadge.tsx | Hover popover displaying decoded JWT details. |
| src/views/index.ts | Re-exports views/iam and views/profile. |
| src/views/iam/index.ts | Exports SignInSimple view. |
| src/views/iam/SignInSimple.tsx | Simple handle/password sign-in form. |
| src/views/iam-tokens/Tokens.tsx | Adds delete-token flow with confirmation + toast. |
| src/views/iam-tokens/IAMTokens.tsx | Adds delete-token flow with confirmation + toast. |
| src/views/iam-tokens/IAMTokenEdit.tsx | Adds “danger zone” delete with name confirmation. |
| src/utils/index.ts | Re-exports JWT utilities. |
| src/utils/Jwt.ts | Adds lightweight JWT payload decode helpers. |
| src/state/substates/CoreState.ts | Adds otelRunUrl default config field. |
| src/otel/utils.ts | Adds OTEL UI helpers (time/duration/tree building). |
| src/otel/types.ts | Adds OTEL UI types + component props. |
| src/otel/index.ts | Public OTEL module exports (types/hooks/components). |
| src/otel/OtelTracesList.tsx | Traces list UI with expandable span tree rows. |
| src/otel/OtelTimeline.tsx | Waterfall timeline span visualization. |
| src/otel/OtelSystemView.tsx | OTEL system stats view UI. |
| src/otel/OtelSpanTree.tsx | Nested span tree component. |
| src/otel/OtelSearchBar.tsx | Signal/service/query filter bar. |
| src/otel/OtelLogsList.tsx | Logs list UI with expandable details. |
| src/index.ts | Exports OTEL + views from package root. |
| src/hooks/useCache.ts | Adds useDeleteToken + refactors CreateAgentRuntimeRequest type. |
| src/config/Configuration.ts | Adds otelRunUrl to core config type. |
| src/api/otel/types.ts | OTEL API DTO types. |
| src/api/otel/traces.ts | OTEL traces API functions. |
| src/api/otel/services.ts | OTEL service/health/stats/flush API functions. |
| src/api/otel/query.ts | OTEL SQL query API function. |
| src/api/otel/metrics.ts | OTEL metrics list/query API functions. |
| src/api/otel/logs.ts | OTEL logs query API functions. |
| src/api/otel/index.ts | OTEL API submodule exports. |
| src/api/index.ts | Exposes OTEL API module. |
| src/api/constants.ts | Adds OTEL base path + default service URL. |
| pyproject.toml | Adds httpx and OTEL extras dependencies. |
| package.json | Adds subpath exports (./otel, ./views/*, ./utils/jwt) and updates workspace scripts. |
| examples/streamlit/requirements.txt | Streamlit example deps. |
| examples/streamlit/app/scripts/train.py | Streamlit example training script. |
| examples/streamlit/app/scripts/snapshot.py | Streamlit example snapshot creation. |
| examples/streamlit/app/scripts/predict.py | Streamlit example prediction script. |
| examples/streamlit/app/scripts/init.py | Streamlit scripts package init. |
| examples/streamlit/app/models.py | Streamlit example Pydantic models. |
| examples/streamlit/app/main.py | Streamlit app wiring to Datalayer runtime. |
| examples/streamlit/app/init.py | Streamlit app package init. |
| examples/streamlit/README.md | Streamlit example docs path updates. |
| examples/simple/runtime_quickstart_nocontext.py | New simple runtime quickstart (no context manager). |
| examples/simple/runtime_quickstart.py | New simple runtime quickstart (context manager). |
| examples/simple/README.md | Simple example README. |
| examples/simple/Makefile | Simple example Make targets. |
| examples/pytorch/requirements.txt | PyTorch example deps. |
| examples/pytorch/main.py | PyTorch benchmark runner. |
| examples/pytorch/benchmark.py | PyTorch benchmark implementation. |
| examples/pytorch/README.md | PyTorch example docs path updates. |
| examples/otel/ui/vite.config.ts | OTEL UI Vite config + env wiring. |
| examples/otel/ui/tsconfig.json | OTEL UI TS config. |
| examples/otel/ui/style/primer-primitives.css | Primer primitives CSS imports for OTEL UI. |
| examples/otel/ui/src/views/index.ts | OTEL UI views barrel export. |
| examples/otel/ui/src/views/TracesView.tsx | Traces-only OTEL view. |
| examples/otel/ui/src/views/SystemView.tsx | System stats OTEL view. |
| examples/otel/ui/src/views/SqlView.tsx | SQL OTEL view wrapper. |
| examples/otel/ui/src/views/MetricsView.tsx | Metrics-only OTEL view. |
| examples/otel/ui/src/views/LogsView.tsx | Logs-only OTEL view. |
| examples/otel/ui/src/views/DashboardView.tsx | Main OTEL dashboard view wrapper. |
| examples/otel/ui/src/stores/themedProvider.tsx | Theme provider wrapper for OTEL UI. |
| examples/otel/ui/src/stores/themeStore.ts | Zustand theme store for OTEL UI. |
| examples/otel/ui/src/stores/authStore.ts | Zustand auth store for OTEL UI. |
| examples/otel/ui/src/main.tsx | OTEL UI entrypoint. |
| examples/otel/ui/src/header/index.ts | OTEL header barrel export. |
| examples/otel/ui/src/header/ThemeSwitcher.tsx | Theme switcher wiring. |
| examples/otel/ui/src/header/OtelHeader.tsx | OTEL UI header with generators + user badge. |
| examples/otel/ui/src/App.tsx | OTEL example app shell + routing/tabs. |
| examples/otel/ui/package.json | OTEL UI package definition. |
| examples/otel/ui/index.html | OTEL UI HTML entry. |
| examples/otel/requirements.txt | OTEL FastAPI example deps. |
| examples/otel/app/main.py | FastAPI generator/proxy server for OTEL example. |
| examples/otel/app/init.py | OTEL FastAPI app init. |
| examples/otel/README.md | OTEL example documentation. |
| examples/otel/Makefile | OTEL example make targets. |
| examples/nextjs/tsconfig.json | Next.js example TS config. |
| examples/nextjs/src/utils/runtimeStorage.ts | Runtime localStorage utilities. |
| examples/nextjs/src/styles/globals.css | Next.js global styles. |
| examples/nextjs/src/hooks/useClientStore.ts | Client-only store accessor hook. |
| examples/nextjs/src/contexts/ActiveNotebookContext.tsx | Active notebook context provider. |
| examples/nextjs/src/components/Providers.tsx | Next.js app providers + layout chrome. |
| examples/nextjs/src/components/NotebookViewer.tsx | Next.js notebook viewer integration. |
| examples/nextjs/src/components/Footer.tsx | Next.js footer (includes source link). |
| examples/nextjs/src/components/AppNavBar.tsx | Next.js app navigation bar. |
| examples/nextjs/src/app/welcome/page.tsx | Welcome/login page for Next.js example. |
| examples/nextjs/src/app/viewer/page.tsx | Viewer route wrapper. |
| examples/nextjs/src/app/page.tsx | Root redirect page. |
| examples/nextjs/src/app/notebooks/page.tsx | Notebooks route wrapper. |
| examples/nextjs/src/app/layout.tsx | Next.js root layout. |
| examples/nextjs/src/app/environments/page.tsx | Environments listing page. |
| examples/nextjs/public/favicon.png | Adds favicon asset. |
| examples/nextjs/package.json | Renames workspace package to nextjj-example. |
| examples/nextjs/next.config.mjs | Adds Next.js config for transpiles/headers/rewrites. |
| examples/nextjs/README.md | Next.js example README path updates. |
| examples/nextjs/.gitignore | Next.js example ignore rules. |
| examples/nextjs/.eslintrc.json | Next.js ESLint config. |
| examples/fastapi/requirements.txt | FastAPI sklearn example deps. |
| examples/fastapi/app/scripts/train.py | FastAPI example training script. |
| examples/fastapi/app/scripts/snapshot.py | FastAPI example snapshot creation. |
| examples/fastapi/app/scripts/predict.py | FastAPI example prediction script. |
| examples/fastapi/app/scripts/init.py | FastAPI scripts package init. |
| examples/fastapi/app/models.py | FastAPI example Pydantic models. |
| examples/fastapi/app/main.py | FastAPI app for predictions. |
| examples/fastapi/README.md | FastAPI example docs path updates. |
| examples/README.md | Updates example index links to new paths. |
| docs/docusaurus.config.js | Adds OTEL doc entry in navbar; title casing change. |
| docs/docs/otel/index.md | Adds OTEL client docs page. |
| docs/docs/otel/category.yml | Adds OTEL doc category. |
| datalayer_core/otel/config.py | Adds OTEL client config via env vars. |
| datalayer_core/otel/client.py | Adds Python OTEL REST client. |
| datalayer_core/otel/init.py | Exposes OtelClient. |
| datalayer_core/cli/main.py | Registers OTEL CLI command group. |
| README.md | Updates Next.js example path reference. |
| CLAUDE.md | Updates Next.js example path reference. |
Comments suppressed due to low confidence (2)
examples/nextjs/src/components/Footer.tsx:90
- This link targets
.../examples/nextjj, but the GitHub path is.../examples/nextjs(unless the directory is actually renamed). Update the URL to avoid a broken “Example Source Code” link.
examples/nextjs/README.md:44 - Setup instructions use
cd core/examples/nextjj, but the example lives undercore/examples/nextjsin this repo. Update the path (or rename the folder) to keep the README runnable.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+7
to
+14
| * UserBadge – Shows the authenticated user's display name. | ||
| * | ||
| * On hover, reveals a JWT details popover with email, handle, UID, | ||
| * issued/expiry timestamps, roles, and the raw decoded claims. | ||
| * | ||
| * The trigger text and the popover share a single container so the | ||
| * popover stays open while the mouse travels from the label into it. | ||
| * |
There was a problem hiding this comment.
This component renders raw decoded JWT claims (including PII like email/UID/roles) on hover. Since this is exported from the core library, consider making the raw-claims section opt-in (prop/feature flag) or removing it by default to reduce accidental disclosure in production UIs (screenshares, shared terminals, etc.).
|
|
||
| ```bash | ||
| cd examples/nextjs-notebook | ||
| cd examples/nextjj |
There was a problem hiding this comment.
The README instructions reference examples/nextjj, but the repository contains examples/nextjs (workspace name is nextjj-example). Either rename/move the directory to match the docs, or update the docs back to the correct path so users can follow the setup steps.
Suggested change
| cd examples/nextjj | |
| cd examples/nextjs |
| ## 📓 Interactive Notebooks | ||
|
|
||
| ### ⚛️ [Next.js + Datalayer Notebook](./nextjs-notebook/README.md) | ||
| ### ⚛️ [Next.js + Datalayer Notebook](./nextjj/README.md) |
There was a problem hiding this comment.
Link points to ./nextjj/README.md, but the Next.js example directory is ./nextjs/. Update the link (or rename the folder) so the examples index doesn’t contain a broken path.
Suggested change
| ### ⚛️ [Next.js + Datalayer Notebook](./nextjj/README.md) | |
| ### ⚛️ [Next.js + Datalayer Notebook](./nextjs/README.md) |
Comment on lines
+141
to
+160
| export function buildSpanTree(spans: OtelSpan[]): OtelSpan[] { | ||
| const byId = new Map<string, OtelSpan>(); | ||
| const enriched: OtelSpan[] = spans.map(s => ({ | ||
| ...s, | ||
| children: [], | ||
| depth: 0, | ||
| })); | ||
|
|
||
| for (const s of enriched) { | ||
| byId.set(s.span_id, s); | ||
| } | ||
|
|
||
| const roots: OtelSpan[] = []; | ||
|
|
||
| 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 { |
There was a problem hiding this comment.
buildSpanTree indexes spans only by span_id, ignoring trace_id. Span IDs are only guaranteed unique within a trace, so with multiple traces in the input this can attach children to the wrong parent (or collapse different traces) if IDs collide. Key the map by ${trace_id}:${span_id} and resolve parent_span_id within the same trace_id (or pre-group by trace).
Comment on lines
+37
to
39
| const [deletingToken, setDeletingToken] = useState<IIAMToken | null>(null); | ||
| const returnFocusRef = useRef(null); | ||
| useEffect(() => { |
There was a problem hiding this comment.
useRef(null) infers MutableRefObject<null>, which is not assignable to a button ref in strict TS and can cause type errors. Use useRef<HTMLButtonElement | null>(null) (or the specific element type expected by IconButton) instead.
Comment on lines
125
to
132
| **Next.js Notebook Example:** | ||
|
|
||
| Located in `examples/nextjs-notebook/`, this is a full Next.js application demonstrating platform integration: | ||
| Located in `examples/nextjj/`, this is a full Next.js application demonstrating platform integration: | ||
|
|
||
| ```bash | ||
| cd examples/nextjs-notebook | ||
| cd examples/nextjj | ||
| npm install | ||
| npm run dev |
There was a problem hiding this comment.
This doc points to examples/nextjj/, but the repo directory is examples/nextjs/. Either rename the folder accordingly or update this path so the example can be found and run.
Comment on lines
+15
to
+19
| export function toMs(ts: string | number): number { | ||
| 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 |
There was a problem hiding this comment.
toMs misclassifies microsecond epoch timestamps: current threshold treats values >1e15 as nanoseconds, but µs-since-epoch is ~1.7e15 today, so it will be divided by 1e6 and produce an incorrect 1970-era date. Adjust thresholds (e.g., nanos >1e17, micros >1e14) or detect by digit-length to avoid wrong time rendering.
Comment on lines
+44
to
46
| const [deletingToken, setDeletingToken] = useState<IIAMToken | null>(null); | ||
| const returnFocusRef = useRef(null); | ||
| useEffect(() => { |
There was a problem hiding this comment.
useRef(null) infers MutableRefObject<null>, which is not assignable to a button ref in strict TS and can cause type errors. Use useRef<HTMLButtonElement | null>(null) (or the specific element type expected by IconButton) instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.