fix: move to separate component

Author: astandrik

src/components/QueriesActivityBar/QueriesActivityBar.tsx

@@ -4,7 +4,6 @@ import {CirclePlay, Clock, Display, Person, Rocket} from '@gravity-ui/icons';
 import {ArrowToggle, Button, Disclosure, Flex, Icon, Label, Text} from '@gravity-ui/uikit';
 import {useHistory, useLocation} from 'react-router-dom';
 
-import {defaultDashboardConfig} from '../../containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig';
 import {TenantTabsGroups, getTenantPath} from '../../containers/Tenant/TenantPages';
 import {parseQuery} from '../../routes';
 import {topQueriesApi} from '../../store/reducers/executeTopQueries/executeTopQueries';
@@ -13,10 +12,9 @@ import type {KeyValueRow} from '../../types/api/query';
 import {cn} from '../../utils/cn';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import type {TimeFrame} from '../../utils/timeframes';
-import {MetricChart} from '../MetricChart/MetricChart';
 import {chartApi} from '../MetricChart/reducer';
-import type {ChartDataStatus} from '../MetricChart/types';
 
+import {QueriesActivityCharts} from './QueriesActivityCharts';
 import i18n from './i18n';
 import {calculateLatency, calculateQueriesPerSecond} from './utils';
 
@@ -33,16 +31,8 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
     const location = useLocation();
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const [expanded, setExpanded] = React.useState(false);
-    const [queriesTimeFrame, setQueriesTimeFrame] = React.useState<TimeFrame>('1h');
-    const [latenciesTimeFrame, setLatenciesTimeFrame] = React.useState<TimeFrame>('1h');
-    const [areChartsHidden, setAreChartsHidden] = React.useState(true);
-
-    // Extract chart configurations from defaultDashboardConfig
-    const queriesChartConfig = defaultDashboardConfig[0]; // Queries per second chart
-    const latenciesChartConfig = defaultDashboardConfig[1]; // Transaction latencies chart
-
-    // Refetch data only if charts successfully loaded
-    const shouldRefresh = areChartsHidden ? 0 : autoRefreshInterval;
+    const [queriesTimeFrame] = React.useState<TimeFrame>('1h');
+    const [latenciesTimeFrame] = React.useState<TimeFrame>('1h');
 
     // Fetch running queries
     const {data: runningQueriesData} = topQueriesApi.useGetRunningQueriesQuery(
@@ -118,12 +108,6 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
         history.push(path);
     };
 
-    const handleChartDataStatusChange = React.useCallback((status: ChartDataStatus) => {
-        if (status === 'success') {
-            setAreChartsHidden(false);
-        }
-    }, []);
-
     // Helper to format trend display
     const formatTrendValue = (val: number) => {
         if (val >= 1) {
@@ -135,14 +119,6 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
         }
     };
 
