feat(alert-rules): add annotations tooltip, doc help links and clearer enrich queries tips - #2221
Conversation
…r enrich queries tips
📝 WalkthroughWalkthroughChangesAlert rule help surfaces
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant AlertRuleForm
participant DocumentDrawer
participant Documentation
AlertRuleForm->>DocumentDrawer: open localized iframe help
DocumentDrawer->>Documentation: load documentation URL
Documentation-->>DocumentDrawer: render help content
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
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/alertRules/Form/PipelineConfigsNG/Annotations.tsx`:
- Around line 24-36: Replace the href-less help anchors that invoke
DocumentDrawer with semantic buttons, preserving their existing onClick
behavior, labels, and documentation parameters. Apply this in
src/pages/alertRules/Form/PipelineConfigsNG/Annotations.tsx lines 24-36,
src/pages/alertRules/FormNG/PipelineConfigsNG/Annotations.tsx lines 32-44,
src/plugins/elasticsearch/AlertRule/EnrichQueries/index.tsx lines 69-81, and
src/plugins/doris/AlertRule/EnrichQueries/index.tsx lines 56-68.
🪄 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: f7d034b4-74fa-4238-b633-42eca450def2
📒 Files selected for processing (10)
src/pages/alertRules/Form/PipelineConfigsNG/Annotations.tsxsrc/pages/alertRules/FormNG/PipelineConfigsNG/Annotations.tsxsrc/pages/alertRules/constants.tssrc/pages/alertRules/locale/en_US.tssrc/pages/alertRules/locale/ja_JP.tssrc/pages/alertRules/locale/ru_RU.tssrc/pages/alertRules/locale/zh_CN.tssrc/pages/alertRules/locale/zh_HK.tssrc/plugins/doris/AlertRule/EnrichQueries/index.tsxsrc/plugins/elasticsearch/AlertRule/EnrichQueries/index.tsx
| <a | ||
| onClick={() => { | ||
| DocumentDrawer({ | ||
| language: i18n.language, | ||
| darkMode, | ||
| type: 'iframe', | ||
| title: t('common:page_help'), | ||
| documentPath: ANNOTATIONS_ENRICH_QUERIES_DOC_URL, | ||
| }); | ||
| }} | ||
| > | ||
| {t('common:page_help')} | ||
| </a> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Use a button for the help action.
These anchors have no href, so keyboard users cannot focus or activate the documentation drawer.
src/pages/alertRules/Form/PipelineConfigsNG/Annotations.tsx#L24-L36: replace the help anchor with a semantic button.src/pages/alertRules/FormNG/PipelineConfigsNG/Annotations.tsx#L32-L44: replace the help anchor with a semantic button.src/plugins/elasticsearch/AlertRule/EnrichQueries/index.tsx#L69-L81: replace the help anchor with a semantic button.src/plugins/doris/AlertRule/EnrichQueries/index.tsx#L56-L68: replace the help anchor with a semantic button.
Suggested pattern
-<a onClick={() => DocumentDrawer({ /* ... */ })}>
+<Button type='link' onClick={() => DocumentDrawer({ /* ... */ })}>
{t('common:page_help')}
-</a>
+</Button>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <a | |
| onClick={() => { | |
| DocumentDrawer({ | |
| language: i18n.language, | |
| darkMode, | |
| type: 'iframe', | |
| title: t('common:page_help'), | |
| documentPath: ANNOTATIONS_ENRICH_QUERIES_DOC_URL, | |
| }); | |
| }} | |
| > | |
| {t('common:page_help')} | |
| </a> | |
| <Button | |
| type="link" | |
| onClick={() => { | |
| DocumentDrawer({ | |
| language: i18n.language, | |
| darkMode, | |
| type: 'iframe', | |
| title: t('common:page_help'), | |
| documentPath: ANNOTATIONS_ENRICH_QUERIES_DOC_URL, | |
| }); | |
| }} | |
| > | |
| {t('common:page_help')} | |
| </Button> |
📍 Affects 4 files
src/pages/alertRules/Form/PipelineConfigsNG/Annotations.tsx#L24-L36(this comment)src/pages/alertRules/FormNG/PipelineConfigsNG/Annotations.tsx#L32-L44src/plugins/elasticsearch/AlertRule/EnrichQueries/index.tsx#L69-L81src/plugins/doris/AlertRule/EnrichQueries/index.tsx#L56-L68
🤖 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/alertRules/Form/PipelineConfigsNG/Annotations.tsx` around lines 24
- 36, Replace the href-less help anchors that invoke DocumentDrawer with
semantic buttons, preserving their existing onClick behavior, labels, and
documentation parameters. Apply this in
src/pages/alertRules/Form/PipelineConfigsNG/Annotations.tsx lines 24-36,
src/pages/alertRules/FormNG/PipelineConfigsNG/Annotations.tsx lines 32-44,
src/plugins/elasticsearch/AlertRule/EnrichQueries/index.tsx lines 69-81, and
src/plugins/doris/AlertRule/EnrichQueries/index.tsx lines 56-68.
Summary by CodeRabbit