IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Alerting: Update text, link and aria-label in contact points link for simplified routing. (#80950)

Browse Source 
Update link to contact points using TextLink component, and fix its alignment
This commit is contained in:
Sonia Aguilar 2024-01-22 12:17:54 +01:00 committed by GitHub
parent 401dee7d75
commit a07d2120f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { Alert, CollapsableSection, Icon, Link, LoadingPlaceholder, Stack, Text, useStyles2 } from '@grafana/ui';
import { Alert, CollapsableSection, LoadingPlaceholder, Stack, TextLink, useStyles2 } from '@grafana/ui';
import { AlertManagerDataSource } from 'app/features/alerting/unified/utils/datasource';
import { createUrl } from 'app/features/alerting/unified/utils/url';
@ -50,7 +50,9 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
contactPoints={contactPoints}
onSelectContactPoint={setSelectedContactPointWithMetadata}
/>
<LinkToContactPoints />
<div className={styles.contactPointsInfo}>
<LinkToContactPoints />
</div>
</Stack>
{selectedContactPointWithMetadata?.grafana_managed_receiver_configs && (
<ContactPointDetails receivers={selectedContactPointWithMetadata.grafana_managed_receiver_configs} />
@ -73,13 +75,9 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
function LinkToContactPoints() {
const hrefToContactPoints = '/alerting/notifications';
return (
<Link target="_blank" href={createUrl(hrefToContactPoints)} rel="noopener" aria-label="View alert rule">
<Stack direction="row" gap={1} alignItems="center" justifyContent="center">
<Text color="secondary">To browse contact points and create new ones, go to</Text>
<Text color="link">Contact points</Text>
<Icon name={'external-link-alt'} size="sm" color="link" />
</Stack>
</Link>
<TextLink external href={createUrl(hrefToContactPoints)} aria-label="View or create contact points">
View or create contact points
</TextLink>
);
}
@ -117,4 +115,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
marginTop: theme.spacing(2),
}),
contactPointsInfo: css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: theme.spacing(1),
marginTop: theme.spacing(1),
}),
});