diff --git a/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx b/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx index c716c6cbb37..bec19c1cc99 100644 --- a/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx +++ b/public/app/features/alerting/unified/rule-list/RuleList.v1.tsx @@ -1,16 +1,13 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; -import { useLocation } from 'react-router-dom-v5-compat'; import { useAsyncFn, useInterval } from 'react-use'; -import { urlUtil } from '@grafana/data'; -import { Trans, t } from '@grafana/i18n'; -import { logInfo } from '@grafana/runtime'; -import { Button, LinkButton, Stack } from '@grafana/ui'; +import { t } from '@grafana/i18n'; +import { Button, Stack } from '@grafana/ui'; import { useQueryParams } from 'app/core/hooks/useQueryParams'; import { useDispatch } from 'app/types/store'; import { CombinedRuleNamespace } from 'app/types/unified-alerting'; -import { LogMessages, trackRuleListNavigation } from '../Analytics'; +import { trackRuleListNavigation } from '../Analytics'; import { AlertingPageWrapper } from '../components/AlertingPageWrapper'; import RulesFilter from '../components/rules/Filter/RulesFilter.v1'; import { NoRulesSplash } from '../components/rules/NoRulesCTA'; @@ -19,18 +16,16 @@ import { RuleListErrors } from '../components/rules/RuleListErrors'; import { RuleListGroupView } from '../components/rules/RuleListGroupView'; import { RuleListStateView } from '../components/rules/RuleListStateView'; import { RuleStats } from '../components/rules/RuleStats'; -import { AIAlertRuleButtonComponent } from '../enterprise-components/AI/AIGenAlertRuleButton/addAIAlertRuleButton'; import { shouldUsePrometheusRulesPrimary } from '../featureToggles'; -import { AlertingAction, useAlertingAbility } from '../hooks/useAbilities'; import { useCombinedRuleNamespaces } from '../hooks/useCombinedRuleNamespaces'; import { useFilteredRules, useRulesFilter } from '../hooks/useFilteredRules'; import { useUnifiedAlertingSelector } from '../hooks/useUnifiedAlertingSelector'; import { fetchAllPromAndRulerRulesAction, fetchAllPromRulesAction, fetchRulerRulesAction } from '../state/actions'; import { RULE_LIST_POLL_INTERVAL_MS } from '../utils/constants'; import { GRAFANA_RULES_SOURCE_NAME, getAllRulesSourceNames } from '../utils/datasource'; -import { createRelativeUrl } from '../utils/url'; import { RuleListPageTitle } from './RuleListPageTitle'; +import { RuleListActionButtons } from './components/RuleListActionButtons'; const VIEWS = { groups: RuleListGroupView, @@ -127,13 +122,7 @@ const RuleListV1 = () => { navId="alert-list" isLoading={false} renderTitle={(title) => } - actions={ - hasAlertRulesCreated && ( - - - - ) - } + actions={} > @@ -162,48 +151,3 @@ const RuleListV1 = () => { }; export default RuleListV1; - -export function CreateAlertButton() { - const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule); - const [createCloudRuleSupported, createCloudRuleAllowed] = useAlertingAbility(AlertingAction.CreateExternalAlertRule); - - const location = useLocation(); - - const canCreateCloudRules = createCloudRuleSupported && createCloudRuleAllowed; - - const canCreateGrafanaRules = createRuleSupported && createRuleAllowed; - - if (canCreateGrafanaRules || canCreateCloudRules) { - return ( - - logInfo(LogMessages.alertRuleFromScratch)} - > - New alert rule - - {canCreateGrafanaRules && AIAlertRuleButtonComponent && } - - ); - } - return null; -} - -function ExportNewRuleButton() { - const returnTo = window.location.pathname + window.location.search; - const url = createRelativeUrl(`/alerting/export-new-rule`, { - returnTo, - }); - return ( - logInfo(LogMessages.exportNewGrafanaRule)} - > - Export rule definition - - ); -} diff --git a/public/app/features/alerting/unified/rule-list/components/RuleListActionButtons.tsx b/public/app/features/alerting/unified/rule-list/components/RuleListActionButtons.tsx new file mode 100644 index 00000000000..97da3d7430e --- /dev/null +++ b/public/app/features/alerting/unified/rule-list/components/RuleListActionButtons.tsx @@ -0,0 +1,74 @@ +import { memo } from 'react'; + +import { Trans, t } from '@grafana/i18n'; +import { logInfo } from '@grafana/runtime'; +import { LinkButton, Stack } from '@grafana/ui'; + +import { LogMessages } from '../../Analytics'; +import { AIAlertRuleButtonComponent } from '../../enterprise-components/AI/AIGenAlertRuleButton/addAIAlertRuleButton'; +import { AlertingAction, useAlertingAbility } from '../../hooks/useAbilities'; +import { createReturnTo } from '../../hooks/useReturnTo'; +import { createRelativeUrl } from '../../utils/url'; + +interface RuleListActionButtonsProps { + hasAlertRulesCreated: boolean; +} + +export const RuleListActionButtons = memo(({ hasAlertRulesCreated }) => { + if (!hasAlertRulesCreated) { + return null; + } + + return ( + + + + + ); +}); + +RuleListActionButtons.displayName = 'RuleListActionButtons'; + +function CreateAlertButtons() { + const [createRuleSupported, createRuleAllowed] = useAlertingAbility(AlertingAction.CreateAlertRule); + const [createCloudRuleSupported, createCloudRuleAllowed] = useAlertingAbility(AlertingAction.CreateExternalAlertRule); + + const returnTo = createReturnTo(); + + const canCreateCloudRules = createCloudRuleSupported && createCloudRuleAllowed; + const canCreateGrafanaRules = createRuleSupported && createRuleAllowed; + + if (canCreateGrafanaRules || canCreateCloudRules) { + return ( + + {canCreateGrafanaRules && } + logInfo(LogMessages.alertRuleFromScratch)} + > + New alert rule + + + ); + } + return null; +} + +function ExportNewRuleButton() { + const returnTo = createReturnTo(); + const url = createRelativeUrl(`/alerting/export-new-rule`, { + returnTo, + }); + return ( + logInfo(LogMessages.exportNewGrafanaRule)} + > + Export rule definition + + ); +}