openobserve

starred/openobserve

Fork 0

mirror of https://github.com/openobserve/openobserve.git synced 2026-11-04 08:09:27 +00:00

Files

T

History

9f8d25cb4d fix: dashboard listing pages UI changes made sync with other pages (#8796 )

### **User description**
1. Table list changes 
2. folder list changes 
3. submit btn , cancel btn , move btn , export btn , discard btn, apply
btn changes


___

### **PR Type**
Enhancement


___

### **Description**
- Align dashboards UI with new design

- Replace buttons with themed O2 styles

- Standardize toggles sizing and theming

- Improve tables, search, and layout


___

### Diagram Walkthrough


```mermaid
flowchart LR
  AddDash["AddDashboard.vue"] -- "buttons, spacing" --> UI["Unified O2 styles"]
  AddFolder["AddFolder.vue"] -- "inputs, buttons" --> UI
  ConfigPanel["ConfigPanel.vue"] -- "toggle sizing/theming" --> UI
  QueryEditor["DashboardQueryEditor.vue"] -- "function toggle style" --> UI
  DashboardsView["Dashboards.vue"] -- "search, folder header, table footer" --> UI
  AddPanel["AddPanel.vue"] -- "action button styles" --> UI
  Styles["app.scss"] -- "new negative button theme" --> 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><details><summary>7
files</summary><table>
<tr>
<td><strong>AddDashboard.vue</strong><dd><code>Update form spacing and
action buttons styling</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-21d49964b1a38dce6b2b2811cade3cff3dcfd0f70cb1aa94b6deb7ea9ac848ce">+10/-8</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>AddFolder.vue</strong><dd><code>Revamp paddings, inputs, and
footer buttons</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-3bd1ba28ba29b71469aac901fd8000480c3db6c0f2dbc86ea55221787ae3ffd2">+10/-12</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>ConfigPanel.vue</strong><dd><code>Apply large themed toggles
across options</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-c3a6e64dff02b58bb7cdc3f0668990b41ff41544b4c5e991bbcd989ad4bba3f8">+25/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>DashboardQueryEditor.vue</strong><dd><code>Restyle function
editor toggle with theming</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-68bf1b319223d103f1b99e0b681764e4eb76942399397779c81c2cd18f6485ff">+4/-3</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>Dashboards.vue</strong><dd><code>Redesign list UI: search,
folders, table, footer</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-8da3187db8ce3d795d0f196ede6b2290221ffa3e27b15dcc2b645e44dd196213">+119/-78</a></td>

</tr>

<tr>
<td><strong>AddPanel.vue</strong><dd><code>Standardize header actions
and picker height</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-c9632db1ad95af95aba10161bcbc7c5608318919f228637bdafae3f3a31267e8">+22/-15</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>app.scss</strong><dd><code>Add negative button themed
variants</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8796/files#diff-5703d12504b0395cbfbbfad02a592bc391496026e5f03743102ce06c210ea05f">+20/-0</a>&nbsp;
&nbsp; </td>

</tr>
</table></details></td></tr></tr></tbody></table>

</details>

___

---------

Co-authored-by: Shrinath Rao <shnath@openobserve.ai>
Co-authored-by: ktx-akshay <akshay.patil@kiara.tech>

2025-10-14 15:57:31 +05:30

attachment

test: Folder movement (#7537 )

2025-07-11 11:29:33 +05:30

dashboard-snaps

test: Folder movement (#7537 )

2025-07-11 11:29:33 +05:30

utils

fix: dashboard listing pages UI changes made sync with other pages (#8796 )

2025-10-14 15:57:31 +05:30

custom-charts.spec.js

fix: changed code-mirror to monaco-editor (#8047 )