fix: simplify charts check

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -8,12 +8,12 @@ import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPag
 import {parseQuery} from '../../routes';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../store/reducers/tenant/constants';
 import {cn} from '../../utils/cn';
-import type {ChartDataStatus} from '../MetricChart/types';
 
 import {QueriesActivityAlert} from './QueriesActivityAlert';
 import {QueriesActivityCharts} from './QueriesActivityCharts';
 import {QueriesActivitySkeleton} from './QueriesActivitySkeleton';
 import i18n from './i18n';
+import {useChartAvailability} from './useChartAvailability';
 import {useQueriesActivityData} from './useQueriesActivityData';
 import {formatTrendValue} from './utils';
 
@@ -29,25 +29,13 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
     const history = useHistory();
     const location = useLocation();
     const [expanded, setExpanded] = React.useState(false);
-    const [areChartsAvailable, setAreChartsAvailable] = React.useState<boolean | null>(null);
+
+    // Check chart availability without rendering hidden components
+    const areChartsAvailable = useChartAvailability(tenantName);
 
     const {runningQueriesCount, uniqueApplications, uniqueUsers, qps, latency} =
         useQueriesActivityData(tenantName);
 
-    /**
-     * Activity bar should show different modes based on chart availability:
-     * 1. If charts are available: show expandable mode with charts
-     * 2. If charts are not available: show compact alert-style mode with stats only
-     * 3. While determining chart availability: show skeleton loading state
-     */
-    const handleChartDataStatusChange = React.useCallback((chartStatus: ChartDataStatus) => {
-        if (chartStatus === 'success') {
-            setAreChartsAvailable(true);
-        } else if (chartStatus === 'error') {
-            setAreChartsAvailable(false);
-        }
-    }, []);
-
     const handleOpenRunningQueries = () => {
         const queryParams = parseQuery(location);
         const path = getTenantPath({
@@ -64,19 +52,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
 
     // Show skeleton while determining chart availability
     if (areChartsAvailable === null) {
-        return (
-            <>
-                {/* Hidden chart check to determine availability */}
-                <div style={{display: 'none'}}>
-                    <QueriesActivityCharts
-                        tenantName={tenantName}
-                        expanded={false}
-                        onChartDataStatusChange={handleChartDataStatusChange}
-                    />
-                </div>
-                <QueriesActivitySkeleton />
-            </>
-        );
+        return <QueriesActivitySkeleton />;
     }
 
     // Render compact alert-style mode when charts are not available
@@ -180,11 +156,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                         </div>
                     </div>
                 )}
-                <QueriesActivityCharts
-                    tenantName={tenantName}
-                    expanded={expanded}
-                    onChartDataStatusChange={handleChartDataStatusChange}
-                />
+                <QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
             </Card>
         </div>
     );

src/components/QueriesActivityBar/useChartAvailability.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {chartApi} from '../MetricChart/reducer';
+
+/**
+ * Hook to check if chart API is available without rendering full chart components.
+ * Makes a minimal test query to determine if charts are supported.
+ */
+export function useChartAvailability(tenantName: string): boolean | null {
+    const [isAvailable, setIsAvailable] = React.useState<boolean | null>(null);
+
+    // Make a minimal chart query to test availability
+    const {isSuccess, isError} = chartApi.useGetChartDataQuery(
+        {
+            database: tenantName,
+            metrics: [{target: 'queries.requests'}],
+            timeFrame: '30m', // Smallest valid time frame
+            maxDataPoints: 2, // Minimal data points
+        },
+        {
+            // Skip if we already know the result
+            skip: isAvailable !== null,
+        },
+    );
+
+    React.useEffect(() => {
+        if (isSuccess) {
+            setIsAvailable(true);
+        } else if (isError) {
+            setIsAvailable(false);
+        }
+    }, [isSuccess, isError]);
+
+    return isAvailable;
+}