ydb-embedded-ui 5.5.0 → 6.0.1

package/dist/containers/Nodes/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-nodes';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/PDiskPage/PDiskGroups.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { PreparedStorageGroup } from '../../store/reducers/storage/types';
 import type { NodesMap } from '../../types/store/nodesList';
 interface PDiskGroupsProps {
@@ -6,5 +5,5 @@ interface PDiskGroupsProps {
     nodesMap?: NodesMap;
     loading?: boolean;
 }
-export declare function PDiskGroups({ data, nodesMap, loading }: PDiskGroupsProps): JSX.Element;
+export declare function PDiskGroups({ data, nodesMap, loading }: PDiskGroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/PDiskPage/PDiskGroups.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { TableSkeleton } from '../../components/TableSkeleton/TableSkeleton';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { getPDiskStorageColumns } from '../Storage/StorageGroups/getStorageGroupsColumns';
-import { pdiskPageCn } from './shared';
 import { pDiskPageKeyset } from './i18n';
+import { pdiskPageCn } from './shared';
 export function PDiskGroups({ data, nodesMap, loading }) {
-    const pDiskStorageColumns = useMemo(() => {
+    const pDiskStorageColumns = React.useMemo(() => {
         return getPDiskStorageColumns(nodesMap);
     }, [nodesMap]);
     const renderContent = () => {
@@ -16,5 +16,5 @@ export function PDiskGroups({ data, nodesMap, loading }) {
         }
         return (_jsx(DataTable, { theme: "yandex-cloud", data: data, columns: pDiskStorageColumns, settings: DEFAULT_TABLE_SETTINGS }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: pdiskPageCn('groups-title') }, { children: pDiskPageKeyset('groups') })), _jsx("div", { children: renderContent() })] }));
+    return (_jsxs(React.Fragment, { children: [_jsx("div", { className: pdiskPageCn('groups-title'), children: pDiskPageKeyset('groups') }), _jsx("div", { children: renderContent() })] }));
 }

package/dist/containers/PDiskPage/PDiskPage.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import './PDiskPage.scss';
-export declare function PDiskPage(): JSX.Element;
+export declare function PDiskPage(): import("react/jsx-runtime").JSX.Element;

package/dist/containers/PDiskPage/PDiskPage.js

@@ -1,49 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
-import { StringParam, useQueryParams } from 'use-query-params';
-import { Helmet } from 'react-helmet-async';
+import React from 'react';
 import { Icon } from '@gravity-ui/uikit';
-import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
-import { getPDiskData, getPDiskStorage, setPDiskDataWasNotLoaded, } from '../../store/reducers/pdisk/pdisk';
+import { skipToken } from '@reduxjs/toolkit/query';
+import { Helmet } from 'react-helmet-async';
+import { StringParam, useQueryParams } from 'use-query-params';
+import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
+import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
+import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
+import { PageMeta } from '../../components/PageMeta/PageMeta';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
 import { selectNodesMap } from '../../store/reducers/nodesList';
+import { pDiskApi } from '../../store/reducers/pdisk/pdisk';
 import { valueIsDefined } from '../../utils';
