feat(observability): make project-level log component names clickable#643
Open
kavix wants to merge 5 commits into
Open
feat(observability): make project-level log component names clickable#643kavix wants to merge 5 commits into
kavix wants to merge 5 commits into
Conversation
Signed-off-by: kavix <kavix@yahoo.com>
Signed-off-by: kavix <kavix@yahoo.com>
Signed-off-by: kavix <kavix@yahoo.com>
kavix
requested review from
Mirage20,
kaviththiranga,
sameerajayasoma and
stefinie123
as code owners
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthrough
ChangesClickable Component Names in LogEntry
Sequence DiagramsequenceDiagram
participant User
participant LogEntry
participant ReactRouter
participant ComponentLogsPage
User->>LogEntry: clicks ComponentName cell
LogEntry->>LogEntry: e.stopPropagation()
LogEntry->>ReactRouter: navigate to /catalog/{entityNamespace}/component/{componentName}/runtime-logs + location.search
ReactRouter->>ComponentLogsPage: render with preserved time range & filters
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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
🧹 Nitpick comments (1)
plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.test.tsx (1)
52-56: ⚡ Quick winAdd a route-preservation assertion for
location.search.The router wrapper is correct, but this setup still doesn’t protect the core behavior added in
LogEntry(carrying query params to the component link). Consider usingMemoryRouter initialEntrieswith a query string and asserting the renderedhrefincludes it.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.test.tsx` around lines 52 - 56, The MemoryRouter wrapper in the render function needs to be configured to pass a query string via initialEntries, and the test needs an assertion to verify that the rendered LogEntry component's link href includes those query parameters. Modify the MemoryRouter to include an initialEntries prop with a URL containing a query string (e.g., path with ?param=value), then add an assertion that checks the href attribute of the rendered link element in LogEntry includes that query string parameter to ensure the component properly preserves route search parameters.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx`:
- Line 155: The route being built in the `to` prop at line 155 hardcodes
`default/component` in the URL path, but the runtime-logs route requires dynamic
namespace and kind values to work correctly for entities outside the default
namespace. Replace the hardcoded `default/component` with actual entityNamespace
and entityKind values obtained from parent context or a canonical entity
reference, using `default/component` only as an explicit fallback when these
values are not available. This ensures the navigation route correctly matches
the entity's actual namespace and kind.
---
Nitpick comments:
In
`@plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.test.tsx`:
- Around line 52-56: The MemoryRouter wrapper in the render function needs to be
configured to pass a query string via initialEntries, and the test needs an
assertion to verify that the rendered LogEntry component's link href includes
those query parameters. Modify the MemoryRouter to include an initialEntries
prop with a URL containing a query string (e.g., path with ?param=value), then
add an assertion that checks the href attribute of the rendered link element in
LogEntry includes that query string parameter to ensure the component properly
preserves route search parameters.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d556478f-92ec-4957-b67e-e8f0a4dc32e6
📒 Files selected for processing (3)
.changeset/clickable-log-components.mdplugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.test.tsxplugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx
…inks Signed-off-by: kavix <kavix@yahoo.com>
stefinie123
reviewed
Jun 19, 2026
| {log.metadata?.componentName ?? componentName ?? ''} | ||
| {compName ? ( | ||
| <Link | ||
| to={`/catalog/${entityNamespace?.toLocaleLowerCase() || 'default'}/${entityKind?.toLocaleLowerCase() || 'component'}/${compName}/runtime-logs${location.search}`} |
Contributor
There was a problem hiding this comment.
Let's reuse the buildRuntimeLogsBasePath from openchoreo-react plugin to derive the runtime logs url here
Author
There was a problem hiding this comment.
@stefinie123 Done! Refactored the code to import and use buildRuntimeLogsBasePath(entity) from @openchoreo/backstage-plugin-react
| ); | ||
| }; | ||
| return render(<Harness />); | ||
| } |
Contributor
There was a problem hiding this comment.
Lets add a new test to assert the navigation capability added by this PR
Author
There was a problem hiding this comment.
@stefinie123 Done! Added a new test navigates to component runtime logs and stops propagation on component name link click which renders the component inside a MemoryRouter wrapper to assert that:
- Clicking the link updates the browser location path to the derived runtime logs URL.
onToggleExpandis not invoked (confirming that click propagation is successfully stopped so the row doesn't toggle).
… link and add tests Signed-off-by: kavix <kavix@yahoo.com>
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
Resolves #3436
In the project-level logging view, log records include the component name as plain text. This PR makes the component name a clickable link that navigates directly to that component's logging view, making it much easier to drill down from project logs to component logs.
Goals
componentNamefield in theLogEntrytable a clickable React<Link>.location.searchto the target URL.Approach
LogEntry.tsxinopenchoreo-observabilityto wrap theComponentNamefield with@backstage/core-componentsLink.useLocationfromreact-router-domto dynamically append current URL search params to the target component's route, preserving all active filters and time ranges automatically.LogEntry.test.tsxto wrap the component in a<MemoryRouter>to satisfyreact-router-domhooks..changesetfile for the@openchoreo/backstage-plugin-openchoreo-observabilitypackage.User stories
Release note
Added clickable component names in the project-level logging view to seamlessly navigate to component-scoped logs while preserving active filters.
Documentation
N/A - Minor UI improvement to existing logging view.
Training
N/A
Certification
N/A
Marketing
N/A
Automation tests
Security checks
Samples
N/A
Related PRs
None.
Migrations (if applicable)
N/A
Test environment
Learning
useLocation.Summary by CodeRabbit