From 241923b5d6f55929e4645c48872379c0db9a45df Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Wed, 12 Feb 2025 14:02:25 +0300 Subject: [PATCH 1/4] feat(HealthcheckPreview): manual fetch for ydb_ru --- .../AutoRefreshControl/AutoRefreshControl.tsx | 4 +- .../Tenant/Diagnostics/Diagnostics.tsx | 8 +++- .../Healthcheck/HealthcheckPreview.tsx | 46 +++++++++++++++---- .../healthcheckInfo/healthcheckInfo.ts | 9 +++- 4 files changed, 54 insertions(+), 13 deletions(-) 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..7af7c85997 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,24 +44,47 @@ 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, isFetching, error, } = healthcheckApi.useGetHealthcheckInfoQuery( - {database: tenantName}, + {database: tenantName, disabled: healthcheckPreviewDisabled}, { //FIXME https://github.com/ydb-platform/ydb-embedded-ui/issues/1889 - pollingInterval: healthcheckPreviewAutorefreshDisabled - ? undefined - : autoRefreshInterval, + pollingInterval: healthcheckPreviewDisabled ? undefined : autoRefreshInterval, }, ); - 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 +92,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 +121,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 (
diff --git a/src/store/reducers/healthcheckInfo/healthcheckInfo.ts b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts index 402f74ff91..4a3221c9f5 100644 --- a/src/store/reducers/healthcheckInfo/healthcheckInfo.ts +++ b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts @@ -10,9 +10,16 @@ export const healthcheckApi = api.injectEndpoints({ endpoints: (builder) => ({ getHealthcheckInfo: builder.query({ queryFn: async ( - {database, maxLevel}: {database: string; maxLevel?: number}, + { + database, + maxLevel, + disabled, + }: {database: string; maxLevel?: number; disabled?: boolean}, {signal}, ) => { + if (disabled) { + return {data: undefined}; + } try { const data = await window.api.viewer.getHealthcheckInfo( {database, maxLevel}, From 3331f5076354051fd2ec279e232b8e4fd6192124 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Wed, 12 Feb 2025 16:01:08 +0300 Subject: [PATCH 2/4] fix: review --- .../TenantOverview/Healthcheck/HealthcheckPreview.tsx | 5 +++-- src/store/reducers/healthcheckInfo/healthcheckInfo.ts | 9 +-------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx index 7af7c85997..ff07888305 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx @@ -48,17 +48,18 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) { const {name} = useClusterBaseInfo(); - const healthcheckPreviewDisabled = name === 'ydb_ru'; + const healthcheckPreviewDisabled = name !== 'ydb_ru'; const { currentData: data, isFetching, error, } = healthcheckApi.useGetHealthcheckInfoQuery( - {database: tenantName, disabled: healthcheckPreviewDisabled}, + {database: tenantName}, { //FIXME https://github.com/ydb-platform/ydb-embedded-ui/issues/1889 pollingInterval: healthcheckPreviewDisabled ? undefined : autoRefreshInterval, + skip: healthcheckPreviewDisabled, }, ); diff --git a/src/store/reducers/healthcheckInfo/healthcheckInfo.ts b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts index 4a3221c9f5..a08ecf1700 100644 --- a/src/store/reducers/healthcheckInfo/healthcheckInfo.ts +++ b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts @@ -10,16 +10,9 @@ export const healthcheckApi = api.injectEndpoints({ endpoints: (builder) => ({ getHealthcheckInfo: builder.query({ queryFn: async ( - { - database, - maxLevel, - disabled, - }: {database: string; maxLevel?: number; disabled?: boolean}, + {database, maxLevel}: {database: string; maxLevel?: number; disabled?: boolean}, {signal}, ) => { - if (disabled) { - return {data: undefined}; - } try { const data = await window.api.viewer.getHealthcheckInfo( {database, maxLevel}, From 8d2aa6201561572c01a88792e66ba37e4cd2b663 Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Wed, 12 Feb 2025 17:14:06 +0300 Subject: [PATCH 3/4] fix: healthcheckPreviewDisabled for ydb_ru --- .../TenantOverview/Healthcheck/HealthcheckPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx index ff07888305..a5ea1043ee 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/HealthcheckPreview.tsx @@ -48,7 +48,7 @@ export function HealthcheckPreview(props: HealthcheckPreviewProps) { const {name} = useClusterBaseInfo(); - const healthcheckPreviewDisabled = name !== 'ydb_ru'; + const healthcheckPreviewDisabled = name === 'ydb_ru'; const { currentData: data, From b22cfb79876ef3b516e44c07d3a3e4eaa521526b Mon Sep 17 00:00:00 2001 From: Elena Makarova Date: Wed, 12 Feb 2025 17:16:39 +0300 Subject: [PATCH 4/4] fix: review --- src/store/reducers/healthcheckInfo/healthcheckInfo.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/store/reducers/healthcheckInfo/healthcheckInfo.ts b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts index a08ecf1700..402f74ff91 100644 --- a/src/store/reducers/healthcheckInfo/healthcheckInfo.ts +++ b/src/store/reducers/healthcheckInfo/healthcheckInfo.ts @@ -10,7 +10,7 @@ export const healthcheckApi = api.injectEndpoints({ endpoints: (builder) => ({ getHealthcheckInfo: builder.query({ queryFn: async ( - {database, maxLevel}: {database: string; maxLevel?: number; disabled?: boolean}, + {database, maxLevel}: {database: string; maxLevel?: number}, {signal}, ) => { try {