ydb-embedded-ui 1.14.1 → 2.0.0

package/dist/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -0,0 +1,34 @@
+import {Button} from '@gravity-ui/uikit';
+
+import EmptyState from '../../../components/EmptyState/EmptyState';
+import {Illustration} from '../../../components/Illustration';
+
+import i18n from './i18n';
+
+interface EmptyFilterProps {
+    title: string;
+    message?: string;
+    showAll?: string;
+    onShowAll?: VoidFunction;
+}
+
+export const EmptyFilter = ({
+    title,
+    message = i18n('default_message'),
+    showAll = i18n('default_button_label'),
+    onShowAll,
+}: EmptyFilterProps) => (
+    <EmptyState
+        image={<Illustration name="thumbsUp" />}
+        title={title}
+        description={message}
+        actions={onShowAll && [
+            <Button
+                key="show-all"
+                onClick={onShowAll}
+            >
+                {showAll}
+            </Button>
+        ]}
+    />
+);

package/dist/containers/Storage/EmptyFilter/i18n/en.json

@@ -0,0 +1,4 @@
+{
+    "default_message": "Everything is fine!",
+    "default_button_label": "Show All"
+}

package/dist/containers/Storage/EmptyFilter/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-storage-empty-filter';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Storage/EmptyFilter/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+    "default_message": "Всё в порядке!",
+    "default_button_label": "Показать все"
+}

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
-import {Popup} from '@yandex-cloud/uikit';
+import {Popup} from '@gravity-ui/uikit';
 
 import type {RequiredField} from '../../../types';
 //@ts-ignore

package/dist/containers/Storage/Storage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {RadioButton, Label} from '@yandex-cloud/uikit';
+import {RadioButton, Label} from '@gravity-ui/uikit';
 
 import {StorageFilter} from './StorageFilter';
 import {UsageFilter} from './UsageFilter';
@@ -186,6 +186,7 @@ class Storage extends React.Component {
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
                         nodes={nodes}
+                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
                     />
                 )}
                 {storageType === StorageTypes.nodes && (
@@ -193,6 +194,7 @@ class Storage extends React.Component {
                         visibleEntities={visibleEntities}
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
+                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
                     />
                 )}
             </div>

package/dist/containers/Storage/StorageFilter/StorageFilter.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 
-import {TextInput} from '@yandex-cloud/uikit';
+import {TextInput} from '@gravity-ui/uikit';
 
 interface StorageFilterProps {
     className?: string;

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Label, Popover, PopoverBehavior} from '@yandex-cloud/uikit';
+import {Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
@@ -16,9 +16,11 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils';
 import {getUsage, isFullDonorData} from '../../../utils/storage';
 
+import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import Vdisk from '../Vdisk/Vdisk';
 import {getDegradedSeverity, getUsageSeverity} from '../utils';
 
+import i18n from './i18n';
 import './StorageGroups.scss';
 
 enum TableColumnsIds {
@@ -42,6 +44,7 @@ interface StorageGroupsProps {
     nodes: any;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
+    onShowAll?: VoidFunction;
 }
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -85,7 +88,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGroupsProps) {
+function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}: StorageGroupsProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.PoolName,
@@ -253,17 +256,35 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
     ];
 
     let columns = allColumns;
-    let emptyMessage = 'No such groups.';
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-        emptyMessage = 'No groups with out of space errors.';
+
+        if (!data.length) {
+            return (
+                <EmptyFilter
+                    title={i18n('empty.out_of_space')}
+                    showAll={i18n('show_all')}
+                    onShowAll={onShowAll}
+                />
+            );
+        }
     }
 
     if (visibleEntities === VisibleEntities.Missing) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
-        emptyMessage = 'No degraded groups.';
+
+        if (!data.length) {
+            return (
+                <EmptyFilter
+                    title={i18n('empty.degraded')}
+                    showAll={i18n('show_all')}
+                    onShowAll={onShowAll}
+                />
+            );
+        }
     }
+
     return data ? (
         <DataTable
             key={visibleEntities as string}
@@ -272,7 +293,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             columns={columns}
             settings={tableSettings}
             initialSortOrder={setSortOrder(visibleEntities)}
-            emptyDataMessage={emptyMessage}
+            emptyDataMessage={i18n('empty.default')}
         />
     ) : null;
 }

package/dist/containers/Storage/StorageGroups/i18n/en.json

@@ -0,0 +1,6 @@
+{
+    "empty.default": "No such groups",
+    "empty.out_of_space": "No groups with out of space errors",
+    "empty.degraded": "No degraded groups",
+    "show_all": "Show all groups"
+}

package/dist/containers/Storage/StorageGroups/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-storage-groups';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Storage/StorageGroups/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+    "empty.default": "Нет групп",
+    "empty.out_of_space": "Нет групп, в которых кончается место",
+    "empty.degraded": "Нет деградировавших групп",
+    "show_all": "Показать все группы"
+}

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,11 +1,15 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
+import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
+
+import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import Pdisk from '../Pdisk/Pdisk';
 
