diff --git a/src/components/AutoRefreshControl/AutoRefreshControl.tsx b/src/components/AutoRefreshControl/AutoRefreshControl.tsx index ce24725ae2..c26ea34252 100644 --- a/src/components/AutoRefreshControl/AutoRefreshControl.tsx +++ b/src/components/AutoRefreshControl/AutoRefreshControl.tsx @@ -13,9 +13,10 @@ const b = cn('auto-refresh-control'); interface AutoRefreshControlProps { className?: string; + onManualRefresh?: () => void; } -export function AutoRefreshControl({className}: AutoRefreshControlProps) { +export function AutoRefreshControl({className, onManualRefresh}: AutoRefreshControlProps) { const dispatch = useTypedDispatch(); const [autoRefreshInterval, setAutoRefreshInterval] = useAutoRefreshInterval(); return ( @@ -24,6 +25,7 @@ export function AutoRefreshControl({className}: AutoRefreshControlProps) { view="flat-secondary" onClick={() => { dispatch(api.util.invalidateTags(['All'])); + onManualRefresh?.(); }} extraProps={{'aria-label': i18n('Refresh')}} > diff --git a/src/containers/Tenant/Diagnostics/Diagnostics.tsx b/src/containers/Tenant/Diagnostics/Diagnostics.tsx index 98cddb400b..ead4ae3a48 100644 --- a/src/containers/Tenant/Diagnostics/Diagnostics.tsx +++ b/src/containers/Tenant/Diagnostics/Diagnostics.tsx @@ -174,7 +174,13 @@ function Diagnostics(props: DiagnosticsProps) { }} allowNotSelected={true} /> - + { + //this is needed to collect healthcheck if it is disabled by default https://github.com/ydb-platform/ydb-embedded-ui/issues/1889 + const event = new CustomEvent('diagnosticsRefresh'); + document.dispatchEvent(event); + }} + /> ); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx index 3bcf03adc5..a5ea1043ee 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import { CircleCheck, CircleInfo, @@ -15,7 +17,7 @@ import {useClusterBaseInfo} from '../../../../../store/reducers/cluster/cluster' import {healthcheckApi} from '../../../../../store/reducers/healthcheckInfo/healthcheckInfo'; import {SelfCheckResult} from '../../../../../types/api/healthcheck'; import {cn} from '../../../../../utils/cn'; -import {useAutoRefreshInterval} from '../../../../../utils/hooks'; +import {useAutoRefreshInterval, useTypedSelector} from '../../../../../utils/hooks'; import i18n from './i18n'; @@ -42,8 +44,11 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) { const {tenantName, active} = props; const [autoRefreshInterval] = useAutoRefreshInterval(); + const {metricsTab} = useTypedSelector((state) => state.tenant); + const {name} = useClusterBaseInfo(); - const healthcheckPreviewAutorefreshDisabled = name === 'ydb_ru'; + + const healthcheckPreviewDisabled = name === 'ydb_ru'; const { currentData: data, @@ -53,13 +58,34 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) { {database: tenantName}, { //FIXME https://github.com/ydb-platform/ydb-embedded-ui/issues/1889 - pollingInterval: healthcheckPreviewAutorefreshDisabled - ? undefined - : autoRefreshInterval, + pollingInterval: healthcheckPreviewDisabled ? undefined : autoRefreshInterval, + skip: healthcheckPreviewDisabled, }, ); - const loading = isFetching && data === undefined; + const [getHealthcheckQuery, {currentData: manualData, isFetching: isFetchingManually}] = + healthcheckApi.useLazyGetHealthcheckInfoQuery(); + + React.useEffect(() => { + if (metricsTab === 'healthcheck' && healthcheckPreviewDisabled) { + getHealthcheckQuery({database: tenantName}); + } + }, [metricsTab, healthcheckPreviewDisabled, tenantName, getHealthcheckQuery]); + + React.useEffect(() => { + const fetchHealthcheck = () => { + if (healthcheckPreviewDisabled) { + getHealthcheckQuery({database: tenantName}); + } + }; + document.addEventListener('diagnosticsRefresh', fetchHealthcheck); + return () => { + document.removeEventListener('diagnosticsRefresh', fetchHealthcheck); + }; + }, [tenantName, healthcheckPreviewDisabled, getHealthcheckQuery]); + + const loading = + (isFetching && data === undefined) || (isFetchingManually && manualData === undefined); const renderHeader = () => { return ( @@ -67,9 +93,9 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) {
{i18n('title.healthcheck')}
{/* FIXME https://github.com/ydb-platform/ydb-embedded-ui/issues/1889 */} - {autoRefreshInterval && healthcheckPreviewAutorefreshDisabled ? ( + {healthcheckPreviewDisabled ? ( @@ -96,7 +122,8 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) { return ; } - const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED; + const selfCheckResult = + data?.self_check_result || manualData?.self_check_result || SelfCheckResult.UNSPECIFIED; const modifier = selfCheckResult.toLowerCase(); return (