starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-04 00:08:55 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
6ae38d5ce2da1f7b30522eb4091cff4d7c3cd662
openobserve/web/ui-guidelines
T
History
BhargavAshish KolheShrinath Rao
 923348bb43 fix: ux changes for logs page (#8790) 
### **PR Type**
Enhancement, Bug fix, Documentation


___

### **Description**
- Extracted inline styles to scoped SCSS

- Improved logs UI/UX and theming

- Fixed flicker and pagination UX

- Added reusable toolbar and collapse styles


___

### Diagram Walkthrough


```mermaid
flowchart LR
  SearchBar["SearchBar.vue"] -- "toolbar, toggles, menu UX" --> Styles["New SCSS modules"]
  IndexList["IndexList.vue"] -- "field list pagination, loading" --> Styles
  SearchResult["SearchResult.vue"] -- "histogram/table layout refactor" --> Styles
  Index["Index.vue"] -- "splitter/collapse UX, visualize container" --> Styles
  TenstackTable["TenstackTable.vue"] -- "table hover/headers theme" --> Styles
  DetailTable["DetailTable.vue"] -- "wrap toggle, layout" --> Styles
  History["SearchHistory.vue"] -- "wrap toggle, warning pill" --> Styles
  Scheduler["SearchSchedulersList.vue"] -- "rounded btn, external styles" --> Styles
  TransformSel["TransformSelector.vue"] -- "toolbarized toggle, icons" --> Styles
  FunctionSel["FunctionSelector.vue"] -- "class hooks, styles" --> Styles
  SyntaxGuide["SyntaxGuide.vue"] -- "dark mode class, ext styles" --> Styles
  JsonPreview["JsonPreview.vue"] -- "externalized styles" --> Styles
  App["App.vue"] -- "theme root class" --> AppStyles["app.scss: global scrollbar, collapse btn"]
```



<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>31
files</summary><table>
<tr>
<td><strong>SearchBar.vue</strong><dd><code>Toolbar/UI cleanup, toggles
and menus restyle</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-81893de4edf186b0556f610acb280c87baa2ffe67d3b48a60a866094c7635baf">+272/-585</a></td>

</tr>

<tr>
<td><strong>IndexList.vue</strong><dd><code>Field list pagination UX,
loading state, helpers</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-08f058f883b659e713e606991a7ea37ae1ff016b7cccef970489ab5840dc3d09">+133/-419</a></td>

</tr>

<tr>
<td><strong>SearchResult.vue</strong><dd><code>Histogram/table layout
classes, external styles</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-5e65533aa4754bb6d0074fda18ffc1ecacded3b9ca6bc28a161c3f6b12f20195">+30/-283</a></td>

</tr>

<tr>
<td><strong>Index.vue</strong><dd><code>Splitter/collapse UX, visualize
container cleanup</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-0323c3da69b369843c5d72bf4df5b00ca6b5147192a213baf331659ecf92af62">+99/-57</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>DetailTable.vue</strong><dd><code>Wrap toggle restyle and
list/table CSS extraction</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-80552b5d25fa6cef9fbbe430b1865d761c4b132284c2d2175afceea8cbabc8c7">+19/-79</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>SearchSchedulersList.vue</strong><dd><code>Minor button
rounding, moved styles to SCSS</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/8790/files#diff-0c0a4097c53f07712d35562b1336602bf24faddedab77a9f5717f5582dcac2f1">+2/-137</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>TenstackTable.vue</strong><dd><code>Table container class
and theming adjustments</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-bc3c669f5ab65a42ae378df1f7d6b35014c9c220790bdcc72b47f55d1385dc22">+5/-104</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>SearchHistory.vue</strong><dd><code>Wrap toggle restyle and
externalized styles</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/8790/files#diff-9dd167bd5e272b2057f53c16b905047eec00655a3552daad240a964d67a6f56d">+13/-100</a></td>

</tr>

<tr>
<td><strong>TransformSelector.vue</strong><dd><code>Toolbarized
transform toggle and SCSS import</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/8790/files#diff-0037d8dd9cfbacc26309b26e98ae953e7ccbd0891ac2fd01c6314ebd7eed9d2c">+25/-47</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>JsonPreview.vue</strong><dd><code>Moved component styles to
shared SCSS</code>&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/8790/files#diff-3985073134d35ff074742944b114d0905524038b42e6d2ac887fef2c8436fb16">+1/-109</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>SyntaxGuide.vue</strong><dd><code>Dark-mode class hook and
SCSS extraction</code>&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/8790/files#diff-c6e8bb651fadd2b15b5b97f5b6069a57813fb97cc3d06eef983af4def33e8806">+5/-67</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>FunctionSelector.vue</strong><dd><code>Class hooks and SCSS
module inclusion</code>&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/8790/files#diff-11d9577516700b94b5f3325e77214d0d886473e690db8c9ea981613c9fb89b68">+5/-3</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>VisualizeLogsQuery.vue</strong><dd><code>Externalized
layout/splitter styles</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/8790/files#diff-979b01d943d58c5d70faeeac5948b7f02f0b2392a12b84ef07ba7f7393ab0261">+1/-50</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>DateTime.vue</strong><dd><code>Rounded buttons and hover
feedback</code>&nbsp; &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/8790/files#diff-c06c96ba750be6fc82f517a53ba809efff8aa619aba203b871d4d2aeb7f64f60">+6/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>App.vue</strong><dd><code>Theme root class binding for
global styles</code>&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/8790/files#diff-7322e6842f92edbe4a6e810d63f066ec95e64806d64a02b52e2b9bef2a73db91">+7/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>app.scss</strong><dd><code>Global scrollbar, collapse
button, toggles polish</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-5703d12504b0395cbfbbfad02a592bc391496026e5f03743102ce06c210ea05f">+142/-2</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>search-result.scss</strong><dd><code>New SCSS for search
result layout and table</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/8790/files#diff-e98f726aae49bdd5f8a426c8023eed612f3f33d52b0d458b7730990b3aafc41e">+235/-0</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>detail-table.scss</strong><dd><code>New SCSS for detail
table and panels</code>&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/8790/files#diff-63d5673331a5ee1ab792d07831e4a6dbb0d2d40d2ad628652d57944e47a96338">+55/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>logs-page.scss</strong><dd><code>New SCSS for logs page
structure and splitter</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </dd></td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8790/files#diff-3d8458bb7b934b0529dcb35f85e008a4404510435ee4a636ff86e20cfd2970c9">+1401/-0</a></td>

</tr>

<tr>
<td><strong>search-schedulerlist.scss</strong><dd><code>New SCSS for
scheduler list views</code>&nbsp; &nbsp; &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/8790/files#diff-42bbf309982cfcfd1cca270e80a2bddd35947e59dd91f600f5c85788af1e0802">+136/-0</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>index-list.scss</strong><dd><code>New SCSS for field/index
list</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &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/8790/files#diff-0a3be477d7575f8e412bf8092f91901dd1330c8458ebc2b24f96107647cfe200">+139/-0</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>search-history.scss</strong><dd><code>New SCSS for search
history page</code>&nbsp; &nbsp; &nbsp; &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/8790/files#diff-01ae0807917e4de78780d9ec549ae2b57e3004e7be72cd77536ac5ae75bda3ed">+97/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>transform-selector.scss</strong><dd><code>New SCSS for
transform selector controls</code>&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/8790/files#diff-131c7ba7388ebe94d30b7f42ca12c30b0840a9f8d69622b68e573e829d9fa7d6">+99/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>syntax-guide.scss</strong><dd><code>New SCSS for syntax
guide dialog</code>&nbsp; &nbsp; &nbsp; &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/8790/files#diff-7173f5473b8fed57af19a3017f9823e68099745dc181f7996f0024fa8099535c">+78/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>tenstack-table.scss</strong><dd><code>New SCSS for data
table and resizer</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/8790/files#diff-0175daf538e52ff95480cb40fadf8e26564474f15e39c5fe2d628f2d7e72aa78">+99/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>function-selector.scss</strong><dd><code>New SCSS for
function selector</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &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/8790/files#diff-16e97b00c534fae20daf24545e4e6a37b83f59e22668eddfd2083c9d778a9032">+58/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>visualizelogs-query.scss</strong><dd><code>New SCSS for
visualize logs layout</code>&nbsp; &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/8790/files#diff-263f2af1f510ef9047a88f4cf438ffdc7b22cc598a56071900b898899d5bdab3">+50/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>json-preview.scss</strong><dd><code>New SCSS for JSON
preview and menus</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/8790/files#diff-27d0a0d1ec327559e1c09ffec34a7fc937db12580f53d61f10897f378af7d6ff">+17/-0</a>&nbsp;
&nbsp; </td>

</tr>

<tr>
<td><strong>quasar-overrides.scss</strong><dd><code>Quasar overrides
aligned to new tokens</code>&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/8790/files#diff-563af58e60b7250169ebe9ced59dfe163a801a106d7f20964a8d20000b320af5">+16/-15</a>&nbsp;
</td>

</tr>

<tr>
<td><strong>_variables.scss</strong><dd><code>Variables updated for rem
units and 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/8790/files#diff-b3e37ee00c17b89ad1177c5592504277aa645b374095c065ea8b3782df5e89a2">+1/-1</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

<tr>
<td><strong>quasar-variables.sass</strong><dd><code>Quasar variables
tuned for new UI</code>&nbsp; &nbsp; &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/8790/files#diff-bb2b39e6af7e949bef75bce0c7021310c42dd0945c30f963e3c8b599598bfdaa">+2/-2</a>&nbsp;
&nbsp; &nbsp; </td>

</tr>

</table></details></td></tr><tr><td><strong>Documentation</strong></td><td><details><summary>1
files</summary><table>
<tr>
<td><strong>ui-guidelines.md</strong><dd><code>UI guidelines
documentation added</code>&nbsp; &nbsp; &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/8790/files#diff-8c5e2f35601f7d06e3389626dd501fc84e694efd6cf0faab6dfaf92445483dfa">+1056/-0</a></td>

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

</details>

___

---------

Co-authored-by: Ashish Kolhe <ashish.j.kolhe@gmail.com>
Co-authored-by: Shrinath Rao <shnath@openobserve.ai>
2025-10-13 17:13:07 +05:30
..
ui-guidelines.md
fix: ux changes for logs page (#8790)
2025-10-13 17:13:07 +05:30