Alerting: Center "need help" icons (#87981)

This commit is contained in:
Tom Ratcliffe 2024-05-21 12:04:10 +01:00 committed by GitHub
parent 059e412344
commit dbf258b837
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 12 additions and 22 deletions

View File

@ -37,7 +37,7 @@ export const MatcherFilter = ({ onFilterChange, defaultQueryString }: Props) =>
error={inputInvalid ? 'Query must use valid matcher syntax. See the examples in the help tooltip.' : null}
label={
<Label>
<Stack gap={0.5}>
<Stack gap={0.5} alignItems="center">
<span>Search by label</span>
<Tooltip
content={

View File

@ -90,7 +90,7 @@ const AnnotationsStep = () => {
function getAnnotationsSectionDescription() {
return (
<Stack direction="row" gap={0.5} alignItems="baseline">
<Stack direction="row" gap={0.5} alignItems="center">
<Text variant="bodySmall" color="secondary">
Add more context in your notification messages.
</Text>

View File

@ -208,7 +208,7 @@ function getDescription() {
const docsLink = 'https://grafana.com/docs/grafana/latest/alerting/fundamentals/alert-rules/rule-evaluation/';
return (
<Stack direction="row" gap={0.5} alignItems="baseline">
<Stack direction="row" gap={0.5} alignItems="center">
<Text variant="bodySmall" color="secondary">
Define how the alert rule is evaluated.
</Text>

View File

@ -17,7 +17,7 @@ export function NeedHelpInfo({ contentText, externalLink, linkText, title = 'Nee
<Toggletip
content={<div className={styles.mutedText}>{contentText}</div>}
title={
<Stack gap={1} direction="row">
<Stack gap={0.5} direction="row" alignItems="center">
<Icon name="question-circle" />
{title}
</Stack>

View File

@ -54,7 +54,7 @@ export const NotificationsStep = ({ alertUid }: NotificationsStepProps) => {
stepNo={4}
title={type === RuleFormType.cloudRecording ? 'Add labels' : 'Configure labels and notifications'}
description={
<Stack direction="row" gap={0.5} alignItems="baseline">
<Stack direction="row" gap={0.5} alignItems="center">
{type === RuleFormType.cloudRecording ? (
<Text variant="bodySmall" color="secondary">
Add labels to help you better manage your recording rules
@ -122,7 +122,7 @@ function ManualAndAutomaticRouting({ alertUid }: { alertUid?: string }) {
};
return (
<Stack direction="column">
<Stack direction="column" gap={2}>
<Stack direction="column">
<RadioButtonGroup
options={routingOptions}
@ -243,35 +243,25 @@ interface NotificationsStepDescriptionProps {
}
export const RoutingOptionDescription = ({ manualRouting }: NotificationsStepDescriptionProps) => {
const styles = useStyles2(getStyles);
return (
<div className={styles.notificationsOptionDescription}>
<Stack alignItems="center">
<Text variant="bodySmall" color="secondary">
{manualRouting
? 'Notifications for firing alerts are routed to a selected contact point.'
: 'Notifications for firing alerts are routed to contact points based on matching labels and the notification policy tree.'}
</Text>
{manualRouting ? <NeedHelpInfoForContactpoint /> : <NeedHelpInfoForNotificationPolicy />}
</div>
</Stack>
);
};
const getStyles = (theme: GrafanaTheme2) => ({
routingOptions: css({
marginTop: theme.spacing(2),
width: 'fit-content',
}),
configureNotifications: css({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
marginTop: theme.spacing(2),
}),
notificationsOptionDescription: css({
marginTop: theme.spacing(1),
display: 'flex',
flexDirection: 'row',
alignItems: 'baseline',
gap: theme.spacing(0.5),
}),
});

View File

@ -98,7 +98,7 @@ export function SmartAlertTypeDetector({
<Stack direction="column" gap={1} alignItems="flex-start">
<Stack direction="column" gap={0}>
<Text variant="h5">Rule type</Text>
<Stack direction="row" gap={0.5} alignItems="baseline">
<Stack direction="row" gap={0.5} alignItems="center">
<Text variant="bodySmall" color="secondary">
Select where the alert rule will be managed.
</Text>

View File

@ -148,7 +148,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
className={styles.dsPickerContainer}
label={
<Label htmlFor="data-source-picker">
<Stack gap={0.5}>
<Stack gap={0.5} alignItems="center">
<span>Search by data sources</span>
<Tooltip
content={
@ -249,7 +249,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
<Field
label={
<Label htmlFor="rulesSearchInput">
<Stack gap={0.5}>
<Stack gap={0.5} alignItems="center">
<span>Search</span>
<HoverCard content={<SearchQueryHelp />}>
<Icon name="info-circle" size="sm" tabIndex={0} title="Search help" />

View File

@ -82,7 +82,7 @@ const StateHistory = ({ alertId }: Props) => {
<Field
label={
<Label>
<Stack gap={0.5}>
<Stack gap={0.5} alignItems="center">
<span>Filter group</span>
<Tooltip
content={