diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx index d9eb2bb6f..58bcc8aa8 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckDetails.tsx @@ -3,6 +3,7 @@ import cn from 'bem-cn-lite'; import type {IResponseError} from '../../../../../types/api/error'; import type {IIssuesTree} from '../../../../../types/store/healthcheck'; import {ResponseError} from '../../../../../components/Errors/ResponseError'; +import {Loader} from '../../../../../components/Loader'; import IssueTree from './IssuesViewer/IssueTree'; @@ -13,17 +14,23 @@ const b = cn('healthcheck'); interface HealthcheckDetailsProps { issueTrees?: IIssuesTree[]; + loading?: boolean; + wasLoaded?: boolean; error?: IResponseError; } export function HealthcheckDetails(props: HealthcheckDetailsProps) { - const {issueTrees, error} = props; + const {issueTrees, loading, wasLoaded, error} = props; const renderContent = () => { if (error) { return ; } + if (loading && !wasLoaded) { + return ; + } + if (!issueTrees || !issueTrees.length) { return i18n('status_message.ok'); } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx index 775b2a3ed..24496c6f0 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx @@ -9,6 +9,7 @@ import type {IResponseError} from '../../../../../types/api/error'; import {DiagnosticCard} from '../../../../../components/DiagnosticCard/DiagnosticCard'; import EntityStatus from '../../../../../components/EntityStatus/EntityStatus'; import {ResponseError} from '../../../../../components/Errors/ResponseError'; +import {Loader} from '../../../../../components/Loader'; import i18n from './i18n'; import './Healthcheck.scss'; @@ -19,17 +20,22 @@ interface HealthcheckPreviewProps { selfCheckResult: SelfCheckResult; issuesStatistics?: [StatusFlag, number][]; loading?: boolean; + wasLoaded?: boolean; onUpdate: VoidFunction; error?: IResponseError; active?: boolean; } export function HealthcheckPreview(props: HealthcheckPreviewProps) { - const {selfCheckResult, issuesStatistics, loading, onUpdate, error, active} = props; + const {selfCheckResult, issuesStatistics, loading, wasLoaded, onUpdate, error, active} = props; const renderHeader = () => { const modifier = selfCheckResult.toLowerCase(); + if (loading && !wasLoaded) { + return null; + } + return (
@@ -50,6 +56,10 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) { return ; } + if (loading && !wasLoaded) { + return ; + } + return (
{!issuesStatistics || !issuesStatistics.length ? ( diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx index c282e3c9b..d2551e6ff 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricsCards.tsx @@ -38,6 +38,7 @@ interface MetricsCardsProps { selfCheckResult: SelfCheckResult; fetchHealthcheck: VoidFunction; healthcheckLoading?: boolean; + healthCheckWasLoaded?: boolean; healthcheckError?: IResponseError; } @@ -47,6 +48,7 @@ export function MetricsCards({ selfCheckResult, fetchHealthcheck, healthcheckLoading, + healthCheckWasLoaded, healthcheckError, }: MetricsCardsProps) { const location = useLocation(); @@ -124,6 +126,7 @@ export function MetricsCards({ issuesStatistics={issuesStatistics} onUpdate={fetchHealthcheck} loading={healthcheckLoading} + wasLoaded={healthCheckWasLoaded} error={healthcheckError} active={metricsTab === TENANT_METRICS_TABS_IDS.healthcheck} /> diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx index ab32ebb9e..95f71b7d8 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx @@ -130,7 +130,14 @@ export function TenantOverview({ return ; } case TENANT_METRICS_TABS_IDS.healthcheck: { - return ; + return ( + + ); } default: { return undefined; @@ -138,7 +145,7 @@ export function TenantOverview({ } }; - if ((tenantLoading && !tenantWasLoaded) || (healthcheckLoading && !healthCheckWasLoaded)) { + if (tenantLoading && !tenantWasLoaded) { return (
@@ -160,6 +167,7 @@ export function TenantOverview({ selfCheckResult={selfCheckResult} fetchHealthcheck={fetchHealthcheck} healthcheckLoading={healthcheckLoading} + healthCheckWasLoaded={healthCheckWasLoaded} healthcheckError={healthcheckError} />