Revert "Alerting: Fix loading states" (#100717)

Revert "Alerting: Fix loading states (#100641)"

This reverts commit ba3a90d8fd.

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 (
       <AlertingPageWrapper pageNav={defaultPageNav} navId="alert-list" isLoading={true}>
         <></>

public/app/features/alerting/unified/hooks/useCombinedRule.ts

@@ -80,7 +80,6 @@ interface RequestState<T> {
   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<Ru
           ruleName: ruleIdentifier.ruleName,
         },
         loading: false,
-        uninitialized: isUninitialized,
       };
     }
 
     if (isGrafanaRuleIdentifier(ruleIdentifier)) {
-      if (isLoading) {
-        return { loading: isLoading, uninitialized: isUninitialized };
+      if (isLoading || isUninitialized) {
+        return { loading: true };
       }
 
       if (error) {
-        return { loading: false, error, uninitialized: isUninitialized };
+        return { loading: false, error };
       }
-
       if (currentData) {
         return {
           result: {
@@ -217,7 +207,6 @@ export function useRuleLocation(ruleIdentifier: RuleIdentifier): RequestState<Ru
             ruleName: currentData.grafana_alert.title,
           },
           loading: false,
-          uninitialized: isUninitialized,
         };
       }
 
@@ -225,16 +214,14 @@ export function useRuleLocation(ruleIdentifier: RuleIdentifier): RequestState<Ru
       return {
         loading: false,
         error: new Error(`Unable to obtain rule location for rule ${ruleIdentifier.uid}`),
-        uninitialized: isUninitialized,
       };
     }
 
     return {
       loading: false,
-      uninitialized: isUninitialized,
       error: new Error('Unsupported rule identifier'),
     };
-  }, [ruleIdentifier, isUninitialized, isLoading, error, currentData]);
+  }, [ruleIdentifier, isLoading, isUninitialized, error, currentData]);
 }
 
 function getRulesSourceFromIdentifier(ruleIdentifier: RuleIdentifier): RulesSource | undefined {
@@ -262,12 +249,16 @@ export function useRuleWithLocation({
     loading: isLoadingRuleLocation,
     error: ruleLocationError,
     result: ruleLocation,
-    uninitialized,
   } = useRuleLocation(ruleIdentifier);
 
   const [
     fetchRulerRuleGroup,
-    { currentData: rulerRuleGroup, isLoading: isLoadingRulerGroup, error: rulerRuleGroupError },
+    {
+      currentData: rulerRuleGroup,
+      isLoading: isLoadingRulerGroup,
+      isUninitialized: isUninitializedRulerGroup,
+      error: rulerRuleGroupError,
+    },
   ] = alertRuleApi.endpoints.getRuleGroupForNamespace.useLazyQuery();
 
   useEffect(() => {
@@ -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,
   };
 }
 

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,
   };
 }

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 <LoadingPlaceholder text="Loading rule..." />;
@@ -42,11 +37,11 @@ export function ExistingRuleEditor({ identifier }: ExistingRuleEditorProps) {
     );
   }
 
-  if (ruleNotFound) {
-    return <EntityNotFound entity="Rule" />;
+  if (!ruleWithLocation) {
+    return <AlertWarning title="Rule not found">Sorry! This rule does not exist.</AlertWarning>;
   }
 
-  if (isEditable === false && !loadingEditable) {
+  if (isEditable === false) {
     return <AlertWarning title="Cannot edit rule">Sorry! You do not have permission to edit this rule.</AlertWarning>;
   }