mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-06 00:09:22 +00:00
Ashish KolheandShrinath Rao
735dc7d58d
## What #13659 converted Service Graph and Services Catalog from in-page tabs on the Traces page into standalone routes reached from the nav-rail flyout. This PR restores the in-page tabs as a **second access path** — both now coexist, with distinct semantics: | Path | Semantics | |---|---| | Toolbar tabs on `/traces` | In-page view switch (`?tab=service-graph` / `?tab=services-catalog`), shares the page's stream + time context — the pre-#13659 UX, including old `?tab=` bookmarks | | Nav-rail flyout | Navigates to the standalone routes `/traces/service-graph`, `/traces/services` — unchanged from #13659 | Both paths render the same inner components (`ServiceGraph.vue`, `ServicesCatalog.vue`); only toolbar chrome differs. ## How A guided **reverse-apply of #13659's diff to `Index.vue` + `SearchBar.vue` only** (verified byte-identical to the pre-PR files — both were untouched on main since), with four deliberate adaptations: - **Re-added `applyHandoffFilter`** + its two hook call sites, which the revert would have deleted — the standalone pages' "View Traces" handoff (`?filter=` landing) depends on it. Covered by a new unit regression test and verified live. - The restored in-page `view-traces` handlers call `viewTracesHandoff.ts` (`buildViewTracesFilter` / `normalizeViewTracesPayload`) instead of resurrecting the inline filter builders that #13659 extracted from them — no re-duplication. - **Fixed a latent pre-#13659 bug**: the graph tab's refresh button called `serviceGraphRef?.loadServiceGraph()`, which was never in `ServiceGraph.vue`'s `expose()` — now `refresh()`. - **Flyout highlight now follows the visible view** on both paths: new `SubnavChild.activeOnTab` alias marks the Service Graph / Service Catalog flyout items active when `/traces?tab=…` shows their view in-page. Previously the same view highlighted different flyout items depending on how you reached it — the only submenu that deviated. Also: - Renamed the "Services" submenu / page header / route title to **"Service Catalog"**, matching the toolbar tab label (single `menu.services` locale value covers all). - `global-setup.js` login verification moved to `navbar-main-nav` — the same stale-selector fix #13659 applied to `enhanced-baseFixtures.js`; suites fail setup on main without it. ## Tests | Suite | Result | |---|---| | Unit: `SearchBar` 69, `Index` 76, `ONavGroup` 18 (5 new `activeOnTab` cases), `viewTracesHandoff` 21, `navGroups` 28 | all pass (233 total, 2 pre-existing skips) | | E2E (new) `Traces/traces-toolbar-tabs.spec.js` — in-page tab switches, shared-datetime carry, `?tab=` bookmark reload, flyout→standalone-route coexistence | 4/4 vs live enterprise build | | E2E `Traces/service-catalog.spec.js` (standalone-route regression) | 18 pass | | `type-check`, `eslint` (0 errors), `prettier`, `lint:design:strict` | clean | Not run: `Traces/service-graph.spec.js` — its `beforeAll` ingests via `ZO_BASE_URL`, which requires a single-origin instance (CI); the dev vite+backend split can't satisfy it. Nothing in this PR touches `ServiceGraph.vue` or the standalone views. ## Notes for review - `Index.vue` / `SearchBar.vue` restored regions are intentionally verbatim pre-#13659 (including its 16 pre-existing lint *warnings*) — deviations are limited to the four adaptations above, so the diff-vs-pre-PR is auditable. - Two known-inert quirks restored deliberately, not bugs to fix here: `hide-splitter-separator` has no CSS rule (was a no-op pre-#13659 too), and `@update:activeTab` writes to a getter-only computed. --------- Co-authored-by: Shrinath Rao <shnath@openobserve.ai>
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