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)} + /> + + + )}