-    const handleQueriesTimeFrameChange = React.useCallback((newTimeFrame: TimeFrame) => {
-        setQueriesTimeFrame(newTimeFrame);
-    }, []);
-
-    const handleLatenciesTimeFrameChange = React.useCallback((newTimeFrame: TimeFrame) => {
-        setLatenciesTimeFrame(newTimeFrame);
-    }, []);
-
     return (
         <div className={b({expanded})}>
             <Disclosure expanded={expanded} onUpdate={setExpanded} className={b('disclosure')}>
@@ -237,61 +213,7 @@ export function QueriesActivityBar({tenantName}: QueriesActivityBarProps) {
                     </div>
                 </div>
             </Disclosure>
-
-            {/* 
-                WORKAROUND: Charts are rendered outside Disclosure component due to YAGR tooltip bug
-                Issue: https://github.com/gravity-ui/yagr/issues/262
-                
-                Problem: YAGR tooltips don't work when charts are mounted inside collapsible containers
-                that use CSS transforms or have complex nested DOM structures. The tooltip initialization
-                fails when the chart is not immediately visible during mounting.
-                
-                TODO: Remove this workaround once the upstream issue is fixed
-            */}
-            {expanded && (
-                <div
-                    className={b('charts')}
-                    style={{display: areChartsHidden ? 'none' : undefined}}
-                >
-                    <div className={b('chart-container')}>
-                        <MetricChart
-                            database={tenantName}
-                            title={queriesChartConfig.title}
-                            metrics={queriesChartConfig.metrics}
-                            timeFrame={queriesTimeFrame}
-                            autorefresh={shouldRefresh}
-                            height={260}
-                            chartOptions={queriesChartConfig.options}
-                            onChartDataStatusChange={handleChartDataStatusChange}
-                            isChartVisible={!areChartsHidden}
-                            noBorder={true}
-                            fullWidth={true}
-                            withTimeframeSelector={true}
-                            onTimeFrameChange={handleQueriesTimeFrameChange}
-                            timeFrameComponent="dropdown"
-                        />
-                    </div>
-
-                    <div className={b('chart-container')}>
-                        <MetricChart
-                            database={tenantName}
-                            title={latenciesChartConfig.title}
-                            metrics={latenciesChartConfig.metrics}
-                            timeFrame={latenciesTimeFrame}
-                            autorefresh={shouldRefresh}
-                            height={260}
-                            chartOptions={latenciesChartConfig.options}
-                            onChartDataStatusChange={handleChartDataStatusChange}
-                            isChartVisible={!areChartsHidden}
-                            noBorder={true}
-                            fullWidth={true}
-                            withTimeframeSelector={true}
-                            onTimeFrameChange={handleLatenciesTimeFrameChange}
-                            timeFrameComponent="dropdown"
-                        />
-                    </div>
-                </div>
-            )}
+            <QueriesActivityCharts tenantName={tenantName} expanded={expanded} />
         </div>
     );
 }

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+
+import {defaultDashboardConfig} from '../../containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig';
+import {cn} from '../../utils/cn';
+import {useAutoRefreshInterval} from '../../utils/hooks';
+import type {TimeFrame} from '../../utils/timeframes';
+import {MetricChart} from '../MetricChart/MetricChart';
+import type {ChartDataStatus} from '../MetricChart/types';
+
+const b = cn('queries-activity-bar');
+
+interface QueriesActivityChartsProps {
+    tenantName: string;
+    expanded: boolean;
+}
+
+export function QueriesActivityCharts({tenantName, expanded}: QueriesActivityChartsProps) {
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    const [queriesTimeFrame, setQueriesTimeFrame] = React.useState<TimeFrame>('1h');
+    const [latenciesTimeFrame, setLatenciesTimeFrame] = React.useState<TimeFrame>('1h');
+    const [areChartsHidden, setAreChartsHidden] = React.useState(true);
+
+    // Extract chart configurations from defaultDashboardConfig
+    const getChartByTarget = (target: string) => {
+        return defaultDashboardConfig.find((chart) =>
+            chart.metrics.some((metric) => metric.target === target),
+        );
+    };
+
+    const queriesChartConfig = getChartByTarget('queries.requests');
+    const latenciesChartConfig = getChartByTarget('queries.latencies.p99');
+
+    // Early return if required charts are not found
+    if (!queriesChartConfig || !latenciesChartConfig) {
+        console.warn('Required chart configurations not found in defaultDashboardConfig');
+        return null;
+    }
+
+    // Refetch data only if charts successfully loaded
+    const shouldRefresh = areChartsHidden ? 0 : autoRefreshInterval;
+
+    const handleChartDataStatusChange = React.useCallback((status: ChartDataStatus) => {
+        if (status === 'success') {
+            setAreChartsHidden(false);
+        }
+    }, []);
+
+    const handleQueriesTimeFrameChange = React.useCallback((newTimeFrame: TimeFrame) => {
+        setQueriesTimeFrame(newTimeFrame);
+    }, []);
+
+    const handleLatenciesTimeFrameChange = React.useCallback((newTimeFrame: TimeFrame) => {
+        setLatenciesTimeFrame(newTimeFrame);
+    }, []);
+
+    // WORKAROUND: Charts are rendered outside Disclosure component due to YAGR tooltip bug
+    // Issue: https://github.com/gravity-ui/yagr/issues/262
+
+    // Problem: YAGR tooltips don't work when charts are mounted inside collapsible containers
+    // that use CSS transforms or have complex nested DOM structures. The tooltip initialization
+    // fails when the chart is not immediately visible during mounting.
+
+    // TODO: Remove this workaround once the upstream issue is fixed
+    if (!expanded) {
+        return null;
+    }
+
+    return (
+        <div className={b('charts')} style={{display: areChartsHidden ? 'none' : undefined}}>
+            <div className={b('chart-container')}>
+                <MetricChart
+                    database={tenantName}
+                    title={queriesChartConfig.title}
+                    metrics={queriesChartConfig.metrics}
+                    timeFrame={queriesTimeFrame}
+                    autorefresh={shouldRefresh}
+                    height={260}
+                    chartOptions={queriesChartConfig.options}
+                    onChartDataStatusChange={handleChartDataStatusChange}
+                    isChartVisible={!areChartsHidden}
+                    noBorder={true}
+                    fullWidth={true}
+                    withTimeframeSelector={true}
+                    onTimeFrameChange={handleQueriesTimeFrameChange}
+                    timeFrameComponent="dropdown"
+                />
+            </div>
+
+            <div className={b('chart-container')}>
+                <MetricChart
+                    database={tenantName}
+                    title={latenciesChartConfig.title}
+                    metrics={latenciesChartConfig.metrics}
+                    timeFrame={latenciesTimeFrame}
+                    autorefresh={shouldRefresh}
+                    height={260}
+                    chartOptions={latenciesChartConfig.options}
+                    onChartDataStatusChange={handleChartDataStatusChange}
+                    isChartVisible={!areChartsHidden}
+                    noBorder={true}
+                    fullWidth={true}
+                    withTimeframeSelector={true}
+                    onTimeFrameChange={handleLatenciesTimeFrameChange}
+                    timeFrameComponent="dropdown"
+                />
+            </div>
+        </div>
+    );
+}