diff --git a/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx b/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
index d3fd60053363..305cf219a7a2 100644
--- a/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
+++ b/public/app/features/alerting/unified/MoreActionsRuleButtons.tsx
@@ -47,13 +47,24 @@ export function MoreActionsRuleButtons({}: Props) {
return (
<>
{(canCreateGrafanaRules || canCreateCloudRules) && (
+ <>
+ {/* @PERCONA */}
logInfo(LogMessages.alertRuleFromScratch)}
- >
- New alert rule
-
+ href={urlUtil.renderUrl('alerting/new/alerting', { returnTo: location.pathname + location.search })}
+ icon="plus"
+ onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
+ >
+ New alert rule from template
+
+ logInfo(LogMessages.alertRuleFromScratch)}
+ >
+ New alert rule
+
+ >
)}
{!isEmpty(menuItems) && (
diff --git a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
index c1104a10a5d8..dd1eccd1e001 100644
--- a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
+++ b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data/src/themes';
@@ -15,7 +15,17 @@ export const NoRulesSplash = () => {
return (
{"You haven't created any alert rules yet"}
-
+
+
+ logInfo(LogMessages.alertRuleFromScratch)}
+ />
+
+
({
height: 100%;
}
`,
+ fullWidth: css`
+ width: 100%;
+ `
});
diff --git a/public/app/percona/integrated-alerting/IntegratedAlerting.messages.ts b/public/app/percona/integrated-alerting/IntegratedAlerting.messages.ts
index 95912e8fdce8..2db686f410e1 100644
--- a/public/app/percona/integrated-alerting/IntegratedAlerting.messages.ts
+++ b/public/app/percona/integrated-alerting/IntegratedAlerting.messages.ts
@@ -42,7 +42,7 @@ export const Messages = {
},
},
alertRuleTemplate: {
- addAction: 'Add',
+ addAction: 'Add template',
addSuccess: 'Alert rule template successfully added',
addModal: {
confirm: 'Add',
diff --git a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx
index 83eec0b55738..e49db97f6a6d 100644
--- a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx
+++ b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplate.tsx
@@ -71,7 +71,6 @@ export const AlertRuleTemplate: FC = () => {
{
Header: nameColumn,
accessor: 'summary',
- width: '60%',
},
{
Header: sourceColumn,
@@ -125,13 +124,7 @@ export const AlertRuleTemplate: FC = () => {
+
}
diff --git a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.styles.ts b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.styles.ts
index fc8921575d7a..41bcbe504138 100644
--- a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.styles.ts
+++ b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.styles.ts
@@ -5,8 +5,8 @@ import { GrafanaTheme2 } from '@grafana/data';
export const getStyles = ({ spacing }: GrafanaTheme2) => ({
actionsWrapper: css`
display: flex;
- justify-content: space-between;
align-items: center;
+ gap: 10px
`,
button: css`
margin-right: 0;
diff --git a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.tsx b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.tsx
index 7e89c3784472..18c714520a09 100644
--- a/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.tsx
+++ b/public/app/percona/integrated-alerting/components/AlertRuleTemplate/AlertRuleTemplateActions/AlertRuleTemplateActions.tsx
@@ -1,8 +1,7 @@
import { cx } from '@emotion/css';
import React, { FC, useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
-import { IconButton, Tooltip, useStyles2 } from '@grafana/ui';
+import { IconButton, LinkButton, Tooltip, useStyles2 } from '@grafana/ui';
import { SourceDescription } from '../AlertRuleTemplate.types';
import { DeleteRuleTemplateModal } from '../DeleteRuleTemplateModal/DeleteRuleTemplateModal';
@@ -23,41 +22,41 @@ export const AlertRuleTemplateActions: FC = ({ te
return (
-
-
-
-
-
- setEditModalVisible(true)}
- />
-
-
- setDeleteModalVisible(true)}
- />
+ Create alert rule
+
+ {!isActionDisabled && (
+ <>
+
+ setEditModalVisible(true)}
+ />
+
+
+ setDeleteModalVisible(true)}
+ />
+
+ >
+ )}