mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
b3ad827bfc
### **PR Type**
Enhancement
___
### **Description**
- Consolidate pipeline actions into three-dots menu
- Revamp backfill jobs table layout and pagination
- Redesign create backfill job dialog UI
___
### Diagram Walkthrough
```mermaid
flowchart LR
PL["PipelinesList.vue"] -- "three-dots menu" --> QM["QMenu actions"]
BJ["BackfillJobsList.vue"] -- "filters & pagination" --> TP["QTablePagination"]
CB["CreateBackfillJobDialog.vue"] -- "advanced section" --> CS["Collapsible UI"]
```
<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>PipelinesList.vue</strong><dd><code>Consolidate
pipeline actions into menu</code>
</dd></summary>
<hr>
web/src/components/pipeline/PipelinesList.vue
<ul><li>Wrap action buttons inside flex
<code>.actions-container</code><br> <li> Add three-dots
<code>QMenu</code> for export, backfill, delete, and error<br> <li>
Import and use <code>outlinedMoreVert</code> icon<br> <li> Remove legacy
error‐slot CSS definitions</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9881/files#diff-85e3ef322f3eea0fc6d74d89431ba338a1153cb82ee06bef0f7c5f439c04267d">+102/-103</a></td>
</tr>
<tr>
<td>
<details>
<summary><strong>BackfillJobsList.vue</strong><dd><code>Revamp backfill
jobs table layout</code>
</dd></summary>
<hr>
web/src/components/pipelines/BackfillJobsList.vue
<ul><li>Replace root divs with <code><q-page></code> and Tailwind
classes<br> <li> Merge filters into header, remove redundant filter
section<br> <li> Add <code>qTableRef</code> and bottom
<code>QTablePagination</code> component<br> <li> Replace custom no-data
template with <code>NoData</code> component<br> <li> Introduce confirm
dialogs for pause/resume/delete actions</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9881/files#diff-db1a66743e977238714590c7537ae278070f396c6710f1bf94fd8859b87e6a65">+214/-149</a></td>
</tr>
<tr>
<td>
<details>
<summary><strong>CreateBackfillJobDialog.vue</strong><dd><code>Redesign
create backfill dialog UI</code>
</dd></summary>
<hr>
web/src/components/pipelines/CreateBackfillJobDialog.vue
<ul><li>Redesign dialog to flex layout and full-height card<br> <li>
Replace <code>q-expansion-item</code> with custom collapsible
section<br> <li> Add delete-before-backfill confirmation dialog<br> <li>
Style warnings and advanced options with Tailwind classes</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/9881/files#diff-0f5545b0a3f981757160babdff6b33897a5d420d3f37b58499f4510595806cce">+241/-102</a></td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
---------
Co-authored-by: Shrinath Rao <shnath@openobserve.ai>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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