{\"You haven't created any alert rules yet\"}
\n\n Deleting "{group.name}" will permanently remove the group and{' '}\n {group.rules.length} alert {pluralize('rule', group.rules.length)} belonging to it.\n
\nAre you sure you want to delete this group?
\nThere are no Prometheus or Loki data sources configured.
}\n {hasDataSourcesConfigured && !hasDataSourcesLoading && !hasNamespaces &&No rules found.
}\n {!hasSomeResults && hasDataSourcesLoading &&No rules found.
}\n {!hasResult && loading &&\n Data sources containing configured alert rules are Mimir or Loki data sources where alert\n rules are stored and evaluated in the data source itself.\n
\n\n In these data sources, you can select Manage alerts via Alerting UI to be able to manage these\n alert rules in the Grafana UI as well as in the data source where they were configured.\n
\n{expr}\n \n );\n}\n\nconst helpStyles = (theme: GrafanaTheme2) => ({\n grid: css({\n display: 'grid',\n gridTemplateColumns: 'max-content auto',\n gap: theme.spacing(1),\n alignItems: 'center',\n }),\n code: css({\n display: 'block',\n textAlign: 'center',\n }),\n});\n\nexport default RulesFilter;\n","import { css } from '@emotion/css';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\nimport { useAsyncFn, useInterval } from 'react-use';\n\nimport { GrafanaTheme2, urlUtil } from '@grafana/data';\nimport { Button, LinkButton, useStyles2, withErrorBoundary } from '@grafana/ui';\nimport { useQueryParams } from 'app/core/hooks/useQueryParams';\nimport { useDispatch } from 'app/types';\n\nimport { CombinedRuleNamespace } from '../../../types/unified-alerting';\n\nimport { LogMessages, logInfo, trackRuleListNavigation } from './Analytics';\nimport { AlertingPageWrapper } from './components/AlertingPageWrapper';\nimport { NoRulesSplash } from './components/rules/NoRulesCTA';\nimport { INSTANCES_DISPLAY_LIMIT } from './components/rules/RuleDetails';\nimport { RuleListErrors } from './components/rules/RuleListErrors';\nimport { RuleListGroupView } from './components/rules/RuleListGroupView';\nimport { RuleListStateView } from './components/rules/RuleListStateView';\nimport { RuleStats } from './components/rules/RuleStats';\nimport RulesFilter from './components/rules/RulesFilter';\nimport { AlertingAction, useAlertingAbility } from './hooks/useAbilities';\nimport { useCombinedRuleNamespaces } from './hooks/useCombinedRuleNamespaces';\nimport { useFilteredRules, useRulesFilter } from './hooks/useFilteredRules';\nimport { useUnifiedAlertingSelector } from './hooks/useUnifiedAlertingSelector';\nimport { fetchAllPromAndRulerRulesAction } from './state/actions';\nimport { RULE_LIST_POLL_INTERVAL_MS } from './utils/constants';\nimport { getAllRulesSourceNames } from './utils/datasource';\n\nconst VIEWS = {\n groups: RuleListGroupView,\n state: RuleListStateView,\n};\n\n// make sure we ask for 1 more so we show the \"show x more\" button\nconst LIMIT_ALERTS = INSTANCES_DISPLAY_LIMIT + 1;\n\nconst RuleList = withErrorBoundary(\n () => {\n const dispatch = useDispatch();\n const styles = useStyles2(getStyles);\n const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []);\n const [expandAll, setExpandAll] = useState(false);\n\n const onFilterCleared = useCallback(() => setExpandAll(false), []);\n\n const [queryParams] = useQueryParams();\n const { filterState, hasActiveFilters } = useRulesFilter();\n\n const view = VIEWS[queryParams['view'] as keyof typeof VIEWS]\n ? (queryParams['view'] as keyof typeof VIEWS)\n : 'groups';\n\n const ViewComponent = VIEWS[view];\n\n const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules);\n const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);\n\n const loading = rulesDataSourceNames.some(\n (name) => promRuleRequests[name]?.loading || rulerRuleRequests[name]?.loading\n );\n\n const promRequests = Object.entries(promRuleRequests);\n const rulerRequests = Object.entries(rulerRuleRequests);\n\n const allPromLoaded = promRequests.every(\n ([_, state]) => state.dispatched && (state?.result !== undefined || state?.error !== undefined)\n );\n const allRulerLoaded = rulerRequests.every(\n ([_, state]) => state.dispatched && (state?.result !== undefined || state?.error !== undefined)\n );\n\n const allPromEmpty = promRequests.every(([_, state]) => state.dispatched && state?.result?.length === 0);\n\n const allRulerEmpty = rulerRequests.every(([_, state]) => {\n const rulerRules = Object.entries(state?.result ?? {});\n const noRules = rulerRules.every(([_, result]) => result?.length === 0);\n return noRules && state.dispatched;\n });\n\n const limitAlerts = hasActiveFilters ? undefined : LIMIT_ALERTS;\n // Trigger data refresh only when the RULE_LIST_POLL_INTERVAL_MS elapsed since the previous load FINISHED\n const [_, fetchRules] = useAsyncFn(async () => {\n if (!loading) {\n await dispatch(fetchAllPromAndRulerRulesAction(false, { limitAlerts }));\n }\n }, [loading, limitAlerts, dispatch]);\n\n useEffect(() => {\n trackRuleListNavigation().catch(() => {});\n }, []);\n\n // fetch rules, then poll every RULE_LIST_POLL_INTERVAL_MS\n useEffect(() => {\n dispatch(fetchAllPromAndRulerRulesAction(false, { limitAlerts }));\n }, [dispatch, limitAlerts]);\n useInterval(fetchRules, RULE_LIST_POLL_INTERVAL_MS);\n\n // Show splash only when we loaded all of the data sources and none of them has alerts\n const hasNoAlertRulesCreatedYet =\n allPromLoaded && allPromEmpty && promRequests.length > 0 && allRulerEmpty && allRulerLoaded;\n const hasAlertRulesCreated = !hasNoAlertRulesCreatedYet;\n\n const combinedNamespaces: CombinedRuleNamespace[] = useCombinedRuleNamespaces();\n const filteredNamespaces = useFilteredRules(combinedNamespaces, filterState);\n\n return (\n // We don't want to show the Loading... indicator for the whole page.\n // We show separate indicators for Grafana-managed and Cloud rules\n