Repository navigation
feat(datasource-select): migrate pages to DatasourceSelectV3 - #2290
Merged
Merged
Conversation
Extend DatasourceSelectV3 with filterKey/showHost/className passthrough, array-aware onChange, and a styled default tag. Migrate alert rules, history events, shield, subscribe, metrics-builtin and alert-rule form off the legacy per-group DatasourceSelect.
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueThanks 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 |
…label - merge props.className into base class and omit it from the rest spread to avoid duplicate className on Select - switch optionLabel to flex layout with overflow-hidden / truncate so long datasource names no longer overflow the selected display
Render a warning label for selected datasource values that no longer exist in the list, while keeping the parent-facing onChange contract on primitive string|number values via labelInValue wrap/unwrap.
- migrate DatasourceValueSelect in alertRules Form/FormNG to DatasourceSelectV3 - add "all datasources" option with icon and i18n for prometheus/loki - mark default/deleted tags via i18n, remove selected checkmark icon - export DatasourceItem type to drop as-any in consumers - add jsonapi logo asset
ajustDatasourceList may inject datasource variable options (e.g. from dashboard). The deleted-value check only looked at the original list, so an injected selected value was wrongly flagged as deleted. Also check the adjusted list before marking a value as deleted, and add a regression test.
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
There is a confirmed logic bug in DatasourceSelectV3 where the 'mixed' fallback cate detection is incorrect when mode='multiple' because it checks the whole selected array instead of the current value.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR upgrades datasource picking across multiple pages by migrating from legacy/per-group datasource selectors to DatasourceSelectV3, while extending DatasourceSelectV3 to better support filtering, multi-select, host selection, and clearer rendering (default/deleted states) with localized labels.
Changes:
- Extend
DatasourceSelectV3with filtering (filterKey),showHost, passthroughclassName, array-awareonChange, and improved option/value rendering (default tag + deleted value label). - Migrate alert rules, history events, shield, subscribe, and metrics-builtin filter modal to use
DatasourceSelectV3(mostly with multi-select + responsive tags). - Add new i18n strings and styles for the new UI states, plus a regression test for injected datasource-variable values.
File summaries
| File | Description |
|---|---|
| src/pages/warning/subscribe/ListNG.tsx | Migrate list filters to DatasourceSelectV3 with multi-select + clear handling. |
| src/pages/warning/shield/index.tsx | Migrate shield filters to DatasourceSelectV3 with multi-select + clear handling. |
| src/pages/metricsBuiltin/components/Filters/FormModal.tsx | Replace prometheus datasource <Select> with DatasourceSelectV3 plus list adjustment. |
| src/pages/historyEvents/ListNG/index.tsx | Migrate history event filters to DatasourceSelectV3 with multi-select + clear handling. |
| src/pages/alertRules/locale/zh_HK.ts | Add all_datasources translation. |
| src/pages/alertRules/locale/zh_CN.ts | Add all_datasources translation. |
| src/pages/alertRules/locale/ru_RU.ts | Add all_datasources translation. |
| src/pages/alertRules/locale/ja_JP.ts | Add all_datasources translation. |
| src/pages/alertRules/locale/en_US.ts | Add all_datasources translation. |
| src/pages/alertRules/List/ListNG.tsx | Migrate alert rules list datasource filter to DatasourceSelectV3 (multi-select + clear). |
| src/pages/alertRules/FormNG/components/DatasourceValueSelect/index.tsx | Update types and use DatasourceSelectV3 for match_type=0 selection path. |
| src/pages/alertRules/Form/components/DatasourceValueSelect/index.tsx | Replace <Select> with DatasourceSelectV3, inject “all datasources” option, and adjust filtering. |
| src/components/DatasourceSelect/style.less | Minor formatting fixes. |
| src/components/DatasourceSelect/locale/zh_HK.ts | Add deleted / default translations. |
| src/components/DatasourceSelect/locale/zh_CN.ts | Add deleted / default translations. |
| src/components/DatasourceSelect/locale/ru_RU.ts | Add deleted / default translations. |
| src/components/DatasourceSelect/locale/ja_JP.ts | Add deleted / default translations. |
| src/components/DatasourceSelect/locale/en_US.ts | Add deleted / default translations. |
| src/components/DatasourceSelect/index.tsx | Re-export DatasourceItem type from V3. |
| src/components/DatasourceSelect/DatasourceSelectV3/style.less | Add styles for default tag, deleted value, and open-state icon treatment. |
| src/components/DatasourceSelect/DatasourceSelectV3/index.tsx | Implement V3 behavior extensions (filtering, host option, deleted marking, labelInValue normalization, etc.). |
| src/components/DatasourceSelect/DatasourceSelectV3/index.test.tsx | Add test ensuring injected datasource variable values aren’t marked deleted. |
Review details
Suppressed comments (1)
src/pages/alertRules/Form/components/DatasourceValueSelect/index.tsx:175
- Use
Array.isArrayfor type narrowing here._.isArraymay not be recognized as a type guard by TS (depending on lodash typings), and the extratypeof v !== 'number'check is redundant inside the array branch.
if (_.isArray(v)) {
const curVal = _.last(v);
if (curVal === DATASOURCE_ALL) {
setFieldsValue({ datasource_ids: [DATASOURCE_ALL] });
} else if (typeof v !== 'number' && v.includes(DATASOURCE_ALL)) {
- Files reviewed: 22/23 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+205
to
+208
| const selectedValue = Array.isArray(value) ? value.map(getRawValue) : getRawValue(value); | ||
| const curValue = Array.isArray(selectedValue) ? _.last(selectedValue) : selectedValue; | ||
| const curCate = _.find(currentDatasourceList, { id: curValue })?.plugin_type; | ||
| onChange(selectedValue, curCate ?? (selectedValue === 'mixed' ? 'mixed' : '')); |
|
cat-fe 每日 i18n Review（2026-09-10）发现本 PR 引入的 locale key 双语缺失 本 PR 新增的 3 个 key 只在 zh_CN / zh_HK / en_US / ja_JP / ru_RU 补齐，es_ES / fr_FR / id_ID / ko_KR / pt_BR 缺失，这些语言会回退到基础语言：
已提交修复 PR：#2329 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Extend DatasourceSelectV3 with filterKey/showHost/className passthrough, array-aware onChange, and a styled default tag. Migrate alert rules, history events, shield, subscribe, metrics-builtin and alert-rule form off the legacy per-group DatasourceSelect.