From cebcb38df28a0cd2c0b4c661fe190b649a81b585 Mon Sep 17 00:00:00 2001 From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com> Date: Mon, 30 Sep 2024 20:47:16 +0200 Subject: [PATCH] Alerting: Style nits for the simple query mode (#93930) * Style nits for the simple query mode * update translations * update text * update translations * update disable word to deactivate * update preview text when not advanced options * update text * update text --- .betterer.results | 3 +- .../rule-editor/RuleEditorSection.tsx | 5 +++ .../QueryAndExpressionsStep.tsx | 21 ++++++++-- .../SimpleCondition.tsx | 38 +++++++++++++++++-- public/locales/en-US/grafana.json | 7 ++++ public/locales/pseudo-LOCALE/grafana.json | 7 ++++ 6 files changed, 72 insertions(+), 9 deletions(-) diff --git a/.betterer.results b/.betterer.results index da8a4d5f5fc..7f27fd80d8f 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2089,8 +2089,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "6"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "5"] ], "public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SmartAlertTypeDetector.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], diff --git a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx index 3c0083fe47c..984757e6c1c 100644 --- a/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/RuleEditorSection.tsx @@ -45,6 +45,7 @@ export const RuleEditorSection = ({ label="Advanced options" showLabel transparent + className={styles.reverse} /> )} @@ -74,4 +75,8 @@ const getStyles = (theme: GrafanaTheme2) => ({ fullWidth: css({ width: '100%', }), + reverse: css({ + flexDirection: 'row-reverse', + gap: theme.spacing(1), + }), }); diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx index 794c9be09ec..535f13d37f4 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/QueryAndExpressionsStep.tsx @@ -20,6 +20,7 @@ import { useStyles2, } from '@grafana/ui'; import { Text } from '@grafana/ui/src/components/Text/Text'; +import { t, Trans } from 'app/core/internationalization'; import { EvalFunction } from 'app/features/alerting/state/alertDef'; import { isExpressionQuery } from 'app/features/expressions/guards'; import { @@ -655,7 +656,9 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P onClick={() => runQueriesPreview()} disabled={emptyQueries} > - Preview + {isAdvancedMode + ? t('alerting.queryAndExpressionsStep.preview', 'Preview') + : t('alerting.queryAndExpressionsStep.previewCondition', 'Preview alert rule condition')} )} @@ -673,9 +676,19 @@ export const QueryAndExpressionsStep = ({ editingExistingRule, onDataChange }: P + + + The selected queries and expressions cannot be converted to default. If you deactivate advanced options, + your query and condition will be reset to default settings. + + +
+ + } + confirmText="Deactivate" icon="exclamation-triangle" onConfirm={() => { setValue('editorSettings', { simplifiedQueryEditor: true }); diff --git a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SimpleCondition.tsx b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SimpleCondition.tsx index 6dcd0204d5f..12b967cd743 100644 --- a/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SimpleCondition.tsx +++ b/public/app/features/alerting/unified/components/rule-editor/query-and-alert-condition/SimpleCondition.tsx @@ -103,7 +103,7 @@ export const SimpleConditionEditor = ({ Alert condition - + onEvaluateValueChange(event, 0)} /> -
+
TO
({ + buttonSelectText: css({ + color: theme.colors.primary.text, + fontSize: theme.typography.bodySmall.fontSize, + textTransform: 'uppercase', + padding: `0 ${theme.spacing(1)}`, + }), condition: { wrapper: css({ display: 'flex', @@ -231,11 +242,32 @@ const getStyles = (theme: GrafanaTheme2) => ({ height: 'fit-content', borderRadius: theme.shape.radius.default, }), + container: css({ + display: 'flex', + flexDirection: 'row', + padding: theme.spacing(1), + flex: 1, + width: '100%', + }), header: css({ background: theme.colors.background.secondary, padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, borderBottom: `solid 1px ${theme.colors.border.weak}`, flex: 1, }), + button: css({ + height: '32px', + color: theme.colors.primary.text, + fontSize: theme.typography.bodySmall.fontSize, + textTransform: 'uppercase', + display: 'flex', + alignItems: 'center', + borderRadius: theme.shape.radius.default, + fontWeight: theme.typography.fontWeightBold, + border: `1px solid ${theme.colors.border.medium}`, + whiteSpace: 'nowrap', + padding: `0 ${theme.spacing(1)}`, + backgroundColor: theme.colors.background.primary, + }), }, }); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index edc47d01564..310d59feacb 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -216,6 +216,13 @@ "badge-tooltip-provenance": "This resource has been provisioned via {{provenance}} and cannot be edited through the UI", "badge-tooltip-standard": "This resource has been provisioned and cannot be edited through the UI" }, + "queryAndExpressionsStep": { + "disableAdvancedOptions": { + "text": "The selected queries and expressions cannot be converted to default. If you deactivate advanced options, your query and condition will be reset to default settings." + }, + "preview": "Preview", + "previewCondition": "Preview alert rule condition" + }, "rule-groups": { "delete": { "success": "Successfully deleted rule group" diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index a1be240c152..b8107773274 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -216,6 +216,13 @@ "badge-tooltip-provenance": "Ŧĥįş řęşőūřčę ĥäş þęęʼn přővįşįőʼnęđ vįä {{provenance}} äʼnđ čäʼnʼnőŧ þę ęđįŧęđ ŧĥřőūģĥ ŧĥę ŮĨ", "badge-tooltip-standard": "Ŧĥįş řęşőūřčę ĥäş þęęʼn přővįşįőʼnęđ äʼnđ čäʼnʼnőŧ þę ęđįŧęđ ŧĥřőūģĥ ŧĥę ŮĨ" }, + "queryAndExpressionsStep": { + "disableAdvancedOptions": { + "text": "Ŧĥę şęľęčŧęđ qūęřįęş äʼnđ ęχpřęşşįőʼnş čäʼnʼnőŧ þę čőʼnvęřŧęđ ŧő đęƒäūľŧ. Ĩƒ yőū đęäčŧįväŧę äđväʼnčęđ őpŧįőʼnş, yőūř qūęřy äʼnđ čőʼnđįŧįőʼn ŵįľľ þę řęşęŧ ŧő đęƒäūľŧ şęŧŧįʼnģş." + }, + "preview": "Přęvįęŵ", + "previewCondition": "Přęvįęŵ äľęřŧ řūľę čőʼnđįŧįőʼn" + }, "rule-groups": { "delete": { "success": "Ŝūččęşşƒūľľy đęľęŧęđ řūľę ģřőūp"