-import { useAutofetcher, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { DEFAULT_POLLING_INTERVAL } from '../../utils/constants';
 import { getSeverityColor } from '../../utils/disks/helpers';
-import { PageMeta } from '../../components/PageMeta/PageMeta';
-import { PDiskInfo } from '../../components/PDiskInfo/PDiskInfo';
-import { InfoViewerSkeleton } from '../../components/InfoViewerSkeleton/InfoViewerSkeleton';
-import { DiskPageTitle } from '../../components/DiskPageTitle/DiskPageTitle';
-import { ButtonWithConfirmDialog } from '../../components/ButtonWithConfirmDialog/ButtonWithConfirmDialog';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { PDiskGroups } from './PDiskGroups';
-import { pdiskPageCn } from './shared';
 import { pDiskPageKeyset } from './i18n';
+import { pdiskPageCn } from './shared';
+import ArrowRotateLeftIcon from '@gravity-ui/icons/svgs/arrow-rotate-left.svg';
 import './PDiskPage.scss';
 export function PDiskPage() {
+    var _a;
     const dispatch = useTypedDispatch();
     const nodesMap = useTypedSelector(selectNodesMap);
-    const { pDiskData, groupsData, pDiskLoading, pDiskWasLoaded, groupsLoading, groupsWasLoaded } = useTypedSelector((state) => state.pDisk);
-    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
     const [{ nodeId, pDiskId }] = useQueryParams({
         nodeId: StringParam,
         pDiskId: StringParam,
     });
-    useEffect(() => {
+    React.useEffect(() => {
         dispatch(setHeaderBreadcrumbs('pDisk', { nodeId, pDiskId }));
     }, [dispatch, nodeId, pDiskId]);
-    const fetchData = useCallback(async (isBackground) => {
-        if (!isBackground) {
-            dispatch(setPDiskDataWasNotLoaded());
-        }
-        if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
-            return Promise.all([
-                dispatch(getPDiskData({ nodeId, pDiskId })),
-                dispatch(getPDiskStorage({ nodeId, pDiskId })),
-            ]);
-        }
-        return undefined;
-    }, [dispatch, nodeId, pDiskId]);
-    useAutofetcher(fetchData, [fetchData], true);
+    const params = valueIsDefined(nodeId) && valueIsDefined(pDiskId) ? { nodeId, pDiskId } : skipToken;
+    const pdiskDataQuery = pDiskApi.useGetPdiskInfoQuery(params, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const pDiskLoading = pdiskDataQuery.isFetching && pdiskDataQuery.currentData === undefined;
+    const pDiskData = pdiskDataQuery.currentData || {};
+    const { NodeHost, NodeId, NodeType, NodeDC, Severity } = pDiskData;
+    const pDiskStorageQuery = pDiskApi.useGetStorageInfoQuery(params, {
+        pollingInterval: DEFAULT_POLLING_INTERVAL,
+    });
+    const groupsLoading = pDiskStorageQuery.isFetching && pDiskStorageQuery.currentData === undefined;
+    const groupsData = (_a = pDiskStorageQuery.currentData) !== null && _a !== void 0 ? _a : [];
     const handleRestart = async () => {
         if (valueIsDefined(nodeId) && valueIsDefined(pDiskId)) {
             return window.api.restartPDisk(nodeId, pDiskId);
@@ -51,7 +51,7 @@ export function PDiskPage() {
         return undefined;
     };
     const handleAfterRestart = async () => {
-        return fetchData(true);
+        return Promise.all([pdiskDataQuery.refetch(), pDiskStorageQuery.refetch()]);
     };
     const renderHelmet = () => {
         const pDiskPagePart = pDiskId
@@ -63,22 +63,22 @@ export function PDiskPage() {
     const renderPageMeta = () => {
         const hostItem = NodeHost ? `${pDiskPageKeyset('fqdn')}: ${NodeHost}` : undefined;
         const nodeIdItem = NodeId ? `${pDiskPageKeyset('node')}: ${NodeId}` : undefined;
-        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), loading: pDiskLoading && !pDiskWasLoaded, items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
+        return (_jsx(PageMeta, { className: pdiskPageCn('meta'), loading: pDiskLoading, items: [hostItem, nodeIdItem, NodeType, NodeDC] }));
     };
     const renderPageTitle = () => {
         return (_jsx(DiskPageTitle, { entityName: pDiskPageKeyset('pdisk'), status: getSeverityColor(Severity), id: pDiskId, className: pdiskPageCn('title') }));
     };
     const renderControls = () => {
-        return (_jsx("div", Object.assign({ className: pdiskPageCn('controls') }, { children: _jsxs(ButtonWithConfirmDialog, Object.assign({ onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog') }, { children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] })) })));
+        return (_jsx("div", { className: pdiskPageCn('controls'), children: _jsxs(ButtonWithConfirmDialog, { onConfirmAction: handleRestart, onConfirmActionSuccess: handleAfterRestart, buttonDisabled: !nodeId || !pDiskId, buttonView: "normal", dialogContent: pDiskPageKeyset('restart-pdisk-dialog'), children: [_jsx(Icon, { data: ArrowRotateLeftIcon }), pDiskPageKeyset('restart-pdisk-button')] }) }));
     };
     const renderInfo = () => {
-        if (pDiskLoading && !pDiskWasLoaded) {
+        if (pDiskLoading) {
             return _jsx(InfoViewerSkeleton, { className: pdiskPageCn('info'), rows: 10 });
         }
         return (_jsx(PDiskInfo, { pDisk: pDiskData, nodeId: nodeId, className: pdiskPageCn('info'), isPDiskPage: true }));
     };
     const renderGroupsTable = () => {
-        return (_jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading && !groupsWasLoaded }));
+        return _jsx(PDiskGroups, { data: groupsData, nodesMap: nodesMap, loading: groupsLoading });
     };
-    return (_jsxs("div", Object.assign({ className: pdiskPageCn(null) }, { children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] })));
+    return (_jsxs("div", { className: pdiskPageCn(null), children: [renderHelmet(), renderPageMeta(), renderPageTitle(), renderControls(), renderInfo(), renderGroupsTable()] }));
 }

package/dist/containers/PDiskPage/PDiskPage.scss

@@ -6,13 +6,12 @@
     display: flex;
     overflow: auto;
     flex-direction: column;
+    gap: 20px;
 
     height: 100%;
     padding-top: 20px;
     padding-left: 20px;
 
-    gap: 20px;
-
     &__meta,
     &__title,
     &__info,

package/dist/containers/PDiskPage/shared.d.ts

@@ -1,10 +1 @@
-export declare const pdiskPageCn: {
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string, mixin?: string | string[] | undefined): string;
-    (elementName: string, modifiers: import("bem-cn-lite").Modifications): string;
-    (mods: import("bem-cn-lite").Modifications | null, mixin?: string | string[] | undefined): string;
-    (elementName: string): string;
-    (mods: import("bem-cn-lite").Modifications | null): string;
-    (): string;
-    builder(): import("bem-cn").Block;
-};
+export declare const pdiskPageCn: import("@bem-react/classname").ClassNameFormatter;

package/dist/containers/ReduxTooltip/ReduxTooltip.d.ts

@@ -1,22 +1,23 @@
-declare const _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, import("react-redux").Omit<PropTypes.InferProps<{
-    className: PropTypes.Requireable<string>;
-    toolTipVisible: PropTypes.Requireable<boolean>;
-    currentHoveredRef: PropTypes.Requireable<object>;
-    data: PropTypes.Requireable<any>;
-    template: PropTypes.Requireable<(...args: any[]) => any>;
-    hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
-}>, "data" | "template" | "hideTooltip" | "toolTipVisible" | "currentHoveredRef">>;
+declare const _default: import("react-redux").ConnectedComponent<typeof ReduxTooltip, {
+    className?: string | null | undefined;
+    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+} | {
+    className?: string | null | undefined;
+    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
+}>;
 export default _default;
-declare function ReduxTooltip(props: any): JSX.Element;
+declare function ReduxTooltip(props: any): import("react/jsx-runtime").JSX.Element;
 declare namespace ReduxTooltip {
     export { propTypes };
 }
-import PropTypes from "prop-types";
+import React from 'react';
 declare namespace propTypes {
-    const className: PropTypes.Requireable<string>;
-    const toolTipVisible: PropTypes.Requireable<boolean>;
-    const currentHoveredRef: PropTypes.Requireable<object>;
-    const data: PropTypes.Requireable<any>;
-    const template: PropTypes.Requireable<(...args: any[]) => any>;
-    const hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
+    let className: PropTypes.Requireable<string>;
+    let toolTipVisible: PropTypes.Requireable<boolean>;
+    let currentHoveredRef: PropTypes.Requireable<object>;
+    let data: PropTypes.Requireable<any>;
+    let template: PropTypes.Requireable<(...args: any[]) => any>;
+    let hideTooltip: PropTypes.Requireable<(...args: any[]) => any>;
 }
+import PropTypes from 'prop-types';

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React from 'react';
+import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Popup, useVirtualElementRef } from '@gravity-ui/uikit';
 import { hideTooltip } from '../../store/reducers/tooltip';
 import { tooltipTemplates } from '../../utils/tooltip';
 import './ReduxTooltip.scss';
@@ -19,7 +19,7 @@ function ReduxTooltip(props) {
     const fakeAnchor = useVirtualElementRef({
         rect: { top: (_a = props.positions) === null || _a === void 0 ? void 0 : _a.top, left: (_b = props.positions) === null || _b === void 0 ? void 0 : _b.left },
     });
-    useEffect(() => {
+    React.useEffect(() => {
         window.addEventListener('scroll', handleScroll, true);
         return () => {
             window.removeEventListener('scroll', handleScroll);
@@ -33,16 +33,16 @@ function ReduxTooltip(props) {
     };
     const renderPositionPopup = (visible, positions, data, additionalData) => {
         const { template, popupClassName, hideTooltip } = props;
-        return (_jsx(React.Fragment, { children: _jsx(Popup, Object.assign({ open: visible, placement: ['top', 'bottom', 'left', 'right'], contentClassName: popupClassName, anchorRef: fakeAnchor, onOutsideClick: hideTooltip }, { children: data && template(data, additionalData) })) }));
+        return (_jsx(React.Fragment, { children: _jsx(Popup, { open: visible, placement: ['top', 'bottom', 'left', 'right'], contentClassName: popupClassName, anchorRef: fakeAnchor, onOutsideClick: hideTooltip, children: data && template(data, additionalData) }) }));
     };
     const renderAnchorPopup = (visible, anchor, data, additionalData) => {
         const { template, popupClassName, hideTooltip } = props;
-        return (_jsx(Popup, Object.assign({ open: visible, anchorRef: { current: anchor }, hasArrow: true, placement: ['top', 'bottom', 'left', 'right'], className: popupClassName, onOutsideClick: hideTooltip }, { children: data && template(data, additionalData) })));
+        return (_jsx(Popup, { open: visible, anchorRef: { current: anchor }, hasArrow: true, placement: ['top', 'bottom', 'left', 'right'], className: popupClassName, onOutsideClick: hideTooltip, children: data && template(data, additionalData) }));
     };
     const { className = '', toolTipVisible, currentHoveredRef, data, additionalData, positions, } = props;
-    return (_jsx("div", Object.assign({ className: `redux-tooltip ${className}` }, { children: positions
+    return (_jsx("div", { className: `redux-tooltip ${className}`, children: positions
             ? renderPositionPopup(toolTipVisible, positions, data, additionalData)
-            : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData) })));
+            : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData) }));
 }
 const mapStateToProps = (state) => {
     const { toolTipVisible, currentHoveredRef, data, templateType, additionalData, positions } = state.tooltip;

package/dist/containers/Storage/EmptyFilter/EmptyFilter.d.ts

@@ -4,5 +4,5 @@ interface EmptyFilterProps {
     showAll?: string;
     onShowAll?: VoidFunction;
 }
-export declare const EmptyFilter: ({ title, message, showAll, onShowAll, }: EmptyFilterProps) => JSX.Element;
+export declare const EmptyFilter: ({ title, message, showAll, onShowAll, }: EmptyFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/EmptyFilter/EmptyFilter.js

@@ -4,5 +4,5 @@ import { EmptyState } from '../../../components/EmptyState';
 import { Illustration } from '../../../components/Illustration';
 import i18n from './i18n';
 export const EmptyFilter = ({ title, message = i18n('default_message'), showAll = i18n('default_button_label'), onShowAll, }) => (_jsx(EmptyState, { image: _jsx(Illustration, { name: "thumbsUp" }), position: "left", title: title, description: message, actions: onShowAll && [
-        _jsx(Button, Object.assign({ onClick: onShowAll }, { children: showAll }), "show-all"),
+        _jsx(Button, { onClick: onShowAll, children: showAll }, "show-all"),
     ] }));

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

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

package/dist/containers/Storage/EmptyFilter/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-storage-empty-filter';
-i18n.registerKeyset(Lang.En, COMPONENT, en);
-i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
-export default i18n.keyset(COMPONENT);
+export default registerKeysets(COMPONENT, { ru, en });

package/dist/containers/Storage/PDisk/PDisk.d.ts

@@ -6,5 +6,5 @@ interface PDiskProps {
     data?: PreparedPDisk;
     vDisks?: TVDiskStateInfo[];
 }
-export declare const PDisk: ({ nodeId, data, vDisks }: PDiskProps) => JSX.Element;
+export declare const PDisk: ({ nodeId, data, vDisks }: PDiskProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/PDisk/PDisk.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef } from 'react';
-import cn from 'bem-cn-lite';
-import { InternalLink } from '../../../components/InternalLink';
-import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
+import React from 'react';
 import { DiskStateProgressBar } from '../../../components/DiskStateProgressBar/DiskStateProgressBar';
+import { InternalLink } from '../../../components/InternalLink';
 import { PDiskPopup } from '../../../components/PDiskPopup/PDiskPopup';
+import { VDiskWithDonorsStack } from '../../../components/VDisk/VDiskWithDonorsStack';
 import routes, { createHref } from '../../../routes';
+import { cn } from '../../../utils/cn';
 import { stringifyVdiskId } from '../../../utils/dataFormatters/dataFormatters';
 import { STRUCTURE } from '../../Node/NodePages';
 import './PDisk.scss';
 const b = cn('pdisk-storage');
 export const PDisk = ({ nodeId, data = {}, vDisks }) => {
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-    const anchor = useRef(null);
+    const [isPopupVisible, setIsPopupVisible] = React.useState(false);
+    const anchor = React.useRef(null);
     const showPopup = () => {
         setIsPopupVisible(true);
     };
@@ -23,13 +23,13 @@ export const PDisk = ({ nodeId, data = {}, vDisks }) => {
         if (!(vDisks === null || vDisks === void 0 ? void 0 : vDisks.length)) {
             return null;
         }
-        return (_jsx("div", Object.assign({ className: b('vdisks') }, { children: vDisks.map((vdisk) => {
-                return (_jsx("div", Object.assign({ className: b('vdisks-item'), style: {
+        return (_jsx("div", { className: b('vdisks'), children: vDisks.map((vdisk) => {
+                return (_jsx("div", { className: b('vdisks-item'), style: {
                         // 1 is small enough for empty disks to be of the minimum width
                         // but if all of them are empty, `flex-grow: 1` would size them evenly
                         flexGrow: Number(vdisk.AllocatedSize) || 1,
-                    } }, { children: _jsx(VDiskWithDonorsStack, { data: vdisk, compact: true, stackClassName: b('donors-stack') }) }), stringifyVdiskId(vdisk.VDiskId)));
-            }) })));
+                    }, children: _jsx(VDiskWithDonorsStack, { data: vdisk, compact: true, stackClassName: b('donors-stack') }) }, stringifyVdiskId(vdisk.VDiskId)));
+            }) }));
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", Object.assign({ className: b(), ref: anchor }, { children: [renderVDisks(), _jsxs(InternalLink, Object.assign({ to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup }, { children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", Object.assign({ className: b('media-type') }, { children: data.Type }))] }))] }))] }));
+    return (_jsxs(React.Fragment, { children: [_jsx(PDiskPopup, { data: data, anchorRef: anchor, open: isPopupVisible }), _jsxs("div", { className: b(), ref: anchor, children: [renderVDisks(), _jsxs(InternalLink, { to: createHref(routes.node, { id: nodeId, activeTab: STRUCTURE }, { pdiskId: data.PDiskId || '' }), className: b('content'), onMouseEnter: showPopup, onMouseLeave: hidePopup, children: [_jsx(DiskStateProgressBar, { diskAllocatedPercent: data.AllocatedPercent, severity: data.Severity }), _jsx("div", { className: b('media-type'), children: data.Type })] })] })] }));
 };

package/dist/containers/Storage/Storage.d.ts

@@ -5,5 +5,5 @@ interface StorageProps {
     tenant?: string;
     nodeId?: string;
 }
-export declare const Storage: ({ additionalNodesProps, tenant, nodeId }: StorageProps) => JSX.Element;
+export declare const Storage: ({ additionalNodesProps, tenant, nodeId }: StorageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/Storage.js

@@ -1,68 +1,58 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect } from 'react';
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { AccessDenied } from '../../components/Errors/403';
-import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { ResponseError } from '../../components/Errors/ResponseError';
-import { setInitialState, setVisibleEntities, setStorageTextFilter, setUsageFilter, setStorageType, setNodesUptimeFilter, setDataWasNotLoaded, getStorageNodesInfo, getStorageGroupsInfo, setNodesSortParams, setGroupsSortParams, } from '../../store/reducers/storage/storage';
-import { selectFilteredGroups, selectFilteredNodes, selectEntitiesCount, selectUsageFilterOptions, selectNodesSortParams, selectGroupsSortParams, } from '../../store/reducers/storage/selectors';
-import { VISIBLE_ENTITIES, STORAGE_TYPES } from '../../store/reducers/storage/constants';
+import { TableWithControlsLayout } from '../../components/TableWithControlsLayout/TableWithControlsLayout';
 import { selectNodesMap } from '../../store/reducers/nodesList';
-import { useAutofetcher, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, useTypedDispatch, } from '../../utils/hooks';
+import { STORAGE_TYPES, VISIBLE_ENTITIES } from '../../store/reducers/storage/constants';
+import { filterGroups, filterNodes, getUsageFilterOptions, selectGroupsSortParams, selectNodesSortParams, } from '../../store/reducers/storage/selectors';
+import { setGroupsSortParams, setInitialState, setNodesSortParams, setStorageTextFilter, setStorageType, setUptimeFilter, setUsageFilter, setVisibleEntities, storageApi, } from '../../store/reducers/storage/storage';
+import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedDispatch, useTypedSelector, } from '../../utils/hooks';
 import { NodesUptimeFilterValues } from '../../utils/nodes';
-import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
+import { StorageControls } from './StorageControls/StorageControls';
 import { StorageGroups } from './StorageGroups/StorageGroups';
 import { StorageNodes } from './StorageNodes/StorageNodes';
-import { StorageControls } from './StorageControls/StorageControls';
 import { b } from './shared';
 import './Storage.scss';
 export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     const dispatch = useTypedDispatch();
     const { autorefresh } = useTypedSelector((state) => state.schema);
-    const { loading, wasLoaded, error, type, visible: visibleEntities, filter, usageFilter, nodesUptimeFilter, } = useTypedSelector((state) => state.storage);
-    const storageNodes = useTypedSelector(selectFilteredNodes);
-    const storageGroups = useTypedSelector(selectFilteredGroups);
-    const entitiesCount = useTypedSelector(selectEntitiesCount);
+    const { type, visible: visibleEntities, filter, usageFilter, uptimeFilter, } = useTypedSelector((state) => state.storage);
     const nodesMap = useTypedSelector(selectNodesMap);
-    const usageFilterOptions = useTypedSelector(selectUsageFilterOptions);
     const nodesSortParams = useTypedSelector(selectNodesSortParams);
     const groupsSortParams = useTypedSelector(selectGroupsSortParams);
     // Do not display Nodes table for Node page (NodeId present)
     const isNodePage = nodeId !== undefined;
     const storageType = isNodePage ? STORAGE_TYPES.groups : type;
-    useEffect(() => {
+    const nodesRequestParams = useNodesRequestParams(Object.assign({ filter, nodesUptimeFilter: uptimeFilter }, nodesSortParams));
+    const storageRequestParams = useStorageRequestParams(Object.assign({ filter }, groupsSortParams));
+    const autoRefreshInterval = tenant ? autorefresh : DEFAULT_POLLING_INTERVAL;
+    const nodesQuery = storageApi.useGetStorageNodesInfoQuery(Object.assign({ tenant, visibleEntities }, nodesRequestParams), {
+        skip: storageType !== STORAGE_TYPES.nodes,
+        pollingInterval: autoRefreshInterval,
+    });
+    const groupsQuery = storageApi.useGetStorageGroupsInfoQuery(Object.assign({ tenant, visibleEntities, nodeId }, storageRequestParams), {
+        skip: storageType !== STORAGE_TYPES.groups,
+        pollingInterval: autoRefreshInterval,
+    });
+    const { currentData, isFetching, error } = storageType === STORAGE_TYPES.nodes ? nodesQuery : groupsQuery;
+    const { currentData: { nodes = [] } = {} } = nodesQuery;
+    const { currentData: { groups = [] } = {} } = groupsQuery;
+    const _a = currentData !== null && currentData !== void 0 ? currentData : { found: 0, total: 0 }, { nodes: _, groups: __ } = _a, entitiesCount = __rest(_a, ["nodes", "groups"]);
+    const isLoading = currentData === undefined && isFetching;
+    const storageNodes = React.useMemo(() => filterNodes(nodes, filter, uptimeFilter), [filter, nodes, uptimeFilter]);
+    const storageGroups = React.useMemo(() => filterGroups(groups, filter, usageFilter), [filter, groups, usageFilter]);
+    const usageFilterOptions = React.useMemo(() => getUsageFilterOptions(groups), [groups]);
+    React.useEffect(() => {
         return () => {
             // Clean data on component unmount
             dispatch(setInitialState());
         };
     }, [dispatch]);
-    const nodesRequestParams = useNodesRequestParams(Object.assign({ filter,
-        nodesUptimeFilter }, nodesSortParams));
-    const storageRequestParams = useStorageRequestParams(Object.assign({ filter }, groupsSortParams));
     const [nodesSort, handleNodesSort] = useTableSort(nodesSortParams, (params) => dispatch(setNodesSortParams(params)));
     const [groupsSort, handleGroupsSort] = useTableSort(groupsSortParams, (params) => dispatch(setGroupsSortParams(params)));
-    const fetchData = useCallback((isBackground) => {
-        if (!isBackground) {
-            dispatch(setDataWasNotLoaded());
-        }
-        const nodesParams = nodesRequestParams || {};
-        const storageParams = storageRequestParams || {};
-        if (storageType === STORAGE_TYPES.nodes) {
-            dispatch(getStorageNodesInfo(Object.assign({ tenant, visibleEntities }, nodesParams)));
-        }
-        else {
-            dispatch(getStorageGroupsInfo(Object.assign({ tenant, visibleEntities, nodeId }, storageParams)));
-        }
-    }, [
-        dispatch,
-        tenant,
-        nodeId,
-        visibleEntities,
-        storageType,
-        storageRequestParams,
-        nodesRequestParams,
-    ]);
-    const autorefreshEnabled = tenant ? autorefresh : true;
-    useAutofetcher(fetchData, [fetchData], autorefreshEnabled);
     const handleUsageFilterChange = (value) => {
         dispatch(setUsageFilter(value));
     };
@@ -76,19 +66,19 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
         dispatch(setStorageType(value));
     };
     const handleUptimeFilterChange = (value) => {
-        dispatch(setNodesUptimeFilter(value));
+        dispatch(setUptimeFilter(value));
     };
     const handleShowAllNodes = () => {
         handleGroupVisibilityChange(VISIBLE_ENTITIES.all);
         handleUptimeFilterChange(NodesUptimeFilterValues.All);
     };
     const renderDataTable = () => {
-        return (_jsxs(_Fragment, { children: [storageType === STORAGE_TYPES.groups && (_jsx(StorageGroups, { visibleEntities: visibleEntities, data: storageGroups, tableSettings: DEFAULT_TABLE_SETTINGS, nodes: nodesMap, onShowAll: () => handleGroupVisibilityChange(VISIBLE_ENTITIES.all), sort: groupsSort, handleSort: handleGroupsSort })), storageType === STORAGE_TYPES.nodes && (_jsx(StorageNodes, { visibleEntities: visibleEntities, nodesUptimeFilter: nodesUptimeFilter, data: storageNodes, tableSettings: DEFAULT_TABLE_SETTINGS, onShowAll: handleShowAllNodes, additionalNodesProps: additionalNodesProps, sort: nodesSort, handleSort: handleNodesSort }))] }));
+        return (_jsxs(React.Fragment, { children: [storageType === STORAGE_TYPES.groups && (_jsx(StorageGroups, { visibleEntities: visibleEntities, data: storageGroups, tableSettings: DEFAULT_TABLE_SETTINGS, nodes: nodesMap, onShowAll: () => handleGroupVisibilityChange(VISIBLE_ENTITIES.all), sort: groupsSort, handleSort: handleGroupsSort }, "groups")), storageType === STORAGE_TYPES.nodes && (_jsx(StorageNodes, { visibleEntities: visibleEntities, nodesUptimeFilter: uptimeFilter, data: storageNodes, tableSettings: DEFAULT_TABLE_SETTINGS, onShowAll: handleShowAllNodes, additionalNodesProps: additionalNodesProps, sort: nodesSort, handleSort: handleNodesSort }, "nodes"))] }));
     };
     const renderControls = () => {
-        return (_jsx(StorageControls, { searchValue: filter, handleSearchValueChange: handleTextFilterChange, withTypeSelector: !isNodePage, storageType: storageType, handleStorageTypeChange: handleStorageTypeChange, visibleEntities: visibleEntities, handleVisibleEntitiesChange: handleGroupVisibilityChange, nodesUptimeFilter: nodesUptimeFilter, handleNodesUptimeFilterChange: handleUptimeFilterChange, groupsUsageFilter: usageFilter, groupsUsageFilterOptions: usageFilterOptions, handleGroupsUsageFilterChange: handleUsageFilterChange, entitiesCountCurrent: storageType === STORAGE_TYPES.groups
+        return (_jsx(StorageControls, { searchValue: filter, handleSearchValueChange: handleTextFilterChange, withTypeSelector: !isNodePage, storageType: storageType, handleStorageTypeChange: handleStorageTypeChange, visibleEntities: visibleEntities, handleVisibleEntitiesChange: handleGroupVisibilityChange, nodesUptimeFilter: uptimeFilter, handleNodesUptimeFilterChange: handleUptimeFilterChange, groupsUsageFilter: usageFilter, groupsUsageFilterOptions: usageFilterOptions, handleGroupsUsageFilterChange: handleUsageFilterChange, entitiesCountCurrent: storageType === STORAGE_TYPES.groups
                 ? storageGroups.length
-                : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: loading && !wasLoaded }));
+                : storageNodes.length, entitiesCountTotal: entitiesCount.total, entitiesLoading: isLoading }));
     };
     if (error) {
         if (error.status === 403) {
@@ -96,5 +86,5 @@ export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
         }
         return _jsx(ResponseError, { error: error });
     }
-    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, Object.assign({ loading: loading && !wasLoaded, className: b('table') }, { children: renderDataTable() }))] }));
+    return (_jsxs(TableWithControlsLayout, { children: [_jsx(TableWithControlsLayout.Controls, { children: renderControls() }), _jsx(TableWithControlsLayout.Table, { loading: isLoading, className: b('table'), children: renderDataTable() })] }));
 };

