diff --git a/public/app/features/alerting/unified/RuleViewer.tsx b/public/app/features/alerting/unified/RuleViewer.tsx index 43c38b699d0..9df84a41b18 100644 --- a/public/app/features/alerting/unified/RuleViewer.tsx +++ b/public/app/features/alerting/unified/RuleViewer.tsx @@ -36,7 +36,7 @@ const RuleViewer = (): JSX.Element => { }, [id]); // we then fetch the rule from the correct API endpoint(s) - const { loading, error, result: rule, uninitialized } = useCombinedRule({ ruleIdentifier: identifier, limitAlerts }); + const { loading, error, result: rule } = useCombinedRule({ ruleIdentifier: identifier, limitAlerts }); if (error) { return ( @@ -46,7 +46,7 @@ const RuleViewer = (): JSX.Element => { ); } - if (loading || uninitialized) { + if (loading) { return ( <> diff --git a/public/app/features/alerting/unified/hooks/useCombinedRule.ts b/public/app/features/alerting/unified/hooks/useCombinedRule.ts index 5d45c65137c..0841b794fb5 100644 --- a/public/app/features/alerting/unified/hooks/useCombinedRule.ts +++ b/public/app/features/alerting/unified/hooks/useCombinedRule.ts @@ -80,7 +80,6 @@ interface RequestState { result?: T; loading: boolean; error?: unknown; - uninitialized: boolean; } interface Props { @@ -100,7 +99,6 @@ export function useCombinedRule({ ruleIdentifier, limitAlerts }: Props): Request loading: isLoadingRuleLocation, error: ruleLocationError, result: ruleLocation, - uninitialized, } = useRuleLocation(ruleIdentifier); const { @@ -127,12 +125,7 @@ export function useCombinedRule({ ruleIdentifier, limitAlerts }: Props): Request const [ fetchRulerRuleGroup, - { - currentData: rulerRuleGroup, - isLoading: isLoadingRulerGroup, - error: rulerRuleGroupError, - isUninitialized: ruleGroupUninitialized, - }, + { currentData: rulerRuleGroup, isLoading: isLoadingRulerGroup, error: rulerRuleGroupError }, ] = alertRuleApi.endpoints.getRuleGroupForNamespace.useLazyQuery(); useEffect(() => { @@ -165,10 +158,9 @@ export function useCombinedRule({ ruleIdentifier, limitAlerts }: Props): Request }, [ruleIdentifier, ruleSourceName, promRuleNs, rulerRuleGroup, ruleSource, ruleLocation, namespaceName]); return { - loading: isLoadingDsFeatures || isLoadingPromRules || isLoadingRulerGroup || ruleGroupUninitialized, + loading: isLoadingDsFeatures || isLoadingPromRules || isLoadingRulerGroup, error: ruleLocationError ?? promRuleNsError ?? rulerRuleGroupError, result: rule, - uninitialized, }; } @@ -195,19 +187,17 @@ export function useRuleLocation(ruleIdentifier: RuleIdentifier): RequestState { @@ -306,10 +297,9 @@ export function useRuleWithLocation({ }, [ruleIdentifier, rulerRuleGroup, ruleSource, ruleLocation]); return { - loading: isLoadingRuleLocation || isLoadingDsFeatures || isLoadingRulerGroup, + loading: isLoadingRuleLocation || isLoadingDsFeatures || isLoadingRulerGroup || isUninitializedRulerGroup, error: ruleLocationError ?? rulerRuleGroupError, result: ruleWithLocation, - uninitialized, }; } diff --git a/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts b/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts index bc5d8a182a2..50ca91b8188 100644 --- a/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts +++ b/public/app/features/alerting/unified/hooks/useIsRuleEditable.ts @@ -16,22 +16,19 @@ interface ResultBag { } export function useIsRuleEditable(rulesSourceName: string, rule?: RulerRuleDTO): ResultBag { - const { currentData: dsFeatures, isLoading: loadingDataSourceFeatures } = - featureDiscoveryApi.endpoints.discoverDsFeatures.useQuery({ - uid: getDatasourceAPIUid(rulesSourceName), - }); + const { currentData: dsFeatures, isLoading } = featureDiscoveryApi.endpoints.discoverDsFeatures.useQuery({ + uid: getDatasourceAPIUid(rulesSourceName), + }); const folderUID = rule && isGrafanaRulerRule(rule) ? rule.grafana_alert.namespace_uid : undefined; - const rulePermission = getRulesPermissions(rulesSourceName); - const { folder, loading: loadingFolder } = useFolder(folderUID); + const rulePermission = getRulesPermissions(rulesSourceName); + const { folder, loading } = useFolder(folderUID); if (!rule) { return { isEditable: false, isRemovable: false, loading: false }; } - const loading = loadingFolder || loadingDataSourceFeatures; - // Grafana rules can be edited if user can edit the folder they're in // When RBAC is disabled access to a folder is the only requirement for managing rules // When RBAC is enabled the appropriate alerting permissions need to be met @@ -42,23 +39,13 @@ export function useIsRuleEditable(rulesSourceName: string, rule?: RulerRuleDTO): ); } - // loading folder information - if (loadingFolder) { - return { - isRulerAvailable: true, - isEditable: false, - isRemovable: false, - loading: true, - }; - } - - // invalid folder UID if (!folder) { + // Loading or invalid folder UID return { isRulerAvailable: true, isEditable: false, isRemovable: false, - loading: false, + loading, }; } @@ -69,7 +56,7 @@ export function useIsRuleEditable(rulesSourceName: string, rule?: RulerRuleDTO): isRulerAvailable: true, isEditable: canEditGrafanaRules, isRemovable: canRemoveGrafanaRules, - loading: loading, + loading: loading || isLoading, }; } @@ -82,6 +69,6 @@ export function useIsRuleEditable(rulesSourceName: string, rule?: RulerRuleDTO): isRulerAvailable, isEditable: canEditCloudRules && isRulerAvailable, isRemovable: canRemoveCloudRules && isRulerAvailable, - loading: loading, + loading: isLoading, }; } diff --git a/public/app/features/alerting/unified/rule-editor/ExistingRuleEditor.tsx b/public/app/features/alerting/unified/rule-editor/ExistingRuleEditor.tsx index 8bc21533774..7d1b9d92fcf 100644 --- a/public/app/features/alerting/unified/rule-editor/ExistingRuleEditor.tsx +++ b/public/app/features/alerting/unified/rule-editor/ExistingRuleEditor.tsx @@ -1,5 +1,4 @@ import { Alert, LoadingPlaceholder } from '@grafana/ui'; -import { EntityNotFound } from 'app/core/components/PageNotFound/EntityNotFound'; import { RuleIdentifier } from 'app/types/unified-alerting'; import { AlertWarning } from '../AlertWarning'; @@ -14,21 +13,17 @@ interface ExistingRuleEditorProps { } export function ExistingRuleEditor({ identifier }: ExistingRuleEditorProps) { - const ruleSourceName = ruleId.ruleIdentifierToRuleSourceName(identifier); - const { loading: loadingAlertRule, result: ruleWithLocation, error, - uninitialized, } = useRuleWithLocation({ ruleIdentifier: identifier }); + const ruleSourceName = ruleId.ruleIdentifierToRuleSourceName(identifier); + const { isEditable, loading: loadingEditable } = useIsRuleEditable(ruleSourceName, ruleWithLocation?.rule); - // the loading of the editable state only happens once we've got a rule with location loaded, so we set it to true by default here - const loadingEditableState = Boolean(ruleWithLocation) ? loadingEditable : true; - const loading = loadingAlertRule || loadingEditableState || uninitialized; - const ruleNotFound = !Boolean(ruleWithLocation); + const loading = loadingAlertRule || loadingEditable; if (loading) { return ; @@ -42,11 +37,11 @@ export function ExistingRuleEditor({ identifier }: ExistingRuleEditorProps) { ); } - if (ruleNotFound) { - return ; + if (!ruleWithLocation) { + return Sorry! This rule does not exist.; } - if (isEditable === false && !loadingEditable) { + if (isEditable === false) { return Sorry! You do not have permission to edit this rule.; }