The Add Function header selected VRL vs JavaScript with a radio group
and a single info icon. That icon only ever described the
ALREADY-SELECTED language, so learning what the other one was for meant
switching to it first.
- Radio group -> OFormToggleGroup segmented control with a sliding
indicator, each option carrying a language mark (V / JS). The badge
variants match the transType column in FunctionList so VRL/JS read the
same everywhere.
- Give EACH option its own info icon and static tooltip, so both
languages are readable without selecting either. Forced-language hosts
(workflow function nodes are JS-only) hide the toggle, so the locked
language's tip moves to a standalone icon.
- Add a pipe divider between the two options, and one between the
function-name title and the toggle.
data-test renames `...-vrl-radio` -> `...-vrl-option` (same for js):
"radio" described the old implementation. E2E page objects would have
broken on this change regardless of naming -- toggle items expose
data-state="on|off", not the radio group's "checked|unchecked".
Verified: FunctionsToolbar.spec.ts 18/18 pass, vue-tsc clean. ESLint
could not be run locally (@intlify/eslint-plugin-vue-i18n missing from
node_modules).
## What changed
Naming an alert, panel, workflow, pipeline or function meant inventing a
name up front in a form field before anything else could be configured.
Two pieces replace that.
**Inline rename** — the page title *is* the input. `OInlineEdit` /
`OFormInlineEdit` (`web/src/lib/forms/InlineEdit`): click to rename,
Enter or blur commits, Escape restores the pre-edit value. A `#trail`
slot carries the "Auto" badge in display mode only.
**Auto-generated names** — `utils/autoName.ts` builds the name,
`composables/useAutoName.ts` decides when it's allowed to win. A name is
AUTO until the user types, then it's theirs for good; clearing the field
and blurring re-arms auto. The generators describe only what is actually
configured, so a half-built panel yields a shorter name rather than a
speculative one, and an empty string when there is nothing to say.
- Panel names read as prose — `Avg of duration by service`, `Record
count`, `k8s_logs overview`. Both live panel-field shapes are handled
(builder `functionName` + `args`, and legacy flat `column` +
`aggregationFunction`); the time column is read from
`zoConfig.timestamp_column` rather than hardcoded. Hand-written queries
fall back to the stream, since naming a panel after `x_axis_1` is worse
than saying nothing.
- Alert names are identifiers — `anomaly_k8s_logs`,
`k8s_logs_status_gte_500` — built to survive the backend's
`RE_OFGA_UNSUPPORTED_NAME` rule, with operators spelled out and a
`slugify` backstop. A leading underscore is preserved so internal
streams (`_rumdata`) keep their names.
### Supporting library changes
| Component | Change |
| --- | --- |
| `OPageHeader` / `OPageLayout` | New `titleOverflow="visible"` — the
`<h1>`'s `truncate` clips an interactive title's focus ring and the
error message it floats below itself |
| `OSelect` | New `appearance="inline"` — borderless, no fixed height,
sized to content, for a value that reads as a word inside running text
("Add Alert **in KTX**") |
All new strings go through i18n (`common.inlineEdit.*`,
`dashboard.autoName.*`, `alerts.autoName.*`, per-module `renameHint`).
Interpolated identifiers — column names, SQL functions, stream names —
stay verbatim.
## Wired into
AddPanel, AddAlert (+ `useAlertForm`), WorkflowEditor, PipelineEditor,
Functions / FunctionsToolbar, IncidentDetailDrawer,
InlineSelectFolderDropdown.
## Tested
244 unit tests across the 5 affected suites, all passing — including new
specs for `OInlineEdit`, `useAutoName`, and `autoName`.
One pre-existing expectation in `autoName.spec.ts` was updated: it
asserted `Avg of duration, max of duration +1 more`, capitalising only
the first word of a multi-measure name. `measureLabel` capitalises per
measure by design, so the expectation now reads `Avg of duration, Max of
duration +1 more`.
---------
Co-authored-by: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com>
Co-authored-by: ktx-vaidehi <vaidehi.akhani@kiara.tech>
## Issue
The Functions e2e test `should create function successfully with valid
VRL code` (`functions-form-validation.spec.js`) flakes on slow CI
runners, failing all retries with a timeout waiting for the success
toast.
From the failing run's trace, the create request went out with an
**empty function body**:
```
POST /api/default/functions → {"name":"test_fv_vrl_001","function":"","params":"row",...}
400 Bad Request → {"code":400,"message":"Function body cannot be empty"}
```
The backend is behaving correctly (it should reject an empty body). The
bug is in the test's editor-injection helper.
## Root cause
`typeInVrlEditor()` set the Monaco editor content via `executeEdits()`
and then waited a fixed `500ms` before clicking Save. Two problems
compound:
- `executeEdits()` writes the model value but does **not** drive the
editor's `onDidChangeModelContent` commit.
- The editor's `@update:query` emit that syncs `formData.function` is
**debounced by 500ms** (`CodeQueryEditor.vue`).
The fixed `500ms` wait sat exactly on the debounce boundary, so under CI
contention Save fired before `formData.function` was populated —
submitting an empty body. Because it is a deterministic timing gap on a
slow machine, all retries failed together, which reads as flakiness.
## Fix
Make the helper deterministic instead of sleep-based:
- Poll until Monaco has loaded and the function editor is registered
(scoped to its container) instead of a fixed sleep before injection.
- Type real keystrokes into the visible `.view-lines` surface (the
`textarea.inputarea` is a 1px hidden input Playwright cannot click), so
the editor's change listener actually fires.
- Verify the content landed in the Monaco model before proceeding.
- Blur the editor to flush the debounced emit so `formData.function`
updates immediately, rather than racing the debounce timer.
App code is unchanged — this is a test-only fix.
## Verification (local)
- Target test: **4/4 passed** on `--repeat-each=4`.
- Full `functions-form-validation.spec.js`: **11 passed, 3 skipped, 0
failed**.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Bhargav
Shrinath RaoandClaude Opus 4.8