diff --git a/public/app/features/alerting/Upgrade.tsx b/public/app/features/alerting/Upgrade.tsx index 5480c226be1..9b3af9f2696 100644 --- a/public/app/features/alerting/Upgrade.tsx +++ b/public/app/features/alerting/Upgrade.tsx @@ -46,13 +46,20 @@ import { createContactPointLink, makeDashboardLink, makeFolderLink } from './uni import { createUrl } from './unified/utils/url'; export const UpgradePage = () => { - const { useGetOrgUpgradeSummaryQuery } = upgradeApi; + const [, { isLoading: isUpgradeLoading }] = upgradeApi.useUpgradeOrgMutation({ + fixedCacheKey: 'upgrade-org-loading', + }); + const [, { isLoading: isCancelLoading }] = upgradeApi.useCancelOrgUpgradeMutation({ + fixedCacheKey: 'cancel-org-upgrade-loading', + }); const { currentData: summary, isError: isFetchError, error: fetchError, - } = useGetOrgUpgradeSummaryQuery(undefined, { + isLoading: isLoading, + } = upgradeApi.useGetOrgUpgradeSummaryQuery(undefined, { pollingInterval: 10000, + skip: isCancelLoading || isUpgradeLoading, // Stop polling when upgrade or cancel is in progress. }); const alertCount = (summary?.migratedDashboards ?? []).reduce( @@ -71,16 +78,22 @@ export const UpgradePage = () => { return null; }, [isFetchError, hasData]); + const showError = isFetchError; + const showLoading = isLoading; + const showStart = !isLoading && !isFetchError && !hasData; + const showData = !isLoading && !isFetchError && hasData; + return ( - {isFetchError && ( + {showError && ( {fetchError instanceof Error ? fetchError.message : 'Unknown error.'} )} - {!isFetchError && !hasData && } - {!isFetchError && hasData && ( + {showLoading && } + {showStart && } + {showData && ( <>