mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 08:09:27 +00:00
Omkar Kesarkhane
c2c0ccdf2e
### **PR Type** Enhancement #8784 ___ ### **Description** - Add RED traces metrics dashboard - Replace scatter chart with metrics widgets - Support view-only mode in panel schemas - Improve traces loading and empty states ___ ### Diagram Walkthrough ```mermaid flowchart LR TracesPage["Traces Index.vue"] -- embeds --> SearchResult["SearchResult.vue"] SearchResult -- uses --> MetricsDashboard["TracesMetricsDashboard.vue"] MetricsDashboard -- loads --> MetricsJSON["metrics.json"] MetricsDashboard -- renders via --> RenderCharts["RenderDashboardCharts.vue"] PanelContainer["PanelContainer.vue"] -- passes --> viewOnlyProp["viewOnly prop"] PanelSchema["PanelSchemaRenderer.vue"] -- respects --> viewOnlyProp ``` <details> <summary><h3> File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>PanelContainer.vue</strong><dd><code>Pass view-only flag and tidy tooltips</code> </dd></summary> <hr> web/src/components/dashboards/PanelContainer.vue <ul><li>Pass <code>viewOnly</code> prop to schema renderer<br> <li> Tooltip attribute wrapping for readability<br> <li> Minor i18n quote consistency changes<br> <li> Notification formatting improvements</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8757/files#diff-414737cba6064461f7026e0b016afcb9620bd5bb29c4708fc170dee789dbcd4d">+32/-17</a> </td> </tr> <tr> <td> <details> <summary><strong>PanelSchemaRenderer.vue</strong><dd><code>Add view-only support to schema renderer</code> </dd></summary> <hr> web/src/components/dashboards/PanelSchemaRenderer.vue <ul><li>Add <code>viewOnly</code> prop to disable editing<br> <li> Gate annotation button when <code>viewOnly</code><br> <li> Minor formatting of icon tag<br> <li> Route/alert creation string refinements</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8757/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+20/-10</a> </td> </tr> <tr> <td> <details> <summary><strong>Index.vue</strong><dd><code>Simplify traces page and delegate states</code> </dd></summary> <hr> web/src/plugins/traces/Index.vue <ul><li>Remove inline loading/empty blocks from page<br> <li> Delegate result states to SearchResult<br> <li> Trigger metrics dashboard load on first page<br> <li> Simplify histogram date setter</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8757/files#diff-952e26660e4d6aadd292ea2ef7b314e139a4f516d0b3931e20d42d6394700d07">+10/-46</a> </td> </tr> <tr> <td> <details> <summary><strong>SearchResult.vue</strong><dd><code>Integrate RED metrics and improve UX</code> </dd></summary> <hr> web/src/plugins/traces/SearchResult.vue <ul><li>Replace scatter chart with RED metrics dashboard<br> <li> Add loading and empty states within component<br> <li> Emit time-range on metric zoom selection<br> <li> Adjust layout heights and refs</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8757/files#diff-7fc8153d64d38cf0945757bad8ab5e95ceae7e1c7daaeb300edbbfb484314e50">+76/-62</a> </td> </tr> <tr> <td> <details> <summary><strong>TracesMetricsDashboard.vue</strong><dd><code>New traces metrics dashboard component</code> </dd></summary> <hr> web/src/plugins/traces/metrics/TracesMetricsDashboard.vue <ul><li>New dashboard component rendering metrics<br> <li> Accepts stream, timeRange, filter, show<br> <li> Loads and customizes schema, handles zoom<br> <li> Exposes refresh/load methods, auto-refresh hooks</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8757/files#diff-7b6f29a2737d9501b18dbd8622eba4965e4bc2b92115627ae7d2e70cc3382087">+217/-0</a> </td> </tr> <tr> <td> <details> <summary><strong>metrics.json</strong><dd><code>Add traces metrics schema (Rate/Errors/Duration)</code> </dd></summary> <hr> web/src/plugins/traces/metrics/metrics.json <ul><li>Add predefined dashboard with three panels<br> <li> Rate, Errors, Duration queries using histogram<br> <li> Uses <code>[WHERE_CLAUSE]</code> placeholder for filters<br> <li> Layout and visualization configs included</ul> </details> </td> <td><a href="https://github.com/openobserve/openobserve/pull/8757/files#diff-8bf43bcbba5150a185625f458adcb6756145e7bfcbbf632d87a9d487a937524e">+415/-0</a> </td> </tr> </table></td></tr></tr></tbody></table> </details> ___
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