feat(alertCurEvent): persist auto-refresh interval in localStorage (issue #2279) - #2233
Conversation
📝 WalkthroughWalkthroughThe alert events page now persists its time-range selection with a dedicated cache key. The project also adds ChangesAlert event time-range persistence
Monaco Editor dependency
Estimated code review effort: 1 (Trivial) | ~5 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ 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 |
| onRefresh={() => { | ||
| setRefreshFlag(_.uniqueId('refresh_')); | ||
| }} | ||
| refreshLocalKey={REFRESH_INTERVAL_CACHE_KEY} |
There was a problem hiding this comment.
应该不需要新增这个 refreshLocalKey 直接用存在的 localKey 参数即可
![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
🤖 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 `@src/pages/alertCurEvent/pages/List/index.tsx`:
- Line 24: Update the cache-key import and the TimeRangePickerWithRefresh
configuration in List to use a dedicated refresh-interval cache key instead of
TIME_RANGE_CACHE_KEY, ensuring AutoRefresh reads and writes
alert_cur_events_refresh_interval while the time-range cache remains unchanged.
🪄 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 Plus
Run ID: 98499762-2934-4738-abd9-45f39e711b9b
📒 Files selected for processing (2)
src/pages/alertCurEvent/constants.tssrc/pages/alertCurEvent/pages/List/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/alertCurEvent/constants.ts
| import { getBrainLicense } from 'plus:/components/License/services'; | ||
|
|
||
| import { AGGR_RULE_ID_CACHE_KEY, MY_GRPUPS_CACHE_KEY, NS } from '../../constants'; | ||
| import { AGGR_RULE_ID_CACHE_KEY, MY_GRPUPS_CACHE_KEY, NS, TIME_RANGE_CACHE_KEY } from '../../constants'; |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
rg -n -C 8 \
'refreshLocalKey|localKey|localStorage|REFRESH_INTERVAL_CACHE_KEY|TIME_RANGE_CACHE_KEY|alert_cur_events_refresh_interval|alert_cur_events_time_range' \
src/components/TimeRangePicker \
src/pages/alertCurEvent/constants.ts \
src/pages/alertCurEvent/pages/List/index.tsxRepository: n9e/fe
Length of output: 29486
Use a separate refresh-interval cache key.
TimeRangePickerWithRefresh stores the refresh interval under ${localKey}_refresh, so passing TIME_RANGE_CACHE_KEY makes AutoRefresh read/write alert_cur_events_time_range_refresh instead of the required alert_cur_events_refresh_interval. Use a dedicated refresh-interval key for this prop.
🤖 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 `@src/pages/alertCurEvent/pages/List/index.tsx` at line 24, Update the
cache-key import and the TimeRangePickerWithRefresh configuration in List to use
a dedicated refresh-interval cache key instead of TIME_RANGE_CACHE_KEY, ensuring
AutoRefresh reads and writes alert_cur_events_refresh_interval while the
time-range cache remains unchanged.
2 participants
Closes #2279
https://github.com/ccfos/nightingale/issues/2279
Problem
On the Active Alerts page (
/alert-cur-events), the auto-refresh interval selector always resets toOffafter the page is reloaded. Users who set an interval (e.g.,20s) have to reconfigure it every time they refresh or revisit the page.Solution
Persist the selected auto-refresh interval to
localStorageand restore it on component mount.To keep the change focused and avoid unintentionally persisting the time-range picker value, a new
refreshLocalKeyprop is added toTimeRangePickerWithRefresh. This prop is used only for the auto-refresh interval cache, while the existinglocalKeybehavior for time-range caching remains unchanged.Changes
frontend/fe/src/components/TimeRangePicker/types.tsrefreshLocalKey?: stringtoITimeRangePickerWithRefreshProps.frontend/fe/src/components/TimeRangePicker/TimeRangePickerWithRefresh.tsxAutoRefreshnow usesrefreshLocalKeywhen provided, falling back to${localKey}_refreshfor backward compatibility.frontend/fe/src/pages/alertCurEvent/constants.tsREFRESH_INTERVAL_CACHE_KEY = 'alert_cur_events_refresh_interval'.frontend/fe/src/pages/alertCurEvent/pages/List/index.tsxrefreshLocalKey={REFRESH_INTERVAL_CACHE_KEY}toTimeRangePickerWithRefresh.How to test
/alert-cur-events).20s.20sand start auto-refreshing automatically.Backward compatibility
Existing usages of
TimeRangePickerWithRefreshthat passlocalKeycontinue to work exactly as before, becauserefreshLocalKeyis optional and falls back to${localKey}_refresh.Summary by CodeRabbit