IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Add button to create RR when there are no alerts

* Remove unneeded import

* Change cards to be shown vertically
This commit is contained in:
Virginia Cepeda 2023-08-22 13:05:22 -03:00 committed by GitHub
parent 1f49d480a8
commit 27fb922f9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/alerting/unified/Analytics.ts
View File

@ -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',

56
public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
View File

@ -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%;
}
`,
});