From 6d10e72adb60dc421929b6b2019419b6b25af6e6 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:15:08 -0300
Subject: [PATCH] [v10.1.x] Alerting: Add new Recording Rule button when the
 list is empty (#73638)

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

(cherry picked from commit 27fb922f9b66ee75fc0b13a8a9ab3b57e92a8c99)

Co-authored-by: Virginia Cepeda <virginia.cepeda@grafana.com>
---
 .../features/alerting/unified/Analytics.ts    |  1 +
 .../unified/components/rules/NoRulesCTA.tsx   | 56 ++++++++++++++-----
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/public/app/features/alerting/unified/Analytics.ts b/public/app/features/alerting/unified/Analytics.ts
index fd12ddf6c6e..258d6b2677b 100644
--- a/public/app/features/alerting/unified/Analytics.ts
+++ b/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',
diff --git a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
index fc0ee7d7d22..027a7a19029 100644
--- a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
+++ b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
@@ -1,7 +1,10 @@
+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';
@@ -9,21 +12,48 @@ 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%;
+    }
+  `,
+});