fix: o2 UI table improvements #8033
Conversation
github-actions
bot
added
☢️ Bug
PR Reviewer Guide 🔍(Review updated until commit 5c3d466)Here are some key observations to aid the review process:
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR implements a comprehensive UI overhaul across the OpenObserve application, focusing on standardizing table interfaces and introducing a cohesive design system. The changes affect over 25 components and establish a new visual foundation for the entire application.
Key Changes:
-
Design System Introduction: Added
_variables.scsswith 230+ color variables covering 11 color families (gray, iris, blue, green, yellow, red, orange, purple, teal) in both light and dark variants, plus semantic CSS custom properties for automatic theme switching. -
Component Styling Standardization: Introduced
o2-*CSS classes inapp.scssfor consistent styling across buttons (o2-primary-button,o2-secondary-button), search inputs (o2-search-input), tables (o2-quasar-table), toggles, checkboxes, radio buttons, and tabs. -
Table Interface Improvements: Implemented sticky headers and footers across all data tables (alerts, pipelines, reports, IAM modules, streams, functions) with proper scroll behavior. Tables now calculate dynamic heights (typically
calc(100vh - 114px)) and only scroll table content while keeping headers/footers visible. -
Search Functionality Enhancement: Replaced Quasar's built-in table filtering with custom filtering logic using computed properties (
visibleRows,hasVisibleRows) across multiple components. Search inputs now use borderless design with consistent theming. -
Navigation Improvements: Updated stream filtering from button-based to modern tab interfaces using the new
AppTabscomponent. Enhanced pagination controls with integrated record counts in table footers. -
Theme Integration: All components now support dynamic light/dark theme switching through conditional CSS classes that reference the Vuex store state.
-
Settings Page Redesign: Complete overhaul of the General Settings page with new
GroupHeadercomponent, horizontal form layouts with descriptions, and improved visual hierarchy.
The changes maintain backward compatibility while establishing a foundation for consistent UI/UX across the observability platform. The new design system enables easier maintenance and ensures visual coherence across different modules.
Confidence score: 4/5
- This PR is generally safe to merge but requires careful review due to the extensive UI changes across the application
- Score reflects the comprehensive nature of changes and potential for visual regressions, though the code changes are primarily CSS and styling focused
- Pay close attention to table components, theme switching functionality, and the new variables.scss implementation to ensure no breaking changes
26 files reviewed, 20 comments
| class="no-border q-mr-md o2-search-input tw-h-[36px] tw-w-[200px]" | ||
| :class="store.state.theme === 'dark' ? 'o2-search-input-dark' : 'o2-search-input-light'" | ||
| :placeholder="`Search Permissions`" | ||
| style="width: 300px" |
There was a problem hiding this comment.
style: Inline style width: 300px conflicts with Tailwind class tw-w-[200px] - consider removing one for consistency
| style="width: 300px" | |
| style="" |
There was a problem hiding this comment.
Thanks and fixed it
web/src/components/AppTable.vue
Outdated
| <template #top="scope"> | ||
| <div class="tw-flex tw-items-center tw-justify-between tw-w-full q-py-xs "> | ||
| <template #top="scope" v-if="!hideTopPagination"> | ||
| <div v-if="!hideTopPagination" class="tw-flex tw-items-center tw-justify-between tw-w-full q-py-xs "> |
There was a problem hiding this comment.
style: Redundant conditional check - the template already has v-if="!hideTopPagination"
| <div v-if="!hideTopPagination" class="tw-flex tw-items-center tw-justify-between tw-w-full q-py-xs "> | |
| <div class="tw-flex tw-items-center tw-justify-between tw-w-full q-py-xs "> |
There was a problem hiding this comment.
Thanks and removed it
| <q-toggle | ||
| style="width: 120px;" | ||
| v-model="enableWebsocketSearch" | ||
| :label="'enabled'" |
There was a problem hiding this comment.
style: Toggle label inconsistency: 'enabled' should be 'Enabled' to match lines 91 and 109
| :label="'enabled'" | |
| :label="'Enabled'" |
There was a problem hiding this comment.
Thanks and fixed
| class="o2-quasar-table" | ||
| class="o2-quasar-table o2-quasar-table-header-sticky" | ||
| :class="store.state.theme == 'dark' ? 'o2-quasar-table-dark o2-quasar-table-header-sticky-dark o2-last-row-border-dark' : 'o2-quasar-table-light o2-quasar-table-header-sticky-light o2-last-row-border-light'" | ||
| :tableStyle="hasVisibleRows ? 'height: calc(100vh - 250px); overflow-y: auto;' : ''" |
There was a problem hiding this comment.
style: Duplicate height calculation - container has same height as tableStyle. Consider removing one to avoid conflicts.
There was a problem hiding this comment.
removed the top height
| {{ t('settings.enableWebsocketSearch') }} | ||
| </span> | ||
| <span class="individual-setting-description"> | ||
| Websockets Search uses sockets logic to improve performance . |
There was a problem hiding this comment.
syntax: Extra space before period in 'performance .'
| Websockets Search uses sockets logic to improve performance . | |
| Websockets Search uses sockets logic to improve performance. |
| const visibleRows = computed(() => { | ||
| if (!filterQuery.value) return reportsTableRows.value || []; | ||
| return filterData(reportsTableRows.value || [], filterQuery.value); | ||
| }); | ||
| const hasVisibleRows = computed(() => visibleRows.value.length > 0) |
There was a problem hiding this comment.
logic: The visibleRows computed property doesn't account for tab filtering - it only applies search filtering to reportsTableRows, potentially showing cached reports when scheduled tab is active
| const visibleRows = computed(() => { | |
| if (!filterQuery.value) return reportsTableRows.value || []; | |
| return filterData(reportsTableRows.value || [], filterQuery.value); | |
| }); | |
| const hasVisibleRows = computed(() => visibleRows.value.length > 0) | |
| const visibleRows = computed(() => { | |
| const filteredByTab = reportsTableRows.value || []; | |
| if (!filterQuery.value) return filteredByTab; | |
| return filterData(filteredByTab, filterQuery.value); | |
| }); | |
| const hasVisibleRows = computed(() => visibleRows.value.length > 0) |
There was a problem hiding this comment.
NO we are using computed right it will get updated eventually
| {{ t("iam.groups") }} | ||
| </div> | ||
| <div class=" row items-center justify-end"> | ||
| <div date-test="iam-groups-search-input"> |
There was a problem hiding this comment.
syntax: typo in data-test attribute: 'date-test' should be 'data-test'
| <div date-test="iam-groups-search-input"> | |
| <div data-test="iam-groups-search-input"> |
| </q-input> | ||
| </div> | ||
| <q-btn | ||
| data-test="alert-list-add-alert-btn" |
There was a problem hiding this comment.
style: data-test attribute references 'alert-list-add-alert-btn' but this is for groups - should be 'iam-groups-add-group-btn' for consistency
| data-test="alert-list-add-alert-btn" | |
| data-test="iam-groups-add-group-btn" |
| :pagination="pagination" | ||
| :filter="filterQuery" | ||
| :filter-method="filterData" | ||
| :style="hasVisibleRows ? 'height: calc(100vh - 114px); overflow-y: auto;' : ''" |
There was a problem hiding this comment.
style: The height calculation calc(100vh - 114px) is hardcoded and might break if the header height changes. Consider using CSS custom properties for maintainability.
There was a problem hiding this comment.
No the header height is constant
| class="col-6" | ||
| :placeholder="t('iam.searchRole')" | ||
| class="q-ml-auto no-border o2-search-input tw-h-[36px]" | ||
| :placeholder="t('iam.searchGroup')" |
There was a problem hiding this comment.
logic: Incorrect placeholder text - should be 'iam.searchRole' not 'iam.searchGroup' for consistency
| :placeholder="t('iam.searchGroup')" | |
| :placeholder="t('iam.searchRole')" |
There was a problem hiding this comment.
this is fixed
PR Code Suggestions ✨Latest suggestions up to 5c3d466 Explore these optional code suggestions:
Previous suggestionsSuggestions up to commit 56b9282
Suggestions up to commit c31b1ee
|
bjp232004
force-pushed
the
o2-ui-improvements
branch
from
bf91da0 to
b9ca9e5
Compare
nikhilsaikethe
force-pushed
the
o2-ui-improvements
branch
4 times, most recently
from
18fcb1e to
bd6bbb6
Compare
There was a problem hiding this comment.
Greptile Summary
This PR implements a comprehensive UI overhaul across the OpenObserve application, focusing on standardizing table interfaces, design systems, and user experience patterns. The changes introduce a centralized design system through a new _variables.scss file containing color palettes and semantic tokens, along with extensive updates to app.scss that define reusable CSS classes for buttons, inputs, tables, and other UI components.
The core improvements include:
- Sticky table headers and footers: All table components now implement sticky behavior using new CSS classes like
o2-quasar-table-header-sticky, ensuring navigation controls remain visible during scrolling - Unified design system: Introduction of standardized button classes (
o2-primary-button,o2-secondary-button) with theme-aware dark/light variants, search input styling (o2-search-input), and consistent toggle components - Client-side filtering: Migration from server-side table filtering to computed properties (
visibleRows,hasVisibleRows) for better performance and real-time search across all table components - Enhanced AppTable component: Added new props like
tableStyle,hideTopPagination, andshowBottomPaginationWithTitleto support consistent table behavior - New reusable components: Introduction of
GroupHeader.vuefor standardized section headers and improvedAppTabsintegration - General Settings redesign: Complete UI overhaul with horizontal layouts, better visual hierarchy, and consistent form controls
The changes affect over 80 components across the application including AlertList, PipelinesList, ReportList, all IAM modules (Users, Groups, Roles, Service Accounts), Functions, Logs, and various settings pages. Height calculations have been adjusted throughout (typically from 57px to smaller values like 42px or 65px) to accommodate redesigned headers. The implementation maintains backward compatibility while significantly improving visual consistency and user experience patterns across the entire application.
Confidence score: 4/5
- This PR introduces extensive UI improvements with well-structured design system patterns that should enhance user experience and maintainability
- Score reflects some concerns about hardcoded height calculations, potential CSS conflicts, and missing error handling in a few components that could cause runtime issues
- Pay close attention to FilterCreatorPopup.vue which references store without importing it, and _variables.scss which has duplicate color values that need correction
71 files reviewed, 20 comments
| }) | ||
| " | ||
| <q-icon | ||
| data-test="add-role-close-dialog-btn" |
There was a problem hiding this comment.
style: data-test attribute references 'add-role-close-dialog-btn' but this is for adding users - should be 'add-user-close-dialog-btn' for consistency
| data-test="add-role-close-dialog-btn" | |
| data-test="add-user-close-dialog-btn" |
| style="min-width: 0px !important;" | ||
| :class="store.state.theme === 'dark' ? 'o2-secondary-button-dark' : 'o2-secondary-button-light'" |
There was a problem hiding this comment.
style: Inline style min-width: 0px !important; conflicts with Tailwind classes - consider using Tailwind's tw-min-w-0 instead
| style="min-width: 0px !important;" | |
| :class="store.state.theme === 'dark' ? 'o2-secondary-button-dark' : 'o2-secondary-button-light'" | |
| class="pipeline-icons q-px-sm q-ml-sm hideOnPrintMode tw-h-[36px] tw-min-w-0 o2-secondary-button" |
| padding="sm xl" | ||
| no-caps | ||
| flat | ||
| :class="store.state.theme === 'dark' ? 'o2-secondary-button-dark' : 'o2-secondary-button-light'" |
| icon="close" | ||
| @click="router.replace({ name: 'organizations' })" | ||
| <q-icon | ||
| data-test="add-role-close-dialog-btn" |
There was a problem hiding this comment.
style: Inconsistent data-test attribute - uses 'add-role-close-dialog-btn' but this is for organizations, should be 'add-org-close-dialog-btn'
| data-test="add-role-close-dialog-btn" | |
| data-test="add-org-close-dialog-btn" |
| <div class="q-table__title tw-font-[600]" data-test="pipeline-list-title"> | ||
| {{ t("pipeline.header") }} | ||
| </div> | ||
| <div class="tw-flex tw-items-centertabs q-ml-auto"> |
There was a problem hiding this comment.
syntax: Typo in class name: 'tw-items-centertabs' should be 'tw-items-center'
| <div class="tw-flex tw-items-centertabs q-ml-auto"> | |
| <div class="tw-flex tw-items-center q-ml-auto"> |
| Folders | ||
| <div> | ||
| <q-btn | ||
| class="text-bold o2-secondary-button tw-w-full tw-h-[28px] tw-w-[32px]" |
There was a problem hiding this comment.
style: Conflicting width classes - both tw-w-full and tw-w-[32px] are applied, with the latter taking precedence
| class="text-bold o2-secondary-button tw-w-full tw-h-[28px] tw-w-[32px]" | |
| class="text-bold o2-secondary-button tw-h-[28px] tw-w-[32px]" |
| default: "", | ||
| } | ||
| }, | ||
| setup(props, { emit }) { |
There was a problem hiding this comment.
style: The emit parameter in setup function is unused - consider removing it for cleaner code
| setup(props, { emit }) { | |
| setup(props) { |
| <div | ||
| class="row justify-center full-width q-px-xs q-pb-xs" | ||
| class="row full-width q-pb-xs" | ||
| style="position: sticky; bottom: 0px" | ||
| > | ||
| <q-btn | ||
| class="text-bold no-border full-width" | ||
| padding="sm lg" | ||
| color="secondary" | ||
| no-caps | ||
| label="New Folder" | ||
| @click.stop="addFolder" | ||
| data-test="dashboard-new-folder-btn" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
style: Empty div container at bottom serves no purpose - consider removing this section entirely
| export default defineComponent({ | ||
| name: "GroupHeader", | ||
| components: {}, |
There was a problem hiding this comment.
style: Empty components object can be removed since no components are being registered
| components: {}, | |
| export default defineComponent({ | |
| name: "GroupHeader", | |
| props: { |
There was a problem hiding this comment.
This is fine for future reference we kept that
| class="o2-secondary-button tw-h-[36px]" | ||
| color="negative" | ||
| flat | ||
| :class="store.state.theme === 'dark' ? 'o2-secondary-button-dark' : 'o2-secondary-button-light'" |
There was a problem hiding this comment.
style: The delete button now uses both color="negative" and conditional theme classes. The color prop might conflict with the theme-specific classes - consider removing the color prop if the theme classes handle the negative styling.
There was a problem hiding this comment.
thanks and fixed
|
Persistent review updated to latest commit 56b9282 |
nikhilsaikethe
force-pushed
the
o2-ui-improvements
branch
from
b702fb6 to
b7f4f79
Compare
nikhilsaikethe
force-pushed
the
o2-ui-improvements
branch
from
b7f4f79 to
5c3d466
Compare
There was a problem hiding this comment.
Greptile Summary
This PR implements a comprehensive UI redesign across the OpenObserve application, introducing a new design system called "O2" that standardizes the visual appearance and user experience. The changes affect over 75 files and include:
Design System Implementation:
- Added new SCSS variables file (
_variables.scss) with comprehensive color palette and semantic CSS custom properties for light/dark themes - Introduced standardized component classes (o2-primary-button, o2-secondary-button, o2-search-input, o2-toggle-button, etc.)
- Created consistent theming with proper dark/light mode support across all components
Table Component Overhaul:
- Implemented sticky headers and footers across all list components (AlertList, PipelinesList, FunctionList, ReportList, etc.)
- Replaced Quasar's built-in table filtering with computed properties (visibleRows/hasVisibleRows) for better control over display logic
- Added dynamic height calculations that prevent empty table space when filters return no results
- Standardized pagination from 25 to 20 items per page across components
UI Component Standardization:
- Replaced filter buttons with AppTabs component for better UX in stream filtering
- Updated all buttons to use consistent styling classes with theme-aware variants
- Redesigned search inputs with borderless design and consistent icon placement
- Standardized toggle components with size variants (sm/lg) and proper theming
- Created GroupHeader component for consistent section headers
Layout Improvements:
- Added sticky positioning for table headers and footers to improve navigation in large datasets
- Implemented consistent spacing using Tailwind utility classes
- Updated form layouts to use left-aligned buttons instead of center-aligned
- Added proper responsive behavior with gap and wrap properties
The changes maintain all existing functionality while providing a more cohesive, professional, and maintainable design system. The new O2 classes enable centralized styling management and easier future updates across the entire application.
Confidence score: 4/5
- This PR is generally safe to merge with careful review of specific implementation details
- Score reflects the comprehensive nature of changes requiring thorough testing, but clean implementation patterns
- Pay close attention to computed property implementations, hardcoded height calculations, and theme class consistency
72 files reviewed, 6 comments
| outlined | ||
| filled | ||
| dense | ||
| class="q-mt-sm o2-toggle-button-lg tw-mr-3 -tw-ml-4" |
There was a problem hiding this comment.
style: Negative left margin -tw-ml-4 seems unusual for a toggle button - verify this doesn't cause alignment issues with other form elements
There was a problem hiding this comment.
yes ew kept it purposely
| <template v-if="rows.length"> | ||
| <app-table | ||
| :rows="rows" | ||
| :rows="visibleRows" |
There was a problem hiding this comment.
logic: Using visibleRows computed property but also passing filter prop - this creates redundant filtering logic that could cause confusion
| data-test="add-action-script-step2-back-btn" | ||
| @click="step = 1" | ||
| flat | ||
| class="o2-secondary-button tw-h-[36px] q-ml-sm" |
There was a problem hiding this comment.
style: Extra space in class name 'q-ml-sm' - should this be 'q-ml-md' to match line 386?
| :class="store.state.theme === 'dark' ? 'o2-secondary-button-dark' : 'o2-secondary-button-light'" | ||
| @click="$emit('cancel:hideform')" | ||
| data-test="add-alert-cancel-btn" |
There was a problem hiding this comment.
syntax: Inconsistent event handling - line 70 uses $emit('cancel:hideform') while line 29 uses emits('cancel:hideform'). Should use emits consistently.
| :class="store.state.theme === 'dark' ? 'o2-secondary-button-dark' : 'o2-secondary-button-light'" | |
| @click="$emit('cancel:hideform')" | |
| data-test="add-alert-cancel-btn" | |
| @click="emits('cancel:hideform')" | |
| data-test="add-alert-cancel-btn" |
| </div> | ||
| </div> | ||
| <div class="flex justify-center q-mt-lg"> | ||
| <div class="flex justify-start q-ml-md "> |
There was a problem hiding this comment.
syntax: Extra space in class string after 'q-ml-md'
| <div class="flex justify-start q-ml-md "> | |
| <div class="flex justify-start q-ml-md"> |
| v-if="pipelineObj.isEditNode" | ||
| data-test="associate-function-delete-btn" | ||
| class="o2-secondary-button tw-h-[36px] q-mr-md" | ||
| color="negative" |
There was a problem hiding this comment.
style: Using color="negative" with theme-specific button classes may create styling conflicts - consider removing the color prop
|
Persistent review updated to latest commit 5c3d466 |
nikhilsaikethe
force-pushed
the
o2-ui-improvements
branch
7 times, most recently
from
2eaf629 to
2edf9b9
Compare
fix: checkboxes as per design for alertlist fix: radio button as per new design system added to add alert fix: general setting , platform settings modified as per design fix: numeric input in general settings as per design fix: introduced all variables according to design fix: secondarybtn , primary btn , tabs , search input added fix: another major change related to tabs , sticky header and footer table
nikhilsaikethe
force-pushed
the
o2-ui-improvements
branch
from
cd97b35 to
2557982
Compare
User description
This PR improves the following
`Fix: checkboxes as per design for alert list
Fix: general setting, platform settings modified as per design
Fix: numeric input in general settings as per design
Fix: introduced all variables according to design
Fix: secondary button, primary button, tabs, search input added
Fix: another major change related to tabs, sticky header and footer table
Fix: light mode q-toggle redesign done for both lg and small
Fix: pipeline list as per new design
Fix: added removed padding at the child level for pipeline editor
Fix: function list table as per design changed
Fix: made filtering rows based upon filter query this is done to avoid the issue of the table showing some height when the filter is applied and there are no results
Fix: enrichment table list updated with latest design
Fix: added border to the last row when having less rows when filter is applied or not applied
Fix: function list bottom header to take functions
Fix: function list header as per design
Fix: stream list table as per design
Fix: report list table as per new design
Fix: users list table changed as per design
Fix: added filter check for height so to avoid the issue of the table showing some height when the filter is applied and there are no results
Fix: service account list table changed as per design
Fix: organization list table updated as per design
Fix: user groups as per design with app table additional props
Fix: app roles tables list updated as per design
Fix: made group roles virtual scroll to false
Fix: group users, roles, service accounts tables as per new design system
Fix: search icon in IAM tables as per design
Fix: search history table update as per new design
Fix: search scheduler list table updated as per design
Fix: space between app tabs and search in log stream page
Fix: pagination logic modified due to pagination component introduced
Fix: aggregation to streaming aggregation label change in management page
Fix: change sub text for streaming aggregation in management page
Fix: q-toggle for dark mode
Fix: report list added additional checks
Fix: alert destination table as per design
Fix: destination list, template list tables updated as per design
Fix: cipher keys table as per design
Fix: regex pattern list updated as per design
Fix: search input placeholder text fixed
Fix: per page options consistent with streams page
Fix: import and pipeline editor buttons changed as per design
Fix: added primary and secondary buttons in all listing pages
Fix: increased pipeline editor height
Fix: add stream in pipeline should not have more space in x direction
Fix: secondary, primary, and delete buttons modified in pipeline nodes
Fix: IAM add pages in sync
Fix: introduce toggle button in the entire application
Fix: alert folder list made sticky top title and search input
Fix: import alert primary and secondary button changed
Fix: action scripts table modified as per design
Fix: add action script file changed
Fix: add enrichment table submit and cancel at start
Fix: add stream submit and cancel buttons at start
Fix: create report changed as per new design
Fix: real user monitoring get started button
Fix: data source page reset rum token, reset token to primary button
Fix: add destination button position changed
Fix: add cipher key UI modified according to add report
Fix: organization settings toggle changed
Fix: home view layout spacing fixed
Fix: remove negative bg for delete button`
PR Type
Enhancement
Description
Adopt new design system across tables
Introduce uniform sticky headers/footers
Replace filters with tabs and styled inputs
Improve pagination, per-page options
Diagram Walkthrough
File Walkthrough
19 files
Header redesign, tabs, sticky table, paginationHeader styling, search/toggle redesign, sticky tableStyled header/search, computed filtering, sticky tableNew header/search, client filtering, footer paginationCard layout spacing and grouping tweaksNew header/search, client filter, sticky table/footerPlatform settings UX revamp with GroupHeaderHeader/tabs/search restyle, sticky table, export buttonHeader/search restyle, client filtering, sticky tableHeader/search/buttons restyle, sticky table/footerHeader/search restyle, client filtering, sticky tableHeader/tabs/search restyle, sticky table/footer, filtersForm controls restyle, large toggles, delete node dialogHeader/search/buttons restyle, sticky table/footerNew shared section header componentIntroduce/adjust design tokens and variablesApply unified table/header/search stylesApply unified table/header/search stylesApply unified table/header/search styles1 files
Update tests to match new UI structure54 files