mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
Sai Nikhil
ad34aaa420
### **User description** This PR enhances the pipelines UI ___ ### **PR Type** Enhancement ___ ### **Description** - Revamped pipeline node sidebar UI - Added inline function definition viewer - Improved node/edge interactions and deletion UX - Updated icons, styles, and dark mode ___ ### Diagram Walkthrough ```mermaid flowchart LR Sidebar["NodeSidebar.vue UI/UX revamp"] -- styled nodes & tooltips --> Editor["PipelineEditor.vue visuals"] Editor -- keyboard edge delete & headers --> Flow["PipelineFlow.vue interactions"] Flow -- edge click help notification --> Edges["CustomEdge/EdgeWithButton cleanup"] AssocFn["AssociateFunction.vue function preview"] -- RAF/RBF guidelines --> Users["Better user guidance"] ``` <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>8 files</summary><table> <tr> <td><strong>AssociateFunction.vue</strong><dd><code>Show selected function definition and RAF/RBF note</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-24a5b2df69327a6477227ea674939dea19dd6d393b4bfcf807089d71e6391152">+205/-1</a> </td> </tr> <tr> <td><strong>NodeSidebar.vue</strong><dd><code>Redesign draggable nodes with custom tooltips</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-01811ed187a4a8d0dc2cf301d145c6d236eae3d474b048b006986e755cc6d8bb">+285/-13</a></td> </tr> <tr> <td><strong>PipelineEditor.vue</strong><dd><code>Visual updates, new icons, and keyboard edge delete</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-68c21f647336067eb79737ce9aca2d49632f2fa1c0878bcfdae55607e3473a15">+185/-22</a></td> </tr> <tr> <td><strong>PipelineView.vue</strong><dd><code>Update assets and scoped styles for nodes</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-a71732cf7f8ee768e21f7eb2bf9eeed4ac67ba8221cca2e8d347d8acb27d4471">+61/-50</a> </td> </tr> <tr> <td><strong>CustomEdge.vue</strong><dd><code>Remove on-edge delete button; style and cleanup</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-d759dc0d507d5dfb3295fdb7dfd59e4a48ae32cdced0bb3471096f8691a99f58">+9/-47</a> </td> </tr> <tr> <td><strong>CustomNode.vue</strong><dd><code>Hover actions, handle styling, labels truncation, UX polish</code></dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-b9d83cd503b6d3470b238accaaea0b4decf567add8ad4727c63c9e583725f408">+704/-342</a></td> </tr> <tr> <td><strong>EdgeWithButton.vue</strong><dd><code>Remove edge button UI; keep keyboard deletion</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-838d98dd7119cb936a8971f3c631106cdda2c4113530999ff50bceb206acd375">+14/-29</a> </td> </tr> <tr> <td><strong>PipelineFlow.vue</strong><dd><code>Edge click help notification and event handling</code> </dd></td> <td><a href="https://github.com/openobserve/openobserve/pull/8676/files#diff-9c7475a54f0c895dd49eb0c5b53fe0a76ceff0520f667a9cb065b364557ced50">+85/-3</a> </td> </tr> </table></details></td></tr></tr></tbody></table> </details> ___
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