mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-05 16:10:43 +00:00
a51605938e
### **PR Type** Enhancement ___ ### **Description** - Add "Show Legends" feature for chart panels - PanelContainer and AddPanel integrated dialog - PanelSchemaRenderer emits show-legends event - New ShowLegendsPopup component for listing and copying legends - Add copy button to table cells in TableRenderer - Update translations with legend labels ___ ### Diagram Walkthrough ```mermaid flowchart LR PanelSchemaRenderer["PanelSchemaRenderer"] -- "show-legends" --> ShowLegendsPopup["ShowLegendsPopup"] TableRenderer["TableRenderer"] -- "copy-cell" --> Clipboard["Clipboard"] ``` <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><details><summary>5 files</summary><table> <tr> <td><strong>PanelContainer.vue</strong><dd><code>Integrate ShowLegendsPopup dialog and state</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-414737cba6064461f7026e0b016afcb9620bd5bb29c4708fc170dee789dbcd4d">+23/-0</a> </td> </tr> <tr> <td><strong>PanelSchemaRenderer.vue</strong><dd><code>Add "Show Legends" button and emit event</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+31/-2</a> </td> </tr> <tr> <td><strong>ShowLegendsPopup.vue</strong><dd><code>New component for legends list and copying</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-e02401241391109f2082ad6742374ff47ad79af8abf37a4bfa6ebeaae3f11322">+377/-0</a> </td> </tr> <tr> <td><strong>TableRenderer.vue</strong><dd><code>Add copy-to-clipboard button in table cells</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-794706ea9da3a70012a0327c0464f9fd16802f78ece26055fe951716c2d73d59">+80/-15</a> </td> </tr> <tr> <td><strong>AddPanel.vue</strong><dd><code>Integrate ShowLegendsPopup in AddPanel view</code> </dd></td> <td><a href=""></a></td> </tr> </table></details></td></tr><tr><td><strong>Documentation</strong></td><td><details><summary>11 files</summary><table> <tr> <td><strong>de.json</strong><dd><code>Add German translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-78f24ecb2dbcfc38fdf3ec22b2559a5b40d236ea689d1c55f5d3e87168310264">+7/-2</a> </td> </tr> <tr> <td><strong>en.json</strong><dd><code>Add English translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-892aa3d75ab6e129ef9116aa21bec1b9a15ba69ce5366d2a19128078c690d824">+6/-1</a> </td> </tr> <tr> <td><strong>es.json</strong><dd><code>Add Spanish translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-ac2a2167b8b973e3f776f9fe3b43bef4576470d8ad33f3d7cfaff6edff0e5778">+7/-2</a> </td> </tr> <tr> <td><strong>fr.json</strong><dd><code>Add French translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-db80e762b88ddf183820c050cdc6b215e6b02b365b5e73f5152af46b0d26f1a2">+7/-2</a> </td> </tr> <tr> <td><strong>it.json</strong><dd><code>Add Italian translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-2de78074a5f887afddce60d694ead9322e6ab223eb70251c13819f3028bdc70d">+7/-2</a> </td> </tr> <tr> <td><strong>ja.json</strong><dd><code>Add Japanese translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-092e49c5f9fbc1b539ab9c2866d108d0ce1d314022b4c294eb4611b285e7bbd3">+7/-2</a> </td> </tr> <tr> <td><strong>ko.json</strong><dd><code>Add Korean translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-50e27ca1b4825a5026f3a251bfcf79c97cab07cfade2ebd512d332453d707c48">+7/-2</a> </td> </tr> <tr> <td><strong>nl.json</strong><dd><code>Add Dutch translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-a1706021687ae5d8a1c006c49eab3946174fecd895f9b70a89c2e76d97250906">+7/-2</a> </td> </tr> <tr> <td><strong>pt.json</strong><dd><code>Add Portuguese translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-38e804f64cb5e0e451849fc84e9b46e53c954a4a4263d51c18665ad45f4b4815">+7/-2</a> </td> </tr> <tr> <td><strong>tr.json</strong><dd><code>Add Turkish translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-6f0f131e9e2591480c4c5d1eaffc72d02dc31cbd8d3f90d8f012f08cabac8818">+7/-2</a> </td> </tr> <tr> <td><strong>zh.json</strong><dd><code>Add Chinese translations for legend feature</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-8818055db58f83230aeea4ebfd4cec31d924e8c47b6f91298e356959ab25339e">+7/-2</a> </td> </tr> </table></details></td></tr><tr><td><strong>Additional files</strong></td><td><details><summary>1 files</summary><table> <tr> <td><strong>AddPanel.vue</strong></td> <td><a href="https://github.com/openobserve/openobserve/pull/9677/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+38/-0</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___ Design at: https://github.com/openobserve/designs/blob/main/dashboards/copy-legends-and-table-cells/design-doc.md --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: ktx-akshay <akshay.patil@kiara.tech>
zinc-observe-ui-automation
Playwright UI Testing
Installation
npm install
Running Tests
Using Playwright Runner UI (Recommended)
cd playwright-runner
npm start
Then open http://localhost:3000 to access the test runner interface.
Using Command Line
# Run all tests
npx playwright test
# Run specific test by tag
npx playwright test -g @alertsImportExport
# Run in headed mode
npx playwright test --headed
# Run specific test file
npx playwright test Alerts/alerts-import.spec.js
Environment Configuration
Tests can be configured using:
- Playwright Runner UI - Set environment variables through the web interface
- Environment Variables - Set variables in terminal or .env file