fix: better code

Author: astandrik

src/components/MetricChart/MetricChart.tsx

@@ -107,18 +107,18 @@ const emptyChartData: PreparedMetricsData = {timeline: [], metrics: []};
 
 interface DiagnosticsChartProps {
     database: string;
-
     metrics: MetricDescription[];
-    timeFrame: TimeFrame;
-    onTimeFrameChange: (timeFrame: TimeFrame) => void;
 
-    autorefresh?: number;
+    /** Default timeframe for uncontrolled usage */
+    defaultTimeFrame?: TimeFrame;
 
+    /** Callback for timeframe changes - required when using controlled mode */
+    onTimeFrameChange?: (timeFrame: TimeFrame) => void;
+
+    autorefresh?: number;
     height?: number;
     width?: number;
-
     chartOptions?: ChartOptions;
-
     onChartDataStatusChange?: OnChartDataStatusChange;
 
     /**
@@ -135,8 +135,7 @@ interface DiagnosticsChartProps {
 export const MetricChart = ({
     database,
     metrics,
-    timeFrame,
-    onTimeFrameChange,
+    defaultTimeFrame = '1h',
     autorefresh,
     width = 400,
     height = width / 1.5,
@@ -145,6 +144,8 @@ export const MetricChart = ({
     isChartVisible,
     title,
 }: DiagnosticsChartProps) => {
+    const [timeFrame, setTimeFrame] = React.useState<TimeFrame>(defaultTimeFrame);
+
     // Use a reasonable default for maxDataPoints when fullWidth is true
     const maxDataPoints = DEFAULT_EFFECTIVE_WIDTH / 2;
 
@@ -172,7 +173,7 @@ export const MetricChart = ({
     const renderToolbar = () => (
         <Flex className={b('toolbar')} justifyContent="space-between" alignItems="center">
             <div>{title}</div>
-            <TimeFrameDropdown value={timeFrame} onChange={onTimeFrameChange} />
+            <TimeFrameDropdown value={timeFrame} onChange={setTimeFrame} />
         </Flex>
     );
 

src/components/QueriesActivityBar/QueriesActivityCharts.tsx

@@ -3,7 +3,6 @@ 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';
 
@@ -23,8 +22,6 @@ export function QueriesActivityCharts({
     onChartDataStatusChange,
 }: QueriesActivityChartsProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
-    const [queriesTimeFrame, setQueriesTimeFrame] = React.useState<TimeFrame>('1h');
-    const [latenciesTimeFrame, setLatenciesTimeFrame] = React.useState<TimeFrame>('1h');
     const [hasChartsLoaded, setHasChartsLoaded] = React.useState(false);
 
     // Extract chart configurations from defaultDashboardConfig
@@ -57,14 +54,6 @@ export function QueriesActivityCharts({
         [onChartDataStatusChange],
     );
 
-    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
 
@@ -80,8 +69,6 @@ export function QueriesActivityCharts({
                 <MetricChart
                     database={tenantName}
                     metrics={queriesChartConfig.metrics}
-                    timeFrame={queriesTimeFrame}
-                    onTimeFrameChange={handleQueriesTimeFrameChange}
                     autorefresh={shouldRefresh}
                     height={ACTIVITY_CHART_HEIGHT}
                     chartOptions={queriesChartConfig.options}
@@ -95,8 +82,6 @@ export function QueriesActivityCharts({
                 <MetricChart
                     database={tenantName}
                     metrics={latenciesChartConfig.metrics}
-                    timeFrame={latenciesTimeFrame}
-                    onTimeFrameChange={handleLatenciesTimeFrameChange}
                     autorefresh={shouldRefresh}
                     height={ACTIVITY_CHART_HEIGHT}
                     chartOptions={latenciesChartConfig.options}

src/containers/Tenant/Diagnostics/TenantOverview/TabCard/index.ts

@@ -8,7 +8,6 @@ import type {
 } from '../../../../../components/MetricChart';
 import {cn} from '../../../../../utils/cn';
 import {useAutoRefreshInterval} from '../../../../../utils/hooks';
-import type {TimeFrame} from '../../../../../utils/timeframes';
 
 import './TenantDashboard.scss';
 
@@ -30,17 +29,6 @@ interface TenantDashboardProps {
 
 export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
     const [isDashboardHidden, setIsDashboardHidden] = React.useState<boolean>(true);
-
-    // Each chart has its own timeframe state
-    const [chartTimeFrames, setChartTimeFrames] = React.useState<Record<string, TimeFrame>>(() => {
-        const initialTimeFrames: Record<string, TimeFrame> = {};
-        charts.forEach((chartConfig) => {
-            const chartId = chartConfig.metrics.map(({target}) => target).join('&');
-            initialTimeFrames[chartId] = '1h';
-        });
-        return initialTimeFrames;
-    });
-
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     // Refetch data only if dashboard successfully loaded
@@ -65,35 +53,21 @@ export const TenantDashboard = ({database, charts}: TenantDashboardProps) => {
     const chartWidth = charts.length === 1 ? CHART_WIDTH_FULL : CHART_WIDTH;
     const chartHeight = CHART_WIDTH / 1.5;
 
-    const handleTimeFrameChange = React.useCallback((chartId: string, newTimeFrame: TimeFrame) => {
-        setChartTimeFrames((prev) => ({
-            ...prev,
-            [chartId]: newTimeFrame,
-        }));
-    }, []);
-
     const renderContent = () => {
-        return charts.map((chartConfig) => {
-            const chartId = chartConfig.metrics.map(({target}) => target).join('&');
-            return (
-                <MetricChart
-                    key={chartId}
-                    database={database}
-                    metrics={chartConfig.metrics}
-                    timeFrame={chartTimeFrames[chartId] || '1h'}
-                    onTimeFrameChange={(newTimeFrame) =>
-                        handleTimeFrameChange(chartId, newTimeFrame)
-                    }
-                    chartOptions={chartConfig.options}
-                    autorefresh={shouldRefresh}
-                    width={chartWidth}
-                    height={chartHeight}
-                    onChartDataStatusChange={handleChartDataStatusChange}
-                    isChartVisible={!isDashboardHidden}
-                    title={chartConfig.title}
-                />
-            );
-        });
+        return charts.map((chartConfig, index) => (
+            <MetricChart
+                key={index}
+                database={database}
+                metrics={chartConfig.metrics}
+                chartOptions={chartConfig.options}
+                autorefresh={shouldRefresh}
+                width={chartWidth}
+                height={chartHeight}
+                onChartDataStatusChange={handleChartDataStatusChange}
+                isChartVisible={!isDashboardHidden}
+                title={chartConfig.title}
+            />
+        ));
     };
 
     return (