diff --git a/public/app/features/alerting/unified/Home.tsx b/public/app/features/alerting/unified/Home.tsx index da7684870a4..f8e094ebbe9 100644 --- a/public/app/features/alerting/unified/Home.tsx +++ b/public/app/features/alerting/unified/Home.tsx @@ -1,10 +1,11 @@ import { css, cx } from '@emotion/css'; import React from 'react'; +import SVG from 'react-inlinesvg'; import { GrafanaTheme2 } from '@grafana/data'; import { Stack } from '@grafana/experimental'; import { config } from '@grafana/runtime'; -import { Icon, LinkButton, useStyles2, useTheme2, Tooltip } from '@grafana/ui'; +import { Icon, useStyles2, useTheme2 } from '@grafana/ui'; import { AlertingPageWrapper } from './components/AlertingPageWrapper'; @@ -17,37 +18,27 @@ export default function Home() {
- Alerting flow chart -
    -
  • - Grafana alerting periodically queries your data sources and evaluates the alerting - condition you define -
    • -
  • - If the condition is breached, the alert rule fires and produces alert instances{' '} - - - -
    • -
  • - Firing instances are sent to the Alertmanager{' '} - - - -
    • -
  • - Alertmanager routes firing alert instances to notification policies based on whether the - labels match -
    • -
  • - Notifications are sent out to the contact point defined in the matching notification - policy -
    • -
+
+

How it works

+
    +
  • + Grafana alerting periodically queries data sources and evaluates the condition defined in the alert rule +
    • +
  • If the condition is breached, an alert instance fires
    • +
  • Firing instances are routed to notification policies based on matching labels
    • +
  • Notifications are sent out to the contact points specified in the notification policy policy
    • +
+
+ - + +

Get started

-
    +
    • Create an alert rule by adding queries and expressions from multiple data sources.
      • @@ -66,7 +57,7 @@ export default function Home() {
@@ -102,14 +93,19 @@ const getWelcomePageStyles = (theme: GrafanaTheme2) => ({ grid-column: 1 / span 5; `, flowBlock: css` - width: 100%; grid-column: 1 / span 5; - img { - display: block; - margin: 0 auto; - height: auto; - width: 100%; + display: flex; + flex-wrap: wrap; + gap: ${theme.spacing(1)}; + + & > div { + flex: 2; + min-width: 350px; + } + & > svg { + flex: 3; + min-width: 500px; } `, videoBlock: css` @@ -132,22 +128,11 @@ const getWelcomePageStyles = (theme: GrafanaTheme2) => ({ gettingStartedBlock: css` grid-column: 1 / span 2; justify-content: space-between; - - ul { - margin-left: ${theme.spacing(2)}; - } `, - howItWorks: css` - display: flex; - justify-content: space-between; - flex-wrap: wrap; - gap: ${theme.spacing(2)}; - list-style: none inside none; - list-style-type: disclosure-closed; - - > li { - flex: 1; - min-width: 150px; + list: css` + margin: ${theme.spacing(0, 2)}; + & > li { + margin-bottom: ${theme.spacing(1)}; } `, }); @@ -156,81 +141,73 @@ function WelcomeHeader({ className }: { className?: string }) { const styles = useStyles2(getWelcomeHeaderStyles); return ( -
-
-

Welcome to Grafana Alerting

-
Grafana Alerting helps you manage your alert rules.
-
-
- - - -
-
+ + +
+ +
+ + ); } const getWelcomeHeaderStyles = (theme: GrafanaTheme2) => ({ - container: css` - display: flex; - flex-direction: column; - padding: ${theme.spacing(4)}; - background-image: url(public/img/alerting/welcome_cta_bg_${theme.name.toLowerCase()}.svg); - background-size: cover; - background-clip: padding-box; - - outline: 1px solid hsla(6deg, 60%, 80%, 0.14); - outline-offset: -1px; - border-radius: 3px; - `, ctaContainer: css` - padding: ${theme.spacing(4)}; + padding: ${theme.spacing(4, 2)}; display: flex; gap: ${theme.spacing(4)}; justify-content: space-between; flex-wrap: wrap; + + ${theme.breakpoints.down('lg')} { + flex-direction: column; + } + `, + + separator: css` + width: 1px; + background-color: ${theme.colors.border.medium}; + + ${theme.breakpoints.down('lg')} { + display: none; + } `, }); interface WelcomeCTABoxProps { title: string; description: string; - icon: React.ComponentProps['name']; href: string; hrefText: string; } -function WelcomeCTABox({ title, description, icon, href, hrefText }: WelcomeCTABoxProps) { +function WelcomeCTABox({ title, description, href, hrefText }: WelcomeCTABoxProps) { const styles = useStyles2(getWelcomeCTAButtonStyles); return (
-
- -

{title}

{description}
- - {hrefText} - +
); } @@ -246,6 +223,7 @@ const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({ `, title: css` + margin-bottom: 0; grid-column: 2 / span 3; grid-row: 1; `, @@ -255,29 +233,21 @@ const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({ grid-row: 2; `, - actionButton: css` + actionRow: css` grid-column: 2 / span 3; grid-row: 3; max-width: 240px; `, - icon: css` - grid-column: 1; - grid-row: 1 / span 2; - margin: auto; - color: #ff8833; + link: css` + color: ${theme.colors.text.link}; `, }); -function ContentBox({ children, title, className }: React.PropsWithChildren<{ title?: string; className?: string }>) { +function ContentBox({ children, className }: React.PropsWithChildren<{ className?: string }>) { const styles = useStyles2(getContentBoxStyles); - return ( -
- {title &&

{title}

} - {children} -
- ); + return
{children}
; } const getContentBoxStyles = (theme: GrafanaTheme2) => ({ diff --git a/public/img/alerting/at_a_glance_dark.svg b/public/img/alerting/at_a_glance_dark.svg index b36ddedaafe..4c528c2af20 100644 --- a/public/img/alerting/at_a_glance_dark.svg +++ b/public/img/alerting/at_a_glance_dark.svg @@ -1,98 +1,219 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/alerting/at_a_glance_light.svg b/public/img/alerting/at_a_glance_light.svg index 2053cadb250..86b08de0b9d 100644 --- a/public/img/alerting/at_a_glance_light.svg +++ b/public/img/alerting/at_a_glance_light.svg @@ -1,98 +1,217 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +