Alerting: Hide GMA/DMA switch if no appropriate data sources are configured (#104038)

This commit is contained in:
Tom Ratcliffe
2025-04-17 09:50:46 +01:00
committed by GitHub
parent dc8acf8e05
commit 079923443b
5 changed files with 51 additions and 24 deletions
@@ -11,9 +11,9 @@ import {
Alert,
Button,
ConfirmModal,
Divider,
Dropdown,
Field,
Icon,
Menu,
MenuItem,
Stack,
@@ -160,7 +160,7 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange, mod
}
}, [simplifiedQueryStep, expressionQueries, isGrafanaAlertingType, setSimpleCondition]);
const { rulesSourcesWithRuler } = useRulesSourcesWithRuler();
const { rulesSourcesWithRuler, isLoading: rulerSourcesIsLoading } = useRulesSourcesWithRuler();
const runQueriesPreview = useCallback(
(condition?: string) => {
@@ -474,6 +474,8 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange, mod
}
: undefined;
const hasDatasourcesForDataSourceManaged = Boolean(rulesSourcesWithRuler.length);
return (
<>
<RuleEditorSection
@@ -513,8 +515,14 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange, mod
</Field>
)}
{rulerSourcesIsLoading && (
<Text>
<Trans i18nKey="alerting.query-and-expressions-step.loading-data-sources">Loading data sources...</Trans>
</Text>
)}
{/* This is the PromQL Editor for Cloud rules */}
{isCloudAlertRuleType && dataSourceName && (
{!rulerSourcesIsLoading && isCloudAlertRuleType && dataSourceName && (
<Stack direction="column">
<Field error={errors.expression?.message} invalid={!!errors.expression?.message}>
<Controller
@@ -536,18 +544,21 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange, mod
/>
</Field>
{mode === 'edit' && (
<SmartAlertTypeDetector
editingExistingRule={editingExistingRule}
queries={queries}
rulesSourcesWithRuler={rulesSourcesWithRuler}
onClickSwitch={onClickSwitch}
/>
<>
<Divider />
<SmartAlertTypeDetector
editingExistingRule={editingExistingRule}
queries={queries}
rulesSourcesWithRuler={rulesSourcesWithRuler}
onClickSwitch={onClickSwitch}
/>
</>
)}
</Stack>
)}
{/* This is the editor for Grafana managed rules and Grafana managed recording rules */}
{isGrafanaManagedRuleByType(type) && (
{!rulerSourcesIsLoading && isGrafanaManagedRuleByType(type) && (
<Stack direction="column">
{/* Data Queries */}
<QueryEditor
@@ -561,7 +572,13 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange, mod
onSetCondition={handleSetCondition}
/>
{!simplifiedQueryStep && (
<Tooltip content={'You appear to have no compatible data sources'} show={noCompatibleDataSources}>
<Tooltip
content={t(
'alerting.query-and-expressions-step.no-compatible-sources',
'You appear to have no compatible data sources'
)}
show={noCompatibleDataSources}
>
<Button
type="button"
onClick={() => {
@@ -577,17 +594,21 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange, mod
</Tooltip>
)}
{/* We only show Switch for Grafana managed alerts */}
{isGrafanaAlertingType && !simplifiedQueryStep && mode === 'edit' && (
<SmartAlertTypeDetector
editingExistingRule={editingExistingRule}
rulesSourcesWithRuler={rulesSourcesWithRuler}
queries={queries}
onClickSwitch={onClickSwitch}
/>
{hasDatasourcesForDataSourceManaged && isGrafanaAlertingType && !simplifiedQueryStep && mode === 'edit' && (
<>
<Divider />
<SmartAlertTypeDetector
editingExistingRule={editingExistingRule}
rulesSourcesWithRuler={rulesSourcesWithRuler}
queries={queries}
onClickSwitch={onClickSwitch}
/>
</>
)}
{/* Expression Queries */}
{!simplifiedQueryStep && (
<>
<Divider />
<Stack direction="column" gap={0}>
<Text element="h5">
<Trans i18nKey="alerting.query-and-expressions-step.expressions">Expressions</Trans>
@@ -717,9 +738,8 @@ function TypeSelectorButton({ onClickType }: { onClickType: (type: ExpressionQue
return (
<Dropdown overlay={newMenu}>
<Button variant="secondary" data-testid={'add-expression-button'}>
<Button variant="secondary" data-testid={'add-expression-button'} icon="angle-down">
<Trans i18nKey="alerting.type-selector-button.add-expression">Add expression</Trans>
<Icon name="angle-down" />
</Button>
</Dropdown>
);
@@ -86,8 +86,11 @@ export function SmartAlertTypeDetector({
const canSwitch = getCanSwitch({ queries, ruleFormType, rulesSourcesWithRuler });
const options = [
{ label: 'Grafana-managed', value: RuleFormType.grafana },
{ label: 'Data source-managed', value: RuleFormType.cloudAlerting },
{ label: t('alerting.smart-alert-type-detector.grafana-managed', 'Grafana-managed'), value: RuleFormType.grafana },
{
label: t('alerting.smart-alert-type-detector.data-source-managed', 'Data source-managed'),
value: RuleFormType.cloudAlerting,
},
];
// if we can't switch to data-source managed, disable it
@@ -179,7 +179,7 @@ describe('RuleEditor cloud: checking editable data sources', () => {
await ui.inputs.name.find();
const switchToCloudButton = screen.getByText('Data source-managed');
const switchToCloudButton = await screen.findByText('Data source-managed');
expect(switchToCloudButton).toBeInTheDocument();
await user.click(switchToCloudButton);
@@ -45,7 +45,7 @@ describe('RuleEditor cloud', () => {
it('can create a new cloud alert', async () => {
const { user } = renderRuleEditor();
const removeExpressionsButtons = screen.getAllByLabelText(/Remove expression/);
const removeExpressionsButtons = await screen.findAllByLabelText(/Remove expression/);
expect(removeExpressionsButtons).toHaveLength(2);
// Needs to wait for featrue discovery API call to finish - Check if ruler enabled
+4
View File
@@ -1712,7 +1712,9 @@
"add-query": "Add query",
"body-queries-expressions-configured": "Create at least one query or expression to be alerted on",
"expressions": "Expressions",
"loading-data-sources": "Loading data sources...",
"manipulate-returned-queries-other-operations": "Manipulate data returned from queries with math and other operations.",
"no-compatible-sources": "You appear to have no compatible data sources",
"title-deactivate-advanced-options": "Deactivate advanced options",
"title-queries-expressions-configured": "No queries or expressions have been configured"
},
@@ -2213,8 +2215,10 @@
"alertCondition": "Alert condition"
},
"smart-alert-type-detector": {
"data-source-managed": "Data source-managed",
"data-sourcemanaged-alert-rules": "Data source-managed alert rules",
"data-sourcemanaged-alert-rules-description": "Data source-managed alert rules can be used for Grafana Mimir or Grafana Loki data sources which have been configured to support rule creation. The use of expressions or multiple queries is not supported.",
"grafana-managed": "Grafana-managed",
"grafanamanaged-alert-rules": "Grafana-managed alert rules",
"grafanamanaged-alert-rules-description": "Grafana-managed alert rules allow you to create alerts that can act on data from any of our supported data sources, including having multiple data sources in the same rule. You can also add expressions to transform your data and set alert conditions. Using images in alert notifications is also supported.",
"rule-type": "Rule type",