package/dist/containers/Storage/Storage.scss

@@ -6,7 +6,7 @@
     }
 
     &__table {
-        .yc-tooltip {
+        .g-tooltip {
             // stylelint-disable-next-line declaration-no-important
             height: var(--g-text-body-2-line-height) !important;
         }

package/dist/containers/Storage/StorageControls/StorageControls.d.ts

@@ -1,6 +1,6 @@
 import type { StorageType, VisibleEntities } from '../../../store/reducers/storage/types';
-import { NodesUptimeFilterValues } from '../../../utils/nodes';
-import { type UsageFilterItem } from '../UsageFilter/UsageFilter';
+import type { NodesUptimeFilterValues } from '../../../utils/nodes';
+import type { UsageFilterItem } from '../UsageFilter/UsageFilter';
 interface StorageControlsProps {
     searchValue?: string;
     handleSearchValueChange: (value: string) => void;
@@ -19,5 +19,5 @@ interface StorageControlsProps {
     entitiesCountTotal?: number;
     entitiesLoading: boolean;
 }
-export declare const StorageControls: ({ searchValue, handleSearchValueChange, withTypeSelector, storageType, handleStorageTypeChange, visibleEntities, handleVisibleEntitiesChange, nodesUptimeFilter, handleNodesUptimeFilterChange, withGroupsUsageFilter, groupsUsageFilter, groupsUsageFilterOptions, handleGroupsUsageFilterChange, entitiesCountCurrent, entitiesCountTotal, entitiesLoading, }: StorageControlsProps) => JSX.Element;
+export declare const StorageControls: ({ searchValue, handleSearchValueChange, withTypeSelector, storageType, handleStorageTypeChange, visibleEntities, handleVisibleEntitiesChange, nodesUptimeFilter, handleNodesUptimeFilterChange, withGroupsUsageFilter, groupsUsageFilter, groupsUsageFilterOptions, handleGroupsUsageFilterChange, entitiesCountCurrent, entitiesCountTotal, entitiesLoading, }: StorageControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageControls/StorageControls.js

@@ -1,17 +1,18 @@
-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 { EntitiesCount } from '../../../components/EntitiesCount/EntitiesCount';
 import { Search } from '../../../components/Search/Search';
 import { UptimeFilter } from '../../../components/UptimeFIlter';
 import { STORAGE_TYPES } from '../../../store/reducers/storage/constants';
-import { UsageFilter } from '../UsageFilter/UsageFilter';
 import { StorageTypeFilter } from '../StorageTypeFilter/StorageTypeFilter';
 import { StorageVisibleEntitiesFilter } from '../StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter';
+import { UsageFilter } from '../UsageFilter/UsageFilter';
 import i18n from '../i18n';
 import { b } from '../shared';
 export const StorageControls = ({ searchValue, handleSearchValueChange, withTypeSelector, storageType, handleStorageTypeChange, visibleEntities, handleVisibleEntitiesChange, nodesUptimeFilter, handleNodesUptimeFilterChange, withGroupsUsageFilter, groupsUsageFilter, groupsUsageFilterOptions, handleGroupsUsageFilterChange, entitiesCountCurrent, entitiesCountTotal, entitiesLoading, }) => {
     const isNodes = storageType === STORAGE_TYPES.nodes;
     const entityName = isNodes ? i18n('nodes') : i18n('groups');
-    return (_jsxs(_Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchValueChange, placeholder: isNodes
+    return (_jsxs(React.Fragment, { children: [_jsx(Search, { value: searchValue, onChange: handleSearchValueChange, placeholder: isNodes
                     ? i18n('controls_nodes-search-placeholder')
                     : i18n('controls_groups-search-placeholder'), className: b('search') }), withTypeSelector && (_jsx(StorageTypeFilter, { value: storageType, onChange: handleStorageTypeChange })), _jsx(StorageVisibleEntitiesFilter, { value: visibleEntities, onChange: handleVisibleEntitiesChange }), isNodes && (_jsx(UptimeFilter, { value: nodesUptimeFilter, onChange: handleNodesUptimeFilterChange })), !isNodes && withGroupsUsageFilter && (_jsx(UsageFilter, { value: groupsUsageFilter, onChange: handleGroupsUsageFilterChange, groups: groupsUsageFilterOptions })), _jsx(EntitiesCount, { label: entityName, loading: entitiesLoading, total: entitiesCountTotal, current: entitiesCountCurrent })] }));
 };

package/dist/containers/Storage/StorageGroups/StorageGroups.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Settings, SortOrder } from '@gravity-ui/react-data-table';
-import type { NodesMap } from '../../../types/store/nodesList';
+import type { Settings, SortOrder } from '@gravity-ui/react-data-table';
 import type { PreparedStorageGroup, VisibleEntities } from '../../../store/reducers/storage/types';
+import type { NodesMap } from '../../../types/store/nodesList';
 import type { HandleSort } from '../../../utils/hooks/useTableSort';
 import './StorageGroups.scss';
 interface StorageGroupsProps {
@@ -13,5 +12,5 @@ interface StorageGroupsProps {
     sort?: SortOrder;
     handleSort?: HandleSort;
 }
-export declare function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }: StorageGroupsProps): JSX.Element;
+export declare function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }: StorageGroupsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/containers/Storage/StorageGroups/StorageGroups.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import React from 'react';
 import DataTable from '@gravity-ui/react-data-table';
 import { VISIBLE_ENTITIES } from '../../../store/reducers/storage/constants';
-import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
 import { StorageGroupsEmptyDataMessage } from './StorageGroupsEmptyDataMessage';
+import { getPreparedStorageGroupsColumns } from './getStorageGroupsColumns';
 import i18n from './i18n';
 import './StorageGroups.scss';
 export function StorageGroups({ data, tableSettings, visibleEntities, nodes, onShowAll, sort, handleSort, }) {
-    const columns = useMemo(() => {
+    const columns = React.useMemo(() => {
         return getPreparedStorageGroupsColumns(nodes, visibleEntities);
     }, [nodes, visibleEntities]);
     if (!data.length && visibleEntities !== VISIBLE_ENTITIES.all) {

package/dist/containers/Storage/StorageGroups/StorageGroupsEmptyDataMessage.d.ts

@@ -3,5 +3,5 @@ interface StorageNodesEmptyDataMessageProps {
     visibleEntities?: VisibleEntities;
     onShowAll?: VoidFunction;
 }
-export declare const StorageGroupsEmptyDataMessage: ({ visibleEntities, onShowAll, }: StorageNodesEmptyDataMessageProps) => JSX.Element | null;
+export declare const StorageGroupsEmptyDataMessage: ({ visibleEntities, onShowAll, }: StorageNodesEmptyDataMessageProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};