fix: better code

Author: astandrik

src/components/QueriesActivityBar/useQueriesActivityData.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 
+import {selectGraphShardExists} from '../../store/reducers/capabilities/capabilities';
 import {topQueriesApi} from '../../store/reducers/executeTopQueries/executeTopQueries';
 import type {KeyValueRow} from '../../types/api/query';
 import {useAutoRefreshInterval} from '../../utils/hooks';
+import {useTypedSelector} from '../../utils/hooks/useTypedSelector';
 import type {TimeFrame} from '../../utils/timeframes';
 import {chartApi} from '../MetricChart/reducer';
 
@@ -26,6 +28,10 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
 
     const shouldRefresh = autoRefreshInterval;
 
+    // Respect GraphShardExists if explicitly false for the specific tenant
+    const graphShardExists = useTypedSelector((state) => selectGraphShardExists(state, tenantName));
+    const skipCharts = graphShardExists === false;
+
     const {data: runningQueriesData} = topQueriesApi.useGetRunningQueriesQuery(
         {
             database: tenantName,
@@ -45,7 +51,7 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
             timeFrame: QUERIES_TIME_FRAME,
             maxDataPoints: 30,
         },
-        {pollingInterval: shouldRefresh},
+        {pollingInterval: shouldRefresh, skip: skipCharts},
     );
 
     const {data: latencyData} = chartApi.useGetChartDataQuery(
@@ -55,21 +61,24 @@ export function useQueriesActivityData(tenantName: string): UseQueriesActivityDa
             timeFrame: LATENCIES_TIME_FRAME,
             maxDataPoints: 30,
         },
-        {pollingInterval: shouldRefresh},
+        {pollingInterval: shouldRefresh, skip: skipCharts},
     );
 
     const runningQueriesCount = runningQueriesData?.resultSets?.[0]?.result?.length || 0;
 
     // Determine chart availability from queries API success/error state
     const areChartsAvailable = React.useMemo(() => {
+        if (skipCharts) {
+            return false;
+        }
         if (queriesSuccess) {
             return true;
         }
         if (queriesError) {
             return false;
         }
         return null; // Still loading
-    }, [queriesSuccess, queriesError]);
+    }, [queriesSuccess, queriesError, skipCharts]);
 
     const qps = React.useMemo(
         () => calculateQueriesPerSecond(queriesPerSecData?.metrics?.[0]?.data),

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

@@ -42,6 +42,11 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
     // Refetch data only if dashboard successfully loaded
     const shouldRefresh = isDashboardHidden ? 0 : autoRefreshInterval;
 
+    // Do not render charts at all when GraphShard capability explicitly says it's absent
+    if (graphShardExists === false) {
+        return null;
+    }
+
     /**
      * Charts should be hidden, if they are not enabled:
      * 1. GraphShard is not enabled
@@ -64,7 +69,6 @@ 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}
@@ -77,7 +81,6 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
                 onChartDataStatusChange={handleChartDataStatusChange}
                 isChartVisible={!isDashboardHidden}
                 title={chartConfig.title}
-                skip={skipCharts}
             />
         ));
     };