## What
Redesign of the log patterns UI.
- **`PatternCard`** reworked: template tokens, a badges row (trend /
rarity / anomaly), and inline frequency + percentage replace the old
fixed count and action columns.
- **`PatternVolumeCell`** (new) + **`usePatternVolume`** (new) render
per-pattern volume sparklines.
- **`PatternDetailsDialog`** now owns the include / exclude /
create-alert actions that previously lived on each card.
- **`patternUtils`** / **`usePatternActions`** extended to back the
above.
## Test plan
- `web` unit tests for the touched areas: 356 passing, 0 failing
(`plugins/logs/patterns`, `plugins/logs/data-table`, `SearchResult`,
`FieldValuesPanel`).
- New spec coverage for `PatternVolumeCell`, `usePatternVolume`, and
`patternUtils`.
- `npm run type-check` clean.
- `lint:design`, `lint:tokens`, `lint:token-purity` all clean.
## Notes
Rebased onto latest `main`. Five conflicts came from main's repo-wide
type-check pass (#13174), which made `OIcon`'s `name` prop required.
Main's fix (`name=""` + slot) was kept in `CodeQueryEditor.vue`,
`FieldValuesPanel.vue`, and `CellActions.vue`; in `PatternCard.vue` the
surrounding block was removed by this redesign, so the deletion stands.
chore: update package.json scripts for improved type-checking
fix: adjust frontmatter regex to handle BOM characters
refactor: streamline error handling in dashboard data conversion
style: clean up comments and formatting in various files
## What changed
Removes the automatic migration of the `status` field to `span_status`
in spans search mode, and passes the current `searchMode` to column
definition generation so `status` is treated as a generic data column in
spans mode instead of getting traces-mode special column rendering.
Alongside this, the TenstackTable header actions area gets a
hover-visibility fix and the old `.logs-table` CSS block for column
actions is deleted in favour of the generic `group-hover:visible`
approach.
## Why
The previous code was conflating the `status` data field (a legitimate
user-configurable column in spans mode) with the "Span Status" column
definition that is meaningful only in traces mode. This meant any user
who had `status` saved in their spans column preferences would have it
silently renamed to `span_status`, which either broke the column or
showed incorrect data.
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
## What
Adds **Agent Behavior signals** — a PB-safe rollup that surfaces two
behavioural questions the platform couldn't answer before: *is an agent
stuck in a loop?* and *why is it failing?* Plus a batch of Agent Graph /
AI Observability UX and correctness fixes found while building it.
Companion changes land in **o2-enterprise**
(`feat/agent-signals-enterprise-split`): the SQL builders, mappers,
config-driven failure taxonomy, the service-graph agent-classification
fix, and the RBAC route entry.
## Backend (agent-signals)
- Bounded-key rollup co-located in the service-graph job
(alert-manager-only, reuses its watermark + self-ingest). Groups only on
agent/tool/class — never trace_id — so it stays PB-safe.
- Config-driven **failure taxonomy** (rules as data, evolvable without
code) + config-driven error-detail columns; ancestor-agent resolution so
error spans attribute to the owning agent.
- Read API `GET /{org}/traces/agent_signals` (dual `#[cfg]`, reads the
derived `_agent_signals` stream) + RBAC route entry (enterprise
`route_permissions`) mapping it to `traces` read.
- OSS/enterprise split respected: pure SQL/mapping in enterprise, thin
gated I/O in OSS.
- Fix: `traces/latest` only narrows to a UUIDv7 trace_id's embedded time
when that time is inside the caller's window (fixes "trace not found"
for time-shifted/re-ingested traces).
## Frontend (AI Observability)
- New **Agent Behavior** page under Monitor: looping-agents +
failure-taxonomy tables, each row opening an actionable detail drawer
(real grouped error messages / worst-repeat traces), click-through to
Trace Details in a new tab.
- Agent-node **Behavior tab** on the Agent Graph node drawer (reuses the
same signals).
- Nav rename: LLM Insights → **Insights**, LLM Sessions → **Sessions**.
- **Agent** is the default scope across the AI pages, with the
Agent|Stream toggle placed consistently (left scope bar); explicit
URL/localStorage choices still win.
- Removed the duplicate in-table refresh on Sessions.
## Agent Graph fixes
- **Agent classification**: agents that also call tools now correctly
classify as `service_type: "agent"` (they glow), fixing a latent
precedence bug where the tool/model client-role overrode the agent role
and `is_real_service` forced agents to plain services. Rust
`classify_entity` brought in line with the (already-correct) TS twin.
- **Drag-to-pan restored**: the shared ChartRenderer armed
`dataZoomSelect` cursor unconditionally, hijacking drag away from roam
pan. Disabled for this graph (no dataZoom).
- **Nodes scale on zoom** (`nodeScaleRatio: 1`) so zooming enlarges
nodes/labels, not just spacing.
## Testing
- Enterprise unit tests: agent-signals SQL/mappers/config,
classification precedence, RBAC route resolution — all pass.
- FE: type-check + lint clean.
- Verified end-to-end on real re-ingested introspection data: taxonomy
unclassified rate ~100% → ~1–3%, agents resolved, both agents
classify/glow, trace-open works.
## Notes
- `Cargo.toml`/`Cargo.lock` and unrelated Slack-bot files were
intentionally excluded from the commits (local build-config drift).
---------
Co-authored-by: ktx-vaidehi <vaidehi.akhani@kiara.tech>
Co-authored-by: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
# Design System Unification — one visual language, enforced end-to-end
Establishes **one source of truth for every visual decision**, wires the
whole app to it, and **locks it in with CI** so it can't drift back.
### Foundations
- **Design-token system ("one knob per decision").** Every colour, text
size, spacing, corner radius, and shadow is a named token defined in
exactly one place — change the token, every screen updates. Collapsed
hundreds of near-duplicate definitions and removed "fake" duplicates
that pretended to be different but weren't.
- **Shared component library (O2).** Buttons, tables, dialogs, drawers,
form fields, badges, etc. already know the correct colours, spacing, and
dark-mode behaviour; new screens compose them instead of hand-styling.
Added new primitives on this branch (`OContent`, `KpiCard`) and
standardized existing ones.
- **One page structure everywhere** (`PageLayout` / `AppPageHeader` /
`AppPage` / `OContent`) — titles, breadcrumbs, spacing, and content
edges line up identically across every screen.
- **One table implementation** — all tabular data uses the same table
(sorting, density, sticky headers, empty states).
- **Styling consolidated onto Tailwind; old systems removed** —
hand-written CSS driven to the practical minimum, the legacy **Quasar**
framework fully removed, surviving stylesheets required to justify
themselves.
- **Two-tier corner radius** — a tight **4px** for controls and a soft
**12px** for surfaces (dialogs, cards, the app shell), plus a
full-circle option — replacing five radius names that all secretly meant
the same thing.
### Detailed improvements across screens
**Page structure & alignment** — unified page shell rolled across ~40+
screens (IAM, Settings, Alerts, Dashboards, Functions, Pipelines, RUM,
Metrics, Synthetics, Billing, editors, lists); one header height; one
page-edge grid driving headers, tables, rails, and tabs; unified
side-rail widths; inset rail selection/hover pills; every tab strip on
the grid line; tightened title/subtitle spacing.
**Tables (cross-screen)** — action columns consistently centered (incl.
Organizations); unified row-number column with no "#" truncation;
non-standard tables restyled to match; loading skeletons made
geometrically identical to the loaded table; symmetric edge inset; IAM
first-column grid alignment fixed.
**Traces** — flame graph + span-detail correlation panel fixes;
correlated logs/metrics placeholder fit; sticky headers; removed a
double scrollbar + a 1px sliver; aligned table fonts/badges; polished
the service detail drawer; stream-selector + correlation alignment;
aligned loading spinners; floating overlay arrows for the
disabled-services strip.
**Logs** — field-list controls aligned (focus ring no longer clipped);
detail-drawer spacing + metrics-tab overflow fixed; Run Query toolbar
tidied; listing sizing + stray border fixed.
**Metrics** — search added to the "Type" facet rail and aligned with the
other rails; proper empty states for the explorer and facet rail.
**Dashboards** — removed inconsistent card shadows; tightened
borders/resizers/field-list spacing; aligned View Dashboard chrome to
the grid; chart colours via the token helper.
**Home** — redesigned the Usage tab; added reusable KPI stat cards so
summary strips stop drifting.
**Dark mode** — new theme-switch animation; fixed a 1px content shift on
toggle and a white flash on load; fixed AI-chat text and assorted
light/dark mismatches; completed the token-driven dark migration.
**Empty states, controls & small polish** — restored 3 broken
empty-state animations; adopted the standard empty state; added the
sliding indicator to the toggle control; fixed the Quality-page inset +
drawer badge; refreshed Search History / Schedulers; fixed the
alert-history drawer scrollbar + timeline hover; removed a stray
menu-bar border.
### Dead code & cruft removal
- **Deleted the entire legacy `utilities.css`** global stylesheet (well
over a thousand lines) — evacuated in waves, roughly half of it dead
once traced.
- **Removed Quasar entirely**, including dead `.q-*` styles and ~25
phantom `--q-*` variables that were silently breaking bits of the UI.
- Stripped hundreds of **dead CSS classes and tokens that compiled to
nothing** — e.g. 46 uses of a colour class with no backing token, a
no-op shadow class on 51 elements, dead layout/utility classes, a
leftover `card-container` block, a dead table-actions token, and a
mis-registered gradient that rendered nothing.
- Cut **unused keyframe animations (19 → 3)** and removed **unused
components** + a stray build artifact.
- Net effect: a much smaller, leaner styling surface — less to maintain,
fewer dead ends to copy.
## Safety & verification
Large but low-risk: this is overwhelmingly a **styling and structure**
change, not product behaviour or data. Guarded by the
design-token/consistency/type checks above plus the existing test suite,
and reviewed screen-by-screen.
---------
Co-authored-by: Kirtan Thakkar <kirtan@kiara.tech>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: ktx-mihir <mihir.patel@kiara.tech>
## Summary
Replaces the AWS Translate i18n pipeline with a DeepSeek (LLM) backend,
standardizes locale files to BCP-47 naming with an `en-US` base, adds
new languages, and backfills **every locale to 100%**.
## What changed
### Translation engine (DeepSeek)
- Swap AWS Translate → DeepSeek via its OpenAI-compatible API
(`scripts/translations/`). Auth via the `DEEPSEEK_API_KEY` secret;
per-request 60s timeout.
- **Batched** translation (50/call) with **per-string validation**:
interpolation placeholders (`{count}`, `%s`, `@:key`), vue-i18n
**pluralization pipes** (`{n} Day \| {n} Days`), and literal escapes
(`{'@'}`, `{'{'}`, `{'\|'}`) are preserved or the string is rejected and
retried.
- Robust recovery: index-aligned batches, split-on-mismatch to isolate a
single bad string, temperature-perturbed retries, and rejection of
empty/whitespace output (never blanks a label). Removed the old
`TRANSLATION_MAX_KEYS` safety cap.
### Locale naming + base language
- All 15 locale files renamed to **BCP-47 hyphen** form (`en-US.json`,
`zh-CN.json`, `zh-TW.json`, `fr-FR.json`, …) — matching
`navigator.language` / `Intl` / HTML `lang`.
- **English base switched `en-gb` → `en-us`** (app code,
`fallbackLocale`, BCP-47 map, selector, defaults). British-Pound
currency and date-formatting `en-GB` usages left untouched. Existing
`en-gb` cookies fall back cleanly to English — no migration needed.
### New languages
- **Russian (`ru`), Polish (`pl`), Vietnamese (`vi`)** — fully generated
and wired into `localeFileMap`, `APP_LOCALE_TO_BCP47`, and the language
selector.
- **Traditional Chinese (`zh-TW`)** now maintained by the translator
alongside Simplified (`zh-CN`).
- RTL languages (`ar`, `fa`) intentionally **deferred** until the app
has `dir="rtl"` support.
### Full backfill (one-time)
- Every pre-existing locale filled from ~5.9k up to the full **8,269
keys** (~26.9k strings). `.translation_state.json` rebuilt complete, so
future runs are incremental.
### Nav i18n bug fix
- The **Dashboards** and **Data** nav group labels were hardcoded
English (bypassing i18n) and stayed English in every locale. Now
resolved via `t()` (`menu.dashboard`, new `menu.data`), localized and
re-resolving on language change.
## Verification
- Full web unit suite: **39,035 passed / 414 skipped / 0 failed** (1,167
files).
- `type-check` clean (0 TS errors).
- Locale registry sync spec green; all 15 files = 8,269 leaves.
- Translation engine verified live against `deepseek-v4-flash`.
## Notes
- Since all locales are now 100%, the post-merge `update-translations`
workflow will find nothing pending (no follow-up translation PR).
- `ar`/`fa` to be added with RTL support in a follow-up.
## Summary
Three pieces of frontend work from one session, all verified green.
### 1. i18n migration (the bulk)
Replaced **~1,250 hardcoded user-facing strings** across **157
components** with `vue-i18n` `t()` calls and added **1,373 English
keys** to `web/src/locales/languages/en.json`. Other languages are
populated by CI.
Coverage by area: dashboards (36), traces (26), logs (24), settings
(23), IAM (21), metrics/promql (10), RUM error tracking (8).
- Parameterized messages use named interpolation (`t('key', { n })` →
`"Deleted {n} item(s)"`).
- Keys are namespaced by area + component to avoid collisions.
- Deliberately **not** translated: copy/paste code/config snippets,
query-syntax examples (Syntax Guides), technical enum tokens (OTEL
statuses, metric types), config-default fallbacks, and download
filenames.
### 2. RUM Error Tracking UX
- **Auto-size the Issue column** so Trend / Events / Users /
First-Last-seen / Status stay visible at any screen width; long messages
and file paths truncate with tooltips instead of pushing columns
off-screen.
- **Removed the redundant refresh button** (it called the same
`runQuery` as Run query); folded its loading state and keyboard shortcut
into the Run query button.
### 3. MCP Server (IAM)
- Added **Codex** to the supported MCP clients (TOML config for
`~/.codex/config.toml`).
- Added **one-click "Add to …" install buttons** for **Cursor**, **VS
Code**, and **Claude Desktop** via editor deep links (respecting the
selected OAuth / access-token auth mode).
### Tests
Components that newly call `useI18n()` broke specs that mounted them
without an i18n provider (or with an inline message subset / a
key-returning mock). Fixed **33 spec files** by providing the real app
i18n — via `config.global` plugin, a full-locale `createI18n`, or a
key-resolving `vue-i18n` mock — **without weakening any assertion or
deleting any test**.
## Verification
- ✅ Full frontend unit suite: **39,007 passed**, 414 skipped, **0
failed** (`vitest run`).
- ✅ Type-check clean: **0 errors** (`vue-tsc`).
- ✅ `en.json` valid, canonical, and every `t()` key referenced by
changed files resolves (only 3 pre-existing dangling keys remain,
unrelated to this change).
## Notes
- 3 **pre-existing** broken key refs surfaced during validation but
predate this work and were left alone: `common.loading` (AiToolsets),
`search.vrlOnlyForTable` (SearchBar),
`settings.correlation.identityConfigNoSets` (ServiceIdentitySetup).
- An unrelated pre-existing local change to `OIcon.icons.ts` was
intentionally excluded from this PR.
## What
Adds an **Agent Graph** to AI Observability that renders AI agents,
tools, and models as first-class nodes in the service graph — unified
with the real downstream services an agent talks to. It answers "what
does my agent actually interact with?" (tools, models, services,
datastores) instead of showing GenAI spans in isolation.
## Why
LLM Insights shows plenty of per-call data but no picture of the flow —
where a request starts, where the agent sits, and everything it fans out
to. This surfaces the full agent topology, works across every framework
OpenObserve documents, and correctly attributes tools/models to the
owning agent even when the instrumentation nests them several spans
deep.
## Backend (`src/core`)
- **Agent/tool/model edge families in the service-graph processor**
(`traces/service_graph/processor.rs`): derives `service → agent`, `agent
→ model`, `agent → tool` edges from the canonical `gen_ai_*` columns,
keyed on column presence (open operation-name vocabulary), schema-gated
so streams missing a column don't error.
- **Multi-level agent inheritance.** The owning agent name usually lives
on an *ancestor* span (real Google ADK nests `generate_content(agent) →
chat → execute_tool`), not on the tool/LLM span. The `from` climbs the
parent chain up to `AGENT_INHERIT_DEPTH` (4) levels —
`COALESCE(child.agent, p1…pN, service_name)` + chained ancestor `LEFT
JOIN`s — taking the nearest ancestor with an agent name. Extracted
`build_agent_or_service` / `build_ancestor_joins` as pure, unit-tested
helpers. (Recursive CTE was tried first but panics in the search engine;
a bounded chained join is supported and shallow-tree-cheap.)
- **Extractor coverage** for the framework conventions OpenObserve
documents (gen_ai semconv, OpenInference, traceloop, CrewAI, Google ADK,
LangChain, Langfuse): `is_llm_trace` gate now admits
OpenInference/framework agent+tool spans; `extract_tool_name` reads
`tool.name` / `langchain.tool.name` / `crewai.task.tools` / Langfuse
metadata; new attribute constants. All normalize into the canonical
`gen_ai.*` columns at ingest, so the query layer reads one column set
regardless of vendor.
## Frontend (`web/src`)
- **Standalone Agent Graph page** under AI Observability
(`AgentGraphPage.vue`) with Stream/Agent selectors and a DateTime
picker, matching the LLM Insights UX; route + rail item + i18n.
- **Graph rendering** (`convertTraceData.ts`, `ServiceGraph.vue`):
agent/tool/model node kinds, vendor brand logos on model nodes (reusing
the AI-integrations catalog logos), an animated "radar-ping" halo baked
into the agent symbol SVG so it stays centered and pans/zooms with the
node, and a layered-layout depth fix so `service < agent < model/tool`
renders correctly. Agent highlighting is gated to the Agent Graph page
(the Service Graph tab is unchanged).
- **Side-panel caller consistency** (`ServiceGraphNodeSidePanel.vue`):
the Operations table now resolves a tool/model node's caller with the
*same* ancestor-agent climb the graph edge uses, so the panel and graph
agree (previously the panel showed the host app as the caller).
Refactored the identity-field builder to emit aliased columns directly
(no fragile regex post-processing).
- **Design tokens** (`theme.ts`): added `cssToken(name, fallback)` to
resolve `--color-*` tokens at runtime for chart/SVG contexts (where
`var(--x)` can't be used), and routed the agent-accent + exact-match
health colors through it instead of hardcoded hex.
## Consistency
Service classification is mirrored TS ⇄ Rust; the shared
`classification_cases.json` vector (both copies kept identical) drives
unit tests in both languages.
## Testing
- Rust: multi-level inheritance + edge-attribution unit tests; `cargo
build` clean.
- Frontend: new specs for the graph conversion, layout,
model-vendor-logo, side-panel caller climb, and `cssToken`; full traces
suite green.
- Verified end-to-end on real production traces (SRE agent) and on
synthetic fixtures for CrewAI / OpenAI-Agents / Google ADK /
genai-semconv / LangChain — every framework attributes agent →
model/tool correctly.
## Notes
- Topology is read from the pre-aggregated `_o2_service_graph` stream
(the hourly incremental job), so it scales to large trace volumes — no
per-load raw-trace scan.
- The enterprise `classify_entity` / `build_topology` changes live in
the o2-enterprise repo and are required for the enterprise build.
## Problem
Opening the Streams list → filtering to a non-logs tab
(Metrics/Traces/Enrichment) → clicking the explore icon on a row lands
the user in the **Logs explorer** with that stream type. The only way
back to Logs was an icon-only ghost button in the sidebar that:
- rendered the **current** stream type's icon (e.g. bar-chart for
metrics), so it read as a passive *label*, not an action;
- exposed its meaning only via a tooltip;
- did the *opposite* of the icon shown (icon = where you are, click =
leave).
Meanwhile the prominent, labeled **Reset** button doesn't reset stream
type, so it's a decoy. Result: users get stranded in the Logs explorer
showing a non-logs stream (this was hit during DevRel testing).
## Fix
Replace the ambiguous badge with a clear **`swap-horiz` (⇄) switcher
icon** button, separated from the stream picker by a gap, with an
action-first **"Switch back to Logs"** tooltip.
**Behavior is unchanged** — the control is still gated on `streamType
!== 'logs'`, and one click still calls `onStreamTypeChange('logs')`. No
routing, service, or store changes.
### Before / After
| | |
|---|---|
| Before | ambiguous type-icon badge, tooltip-only meaning, cramped |
| After | `⇄` switcher icon, gap before the picker, action-first tooltip
|
## Housekeeping in the same file
- Migrated the banned legacy `--o2-border` token → `border-default`
design token.
- Removed the now-unused `streamTypes` / `streamTypeIcon` /
`streamTypeLabel` helpers.
## Tests
- Added focused unit tests in `IndexList.spec.ts`: control hidden when
type is logs, shown for non-logs, uses the `swap-horiz` icon, and click
still triggers `onStreamTypeChange('logs')`.
- Full `IndexList.spec.ts` suite passes (125 passed).
## Scope
One component (`web/src/plugins/logs/IndexList.vue`) + one i18n key.
Pure OSS frontend — no backend / enterprise gating.
## What changed
- **Traces duration filter fix**: Centralized SQL parser loading into a
shared module-level singleton (`tracesParser` / `loadTracesParser` in
`useTraces.ts`) instead of each child component (`IndexList.vue`,
`SearchBar.vue`, `TracesMetricsDashboard.vue`) loading its own parser
instance. `Index.vue` now calls `loadTracesParser()` once in
`onBeforeMount` and all consumers use the shared `tracesParser` ref.
- **SearchBar.vue cleanup**: Removed unused local `parser` variable and
orphaned `importSqlParser` / `onBeforeUnmount` hook; applied Prettier
formatting pass.
- **TracesMetricsDashboard.vue cleanup**: Removed unused `useParser`
import.
## Why
Duration filters were intermittently failing because `SearchBar.vue`,
`IndexList.vue`, and `TracesMetricsDashboard.vue` each loaded their own
WASM SQL parser instance in `onMounted`. The parser wasn't guaranteed to
be ready when `parseDurationWhereClause` (called from `Index.vue`'s
`buildSearch`) ran — particularly on fast navigations or when
`loadDashboard` triggered before the child component's parser finished
loading.
---------
Co-authored-by: Claude <noreply@anthropic.com>
## Summary
A pass of UI-consistency and empty-state fixes across the AI
Observability, Logs, and Settings surfaces. Brings several one-off /
hand-rolled UI patterns in line with the app's shared components
(`OEmptyState`, `OTable` selection, badge groups).
## Changes
| Area | Change | Files |
|---|---|---|
| LLM Model Pricing | Replaced the small faded `$` icon empty state with
the standard `OEmptyState` illustration; added `no-model-pricing` preset
and made it filter-aware (no-results + Clear filters vs. first-run card)
| `ModelPricingList.vue`, `presets.ts`, `en.json`, `hi.json` |
| Scorers list | Moved the "no LLM providers" empty state into the
table's `#empty` slot so the search bar + column header stay visible
(was hiding the whole table) | `ScorerList.vue` |
| Correlation → Traces | "No Traces Found" now uses `OEmptyState` with
the `trace` illustration instead of a small icon + text (both embedded
and drawer paths) | `TelemetryCorrelationDashboard.vue` |
| Logs "No events found" | Added `h-full` so the empty state centers
vertically in the results panel instead of sitting near the top |
`Index.vue` |
| Eval Jobs | Added multi-select checkboxes + bulk **Delete** action
with confirm dialog; selection pruned after reload | `EvalJobList.vue`,
`OnlineEvals.vue`, `en.json`, `hi.json` |
| Score Config → "Not declared" chip | Cramped custom `xs` badge →
default `sm`/`pill` sizing, matching sibling `Categorical` / `Active`
chips | `badgeGroups.ts` |
| Search History → More Details | Added spacing between the tab strip
and the JSON editor | `SearchHistory.vue` |
---------
Co-authored-by: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
## What changed
Fixed a mismatch between the request count displayed on a service graph
node label and the request count shown in the tooltip when hovering over
that node in the tree view.
## Why
In the service graph tree view, node labels use a direction-aware
`value` (e.g., requests from service A → service B), while the tooltip
was reading `node.requests` — the backend's node-level aggregate (sum of
all directions). This caused the two displays to show different numbers
for the same node.
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
## What changed
- **Removed** the native `scrollIntoView()` call from `SpanBlock.vue`'s
`onMounted` hook, which was fighting the user's manual scroll in a
virtualized list.
- **Added** `cancelScroll()` to `TraceTree.vue` — clears pending
timeouts and aborts the TanStack virtualizer retry loop by resetting
`currentScrollToIndex`.
- **Wired cancellations** in `TraceDetails.vue` — calls
`traceTreeRef.value?.cancelScroll?.()` when the sidebar closes, trace
details reset, or a new trace is loaded.
- **Added `onBeforeUnmount`** cleanup in `TraceTree.vue` so a queued
scroll can't fire against a torn-down virtualizer.
- **Added regression tests** in `SpanBlock.spec.ts`,
`TraceTree.spec.ts`, and `TraceDetails.spec.ts` covering all
scroll-cancellation paths.
## Why
When `TraceDetails.vue` is opened with a `span_id` query parameter,
`SpanBlock.vue` called `element.scrollIntoView()` on mount. Because rows
are virtualized via `@tanstack/vue-virtual`, a `SpanBlock` remounts
every time it scrolls into the viewport — so each remount snapped the
viewport back to the pre-selected span, fighting the user's manual
scroll. The issue only manifested when a `span_id` was pre-selected at
page load.
## What changed
- **`web/src/plugins/traces/SearchBar.vue`**: Fixed the Run Query button
by changing `variant="ghost"` to `variant="primary"`, restoring its
primary action styling (matches Logs SearchBar behavior).
- **`web/src/components/TenstackTable.vue`**: Fixed skeleton loader
background color to match the logs version. Added
`bg-(--o2-log-table-row-bg)` and `border-(--o2-log-table-row-border)`
tokens to skeleton rows. Replaced inline shimmer gradients with a
reusable `.o2-skel-pill` CSS class that uses OTable skeleton token
variables (`--color-skeleton-base`, `--color-skeleton-highlight`).
## Why
The Traces Run Query button had lost its primary styling and appeared
visually broken — it was rendering as a ghost button instead of the
prominent primary action button. The generic `TenstackTable.vue`
skeleton loaders had a different background color than the logs-specific
`TenstackTable.vue`, causing visual inconsistency.
---------
Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
## What this fixes
The scheduled **regression suite** started failing on `main` after
**#12764 (scoped scss styles removal)**, and validating the fix on the
**enterprise build** surfaced several more failures in the same family
(plus a couple unrelated ones). This PR heals **all of them**. Every fix
is either a page-object selector update or a small, inert `data-test`
hook — **no product behaviour changes**.
## Everything fixed
| Area | Test | Root cause | Fix | Verified |
|---|---|---|---|---|
| **Streams** regression | `query expand icon #9337` | #12764 replaced
`.editor-fullscreen` class with inline classes on `isFocused` |
`data-fullscreen` hook on the container + detect via it | ✅ local |
| **Alerts** regression | `Bug #9967 PromQL alert` | #12764 turned the
PromQL operator into `<OSelect
data-test="alert-threshold-operator-select">`, dropping
`.alert-v3-select` | data-test + popover-option pattern (+ fail-fast
fallback) | ✅ local |
| **RUM** (ENT) | 3× `sourcemap-ui` | #12764 moved
`.error-viewer-container` → data-test and dropped `.tags-title` |
rumPage selectors + `data-test="error-tags-title"` hook | ✅ local |
| **Logs-Features** (ENT) | `searchPatterns … wildcard chips` | chip
moved from `.wildcard-chip` class to `<OTag
data-test="pattern-card-wildcard-chip">` | target the data-test hook | ✅
local |
| **Traces** (ENT) | `service-graph` user/search-service status | health
badge moved from `.health-badge.<status>` classes to `<OTag
data-test="service-health-badge">` | read status from the badge's text |
⚙️ ENT CI¹ |
| **Dashboards-Core** | `line chart … camelCase zero values` | *(not
#12764)* a line chart whose series are entirely zero renders "No Data" |
one series counts all rows so the chart always renders | ✅ local |
¹ Traces service-graph needs an enterprise daemon that isn't available
locally; validated against the component's own unit spec
(`ServiceGraphNodeSidePanel.spec.ts`), confirmed on ENT CI.
## Root-cause themes
1. **#12764 (scoped SCSS removal)** deleted/renamed CSS classes that E2E
page objects targeted. It added `data-test` hooks to *some* elements but
not others — so tests anchored on bare `.class` selectors broke. The fix
everywhere is to move those anchors to durable `data-test` hooks.
2. **`OTag`/`OSelect` component migrations on `main`** continued this:
the components gained `data-test` hooks but the (enterprise-only) page
objects were never updated. Because those specs are `@enterprise`, OSS
CI never runs them — so they merged broken and only surfaced on the
enterprise build.
## Product-code touched (test hooks only, inert)
- `SearchBar.vue` — `data-fullscreen` attribute (no CSS/JS/snapshot
consumers; styling still driven by the existing `isFocused` class
binding)
- `ErrorTags.vue` — `data-test="error-tags-title"`
Everything else is under `tests/ui-testing/`.
## Verification
Verified locally against a fresh frontend build (all green): Streams
`#9337`, Alerts `#9967`, RUM (3), Dashboards-Core, Logs-Features
searchPatterns. Traces service-graph is validated via its component unit
spec + the enterprise CI run (it can't run locally without the
service-graph daemon).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
#12854
## What changed
Fixes a race condition where RED (metrics) queries were missing the
error filter on first click when `auto_query_enabled` is true. The root
cause was that `onDataZoom` in `TracesMetricsDashboard.vue` emitted
`"time-range-selected"` *after* `"filters-updated"`, so queries
triggered by the filter change ran with stale time range data. The fix
reorders these two events and adds `await nextTick()` between them.
Additionally, the `filter` and `timeRange` props were removed from
`TracesMetricsDashboard.vue` — the component now reads `editorValue` and
`datetime` directly from `searchObj.data`, and the `setCustomDate.vue`
component moves `markProgrammaticDateChange` to the end of the save
flow.
## Why
The bug (RED queries not receiving the latest error filter on first
auto-query) was caused by event ordering: `"time-range-selected"` fired
after `"filters-updated"`, meaning the query triggered by the filter
change used the previous time range. The second click worked because by
then the cached time range had caught up. The decision to remove
`filter`/`timeRange` props was driven by a dependency on `searchObj`
data that is always available; passing them as separate props introduced
an unnecessary synchronization risk.
Co-authored-by: Claude <noreply@anthropic.com>
Prabhat Sharma
Abhay Padamani
Omkar KesarkhaneandClaude Opus 4.8
Sai NikhilandYashodhan Joshi
Bhargav
ktx-akshayandktx-vaidehi
ktx-kirtan
Shrinath RaoandClaude Opus 4.8
