fix(TenantDashboard): hide if charts not enabled

src/components/Loader/Loader.tsx

@@ -7,11 +7,12 @@ const b = cn('ydb-loader');
 
 interface LoaderProps {
     size?: LoaderSize;
+    className?: string;
 }
 
-export const Loader = ({size = 'm'}: LoaderProps) => {
+export const Loader = ({size = 'm', className}: LoaderProps) => {
     return (
-        <div className={b()}>
+        <div className={b(null, className)}>
             <KitLoader size={size} />
         </div>
     );

src/components/MetricChart/MetricChart.tsx

@@ -6,13 +6,19 @@ import ChartKit, {settings} from '@gravity-ui/chartkit';
 import type {IResponseError} from '../../types/api/error';
 import type {TimeFrame} from '../../utils/timeframes';
 import {useAutofetcher} from '../../utils/hooks';
+
 import {COLORS} from '../../utils/versions';
 import {cn} from '../../utils/cn';
 
 import {Loader} from '../Loader';
 import {ResponseError} from '../Errors/ResponseError';
 
-import type {ChartOptions, MetricDescription, PreparedMetricsData} from './types';
+import type {
+    ChartOptions,
+    MetricDescription,
+    OnChartDataStatusChange,
+    PreparedMetricsData,
+} from './types';
 import {convertResponse} from './convertReponse';
 import {getDefaultDataFormatter} from './getDefaultDataFormatter';
 import {getChartData} from './getChartData';
@@ -102,6 +108,15 @@ interface DiagnosticsChartProps {
     width?: number;
 
     chartOptions?: ChartOptions;
+
+    onChartDataStatusChange?: OnChartDataStatusChange;
+
+    /**
+     * YAGR charts don't render correctly inside not visible elements\
+     * So if chart is used inside component with 'display:none', it will be empty, when visibility change\
+     * Pass isChartVisible prop to ensure proper chart render
+     */
+    isChartVisible?: boolean;
 }
 
 export const MetricChart = ({
@@ -112,6 +127,8 @@ export const MetricChart = ({
     width = 400,
     height = width / 1.5,
     chartOptions,
+    onChartDataStatusChange,
+    isChartVisible,
 }: DiagnosticsChartProps) => {
     const mounted = useRef(false);
 
@@ -127,6 +144,20 @@ export const MetricChart = ({
         initialChartState,
     );
 
+    useEffect(() => {
+        if (error) {
+            return onChartDataStatusChange?.('error');
+        }
+        if (loading && !wasLoaded) {
+            return onChartDataStatusChange?.('loading');
+        }
+        if (!loading && wasLoaded) {
+            return onChartDataStatusChange?.('success');
+        }
+
+        return undefined;
+    }, [loading, wasLoaded, error, onChartDataStatusChange]);
+
     const fetchChartData = useCallback(
         async (isBackground: boolean) => {
             dispatch(setChartDataLoading());
@@ -146,7 +177,9 @@ export const MetricChart = ({
                 });
 
                 // Hack to prevent setting value to state, if component unmounted
-                if (!mounted.current) return;
+                if (!mounted.current) {
+                    return;
+                }
 
                 // In some cases error could be in response with 200 status code
                 // It happens when request is OK, but chart data cannot be returned due to some reason
@@ -155,10 +188,14 @@ export const MetricChart = ({
                     const preparedData = convertResponse(response, metrics);
                     dispatch(setChartData(preparedData));
                 } else {
-                    dispatch(setChartError({statusText: response.error}));
+                    const err = {statusText: response.error};
+
+                    throw err;
                 }
             } catch (err) {
-                if (!mounted.current) return;
+                if (!mounted.current) {
+                    return;
+                }
 
                 dispatch(setChartError(err as IResponseError));
             }
@@ -175,6 +212,10 @@ export const MetricChart = ({
             return <Loader />;
         }
 
+        if (!isChartVisible) {
+            return null;
+        }
+
         return (
             <div className={b('chart')}>
                 <ChartKit type="yagr" data={convertedData} />

src/components/MetricChart/index.ts

@@ -1,2 +1,2 @@
-export type {MetricDescription, Metric, ChartOptions} from './types';
+export * from './types';
 export {MetricChart} from './MetricChart';

src/components/MetricChart/types.ts

@@ -30,3 +30,6 @@ export type ChartDataType = 'ms' | 'size';
 export interface ChartOptions {
     dataType?: ChartDataType;
 }
+
+export type ChartDataStatus = 'loading' | 'success' | 'error';
+export type OnChartDataStatusChange = (newStatus: ChartDataStatus) => void;

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

@@ -0,0 +1,6 @@
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {defaultDashboardConfig} from './defaultDashboardConfig';
+
+export const DefaultOverviewContent = () => {
+    return <TenantDashboard charts={defaultDashboardConfig} />;
+};

src/containers/Tenant/Diagnostics/TenantOverview/DefaultDashboard.tsx → src/containers/Tenant/Diagnostics/TenantOverview/DefaultOverviewContent/defaultDashboardConfig.ts

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from './TenantDashboard/TenantDashboard';
-import i18n from './i18n';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
+import i18n from '../i18n';
 
-const defaultDashboardConfig: ChartConfig[] = [
+export const defaultDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.queries-per-second'),
         metrics: [
@@ -44,7 +44,3 @@ const defaultDashboardConfig: ChartConfig[] = [
         },
     },
 ];
-
-export const DefaultDashboard = () => {
-    return <TenantDashboard charts={defaultDashboardConfig} />;
-};

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

@@ -1,5 +1,6 @@
 import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
-import {CpuDashboard} from './CpuDashboard';
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {cpuDashboardConfig} from './cpuDashboardConfig';
 import {TopNodesByLoad} from './TopNodesByLoad';
 import {TopNodesByCpu} from './TopNodesByCpu';
 import {TopShards} from './TopShards';
@@ -13,7 +14,7 @@ interface TenantCpuProps {
 export function TenantCpu({path, additionalNodesProps}: TenantCpuProps) {
     return (
         <>
-            <CpuDashboard />
+            <TenantDashboard charts={cpuDashboardConfig} />
             <TopNodesByLoad path={path} additionalNodesProps={additionalNodesProps} />
             <TopNodesByCpu path={path} additionalNodesProps={additionalNodesProps} />
             <TopShards path={path} />

src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/CpuDashboard.tsx → src/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.ts

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
-const cpuDashboardConfig: ChartConfig[] = [
+export const cpuDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.cpu-usage'),
         metrics: [
@@ -12,7 +12,3 @@ const cpuDashboardConfig: ChartConfig[] = [
         ],
     },
 ];
-
-export const CpuDashboard = () => {
-    return <TenantDashboard charts={cpuDashboardConfig} />;
-};

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

@@ -1,14 +1,15 @@
+import {useState} from 'react';
 import {StringParam, useQueryParam} from 'use-query-params';
 
 import {cn} from '../../../../../utils/cn';
 import type {TimeFrame} from '../../../../../utils/timeframes';
-import {useSetting, useTypedSelector} from '../../../../../utils/hooks';
-import {DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY} from '../../../../../utils/constants';
+import {useTypedSelector} from '../../../../../utils/hooks';
 import {TimeFrameSelector} from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
 import {
     type ChartOptions,
     MetricChart,
     type MetricDescription,
+    type ChartDataStatus,
 } from '../../../../../components/MetricChart';
 
 import './TenantDashboard.scss';
@@ -29,39 +30,56 @@ interface TenantDashboardProps {
 }
 
 export const TenantDashboard = ({charts}: TenantDashboardProps) => {
+    const [isDashboardHidden, setIsDashboardHidden] = useState<boolean>(true);
+
     const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
 
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
-    const [chartsEnabled] = useSetting(DISPLAY_CHARTS_IN_DB_DIAGNOSTICS_KEY);
+    // Refetch data only if dashboard successfully loaded
+    const shouldRefresh = autorefresh && !isDashboardHidden;
 
-    if (!chartsEnabled) {
-        return null;
-    }
+    /**
+     * Charts should be hidden, if they are not enabled:
+     * 1. GraphShard is not enabled
+     * 2. ydb version does not have /viewer/json/render endpoint (400, 404, CORS error, etc.)
+     *
+     * If at least one chart successfully loaded, dashboard should be shown
+     * @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) => {
+        if (chartStatus === 'success') {
+            setIsDashboardHidden(false);
+        }
+    };
 
     // If there is only one chart, display it with full width
     const chartWidth = charts.length === 1 ? CHART_WIDTH_FULL : CHART_WIDTH;
     const chartHeight = CHART_WIDTH / 1.5;
 
     const renderContent = () => {
         return charts.map((chartConfig) => {
+            const chartId = chartConfig.metrics.map(({target}) => target).join('&');
             return (
                 <MetricChart
-                    key={chartConfig.metrics.map(({target}) => target).join('&')}
+                    key={chartId}
                     title={chartConfig.title}
                     metrics={chartConfig.metrics}
                     timeFrame={timeFrame as TimeFrame}
                     chartOptions={chartConfig.options}
-                    autorefresh={autorefresh}
+                    autorefresh={shouldRefresh}
                     width={chartWidth}
                     height={chartHeight}
+                    onChartDataStatusChange={handleChartDataStatusChange}
+                    isChartVisible={!isDashboardHidden}
                 />
             );
         });
     };
 
     return (
-        <div className={b(null)}>
+        <div className={b(null)} style={{display: isDashboardHidden ? 'none' : undefined}}>
             <div className={b('controls')}>
                 <TimeFrameSelector value={timeFrame as TimeFrame} onChange={setTimeframe} />
             </div>

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

@@ -1,4 +1,5 @@
-import {MemoryDashboard} from './MemoryDashboard';
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import {memoryDashboardConfig} from './memoryDashboardConfig';
 import {TopNodesByMemory} from './TopNodesByMemory';
 
 interface TenantMemoryProps {
@@ -8,7 +9,7 @@ interface TenantMemoryProps {
 export function TenantMemory({path}: TenantMemoryProps) {
     return (
         <>
-            <MemoryDashboard />
+            <TenantDashboard charts={memoryDashboardConfig} />
             <TopNodesByMemory path={path} />
         </>
     );

src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/MemoryDashboard.tsx → src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/memoryDashboardConfig.ts

@@ -1,7 +1,7 @@
-import {type ChartConfig, TenantDashboard} from '../TenantDashboard/TenantDashboard';
+import type {ChartConfig} from '../TenantDashboard/TenantDashboard';
 import i18n from '../i18n';
 
-const memoryDashboardConfig: ChartConfig[] = [
+export const memoryDashboardConfig: ChartConfig[] = [
     {
         title: i18n('charts.memory-usage'),
         metrics: [
@@ -15,7 +15,3 @@ const memoryDashboardConfig: ChartConfig[] = [
         },
     },
 ];
-
-export const MemoryDashboard = () => {
-    return <TenantDashboard charts={memoryDashboardConfig} />;
-};

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

@@ -1,4 +1,3 @@
-import cn from 'bem-cn-lite';
 import {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 
@@ -17,12 +16,11 @@ import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
 import {TenantStorage} from './TenantStorage/TenantStorage';
 import {TenantMemory} from './TenantMemory/TenantMemory';
-import {DefaultDashboard} from './DefaultDashboard';
+import {DefaultOverviewContent} from './DefaultOverviewContent/DefaultOverviewContent';
 import {useHealthcheck} from './useHealthcheck';
 
 import './TenantOverview.scss';
-
-const b = cn('tenant-overview');
+import {b} from './utils';
 
 interface TenantOverviewProps {
     tenantName: string;
@@ -141,7 +139,7 @@ export function TenantOverview({
                 );
             }
             default: {
-                return <DefaultDashboard />;
+                return <DefaultOverviewContent />;
             }
         }
     };

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

@@ -1,5 +1,4 @@
 import type {ReactNode} from 'react';
-import cn from 'bem-cn-lite';
 
 import DataTable from '@gravity-ui/react-data-table';
 import type {DataTableProps} from '@gravity-ui/react-data-table';
@@ -11,8 +10,7 @@ import {
 import type {IResponseError} from '../../../../types/api/error';
 import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
-
-const b = cn('tenant-overview');
+import {b} from './utils';
 
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
     title: ReactNode;

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

@@ -1,17 +1,16 @@
-import cn from 'bem-cn-lite';
-
 import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
 import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
 import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
 import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
 
+import {TenantDashboard} from '../TenantDashboard/TenantDashboard';
+
 import '../TenantOverview.scss';
 
-import {StorageDashboard} from './StorageDashboard';
+import {storageDashboardConfig} from './storageDashboardConfig';
 import {TopTables} from './TopTables';
 import {TopGroups} from './TopGroups';
-
-const b = cn('tenant-overview');
+import {b} from '../utils';
 
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
@@ -61,9 +60,10 @@ export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
             ),
         },
     ];
+
     return (
         <>
-            <StorageDashboard />
+            <TenantDashboard charts={storageDashboardConfig} />
             <InfoViewer className={b('storage-info')} title="Storage details" info={info} />
             <TopTables path={tenantName} />
             <TopGroups tenant={tenantName} />