2025-04-01 10:38:02 +09:00

47 lines
1.7 KiB
TypeScript

import { EmptyState, LinkButton, Stack, TextLink } from '@grafana/ui';
import { Trans } from 'app/core/internationalization';
import { useRulesAccess } from '../../utils/accessControlHooks';
export const NoRulesSplash = () => {
const { canCreateGrafanaRules, canCreateCloudRules } = useRulesAccess();
const canCreateAnything = canCreateGrafanaRules || canCreateCloudRules;
return (
<div>
<EmptyState
message="You haven't created any rules yet"
variant="call-to-action"
button={
canCreateAnything ? (
<Stack direction="row" alignItems="center" justifyContent="center">
{canCreateAnything && (
<LinkButton variant="primary" icon="plus" size="lg" href="alerting/new/alerting">
<Trans i18nKey="alerting.list-view.empty.new-alert-rule">New alert rule</Trans>
</LinkButton>
)}
{canCreateCloudRules && (
<LinkButton variant="primary" icon="plus" size="lg" href="alerting/new/recording">
<Trans i18nKey="alerting.list-view.empty.new-recording-rule">New recording rule</Trans>
</LinkButton>
)}
</Stack>
) : null
}
>
<>
<Trans i18nKey="alerting.list-view.empty.provisioning">
You can also define rules through file provisioning or Terraform.{' '}
<TextLink
href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/"
external
>
Learn more
</TextLink>
</Trans>
</>
</EmptyState>
</div>
);
};