feat: dont fetch render for false graphshard

Author: astandrik

src/components/MetricChart/MetricChart.tsx

@@ -125,6 +125,11 @@ interface DiagnosticsChartProps {
 
     /** Chart title displayed in the toolbar */
     title: string;
+
+    /**
+     * When true, skip fetching chart data completely (no initial request, no polling)
+     */
+    skip?: boolean;
 }
 
 export const MetricChart = ({
@@ -138,6 +143,7 @@ export const MetricChart = ({
     onChartDataStatusChange,
     isChartVisible,
     title,
+    skip,
 }: DiagnosticsChartProps) => {
     const [timeFrame, setTimeFrame] = React.useState<TimeFrame>(defaultTimeFrame);
 
@@ -154,7 +160,7 @@ export const MetricChart = ({
             timeFrame,
             maxDataPoints,
         },
-        {pollingInterval: autorefresh},
+        {pollingInterval: autorefresh, skip},
     );
 
     const loading = isFetching && !currentData;

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {Flex} from '@gravity-ui/uikit';
 
 import {defaultDashboardConfig} from '../../containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig';
+import {useGraphShardExists} from '../../store/reducers/capabilities/hooks';
 import {cn} from '../../utils/cn';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {MetricChart} from '../MetricChart/MetricChart';
@@ -25,6 +26,7 @@ export function QueriesActivityCharts({
     expanded,
     onChartDataStatusChange,
 }: QueriesActivityChartsProps) {
+    const graphShardExists = useGraphShardExists();
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const [hasChartsLoaded, setHasChartsLoaded] = React.useState(false);
 
@@ -84,6 +86,7 @@ export function QueriesActivityCharts({
                     onChartDataStatusChange={handleChartDataStatusChange}
                     isChartVisible={hasChartsLoaded && expanded}
                     title={queriesChartConfig.title}
+                    skip={graphShardExists === false}
                 />
             </Flex>
 
@@ -97,6 +100,7 @@ export function QueriesActivityCharts({
                     onChartDataStatusChange={handleChartDataStatusChange}
                     isChartVisible={hasChartsLoaded && expanded}
                     title={latenciesChartConfig.title}
+                    skip={graphShardExists === false}
                 />
             </Flex>
         </Flex>

src/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.tsx

@@ -49,7 +49,7 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
      *
      * 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
+     * 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) => {
@@ -64,6 +64,7 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
     const chartHeight = CHART_WIDTH / 1.5;
 
     const renderContent = () => {
+        const skipCharts = graphShardExists === false;
         return charts.map((chartConfig, index) => (
             <MetricChart
                 key={index}
@@ -76,6 +77,7 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
                 onChartDataStatusChange={handleChartDataStatusChange}
                 isChartVisible={!isDashboardHidden}
                 title={chartConfig.title}
+                skip={skipCharts}
             />
         ));
     };