Alerting: Fix available labels in the alert panel groupby dropdown (#63573)

public/app/features/alerting/unified/utils/redux.ts

@@ -157,6 +157,14 @@ export function messageFromError(e: Error | FetchError | SerializedError): strin
   return (e as Error)?.message || String(e);
 }
 
+export function isAsyncRequestMapSliceSettled<T>(slice: AsyncRequestMapSlice<T>): boolean {
+  return Object.values(slice).every(isAsyncRequestStateSettled);
+}
+
+export function isAsyncRequestStateSettled<T>(state: AsyncRequestState<T>): boolean {
+  return state.dispatched && !state.loading;
+}
+
 export function isAsyncRequestMapSliceFulfilled<T>(slice: AsyncRequestMapSlice<T>): boolean {
   return Object.values(slice).every(isAsyncRequestStateFulfilled);
 }

public/app/plugins/panel/alertlist/GroupByWithLoading.tsx

@@ -7,8 +7,8 @@ import { useUnifiedAlertingSelector } from 'app/features/alerting/unified/hooks/
 import { fetchAllPromRulesAction } from 'app/features/alerting/unified/state/actions';
 import { getAllRulesSourceNames } from 'app/features/alerting/unified/utils/datasource';
 import {
-  isAsyncRequestMapSliceFulfilled,
   isAsyncRequestMapSlicePending,
+  isAsyncRequestMapSliceSettled,
 } from 'app/features/alerting/unified/utils/redux';
 import { useDispatch } from 'app/types';
 import { AlertingRule } from 'app/types/unified-alerting';
@@ -33,7 +33,7 @@ export const GroupBy: FC<Props> = (props) => {
   const promRulesByDatasource = useUnifiedAlertingSelector((state) => state.promRules);
   const rulesDataSourceNames = useMemo(getAllRulesSourceNames, []);
 
-  const allRequestsReady = isAsyncRequestMapSliceFulfilled(promRulesByDatasource);
+  const allRequestsReady = isAsyncRequestMapSliceSettled(promRulesByDatasource);
   const loading = isAsyncRequestMapSlicePending(promRulesByDatasource);
 
   const labels = useMemo(() => {