fix(infra-monitoring): request loop when click to visualize volume#10657
fix(infra-monitoring): request loop when click to visualize volume#10657
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes an infinite refetch loop in Infrastructure Monitoring’s Kubernetes Volumes detail flow by adjusting how react-query cache keys are generated so time-range updates don’t continuously invalidate the volumes list query when a volume is selected.
Changes:
- Introduces custom query-key builders for the volumes list and grouped-row fetches to exclude
minTime/maxTimewhen a volume is selected. - Updates
K8sVolumesListto use the new query keys foruseGetK8sVolumesList. - Adds a Volumes list test suite, including a regression test asserting no list refetch after time-range changes when a volume is selected.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
frontend/src/container/InfraMonitoringK8s/__tests__/Volumes/K8sVolumesList.test.tsx |
Adds regression coverage for the volumes click/detail flow and the refetch-loop scenario. |
frontend/src/container/InfraMonitoringK8s/Volumes/utils.tsx |
Adds helper functions to generate react-query keys for volumes list and grouped-row fetches. |
frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx |
Switches volumes queries to use the new query-key helpers (intended to prevent infinite refetching). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
H4ad
force-pushed
the
fix/infra-monitoring-volume-loop
branch
from
7d8d198 to
ca6a00e
Compare
There was a problem hiding this comment.
Pull request overview
This PR aims to stop an infinite refetch loop on the Infra Monitoring Kubernetes Volumes page by adjusting the react-query cache keys so that minTime/maxTime changes don’t trigger list refetches while a volume detail is open.
Changes:
- Introduces helper functions to generate stable
react-querykeys for volumes list and grouped-row fetches. - Updates
K8sVolumesListto use the new query keys instead of keying on the entire request payload. - Adds a new test suite for
K8sVolumesList, including a regression test for the “no refetch on time change after selecting a volume” behavior.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
frontend/src/container/InfraMonitoringK8s/Volumes/utils.tsx |
Adds query-key builder helpers intended to omit min/max time when a volume is selected. |
frontend/src/container/InfraMonitoringK8s/Volumes/K8sVolumesList.tsx |
Switches list and grouped-row queries to use the new query keys. |
frontend/src/container/InfraMonitoringK8s/__tests__/Volumes/K8sVolumesList.test.tsx |
Adds tests for rendering, opening/closing details, and preventing list refetch on time change after selection. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| export const getVolumeListGroupedByRowDataQueryKey = ( | ||
| groupedByMeta: K8sVolumesData['meta'] | undefined, | ||
| queryFilters: IBuilderQuery['filters'], | ||
| orderBy: { columnName: string; order: 'asc' | 'desc' } | null, | ||
| groupBy: IBuilderQuery['groupBy'], | ||
| minTime: number, | ||
| maxTime: number, | ||
| ): (string | undefined)[] => { | ||
| const selectedRowDataKey = JSON.stringify(groupedByMeta || undefined); | ||
| if (groupedByMeta) { | ||
| return [ | ||
| 'volumeList', | ||
| JSON.stringify(queryFilters), | ||
| JSON.stringify(orderBy), | ||
| JSON.stringify(groupBy), | ||
| selectedRowDataKey, | ||
| ]; | ||
| } | ||
| return [ | ||
| 'volumeList', | ||
| JSON.stringify(queryFilters), | ||
| JSON.stringify(orderBy), | ||
| JSON.stringify(groupBy), | ||
| selectedRowDataKey, | ||
| String(minTime), | ||
| String(maxTime), | ||
| ]; |
There was a problem hiding this comment.
This causes loop error.
| // Allow any potential re-fetch to settle | ||
| await new Promise((resolve) => { | ||
| setTimeout(resolve, 300); | ||
| }); |
There was a problem hiding this comment.
This does not helps catch the regression or the bug if we introduce the same bug again.
frontend/src/container/InfraMonitoringK8s/__tests__/Volumes/K8sVolumesList.test.tsx
Show resolved
Hide resolved
H4ad
force-pushed
the
fix/infra-monitoring-volume-loop
branch
from
ca6a00e to
6f1e16a
Compare
H4ad
force-pushed
the
fix/infra-monitoring-volume-loop
branch
from
6f1e16a to
6483c1b
Compare
Pull Request
This PR fixes the loop bug on select volumes caused by the min/max time being updates being included in the query to fetch data for the volume details charts.
📄 Summary
This PR fixes the bug by not adding the min/max time into the query keys.
Screenshots / Screen Recordings (if applicable)
Before:
screenrecording-2026-03-19_12-08-02.mp4
After:
screenrecording-2026-03-19_12-07-25.mp4
Issues closed by this PR
Closes #8677
✅ Change Type
Select all that apply
🐛 Bug Context
The bug caused the page to enter in a loop of refetching the queries to get the volume data.
Root Cause
This was caused by min/max being updated for some reason after the queries for chart run.
Fix Strategy
Remove min/max from the query key.
🧪 Testing Strategy
📝 Changelog
📋 Checklist