ydb-embedded-ui 5.0.0 → 5.1.0

package/dist/containers/Tablet/i18n/index.js

@@ -1,7 +1,5 @@
-import { i18n, Lang } from '../../../utils/i18n';
+import { registerKeysets } from '../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 const COMPONENT = 'ydb-tablet-page';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { en, ru });

package/dist/containers/TabletsFilters/TabletsFilters.d.ts

@@ -26,6 +26,7 @@ export class TabletsFilters extends React.Component<any, any, any> {
     state: {
         nodeFilter: never[];
         tenantPath: string;
+        clusterName: string;
     };
     reloadDescriptor: number;
     componentDidMount(): void;
@@ -38,6 +39,7 @@ export class TabletsFilters extends React.Component<any, any, any> {
     handleTypeFilterChange: (typeFilter: any) => void;
     renderTablet: (index: any, key: any) => JSX.Element;
     renderContent: () => JSX.Element;
+    renderView: () => JSX.Element;
     render(): JSX.Element;
 }
 declare var _default: import("react-redux").ConnectedComponent<typeof TabletsFilters, import("react-redux").Omit<PropTypes.InferProps<{

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -3,8 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import cn from 'bem-cn-lite';
-import qs from 'qs';
 import _ from 'lodash';
+import { Helmet } from 'react-helmet-async';
 import { Loader, Select } from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 import { Tablet } from '../../components/Tablet';
@@ -12,6 +12,9 @@ import { AccessDenied } from '../../components/Errors/403';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { tabletColorToTabletState, tabletStates } from '../../utils/tablet';
 import { getTabletsInfo, clearWasLoadingFlag, setStateFilter, setTypeFilter, getFilteredTablets, getTablets, } from '../../store/reducers/tabletsFilters';
+import { parseQuery } from '../../routes';
+import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import i18n from './i18n';
 import './TabletsFilters.scss';
 const b = cn('tablets-filters');
 export class TabletsFilters extends React.Component {
@@ -20,6 +23,7 @@ export class TabletsFilters extends React.Component {
         this.state = {
             nodeFilter: [],
             tenantPath: '',
+            clusterName: '',
         };
         this.reloadDescriptor = -1;
         this.makeRequest = () => {
@@ -67,16 +71,29 @@ export class TabletsFilters extends React.Component {
             }));
             return (_jsxs("div", Object.assign({ className: b() }, { children: [tenantPath ? (_jsx("div", Object.assign({ className: b('tenant') }, { children: _jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: b('label') }, { children: "Database: " })), " ", tenantPath] }) }))) : null, _jsx(MemoizedFilters, { nodesForSelect: nodesForSelect, nodeFilter: nodeFilter, onChangeNodes: this.handleNodeFilterChange, states: states, stateFilter: stateFilter, onChangeStates: this.handleStateFilterChange, types: types, typeFilter: typeFilter, onChangeTypes: this.handleTypeFilterChange }), error && _jsx("div", Object.assign({ className: "error" }, { children: error })), filteredTablets.length > 0 ? (_jsx("div", Object.assign({ className: b('items') }, { children: _jsx(ReactList, { itemRenderer: this.renderTablet, length: filteredTablets.length, type: "uniform" }) }))) : (!error && _jsx("div", Object.assign({ className: b('empty-message') }, { children: "no tablets" })))] })));
         };
