mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 08:09:22 +00:00
Sai Nikhil
2da2e1a231
Adds persistent, cross-session field value suggestions to the SQL query editor. When a user types field = , field IN (, field LIKE ', str_match(field, etc., the autocomplete popup now shows real values seen in previous searches — not just keywords and field names. Values are captured passively from search results and field expansions, stored in IndexedDB, and served from an in-memory cache. Zero impact on existing UI performance. What's new Value capture — two sources: Run Query (useStreamFields.ts) — after each search, up to 100 result rows are scanned and field values extracted into IndexedDB in a browser idle callback Field expansion (useFieldValuesStream.ts, IndexList.vue) — when a user clicks > on a field in the left panel, the Values API response is also captured Persistence layer (fieldValueDB.ts — new): IndexedDB database o2FieldValues, store fieldValues Composite key: org|streamType|streamName|fieldName — fully isolated per org, stream type, and stream Merge strategy: new values are unioned with existing, capped at 50 per field 7-day sliding TTL — fields from streams you stop using expire automatically Opportunistic housekeeping (5% chance per search) via by_expires and by_updated indexes Orchestration layer (useFieldValueStore.ts — new): captureFromSearchHits — schedules extraction + batch IDB write via requestIdleCallback captureFromValuesApi — schedules single-field IDB write getFieldValuesForSuggestion — reads with 60s in-memory cache (500-entry cap) so keystrokes never hit IDB Safari fallback: setTimeout(0) when requestIdleCallback is unavailable All IDB errors caught silently — feature degrades gracefully in private browsing Suggestion engine (useSuggestions.ts): New analyzeSqlWhereClause function detects when cursor is after an operator expecting a value using a 4-alternative regex covering =, !=, <>, >=, <=, >, <, IN (, NOT IN (, LIKE, NOT LIKE, str_match(, fuzzy_match( Cursor-sliced matching handles Monaco's auto-closing brackets correctly Smart insertText quoting: numeric/boolean values unquoted, strings wrapped in '...', open-quote detection avoids double-quoting sortText prefixed with \x01 so value suggestions always sort above keywords and functions In-session values (current search) take precedence over stored values (previous sessions) Monaco popup fix (CodeQueryEditor.vue): hideSuggestWidget → nextTick → triggerSuggest pattern ensures the popup always refreshes, fixing cases where it was already in "Showing" state (e.g. typing LIKE ') Traces support (traces/SearchBar.vue): Field expansion in traces was already writing to IDB (via useFieldValuesStream with stream_type: "traces") Added 3 lines to set org/streamType/streamName on autoCompleteData so the read side works too
web
This template should help get you started developing with Vue 3 in Vite.
Recommended IDE Setup
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
Type Support for .vue Imports in TS
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensionsfrom VSCode's command palette - Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Windowfrom the command palette.
Customize configuration
See Vite Configuration Reference.
Project Setup
npm install
Compile and Hot-Reload for Development
For stand-alone UI development environment, create .env file and which contains below environment variable
VITE_OPENOBSERVE_ENDPOINT=http://localhost:5080/
npm run dev
Type-Check, Compile and Minify for Production
npm run build
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Cypress
npm run test:e2e:dev
This runs the end-to-end tests against the Vite development server. It is much faster than the production build.
But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):
npm run build
npm run test:e2e
Lint with ESLint
npm run lint