ydb-embedded-ui 5.4.0 → 6.0.0

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByCpu.js

@@ -1,31 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAutofetcher, useSearchQuery, useTypedDispatch, useTypedSelector, } from '../../../../../utils/hooks';
-import { getTopNodesByCpu, selectTopNodesByCpu, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topNodesByCpu/topNodesByCpu';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
+import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
 import { getTopNodesByCpuColumns } from '../../../../Nodes/getNodesColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 export function TopNodesByCpu({ path, additionalNodesProps }) {
-    const dispatch = useTypedDispatch();
     const query = useSearchQuery();
-    const { wasLoaded, loading, error } = useTypedSelector((state) => state.topNodesByCpu);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const topNodes = useTypedSelector(selectTopNodesByCpu);
     const columns = getTopNodesByCpuColumns(additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef);
-    const fetchNodes = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getTopNodesByCpu({ tenant: path }));
-    }, [dispatch, path]);
-    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+    const { currentData, isFetching, error } = topNodesApi.useGetTopNodesQuery({ tenant: path, sortValue: 'CPU' }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const topNodes = currentData;
     const title = getSectionTitle({
         entity: i18n('nodes'),
         postfix: i18n('by-pools-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps } from '../../../../../types/additionalProps';
 interface TopNodesByLoadProps {
     path: string;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare function TopNodesByLoad({ path, additionalNodesProps }: TopNodesByLoadProps): JSX.Element;
+export declare function TopNodesByLoad({ path, additionalNodesProps }: TopNodesByLoadProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopNodesByLoad.js

@@ -1,31 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAutofetcher, useSearchQuery, useTypedDispatch, useTypedSelector, } from '../../../../../utils/hooks';
-import { getTopNodesByLoad, selectTopNodesByLoad, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topNodesByLoad/topNodesByLoad';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
+import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
 import { getTopNodesByLoadColumns } from '../../../../Nodes/getNodesColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 export function TopNodesByLoad({ path, additionalNodesProps }) {
-    const dispatch = useTypedDispatch();
     const query = useSearchQuery();
-    const { wasLoaded, loading, error } = useTypedSelector((state) => state.topNodesByLoad);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const topNodes = useTypedSelector(selectTopNodesByLoad);
     const columns = getTopNodesByLoadColumns(additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef);
-    const fetchNodes = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getTopNodesByLoad({ tenant: path }));
-    }, [dispatch, path]);
-    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+    const { currentData, isFetching, error } = topNodesApi.useGetTopNodesQuery({ tenant: path, sortValue: 'LoadAverage' }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const topNodes = currentData;
     const title = getSectionTitle({
         entity: i18n('nodes'),
         postfix: i18n('by-load'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface TopQueriesProps {
     path: string;
 }
-export declare function TopQueries({ path }: TopQueriesProps): JSX.Element;
+export declare function TopQueries({ path }: TopQueriesProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopQueries.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { useHistory, useLocation } from 'react-router';
-import { useCallback } from 'react';
-import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../../store/reducers/tenant/constants';
-import { fetchTenantOverviewTopQueries, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
-import { changeUserInput } from '../../../../../store/reducers/executeQuery';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../../../../utils/hooks';
 import { parseQuery } from '../../../../../routes';
+import { changeUserInput } from '../../../../../store/reducers/executeQuery';
+import { TENANT_DIAGNOSTICS_TABS_IDS, TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID, } from '../../../../../store/reducers/tenant/constants';
+import { topQueriesApi } from '../../../../../store/reducers/tenantOverview/topQueries/tenantOverviewTopQueries';
+import { useTypedDispatch, useTypedSelector } from '../../../../../utils/hooks';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { getTenantOverviewTopQueriesColumns } from '../../TopQueries/getTopQueriesColumns';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
@@ -17,15 +17,11 @@ export function TopQueries({ path }) {
     const history = useHistory();
     const query = parseQuery(location);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error, data: { result: data = undefined } = {}, } = useTypedSelector((state) => state.tenantOverviewTopQueries);
     const columns = getTenantOverviewTopQueriesColumns();
-    useAutofetcher((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(fetchTenantOverviewTopQueries(path));
-    }, [dispatch, path], autorefresh);
-    const handleRowClick = useCallback((row) => {
+    const { currentData, isFetching, error } = topQueriesApi.useGetOverviewTopQueriesQuery({ database: path }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
+    const handleRowClick = React.useCallback((row) => {
         const { QueryText: input } = row;
         dispatch(changeUserInput({ input }));
         const queryParams = parseQuery(location);
@@ -37,5 +33,5 @@ export function TopQueries({ path }) {
         postfix: i18n('by-cpu-time'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topQueries })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, wasLoaded: wasLoaded, error: error, tableClassNameModifiers: { 'top-queries': true } }));
+    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, onRowClick: handleRowClick, title: title, loading: loading, error: error, tableClassNameModifiers: { 'top-queries': true } }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.d.ts

@@ -1,5 +1,5 @@
 interface TopShardsProps {
     path: string;
 }
-export declare const TopShards: ({ path }: TopShardsProps) => JSX.Element;
+export declare const TopShards: ({ path }: TopShardsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/TopShards.js

@@ -1,31 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLocation } from 'react-router';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../../../../utils/hooks';
 import { parseQuery } from '../../../../../routes';
-import { sendTenantOverviewTopShardsQuery, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
-import { getTopShardsColumns } from '../../TopShards/getTopShardsColumns';
+import { topShardsApi } from '../../../../../store/reducers/tenantOverview/topShards/tenantOverviewTopShards';
+import { useTypedSelector } from '../../../../../utils/hooks';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
+import { getTopShardsColumns } from '../../TopShards/getTopShardsColumns';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 export const TopShards = ({ path }) => {
-    const dispatch = useTypedDispatch();
     const location = useLocation();
     const query = parseQuery(location);
     const { autorefresh, currentSchemaPath } = useTypedSelector((state) => state.schema);
-    const { loading, data: { result: data = undefined } = {}, error, wasLoaded, } = useTypedSelector((state) => state.tenantOverviewTopShards);
-    useAutofetcher((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(sendTenantOverviewTopShardsQuery(path, currentSchemaPath));
-    }, [dispatch, path, currentSchemaPath], autorefresh);
+    const { currentData, isFetching, error } = topShardsApi.useGetTopShardsQuery({ database: path, path: currentSchemaPath }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const { result: data } = currentData || {};
     const columns = getTopShardsColumns(path, location);
     const title = getSectionTitle({
         entity: i18n('shards'),
         postfix: i18n('by-cpu-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.topShards })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error, tableClassNameModifiers: { 'top-queries': true } }));
+    return (_jsx(TenantOverviewTableLayout, { data: data || [], columns: columns, title: title, loading: loading, error: error, tableClassNameModifiers: { 'top-queries': true } }));
 };

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantCpu/cpuDashboardConfig.js

@@ -12,6 +12,10 @@ export const cpuDashboardConfig = [
         metrics: pools.map(getPoolMetricConfig),
         options: {
             dataType: 'percent',
+            scaleRange: {
+                min: 0,
+                max: 1,
+            },
         },
     },
 ];

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.d.ts

@@ -1,4 +1,4 @@
-import { type ChartOptions, type MetricDescription } from '../../../../../components/MetricChart';
+import type { ChartOptions, MetricDescription } from '../../../../../components/MetricChart';
 import './TenantDashboard.scss';
 export interface ChartConfig {
     metrics: MetricDescription[];
@@ -9,5 +9,5 @@ interface TenantDashboardProps {
     database: string;
     charts: ChartConfig[];
 }
-export declare const TenantDashboard: ({ database, charts }: TenantDashboardProps) => JSX.Element;
+export declare const TenantDashboard: ({ database, charts }: TenantDashboardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantDashboard/TenantDashboard.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import React from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
+import { MetricChart } from '../../../../../components/MetricChart';
+import { TimeFrameSelector } from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
 import { cn } from '../../../../../utils/cn';
 import { useTypedSelector } from '../../../../../utils/hooks';
-import { TimeFrameSelector } from '../../../../../components/TimeFrameSelector/TimeFrameSelector';
-import { MetricChart, } from '../../../../../components/MetricChart';
 import './TenantDashboard.scss';
 const CHART_WIDTH = 428;
 const CHART_WIDTH_FULL = 872;
 const b = cn('ydb-tenant-dashboard');
 export const TenantDashboard = ({ database, charts }) => {
-    const [isDashboardHidden, setIsDashboardHidden] = useState(true);
+    const [isDashboardHidden, setIsDashboardHidden] = React.useState(true);
     const [timeFrame = '1h', setTimeframe] = useQueryParam('timeframe', StringParam);
     const { autorefresh } = useTypedSelector((state) => state.schema);
     // Refetch data only if dashboard successfully loaded
-    const shouldRefresh = autorefresh && !isDashboardHidden;
+    const shouldRefresh = isDashboardHidden ? 0 : autorefresh;
     /**
      * Charts should be hidden, if they are not enabled:
      * 1. GraphShard is not enabled
@@ -38,5 +38,5 @@ export const TenantDashboard = ({ database, charts }) => {
             return (_jsx(MetricChart, { database: database, title: chartConfig.title, metrics: chartConfig.metrics, timeFrame: timeFrame, chartOptions: chartConfig.options, autorefresh: shouldRefresh, width: chartWidth, height: chartHeight, onChartDataStatusChange: handleChartDataStatusChange, isChartVisible: !isDashboardHidden }, chartId));
         });
     };
-    return (_jsxs("div", Object.assign({ className: b(null), style: { display: isDashboardHidden ? 'none' : undefined } }, { children: [_jsx("div", Object.assign({ className: b('controls') }, { children: _jsx(TimeFrameSelector, { value: timeFrame, onChange: setTimeframe }) })), _jsx("div", Object.assign({ className: b('charts') }, { children: renderContent() }))] })));
+    return (_jsxs("div", { className: b(null), style: { display: isDashboardHidden ? 'none' : undefined }, children: [_jsx("div", { className: b('controls'), children: _jsx(TimeFrameSelector, { value: timeFrame, onChange: setTimeframe }) }), _jsx("div", { className: b('charts'), children: renderContent() })] }));
 };

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface TenantMemoryProps {
     path: string;
 }
-export declare function TenantMemory({ path }: TenantMemoryProps): JSX.Element;
+export declare function TenantMemory({ path }: TenantMemoryProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
-import { memoryDashboardConfig } from './memoryDashboardConfig';
 import { TopNodesByMemory } from './TopNodesByMemory';
+import { memoryDashboardConfig } from './memoryDashboardConfig';
 export function TenantMemory({ path }) {
-    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { database: path, charts: memoryDashboardConfig }), _jsx(TopNodesByMemory, { path: path })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(TenantDashboard, { database: path, charts: memoryDashboardConfig }), _jsx(TopNodesByMemory, { path: path })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps } from '../../../../../types/additionalProps';
 interface TopNodesByMemoryProps {
     path: string;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare function TopNodesByMemory({ path, additionalNodesProps }: TopNodesByMemoryProps): JSX.Element;
+export declare function TopNodesByMemory({ path, additionalNodesProps }: TopNodesByMemoryProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.js

@@ -1,33 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAutofetcher, useTypedSelector, useSearchQuery, useTypedDispatch, } from '../../../../../utils/hooks';
-import { getTopNodesByMemory, selectTopNodesByMemory, setDataWasNotLoaded, } from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topNodesApi } from '../../../../../store/reducers/tenantOverview/topNodes/topNodes';
+import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
 import { getTopNodesByMemoryColumns } from '../../../../Nodes/getNodesColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 export function TopNodesByMemory({ path, additionalNodesProps }) {
-    const dispatch = useTypedDispatch();
     const query = useSearchQuery();
-    const { wasLoaded, loading, error } = useTypedSelector((state) => state.topNodesByMemory);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const topNodes = useTypedSelector(selectTopNodesByMemory);
     const columns = getTopNodesByMemoryColumns({
         getNodeRef: additionalNodesProps === null || additionalNodesProps === void 0 ? void 0 : additionalNodesProps.getNodeRef,
     });
-    const fetchNodes = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getTopNodesByMemory({ tenant: path }));
-    }, [dispatch, path]);
-    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+    const { currentData, isFetching, error } = topNodesApi.useGetTopNodesQuery({ tenant: path, sortValue: 'Memory' }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const topNodes = currentData;
     const title = getSectionTitle({
         entity: i18n('nodes'),
         postfix: i18n('by-memory'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.nodes })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
+    return (_jsx(TenantOverviewTableLayout, { data: topNodes || [], columns: columns, title: title, loading: loading, error: error, emptyDataMessage: i18n('top-nodes.empty-data') }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { AdditionalNodesProps, AdditionalTenantsProps } from '../../../../types/additionalProps';
 import './TenantOverview.scss';
 interface TenantOverviewProps {
@@ -6,5 +5,5 @@ interface TenantOverviewProps {
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }
-export declare function TenantOverview({ tenantName, additionalTenantProps, additionalNodesProps, }: TenantOverviewProps): JSX.Element;
+export declare function TenantOverview({ tenantName, additionalTenantProps, additionalNodesProps, }: TenantOverviewProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -1,56 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
 import { Loader } from '@gravity-ui/uikit';
 import { EntityStatus } from '../../../../components/EntityStatus/EntityStatus';
-import { TENANT_DEFAULT_TITLE } from '../../../../utils/constants';
 import { TENANT_METRICS_TABS_IDS } from '../../../../store/reducers/tenant/constants';
-import { mapDatabaseTypeToDBName } from '../../utils/schema';
-import { useAutofetcher, useTypedSelector, useTypedDispatch } from '../../../../utils/hooks';
-import { getTenantInfo, setDataWasNotLoaded } from '../../../../store/reducers/tenant/tenant';
+import { tenantApi } from '../../../../store/reducers/tenant/tenant';
 import { calculateTenantMetrics } from '../../../../store/reducers/tenants/utils';
-import { TenantCpu } from './TenantCpu/TenantCpu';
+import { TENANT_DEFAULT_TITLE } from '../../../../utils/constants';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { mapDatabaseTypeToDBName } from '../../utils/schema';
+import { DefaultOverviewContent } from './DefaultOverviewContent/DefaultOverviewContent';
 import { HealthcheckDetails } from './Healthcheck/HealthcheckDetails';
 import { MetricsCards } from './MetricsCards/MetricsCards';
-import { TenantStorage } from './TenantStorage/TenantStorage';
+import { TenantCpu } from './TenantCpu/TenantCpu';
 import { TenantMemory } from './TenantMemory/TenantMemory';
-import { DefaultOverviewContent } from './DefaultOverviewContent/DefaultOverviewContent';
+import { TenantStorage } from './TenantStorage/TenantStorage';
 import { useHealthcheck } from './useHealthcheck';
-import './TenantOverview.scss';
 import { b } from './utils';
+import './TenantOverview.scss';
 export function TenantOverview({ tenantName, additionalTenantProps, additionalNodesProps, }) {
     var _a;
-    const dispatch = useTypedDispatch();
-    const { tenant, loading: tenantLoading, wasLoaded: tenantWasLoaded, metricsTab, } = useTypedSelector((state) => state.tenant);
+    const { metricsTab } = useTypedSelector((state) => state.tenant);
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { issueTrees, issuesStatistics, selfCheckResult, fetchHealthcheck, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError, } = useHealthcheck(tenantName);
-    const fetchTenant = useCallback((isBackground = true) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getTenantInfo({ path: tenantName }));
-    }, [dispatch, tenantName]);
-    useAutofetcher((isBackground) => {
-        fetchTenant(isBackground);
-        fetchHealthcheck(isBackground);
-    }, [fetchTenant, fetchHealthcheck], autorefresh);
+    const { issueTrees, issuesStatistics, selfCheckResult, loading: healthcheckLoading, error: healthcheckError, refetch: fetchHealthcheck, } = useHealthcheck(tenantName, { autorefresh });
+    const { currentData: tenant, isFetching } = tenantApi.useGetTenantInfoQuery({ path: tenantName }, {
+        pollingInterval: autorefresh,
+    });
+    const tenantLoading = isFetching && tenant === undefined;
     const { Name, Type, Overall } = tenant || {};
     const tenantType = mapDatabaseTypeToDBName(Type);
-    const { cpu, blobStorage, tabletStorage, memory, cpuUsage, blobStorageLimit, tabletStorageLimit, memoryLimit, } = calculateTenantMetrics(tenant);
-    // If there is table storage limit (data_size_hard_quota),
-    // use it for metric card instead of blob storage limit
-    // When datasize exceeds or equals to quota
-    // all write operations to the database are finished with error
-    const isTabletStorageLimitSet = tabletStorageLimit && tabletStorageLimit > 0;
-    const storageUsed = isTabletStorageLimitSet ? tabletStorage : blobStorage;
-    const storageLimit = isTabletStorageLimitSet ? tabletStorageLimit : blobStorageLimit;
-    const calculatedMetrics = {
-        memoryUsed: memory,
-        memoryLimit,
-        cpuUsed: cpu,
-        cpuUsage,
-        storageUsed,
-        storageLimit,
-    };
+    const { blobStorage, tabletStorage, blobStorageLimit, tabletStorageLimit, poolsStats, memoryStats, blobStorageStats, tabletStorageStats, } = calculateTenantMetrics(tenant !== null && tenant !== void 0 ? tenant : undefined);
     const storageMetrics = {
         blobStorageUsed: blobStorage,
         blobStorageLimit,
@@ -58,7 +35,7 @@ export function TenantOverview({ tenantName, additionalTenantProps, additionalNo
         tabletStorageLimit,
     };
     const renderName = () => {
-        return (_jsx("div", Object.assign({ className: b('tenant-name-wrapper') }, { children: _jsx(EntityStatus, { status: Overall, name: Name || TENANT_DEFAULT_TITLE, withLeftTrim: true, hasClipboardButton: Boolean(tenant), clipboardButtonAlwaysVisible: true }) })));
+        return (_jsx("div", { className: b('tenant-name-wrapper'), children: _jsx(EntityStatus, { status: Overall, name: Name || TENANT_DEFAULT_TITLE, withLeftTrim: true, hasClipboardButton: Boolean(tenant), clipboardButtonAlwaysVisible: true }) }));
     };
     const renderTabContent = () => {
         switch (metricsTab) {
@@ -72,15 +49,15 @@ export function TenantOverview({ tenantName, additionalTenantProps, additionalNo
                 return _jsx(TenantMemory, { path: tenantName });
             }
             case TENANT_METRICS_TABS_IDS.healthcheck: {
-                return (_jsx(HealthcheckDetails, { issueTrees: issueTrees, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError }));
+                return (_jsx(HealthcheckDetails, { issueTrees: issueTrees, loading: healthcheckLoading, error: healthcheckError }));
             }
             default: {
                 return _jsx(DefaultOverviewContent, { database: tenantName });
             }
         }
     };
-    if (tenantLoading && !tenantWasLoaded) {
-        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "m" }) })));
+    if (tenantLoading) {
+        return (_jsx("div", { className: b('loader'), children: _jsx(Loader, { size: "m" }) }));
     }
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsxs("div", Object.assign({ className: b('info') }, { children: [_jsx("div", Object.assign({ className: b('top-label') }, { children: tenantType })), _jsxs("div", Object.assign({ className: b('top') }, { children: [renderName(), (_a = additionalTenantProps === null || additionalTenantProps === void 0 ? void 0 : additionalTenantProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantProps, Name, Type)] })), _jsx(MetricsCards, { metrics: calculatedMetrics, issuesStatistics: issuesStatistics, selfCheckResult: selfCheckResult, fetchHealthcheck: fetchHealthcheck, healthcheckLoading: healthcheckLoading, healthCheckWasLoaded: healthCheckWasLoaded, healthcheckError: healthcheckError })] })), renderTabContent()] })));
+    return (_jsxs("div", { className: b(), children: [_jsxs("div", { className: b('info'), children: [_jsx("div", { className: b('top-label'), children: tenantType }), _jsxs("div", { className: b('top'), children: [renderName(), (_a = additionalTenantProps === null || additionalTenantProps === void 0 ? void 0 : additionalTenantProps.getMonitoringLink) === null || _a === void 0 ? void 0 : _a.call(additionalTenantProps, Name, Type)] }), _jsx(MetricsCards, { poolsCpuStats: poolsStats, memoryStats: memoryStats, blobStorageStats: blobStorageStats, tabletStorageStats: tabletStorageStats, issuesStatistics: issuesStatistics, selfCheckResult: selfCheckResult, fetchHealthcheck: fetchHealthcheck, healthcheckLoading: healthcheckLoading, healthcheckError: healthcheckError })] }), renderTabContent()] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss

@@ -19,19 +19,20 @@
     &__top {
         display: flex;
         align-items: center;
+        gap: 4px;
 
         margin-bottom: 10px;
 
         line-height: 24px;
-        gap: 4px;
     }
 
     &__top-label {
+        gap: 10px;
+
         margin-bottom: var(--diagnostics-section-title-margin);
 
         font-weight: 600;
         line-height: 24px;
-        gap: 10px;
     }
 
     &__info {

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.d.ts

@@ -1,14 +1,12 @@
-import type { ReactNode } from 'react';
+import React from 'react';
 import type { DataTableProps } from '@gravity-ui/react-data-table';
-import type { IResponseError } from '../../../../types/api/error';
 interface TenantOverviewTableLayoutProps<T> extends Omit<DataTableProps<T>, 'theme'> {
-    title: ReactNode;
+    title: React.ReactNode;
     loading?: boolean;
-    wasLoaded?: boolean;
-    error?: IResponseError;
+    error?: unknown;
     tableClassNameModifiers?: {
         [name: string]: string | boolean | undefined;
     };
 }
-export declare function TenantOverviewTableLayout<T>({ title, error, loading, wasLoaded, tableClassNameModifiers, ...props }: TenantOverviewTableLayoutProps<T>): JSX.Element;
+export declare function TenantOverviewTableLayout<T>({ title, error, loading, tableClassNameModifiers, ...props }: TenantOverviewTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverviewTableLayout.js

@@ -1,20 +1,21 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
-import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
-import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
+import { TableSkeleton } from '../../../../components/TableSkeleton/TableSkeleton';
+import { TENANT_OVERVIEW_TABLES_LIMIT, TENANT_OVERVIEW_TABLES_SETTINGS, } from '../../../../utils/constants';
 import { b } from './utils';
 export function TenantOverviewTableLayout(_a) {
-    var { title, error, loading, wasLoaded, tableClassNameModifiers = {} } = _a, props = __rest(_a, ["title", "error", "loading", "wasLoaded", "tableClassNameModifiers"]);
+    var { title, error, loading, tableClassNameModifiers = {} } = _a, props = __rest(_a, ["title", "error", "loading", "tableClassNameModifiers"]);
     const renderContent = () => {
         if (error) {
             return _jsx(ResponseError, { error: error });
         }
-        if (loading && !wasLoaded) {
+        if (loading) {
             return _jsx(TableSkeleton, { rows: TENANT_OVERVIEW_TABLES_LIMIT });
         }
         return (_jsx(DataTable, Object.assign({ theme: "yandex-cloud", settings: TENANT_OVERVIEW_TABLES_SETTINGS }, props)));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: b('title') }, { children: title })), _jsx("div", Object.assign({ className: b('table', tableClassNameModifiers) }, { children: renderContent() }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('title'), children: title }), _jsx("div", { className: b('table', tableClassNameModifiers), children: renderContent() })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import '../TenantOverview.scss';
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
@@ -10,5 +9,5 @@ interface TenantStorageProps {
     tenantName: string;
     metrics: TenantStorageMetrics;
 }
-export declare function TenantStorage({ tenantName, metrics }: TenantStorageProps): JSX.Element;
+export declare function TenantStorage({ tenantName, metrics }: TenantStorageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.js

@@ -1,15 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
-import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
 import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
+import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
 import { formatStorageValues } from '../../../../../utils/dataFormatters/dataFormatters';
 import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
-import '../TenantOverview.scss';
-import { storageDashboardConfig } from './storageDashboardConfig';
-import { TopTables } from './TopTables';
-import { TopGroups } from './TopGroups';
-import { b } from '../utils';
 import i18n from '../i18n';
+import { b } from '../utils';
+import { TopGroups } from './TopGroups';
+import { TopTables } from './TopTables';
+import { storageDashboardConfig } from './storageDashboardConfig';
+import '../TenantOverview.scss';
 export function TenantStorage({ tenantName, metrics }) {
     const { blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit } = metrics;
     const info = [
@@ -22,5 +23,5 @@ export function TenantStorage({ tenantName, metrics }) {
             value: (_jsx(ProgressViewer, { value: blobStorageUsed, capacity: blobStorageLimit, formatValues: formatStorageValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
         },
     ];
-    return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { database: tenantName, charts: storageDashboardConfig }), _jsx(InfoViewer, { className: b('storage-info'), title: "Storage details", info: info }), _jsx(TopTables, { path: tenantName }), _jsx(TopGroups, { tenant: tenantName })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(TenantDashboard, { database: tenantName, charts: storageDashboardConfig }), _jsx(InfoViewer, { className: b('storage-info'), title: "Storage details", info: info }), _jsx(TopTables, { path: tenantName }), _jsx(TopGroups, { tenant: tenantName })] }));
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 interface TopGroupsProps {
     tenant?: string;
 }
-export declare function TopGroups({ tenant }: TopGroupsProps): JSX.Element;
+export declare function TopGroups({ tenant }: TopGroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.js

@@ -1,31 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { useAutofetcher, useSearchQuery, useTypedDispatch, useTypedSelector, } from '../../../../../utils/hooks';
-import { setDataWasNotLoaded, getTopStorageGroups, selectTopStorageGroups, } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
 import { TENANT_DIAGNOSTICS_TABS_IDS } from '../../../../../store/reducers/tenant/constants';
+import { topStorageGroupsApi } from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import { useSearchQuery, useTypedSelector } from '../../../../../utils/hooks';
 import { getStorageTopGroupsColumns } from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
 import { TenantTabsGroups, getTenantPath } from '../../../TenantPages';
 import { TenantOverviewTableLayout } from '../TenantOverviewTableLayout';
 import { getSectionTitle } from '../getSectionTitle';
 import i18n from '../i18n';
 export function TopGroups({ tenant }) {
-    const dispatch = useTypedDispatch();
     const query = useSearchQuery();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error } = useTypedSelector((state) => state.topStorageGroups);
-    const topGroups = useTypedSelector(selectTopStorageGroups);
     const columns = getStorageTopGroupsColumns();
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        dispatch(getTopStorageGroups({ tenant }));
-    }, [dispatch, tenant]);
-    useAutofetcher(fetchData, [fetchData], autorefresh);
+    const { currentData, isFetching, error } = topStorageGroupsApi.useGetTopStorageGroupsQuery({ tenant }, { pollingInterval: autorefresh });
+    const loading = isFetching && currentData === undefined;
+    const topGroups = currentData;
     const title = getSectionTitle({
         entity: i18n('groups'),
         postfix: i18n('by-usage'),
         link: getTenantPath(Object.assign(Object.assign({}, query), { [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.storage })),
     });
-    return (_jsx(TenantOverviewTableLayout, { data: topGroups || [], columns: columns, title: title, loading: loading, wasLoaded: wasLoaded, error: error }));
+    return (_jsx(TenantOverviewTableLayout, { data: topGroups || [], columns: columns, title: title, loading: loading, error: error }));
 }