+        this.renderView = () => {
+            const { loading, wasLoaded, error } = this.props;
+            if (loading && !wasLoaded) {
+                return TabletsFilters.renderLoader();
+            }
+            else if (error && typeof error === 'object') {
+                if (error.status === 403) {
+                    return _jsx(AccessDenied, {});
+                }
+                return _jsx("div", { children: error.statusText });
+            }
+            else {
+                return this.renderContent();
+            }
+        };
     }
     static renderLoader() {
         return (_jsx("div", Object.assign({ className: 'loader' }, { children: _jsx(Loader, { size: "l" }) })));
     }
     componentDidMount() {
         const { setStateFilter, setTypeFilter, setHeaderBreadcrumbs } = this.props;
-        const queryParams = qs.parse(this.props.location.search, {
-            ignoreQueryPrefix: true,
-        });
-        const { nodeIds, type, path, state } = queryParams;
+        const queryParams = parseQuery(this.props.location);
+        const { nodeIds, type, path, state, clusterName } = queryParams;
         const nodes = TabletsFilters.parseNodes(nodeIds);
         if (state) {
             const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
@@ -85,7 +102,7 @@ export class TabletsFilters extends React.Component {
         if (type) {
             setTypeFilter([type]);
         }
-        this.setState({ nodeFilter: nodes, tenantPath: path }, () => {
+        this.setState({ nodeFilter: nodes, tenantPath: path, clusterName }, () => {
             this.makeRequest();
         });
         setHeaderBreadcrumbs('tablets', {
@@ -106,19 +123,8 @@ export class TabletsFilters extends React.Component {
         clearInterval(this.reloadDescriptor);
     }
     render() {
-        const { loading, wasLoaded, error } = this.props;
-        if (loading && !wasLoaded) {
-            return TabletsFilters.renderLoader();
-        }
-        else if (error && typeof error === 'object') {
-            if (error.status === 403) {
-                return _jsx(AccessDenied, {});
-            }
-            return _jsx("div", { children: error.statusText });
-        }
-        else {
-            return this.renderContent();
-        }
+        const { tenantPath, clusterName } = this.state;
+        return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${tenantPath || clusterName || CLUSTER_DEFAULT_TITLE}` }) }), this.renderView()] }));
     }
 }
 TabletsFilters.propTypes = {

package/dist/containers/TabletsFilters/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "page.title": "Tablets"
+}

package/dist/containers/TabletsFilters/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: "page.title", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/TabletsFilters/i18n/index.js

@@ -0,0 +1,5 @@
+import { registerKeysets } from '../../../utils/i18n';
+import en from './en.json';
+import ru from './ru.json';
+const COMPONENT = 'ydb-tablets-filters-page';
+export default registerKeysets(COMPONENT, { en, ru });

package/dist/containers/TabletsFilters/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+    "page.title": "Таблетки"
+}

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

@@ -5,6 +5,7 @@ import cn from 'bem-cn-lite';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router';
+import { Helmet } from 'react-helmet-async';
 import { Switch, Tabs } from '@gravity-ui/uikit';
 import { useTypedSelector } from '../../../utils/hooks';
 import routes, { createHref } from '../../../routes';
@@ -17,7 +18,7 @@ import { NodesWrapper } from '../../Nodes/NodesWrapper';
 import { StorageWrapper } from '../../Storage/StorageWrapper';
 import { Tablets } from '../../Tablets';
 import Describe from './Describe/Describe';
-import HotKeys from './HotKeys/HotKeys';
+import { HotKeys } from './HotKeys/HotKeys';
 import Network from './Network/Network';
 import { Partitions } from './Partitions/Partitions';
 import { Consumers } from './Consumers';
@@ -52,14 +53,14 @@ function Diagnostics(props) {
     };
     const activeTab = useMemo(() => {
         if (wasLoaded) {
-            if (pages.find((el) => el.id === diagnosticsTab)) {
-                return diagnosticsTab;
+            let page = pages.find((el) => el.id === diagnosticsTab);
+            if (!page) {
+                page = pages[0];
             }
-            else {
-                const newPage = pages[0].id;
-                forwardToDiagnosticTab(newPage);
-                return newPage;
+            if (page && page.id !== diagnosticsTab) {
+                forwardToDiagnosticTab(page.id);
             }
+            return page;
         }
         return undefined;
     }, [pages, diagnosticsTab, wasLoaded]);
@@ -74,7 +75,7 @@ function Diagnostics(props) {
     const renderTabContent = () => {
         const { type } = props;
         const tenantNameString = tenantName;
-        switch (diagnosticsTab) {
+        switch (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) {
             case TENANT_DIAGNOSTICS_TABS_IDS.overview: {
                 return (_jsx(DetailedOverview, { type: type, tenantName: tenantNameString, additionalTenantProps: props.additionalTenantProps, additionalNodesProps: props.additionalNodesProps }));
             }
@@ -100,7 +101,7 @@ function Diagnostics(props) {
                 return _jsx(Describe, { tenant: tenantNameString, type: type });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.hotKeys: {
-                return _jsx(HotKeys, { type: type });
+                return _jsx(HotKeys, { path: currentSchemaPath });
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.graph: {
                 return _jsx(Heatmap, { path: currentSchemaPath });
@@ -117,7 +118,7 @@ function Diagnostics(props) {
         }
     };
     const renderTabs = () => {
-        return (_jsx("div", Object.assign({ className: b('header-wrapper') }, { children: _jsxs("div", Object.assign({ className: b('tabs') }, { children: [_jsx(Tabs, { size: "l", items: pages, activeTab: activeTab, wrapTo: ({ id }, node) => {
+        return (_jsx("div", Object.assign({ className: b('header-wrapper') }, { children: _jsxs("div", Object.assign({ className: b('tabs') }, { children: [_jsx(Tabs, { size: "l", items: pages, activeTab: activeTab === null || activeTab === void 0 ? void 0 : activeTab.id, wrapTo: ({ id }, node) => {
                             const path = createHref(routes.tenant, undefined, Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.diagnosticsTab]: id }));
                             return (_jsx(Link, Object.assign({ to: path, className: b('tab') }, { children: node }), id));
                         }, allowNotSelected: true }), _jsx(Switch, { checked: autorefresh, onUpdate: onAutorefreshToggle, content: "Autorefresh" })] })) })));
@@ -128,6 +129,6 @@ function Diagnostics(props) {
     if (!wasLoaded) {
         return _jsx(Loader, { size: "l" });
     }
-    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [renderTabs(), _jsx("div", Object.assign({ className: b('page-wrapper') }, { children: renderTabContent() }))] })));
+    return (_jsxs("div", Object.assign({ className: b(), ref: container }, { children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, renderTabs(), _jsx("div", Object.assign({ className: b('page-wrapper') }, { children: renderTabContent() }))] })));
 }
 export default Diagnostics;

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

@@ -51,6 +51,25 @@ export declare const TABLE_PAGES: ({
     id: "graph";
     title: string;
 })[];
+export declare const COLUMN_TABLE_PAGES: ({
+    id: "overview";
+    title: string;
+} | {
+    id: "topShards";
+    title: string;
+} | {
+    id: "nodes";
+    title: string;
+} | {
+    id: "tablets";
+    title: string;
+} | {
+    id: "describe";
+    title: string;
+} | {
+    id: "graph";
+    title: string;
+})[];
 export declare const DIR_PAGES: ({
     id: "overview";
     title: string;

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

@@ -59,6 +59,7 @@ export const DATABASE_PAGES = [
     describe,
 ];
 export const TABLE_PAGES = [overview, topShards, nodes, graph, tablets, hotKeys, describe];
+export const COLUMN_TABLE_PAGES = [overview, topShards, nodes, graph, tablets, describe];
 export const DIR_PAGES = [overview, topShards, nodes, describe];
 export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
 export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
@@ -72,7 +73,7 @@ const pathTypeToPages = {
     [EPathType.EPathTypeExtSubDomain]: DATABASE_PAGES,
     [EPathType.EPathTypeColumnStore]: DATABASE_PAGES,
     [EPathType.EPathTypeTable]: TABLE_PAGES,
-    [EPathType.EPathTypeColumnTable]: TABLE_PAGES,
+    [EPathType.EPathTypeColumnTable]: COLUMN_TABLE_PAGES,
     [EPathType.EPathTypeDir]: DIR_PAGES,
     [EPathType.EPathTypeTableIndex]: DIR_PAGES,
     [EPathType.EPathTypeCdcStream]: CDC_STREAM_PAGES,

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

@@ -1,25 +1,7 @@
-declare var _default: import("react-redux").ConnectedComponent<typeof HotKeys, import("react-redux").Omit<{
-    getHotKeys: any;
-    currentSchemaPath: any;
-    loading: any;
-    wasLoaded: any;
-    error: any;
-    data: any;
-    autorefresh: any;
-    setHotKeysOptions: any;
-    currentSchema: any;
-    type: any;
-}, "data" | "error" | "loading" | "wasLoaded" | "currentSchemaPath" | "autorefresh" | "currentSchema" | "getHotKeys" | "setHotKeysOptions">>;
-export default _default;
-declare function HotKeys({ getHotKeys, currentSchemaPath, loading, wasLoaded, error, data, autorefresh, setHotKeysOptions, currentSchema, type, }: {
-    getHotKeys: any;
-    currentSchemaPath: any;
-    loading: any;
-    wasLoaded: any;
-    error: any;
-    data: any;
-    autorefresh: any;
-    setHotKeysOptions: any;
-    currentSchema: any;
-    type: any;
-}): JSX.Element;
+/// <reference types="react" />
+import './HotKeys.scss';
+interface HotKeysProps {
+    path: string;
+}
+export declare function HotKeys({ path }: HotKeysProps): JSX.Element;
+export {};

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

@@ -1,105 +1,101 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import cn from 'bem-cn-lite';
-import { connect } from 'react-redux';
-import { Loader } from '@gravity-ui/uikit';
+import { useEffect, useMemo, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import DataTable from '@gravity-ui/react-data-table';
 import { Icon } from '../../../../components/Icon';
 import { ResponseError } from '../../../../components/Errors/ResponseError';
-import { AutoFetcher } from '../../../../utils/autofetcher';
-import { getHotKeys, setHotKeysOptions } from '../../../../store/reducers/hotKeys';
-import { isColumnEntityType, isTableType } from '../../utils/schema';
+import { useTypedSelector } from '../../../../utils/hooks';
+import { cn } from '../../../../utils/cn';
+import { DEFAULT_TABLE_SETTINGS } from '../../../../utils/constants';
+import { setHotKeysData, setHotKeysDataWasNotLoaded, setHotKeysError, setHotKeysLoading, } from '../../../../store/reducers/hotKeys/hotKeys';
 import './HotKeys.scss';
-const b = cn('hot-keys');
-const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
-    stickyTop: 0,
-};
+import i18n from './i18n';
+const b = cn('ydb-hot-keys');
 const tableColumnsIds = {
     accessSample: 'accessSample',
     keyValues: 'keyValues',
 };
-const autofetcher = new AutoFetcher();
-function HotKeys({ getHotKeys, currentSchemaPath, loading, wasLoaded, error, data, autorefresh, setHotKeysOptions, currentSchema, type, }) {
-    const fetchData = () => {
-        if (isTableType(type) && !isColumnEntityType(type)) {
-            getHotKeys(currentSchemaPath);
-        }
-    };
+const getHotKeysColumns = (keyColumnsIds = []) => {
+    const keysColumns = keyColumnsIds.map((col, index) => ({
+        name: col,
+        header: (_jsxs("div", Object.assign({ className: b('primary-key-column') }, { children: [_jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }), col] }))),
+        render: ({ row }) => row.keyValues[index],
+        align: DataTable.RIGHT,
+        sortable: false,
+    }));
+    return [
+        {
+            name: tableColumnsIds.accessSample,
+            header: 'Samples',
+            render: ({ row }) => row.accessSample,
+            align: DataTable.RIGHT,
+            sortable: false,
+        },
+        ...keysColumns,
+    ];
+};
+export function HotKeys({ path }) {
+    var _a, _b, _c;
+    const dispatch = useDispatch();
+    const collectSamplesTimerRef = useRef();
+    const { loading, wasLoaded, data, error } = useTypedSelector((state) => state.hotKeys);
+    const { loading: schemaLoading, data: schemaData } = useTypedSelector((state) => state.schema);
+    const keyColumnsIds = (_c = (_b = (_a = schemaData[path]) === null || _a === void 0 ? void 0 : _a.PathDescription) === null || _b === void 0 ? void 0 : _b.Table) === null || _c === void 0 ? void 0 : _c.KeyColumnNames;
+    const tableColumns = useMemo(() => {
+        return getHotKeysColumns(keyColumnsIds);
+    }, [keyColumnsIds]);
     useEffect(() => {
-        if (autorefresh) {
-            fetchData();
-            autofetcher.start();
-            autofetcher.fetch(() => fetchData());
-        }
-        else {
-            autofetcher.stop();
-        }
-        return () => {
-            autofetcher.stop();
+        const fetchHotkeys = async (enableSampling) => {
+            // Set hotkeys error, but not data, since data is set conditionally
+            try {
+                const response = await window.api.getHotKeys(path, enableSampling);
+                return response;
+            }
+            catch (err) {
+                dispatch(setHotKeysError(err));
+                return undefined;
+            }
+        };
+        const fetchData = async () => {
+            // If there is previous pending request for samples, cancel it
+            if (collectSamplesTimerRef.current !== undefined) {
+                window.clearInterval(collectSamplesTimerRef.current);
+            }
+            dispatch(setHotKeysDataWasNotLoaded());
+            dispatch(setHotKeysLoading());
+            // Send request that will trigger hot keys sampling (enable_sampling = true)
+            const initialResponse = await fetchHotkeys(true);
+            // If there are hotkeys in the initial request (hotkeys was collected before)
+            // we could just use colleted samples (collected hotkeys are stored only for 30 seconds)
+            if (initialResponse && initialResponse.hotkeys) {
+                dispatch(setHotKeysData(initialResponse));
+            }
+            else if (initialResponse) {
+                // Else wait for 5 seconds, while hot keys are being collected
+                // And request these samples (enable_sampling = false)
+                const timer = setTimeout(async () => {
+                    const responseWithSamples = await fetchHotkeys(false);
+                    if (responseWithSamples) {
+                        dispatch(setHotKeysData(responseWithSamples));
+                    }
+                }, 5000);
+                collectSamplesTimerRef.current = timer;
+            }
         };
-    }, [autorefresh]);
-    useEffect(() => {
         fetchData();
-        setHotKeysOptions({
-            wasLoaded: false,
-            data: undefined,
-        });
-    }, [currentSchemaPath]);
-    const renderLoader = () => {
-        return (_jsx("div", Object.assign({ className: b('loader') }, { children: _jsx(Loader, { size: "l" }) })));
-    };
-    const tableColumns = useMemo(() => {
-        var _a, _b, _c;
-        const keyColumnsIds = (_c = (_b = (_a = currentSchema === null || currentSchema === void 0 ? void 0 : currentSchema.PathDescription) === null || _a === void 0 ? void 0 : _a.Table) === null || _b === void 0 ? void 0 : _b.KeyColumnNames) !== null && _c !== void 0 ? _c : [];
-        return [
-            {
-                name: tableColumnsIds.accessSample,
-                header: 'Samples',
-                sortable: false,
-                align: DataTable.RIGHT,
-            },
-            ...keyColumnsIds.map((col, index) => ({
-                name: col,
-                header: (_jsxs("div", Object.assign({ className: b('primary-key-column') }, { children: [_jsx(Icon, { name: "key", viewBox: "0 0 12 7", width: 12, height: 7 }), col] }))),
-                render: ({ row }) => row[tableColumnsIds.keyValues][index],
-                align: DataTable.RIGHT,
-                sortable: false,
-            })),
-        ];
-    }, [currentSchema]);
-    const renderStub = () => {
-        return _jsx("div", Object.assign({ className: b('stub') }, { children: "Cluster version does not support hot keys viewing" }));
-    };
-    const renderContent = () => {
-        if (error) {
-            return _jsx(ResponseError, { error: error });
-        }
-        return data !== null ? (_jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { columns: tableColumns, data: data, settings: TABLE_SETTINGS, theme: "yandex-cloud", initialSortOrder: {
-                    columnId: tableColumnsIds.accessSample,
-                    order: DataTable.DESCENDING,
-                } }) }))) : (_jsx("div", Object.assign({ className: b('stub') }, { children: "No information about hot keys" })));
-    };
-    return !loading && data === undefined ? (renderStub()) : (_jsx("div", Object.assign({ className: b() }, { children: loading && !wasLoaded ? renderLoader() : renderContent() })));
+    }, [dispatch, path]);
+    // It takes a while to collect hot keys. Display explicit status message, while collecting
+    if ((loading && !wasLoaded) || schemaLoading) {
+        return _jsx("div", { children: i18n('hot-keys-collecting') });
+    }
+    if (error) {
+        return _jsx(ResponseError, { error: error });
+    }
+    if (!data) {
+        return _jsx("div", { children: i18n('no-data') });
+    }
+    return (_jsx("div", Object.assign({ className: b('table-content') }, { children: _jsx(DataTable, { columns: tableColumns, data: data, settings: DEFAULT_TABLE_SETTINGS, theme: "yandex-cloud", initialSortOrder: {
+                columnId: tableColumnsIds.accessSample,
+                order: DataTable.DESCENDING,
+            } }) })));
 }
-const mapStateToProps = (state) => {
-    const { loading, data, error, wasLoaded } = state.hotKeys;
-    const { currentSchema = {}, autorefresh } = state.schema;
-    const { Path } = currentSchema;
-    return {
-        loading,
-        data,
-        error,
-        currentSchemaPath: Path,
-        autorefresh,
-        wasLoaded,
-        currentSchema,
-    };
-};
-const mapDispatchToProps = {
-    getHotKeys,
-    setHotKeysOptions,
-};
-export default connect(mapStateToProps, mapDispatchToProps)(HotKeys);

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

@@ -1,16 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.hot-keys {
-    display: flex;
-    overflow: auto;
-    flex-grow: 1;
-    flex-direction: column;
-    align-items: flex-start;
-
-    max-height: 100%;
-
-    background-color: var(--g-color-base-background);
-
+.ydb-hot-keys {
     &__table-content {
         overflow: auto;
 
@@ -19,28 +9,6 @@
         @include freeze-nth-column(1);
     }
 
-    &__header {
-        position: sticky;
-        z-index: 2;
-        top: 0px;
-        left: 0;
-
-        width: 100%;
-        padding: 10px 0;
-
-        background-color: var(--g-color-base-background);
-    }
-    &__loader {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        width: 100%;
-        height: 100%;
-    }
-    &__stub {
-        margin: 10px;
-    }
     &__primary-key-column {
         display: flex;
         gap: 5px;

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "hot-keys-collecting": "Please wait a little while we are collecting hot keys samples...",
+    "no-data": "No information about hot keys"
+}

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export default _default;

package/dist/containers/Tenant/Diagnostics/HotKeys/i18n/index.js

@@ -0,0 +1,5 @@
+import { i18n, Lang } from '../../../../../utils/i18n';
+import en from './en.json';
+const COMPONENT = 'ydb-hot-keys';
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+export default i18n.keyset(COMPONENT);

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

@@ -8,7 +8,10 @@ import './MetricCard.scss';
 const b = cn('ydb-metrics-card');
 export function MetricCard({ active, progress, label, status, resourcesUsed }) {
     const renderContent = () => {
-        return (_jsxs("div", Object.assign({ className: b('content') }, { children: [progress && _jsx("div", Object.assign({ className: b('progress') }, { children: formatUsage(progress) })), resourcesUsed ? (_jsx("div", Object.assign({ className: b('resources') }, { children: resourcesUsed }))) : (i18n('no-data'))] })));
+        if (progress === undefined && resourcesUsed === undefined) {
+            return _jsx("div", Object.assign({ className: b('content') }, { children: i18n('no-data') }));
+        }
+        return (_jsxs("div", Object.assign({ className: b('content') }, { children: [progress && _jsx("div", Object.assign({ className: b('progress') }, { children: formatUsage(progress) })), resourcesUsed && _jsx("div", Object.assign({ className: b('resources') }, { children: resourcesUsed }))] })));
     };
     return (_jsxs(DiagnosticCard, Object.assign({ className: b({ active }), active: active }, { children: [_jsx("div", Object.assign({ className: b('header') }, { children: label && _jsx("div", Object.assign({ className: b('label') }, { children: label })) })), _jsx(CircularProgressBar, { size: 172, strokeWidth: 11, progress: progress || 0, content: renderContent(), status: status, circleBgClassName: b('progress-bar-circle-bg') })] })));
 }

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

@@ -12,15 +12,14 @@ import './MetricsCards.scss';
 const b = cn('metrics-cards');
 export function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetchHealthcheck, healthcheckLoading, healthCheckWasLoaded, healthcheckError, }) {
     const location = useLocation();
-    const { memoryUsed, memoryLimit, cpuUsed, cpuUsage, storageUsed, storageLimit } = metrics || {};
+    const { memoryUsed, memoryLimit, cpuUsage, storageUsed, storageLimit } = metrics || {};
     const { metricsTab } = useTypedSelector((state) => state.tenant);
     const storageUsage = calculateUsage(storageUsed, storageLimit);
     const memoryUsage = calculateUsage(memoryUsed, memoryLimit);
     const cpuStatus = cpuUsageToStatus(cpuUsage);
     const storageStatus = storageUsageToStatus(storageUsage);
     const memoryStatus = memoryUsageToStatus(memoryUsage);
-    const { cpu, storage, memory } = formatTenantMetrics({
-        cpu: cpuUsed,
+    const { storage, memory } = formatTenantMetrics({
         storage: storageUsed,
         memory: memoryUsed,
     });
@@ -38,5 +37,5 @@ export function MetricsCards({ metrics, issuesStatistics, selfCheckResult, fetch
         [TENANT_METRICS_TABS_IDS.memory]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.memory) })),
         [TENANT_METRICS_TABS_IDS.healthcheck]: getTenantPath(Object.assign(Object.assign({}, queryParams), { [TenantTabsGroups.metricsTab]: getTabIfNotActive(TENANT_METRICS_TABS_IDS.healthcheck) })),
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Link, Object.assign({ to: tabLinks.cpu, className: b('tab') }, { children: _jsx(MetricCard, { label: "CPU", progress: cpuUsage, status: cpuStatus, resourcesUsed: cpu, active: metricsTab === TENANT_METRICS_TABS_IDS.cpu }) })), _jsx(Link, Object.assign({ to: tabLinks.storage, className: b('tab') }, { children: _jsx(MetricCard, { label: "Storage", progress: storageUsage, status: storageStatus, resourcesUsed: storage, active: metricsTab === TENANT_METRICS_TABS_IDS.storage }) })), _jsx(Link, Object.assign({ to: tabLinks.memory, className: b('tab') }, { children: _jsx(MetricCard, { label: "Memory", progress: memoryUsage, status: memoryStatus, resourcesUsed: memory, active: metricsTab === TENANT_METRICS_TABS_IDS.memory }) })), _jsx(Link, Object.assign({ to: tabLinks.healthcheck, className: b('tab') }, { children: _jsx(HealthcheckPreview, { selfCheckResult: selfCheckResult, issuesStatistics: issuesStatistics, onUpdate: fetchHealthcheck, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError, active: metricsTab === TENANT_METRICS_TABS_IDS.healthcheck }) }))] })));
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(Link, Object.assign({ to: tabLinks.cpu, className: b('tab') }, { children: _jsx(MetricCard, { label: "CPU", progress: cpuUsage, status: cpuStatus, active: metricsTab === TENANT_METRICS_TABS_IDS.cpu }) })), _jsx(Link, Object.assign({ to: tabLinks.storage, className: b('tab') }, { children: _jsx(MetricCard, { label: "Storage", progress: storageUsage, status: storageStatus, resourcesUsed: storage, active: metricsTab === TENANT_METRICS_TABS_IDS.storage }) })), _jsx(Link, Object.assign({ to: tabLinks.memory, className: b('tab') }, { children: _jsx(MetricCard, { label: "Memory", progress: memoryUsage, status: memoryStatus, resourcesUsed: memory, active: metricsTab === TENANT_METRICS_TABS_IDS.memory }) })), _jsx(Link, Object.assign({ to: tabLinks.healthcheck, className: b('tab') }, { children: _jsx(HealthcheckPreview, { selfCheckResult: selfCheckResult, issuesStatistics: issuesStatistics, onUpdate: fetchHealthcheck, loading: healthcheckLoading, wasLoaded: healthCheckWasLoaded, error: healthcheckError, active: metricsTab === TENANT_METRICS_TABS_IDS.healthcheck }) }))] })));
 }

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

@@ -36,20 +36,27 @@ export function TenantOverview({ tenantName, additionalTenantProps, additionalNo
     }, [fetchTenant, fetchHealthcheck], autorefresh);
     const { Name, State, Type } = tenant || {};
     const tenantType = mapDatabaseTypeToDBName(Type);
-    const { cpu, blobStorage, tableStorage, memory, cpuUsage, blobStorageLimit, tableStorageLimit, memoryLimit, } = calculateTenantMetrics(tenant);
+    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: blobStorage,
-        storageLimit: blobStorageLimit,
+        storageUsed,
+        storageLimit,
     };
     const storageMetrics = {
         blobStorageUsed: blobStorage,
         blobStorageLimit,
-        tableStorageUsed: tableStorage,
-        tableStorageLimit,
+        tabletStorageUsed: tabletStorage,
+        tabletStorageLimit,
     };
     const renderName = () => {
         return (_jsx("div", Object.assign({ className: b('tenant-name-wrapper') }, { children: _jsx(EntityStatus, { status: State, name: Name || TENANT_DEFAULT_TITLE, withLeftTrim: true, hasClipboardButton: Boolean(tenant), clipboardButtonAlwaysVisible: true }) })));

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

@@ -3,8 +3,8 @@ import '../TenantOverview.scss';
 export interface TenantStorageMetrics {
     blobStorageUsed?: number;
     blobStorageLimit?: number;
-    tableStorageUsed?: number;
-    tableStorageLimit?: number;
+    tabletStorageUsed?: number;
+    tabletStorageLimit?: number;
 }
 interface TenantStorageProps {
     tenantName: string;