Add time-based filtering to Jules Dashboard#25
Conversation
- Added a dropdown to the dashboard activity toolbar to filter activities by time ranges (15m, 1h, 3h, 6h, 12h, 24h). - Refactored `fetchActivities` to support generic query parameters like `createTime`. - Implemented state management to preserve active filters during pagination. - Added `calculatePastTimestamp` helper to generate ISO timestamps for the API. Co-authored-by: collisdigital <14041600+collisdigital@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
There was a problem hiding this comment.
Pull request overview
This PR adds time-based filtering functionality to the Jules Dashboard activity log, allowing users to filter activities by predefined time ranges (15m, 1h, 3h, 6h, 12h, 24h) through a dropdown selector.
Changes:
- Refactored activity fetching logic to support arbitrary query parameters beyond just "recent" and "all" modes
- Added time filter dropdown UI with predefined time ranges
- Implemented timestamp calculation logic to convert time ranges into ISO timestamps for API filtering
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div class="w-px h-4 bg-gray-200 mx-0.5"></div> | ||
|
|
||
| <select onchange="applyTimeFilter('${session.name}', '${containerId}', this)" class="text-xs border-0 bg-transparent text-gray-500 hover:text-gray-700 font-medium focus:ring-0 cursor-pointer py-1 pl-1 pr-1 outline-none"> | ||
| <option value="" selected disabled>Time Filter</option> |
There was a problem hiding this comment.
The label 'Time Filter' should be 'Time Range' to match the comment in the code at line 494.
| <option value="" selected disabled>Time Filter</option> | |
| <option value="" selected disabled>Time Range</option> |
| if (rangeCode.endsWith('m')) { | ||
| minutes = parseInt(rangeCode); | ||
| } else if (rangeCode.endsWith('h')) { | ||
| minutes = parseInt(rangeCode) * 60; | ||
| } | ||
|
|
There was a problem hiding this comment.
The function doesn't validate that parseInt returns a valid number. If the rangeCode format is invalid (e.g., 'abc'), parseInt will return NaN, causing incorrect timestamp calculations. Add validation to ensure the parsed value is a valid number.
| if (rangeCode.endsWith('m')) { | |
| minutes = parseInt(rangeCode); | |
| } else if (rangeCode.endsWith('h')) { | |
| minutes = parseInt(rangeCode) * 60; | |
| } | |
| if (typeof rangeCode !== 'string' || rangeCode.length < 2) { | |
| // Invalid format; return current time without adjustment | |
| return now.toISOString(); | |
| } | |
| const unit = rangeCode.slice(-1); | |
| const valueStr = rangeCode.slice(0, -1); | |
| const value = parseInt(valueStr, 10); | |
| if (Number.isNaN(value) || value < 0) { | |
| // Invalid numeric value; return current time without adjustment | |
| return now.toISOString(); | |
| } | |
| if (unit === 'm') { | |
| minutes = value; | |
| } else if (unit === 'h') { | |
| minutes = value * 60; | |
| } else { | |
| // Unsupported unit; return current time without adjustment | |
| return now.toISOString(); | |
| } |
| function calculatePastTimestamp(rangeCode) { | ||
| const now = new Date(); | ||
| let minutes = 0; | ||
|
|
||
| if (rangeCode.endsWith('m')) { | ||
| minutes = parseInt(rangeCode); | ||
| } else if (rangeCode.endsWith('h')) { | ||
| minutes = parseInt(rangeCode) * 60; | ||
| } | ||
|
|
||
| now.setMinutes(now.getMinutes() - minutes); | ||
| return now.toISOString(); | ||
| } |
There was a problem hiding this comment.
The calculatePastTimestamp function lacks test coverage for edge cases such as invalid rangeCode formats, boundary values, and timezone handling. Consider adding tests to verify correct timestamp calculation.
This PR adds time-based filtering to the Jules Dashboard activity log.
Users can now select from a dropdown of time ranges (e.g., "Last 15m", "Last 24h") to filter the displayed activities. This interacts with the Jules API's
createTimeparameter. The implementation refactors the existingfetchActivitieslogic to be more generic, allowing it to handle arbitrary query parameters while reusing the pagination logic used for the "All" view.PR created automatically by Jules for task 10821803729038104038 started by @collisdigital