+import i18n from './i18n';
 import './StorageNodes.scss';
 
 enum TableColumnsIds {
@@ -19,11 +23,12 @@ enum TableColumnsIds {
 type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
-interface StorageGroupsProps {
+interface StorageNodesProps {
     data: any;
     nodes: any;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
+    onShowAll?: VoidFunction;
 }
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -56,7 +61,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps) {
+function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: StorageNodesProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.NodeId,
@@ -114,14 +119,26 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
     ];
 
     let columns = allColumns;
-    let emptyMessage = 'No such nodes.';
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-        emptyMessage = 'No nodes with out of space errors.';
+
+        return (
+            <EmptyFilter
+                title={i18n('empty.out_of_space')}
+                showAll={i18n('show_all')}
+                onShowAll={onShowAll}
+            />
+        );
     }
     if (visibleEntities === VisibleEntities.Missing) {
-        emptyMessage = 'No degraded nodes.';
+        return (
+            <EmptyFilter
+                title={i18n('empty.degraded')}
+                showAll={i18n('show_all')}
+                onShowAll={onShowAll}
+            />
+        );
     }
 
     return data ? (
@@ -132,7 +149,7 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
             columns={columns}
             settings={tableSettings}
             initialSortOrder={setSortOrder(visibleEntities)}
-            emptyDataMessage={emptyMessage}
+            emptyDataMessage={i18n('empty.default')}
         />
     ) : null;
 }

package/dist/containers/Storage/StorageNodes/i18n/en.json

@@ -0,0 +1,6 @@
+{
+    "empty.default": "No such nodes",
+    "empty.out_of_space": "No nodes with out of space errors",
+    "empty.degraded": "No degraded nodes",
+    "show_all": "Show all nodes"
+}

package/dist/containers/Storage/StorageNodes/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-storage-nodes';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Storage/StorageNodes/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+    "empty.default": "Нет узлов",
+    "empty.out_of_space": "Нет узлов, в которых кончается место",
+    "empty.degraded": "Нет деградировавших узлов",
+    "show_all": "Показать все узлы"
+}

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useMemo, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Select, SelectOption} from '@yandex-cloud/uikit';
+import {Select, SelectOption} from '@gravity-ui/uikit';
 
 import EntityStatus from "../../../components/EntityStatus/EntityStatus";
 

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -1,7 +1,7 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import {Label, Popup} from '@yandex-cloud/uikit';
+import {Label, Popup} from '@gravity-ui/uikit';
 
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';

package/dist/containers/Tablet/Tablet.js

@@ -15,7 +15,7 @@ import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {Tag} from '../../components/Tag/Tag';
 import Icon from '../../components/Icon/Icon';
 import EmptyState from '../../components/EmptyState/EmptyState';
-import {Link as ExternalLink, Button, Loader} from '@yandex-cloud/uikit';
+import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
 import routes, {createHref} from '../../routes';

package/dist/containers/Tablets/Tablets.js

@@ -12,7 +12,7 @@ import {
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 
 import Tablet from '../../components/Tablet/Tablet';
-import {Loader, Select} from '@yandex-cloud/uikit';
+import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 import {AutoFetcher} from '../../utils/autofetcher';
 

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Loader, Select} from '@yandex-cloud/uikit';
+import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 
 import Tablet from '../../components/Tablet/Tablet';

package/dist/containers/Tenant/Acl/Acl.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 

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

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import {withRouter} from 'react-router-dom';
 import qs from 'qs';
 
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import NodesViewer from '../../../../components/NodesViewer/NodesViewer';
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
 import {getDescribe} from '../../../../store/reducers/describe';

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.tsx

@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Button, Modal} from '@yandex-cloud/uikit';
+import {Button, Modal} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../../types/api/schema';
 //@ts-ignore

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -5,7 +5,7 @@ import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
 import {useLocation} from 'react-router';
 
-import {Switch, Tabs} from '@yandex-cloud/uikit';
+import {Switch, Tabs} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import TopQueries from './TopQueries/TopQueries';

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Loader, Button} from '@yandex-cloud/uikit';
+import {Loader, Button} from '@gravity-ui/uikit';
 
 import IssuesViewer from './IssuesViewer/IssuesViewer';
 

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

@@ -1,7 +1,7 @@
 import {useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
 import Icon from '../../../../components/Icon/Icon';

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

@@ -5,11 +5,12 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 
 import {Link} from 'react-router-dom';
-import {Loader, Checkbox} from '@yandex-cloud/uikit';
+import {Loader, Checkbox} from '@gravity-ui/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
 import Icon from '../../../../components/Icon/Icon';
 import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
+import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo} from '../../../../store/reducers/network';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
@@ -242,7 +243,7 @@ class Network extends React.Component {
         });
 
         if (filter === PROBLEMS && problemNodesCount === 0) {
-            return <div className="no-problem" />;
+            return <Illustration name="thumbsUp" width="200" />;
         } else {
             return result;
         }

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

