fix: Updated table width on updating columns #4407
Conversation
WalkthroughThe changes involve modifications to several components in the codebase, focusing on enhancing the functionality and responsiveness of table displays and UI elements related to logs and search results. Key updates include adjustments to column width calculations, conditional rendering of UI elements based on data availability, and the introduction of new properties to improve layout management. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
web/src/composables/useLogs.ts (1)
Line range hint
3113-3138: Refactor suggestion: Improve column width calculation logic.The logic for calculating column widths has been updated to include additional padding and consider more items in the iteration. However, the implementation can be further optimized by abstracting the width calculation into a separate function to improve readability and maintainability. Additionally, the magic numbers (e.g., 16, 24, 800, 150) should be replaced with named constants to enhance code clarity.
Consider refactoring the column width calculation logic into a separate function and using named constants for magic numbers. Here's a proposed refactor:
- let max = context.measureText(field).width + 16; + const PADDING = 16; + let max = context.measureText(field).width + PADDING; - max += 24; // 24px padding + const ADDITIONAL_PADDING = 24; + max += ADDITIONAL_PADDING; - if (max > 800) return 800; - if (max < 150) return 150; + const MAX_WIDTH = 800; + const MIN_WIDTH = 150; + if (max > MAX_WIDTH) return MAX_WIDTH; + if (max < MIN_WIDTH) return MIN_WIDTH;
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- web/src/composables/useLogs.ts (2 hunks)
- web/src/plugins/logs/JsonPreview.vue (4 hunks)
- web/src/plugins/logs/SearchResult.vue (1 hunks)
- web/src/plugins/logs/TenstackTable.vue (8 hunks)
Additional comments not posted (5)
web/src/plugins/logs/JsonPreview.vue (2)
15-15: Conditional rendering logic improved for view trace button.The updated condition ensures that the button is only displayed when appropriate, enhancing the user interface by preventing unnecessary elements from being shown when there are no trace options available.
278-278: Optimized data fetching based on UI visibility.The conditional execution of
getTracesStreams()based on the visibility of the view trace button is a good practice, as it prevents unnecessary network requests and resource usage when the button is not displayed.Run the following script to verify the function usage:
Verification successful
Conditional logic for
getTracesStreamsis correctly implemented.The function
getTracesStreamsis called conditionally based onshowViewTraceBtn.value, as intended. This ensures that the function is only executed when necessary, optimizing resource usage. No other occurrences of the function call were found, confirming the change is isolated and correctly applied.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all function calls to `getTracesStreams` match the new conditional logic. # Test: Search for the function usage. Expect: Only occurrences of the new conditional logic. rg --type vue -A 5 $'getTracesStreams'Length of output: 65
Script:
#!/bin/bash # Find all .vue files and search for the function `getTracesStreams` within them. fd --extension vue --exec rg 'getTracesStreams' {}Length of output: 149
web/src/plugins/logs/TenstackTable.vue (2)
393-396: Introduction ofdefaultColumnsprop enhances configurability.The new
defaultColumnsprop with a default value oftrueprovides additional control over the table's column configuration, allowing for dynamic adjustments based on the application's state.
26-26: Dynamic column width calculation based ondefaultColumns.The new logic for calculating the width of table columns based on the
defaultColumnsprop enhances flexibility and responsiveness of the table layout.Run the following script to verify the column width calculations:
Verification successful
Dynamic column width calculation based on
defaultColumnsis correctly implemented.The
defaultColumnsprop is used in various expressions to dynamically adjust the table's layout and width, confirming the review comment's observation. The implementation aligns with the intended functionality.
- File:
web/src/plugins/logs/TenstackTable.vue- Occurrences: Multiple conditional expressions affecting layout and width.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the dynamic column width calculations based on `defaultColumns`. # Test: Search for the usage of `defaultColumns` in column width calculations. Expect: Only occurrences of the new logic. rg --type vue -A 5 $'defaultColumns'Length of output: 63
Script:
#!/bin/bash # Description: Verify the dynamic column width calculations based on `defaultColumns`. # Test: Search for the usage of `defaultColumns` in the codebase to verify its role in column width calculations. rg -A 5 'defaultColumns'Length of output: 2165
web/src/plugins/logs/SearchResult.vue (1)
144-144: Dynamic adjustment of default column visibility based onselectedFields.The new prop binding for
:default-columnsdynamically adjusts the visibility of default columns based on the length of theselectedFieldsarray, enhancing the responsiveness and user experience of the component.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- web/src/plugins/logs/TenstackTable.vue (10 hunks)
Files skipped from review as they are similar to previous changes (1)
- web/src/plugins/logs/TenstackTable.vue
omkarK06
force-pushed
the
fix/tables_ui_fixes
branch
from
9373b64 to
2a540a4
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (4)
- web/src/composables/useLogs.ts (3 hunks)
- web/src/plugins/logs/JsonPreview.vue (4 hunks)
- web/src/plugins/logs/SearchResult.vue (1 hunks)
- web/src/plugins/logs/TenstackTable.vue (10 hunks)
Files skipped from review as they are similar to previous changes (4)
- web/src/composables/useLogs.ts
- web/src/plugins/logs/JsonPreview.vue
- web/src/plugins/logs/SearchResult.vue
- web/src/plugins/logs/TenstackTable.vue
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Enhanced column width calculation for improved table layout. - Conditional rendering of the view trace button based on available trace options. - Dynamic management of default column visibility in search results. - **Improvements** - Optimized data retrieval logic to reduce unnecessary fetching. - Updated table component to allow dynamic control over column behavior and sorting. - Enhanced responsiveness of the table to dynamic data changes. - **Bug Fixes** - Cleaned up console logs for better maintainability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
fix #4396
fix #4405
Summary by CodeRabbit
New Features
Improvements
Bug Fixes