mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
035bbea25d
### **PR Type**
Enhancement
___
### **Description**
- Add Monaco-based query colorization utility
- Redesign QueryInspector component UI layout
- Implement search highlighting and copy notifications
- Make colorization reactive on mount and data changes
___
<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>colorizeQuery.ts</strong><dd><code>Add query
colorization utility</code>
</dd></summary>
<hr>
web/src/utils/query/colorizeQuery.ts
<ul><li>Register PromQL, VRL, and SQL languages<br> <li> Implement async
<code>colorizeQuery</code> function<br> <li> Prevent duplicate language
registrations<br> <li> Handle colorization errors gracefully</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10249/files#diff-58f1e967db31a700d3ad2387bd4c9330a14995f4e6f48bcaf0ee5074816c2c8f">+42/-0</a>
</td>
</tr>
<tr>
<td>
<details>
<summary><strong>QueryInspector.vue</strong><dd><code>Redesign
QueryInspector UI and logic</code>
</dd></summary>
<hr>
web/src/components/dashboards/QueryInspector.vue
<ul><li>Revamp UI with styled layout and search input<br> <li> Integrate
<code>colorizeQuery</code> for syntax highlighting<br> <li> Add
search-term highlighting and copy notifications<br> <li> Reactively
update colorization on mount/watch<br> <li> Include custom scrollbar
styling</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/10249/files#diff-ffe50532d3e00a45f4fd570bf0e852658b382fc05982f6c0afca2a7e8940316d">+318/-73</a></td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
---------
Co-authored-by: ktx-vaidehi <vaidehi.akhani@kiara.tech>
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