Alerting: Add Alert activity card to alerting home page (#115822)

public/app/features/alerting/unified/home/GettingStarted.tsx

@@ -4,6 +4,7 @@ import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Trans, t } from '@grafana/i18n';
+import { config } from '@grafana/runtime';
 import { Stack, Text, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
 import atAGlanceDarkSvg from 'img/alerting/at_a_glance_dark.svg';
 import atAGlanceLightSvg from 'img/alerting/at_a_glance_light.svg';
@@ -123,6 +124,20 @@ export function WelcomeHeader({ className }: { className?: string }) {
   return (
     <Stack gap={2} direction="column">
       <ContentBox className={cx(styles.ctaContainer, className)}>
+        {config.featureToggles.alertingTriage && (
+          <>
+            <WelcomeCTABox
+              title={t('alerting.welcome-header.title-alert-activity', 'Alert activity')}
+              description={t(
+                'alerting.welcome-header.description-alert-activity',
+                'See what is currently alerting and explore historical data to investigate current or past issues.'
+              )}
+              href="/alerting/alerts"
+              hrefText={t('alerting.welcome-header.href-text-alert-activity', 'View alert activity')}
+            />
+            <div className={styles.separator} />
+          </>
+        )}
         <WelcomeCTABox
           title={t('alerting.welcome-header.title-alert-rules', 'Alert rules')}
           description={t(
@@ -206,7 +221,7 @@ const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({
   container: css({
     color: theme.colors.text.primary,
     flex: 1,
-    minWidth: '240px',
+    minWidth: '160px',
     display: 'grid',
     rowGap: theme.spacing(1),
     gridTemplateColumns: 'min-content 1fr 1fr 1fr',

public/locales/en-US/grafana.json

@@ -3135,9 +3135,12 @@
       "table": "Table"
     },
     "welcome-header": {
+      "description-alert-activity": "See what is currently alerting and explore historical data to investigate current or past issues.",
       "description-alert-rules": "Define the condition that must be met before an alert rule fires",
       "description-configure-firing-alert-instances-routed-contact": "Configure how firing alert instances are routed to contact points",
       "description-configure-receives-notifications": "Configure who receives notifications and how they are sent",
+      "href-text-alert-activity": "View alert activity",
+      "title-alert-activity": "Alert activity",
       "title-alert-rules": "Alert rules",
       "title-contact-points": "Contact points",
       "title-notification-policies": "Notification policies"