Alerting: Add new Recording Rule button when the list is empty (#73502)

* Add button to create RR when there are no alerts

* Remove unneeded import

* Change cards to be shown vertically

public/app/features/alerting/unified/Analytics.ts

@@ -12,6 +12,7 @@ export const LogMessages = {
   leavingRuleGroupEdit: 'leaving rule group edit without saving',
   alertRuleFromPanel: 'creating alert rule from panel',
   alertRuleFromScratch: 'creating alert rule from scratch',
+  recordingRuleFromScratch: 'creating recording rule from scratch',
   clickingAlertStateFilters: 'clicking alert state filters',
   cancelSavingAlertRule: 'user canceled alert rule creation',
   successSavingAlertRule: 'alert rule saved successfully',

public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx

@@ -1,29 +1,59 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data/src/themes';
+import { Stack } from '@grafana/experimental';
 import { logInfo } from '@grafana/runtime';
-import { CallToActionCard } from '@grafana/ui';
+import { CallToActionCard, useStyles2 } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 
 import { LogMessages } from '../../Analytics';
 import { useRulesAccess } from '../../utils/accessControlHooks';
 
 export const NoRulesSplash = () => {
   const { canCreateGrafanaRules, canCreateCloudRules } = useRulesAccess();
-
+  const styles = useStyles2(getStyles);
   if (canCreateGrafanaRules || canCreateCloudRules) {
     return (
-      <EmptyListCTA
-        title="You haven't created any alert rules yet"
-        buttonIcon="bell"
-        buttonLink={'alerting/new/alerting'}
-        buttonTitle="New alert rule"
-        proTip="you can also create alert rules from existing panels and queries."
-        proTipLink="https://grafana.com/docs/"
-        proTipLinkTitle="Learn more"
-        proTipTarget="_blank"
-        onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
-      />
+      <div>
+        <p>{"You haven't created any alert rules yet"}</p>
+        <Stack direction="row" gap={1} alignItems="stretch" flexGrow={1}>
+          <div className={styles.newRuleCard}>
+            <EmptyListCTA
+              title=""
+              buttonIcon="bell"
+              buttonLink={'alerting/new/alerting'}
+              buttonTitle="New alert rule"
+              proTip="you can also create alert rules from existing panels and queries."
+              proTipLink="https://grafana.com/docs/"
+              proTipLinkTitle="Learn more"
+              proTipTarget="_blank"
+              onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
+            />
+          </div>
+
+          <div className={styles.newRuleCard}>
+            <EmptyListCTA
+              title=""
+              buttonIcon="plus"
+              buttonLink={'alerting/new/recording'}
+              buttonTitle="New recording rule"
+              onClick={() => logInfo(LogMessages.recordingRuleFromScratch)}
+            />
+          </div>
+        </Stack>
+      </div>
     );
   }
   return <CallToActionCard message="No rules exist yet." callToActionElement={<div />} />;
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  newRuleCard: css`
+    width: calc(50% - ${theme.spacing(1)});
+
+    > div {
+      height: 100%;
+    }
+  `,
+});