fix(ui): update task duration in real-time when filtering by status#8127
fix(ui): update task duration in real-time when filtering by status#8127lotas merged 1 commit intotaskcluster:mainfrom
Conversation
nitishagar
requested review from
lotas,
matt-boris and
petemoore
and removed request for
a team
|
@lotas / @matt-boris when you get a chance, can you review this change. |
lotas
left a comment
lotas
left a comment
There was a problem hiding this comment.
Thanks for the PR! I feel like this should be fixed differently, because the root cause is not addressed
|
Thanks for the review @lotas. The React.memo analysis was correct - the original fix addressed a symptom, not the cause. Updated to use itemKey on the List component, removed the TimeDiff key, and cleaned up test comments. Would like your feedback on the update. |
great! Thanks for the update, looks like it fixes the issue. |
When filtering tasks by status (e.g., clicking 'Running'), the Duration component was not updating in real-time. This was because react-window reuses component instances at each index, and React.memo prevented re-renders when filtering changed which task appeared at a given index. The fix uses react-window's itemKey prop on the List component to ensure proper component lifecycle management when the task at a given index changes due to filtering or reordering. This causes React to unmount and remount the row component when the task identity changes. Also adds unit tests for: - Duration component behavior (completed/running tasks, interval cleanup) - TaskGroupTable itemKey prop ensuring correct taskId keys Fixes taskcluster#8104
|
@lotas Sorry for the delay. Finally got around to fixing this. Take a look when you get a chance. |
|
@lotas @matt-boris Pinging in relation to the above ^^ |
lotas
left a comment
lotas
left a comment
There was a problem hiding this comment.
Great! Thanks for the fix once again
2 participants
When filtering tasks by status (e.g., clicking 'Running'), the Duration component was not updating in real-time. This was because react-window reuses component instances at each index, and when filtering changed which task appeared at a given index, the Duration component's interval was not properly reset.
The fix adds a key prop to the Duration (TimeDiff) component based on taskId and start time, ensuring proper component lifecycle management when the displayed task changes due to filtering or reordering.
Also adds unit tests for the Duration component covering:
Fixes #8104