@@ -111,7 +111,7 @@
         display: flex;
         gap: 12px;
 
-        margin-bottom: 16px;
+        margin: 0 16px 16px 0;
     }
 
     &__controls-wrapper {

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -1,8 +1,8 @@
-import {ReactNode, useEffect, useMemo} from 'react';
+import {ReactNode, useCallback, useEffect, useMemo} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
@@ -22,14 +22,14 @@ import {getOlapStats} from '../../../../store/reducers/olapStats';
 
 import './Overview.scss';
 
-function prepareOlapTableGeneral(tableData: any, olapStats: any[]) {
+function prepareOlapTableGeneral(tableData: any, olapStats?: any[]) {
     const {ColumnShardCount} = tableData;
     const Bytes = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Bytes) ?? 0;
+        acc += parseInt(el.Bytes) || 0;
         return acc;
     }, 0);
     const Rows = olapStats?.reduce((acc, el) => {
-        acc += parseInt(el.Rows) ?? 0;
+        acc += parseInt(el.Rows) || 0;
         return acc;
     }, 0);
     const tabletIds = olapStats?.reduce((acc, el) => {
@@ -60,7 +60,10 @@ const b = cn('kv-tenant-overview');
 const autofetcher = new AutoFetcher();
 
 function Overview(props: OverviewProps) {
+    const {tenantName, type} = props;
+
     const dispatch = useDispatch();
+
     const {
         currentSchema: currentItem = {},
         loading,
@@ -69,45 +72,42 @@ function Overview(props: OverviewProps) {
         currentSchemaPath,
     } = useSelector((state: any) => state.schema);
 
-    const {data: olapStats} = useSelector((state: any) => state.olapStats);
+    const {
+        data: { result: olapStats } = { result: undefined },
+    } = useSelector((state: any) => state.olapStats);
 
-    const fetchOverviewData = () => {
-        const {tenantName, type} = props;
+    const fetchOverviewData = useCallback(() => {
         const schemaPath = currentSchemaPath || tenantName;
         dispatch(getSchema({path: schemaPath}));
 
         if (isTableType(type) && isColumnEntityType(type)) {
             dispatch(getOlapStats({path: schemaPath}));
         }
-    };
+    }, [currentSchemaPath, dispatch, tenantName, type]);
 
-    useEffect(() => {
-        fetchOverviewData();
-        return () => {
-            autofetcher.stop();
-        };
-    }, []);
+    useEffect(fetchOverviewData, [fetchOverviewData]);
 
     useEffect(() => {
+        autofetcher.stop();
+
         if (autorefresh) {
-            fetchOverviewData();
-            autofetcher.stop();
             autofetcher.start();
             autofetcher.fetch(() => fetchOverviewData());
         }
-        if (autorefresh === false) {
+
+        return () => {
             autofetcher.stop();
-        }
-    }, [autorefresh]);
+        };
+    }, [autorefresh, fetchOverviewData]);
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
 
     const schemaData = useMemo(() => {
-        return isTableType(props.type) && isColumnEntityType(props.type)
+        return isTableType(type) && isColumnEntityType(type)
             ? prepareOlapTableGeneral(tableSchema, olapStats)
             : currentItem;
-    }, [props.type, tableSchema, olapStats, currentItem]);
+    }, [type, tableSchema, olapStats, currentItem]);
 
     const renderLoader = () => {
         return (
@@ -133,7 +133,7 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
         };
 
-        return (props.type && pathTypeToComponent[props.type]?.()) || (
+        return (type && pathTypeToComponent[type]?.()) || (
             <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
         );
     }

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

@@ -17,7 +17,7 @@ import {TABLET_STATES} from '../../../../utils/constants';
 
 import './TenantOverview.scss';
 import {AutoFetcher} from '../../../../utils/autofetcher';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 const b = cn('tenant-overview');
 

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {sendQuery, setQueryOptions} from '../../../../store/reducers/executeTopQueries';
@@ -167,11 +167,11 @@ class TopQueries extends React.Component {
     }
 }
 const mapStateToProps = (state) => {
-    const {loading, data, error, wasLoaded} = state.executeTopQueries;
+    const {loading, data = {}, error, wasLoaded} = state.executeTopQueries;
     const {autorefresh} = state.schema;
     return {
         loading,
-        data,
+        data: data.result,
         error,
         wasLoaded,
         autorefresh,

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

@@ -1,7 +1,7 @@
 import {useState, useContext, useEffect, useMemo} from 'react';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
 import InternalLink from '../../../../components/InternalLink/InternalLink';
@@ -216,11 +216,11 @@ function TopShards({
 }
 
 const mapStateToProps = (state) => {
-    const {loading, data, error, wasLoaded} = state.shardsWorkload;
+    const {loading, data = {}, error, wasLoaded} = state.shardsWorkload;
     const {autorefresh} = state.schema;
     return {
         loading,
-        data,
+        data: data.result,
         error,
         currentSchemaPath: state.schema?.currentSchema?.Path,
         autorefresh,