refactor: simplify LogEntry component and enhance log message display#446
Merged
akila-i merged 2 commits intoopenchoreo:mainfrom Mar 19, 2026
Merged
refactor: simplify LogEntry component and enhance log message display#446akila-i merged 2 commits intoopenchoreo:mainfrom
akila-i merged 2 commits intoopenchoreo:mainfrom
Conversation
- Removed unnecessary hover state management from LogEntry component. - Updated log message styling to support multiline display with a maximum of three lines. - Adjusted layout for log action buttons to improve alignment and user experience. Signed-off-by: Akila-I <akila.99g@gmail.com>
akila-i
requested review from
jhivandb,
kaviththiranga and
sameerajayasoma
as code owners
📝 WalkthroughWalkthroughRemoved hover-driven visibility for the copy action on runtime log rows and reworked the log cell layout to a flex-based structure with a fixed action column and multi-line clamped log text (3 lines), plus expanded-style overrides. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx`:
- Around line 129-130: The copy action remains hidden because the JSX still
applies classes.hoverActionButton to the element (see LogEntry.tsx where
className is set to `${classes.logActionColumn} ${classes.hoverActionButton}`);
remove the hover-only class so the element uses only classes.logActionColumn (or
another always-visible class) to make the copy button always visible. Update the
className on the element that renders the copy action (reference:
classes.logActionColumn and classes.hoverActionButton) to drop
classes.hoverActionButton and ensure styles reflect the always-visible state.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 82189ed4-e3f7-4457-9a83-378faade37a4
📒 Files selected for processing (2)
plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsxplugins/openchoreo-observability/src/components/RuntimeLogs/styles.ts
Comment on lines
+129
to
130
| className={`${classes.logActionColumn} ${classes.hoverActionButton}`} | ||
| > |
There was a problem hiding this comment.
Remove hover-only class from the always-visible copy action
Line 129 still applies classes.hoverActionButton, which keeps the action hidden by default and only visible on row hover. That conflicts with the stated behavior change (“copy button always visible”).
Suggested fix
- <Box
- className={`${classes.logActionColumn} ${classes.hoverActionButton}`}
- >
+ <Box className={classes.logActionColumn}>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| className={`${classes.logActionColumn} ${classes.hoverActionButton}`} | |
| > | |
| <Box className={classes.logActionColumn}> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx`
around lines 129 - 130, The copy action remains hidden because the JSX still
applies classes.hoverActionButton to the element (see LogEntry.tsx where
className is set to `${classes.logActionColumn} ${classes.hoverActionButton}`);
remove the hover-only class so the element uses only classes.logActionColumn (or
another always-visible class) to make the copy button always visible. Update the
className on the element that renders the copy action (reference:
classes.logActionColumn and classes.hoverActionButton) to drop
classes.hoverActionButton and ensure styles reflect the always-visible state.
- Introduced a new color palette for info states, including light, main, and dark shades. - This enhancement improves the theme's versatility for displaying informational messages. Signed-off-by: Akila-I <akila.99g@gmail.com>
stefinie123
approved these changes
Mar 19, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This pull request refactors the log entry component in the runtime logs UI to improve usability and simplify the code. The most significant changes include removing hover logic for the copy button, restructuring the layout for log cells, and updating styles for better log message display.
UI Behavior and Interaction:
LogEntry.tsx[1] [2] [3]LogEntry.tsxplugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsxL129-R130)Styling and Layout Improvements:
pre-wrapand CSS line clamping for collapsed entries andblockfor expanded entries. (styles.tsplugins/openchoreo-observability/src/components/RuntimeLogs/styles.tsL132-R166)styles.tsplugins/openchoreo-observability/src/components/RuntimeLogs/styles.tsL132-R166)styles.tsplugins/openchoreo-observability/src/components/RuntimeLogs/styles.tsL198-R223)Goals
Approach
Removed unnecessary hover state management from LogEntry component.
Updated log message styling to support multiline display with a maximum of three lines.
Adjusted layout for log action buttons to improve alignment and user experience.
Before:
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit
New Features
Style