Add Historical Range display in View Monitor page#490
Draft
rasika2012 wants to merge 1 commit intowso2:mainfrom
Draft
Add Historical Range display in View Monitor page#490rasika2012 wants to merge 1 commit intowso2:mainfrom
rasika2012 wants to merge 1 commit intowso2:mainfrom
Conversation
Contributor
📝 WalkthroughWalkthroughAdded historical mode support to the monitor view component. When monitorData type is "past", the component displays the historical time range as a non-editable chip instead of the interactive time-range selector, and includes logic for formatting and displaying the date range. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 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)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
console/workspaces/pages/eval/src/ViewMonitor.Component.tsx (1)
362-362: Use theme token instead of hardcoded width insx.Line 362 uses a hardcoded width value. Prefer a theme token to keep spacing consistent across the console app.
Proposed fix
- sx={{ minWidth: 140 }} + sx={{ minWidth: (theme) => theme.spacing(17.5) }}As per coding guidelines,
console/**/*.{ts,tsx,js,jsx}should use theme tokens via thesxprop instead of hardcoded colors and spacing values.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@console/workspaces/pages/eval/src/ViewMonitor.Component.tsx` at line 362, The component is using a hardcoded minWidth in the sx prop (sx={{ minWidth: 140 }}) which violates theme-token usage; replace the literal with a theme spacing token (e.g., theme.spacing(...) or a named token like 'sizes.xs' / 'spacing.14' depending on your design system) accessed via the sx callback or token key so it uses the app theme — locate the sx on ViewMonitor.Component (the element with sx={{ minWidth: 140 }}) and change it to use the theme token equivalent (sx={(theme) => ({ minWidth: theme.spacing(<n>) })} or sx={{ minWidth: theme => theme.tokens?.... }}) so spacing stays consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@console/workspaces/pages/eval/src/ViewMonitor.Component.tsx`:
- Around line 142-153: The historicalRangeLabel memo currently formats ISO
strings via new Date(iso).toLocaleDateString and can produce "Invalid Date" for
malformed input; update the inner formatter (fmt) used by historicalRangeLabel
to validate the Date: parse the iso, check isFinite(date.getTime()) (or
!isNaN(date.getTime())), and return the fallback "—" when the date is invalid or
iso is falsy; keep the same output shape `${fmt(monitorData?.traceStart)} –
${fmt(monitorData?.traceEnd)}` and only change the fmt implementation referenced
by historicalRangeLabel.
---
Nitpick comments:
In `@console/workspaces/pages/eval/src/ViewMonitor.Component.tsx`:
- Line 362: The component is using a hardcoded minWidth in the sx prop (sx={{
minWidth: 140 }}) which violates theme-token usage; replace the literal with a
theme spacing token (e.g., theme.spacing(...) or a named token like 'sizes.xs' /
'spacing.14' depending on your design system) accessed via the sx callback or
token key so it uses the app theme — locate the sx on ViewMonitor.Component (the
element with sx={{ minWidth: 140 }}) and change it to use the theme token
equivalent (sx={(theme) => ({ minWidth: theme.spacing(<n>) })} or sx={{
minWidth: theme => theme.tokens?.... }}) so spacing stays consistent.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9bd66c3e-4d8b-4c89-9c47-8f9004c8c7b5
📒 Files selected for processing (1)
console/workspaces/pages/eval/src/ViewMonitor.Component.tsx
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
1 participant
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 enhances the
ViewMonitorComponentin the evaluation workspace by improving how historical monitors are displayed. The main change is the addition of a clear visual indicator and label for historical monitor periods, making it easier for users to distinguish between historical and current monitors.User interface improvements for historical monitors:
Chipcomponent with a clock icon and a formatted date range label to indicate when a monitor is historical, replacing the time range selector in this case. (ViewMonitor.Component.tsx)isHistorical) and to format and display the historical date range (historicalRangeLabel). (ViewMonitor.Component.tsx)ViewMonitor.Component.tsx)Component and dependency updates:
Chipcomponent to support the new historical monitor UI. (ViewMonitor.Component.tsx)Minor refactor:
ViewMonitor.Component.tsx)Goals
Approach
User stories
Release note
Documentation
Training
Certification
Marketing
Automation tests
Security checks
Samples
Related PRs
Migrations (if applicable)
Test environment
Learning
Summary by CodeRabbit