From dc2331919b78a3fed5c590f43e9b13cfaa9746b1 Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 23 Jul 2025 15:40:09 +0300 Subject: [PATCH 1/4] fix: jumping content in database tabs --- .../TenantDashboard/TenantDashboard.tsx | 13 +++++++++++-- src/store/reducers/capabilities/capabilities.ts | 7 +++++++ src/store/reducers/capabilities/hooks.ts | 7 +++++++ src/types/api/capabilities.ts | 3 +++ 4 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx index a28c1024d2..a3b7d5f80a 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx @@ -6,6 +6,7 @@ import type { ChartOptions, MetricDescription, } from '../../../../../components/MetricChart'; +import {useGraphShardExists} from '../../../../../store/reducers/capabilities/hooks'; import {cn} from '../../../../../utils/cn'; import {useAutoRefreshInterval} from '../../../../../utils/hooks'; @@ -28,7 +29,13 @@ interface TenantDashboardProps { } export const TenantDashboard = ({database, charts}: TenantDashboardProps) => { - const [isDashboardHidden, setIsDashboardHidden] = React.useState(true); + const graphShardExists = useGraphShardExists(); + + // If GraphShardExists capability is true, show dashboard immediately + // Otherwise, fall back to reactive behavior (hidden until first chart succeeds) + const [isDashboardHidden, setIsDashboardHidden] = React.useState( + graphShardExists !== true, + ); const [autoRefreshInterval] = useAutoRefreshInterval(); // Refetch data only if dashboard successfully loaded @@ -40,11 +47,13 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => { * 2. ydb version does not have /viewer/json/render endpoint (400, 404, CORS error, etc.) * * If at least one chart successfully loaded, dashboard should be shown + * This fallback behavior is only used when GraphShardExists capability is not available or false * @link https://github.com/ydb-platform/ydb-embedded-ui/issues/659 * @todo disable only for specific errors ('GraphShard is not enabled') after ydb-stable-24 is generally used */ const handleChartDataStatusChange = (chartStatus: ChartDataStatus) => { - if (chartStatus === 'success') { + // Only use reactive behavior when GraphShardExists capability is not true + if (graphShardExists !== true && chartStatus === 'success') { setIsDashboardHidden(false); } }; diff --git a/src/store/reducers/capabilities/capabilities.ts b/src/store/reducers/capabilities/capabilities.ts index 4c60366d4e..fa4abc341d 100644 --- a/src/store/reducers/capabilities/capabilities.ts +++ b/src/store/reducers/capabilities/capabilities.ts @@ -65,6 +65,13 @@ export const selectSecuritySetting = createSelector( selectDatabaseCapabilities(state, database).data?.Settings?.Security?.[setting], ); +export const selectGraphShardExists = createSelector( + (state: RootState) => state, + (_state: RootState, database?: string) => database, + (state, database) => + selectDatabaseCapabilities(state, database).data?.Settings?.Database?.GraphShardExists, +); + export async function queryCapability( capability: Capability, database: string | undefined, diff --git a/src/store/reducers/capabilities/hooks.ts b/src/store/reducers/capabilities/hooks.ts index 24232e419a..6f03517ee3 100644 --- a/src/store/reducers/capabilities/hooks.ts +++ b/src/store/reducers/capabilities/hooks.ts @@ -6,6 +6,7 @@ import { capabilitiesApi, selectCapabilityVersion, selectDatabaseCapabilities, + selectGraphShardExists, selectMetaCapabilities, selectMetaCapabilityVersion, selectSecuritySetting, @@ -98,6 +99,12 @@ const useGetSecuritySetting = (feature: SecuritySetting) => { return useTypedSelector((state) => selectSecuritySetting(state, feature, database)); }; +export const useGraphShardExists = () => { + const database = useDatabaseFromQuery(); + + return useTypedSelector((state) => selectGraphShardExists(state, database)); +}; + export const useClusterWithoutAuthInUI = () => { return useGetSecuritySetting('UseLoginProvider') === false; }; diff --git a/src/types/api/capabilities.ts b/src/types/api/capabilities.ts index 0a20d28786..c2bc53f9a8 100644 --- a/src/types/api/capabilities.ts +++ b/src/types/api/capabilities.ts @@ -5,6 +5,9 @@ export interface CapabilitiesResponse { Capabilities: Record, number>; Settings?: { Security?: Record, boolean>; + Database?: { + GraphShardExists?: boolean; + }; }; } From a3a68f5f97789c890fefec55d67a444e0184d30f Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 23 Jul 2025 15:51:26 +0300 Subject: [PATCH 2/4] fix: better code --- .../TenantDashboard/TenantDashboard.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx index a3b7d5f80a..a3618d7858 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx @@ -31,11 +31,12 @@ interface TenantDashboardProps { export const TenantDashboard = ({database, charts}: TenantDashboardProps) => { const graphShardExists = useGraphShardExists(); - // If GraphShardExists capability is true, show dashboard immediately - // Otherwise, fall back to reactive behavior (hidden until first chart succeeds) - const [isDashboardHidden, setIsDashboardHidden] = React.useState( - graphShardExists !== true, - ); + const [hasSuccessfulChart, setHasSuccessfulChart] = React.useState(false); + + const isDashboardHidden = React.useMemo(() => { + return graphShardExists !== true && !hasSuccessfulChart; + }, [graphShardExists, hasSuccessfulChart]); + const [autoRefreshInterval] = useAutoRefreshInterval(); // Refetch data only if dashboard successfully loaded @@ -54,7 +55,7 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => { const handleChartDataStatusChange = (chartStatus: ChartDataStatus) => { // Only use reactive behavior when GraphShardExists capability is not true if (graphShardExists !== true && chartStatus === 'success') { - setIsDashboardHidden(false); + setHasSuccessfulChart(true); } }; From 5618d8a5b35de158c6f19831cf2592d7107d1317 Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Wed, 23 Jul 2025 16:02:11 +0300 Subject: [PATCH 3/4] fix: nanofix --- .../TenantOverview/TenantDashboard/TenantDashboard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx index a3618d7858..fd08849d9f 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx @@ -53,8 +53,8 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => { * @todo disable only for specific errors ('GraphShard is not enabled') after ydb-stable-24 is generally used */ const handleChartDataStatusChange = (chartStatus: ChartDataStatus) => { - // Only use reactive behavior when GraphShardExists capability is not true - if (graphShardExists !== true && chartStatus === 'success') { + // Always track successful chart loads for fallback behavior + if (chartStatus === 'success') { setHasSuccessfulChart(true); } }; From 9a28c1230ce082e6dd3cb1657d33b744e94f7de9 Mon Sep 17 00:00:00 2001 From: Anton Standrik Date: Thu, 24 Jul 2025 11:22:10 +0300 Subject: [PATCH 4/4] fix: review fix --- .../TenantOverview/TenantDashboard/TenantDashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx index fd08849d9f..a5dda73abc 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx @@ -34,7 +34,7 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => { const [hasSuccessfulChart, setHasSuccessfulChart] = React.useState(false); const isDashboardHidden = React.useMemo(() => { - return graphShardExists !== true && !hasSuccessfulChart; + return !graphShardExists && !hasSuccessfulChart; }, [graphShardExists, hasSuccessfulChart]); const [autoRefreshInterval] = useAutoRefreshInterval();